/* ============================================================
   TELTAN — Site components
   Header, footer, floating actions, chat, plan cards,
   section pieces, theme variants, tweaks panel
   ============================================================ */

/* =================== HEADER =================== */
.site-header{position:sticky;top:0;z-index:120;
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background .3s}
.site-header.scrolled{border-color:var(--line);box-shadow:var(--sh-sm)}
.nav{height:var(--header-h);display:flex;align-items:center;gap:18px}
.nav__logo{display:flex;align-items:center;flex:none}
.nav__logo img{height:38px;width:auto}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav__link{font-family:var(--font-display);font-weight:600;font-size:.96rem;color:var(--slate-700);
  padding:.55em .85em;border-radius:var(--r-pill);position:relative;transition:color .18s,background .18s}
.nav__link::after{content:"";position:absolute;left:.85em;right:.85em;bottom:.38em;height:2px;border-radius:2px;background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.nav__link:hover{color:var(--cyan-700);background:var(--cyan-50)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link.active{color:var(--cyan-700)}
.nav__link.active::after{transform:scaleX(1)}
.nav__link--featured{color:var(--orange-600);font-weight:700;background:var(--orange-50)}
.nav__link--featured::after{content:"";position:absolute;left:.85em;right:.85em;bottom:.38em;height:2px;border-radius:2px;background:var(--grad-action);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.nav__link--featured:hover{background:var(--orange-100);color:var(--orange-700)}
.nav__link--featured:hover::after{transform:scaleX(1)}
.nav__spacer{flex:1}
.nav__actions{display:flex;align-items:center;gap:12px}
.nav__phone{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--slate-700)}
.nav__phone svg{width:1.05em;height:1.05em;color:var(--cyan-600)}
.nav__phone:hover{color:var(--cyan-700)}
.nav__burger{display:none;width:46px;height:46px;border-radius:var(--r-sm);align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--paper)}
.nav__burger svg{width:24px;height:24px;color:var(--ink)}

/* mobile drawer */
.mobile-drawer{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.mobile-drawer.open{visibility:visible;pointer-events:auto}
.mobile-drawer__scrim{position:absolute;inset:0;background:rgba(7,26,46,.5);opacity:0;transition:opacity .3s;backdrop-filter:blur(2px)}
.mobile-drawer.open .mobile-drawer__scrim{opacity:1}
.mobile-drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);
  background:var(--paper);box-shadow:var(--sh-lg);transform:translateX(100%);transition:transform .34s var(--ease);
  display:flex;flex-direction:column;padding:22px}
.mobile-drawer.open .mobile-drawer__panel{transform:none}
.mobile-drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.mobile-drawer__top img{height:32px}
.mobile-drawer__close{width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.mobile-drawer__close svg{width:22px;height:22px}
.mobile-drawer__link{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--slate-700);
  padding:.7em 0;border-bottom:1px solid var(--slate-100);display:flex;justify-content:space-between;align-items:center}
.mobile-drawer__link--featured{color:var(--orange-600)}
.mobile-drawer__cta{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:18px}

@media(max-width:980px){
  .nav__links,.nav__phone{display:none}
  .nav__burger{display:flex}
}

/* =================== FLOATING ACTIONS =================== */
.floaters{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:130;
  display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.fab{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-md);position:relative;transition:transform .2s var(--ease),box-shadow .2s}
.fab:hover{transform:translateY(-3px) scale(1.04)}
.fab svg{width:30px;height:30px}
.fab--wa{background:#25d366;color:#fff}
.fab--chat{background:var(--grad-mix);color:#fff;width:64px;height:64px}
.fab--chat svg{width:30px;height:30px}
.fab__dot{position:absolute;top:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:var(--orange-500);
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:.7rem;display:flex;align-items:center;justify-content:center;
  border:2.5px solid var(--paper)}
.fab--chat .fab__dot{box-shadow:0 0 0 0 rgba(240,96,31,.6);animation:pingDot 2.2s var(--ease) infinite}
@keyframes pingDot{0%{box-shadow:0 0 0 0 rgba(240,96,31,.55)}70%{box-shadow:0 0 0 12px rgba(240,96,31,0)}100%{box-shadow:0 0 0 0 rgba(240,96,31,0)}}
.fab__label{position:absolute;right:74px;top:50%;transform:translateY(-50%) translateX(8px);opacity:0;pointer-events:none;
  background:var(--navy-900);color:#fff;font-family:var(--font-display);font-weight:600;font-size:.84rem;
  padding:.55em .9em;border-radius:var(--r-sm);white-space:nowrap;transition:opacity .2s,transform .2s;box-shadow:var(--sh-md)}
.fab__label::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);width:10px;height:10px;background:var(--navy-900)}
.fab:hover .fab__label{opacity:1;transform:translateY(-50%) translateX(0)}
@media (prefers-reduced-motion:reduce){.fab--chat .fab__dot{animation:none}}

