/* ─── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --color-dark:        #212529;
  --color-white:       #FFFFFF;
  --color-green:       #4ADE80;
  --color-purple:      #7B3FF2;
  --color-purple-light:#EDE9F6;
  --color-neutral-100: #F4F4F5;
  --color-neutral-200: #E5E5E5;
  --color-neutral-400: #A3A3A3;
  --color-neutral-600: #52525B;
  --color-yellow-bg:   #FEFCE8;
  --color-error:       #DC2626;
  --color-success:     #16A34A;
  --font-main: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-h1: 64px; --text-h2: 40px; --text-h3: 32px;
  --text-h4: 24px; --text-h5: 20px;
  --text-p-xl: 24px; --text-p-l: 20px; --text-p: 16px;
  --text-label-l: 14px; --text-label: 12px;
  --text-btn: 16px; --text-btn-s: 14px; --text-caption: 10px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --sp-15:60px; --sp-20:80px;
  --radius-sm:4px; --radius-md:8px; --radius-full:999px;
}

/* ─── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-main);font-size:var(--text-p);color:var(--color-dark);background:var(--color-white);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%}

/* ─── HEADER ── */
.header{background:var(--color-dark);position:sticky;top:0;z-index:100;height:64px;display:flex;align-items:center;padding:0 var(--sp-15)}
.header__inner{width:100%;display:flex;align-items:center;gap:var(--sp-6)}
.logo{display:flex;align-items:center;gap:6px;flex-shrink:0;text-decoration:none}
.logo__wordmark{display:flex;flex-direction:column;line-height:1}
.logo__text{font-size:18px;font-weight:800;color:var(--color-white);letter-spacing:-0.5px}
.logo__text--sub{font-size:14px;font-weight:700;color:var(--color-green);letter-spacing:0.5px;text-transform:uppercase}
.logo__dot{width:28px;height:28px;background:var(--color-white);border-radius:50%;flex-shrink:0}
.nav{display:flex;align-items:center;gap:var(--sp-1);flex:1;margin-left:var(--sp-4)}
.nav__item{position:relative}
.nav__link{display:flex;align-items:center;gap:4px;color:var(--color-white);font-size:var(--text-p);font-weight:600;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:background .15s;border:none;background:none;font-family:var(--font-main)}
.nav__link:hover,.nav__link:focus{background:rgba(255,255,255,.1);outline:none}
.nav__chevron{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}
.nav__item.open .nav__chevron{transform:rotate(180deg)}
.dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--color-white);border-radius:var(--radius-md);box-shadow:0 8px 32px rgba(0,0,0,.12);min-width:220px;overflow:hidden;z-index:200}
.nav__item.open .dropdown{display:block}
.dropdown__item{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-5);font-size:var(--text-p);font-weight:500;color:var(--color-dark);cursor:pointer;transition:background .12s}
.dropdown__item:hover{background:var(--color-purple-light)}
.dropdown__item svg{width:14px;height:14px;stroke:var(--color-neutral-400);fill:none;stroke-width:2}
.header__right{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto;flex-shrink:0}
.btn-signin{display:flex;align-items:center;gap:var(--sp-2);background:var(--color-purple);color:var(--color-white);border:none;border-radius:var(--radius-full);padding:var(--sp-2) var(--sp-5);font-size:var(--text-btn-s);font-weight:700;font-family:var(--font-main);cursor:pointer;white-space:nowrap;transition:background .15s}
.btn-signin:hover{background:#6930d4}
.btn-signin svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ─── BREADCRUMB ── */
.breadcrumb{padding:var(--sp-3) var(--sp-15);background:var(--color-neutral-100);border-bottom:1px solid var(--color-neutral-200);display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-label-l);color:var(--color-neutral-400)}
.breadcrumb a{color:var(--color-neutral-400);transition:color .15s}
.breadcrumb a:hover{color:var(--color-purple)}
.breadcrumb__sep{color:var(--color-neutral-200)}
.breadcrumb__current{color:var(--color-dark);font-weight:600}

/* ─── PAGE HERO ── */
.page-hero{background:var(--color-dark);padding:var(--sp-12) var(--sp-15);position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;right:-80px;top:-80px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(123,63,242,.15) 0%,transparent 70%)}
.page-hero__eyebrow{font-size:var(--text-label-l);font-weight:700;color:var(--color-green);letter-spacing:2px;text-transform:uppercase;margin-bottom:var(--sp-3)}
.page-hero__title{font-size:clamp(32px,4vw,var(--text-h1));font-weight:900;color:var(--color-white);line-height:1.1;letter-spacing:-1px;text-transform:lowercase;margin-bottom:var(--sp-4)}
.page-hero__sub{font-size:var(--text-p-l);color:rgba(255,255,255,.7);max-width:600px;line-height:1.6}

