/* =========================================================
   MINT CLOUD DESIGN SYSTEM - tokens & base
   Powered by boheidc architecture, adapted for vhost platform
   ========================================================= */
:root{
  --blue-900:#061b3b;
  --blue-800:#083b9c;
  --blue-700:#0b4ccc;
  --blue-600:#125df5;
  --blue-500:#2f78ff;
  --blue-400:#6ba2ff;
  --blue-300:#a8c8ff;
  --blue-200:#d7e4ff;
  --blue-100:#edf4ff;
  --blue-050:#f7faff;
  --cyan:#4c9dff;
  --accent:#16b889;
  --accent-soft:#e9f9f3;
  --accent-dark:#0f7d63;
  --ink:#071a33;
  --ink-2:#142c48;
  --body:#4a5e76;
  --muted:#7b8ea4;
  --line:#e4ecf4;
  --line-dark:rgba(255,255,255,0.12);
  --soft:#f5f8fc;
  --paper:#ffffff;
  --black:#07111f;
  --success:#0f7d63;
  --danger:#dc3545;
  --warning:#f59e0b;
  --font-sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
  --font-display:"DIN Alternate","Bahnschrift","Helvetica Neue","PingFang SC",sans-serif;
  --font-mono:"SFMono-Regular","Cascadia Code","JetBrains Mono",Consolas,monospace;
  --container:1440px;
  --gutter:clamp(24px,4.4vw,64px);
  --header-h:68px;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --fast:0.22s;
  --normal:0.4s;
  --shadow-sm:0 8px 24px rgba(7,26,51,0.06);
  --shadow-md:0 18px 50px rgba(7,26,51,0.1);
  --shadow-blue:0 20px 48px rgba(18,93,245,0.18);
  --hero-duration:7000ms;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--font-sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,h5,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button,input,textarea,select,a,div,article,figure,section{border-radius:0}
::selection{color:#fff;background:var(--blue-600)}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;top:10px;left:10px;z-index:5000;padding:10px 16px;color:#fff;background:var(--blue-600);transform:translateY(-150%);transition:transform var(--fast)}
.skip-link:focus{transform:translateY(0)}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.text-gradient{color:var(--blue-600);background:linear-gradient(100deg,#0B4CCC 0%,#006ff2 42%,#4C9DFF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* icons */
.icon{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;overflow:visible}
.icon--xs{width:12px;height:12px}
.icon--sm{width:14px;height:14px}
/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 21px;border:1px solid transparent;border-radius:0;font-size:14px;font-weight:500;line-height:1.4;white-space:nowrap;cursor:pointer;overflow:hidden;transition:color var(--fast),background-color var(--fast),border-color var(--fast),box-shadow var(--fast),transform var(--fast)}
.btn .icon{width:16px;height:16px;transition:transform var(--fast)}
.btn:hover .icon{transform:translateX(3px)}
.btn-primary{color:#fff;background:linear-gradient(94deg,#0B4CCC 0%,#2F78FF 100%);border-color:#2F78FF;box-shadow:0 8px 22px rgba(18,93,245,0.18)}
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,0.18) 50%,transparent 80%);transform:translateX(-110%);transition:transform 0.55s var(--ease);pointer-events:none}
.btn-primary:hover{background:linear-gradient(94deg,#003fae 0%,#125DF5 100%);border-color:#125DF5;box-shadow:0 12px 26px rgba(18,93,245,0.24)}
.btn-primary:hover::before{transform:translateX(110%)}
.btn-ghost{color:var(--ink-2);background:rgba(255,255,255,0.55);border-color:#c8d4e4;backdrop-filter:blur(6px)}
.btn-ghost:hover{color:var(--blue-600);background:#fff;border-color:var(--blue-500)}
.btn-secondary{color:var(--ink-2);background:#fff;border-color:#d8e1ee}
.btn-secondary:hover{color:var(--blue-600);border-color:var(--blue-500)}
.btn-light{color:var(--blue-700);background:#fff;border-color:#fff}
.btn-light:hover{color:var(--blue-700);background:#eef6ff;border-color:#eef6ff}
.btn-danger{color:#fff;background:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:#bb2d3b;border-color:#b02a37}
.btn-sm{min-height:34px;padding:0 13px;gap:6px;font-size:12px}
.btn-sm .icon{width:14px;height:14px}
.btn-lg{min-height:48px;padding:0 28px;font-size:15px}
.btn-block{width:100%}
.square-button,.icon-button{display:inline-grid;place-items:center;padding:0;border:1px solid #dbe4ef;background:#fff;color:var(--ink-2);border-radius:0;transition:color var(--fast),background var(--fast),border-color var(--fast),transform var(--fast)}
.square-button{width:42px;height:42px}
.square-button .icon{width:17px;height:17px}
.square-button:hover,.icon-button:hover{color:#fff;background:var(--blue-600);border-color:var(--blue-600)}
.square-button:active,.icon-button:active{transform:translateY(1px)}
.icon-button{width:36px;height:36px;border-color:transparent;background:transparent;color:#34445a}
/* text link */
.text-link{position:relative;display:inline-flex;align-items:center;gap:7px;width:fit-content;padding-bottom:3px;color:#263a55;font-size:14px;font-weight:500;line-height:1.5;transition:color var(--fast)}
.text-link .icon{width:15px;height:15px;transition:transform var(--fast)}
.text-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--normal) var(--ease)}
.text-link:hover{color:var(--blue-600)}
.text-link:hover::after{transform:scaleX(1);transform-origin:left}
.text-link:hover .icon{transform:translate(3px,-1px)}
.text-link--sm{font-size:12px;gap:5px}
.text-link--sm .icon{width:13px;height:13px}
.text-link--light{color:#fff}
.text-link--light:hover{color:#a9d0ff}
/* tag */
.tag{display:inline-flex;align-items:center;gap:5px;width:fit-content;padding:2px 7px;color:var(--blue-600);background:#eef5ff;border:1px solid #d8e8fc;border-radius:0;font-size:10px;font-style:normal;font-weight:600;line-height:18px;letter-spacing:0.02em}
.tag--blue{color:#fff;background:linear-gradient(100deg,#125DF5,#007ff2);border-color:transparent}
.tag--light{color:#fff;background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.25);backdrop-filter:blur(8px)}
.tag--accent{color:var(--accent-dark);background:var(--accent-soft);border-color:#ccebdf}
.tag--danger{color:#fff;background:var(--danger);border-color:transparent}
.live-dot,.pulse-dot{display:inline-block;width:6px;height:6px;flex:0 0 auto;background:var(--blue-500);border-radius:0}
.live-dot{box-shadow:0 0 0 0 rgba(10,108,245,0.35);animation:livePulse 2.2s ease-out infinite}
.pulse-dot{background:var(--success);box-shadow:0 0 0 0 rgba(10,155,122,0.35);animation:livePulse 2s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(10,108,245,0.3)}70%{box-shadow:0 0 0 6px rgba(10,108,245,0)}100%{box-shadow:0 0 0 0 rgba(10,108,245,0)}}
/* eyebrow / section */
.eyebrow{display:inline-flex;align-items:center;gap:11px;color:#65758c;font-size:11px;font-weight:600;line-height:20px;letter-spacing:0.13em;text-transform:uppercase}
.eyebrow-index{display:inline-grid;place-items:center;min-width:27px;height:20px;padding:0 5px;color:var(--blue-600);background:rgba(18,93,245,0.04);border:1px solid rgba(18,93,245,0.18);font-family:var(--font-display);font-size:10px;letter-spacing:0.04em}
.eyebrow--light{color:#9fc4ff}
.section{position:relative;padding-block:clamp(72px,7.2vw,112px);overflow:hidden}
.section--soft{background:linear-gradient(180deg,#ffffff 0%,#f7faff 20%,#f6f9fd 80%,#ffffff 100%)}
.section--tint{background:radial-gradient(circle at 84% 14%,rgba(0,142,255,0.08),transparent 26%),linear-gradient(180deg,#f7faff 0%,#fbfdff 100%)}
.section--dark{background:var(--black);color:#fff}
.section-head{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:clamp(34px,4vw,52px)}
.section-head-copy{max-width:800px}
.section-head h2{margin-top:17px;color:var(--ink);font-size:clamp(31px,3.35vw,48px);font-weight:600;line-height:1.18;letter-spacing:-0.035em}
.section-head h2 .text-gradient{letter-spacing:-0.03em}
.section-lead{max-width:610px;margin-top:17px;color:var(--body);font-size:14px;line-height:1.85}
.section-head-aside{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:20px;padding-bottom:6px}
.section-head-aside .text-link{font-size:13px}
.section-aside-copy{max-width:285px;color:var(--muted);font-size:12px;line-height:1.8;text-align:right}
.section-head--tight{margin-bottom:34px}
/* JS reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity 0.75s var(--ease),transform 0.75s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:0.001ms!important}.js .reveal{opacity:1;transform:none}}
/* status / chips */
.status-dot{display:inline-block;width:5px;height:5px;flex:0 0 auto;background:var(--accent);box-shadow:0 0 0 3px rgba(22,184,137,0.12)}
/* scroll controls */
.scroll-controls{display:flex;gap:7px}
.scroll-controls .square-button{width:38px;height:38px}
.scroller-foot{display:flex;align-items:center;gap:16px;margin-top:18px;color:#8a97a9;font-family:var(--font-display);font-size:10px;letter-spacing:0.08em}
.scroller-foot p{margin-left:auto;color:#8b97a8;font-family:var(--font-sans);font-size:11px;letter-spacing:0}
.scroller-track{width:98px;height:1px;background:#dae3ef}
.scroller-track span{display:block;width:28px;height:1px;background:var(--blue-600)}/* =========================================================
   Header & nav
   ========================================================= */
.site-header{position:sticky;top:0;z-index:1000;width:100%;height:var(--header-h);background:rgba(255,255,255,0.92);border-bottom:1px solid rgba(7,26,51,0.08);backdrop-filter:blur(18px) saturate(1.2);transition:background var(--fast),box-shadow var(--fast)}
.site-header.is-scrolled{background:rgba(255,255,255,0.97);box-shadow:0 8px 28px rgba(15,38,72,0.07)}
.nav-shell{display:flex;align-items:center;width:100%;max-width:1550px;height:100%;margin-inline:auto;padding-inline:clamp(18px,2.2vw,34px)}
.brand{display:flex;flex:0 0 auto;align-items:center;height:100%;margin-right:clamp(12px,1.6vw,25px)}
.brand-logo{font-size:22px;font-weight:800;color:var(--blue-600);letter-spacing:-0.02em;white-space:nowrap}
.brand-logo small{color:var(--ink);font-weight:700}
.desktop-nav{align-self:stretch;min-width:0}
.nav-list{display:flex;align-items:stretch;height:100%;white-space:nowrap}
.nav-list>li{display:flex;align-items:stretch}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:4px;height:100%;padding:0 clamp(6px,0.72vw,11px);border:0;background:transparent;color:#172338;font-size:13.5px;font-weight:500;line-height:1.4;letter-spacing:-0.01em;cursor:pointer;transition:color var(--fast)}
.nav-link:hover,.nav-link:focus-visible,.has-mega.is-open>.nav-link{color:var(--blue-600)}
.nav-link::after{content:"";position:absolute;left:clamp(6px,0.72vw,11px);right:clamp(6px,0.72vw,11px);bottom:0;height:2px;background:var(--blue-600);transform:scaleX(0);transform-origin:left;transition:transform var(--normal) var(--ease)}
.nav-list>li:not(.has-mega) .nav-link:hover::after,.has-mega:hover>.nav-link::after,.has-mega.is-open>.nav-link::after{transform:scaleX(1)}
.nav-link .icon--xs{margin-left:1px;color:#8a97aa}
.nav-actions{display:flex;flex:0 0 auto;align-items:center;gap:3px;margin-left:auto;padding-left:12px}
.nav-search .icon{width:18px;height:18px}
.nav-divider{width:1px;height:15px;margin:0 7px;background:#e1e7ef}
.nav-login{padding:8px 10px;color:#23354d;font-size:13px;transition:color var(--fast)}
.nav-login:hover{color:var(--blue-600)}
.nav-register{display:inline-flex;align-items:center;justify-content:center;height:34px;margin-left:5px;padding:0 15px;color:#fff;background:var(--blue-600);font-size:13px;font-weight:500;transition:background var(--fast)}
.nav-register:hover{background:var(--blue-500)}
.nav-console{display:inline-flex;align-items:center;height:32px;padding:0 8px;color:#41546a;font-size:12px;white-space:nowrap;transition:color var(--fast)}
.nav-console:hover{color:var(--blue-600)}
.mobile-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:38px;height:38px;margin-left:2px;padding:0;border:0;background:transparent}
.mobile-toggle span{display:block;width:19px;height:1px;background:#25364d;transition:transform var(--fast),opacity var(--fast)}
.mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* mega menu */
.mega-panel{position:fixed;top:var(--header-h);left:0;z-index:990;width:100%;padding:0;background:#fff;border-top:1px solid #eef2f7;border-bottom:1px solid #dde6f1;box-shadow:0 24px 45px rgba(7,26,51,0.12);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;white-space:normal;transition:opacity 0.24s ease,transform 0.28s var(--ease),visibility 0s linear 0.24s}
.has-mega.is-open>.mega-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:opacity 0.24s ease,transform 0.28s var(--ease),visibility 0s linear 0s}
.mega-inner{display:grid;grid-template-columns:254px minmax(0,1fr) 220px;gap:26px;width:100%;max-width:var(--container);min-height:316px;margin-inline:auto;padding:26px var(--gutter) 30px}
.mega-intro{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:264px;padding:27px 25px;overflow:hidden;color:#fff;background:linear-gradient(145deg,rgba(0,108,246,0.28),transparent 58%),linear-gradient(135deg,#071b36,#0a2a58)}
.mega-intro::after{content:"";position:absolute;right:-28px;bottom:-40px;width:138px;height:138px;border:1px solid rgba(115,175,255,0.28);transform:rotate(28deg);pointer-events:none}
.mega-intro .eyebrow{margin-bottom:16px;font-size:9px;letter-spacing:0.16em}
.mega-intro h3{font-size:23px;font-weight:600;line-height:1.35;letter-spacing:-0.02em}
.mega-intro p{margin-top:12px;color:#9cb4d0;font-size:12px;line-height:1.8}
.mega-intro .text-link{margin-top:auto;padding-top:23px;color:#cfe5ff;font-size:12px}
.mega-menu-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:7px}
.mega-menu-col h4{margin-bottom:9px;color:#8190a4;font-size:10px;font-weight:500;line-height:1.7;letter-spacing:0.1em}
.mega-menu-col a{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-bottom:1px solid #eef2f7;color:var(--ink-2);transition:padding-left var(--fast),background var(--fast)}
.mega-menu-col a:first-of-type{border-top:1px solid #eef2f7}
.mega-menu-col a:hover{padding-left:7px;background:#f8fbff}
.mega-menu-col strong{font-size:13px;font-weight:500;line-height:1.5}
.mega-menu-col span{overflow:hidden;color:#7b899d;font-size:11px;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.mega-promo{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:264px;padding:24px;overflow:hidden;color:#08254e;background:linear-gradient(180deg,rgba(255,255,255,0) 8%,rgba(255,255,255,0.03) 60%),linear-gradient(145deg,#e9f4ff,#cce5ff);border:1px solid #d7e8fb;transition:background var(--fast),transform var(--fast)}
.mega-promo:hover{transform:translateY(-2px)}
.promo-kicker{position:relative;z-index:1;color:#4574a5;font-size:10px;font-weight:600;letter-spacing:0.12em}
.mega-promo strong{position:relative;z-index:1;margin-top:8px;font-size:23px;font-weight:600;line-height:1.35;letter-spacing:-0.03em}
.promo-link{position:relative;z-index:1;display:flex;align-items:center;gap:5px;margin-top:20px;color:var(--blue-700);font-size:12px;font-weight:500}
.promo-link .icon{width:14px;height:14px}
.promo-grid{position:absolute;right:-8px;bottom:-16px;width:160px;height:160px;opacity:0.45;background-image:linear-gradient(rgba(18,93,245,0.16) 1px,transparent 1px),linear-gradient(90deg,rgba(18,93,245,0.16) 1px,transparent 1px);background-size:22px 22px;transform:rotate(11deg)}
/* search layer */
.search-layer{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding:12vh 24px 30px}
.search-backdrop{position:absolute;inset:0;background:rgba(6,19,38,0.48);backdrop-filter:blur(12px);animation:backdropIn 0.25s ease both}
.search-dialog{position:relative;z-index:1;width:min(850px,100%);max-height:calc(100vh - 15vh);overflow:auto;background:#fff;border:1px solid #d8e2ee;box-shadow:0 30px 80px rgba(1,20,46,0.25);animation:searchDialogIn 0.32s var(--ease) both}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
@keyframes searchDialogIn{from{opacity:0;transform:translateY(-16px) scale(0.99)}to{opacity:1;transform:translateY(0) scale(1)}}
.search-head{display:flex;align-items:center;gap:8px;padding:17px 19px 17px 24px;border-bottom:1px solid #e8eef5}
.search-form{display:flex;align-items:center;flex:1;min-width:0}
.search-form-icon{width:19px;height:19px;margin-right:12px;color:#75869a}
.search-form input{width:100%;min-width:0;height:34px;padding:0;border:0;border-radius:0;outline:0;background:transparent;color:var(--ink);font-size:16px;appearance:none;-webkit-appearance:none}
.search-form input::placeholder{color:#9aa7b7}
.search-submit{flex:0 0 auto;height:36px;margin-left:16px;padding:0 19px;border:0;background:var(--blue-600);color:#fff;font-size:13px;transition:background var(--fast)}
.search-submit:hover{background:var(--blue-500)}
.search-close{color:#75869a}
.search-content{padding:22px 24px 24px}
.search-hot{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.search-label{color:#7c8b9f;font-size:11px;font-weight:500;letter-spacing:0.03em}
.search-chip{min-height:28px;padding:3px 10px;border:1px solid #e4ebf3;background:#f9fbfd;color:#53657b;font-size:12px;transition:color var(--fast),border-color var(--fast),background var(--fast)}
.search-chip:hover{color:var(--blue-600);background:#f3f8ff;border-color:#cfe0f4}
.search-results-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 11px}
.search-hint{color:#9aa7b7;font-size:10px}
.search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.search-result{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:11px 14px;border:1px solid #edf1f5;background:#fff;transition:border-color var(--fast),background var(--fast)}
.search-result:hover{border-color:#cadedd;background:#f8fbff}
.search-result-main{min-width:0}
.search-result strong{display:block;color:#23364e;font-size:13px;font-weight:500;line-height:1.5}
.search-result span{display:block;overflow:hidden;margin-top:2px;color:#8a97a7;font-size:11px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.search-result .icon{width:14px;height:14px;color:#9ba9b9;transition:color var(--fast),transform var(--fast)}
.search-result:hover .icon{color:var(--blue-600);transform:translate(2px,-2px)}
.search-empty{grid-column:1/-1;padding:26px 15px;border:1px dashed #dfe7f0;color:#8a97a7;font-size:12px;text-align:center}
.search-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 24px;border-top:1px solid #edf1f6;color:#8c99a9;font-size:10px}
.search-foot span,.search-foot a{display:inline-flex;align-items:center;gap:5px}
.search-foot .icon{width:13px;height:13px;color:var(--blue-500)}
.search-foot a{color:var(--blue-600);font-size:11px}/* ===================== hero ===================== */
.hero{position:relative;overflow:hidden;background:#eaf3ff}
.hero-stage{position:relative;height:clamp(620px,75vh,708px);min-height:620px;overflow:hidden}
.hero-backgrounds,.hero-bg,.hero-scrim,.hero-grid-overlay{position:absolute;inset:0}
.hero-bg{background-position:center center;background-size:cover;opacity:0;transform:scale(1.035);transition:opacity 0.8s ease;will-change:opacity,transform}
.hero-bg.is-active{opacity:1;animation:heroZoom 9s var(--ease) both}
@keyframes heroZoom{from{transform:scale(1.04)}to{transform:scale(1)}}
.hero-scrim{z-index:1;background:linear-gradient(90deg,rgba(248,251,255,0.98) 0%,rgba(248,251,255,0.93) 27%,rgba(248,251,255,0.58) 49%,rgba(248,251,255,0.1) 72%,rgba(248,251,255,0) 100%),linear-gradient(0deg,rgba(248,251,255,0.96) 0%,rgba(248,251,255,0.18) 20%,transparent 36%)}
.hero-grid-overlay{z-index:1;width:70%;opacity:0.34;background-image:linear-gradient(rgba(18,93,245,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(18,93,245,0.07) 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(90deg,#000 5%,transparent 82%);-webkit-mask-image:linear-gradient(90deg,#000 5%,transparent 82%)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:218px minmax(0,1fr);gap:clamp(32px,4vw,72px);height:100%;padding-top:16px;padding-bottom:58px}
.hero-rail{display:flex;flex-direction:column;align-self:center;width:100%;max-width:218px;padding:4px 0;border-right:1px solid rgba(18,93,245,0.16)}
.rail-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px 13px 0;border-bottom:1px solid rgba(7,42,94,0.11);color:#64758a;font-size:10px;font-weight:500;letter-spacing:0.08em}
.rail-count{color:#9babbb;font-family:var(--font-display);font-size:9px;letter-spacing:0.05em}
.rail-list{display:flex;flex-direction:column}
.rail-item{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:start;width:100%;padding:13px 16px 14px 0;border:0;border-bottom:1px solid rgba(18,93,245,0.08);background:transparent;color:#3d4f66;text-align:left;cursor:pointer;transition:color var(--fast),background var(--fast)}
.rail-item::before{content:"";position:absolute;right:-1px;top:0;width:2px;height:100%;background:var(--blue-600);transform:scaleY(0);transform-origin:top;transition:transform 0.38s var(--ease)}
.rail-item:hover{color:var(--blue-600);background:linear-gradient(90deg,transparent,rgba(255,255,255,0.55))}
.rail-item.is-active{color:var(--blue-600);background:linear-gradient(90deg,transparent,rgba(255,255,255,0.7))}
.rail-item.is-active::before{transform:scaleY(1)}
.rail-num{padding-top:2px;color:#9aa8b9;font-family:var(--font-display);font-size:10px;line-height:1.4;transition:color var(--fast)}
.rail-item.is-active .rail-num,.rail-item:hover .rail-num{color:var(--blue-500)}
.rail-text{display:flex;min-width:0;flex-direction:column;gap:2px}
.rail-text strong{overflow:hidden;color:#3b4c63;font-size:13px;font-weight:500;line-height:1.5;text-overflow:ellipsis;white-space:nowrap;transition:color var(--fast)}
.rail-text small{overflow:hidden;color:#8290a3;font-size:10px;font-weight:400;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.rail-item.is-active .rail-text strong,.rail-item:hover .rail-text strong{color:var(--blue-600)}
.rail-progress{position:absolute;left:0;bottom:0;display:block;width:100%;height:1px;background:var(--blue-500);transform:scaleX(0);transform-origin:left;opacity:0}
.rail-item.is-active .rail-progress{opacity:1;animation:railProgress var(--hero-duration) linear forwards}
.hero.is-paused .rail-item.is-active .rail-progress{animation-play-state:paused}
@keyframes railProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rail-more{display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-top:17px;color:#627389;font-size:11px;transition:color var(--fast)}
.rail-more .icon{width:13px;height:13px}
.rail-more:hover{color:var(--blue-600)}
.hero-copy-stack{position:relative;align-self:center;min-width:0;min-height:465px}
.hero-copy{position:absolute;top:50%;left:0;width:100%;max-width:840px;padding-block:16px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(calc(-50% + 22px));transition:opacity 0.6s ease,transform 0.7s var(--ease),visibility 0.6s}
.hero-copy.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)}
.hero-kicker{display:flex;align-items:center;gap:11px;margin-bottom:20px;color:#51637b;font-size:12px;font-weight:500;letter-spacing:0.015em}
.hero-copy :is(h1,h2){max-width:850px;color:var(--ink);font-size:clamp(48px,5vw,72px);font-weight:600;line-height:1.08;letter-spacing:-0.055em}
.hero-copy :is(h1,h2) .text-gradient{display:inline-block}
.hero-desc{max-width:600px;margin-top:22px;color:#42546c;font-size:14px;line-height:1.9}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-actions .btn{min-height:45px;padding-inline:22px}
.hero-assurance{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;margin-top:25px;color:#5e7289;font-size:11px}
.hero-assurance li{display:inline-flex;align-items:center;gap:6px}
.hero-assurance .icon{width:12px;height:12px;color:var(--accent-dark)}
.hero-note{display:flex;align-items:center;gap:8px;margin-top:22px;color:#718198;font-size:11px;letter-spacing:0.015em}
.hero-bottom{position:absolute;bottom:25px;left:50%;z-index:4;display:flex;align-items:center;justify-content:space-between;width:min(100%,var(--container));padding-inline:var(--gutter);transform:translateX(-50%)}
.hero-progress-group{display:flex;align-items:center;gap:13px}
.hero-counter{display:flex;align-items:baseline;gap:4px;min-width:62px;color:#9aa8ba;font-family:var(--font-display);font-size:11px;letter-spacing:0.04em}
.hero-counter #hero-current{color:var(--ink);font-size:14px}
.counter-divider{color:#a6b3c3}
.hero-progress{position:relative;width:clamp(82px,9vw,142px);height:1px;overflow:hidden;background:rgba(7,26,51,0.16)}
#hero-progress-fill{display:block;width:100%;height:100%;background:var(--blue-600);transform:scaleX(0);transform-origin:left}
.hero.is-playing #hero-progress-fill{animation:heroProgress var(--hero-duration) linear forwards}
.hero.is-paused #hero-progress-fill{animation-play-state:paused}
@keyframes heroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-autoplay{display:grid;place-items:center;width:25px;height:25px;padding:0;border:0;background:transparent;color:#62748b}
.hero-autoplay:hover{color:var(--blue-600)}
.hero-autoplay .icon{width:13px;height:13px}
.hero-autoplay .icon-play{display:none}
.hero.is-paused .hero-autoplay .icon-pause{display:none}
.hero.is-paused .hero-autoplay .icon-play{display:block}
.hero-bottom-right{display:flex;align-items:center;gap:25px}
.hero-text-link{display:inline-flex;align-items:center;gap:5px;color:#5d7088;font-size:11px;transition:color var(--fast)}
.hero-text-link .icon{width:13px;height:13px}
.hero-text-link:hover{color:var(--blue-600)}
.hero-arrows{display:flex;gap:7px}
.hero-arrows .square-button{width:37px;height:37px;background:rgba(255,255,255,0.72);border-color:rgba(7,26,51,0.15);backdrop-filter:blur(8px)}
.hero-arrows .square-button:hover{background:var(--blue-600);border-color:var(--blue-600)}
/* updates bar */
.updates-bar{position:relative;z-index:5;background:#fff;border-top:1px solid #e9eff6;border-bottom:1px solid #e5ecf4}
.updates-inner{display:flex;align-items:stretch;min-height:74px;padding-inline:var(--gutter)}
.updates-label{display:flex;flex:0 0 172px;align-items:center;gap:8px;padding-right:23px;border-right:1px solid #e7edf4;color:#20344e;font-size:12px;font-weight:600}
.updates-list{display:grid;flex:1;grid-template-columns:repeat(4,minmax(0,1fr))}
.updates-list a{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:13px 24px;border-right:1px solid #edf1f6;color:var(--ink-2);transition:background var(--fast)}
.updates-list a:last-child{border-right:0}
.updates-list a:hover{background:#f8fbff}
.update-type{color:var(--blue-500);font-size:9px;font-weight:500;line-height:1.4;letter-spacing:0.04em}
.update-text{overflow:hidden;color:#2f4159;font-size:12px;font-weight:500;line-height:1.55;text-overflow:ellipsis;white-space:nowrap}
.update-extra{overflow:hidden;color:#95a2b2;font-size:10px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}/* ===================== product catalog / plan cards ===================== */
.catalog-section{background:radial-gradient(circle at 90% 10%,rgba(18,93,245,0.05),transparent 24%),linear-gradient(180deg,#ffffff 0%,#f7faff 22%,#f5f8fc 100%)}
.catalog-shell{position:relative;overflow:hidden;background:#fff;border:1px solid #e1eaf4;box-shadow:0 18px 48px rgba(7,26,51,0.045)}
.catalog-toolbar{display:flex;align-items:stretch;justify-content:space-between;gap:20px;padding:0 28px;background:#fbfdff;border-bottom:1px solid #e8eef6}
.catalog-tabs{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.catalog-tabs::-webkit-scrollbar{display:none}
.catalog-tab{position:relative;display:inline-flex;align-items:center;gap:8px;height:68px;padding:0 22px;border:0;background:transparent;color:#5d7187;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color var(--fast),background var(--fast)}
.catalog-tab .icon{width:17px;height:17px;color:#8ca0b6;transition:color var(--fast)}
.catalog-tab::after{content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--blue-600),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform 0.3s var(--ease)}
.catalog-tab:hover{color:var(--blue-600);background:#f7faff}
.catalog-tab:hover .icon{color:var(--blue-500)}
.catalog-tab.is-active{color:var(--blue-600);background:linear-gradient(180deg,rgba(18,93,245,0.03),transparent)}
.catalog-tab.is-active .icon{color:var(--blue-600)}
.catalog-tab.is-active::after{transform:scaleX(1)}
.billing-switch{display:flex;align-items:center;flex:0 0 auto;gap:7px;padding:13px 0}
.billing-label{margin-right:3px;color:#8495a8;font-size:10px;white-space:nowrap}
.billing-option{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border:1px solid #dce5ef;background:#fff;color:#5b6e84;font-size:11px;line-height:1;white-space:nowrap;cursor:pointer;transition:color var(--fast),background var(--fast),border-color var(--fast)}
.billing-option span{color:var(--accent-dark);font-size:9px}
.billing-option:hover{color:var(--blue-600);border-color:#b9cff0}
.billing-option.is-active{color:#fff;background:var(--blue-600);border-color:var(--blue-600)}
.billing-option.is-active span{color:#bdffe9}
.catalog-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 28px;border-bottom:1px solid #edf2f7;color:#8494a6;font-size:10px}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:24px 28px 26px}
.catalog-grid.is-animating .catalog-card{animation:catalogCardIn 0.42s var(--ease) both}
.catalog-grid.is-animating .catalog-card:nth-child(2){animation-delay:0.05s}
.catalog-grid.is-animating .catalog-card:nth-child(3){animation-delay:0.1s}
@keyframes catalogCardIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.catalog-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:585px;padding:20px;overflow:hidden;background:#fff;border:1px solid #e3ebf4;transition:border-color var(--fast),box-shadow var(--fast),transform var(--fast)}
.catalog-card:hover{border-color:#b7cfef;box-shadow:0 14px 34px rgba(7,26,51,0.065);transform:translateY(-3px)}
.catalog-card.is-featured{background:linear-gradient(180deg,#f7fbff 0%,#fff 30%);border-color:#abc7ef}
.catalog-card.is-featured::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--blue-600),var(--accent))}
.catalog-card-top{display:flex;align-items:center;gap:7px;min-width:0}
.catalog-icon{display:grid;place-items:center;width:35px;height:35px;flex:0 0 auto;color:var(--blue-600);background:#eef5ff;border:1px solid #dbe8f9}
.catalog-icon .icon{width:17px;height:17px}
.catalog-stock{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;color:var(--accent-dark);background:#f0faf5;border:1px solid #cfeadd;font-size:8.5px;line-height:1.4;white-space:nowrap}
.catalog-stock i{width:4px;height:4px;background:var(--accent)}
.catalog-featured{margin-left:auto;padding:3px 6px;color:#fff;background:var(--blue-600);font-size:8.5px;line-height:1.4;white-space:nowrap}
.catalog-heading{margin-top:16px}
.catalog-heading h3{color:var(--ink);font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-0.025em}
.catalog-processor{display:block;margin-top:4px;color:#8494a6;font-family:var(--font-mono);font-size:9px;line-height:1.5}
.catalog-desc{margin-top:9px;color:#63778c;font-size:11px;line-height:1.7}
.catalog-use{margin-top:11px;padding:9px 10px;color:#6b7d90;background:#f8fbfe;border-left:2px solid #bcd4f2;font-size:10px;line-height:1.65}
.catalog-use span{display:block;margin-bottom:2px;color:#95a4b5;font-size:8px;letter-spacing:0.03em}
.catalog-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:11px}
.catalog-tags span{padding:2px 6px;color:#65798f;background:#f8fbff;border:1px solid #e1eaf3;font-size:8.5px;line-height:1.5}
.catalog-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:15px 0 0;border-top:1px solid #ebf1f7;border-left:1px solid #ebf1f7}
.catalog-spec{min-width:0;padding:7px 8px;border-right:1px solid #ebf1f7;border-bottom:1px solid #ebf1f7}
.catalog-spec dt{color:#96a4b5;font-size:8px;line-height:1.5}
.catalog-spec dd{overflow:hidden;margin:1px 0 0;color:#374c64;font-size:10.5px;line-height:1.55;text-overflow:ellipsis;white-space:nowrap}
.catalog-price{margin-top:auto;padding-top:16px}
.catalog-price-label{display:block;color:#8998aa;font-size:8.5px}
.catalog-price-line{display:flex;align-items:baseline;gap:2px;margin-top:3px;color:var(--blue-600)}
.catalog-price-line>span{font-family:var(--font-display);font-size:14px;font-weight:500}
.catalog-price-line strong{font-family:var(--font-display);font-size:35px;font-weight:500;line-height:1;letter-spacing:-0.035em}
.catalog-price-line small{color:#8494a6;font-size:9px}
.catalog-price p{margin-top:5px;color:#92a0b1;font-size:8.5px;line-height:1.5}
.catalog-cta{display:flex;align-items:center;justify-content:space-between;width:100%;height:39px;margin-top:13px;padding:0 13px;border:1px solid var(--blue-600);background:#fff;color:var(--blue-600);font-size:11px;font-weight:500;cursor:pointer;transition:color var(--fast),background var(--fast),border-color var(--fast)}
.catalog-cta .icon{width:13px;height:13px;transition:transform var(--fast)}
.catalog-cta:hover{color:#fff;background:var(--blue-600)}
.catalog-cta:hover .icon{transform:translateX(2px)}
.catalog-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:15px 28px;border-top:1px solid #e9eff6;background:#fbfdff}
.catalog-perks{display:flex;flex-wrap:wrap;gap:8px 20px}
.catalog-perks li{display:inline-flex;align-items:center;gap:5px;color:#65798e;font-size:9.5px}
.catalog-perks .icon{width:12px;height:12px;color:var(--accent-dark)}
.catalog-foot>p{max-width:460px;color:#9aa7b5;font-size:8.5px;line-height:1.6;text-align:right}
/* features / why */
.features-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.feature-card{display:flex;align-items:flex-start;gap:12px;min-height:125px;padding:20px;background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.1);transition:border-color var(--fast),background var(--fast)}
.feature-card:hover{background:rgba(255,255,255,0.055);border-color:rgba(116,171,255,0.3)}
.feature-icon{display:grid;place-items:center;width:33px;height:33px;flex:0 0 auto;color:#93beff;background:rgba(18,93,245,0.18);border:1px solid rgba(94,150,255,0.25)}
.feature-icon .icon{width:16px;height:16px}
.feature-card h3{color:#eaf3ff;font-size:14px;font-weight:500;line-height:1.5}
.feature-card p{margin-top:5px;color:#91a7bd;font-size:10.5px;line-height:1.75}
/* network */
.network-section{background:linear-gradient(180deg,#f8fbff 0%,#f2f7fe 100%);border-top:1px solid #e9f0f8;border-bottom:1px solid #e5edf6}
.network-layout{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);background:#fff;border:1px solid #e1eaf4;box-shadow:0 18px 45px rgba(7,26,51,0.04)}
.network-info{display:flex;flex-direction:column;min-width:0;padding:clamp(24px,3vw,34px);border-right:1px solid #e9eff6}
.region-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:19px}
.region-option{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0;padding:11px 10px;border:1px solid #e1e9f2;background:#fff;color:#4f647b;text-align:left;cursor:pointer;transition:color var(--fast),border-color var(--fast),background var(--fast)}
.region-option:hover{color:var(--blue-600);border-color:#b8cdec}
.region-option.is-active{color:var(--blue-600);border-color:var(--blue-400);background:#f4f9ff;box-shadow:inset 3px 0 0 var(--blue-600)}
.region-option-name{display:flex;align-items:center;min-width:0;gap:4px;font-size:10.5px;line-height:1.35;white-space:nowrap}
.region-option-latency{flex:0 0 auto;color:#354b64;font-family:var(--font-display);font-size:14px;font-weight:500}
.region-option.is-active .region-option-latency{color:var(--blue-600)}
.region-option-latency small{margin-left:1px;color:#9aa8b8;font-size:8px;font-weight:400}
.network-current{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:17px;border:1px solid #e5edf5;background:#f7faff}
.network-current>div{min-width:0;padding:10px;border-right:1px solid #e5edf5}
.network-current>div:last-child{border-right:0}
.network-current span{display:block;color:#8c9bad;font-size:8.5px;line-height:1.4}
.network-current strong{display:block;overflow:hidden;margin-top:2px;color:#2d455f;font-size:11px;font-weight:500;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.network-more{margin-top:auto;padding-top:16px;font-size:10px}
.infra-map.network-map{position:relative;min-height:563px;overflow:hidden;background:radial-gradient(ellipse at 55% 50%,rgba(255,255,255,0.16),transparent 38%),linear-gradient(140deg,#dbeaff 0%,#edf6ff 62%,#e2f0ff 100%);border:1px solid #d9e6f6}
.network-map-label{position:absolute;top:16px;right:16px;z-index:3;color:#7f95ac;font-family:var(--font-display);font-size:8px;letter-spacing:0.08em}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(18,93,245,0.06) 1px,transparent 1px),linear-gradient(rgba(18,93,245,0.06) 1px,transparent 1px);background-size:76px 76px;transform:perspective(600px) rotateX(52deg) scale(1.45) translateY(15%);transform-origin:center top;opacity:0.8;pointer-events:none}
.map-node{position:absolute;top:var(--y);left:var(--x);z-index:2;display:flex;align-items:center;gap:4px;transform:translate(-50%,-50%)}
.map-ping{position:relative;width:6px;height:6px;flex:0 0 auto;background:var(--blue-500);box-shadow:0 0 0 3px rgba(255,255,255,0.66)}
.map-ping::after{content:"";position:absolute;inset:-3px;border:1px solid rgba(0,108,245,0.5);animation:mapPing 2.4s ease-out infinite}
@keyframes mapPing{0%{opacity:0.8;transform:scale(0.6)}100%{opacity:0;transform:scale(2.4)}}
.map-label{display:flex;align-items:center;gap:3px;padding:4px 6px;border:1px solid rgba(255,255,255,0.8);background:rgba(255,255,255,0.84);color:#375173;font-size:9px;line-height:1.35;white-space:nowrap;backdrop-filter:blur(5px);transition:color var(--fast),background var(--fast)}
.map-label small{color:#8497ad;font-size:8px}
.map-node:hover .map-label,.map-node.is-active .map-label{color:#fff;background:var(--blue-600);border-color:var(--blue-600)}
.map-caption{position:absolute;left:13px;bottom:13px;z-index:3;display:flex;align-items:center;gap:6px;padding:6px 9px;background:rgba(255,255,255,0.78);border:1px solid rgba(255,255,255,0.86);color:#6a7d93;font-size:8px;backdrop-filter:blur(7px)}/* ===================== FAQ ===================== */
.faq-section{background:#f5f8fc}
.faq-layout{display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);gap:30px;align-items:start}
.faq-aside{display:flex;flex-direction:column;align-items:flex-start;padding:26px;background:radial-gradient(circle at 100% 0,rgba(22,184,137,0.09),transparent 31%),linear-gradient(150deg,#f8fbff,#eaf3ff);border:1px solid #d9e6f4}
.faq-eyebrow{color:#7790a8;font-family:var(--font-display);font-size:9px;letter-spacing:0.1em}
.faq-aside h3{margin-top:13px;color:#102a48;font-size:25px;font-weight:600;line-height:1.35;letter-spacing:-0.03em}
.faq-aside>p{margin-top:10px;color:#65798e;font-size:11px;line-height:1.85}
.faq-aside .btn{min-height:39px;margin-top:20px;font-size:11px}
.faq-aside>.text-link{margin-top:15px;font-size:10px}
.faq-list{border-top:1px solid #dce6f1}
.faq-item{border-bottom:1px solid #dce6f1}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:18px 2px;border:0;background:transparent;color:#273f59;font-size:13px;font-weight:500;line-height:1.55;text-align:left;cursor:pointer;transition:color var(--fast)}
.faq-question:hover,.faq-item.is-open .faq-question{color:var(--blue-600)}
.faq-plus{position:relative;width:16px;height:16px;flex:0 0 auto}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:1px;background:currentColor;transform:translate(-50%,-50%);transition:transform 0.3s var(--ease)}
.faq-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.is-open .faq-plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-answer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 0.36s var(--ease),opacity 0.3s ease}
.faq-item.is-open .faq-answer{grid-template-rows:1fr;opacity:1}
.faq-answer-inner{overflow:hidden}
.faq-answer-inner p{max-width:720px;padding:0 28px 18px 2px;color:#6b7f94;font-size:11px;line-height:1.9}
/* ===================== contact modal ===================== */
.contact-layer{position:fixed;inset:0;z-index:2100;display:flex;align-items:center;justify-content:center;padding:26px}
.contact-backdrop{position:absolute;inset:0;background:rgba(5,18,35,0.55);backdrop-filter:blur(9px)}
.contact-dialog{position:relative;z-index:1;width:min(810px,100%);max-height:calc(100vh - 52px);overflow:auto;background:#fff;border:1px solid #dce7f2;box-shadow:0 30px 90px rgba(0,15,35,0.32)}
.contact-dialog-head{position:relative;padding:27px 31px 21px;background:radial-gradient(circle at 96% 0,rgba(22,184,137,0.09),transparent 30%),linear-gradient(145deg,#f8fbff,#eef6ff);border-bottom:1px solid #e5edf5}
.contact-dialog-head .eyebrow{font-size:9px}
.contact-dialog-head h2{margin-top:13px;color:#102a48;font-size:29px;font-weight:600;line-height:1.3;letter-spacing:-0.035em}
.contact-dialog-head>p{margin-top:7px;color:#7b8da0;font-size:11px}
.contact-close{position:absolute;top:18px;right:18px;border:1px solid #dde7f1;background:rgba(255,255,255,0.72)}
.contact-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:20px 31px 24px}
.contact-method{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;min-width:0;padding:15px;border:1px solid #e2eaf3;background:#fff;transition:border-color var(--fast),box-shadow var(--fast),transform var(--fast)}
.contact-method:hover{border-color:#b9d0ed;box-shadow:0 8px 22px rgba(7,26,51,0.055);transform:translateY(-2px)}
.contact-method-icon{display:grid;place-items:center;width:36px;height:36px;color:var(--blue-600);background:#edf5ff;border:1px solid #d9e8fa}
.contact-method-icon.is-mint{color:var(--accent-dark);background:var(--accent-soft);border-color:#ccebdf}
.contact-method-icon.is-qq{color:#1d78cd;background:#eff8ff;border-color:#d5eafb}
.contact-method-copy{display:flex;min-width:0;flex-direction:column;gap:1px}
.contact-method-copy small{color:#8d9cac;font-size:8px;line-height:1.4}
.contact-method-copy strong{overflow:hidden;color:#2b425b;font-size:11.5px;font-weight:500;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.contact-method-action{display:inline-flex;align-items:center;gap:3px;color:var(--blue-600);font-size:8.5px;white-space:nowrap}
.contact-method-action .icon{width:11px;height:11px}
.contact-dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 31px;border-top:1px solid #edf2f7;background:#fbfdff;color:#8d9bac;font-size:9px}
/* ===================== footer ===================== */
.site-footer{color:#9aa9ba;background:#07111f}
.footer-top{display:grid;grid-template-columns:270px minmax(0,1fr);gap:54px;padding:57px 0 42px;border-bottom:1px solid rgba(255,255,255,0.09)}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start}
.footer-brand>.brand-logo{color:#fff}
.footer-brand>p{margin-top:19px;color:#8292a6;font-size:12px;line-height:1.9}
.footer-social{display:flex;gap:7px;margin-top:22px}
.footer-social a{display:grid;place-items:center;width:31px;height:31px;color:#8da0b5;border:1px solid rgba(255,255,255,0.13);transition:color var(--fast),border-color var(--fast),background var(--fast)}
.footer-social a:hover{color:#fff;background:var(--blue-600);border-color:var(--blue-600)}
.footer-social .icon{width:14px;height:14px}
.footer-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.footer-col h3{margin-bottom:15px;color:#dae4ee;font-size:12px;font-weight:500;line-height:1.5}
.footer-col a{display:block;width:fit-content;padding:3px 0;color:#8495a9;font-size:12px;line-height:1.75;transition:color var(--fast)}
.footer-col a:hover{color:#d7e8fb}
.footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 38px;align-items:start;padding:18px 0 25px}
.footer-copyright{color:#607287;font-size:10px;line-height:1.7}
.footer-links{justify-self:end}
.footer-links a{display:inline-flex;align-items:center;gap:5px;color:#6d7f94;font-size:10px;transition:color var(--fast)}
.footer-links a:hover{color:#d4e4f4}
.footer-links .icon{width:12px;height:12px}
/* ===================== side rail & toast ===================== */
.side-rail{position:fixed;right:17px;bottom:27px;z-index:900;display:flex;flex-direction:column;align-items:stretch;gap:1px;background:#fff;border:1px solid #dfe7f1;box-shadow:0 10px 28px rgba(7,26,51,0.1)}
.side-rail-btn{position:relative;display:grid;place-items:center;width:47px;height:47px;padding:0;border:0;border-bottom:1px solid #edf1f5;background:#fff;color:#5c7189;transition:color var(--fast),background var(--fast)}
.side-rail-btn:last-child{border-bottom:0}
.side-rail-btn .icon{width:18px;height:18px}
.side-rail-btn span{position:absolute;top:50%;right:calc(100% + 8px);width:max-content;padding:6px 9px;color:#fff;background:#071d3d;font-size:10px;line-height:1.4;opacity:0;visibility:hidden;transform:translate(5px,-50%);transition:opacity var(--fast),transform var(--fast),visibility var(--fast);pointer-events:none}
.side-rail-btn:hover{color:var(--blue-600);background:#f4f9ff}
.side-rail-btn:hover span{opacity:1;visibility:visible;transform:translate(0,-50%)}
.side-rail-btn.is-hidden{display:none}
/* ===================== mobile drawer ===================== */
.drawer-scrim{position:fixed;inset:0;z-index:1090;background:rgba(5,16,33,0.46);backdrop-filter:blur(5px)}
.mobile-drawer{position:fixed;top:0;right:0;z-index:1100;width:min(390px,88vw);height:100dvh;padding:0;overflow:hidden auto;background:#fff;border-left:1px solid #e3eaf3;transform:translateX(102%);visibility:hidden;transition:transform 0.34s var(--ease),visibility 0.34s}
.mobile-drawer.is-open{transform:translateX(0);visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 20px;border-bottom:1px solid #eef2f6}
.drawer-body{padding:22px 20px 30px}
.drawer-nav{margin-top:22px;border-top:1px solid #edf1f5}
.drawer-nav a{display:flex;align-items:center;justify-content:space-between;min-height:49px;border-bottom:1px solid #edf1f5;color:#263a53;font-size:14px}
.drawer-nav a:hover{color:var(--blue-600)}
.drawer-actions{display:flex;gap:9px;margin-top:24px}
.drawer-actions .btn{flex:1;min-height:40px;font-size:13px}
.drawer-group{border-bottom:1px solid #edf1f5}
.drawer-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:49px;padding:0;color:#263a53;background:transparent;border:0;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.drawer-group-toggle .icon{width:14px;height:14px;color:#9aa8b8;transition:transform .2s ease}
.drawer-group.is-open .drawer-group-toggle .icon{transform:rotate(90deg)}
.drawer-subnav{display:grid;gap:0;padding:0 0 7px 13px}
.drawer-subnav[hidden]{display:none!important}
.drawer-subnav a{min-height:38px!important;padding:0 2px 0 14px;color:#61788e!important;border-bottom:1px dashed #f0f4f8!important;border-left:1px solid #e4edf6;font-size:12px!important}
.drawer-subnav a:last-child{border-bottom:0!important}
/* ===================== responsive ===================== */
@media (max-width:1360px){.nav-link{padding-inline:8px;font-size:13px}.hero-inner{grid-template-columns:198px minmax(0,1fr);gap:42px}.catalog-grid{gap:12px;padding-inline:22px}.catalog-card{min-height:570px}.catalog-toolbar,.catalog-meta{padding-inline:22px}.catalog-foot{padding-inline:22px}.features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1180px){.nav-secondary{display:none}.hero-inner{grid-template-columns:184px minmax(0,1fr);gap:35px}.hero-copy :is(h1,h2){font-size:clamp(44px,5vw,62px)}.catalog-card{min-height:600px}.network-layout{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}.footer-top{grid-template-columns:230px minmax(0,1fr);gap:35px}}
@media (max-width:1024px){:root{--header-h:62px}.desktop-nav{display:none}.mobile-toggle{display:flex}.nav-login{display:none}.nav-divider{display:none}.hero-stage{height:650px}.hero-inner{display:block;height:100%;padding-top:34px;padding-bottom:80px}.hero-rail{display:none}.hero-copy-stack{height:100%;min-height:470px}.hero-copy{max-width:710px}.updates-inner{display:block;padding-inline:0}.catalog-toolbar{flex-wrap:wrap;gap:0;padding:0 18px}.catalog-tabs{width:100%;border-bottom:1px solid #e8eef6}.catalog-tab{height:59px;padding-inline:16px;font-size:12.5px}.billing-switch{margin-left:auto;padding:11px 0}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:20px 18px}.features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.network-layout{grid-template-columns:1fr}.network-info{border-right:0;border-bottom:1px solid #e9eff6}.region-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.infra-map.network-map{min-height:450px}.faq-layout{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr;gap:39px}.footer-columns{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-card{min-height:580px}.catalog-foot{display:block}.catalog-foot>p{margin-top:8px;text-align:left}.region-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}}
@media (max-width:680px){:root{--header-h:58px}.brand-logo{font-size:19px}.hero-stage{height:660px;min-height:0}.hero-copy-stack{min-height:450px}.hero-copy :is(h1,h2){font-size:clamp(35px,9.3vw,49px)}.section{padding-block:58px}.section-head{margin-bottom:27px}.section-head h2{font-size:clamp(28px,7.5vw,37px)}.catalog-shell{margin-inline:-20px;border-left:0;border-right:0}.catalog-grid{grid-template-columns:1fr;gap:10px;padding:14px}.catalog-card{min-height:0;padding:16px}.catalog-price-line strong{font-size:32px}.catalog-foot{padding:13px 14px}.features-grid{grid-template-columns:1fr;gap:9px}.feature-card{min-height:0;padding:16px}.region-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.infra-map.network-map{min-height:340px}.faq-aside{display:flex;padding:20px}.faq-aside h3{font-size:23px}.faq-question{font-size:12px}.contact-layer{padding:0;align-items:center}.contact-dialog{width:100%;max-height:100dvh;border:0}.contact-methods{grid-template-columns:1fr;padding:14px 20px 20px}.footer-top{padding-top:42px;padding-bottom:30px}.footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 20px}.footer-bottom{display:block}.footer-copyright{margin-top:8px}.footer-links{margin-top:15px}.side-rail{display:none}}