/* =================== CHAT PANEL =================== */
.chatbox{position:fixed;right:clamp(14px,3vw,28px);bottom:calc(clamp(14px,3vw,28px) + 80px);z-index:140;
  width:min(380px,calc(100vw - 28px));border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
  box-shadow:var(--sh-lg);transform-origin:bottom right;transform:translateY(16px) scale(.96);opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.chatbox.open{opacity:1;visibility:visible;transform:none}
.chatbox__head{background:var(--grad-mix);color:#fff;padding:18px 18px 16px;display:flex;align-items:center;gap:12px}
.chatbox__avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex:none;font-family:var(--font-display);font-weight:800}
.chatbox__avatar img{width:30px;height:30px}
.chatbox__who{flex:1;min-width:0}
.chatbox__who strong{font-family:var(--font-display);font-size:1.02rem;display:block}
.chatbox__who span{font-size:.82rem;display:flex;align-items:center;gap:.4em;opacity:.92}
.chatbox__who span::before{content:"";width:8px;height:8px;border-radius:50%;background:#39e07a;box-shadow:0 0 0 3px rgba(57,224,122,.3)}
.chatbox__close{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center}
.chatbox__close svg{width:18px;height:18px}
.chatbox__body{padding:18px;background:var(--slate-50);max-height:330px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.msg{max-width:84%;padding:.7em .95em;border-radius:16px;font-size:.93rem;line-height:1.45}
.msg--bot{background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start;box-shadow:var(--sh-xs)}
.msg--me{background:var(--cyan-500);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px;background:var(--slate-50)}
.chat-quick button{font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--cyan-700);
  background:var(--cyan-50);border:1px solid var(--cyan-100);padding:.5em .9em;border-radius:var(--r-pill);transition:background .15s}
.chat-quick button:hover{background:var(--cyan-100)}
.chatbox__foot{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--paper)}
.chatbox__foot input{flex:1;border:1px solid var(--line);border-radius:var(--r-pill);padding:.7em 1em;font:inherit;font-size:.92rem}
.chatbox__foot input:focus{outline:none;border-color:var(--cyan-400)}
.chatbox__send{width:44px;height:44px;border-radius:50%;background:var(--grad-action);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.chatbox__send svg{width:20px;height:20px}
.chatbox__wa{padding:10px 18px;background:var(--paper);border-top:1px solid var(--slate-100);text-align:center;font-size:.82rem;color:var(--text-mute)}
.chatbox__wa a{color:#1a9c4b;font-weight:700}

/* =================== FOOTER =================== */
.site-footer{background:var(--grad-night);color:#aec5d6;position:relative;isolation:isolate;padding-top:clamp(56px,7vw,88px)}
.footer-cta{margin-top:-1px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px}
.site-footer .foot-logo{height:42px;margin-bottom:18px}
.foot-about p{font-size:.95rem;color:#8ba6ba;max-width:34ch}
.foot-social{display:flex;gap:10px;margin-top:20px}
.foot-social a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:#cfe2ef;transition:background .2s,transform .2s,color .2s}
.foot-social a:hover{background:var(--cyan-500);color:#fff;transform:translateY(-2px)}
.foot-social svg{width:20px;height:20px}
.foot-col h4{font-family:var(--font-display);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:700}
.foot-col ul{display:flex;flex-direction:column;gap:11px}
.foot-col a,.foot-col li{font-size:.95rem;color:#9fb8cb;transition:color .18s}
.foot-col a:hover{color:var(--cyan-300)}
.foot-contact li{display:flex;gap:11px;align-items:flex-start;color:#9fb8cb;font-size:.95rem;line-height:1.4}
.foot-contact svg{width:18px;height:18px;color:var(--cyan-400);flex:none;margin-top:3px}
.foot-contact a{color:#cfe2ef;font-weight:600}
.foot-contact a:hover{color:var(--cyan-300)}
.foot-legal{margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(255,255,255,.1);padding-block:24px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
.foot-legal__links{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-legal__links a{font-size:.82rem;color:#86a0b4}
.foot-legal__links a:hover{color:var(--cyan-300)}
.foot-legal__copy{font-size:.82rem;color:#6b8499}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;gap:34px}.foot-about{grid-column:1/-1}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* =================== PLAN CARDS =================== */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
@media(max-width:920px){.plans-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
.plan{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--cyan-200)}
.plan--popular{border-color:var(--orange-300);box-shadow:var(--sh-md);transform:scale(1.015)}
.plan--popular:hover{transform:scale(1.015) translateY(-6px)}
.plan__tech{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--cyan-700);margin-bottom:14px}
.plan__tech svg{width:1.05em;height:1.05em}
.plan__speed{display:flex;align-items:baseline;gap:.2em;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.plan__speed b{font-size:3.6rem;line-height:.9}
.plan__speed span{font-size:1.3rem;color:var(--slate-500);font-weight:700}
.plan__name{font-family:var(--font-display);font-weight:600;color:var(--slate-600);margin-top:4px;font-size:1rem}
.plan__price{margin-top:18px;display:flex;align-items:baseline;gap:.3em}
.plan__price .amt{font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:var(--ink);letter-spacing:-.03em}
.plan__price .cur{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--slate-500);align-self:flex-start;margin-top:.3em}
.plan__price .per{font-size:.92rem;color:var(--text-mute)}
.plan__divider{height:1px;background:var(--line);margin:22px 0}
.plan__feats{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;flex:1}
.plan__feats li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--slate-700)}
.plan__feats svg{width:19px;height:19px;color:var(--cyan-500);flex:none;margin-top:2px}
.plan__feats .ideal{font-weight:600;color:var(--ink)}
.plan .btn{margin-top:auto}

/* plan tabs */
.plan-tabs{display:inline-flex;padding:6px;background:var(--slate-100);border-radius:var(--r-pill);gap:4px;position:relative}
.surface-dark .plan-tabs{background:rgba(255,255,255,.08)}
.plan-tab{font-family:var(--font-display);font-weight:600;font-size:.96rem;color:var(--slate-600);
  padding:.7em 1.4em;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:.5em;transition:color .2s;position:relative;z-index:1}
.plan-tab svg{width:1.15em;height:1.15em}
.plan-tab.active{color:#fff}
.surface-dark .plan-tab{color:#9fb8cb}
.surface-dark .plan-tab.active{color:#fff}
.plan-tabs__pill{position:absolute;top:6px;bottom:6px;border-radius:var(--r-pill);background:var(--grad-brand);
  box-shadow:var(--sh-cyan);transition:transform .3s var(--ease),width .3s var(--ease),background .3s;z-index:0}
.plan-tabs[data-active="micro"] .plan-tabs__pill{background:var(--grad-action);box-shadow:var(--sh-orange)}

/* =================== TRUST BAR =================== */
.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.trust-item{background:var(--paper);padding:24px 22px;display:flex;gap:14px;align-items:center}
.trust-item__ic{width:46px;height:46px;border-radius:13px;background:var(--cyan-50);color:var(--cyan-600);display:flex;align-items:center;justify-content:center;flex:none}
.trust-item:nth-child(even) .trust-item__ic{background:var(--orange-50);color:var(--orange-600)}
.trust-item__ic svg{width:24px;height:24px}
.trust-item strong{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink);display:block;line-height:1.2}
.trust-item span{font-size:.84rem;color:var(--text-mute)}
@media(max-width:860px){.trust-bar{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.trust-bar{grid-template-columns:1fr}}

/* =================== FEATURE / TECH split =================== */
.tech-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:38px;position:relative;overflow:hidden;height:100%}
.tech-card__ic{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.tech-card__ic svg{width:32px;height:32px;color:#fff}
.tech-card--fiber .tech-card__ic{background:var(--grad-brand)}
.tech-card--micro .tech-card__ic{background:var(--grad-action)}
.tech-card h3{margin-bottom:10px}
.tech-card .feats{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.tech-card .feats li{display:flex;gap:10px;font-size:.96rem;color:var(--slate-700)}
.tech-card .feats svg{width:19px;height:19px;flex:none;margin-top:3px}
.tech-card--fiber .feats svg{color:var(--cyan-500)}
.tech-card--micro .feats svg{color:var(--orange-500)}
.tech-card__deco{position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;opacity:.08;z-index:0}

/* =================== WHY / icon grid =================== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr}}
.why-item{padding:28px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.why-item__ic{width:52px;height:52px;border-radius:14px;background:rgba(32,192,240,.14);color:var(--cyan-300);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.why-item__ic svg{width:26px;height:26px}
.why-item h3{font-size:1.2rem;margin-bottom:8px}

/* =================== STATS =================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:680px){.stats{grid-template-columns:1fr 1fr}}
.stat__num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,5vw,3.4rem);letter-spacing:-.03em;line-height:1}
.stat__num .grad-text{display:inline}
.stat__label{font-size:.95rem;color:var(--text-soft);margin-top:6px}

/* =================== TESTIMONIALS =================== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:880px){.testi-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.testi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;box-shadow:var(--sh-sm)}
.testi__stars{display:flex;gap:2px;color:var(--orange-400);margin-bottom:14px}
.testi__stars svg{width:18px;height:18px}
.testi__quote{font-size:1.02rem;color:var(--slate-700);line-height:1.55;flex:1}
.testi__who{display:flex;align-items:center;gap:12px;margin-top:20px}
.testi__avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:#fff;flex:none}
.testi__who strong{display:block;font-family:var(--font-display);font-size:.98rem}
.testi__who span{font-size:.84rem;color:var(--text-mute)}

/* =================== FAQ =================== */
.faq{max-width:780px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item[open]{border-color:var(--cyan-200);box-shadow:var(--sh-sm)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .q-ic{width:30px;height:30px;border-radius:50%;background:var(--cyan-50);color:var(--cyan-600);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .25s,background .25s}
.faq-item summary .q-ic svg{width:18px;height:18px}
.faq-item[open] summary .q-ic{transform:rotate(45deg);background:var(--orange-500);color:#fff}
.faq-item__body{padding:0 22px 22px;color:var(--text-soft);line-height:1.6}

/* =================== COVERAGE MAP =================== */
.cov-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center}
@media(max-width:900px){.cov-wrap{grid-template-columns:1fr}}
.cov-search{display:flex;gap:10px;margin-top:24px}
.cov-search input{flex:1;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:.95em 1.3em;font:inherit;background:var(--paper)}
.cov-search input:focus{outline:none;border-color:var(--cyan-400);box-shadow:0 0 0 4px var(--cyan-50)}
.cov-result{margin-top:16px;padding:16px 18px;border-radius:var(--r-md);display:none;gap:12px;align-items:flex-start;font-size:.95rem}
.cov-result.show{display:flex}
.cov-result svg{width:22px;height:22px;flex:none;margin-top:1px}
.cov-result--ok{background:var(--cyan-50);color:var(--cyan-700);border:1px solid var(--cyan-100)}
.cov-result--ok svg{color:var(--cyan-600)}
.cov-result--micro{background:var(--orange-50);color:var(--orange-700);border:1px solid var(--orange-100)}
.cov-result--micro svg{color:var(--orange-600)}
.cov-map{position:relative;aspect-ratio:4/3.4;border-radius:var(--r-xl);overflow:hidden;background:var(--navy-900);box-shadow:var(--sh-lg)}
.cov-map svg{width:100%;height:100%}
.cov-zone{cursor:pointer;transition:opacity .2s}
.cov-zone:hover{opacity:.85}
.cov-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}
.cov-legend span{display:inline-flex;align-items:center;gap:.5em;font-size:.88rem;color:var(--text-soft)}
.cov-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}

/* =================== CTA band =================== */
.cta-band{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(40px,6vw,72px);
  background:var(--grad-mix);color:#fff;isolation:isolate}
.cta-band__inner{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.cta-band h2{color:#fff;max-width:18ch}
.cta-band p{color:rgba(255,255,255,.9);margin-top:10px;max-width:46ch}
.cta-band .btn--outline{background:#fff}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:14px}

/* =================== PROMO banner =================== */
.promo-banner{background:var(--navy-900);color:#fff;position:relative;overflow:hidden;z-index:121}
.promo-banner__inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:11px var(--gutter);font-family:var(--font-display);font-weight:600;font-size:.95rem;text-align:center;position:relative;z-index:1}
.promo-banner .spark{color:var(--cyan-300)}
.promo-banner b{color:var(--orange-400)}
.promo-banner .btn{padding:.5em 1.1em;font-size:.86rem}
.promo-banner__close{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#9fb8cb}
.promo-banner__close:hover{background:rgba(255,255,255,.12);color:#fff}
.promo-banner__close svg{width:18px;height:18px}
.promo-banner__bg{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,transparent,rgba(32,192,240,.12),transparent)}
@media(max-width:620px){.promo-banner__close{display:none}}

/* =================== Comparison table (planes page) =================== */
.cmp-table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.cmp-table{width:100%;border-collapse:collapse;min-width:640px;background:var(--paper)}
.cmp-table th,.cmp-table td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--slate-100)}
.cmp-table thead th{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--ink);background:var(--slate-50)}
.cmp-table tbody th{text-align:left;font-family:var(--font-body);font-weight:600;color:var(--slate-700);font-size:.95rem}
.cmp-table td svg{width:20px;height:20px;color:var(--cyan-500);margin-inline:auto}
.cmp-table .x{color:var(--slate-300)}
.cmp-table tr:last-child td,.cmp-table tr:last-child th{border-bottom:none}
.cmp-table .col-pop{background:var(--orange-50)}
.cmp-table thead .col-pop{background:var(--orange-100);color:var(--orange-700)}

/* includes grid */
.inc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.inc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.inc-grid{grid-template-columns:1fr}}
.inc-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;text-align:center}
.inc-item__ic{width:56px;height:56px;border-radius:16px;background:var(--cyan-50);color:var(--cyan-600);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.inc-item:nth-child(even) .inc-item__ic{background:var(--orange-50);color:var(--orange-600)}
.inc-item__ic svg{width:28px;height:28px}
.inc-item h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:6px}
.inc-item p{font-size:.9rem;color:var(--text-soft)}

/* plan section header (planes page) */
.plan-sec-head{display:grid;grid-template-columns:auto auto 1fr;gap:18px;align-items:center}
.plan-sec-head__ic{width:60px;height:60px;border-radius:17px;display:flex;align-items:center;justify-content:center;flex:none}
.plan-sec-head__ic svg{width:31px;height:31px;color:#fff}
.plan-sec-head .eyebrow{display:block;margin-bottom:4px}
.plan-sec-head__desc{color:var(--text-soft);max-width:42ch;font-size:.98rem;justify-self:end;text-wrap:pretty}
@media(max-width:760px){.plan-sec-head{grid-template-columns:auto 1fr}.plan-sec-head__desc{grid-column:1/-1;justify-self:start}}

/* plan anchor chips (planes hero) */
.plan-anchors{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.plan-anchors a{font-family:var(--font-display);font-weight:600;font-size:.9rem;color:#dceaf3;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:.55em 1.05em;border-radius:var(--r-pill);transition:background .18s,border-color .18s}
.plan-anchors a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
:root[data-theme="claro"] .plan-anchors a{color:var(--cyan-700);background:var(--cyan-50);border-color:var(--cyan-100)}

/* page hero (interior pages) */
.page-hero{background:var(--grad-night);color:#fff;position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(56px,8vw,96px)}
.page-hero .breadcrumb{display:flex;gap:.5em;align-items:center;font-size:.86rem;color:#8fb0c7;margin-bottom:18px;font-family:var(--font-display);font-weight:600}
.page-hero .breadcrumb a:hover{color:var(--cyan-300)}
.page-hero h1{color:#fff}
.page-hero .lead{color:#a9c2d5;margin-top:16px;max-width:60ch}

/* =================== TWEAKS PANEL =================== */
.tw-panel{position:fixed;top:0;right:0;height:100vh;width:316px;z-index:300;background:var(--paper);
  box-shadow:-20px 0 60px -20px rgba(11,28,46,.35);border-left:1px solid var(--line);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s var(--ease);font-family:var(--font-body)}
.tw-panel.show{transform:none}
.tw-panel__head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.tw-panel__head strong{font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.tw-panel__head span{font-size:.78rem;color:var(--text-mute);display:block}
.tw-panel__close{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.tw-panel__close svg{width:18px;height:18px}
.tw-panel__body{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:24px}
.tw-sec > label{font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500);display:block;margin-bottom:10px}
.tw-seg{display:flex;background:var(--slate-100);border-radius:12px;padding:4px;gap:3px}
.tw-seg button{flex:1;padding:.6em .4em;border-radius:9px;font-family:var(--font-display);font-weight:600;font-size:.86rem;color:var(--slate-600);transition:all .18s}
.tw-seg button.on{background:var(--paper);color:var(--cyan-700);box-shadow:var(--sh-xs)}
.tw-note{font-size:.8rem;color:var(--text-mute);line-height:1.5;background:var(--slate-50);border-radius:12px;padding:12px 14px}