/* ─── SECTION ── */
.section{padding:var(--sp-20) var(--sp-15)}
.section--dark{background:var(--color-dark);color:var(--color-white)}
.section--lavender{background:var(--color-purple-light)}
.section--grey{background:var(--color-neutral-100)}
.section--yellow{background:var(--color-yellow-bg)}
.section__eyebrow{font-size:var(--text-label-l);font-weight:700;color:var(--color-purple);letter-spacing:2px;text-transform:uppercase;margin-bottom:var(--sp-3)}
.section--dark .section__eyebrow{color:var(--color-green)}
.section__headline{font-size:clamp(24px,3vw,var(--text-h2));font-weight:900;line-height:1.1;letter-spacing:-.5px;text-transform:lowercase;margin-bottom:var(--sp-4)}
.section__body{font-size:var(--text-p-l);color:var(--color-neutral-600);line-height:1.6;margin-bottom:var(--sp-6);max-width:700px}
.section--dark .section__body{color:rgba(255,255,255,.7)}

/* ─── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);border-radius:var(--radius-full);font-family:var(--font-main);font-weight:700;font-size:var(--text-btn);cursor:pointer;border:2px solid transparent;transition:all .15s;white-space:nowrap;text-decoration:none}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.btn--primary{background:var(--color-dark);color:var(--color-white);padding:12px var(--sp-6);border-color:var(--color-dark)}
.btn--primary:hover{background:#333;border-color:#333}
.btn--purple{background:var(--color-purple);color:var(--color-white);padding:12px var(--sp-6);border-color:var(--color-purple)}
.btn--purple:hover{background:#6930d4;border-color:#6930d4}
.btn--secondary{background:transparent;color:var(--color-white);padding:12px var(--sp-6);border-color:rgba(255,255,255,.5)}
.btn--secondary:hover{border-color:var(--color-white);background:rgba(255,255,255,.08)}
.btn--outline-dark{background:transparent;color:var(--color-dark);padding:10px var(--sp-5);border-color:var(--color-dark);font-size:var(--text-btn-s)}
.btn--outline-dark:hover{background:var(--color-dark);color:var(--color-white)}
.quick-link{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--color-purple-light);color:var(--color-dark);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-5);font-size:var(--text-btn-s);font-weight:600;text-decoration:none;transition:background .15s}
.quick-link:hover{background:#ddd5f5}
.quick-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ─── GRID ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}

/* ─── CARD ── */
.card{background:var(--color-white);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-neutral-200);transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-2px)}
.card__body{padding:var(--sp-5)}
.card__eyebrow{font-size:var(--text-label);font-weight:700;color:var(--color-purple);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-2)}
.card__title{font-size:var(--text-h5);font-weight:800;color:var(--color-dark);margin-bottom:var(--sp-2);line-height:1.2}
.card__text{font-size:var(--text-label-l);color:var(--color-neutral-600);line-height:1.5;margin-bottom:var(--sp-4)}
.card--dark{background:var(--color-dark);border-color:rgba(255,255,255,.08)}
.card--dark .card__eyebrow{color:var(--color-green)}
.card--dark .card__title{color:var(--color-white)}
.card--dark .card--text{color:rgba(255,255,255,.65)}

/* ─── TABLE ── */
.table-wrap{overflow-x:auto;margin-top:var(--sp-6)}
table{width:100%;border-collapse:collapse;font-size:var(--text-p)}
thead tr{background:var(--color-dark);color:var(--color-white)}
thead th{padding:var(--sp-4) var(--sp-5);text-align:left;font-weight:700;font-size:var(--text-label-l);letter-spacing:.5px;text-transform:uppercase}
tbody tr{border-bottom:1px solid var(--color-neutral-200)}
tbody tr:hover{background:var(--color-neutral-100)}
tbody td{padding:var(--sp-4) var(--sp-5);color:var(--color-dark);font-size:var(--text-p)}
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--radius-full);font-size:var(--text-label);font-weight:700}
.badge--green{background:rgba(74,222,128,.15);color:#16a34a}
.badge--grey{background:var(--color-neutral-200);color:var(--color-neutral-600)}

/* ─── FORM ── */
.form-group{margin-bottom:var(--sp-5)}
.form-label{display:block;font-size:var(--text-label-l);font-weight:700;color:var(--color-dark);margin-bottom:var(--sp-2)}
.form-input,.form-select,.form-textarea{width:100%;border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);padding:12px var(--sp-4);font-size:var(--text-p);font-family:var(--font-main);color:var(--color-dark);background:var(--color-white);transition:border-color .15s,box-shadow .15s;outline:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--color-purple);box-shadow:0 0 0 3px rgba(123,63,242,.12)}
.form-textarea{resize:vertical;min-height:120px}
.form-caption{font-size:var(--text-label);color:var(--color-neutral-400);margin-top:var(--sp-1)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}

