:root{
  --bg:#061019;--bg2:#0b1724;--card:#0f2030;--card2:#13283a;--line:#21384c;
  --text:#f5f8fb;--muted:#9fb0bf;--accent:#44e3b3;--accent2:#7bbcff;--max:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:
radial-gradient(circle at 10% 0%,rgba(68,227,179,.10),transparent 27%),
radial-gradient(circle at 95% 15%,rgba(123,188,255,.09),transparent 28%),
var(--bg);color:var(--text);line-height:1.68}
a{color:inherit;text-decoration:none}img{max-width:100%}.container{width:min(var(--max),calc(100% - 36px));margin:auto}
.top{font-size:12px;text-align:center;padding:8px 14px;background:#03080d;color:#aab9c6;border-bottom:1px solid var(--line)}
header{position:sticky;top:0;z-index:50;background:#08131edc;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:-.8px}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:#05100d;font-weight:950}
.navlinks{display:flex;gap:16px;align-items:center;font-size:13px}.navlinks a{color:#c2d0dd}.navlinks a:hover{color:white}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#7debc8);color:#04120d;font-weight:900;border:0}
.btn2{display:inline-flex;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025)}
.hero{padding:86px 0 58px}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#91f1d4}
h1{font-size:clamp(44px,7vw,82px);line-height:.97;letter-spacing:-4px;margin:16px 0 22px}
h2{font-size:clamp(30px,4.2vw,48px);line-height:1.08;letter-spacing:-2px;margin-top:0}
h3{letter-spacing:-.6px}
.lead{font-size:19px;color:#c2cfdb;max-width:780px}.muted{color:var(--muted)}
.section{padding:70px 0}.alt{background:rgba(11,23,36,.82);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.panel,.card{background:linear-gradient(180deg,var(--card),#0b1824);border:1px solid var(--line);border-radius:18px;padding:22px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.prose{max-width:860px}.prose p,.prose li{color:#b8c6d3}.prose h2{margin-top:48px}.prose h3{margin-top:30px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.chip{padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:#0a1722;font-size:12px;color:#b9c8d6}
.notice{border-left:3px solid var(--accent2);padding:14px 16px;background:#102037;border-radius:0 10px 10px 0;color:#cbd8e4}
.compare{overflow:auto;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse;background:#0b1722}
th,td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:#112334}
.toc{position:sticky;top:92px}.toc a{display:block;color:#9fb1c2;font-size:13px;padding:7px 0}.toc a:hover{color:white}
.article-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start}
.faq details,.deep details{background:#0f2030;border:1px solid var(--line);border-radius:12px;padding:16px 17px;margin:10px 0}
.faq summary,.deep summary{cursor:pointer;font-weight:850}.faq p,.deep p,.deep li{color:#b8c6d3}
.cta{display:flex;justify-content:space-between;align-items:center;gap:24px;border:1px solid #2c5b61;background:linear-gradient(135deg,#102a2b,#102136);padding:28px;border-radius:18px}
.breadcrumbs{font-size:12px;color:#8ea2b4;margin-bottom:20px}.breadcrumbs a{color:#a9bac9}
.metric{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.metric div{background:#0b1824;border:1px solid var(--line);border-radius:14px;padding:16px}.metric strong{display:block;font-size:19px}
footer{border-top:1px solid var(--line);padding:44px 0 24px;background:#040a10}.footer{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}.footer a{display:block;color:#90a6b8;margin:6px 0;font-size:13px}
@media(max-width:900px){.hero-grid,.grid2,.footer,.article-grid{grid-template-columns:1fr}.toc{position:static}.cards{grid-template-columns:1fr 1fr}.navlinks{display:none}}
@media(max-width:580px){.cards,.metric{grid-template-columns:1fr}h1{letter-spacing:-2px}.cta{display:block}}

.header-phone{margin-left:auto;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#0b1d24;color:#d9fff3;font-size:12px;white-space:nowrap}
.header-phone strong{color:var(--accent);font-size:16px}
.footer-phone{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);text-align:center}
.footer-phone a{font-size:20px;font-weight:900;color:var(--accent)}
.phone-big{font-size:22px;padding:15px 22px}
@media(max-width:580px){.header-phone span{display:none}.header-phone strong{font-size:14px}.nav{gap:8px}}

/* Mobile navigation */
.hamburger{display:none;width:44px;height:44px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#0b1d24;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}.hamburger span{display:block;width:21px;height:2px;background:var(--text);border-radius:2px}.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger.is-open span:nth-child(2){opacity:0}.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-nav{display:none;position:fixed;top:72px;left:14px;right:14px;z-index:80;padding:14px;background:#081723;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.45)}.mobile-nav.is-open{display:block}.mobile-nav a{display:block;padding:12px;border-bottom:1px solid var(--line);color:#dbe7f0;font-weight:700}.mobile-nav .mobile-call{margin-top:8px;background:var(--accent);color:#04120d;border-radius:9px;text-align:center}@media(max-width:900px){.hamburger{display:flex}.header-phone{margin-left:auto}}
/* Visible pricing section */
.pricing-section{background:#091521;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.pricing-intro{max-width:760px;margin-bottom:28px}.price-products{display:grid;grid-template-columns:1fr 1fr;gap:18px}.price-card{background:linear-gradient(180deg,#102231,#0b1925);border:1px solid var(--line);border-radius:18px;padding:20px;overflow:hidden}.price-card h3{font-size:24px;margin:0 0 12px}.price-subhead{font-weight:900;color:var(--accent);margin:18px 0 7px}.price-table{font-size:13px}.price-table th,.price-table td{padding:9px 10px}.price-table td:nth-child(2),.price-table td:nth-child(3){white-space:nowrap;font-weight:750}.price-note{font-size:11px;color:var(--muted);margin-top:8px}@media(max-width:780px){.price-products{grid-template-columns:1fr}.price-card{padding:16px}.price-table{font-size:12px}.price-table th,.price-table td{padding:8px 7px}}


/* =========================================================
   V6 RESPONSIVE OVERRIDES — MOBILE FIRST CLEANUP
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
body{-webkit-text-size-adjust:100%}
.container{width:min(var(--max),calc(100% - 40px));margin-left:auto;margin-right:auto}
header .container{width:min(var(--max),calc(100% - 28px))}
.nav{width:100%}
.brand{flex:0 0 auto}
.header-phone{flex:0 0 auto}
.hamburger{flex:0 0 auto}
table{max-width:100%}
.compare,.price-card{max-width:100%}
.prose{width:100%}

@media(max-width:900px){
  .top{
    font-size:11px;
    line-height:1.35;
    padding:7px 18px;
    min-height:0;
  }

  header{position:sticky;top:0}
  .nav{
    min-height:64px;
    height:64px;
    gap:10px;
    justify-content:flex-start;
  }
  .brand{
    gap:8px;
    font-size:17px;
    letter-spacing:-.4px;
    white-space:nowrap;
  }
  .logo{
    width:38px;
    height:38px;
    border-radius:11px;
    font-size:17px;
  }
  .header-phone{
    margin-left:auto;
    padding:8px 11px;
    min-height:42px;
    border-radius:11px;
  }
  .header-phone span{display:none}
  .header-phone strong{
    font-size:14px;
    line-height:1;
    letter-spacing:.1px;
  }
  .hamburger{
    display:flex;
    width:42px;
    height:42px;
    min-width:42px;
    padding:9px;
    border-radius:11px;
  }

  .mobile-nav{
    top:calc(64px + 42px);
    left:12px;
    right:12px;
    max-height:calc(100vh - 120px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .hero{
    padding:48px 0 42px;
    text-align:center;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    align-items:start;
  }
  .hero-grid>div:first-child,
  .hero .prose{
    margin-left:auto;
    margin-right:auto;
  }
  .eyebrow{
    font-size:11px;
    line-height:1.45;
    letter-spacing:1.25px;
    text-align:center;
  }
  h1{
    font-size:clamp(38px,10.5vw,54px);
    line-height:1.02;
    letter-spacing:-2.4px;
    margin:14px auto 18px;
    max-width:760px;
    text-align:center;
  }
  h2{
    font-size:clamp(29px,7.8vw,40px);
    line-height:1.08;
    letter-spacing:-1.4px;
    text-align:center;
  }
  h3{letter-spacing:-.35px}
  .lead{
    font-size:17px;
    line-height:1.65;
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .hero p:not(.lead):not(.muted){
    text-align:center;
  }
  .hero .btn,.hero .btn2{
    margin:5px 3px;
  }
  .panel{
    text-align:center;
    padding:20px;
  }
  .panel h2{text-align:center}
  .metric{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .metric div{padding:12px 8px}
  .metric strong{font-size:17px}
  .chips{
    justify-content:center;
    margin:18px auto;
  }
  .chip{
    font-size:11px;
    padding:7px 10px;
  }

  .section{padding:52px 0}
  .section>.container>h2,
  .section>.container>.eyebrow,
  .pricing-section .container>h2,
  .pricing-section .container>.eyebrow{
    text-align:center;
  }
  .pricing-intro{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }

  .cards,.grid2,.footer,.article-grid,.price-products{
    grid-template-columns:1fr;
  }
  .cards{gap:13px}
  .card{
    padding:19px;
    text-align:center;
  }
  .card p{margin-bottom:0}
  .article-grid{gap:22px}
  .toc{position:static}
  .toc .panel{text-align:left}
  .toc a{text-align:left}
  .prose{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }
  .prose p,.prose li{
    font-size:16px;
    line-height:1.72;
  }
  .prose h2{
    margin-top:42px;
    text-align:left;
    font-size:31px;
  }
  .prose h3{text-align:left}
  .breadcrumbs{text-align:center}

  .cta{
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:22px;
  }

  .compare{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .compare table{
    min-width:620px;
  }

  .price-products{gap:14px}
  .price-card{
    width:100%;
    padding:18px 14px;
    border-radius:16px;
  }
  .price-card h3{
    text-align:center;
    font-size:23px;
  }
  .price-subhead{text-align:center}
  .price-table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-collapse:collapse;
    font-size:12px;
  }
  .price-table tbody{
    display:table;
    width:100%;
    min-width:430px;
  }
  .price-table th,.price-table td{
    padding:9px 8px;
  }
  .price-note{text-align:center}

  footer{
    padding:36px 0 22px;
    text-align:center;
  }
  .footer{
    gap:22px;
  }
  .footer .brand{
    justify-content:center;
  }
  .footer a{margin:8px 0}
  .footer-phone{
    margin-top:22px;
    padding-top:18px;
  }
  .footer-phone a{
    font-size:20px;
    display:inline-block;
  }
}

@media(max-width:560px){
  .container{width:calc(100% - 30px)}
  header .container{width:calc(100% - 20px)}

  .top{
    font-size:10px;
    line-height:1.35;
    padding:6px 14px;
  }
  .nav{
    min-height:60px;
    height:60px;
    gap:7px;
  }
  .brand{
    font-size:15px;
    gap:7px;
  }
  .logo{
    width:35px;
    height:35px;
    font-size:15px;
  }
  .header-phone{
    padding:8px 9px;
    min-height:39px;
  }
  .header-phone strong{font-size:12.5px}
  .hamburger{
    width:39px;
    min-width:39px;
    height:39px;
    padding:8px;
  }
  .hamburger span{width:19px}

  .mobile-nav{
    top:101px;
    left:9px;
    right:9px;
    padding:10px;
    border-radius:13px;
  }
  .mobile-nav a{
    padding:11px 10px;
    font-size:14px;
  }

  .hero{
    padding:38px 0 34px;
  }
  h1{
    font-size:clamp(35px,10.8vw,46px);
    line-height:1.01;
    letter-spacing:-2px;
    margin-top:13px;
  }
  h2{
    font-size:clamp(27px,8vw,34px);
    letter-spacing:-1.2px;
  }
  .lead{
    font-size:16px;
    line-height:1.62;
  }
  .hero .btn,.hero .btn2{
    display:flex;
    width:100%;
    margin:8px 0 0;
    min-height:48px;
  }

  .metric{
    grid-template-columns:1fr;
  }

  .section{padding:44px 0}
  .card{padding:17px}
  .prose p,.prose li{
    font-size:15.5px;
    line-height:1.7;
  }
  .prose h2{
    font-size:28px;
    line-height:1.12;
  }
  .notice{
    padding:13px 14px;
    font-size:14px;
  }

  .price-card{
    padding:16px 10px;
  }
  .price-card h3{font-size:22px}
  .price-table{
    margin-left:0;
    margin-right:0;
  }
  .price-table tbody{
    min-width:390px;
  }

  .faq details,.deep details{
    padding:14px;
  }

  .cta{padding:19px 16px}
}

@media(max-width:390px){
  .brand{font-size:14px}
  .logo{width:33px;height:33px}
  .header-phone strong{font-size:11.5px}
  .header-phone{padding:7px 8px}
  .hamburger{width:37px;min-width:37px;height:37px}
  h1{font-size:34px}
}


/* V7: definitive mobile header/menu fix */
.mobile-nav{display:none !important}
.mobile-nav.is-open{display:block !important}

@media(max-width:900px){
  .navlinks{display:none !important}
  header .navlinks{display:none !important}

  header .nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }

  .mobile-nav{
    position:fixed !important;
    z-index:9999 !important;
    left:12px !important;
    right:12px !important;
    top:112px !important;
    width:auto !important;
    max-width:none !important;
    padding:10px !important;
    background:#081723 !important;
    border:1px solid #294154 !important;
    border-radius:14px !important;
    box-shadow:0 20px 55px rgba(0,0,0,.55) !important;
  }
  .mobile-nav a{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:12px 11px !important;
    margin:0 !important;
    border-bottom:1px solid #243b4c !important;
    font-size:14px !important;
    line-height:1.25 !important;
    text-align:left !important;
    white-space:normal !important;
  }
  .mobile-nav a:last-child{border-bottom:0 !important}

  .hero{padding-top:38px !important}
}

@media(max-width:560px){
  .top{
    padding:7px 16px !important;
    font-size:10px !important;
    line-height:1.35 !important;
  }
  header .nav{
    height:62px !important;
    min-height:62px !important;
    padding:0 !important;
    gap:7px !important;
  }
  .brand{
    min-width:0 !important;
    font-size:15px !important;
  }
  .header-phone{
    margin-left:auto !important;
    padding:7px 9px !important;
  }
  .hamburger{
    display:flex !important;
    background:#0b1d24 !important;
    border:1px solid #294154 !important;
  }
  .hamburger span{
    display:block !important;
    background:#eaf2f7 !important;
  }
  .mobile-nav{top:105px !important}
}

/* V8 — SITE-WIDE RESPONSIVE HARDENING. Layout only. */
html,body{width:100%;max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
main,header,footer,section,article,nav,.container,.hero-grid,.grid2,.cards,.article-grid,.prose,.panel,.card,.cta,.faq,.deep,details,.price-products,.price-card,.metric,.chips{min-width:0;max-width:100%}
img,svg,video,iframe,canvas{max-width:100%;height:auto}
p,li,h1,h2,h3,h4,h5,h6,summary,a,span,strong{overflow-wrap:break-word;word-wrap:break-word}
.prose p,.prose li,.prose h2,.prose h3,.faq summary,.deep summary,.faq p,.deep p,.deep li{max-width:100%}
.cta>*,.panel>*,.card>*,.metric>*,.hero-grid>*,.grid2>*,.article-grid>*{min-width:0;max-width:100%}
@media(max-width:900px){
 .container{width:auto!important;max-width:var(--max)!important;margin-left:20px!important;margin-right:20px!important}
 header .container{margin-left:14px!important;margin-right:14px!important}
 .article-grid,.hero-grid,.grid2,.cards,.footer,.price-products{width:100%;grid-template-columns:minmax(0,1fr)!important}
 .prose{width:100%!important;max-width:100%!important}
 .prose p,.prose li{width:auto;max-width:100%}
 .faq details,.deep details{width:100%;max-width:100%}
 .faq summary,.deep summary{white-space:normal!important}
 .cta{width:100%;max-width:100%;overflow:hidden}
 .cta .btn,.cta .btn2{max-width:100%;white-space:normal;text-align:center}
 .compare,.price-table{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
}
@media(max-width:560px){
 .container{margin-left:18px!important;margin-right:18px!important}
 header .container{margin-left:12px!important;margin-right:12px!important}
 .section{padding-left:0;padding-right:0}
 h1{max-width:100%;font-size:clamp(32px,10.5vw,44px)}
 h2,.prose h2{max-width:100%;font-size:clamp(27px,8vw,32px)}
 .panel,.card,.faq details,.deep details,.cta{max-width:100%}
 .price-card{width:100%;max-width:100%;overflow:hidden}
 .price-table{display:block}
}
@media(max-width:360px){
 .container{margin-left:14px!important;margin-right:14px!important}
 header .container{margin-left:8px!important;margin-right:8px!important}
 .brand{font-size:13px!important}
 .header-phone strong{font-size:10.5px!important}
}

/* V9 — definitive narrow-screen containment fix. Layout only; no content/design changes. */
@media (max-width:900px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{position:relative}
  .container{
    width:calc(100% - 36px)!important;
    max-width:calc(100% - 36px)!important;
    margin-left:18px!important;
    margin-right:18px!important;
  }
  header .container{
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
    margin-left:12px!important;
    margin-right:12px!important;
  }
  main,section,article,aside,footer,.hero,.section,.alt,.pricing-section{
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  .hero-grid,.article-grid,.grid2,.cards,.footer,.price-products,.metric{
    width:100%!important;max-width:100%!important;min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .prose,.panel,.card,.cta,.faq,.deep,details,.pricing-intro,.price-card{
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  h1,h2,h3,p,li,summary,.lead,.breadcrumbs,.eyebrow{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .compare,.price-table{
    display:block!important;width:100%!important;max-width:100%!important;
    overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
  }
  .compare table{width:max-content!important;min-width:620px!important;max-width:none!important}
  .price-table tbody{width:max-content!important;min-width:430px!important;max-width:none!important}
}
@media (max-width:560px){
  .container{
    width:calc(100% - 28px)!important;
    max-width:calc(100% - 28px)!important;
    margin-left:14px!important;
    margin-right:14px!important;
  }
  header .container{
    width:calc(100% - 16px)!important;
    max-width:calc(100% - 16px)!important;
    margin-left:8px!important;
    margin-right:8px!important;
  }
  .hero{padding-left:0!important;padding-right:0!important}
  h1{font-size:clamp(32px,10vw,42px)!important;line-height:1.04!important}
  .lead{font-size:16px!important;line-height:1.62!important}
  .price-table tbody{min-width:390px!important}
}
@media (max-width:360px){
  .container{
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
    margin-left:10px!important;margin-right:10px!important;
  }
  header .container{
    width:calc(100% - 12px)!important;
    max-width:calc(100% - 12px)!important;
    margin-left:6px!important;margin-right:6px!important;
  }
}