/* ─── ACCORDION ── */
.accordion{border-top:1px solid var(--color-neutral-200)}
.accordion__item{border-bottom:1px solid var(--color-neutral-200)}
.accordion__header{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) 0;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:var(--font-main)}
.accordion__icon{width:28px;height:28px;border-radius:50%;background:var(--color-green);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;font-weight:700;color:var(--color-dark);transition:background .15s}
.accordion__header.open .accordion__icon{background:var(--color-dark);color:var(--color-white)}
.accordion__title{font-size:var(--text-h5);font-weight:800;color:var(--color-dark)}
.accordion__body{display:none;padding:0 0 var(--sp-5) calc(28px + var(--sp-4));font-size:var(--text-p);color:var(--color-neutral-600);line-height:1.6}
.accordion__body.open{display:block}

/* ─── INFO BOX ── */
.info-box{border-radius:var(--radius-md);padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-6);display:flex;gap:var(--sp-4);align-items:flex-start}
.info-box--blue{background:#EFF6FF;border-left:4px solid #3B82F6}
.info-box--yellow{background:#FEFCE8;border-left:4px solid #EAB308}
.info-box--red{background:#FEF2F2;border-left:4px solid var(--color-error)}
.info-box--green{background:rgba(74,222,128,.1);border-left:4px solid var(--color-green)}
.info-box svg{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.info-box--blue svg{stroke:#3B82F6;fill:none;stroke-width:2}
.info-box--yellow svg{stroke:#EAB308;fill:none;stroke-width:2}
.info-box--red svg{stroke:var(--color-error);fill:none;stroke-width:2}
.info-box--green svg{stroke:#16a34a;fill:none;stroke-width:2}
.info-box__content{}
.info-box__title{font-weight:700;font-size:var(--text-p);margin-bottom:4px}
.info-box__text{font-size:var(--text-label-l);color:var(--color-neutral-600);line-height:1.5}

/* ─── FOOTER ── */
.footer{background:var(--color-dark);color:var(--color-white)}
.footer__links{padding:var(--sp-15);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);border-bottom:1px solid rgba(255,255,255,.08)}
.footer__col-title{font-size:var(--text-h5);font-weight:800;margin-bottom:var(--sp-5)}
.footer__col ul{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer__col ul li a{font-size:var(--text-p);color:rgba(255,255,255,.65);transition:color .15s}
.footer__col ul li a:hover{color:var(--color-white)}
.footer__bottom{padding:var(--sp-6) var(--sp-15)}
.footer__bottom-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.footer__copyright{font-size:var(--text-label-l);color:rgba(255,255,255,.5)}
.footer__support{font-size:var(--text-label-l);color:rgba(255,255,255,.5);margin-bottom:var(--sp-4)}
.footer__legal{font-size:var(--text-caption);color:rgba(255,255,255,.35);line-height:1.6}
.footer__legal a{color:var(--color-purple);text-decoration:underline}

/* ─── UTILS ── */
.container{max-width:1240px;margin:0 auto}
.text-center{text-align:center}
.mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)}
.mb-8{margin-bottom:var(--sp-8)} .mb-10{margin-bottom:var(--sp-10)}
.flex-center{display:flex;justify-content:center}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.list-check{display:flex;flex-direction:column;gap:var(--sp-3)}
.list-check li{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--text-p);line-height:1.5}
.list-check li::before{content:'';width:20px;height:20px;border-radius:50%;background:var(--color-green);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212529' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:center}
.list-cross{display:flex;flex-direction:column;gap:var(--sp-3)}
.list-cross li{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--text-p);line-height:1.5}
.list-cross li::before{content:'';width:20px;height:20px;border-radius:50%;background:#FEF2F2;flex-shrink:0;margin-top:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='3'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:center}

/* ─── NETWORK CARD ── */
.network-card{border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);padding:var(--sp-5);transition:border-color .15s,box-shadow .15s}
.network-card:hover{border-color:var(--color-purple);box-shadow:0 4px 12px rgba(123,63,242,.1)}
.network-card__code{font-size:var(--text-h4);font-weight:900;color:var(--color-purple);margin-bottom:var(--sp-1)}
.network-card__city{font-size:var(--text-h5);font-weight:700;color:var(--color-dark);margin-bottom:var(--sp-1)}
.network-card__info{font-size:var(--text-label-l);color:var(--color-neutral-400)}

/* ─── RESPONSIVE ── */
@media(max-width:1024px){
  .header{padding:0 var(--sp-6)}
  .section{padding:var(--sp-12) var(--sp-6)}
  .breadcrumb{padding:var(--sp-3) var(--sp-6)}
  .page-hero{padding:var(--sp-10) var(--sp-6)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer__links{padding:var(--sp-10) var(--sp-6)}
  .footer__bottom{padding:var(--sp-6)}
}
@media(max-width:768px){
  .nav{display:none}
  .header{padding:0 var(--sp-5)}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .footer__links{grid-template-columns:1fr}
  .footer__bottom-top{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .breadcrumb{padding:var(--sp-3) var(--sp-5)}
  .page-hero{padding:var(--sp-8) var(--sp-5)}
}