@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}

:root{
  color-scheme:light;
  /* Layered blue/white system — deep #165DFF + bright #4080FF + light blue washes */
  --bg:#fafbff;--bg-2:#f5f8ff;--bg-3:#eef2fb;
  --surface:#ffffff;--surface-2:#f8fafe;
  --text:#0f1e3a;--text-2:#3d4a63;--muted:#68738a;--faint:#98a2b6;
  --line:rgba(20,40,90,.08);--line-2:rgba(20,40,90,.14);
  --blue:#165dff;--blue-deep:#165dff;--blue-hover:#2f6bff;--blue-press:#0f4fe0;--blue-2:#4080ff;--accent:#4080ff;
  --success:#00b42a;--success-2:#0ac93a;--warning:#ff9f0a;--danger:#ff3b30;
  --grad-accent:linear-gradient(120deg,#165dff 0%,#4080ff 100%);
  --grad-cta:linear-gradient(100deg,#165dff 0%,#4080ff 100%);
  --grad-text:linear-gradient(100deg,#165dff 0%,#4080ff 55%,#3aa0ff 100%);
  --glow-blue:rgba(22,93,255,.45);--glow-violet:rgba(64,128,255,.35);
  /* soft, elevated shadows (Awwwards-style low-contrast float) */
  --shadow-xs:0 2px 8px rgba(20,40,90,.05);
  --shadow-sm:0 4px 20px rgba(20,40,90,.05);
  --shadow-md:0 14px 40px rgba(20,40,90,.09);
  --shadow-lg:0 30px 80px rgba(20,40,90,.13);
  --shadow-blue:0 14px 34px rgba(22,93,255,.24);
  /* corner grading — big cards 16 / buttons 10 / tags 6 */
  --r-tag:6px;--r-btn:10px;--r-sm:10px;--r-md:12px;--r-lg:14px;--r-card:16px;--r-xl:16px;
  --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.22,1,.36,1);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable","Segoe UI","PingFang SC","Microsoft YaHei UI",Arial,sans-serif;
  background:var(--bg);color:var(--text);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg-2);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Lenis smooth-scroll base — required so native smooth doesn't fight the lib */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;min-width:320px;background:var(--bg-2);color:var(--text);font-size:15px;line-height:1.6;letter-spacing:-.01em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.container{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.skip-link{position:absolute;left:16px;top:-60px;background:#fff;color:var(--blue);padding:10px 14px;border-radius:10px;z-index:60;box-shadow:var(--shadow-sm)}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid rgba(22,93,255,.4);outline-offset:2px;border-radius:6px}
section[data-page]{scroll-margin-top:80px}

/* ============================================================
   Global backdrop layers — a single light mesh + grain across
   the whole page (Apple-light redesign). The hero and
   download-band are now light sections with no dark canvas.
   ============================================================ */
.mesh-veil{position:fixed;inset:0;z-index:-4;pointer-events:none;overflow:hidden;background:
  radial-gradient(60% 55% at 18% 12%,rgba(22,93,255,.10),transparent 60%),
  radial-gradient(52% 46% at 84% 20%,rgba(79,140,255,.08),transparent 62%),
  #fbfbfd}
.mesh-blob{position:absolute;border-radius:50%;filter:blur(96px);opacity:.4;mix-blend-mode:screen;will-change:transform}
.mesh-blob--a{width:44vmax;height:44vmax;top:-14%;left:-8%;background:radial-gradient(circle at 40% 40%,#165dff,transparent 62%);animation:mesh-a 30s ease-in-out infinite alternate}
.mesh-blob--b{width:40vmax;height:40vmax;top:-4%;right:-10%;background:radial-gradient(circle at 60% 40%,#4080ff,transparent 62%);opacity:.34;animation:mesh-b 36s ease-in-out infinite alternate}
.mesh-blob--c{width:38vmax;height:38vmax;top:36%;left:24%;background:radial-gradient(circle at 50% 50%,#4080ff,transparent 60%);opacity:.3;animation:mesh-c 42s ease-in-out infinite alternate}
@keyframes mesh-a{0%{transform:translate(-6%,-4%) scale(1)}100%{transform:translate(8%,6%) scale(1.14)}}
@keyframes mesh-b{0%{transform:translate(5%,3%) scale(1.05)}100%{transform:translate(-9%,-7%) scale(.94)}}
@keyframes mesh-c{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-7%,9%) scale(1.1)}}
/* fine film grain to kill banding + add print texture */
.grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.045;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Header (glass, shrink on scroll) ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,251,253,.6);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease)}
.site-header[data-scrolled]{background:rgba(255,255,255,.82);border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 30px rgba(0,0,0,.05)}
/* Light Apple redesign: the header stays light glass on every page (the home hero
   is no longer a dark section, so the dark-glass override was removed). */
.nav-shell{height:64px;width:min(1120px,calc(100% - 48px));margin:auto;display:flex;align-items:center;gap:26px;transition:height .35s var(--ease)}
.site-header[data-scrolled] .nav-shell{height:54px}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}
.brand img{border-radius:8px}
.brand strong{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.brand small{display:block;font-size:11px;color:var(--muted);line-height:1.1}
.brand.center{justify-content:center;margin-bottom:24px}
.site-nav{display:flex;gap:2px;align-items:center;flex:1}
.site-nav a{position:relative;padding:8px 4px;margin:0 8px;border-radius:0;color:var(--text-2);font-weight:500;font-size:14px;transition:color .2s var(--ease)}
.site-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:2px;height:2px;border-radius:2px;background:var(--grad-cta);transition:right .3s var(--ease-out)}
.site-nav a:hover{color:var(--text)}
.site-nav a:hover::after{right:0}
.site-nav a.active{color:var(--blue)}
.site-nav a.active::after{right:0}
.nav-actions{display:flex;align-items:center;gap:10px}
.menu-button{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:0 10px}
.menu-button span{display:block;height:1.5px;background:var(--text);border-radius:2px;transition:transform .28s var(--ease),opacity .2s var(--ease)}
.menu-button[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.menu-button[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ---------- Buttons ---------- */
.button{position:relative;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-btn);padding:0 20px;border:1px solid transparent;font-weight:600;font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),box-shadow .3s var(--ease),opacity .2s var(--ease)}
.button.large{height:52px;padding:0 30px;font-size:16px;border-radius:12px}
.button.compact{height:36px;margin-top:16px;padding:0 16px;font-size:13px}
.button.full{width:100%}
.button.danger{color:var(--danger);background:#fff;border-color:rgba(199,38,29,.28)}
.button.danger:hover{background:rgba(199,38,29,.07);border-color:rgba(199,38,29,.5)}
.button.primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-xs)}
.button.primary:hover{background:var(--blue-hover);box-shadow:var(--shadow-blue);transform:translateY(-2px) scale(1.015)}
.button.primary:active{background:var(--blue-press);transform:scale(.99)}
.button.secondary{background:rgba(22,93,255,.08);color:var(--blue);border-color:transparent}
.button.secondary:hover{background:rgba(22,93,255,.14);transform:translateY(-1px)}
.button.ghost{background:transparent;color:var(--text-2);border-color:var(--line-2)}
.button.ghost:hover{color:var(--text);border-color:var(--text-2);background:rgba(0,0,0,.02)}
.button.link-cta{background:transparent;color:var(--blue);padding:0 6px;font-weight:500;overflow:visible}
.button.link-cta:hover{text-decoration:underline;text-underline-offset:3px}
.button.center-cta{margin-top:6px}
.button.light{background:#fff;color:var(--blue)}
.button.light:hover{background:#fff;box-shadow:var(--shadow-md);transform:translateY(-2px) scale(1.015)}
.button.dark-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.button.dark-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.button[disabled],.button[aria-disabled="true"],button[disabled],a[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
/* light sweep across primary/shine buttons */
.button.shine::before,.button.glow::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s var(--ease);pointer-events:none;z-index:2}
.button.shine:hover::before,.button.glow:hover::before{left:135%}
/* breathing glow on hero / download primary CTA */
.button.glow{background:var(--grad-cta);animation:cta-breathe 3.4s ease-in-out infinite}
.button.glow:hover{background:var(--grad-cta)}
@keyframes cta-breathe{0%,100%{box-shadow:0 8px 24px rgba(22,93,255,.30)}50%{box-shadow:0 12px 38px rgba(22,93,255,.55)}}
/* magnetic buttons: JS drives --mag-x/--mag-y; span moves a touch less for depth */
.magnetic{will-change:transform;transform:translate(var(--mag-x,0px),var(--mag-y,0px))}
.magnetic>span{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit;font:inherit;letter-spacing:inherit;will-change:transform;transform:translate(calc(var(--mag-x,0px)*.32),calc(var(--mag-y,0px)*.32));transition:transform .1s linear}
.account-chip{height:36px;max-width:min(220px,42vw);border:1px solid var(--line-2);border-radius:980px;padding:0 15px;display:inline-flex;align-items:center;background:#fff;color:var(--text);font-weight:500;font-size:14px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.account-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-chip:hover{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,93,255,.1)}

/* ---------- Page & dots ---------- */
.page{display:none;min-height:calc(100vh - 64px)}
.page.active{display:block}
.dot{width:8px;height:8px;border-radius:999px;display:inline-block;background:#c7c7cc}
.dot.success{background:var(--success);box-shadow:0 0 0 4px rgba(0,180,42,.14)}
.dot.muted{background:#c7c7cc}
/* live pulse for hero eyebrow status */
.dot.live{position:relative}
.dot.live::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--success);animation:live-pulse 2.4s ease-out infinite}
@keyframes live-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.4);opacity:0}}

/* ---------- Eyebrows / headings ---------- */
.eyebrow,.page-hero span,.section-head span,.section-kicker,.account-head span,.footer-brand span{font-weight:500}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:15px;font-weight:500;letter-spacing:0;padding:7px 14px;border:1px solid rgba(22,93,255,.18);border-radius:980px;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.eyebrow.plain{color:var(--muted);border-color:transparent;background:transparent;padding:0}
.section-head span,.page-hero span{display:block;color:var(--blue);font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.hero h1,.page-hero h1,.split-page h1{font-size:clamp(40px,6vw,68px);line-height:1.05;letter-spacing:-.03em;margin:20px 0 18px;font-weight:600;color:var(--text)}
.hero h1 em,.hero-title em{font-style:normal;white-space:nowrap;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero p,.page-hero p,.split-page p{font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--text-2);max-width:640px;margin:0}
.section-head h2,.download-band h2{margin:6px 0 0;font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.02em;color:var(--text);font-weight:600}

/* ============================================================
   Hero — deep-space dark tech backdrop + glowing node network
   The hero owns a full-bleed dark layer that breaks out of the
   .container width, so the node network + mesh fill the viewport
   width while content stays centered in the container column.
   ============================================================ */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:132px 0 92px;overflow:visible}
.hero.hero-dark{color:#eaf1ff}
/* Full-bleed dark backdrop: escapes the container margins. */
.hero-backdrop{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%,#0a1e4d 0%,#0b1638 42%,#060a1f 100%),
    linear-gradient(180deg,#060a1f 0%,#081231 55%,#0a1e4d 100%);
  border-bottom:1px solid rgba(120,170,255,.14)}
/* soft fade at the very bottom so the dark→light handoff is smooth */
.hero-backdrop::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:200px;background:linear-gradient(180deg,transparent 0%,rgba(9,17,49,.28) 52%,rgba(238,242,250,.9) 90%,#fbfbfd 100%)}
.hero>*:not(.hero-backdrop){max-width:820px;position:relative;z-index:2}
.hero h1{max-width:960px}
.hero-actions{display:flex;gap:20px;align-items:center;justify-content:center;margin:30px 0 8px;flex-wrap:wrap}
.hero-note{margin:16px 0 0}

/* glowing mesh light blooms over the deep-space gradient */
.hero-glow{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform,opacity;mix-blend-mode:screen}
.hero-glow--a{width:52vmax;height:52vmax;top:-22%;left:-8%;background:radial-gradient(circle at 40% 40%,rgba(56,189,248,.55),transparent 62%);opacity:.7;animation:drift-a 24s ease-in-out infinite alternate}
.hero-glow--b{width:46vmax;height:46vmax;top:-14%;right:-10%;background:radial-gradient(circle at 60% 40%,rgba(96,165,250,.5),transparent 62%);opacity:.6;animation:drift-b 30s ease-in-out infinite alternate}
.hero-glow--c{width:40vmax;height:40vmax;top:34%;left:30%;background:radial-gradient(circle at 50% 50%,rgba(64,128,255,.42),transparent 60%);opacity:.5;animation:drift-c 34s ease-in-out infinite alternate}
.hero-beam{position:absolute;inset:0;background:linear-gradient(115deg,transparent,rgba(96,165,250,.14) 45%,transparent 74%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(120,180,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(120,180,255,.10) 1px,transparent 1px);background-size:62px 62px;mask-image:radial-gradient(circle at 50% 32%,#000,transparent 70%);-webkit-mask-image:radial-gradient(circle at 50% 32%,#000,transparent 70%);animation:grid-shift 40s linear infinite}
/* the glowing node-network canvas fills the dark backdrop */
.net-bg-hero{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease)}
.net-bg-hero.on{opacity:1}
@keyframes drift-a{0%{transform:translate(-8%,-6%) scale(1)}100%{transform:translate(10%,8%) scale(1.15)}}
@keyframes drift-b{0%{transform:translate(6%,4%) scale(1.05)}100%{transform:translate(-10%,-8%) scale(.95)}}
@keyframes drift-c{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-8%,10%) scale(1.1)}}
@keyframes grid-shift{to{background-position:62px 62px}}

/* ---------- Hero text on dark ---------- */
.hero-dark .eyebrow{color:#7dd3fc;border-color:rgba(125,211,252,.34);background:rgba(56,189,248,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* Gradient text is applied per animated line span so background-clip
   stays aligned with each line (clipping on the container mis-positions
   the fill once lines are split & translated). */
.hero-dark .hero-title{color:#f4f8ff}
.hero-dark .hero-title .line__in{background:linear-gradient(180deg,#ffffff 0%,#cfe0ff 60%,#9dc0ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-dark .hero-title em{background:linear-gradient(100deg,#38bdf8 0%,#60a5fa 55%,#4080ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;white-space:nowrap}
/* fallback before JS splits the title: gradient on the raw spans */
.hero-dark .hero-title:not([data-split-done]) span{background:linear-gradient(180deg,#fff,#9dc0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-dark .hero-sub{color:rgba(214,227,255,.82)}
.hero-dark .button.link-cta{color:#7dd3fc}
.mac-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:980px;border:1px dashed rgba(64,128,255,.5);background:rgba(64,128,255,.12);color:#c7b8ff;font-size:13px;font-weight:500}
.mac-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:#4080ff;box-shadow:0 0 0 4px rgba(64,128,255,.22),0 0 12px rgba(64,128,255,.6)}
.hero-visual{width:min(980px,100%);max-width:none;margin:52px auto 0;perspective:1600px}
/* hero CTAs glow brighter against the deep-space backdrop */
.hero-dark .button.primary.glow{background:linear-gradient(100deg,#38bdf8,#3b82f6 55%,#6366f1);box-shadow:0 10px 30px rgba(56,189,248,.4)}
.hero-dark .button.primary.glow:hover{background:linear-gradient(100deg,#4cc4f9,#4c8dff 55%,#7376ff)}
@keyframes cta-breathe-dark{0%,100%{box-shadow:0 10px 28px rgba(56,189,248,.36)}50%{box-shadow:0 16px 46px rgba(56,189,248,.66)}}
.hero-dark .button.primary.glow{animation:cta-breathe-dark 3.4s ease-in-out infinite}

/* trust strip: light glass card under the hero */
.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);max-width:820px;width:100%;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);margin:52px auto 0;overflow:hidden;box-shadow:var(--shadow-sm)}
.trust-strip div{padding:20px 22px;text-align:left}
.trust-strip div+div{border-left:1px solid var(--line)}
.trust-strip dt{font-size:13px;color:var(--muted);font-weight:500}
.trust-strip dd{margin:5px 0 0;font-weight:600;color:var(--text);letter-spacing:-.01em}

/* ---------- Hero split-line title animation ---------- */
.hero-title .line{display:block;overflow:visible;padding-bottom:.04em}
.hero-title .line__in{display:inline-block;transform:translateY(115%);opacity:0;transition:transform .9s var(--ease-spring),opacity .9s var(--ease-spring);transition-delay:calc(var(--i,0)*130ms)}
.hero-title.in .line__in{transform:translateY(0);opacity:1}
/* fallback if JS not run: show plain */
.hero-title:not([data-split-done]) span{display:inline}

/* hero sub / actions / note staggered follow-in */
.hero-sub{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-spring),transform .8s var(--ease-spring);transition-delay:.42s}
.hero-actions{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-spring),transform .8s var(--ease-spring);transition-delay:.54s}
.hero-note{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-spring),transform .8s var(--ease-spring);transition-delay:.64s}
.hero-visual{opacity:0;transform:translateY(40px) scale(.97);transition:opacity 1s var(--ease-spring),transform 1s var(--ease-spring);transition-delay:.7s}
.hero.hero-lit .hero-sub,.hero.hero-lit .hero-actions,.hero.hero-lit .hero-note,.hero.hero-lit .hero-visual{opacity:1;transform:none}
/* eyebrow + trust strip still use generic reveal below */

/* ---------- Desktop frame preview (glass on dark hero) ---------- */
.desktop-frame{position:relative;border:1px solid rgba(140,180,255,.22);border-radius:var(--r-xl);background:rgba(255,255,255,.97);box-shadow:0 40px 100px rgba(3,8,26,.62),0 0 0 1px rgba(120,170,255,.14),0 0 60px rgba(56,189,248,.14);overflow:hidden;transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s var(--ease-out),box-shadow .3s var(--ease)}
.desktop-frame.float{animation:frame-float 7s ease-in-out infinite}
@keyframes frame-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.window-bar{height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;background:var(--bg-3)}
.window-bar span{width:11px;height:11px;border-radius:50%;background:#d2d2d7}
.window-bar span:nth-child(1){background:#ff5f57}
.window-bar span:nth-child(2){background:#febc2e}
.window-bar span:nth-child(3){background:#28c840}
.window-bar b{margin-left:8px;font-weight:500;color:var(--text-2)}
.app-preview{height:400px;display:grid;grid-template-columns:200px 1fr;background:#fff}
.app-preview aside{padding:20px 14px;border-right:1px solid var(--line);background:var(--bg-2)}
.mini-brand{display:flex;align-items:center;gap:9px;margin-bottom:22px}
.mini-brand img{width:30px;height:30px;border-radius:8px}
.mini-brand b{display:block;font-weight:600}
.mini-brand small{color:var(--muted);font-size:11px}
.app-preview em{display:flex;align-items:center;height:38px;margin:4px 0;padding:0 12px;border-radius:9px;color:var(--text-2);font-style:normal;font-weight:500;font-size:14px}
.app-preview em.active{background:rgba(22,93,255,.1);color:var(--blue)}
.app-preview section{padding:22px;text-align:left}
.preview-head,.connect-panel{display:flex;align-items:center;justify-content:space-between;gap:14px}
.preview-head b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}
.preview-head small,.connect-panel small,.preview-list span{display:block;color:var(--muted)}
.preview-head button{height:34px;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--text);padding:0 14px;font-size:13px}
.connect-panel{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2)}
.connect-panel b{display:block;font-size:17px;font-weight:600}
.connect-panel button{height:36px;background:var(--success);color:#fff;font-weight:600;border:0;border-radius:9px;padding:0 16px}
.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.preview-stats div,.preview-list{border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:14px}
.preview-stats small{color:var(--muted);font-weight:500}
.preview-stats b{display:block;font-size:18px;color:var(--text);font-weight:600;margin-top:2px}
.preview-list b{display:block;color:var(--text);font-weight:600}

/* ---------- Stat band (count-up) ---------- */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:44px 0 8px}
.stat{position:relative;text-align:center;padding:30px 18px 26px;border:1px solid var(--line);border-radius:var(--r-card);background:linear-gradient(180deg,#fff,var(--surface-2));box-shadow:var(--shadow-sm);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease)}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tone-blue{--icon-color:#165dff;--icon-bg:linear-gradient(145deg,#e8f0ff,#f4f7ff);--icon-glow:rgba(22,93,255,.13);--icon-shadow:rgba(22,93,255,.16)}
.tone-violet{--icon-color:#6d4aff;--icon-bg:linear-gradient(145deg,#eeeaff,#f8f6ff);--icon-glow:rgba(109,74,255,.12);--icon-shadow:rgba(109,74,255,.15)}
.tone-green{--icon-color:#11975a;--icon-bg:linear-gradient(145deg,#e5f8ef,#f4fcf8);--icon-glow:rgba(17,151,90,.12);--icon-shadow:rgba(17,151,90,.14)}
.tone-amber{--icon-color:#d97808;--icon-bg:linear-gradient(145deg,#fff0d9,#fff9ef);--icon-glow:rgba(217,120,8,.12);--icon-shadow:rgba(217,120,8,.14)}
.tone-neutral{--icon-color:#303746;--icon-bg:linear-gradient(145deg,#edf0f5,#fafbfc);--icon-glow:rgba(48,55,70,.1);--icon-shadow:rgba(48,55,70,.12)}
.stat-icon{width:44px;height:44px;margin:0 auto 14px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--icon-color,var(--blue)) 12%,transparent);border-radius:13px;background:var(--icon-bg,linear-gradient(180deg,rgba(22,93,255,.12),rgba(64,128,255,.08)));color:var(--icon-color,var(--blue));box-shadow:0 10px 24px var(--icon-shadow,rgba(22,93,255,.14))}
.stat-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stat b{display:block;font-size:clamp(34px,4.8vw,50px);font-weight:700;letter-spacing:-.03em;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-variant-numeric:tabular-nums}
.stat small{display:block;margin-top:10px;color:var(--faint);font-size:13.5px;font-weight:500}

/* ---------- Grids ---------- */
.feature-grid,.steps,.plan-grid,.faq-grid,.status-board,.dashboard-grid,.two-col,.platform-grid{display:grid;gap:20px}
.feature-grid{grid-template-columns:repeat(3,1fr);padding:60px 0 30px}
.feature-grid article:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(22,93,255,.28)}
.feature-grid article,.steps article,.faq-grid article,.status-board article,.plan-card,.panel,.download-card,.login-card,.explainer,.platform-card{border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow-xs);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.feature-grid article{padding:30px 28px}
.steps article:hover,.faq-grid article:hover,.status-board article:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.feature-icon{display:grid;place-items:center;width:54px;height:54px;border:1px solid color-mix(in srgb,var(--icon-color,var(--blue)) 12%,transparent);border-radius:16px;background:var(--icon-bg);color:var(--icon-color);box-shadow:0 12px 28px var(--icon-shadow);transition:transform .3s var(--ease-out)}
.feature-icon svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feature-grid article:hover .feature-icon{transform:scale(1.06) translateY(-2px)}
.feature-grid h3,.steps h3,.plan-card h3,.panel h2,.download-card h2,.faq-grid h2,.status-board h2{margin:16px 0 8px;color:var(--text);font-size:20px;letter-spacing:-.02em;font-weight:600}
.feature-grid p,.steps p,.plan-card p,.faq-grid p,.status-board p,.form-hint,.terms{margin:0;color:var(--muted);line-height:1.6}

/* ---------- 3D tilt cards + top glow line + cursor sheen ---------- */
.tilt,.plan-card{position:relative;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease-out),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.tilt::after,.plan-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(22,93,255,.16),transparent 45%);opacity:0;transition:opacity .3s var(--ease);z-index:1}
.tilt:hover::after,.plan-card:hover::after{opacity:1}
.tilt::before,.plan-card::before{content:'';position:absolute;top:-1px;left:16%;right:16%;height:2px;border-radius:2px;background:var(--grad-accent);opacity:0;transform:scaleX(.4);transition:opacity .35s var(--ease),transform .45s var(--ease-out)}
.tilt:hover,.plan-card:hover{box-shadow:var(--shadow-md)}
.tilt:hover::before,.plan-card:hover::before{opacity:1;transform:scaleX(1)}
.tilt>*{position:relative;z-index:2}

.process-section{padding:60px 0}
.section-head{margin-bottom:36px}
.steps{grid-template-columns:repeat(3,1fr);position:relative}
.steps article{padding:32px 28px;position:relative;overflow:visible}
.steps b{position:relative;z-index:1;display:inline-grid;place-items:center;width:46px;height:46px;margin-bottom:6px;border-radius:14px;color:#fff;font-size:16px;font-weight:700;letter-spacing:0;background:var(--grad-cta);box-shadow:var(--shadow-blue)}
.step-mark{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.step-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(22,93,255,.12);border-radius:14px;background:#edf4ff;color:var(--blue);box-shadow:0 10px 25px rgba(22,93,255,.1)}
.step-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.steps .step-mark b{width:auto;height:auto;margin:0;background:none;box-shadow:none;color:rgba(22,93,255,.3);font-size:26px;font-weight:700;letter-spacing:-.04em}

.compatibility-section{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(520px,1.15fr);gap:52px;align-items:center;padding:50px 0 58px}
.compatibility-copy h2{margin:8px 0 14px;font-size:clamp(28px,3vw,42px);line-height:1.15;letter-spacing:-.04em}
.compatibility-copy p{max-width:560px;margin:0 0 22px;color:var(--muted);font-size:16px}
.compatibility-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.client-chip{display:flex;align-items:center;gap:14px;min-height:96px;padding:18px;border:1px solid var(--line);border-radius:var(--r-card);background:rgba(255,255,255,.88);box-shadow:var(--shadow-sm);transition:transform .28s var(--ease-out),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.client-chip:hover{transform:translateY(-4px);border-color:rgba(22,93,255,.22);box-shadow:var(--shadow-md)}
.client-chip.recommended{border-color:rgba(22,93,255,.20);background:linear-gradient(135deg,rgba(22,93,255,.08),rgba(255,255,255,.96) 65%)}
.client-chip.v2rayng-chip{grid-column:1/-1}
.client-chip>div{min-width:0}.client-chip strong,.client-chip small{display:block}.client-chip strong{font-size:16px;color:var(--text)}.client-chip small{margin-top:3px;color:var(--muted);font-size:13px}
.client-icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:15px;color:#fff;background:var(--grad-cta);box-shadow:0 10px 24px rgba(22,93,255,.18)}
.client-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.client-icon.mihomo-icon svg{fill:currentColor;stroke:none}.client-icon.brand-icon{background:#eef4ff}.client-icon.brand-icon img{width:35px;height:35px;object-fit:contain}.client-icon.rocket-icon{background:linear-gradient(135deg,#6046ff,#2f7cff)}
.client-icon.android-icon{background:linear-gradient(135deg,#24b86a,#57d58e)}

.pricing-preview{padding:50px 0 80px}
.trial-banner{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:22px 26px;margin-bottom:24px;border-radius:var(--r-lg);background:linear-gradient(120deg,rgba(22,93,255,.06),rgba(64,128,255,.05));border:1px solid rgba(22,93,255,.16)}
.trial-banner strong{color:var(--text);font-size:18px;font-weight:600}
.trial-banner span{color:var(--text-2);flex:1}
.trial-banner a{color:var(--blue);font-weight:600;white-space:nowrap;transition:opacity .2s var(--ease)}
.trial-banner a:hover{opacity:.7}

/* ---------- Plan cards (planCard() output) ---------- */
.plan-grid{grid-template-columns:repeat(4,1fr)}
.plan-grid.compact{grid-template-columns:repeat(3,1fr)}
.plan-card{padding:30px 28px}
.plan-card.recommended{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad-cta) border-box;box-shadow:0 24px 60px rgba(22,93,255,.20);transform:translateY(-10px) scale(1.03);z-index:2}
.plan-card.recommended:hover{transform:translateY(-16px) scale(1.03)}
.badge{position:absolute;right:16px;top:16px;padding:5px 12px;border-radius:var(--r-tag);background:var(--grad-cta);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;z-index:3;box-shadow:var(--shadow-blue)}
.plan-card p{margin-top:4px}
.price{margin:20px 0;color:var(--text);font-size:40px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price small{font-size:15px;color:var(--muted);font-weight:400;letter-spacing:0}
.plan-card ul{padding:0;margin:0 0 24px;list-style:none;color:var(--text-2)}
.plan-card li{position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--line);font-size:14px}
.plan-card li::before{content:'';position:absolute;left:0;top:15px;width:16px;height:16px;border-radius:50%;background:rgba(0,180,42,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300b42a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/11px no-repeat}
.plan-card.recommended .button{background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-blue)}
.plan-card.recommended .button:hover{filter:brightness(1.06);transform:translateY(-2px) scale(1.015)}

/* ---------- Download band (light blue wash) ---------- */
.download-band{position:relative;margin-top:0;overflow:hidden;
  background:linear-gradient(120deg,#e9f0ff 0%,#f2f6ff 55%,#fafbff 100%);
  border-top:1px solid var(--line)}
.download-band::before{content:'';position:absolute;top:-30%;right:-6%;width:52%;height:160%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(22,93,255,.16),transparent 70%);filter:blur(8px)}
.band-device{flex-shrink:0;width:120px;height:120px;display:grid;place-items:center;border-radius:26px;
  background:linear-gradient(180deg,#fff,#eef3ff);border:1px solid var(--line);box-shadow:var(--shadow-md);color:var(--blue)}
.band-device svg{width:60px;height:60px;fill:currentColor}
@media(max-width:760px){.band-device{display:none}}
.band-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:36px;padding:78px 0}
.band-inner .section-kicker{color:var(--blue);font-weight:600;letter-spacing:.02em;font-size:14px}
.band-inner h2{margin-top:8px;color:var(--text)}
.band-inner p{margin:14px 0 0;color:var(--text-2)}
.band-inner .band-note{margin-top:6px;font-size:14px;color:var(--muted)}
.band-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
/* download button keeps a gentle breathing pulse to draw the eye */
.band-inner .button.light{animation:band-breathe 3.6s ease-in-out infinite}
@keyframes band-breathe{0%,100%{box-shadow:0 6px 18px rgba(22,93,255,.28)}50%{box-shadow:0 12px 32px rgba(22,93,255,.5)}}
/* band buttons on the light wash */
.band-inner .button.light{background:var(--blue);color:#fff;box-shadow:var(--shadow-xs)}
.band-inner .button.light:hover{background:var(--blue-hover);box-shadow:var(--shadow-blue);transform:translateY(-2px) scale(1.015)}
.band-inner .button.dark-ghost{background:#fff;border-color:var(--line-2);color:var(--text)}
.band-inner .button.dark-ghost:hover{background:rgba(0,0,0,.02);border-color:var(--text-2);color:var(--text);transform:translateY(-2px)}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-3);border-top:1px solid var(--line);padding:56px 0 32px;position:relative;z-index:1}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.footer-brand p{margin:14px 0 0;color:var(--muted);font-size:14px;max-width:300px}
.site-footer nav{display:flex;flex-direction:column;gap:12px}
.site-footer nav b{color:var(--text);font-weight:600;font-size:14px;margin-bottom:2px}
.site-footer nav a{color:var(--muted);font-size:14px;transition:color .2s var(--ease)}
.site-footer nav a:hover{color:var(--blue)}
.footer-base{display:flex;justify-content:space-between;padding-top:24px;color:var(--faint)}
.footer-base small{font-size:13px}

/* ---------- Interior page heroes ---------- */
.page-hero{padding:88px 0 36px;text-align:center}
.page-hero h1{margin-inline:auto}
.page-hero p{margin-inline:auto}
.pricing .plan-grid,.page[data-page="pricing"] .plan-grid{padding-bottom:20px}

/* ---------- Platform (download) cards ---------- */
.platform-grid{grid-template-columns:repeat(2,1fr);padding:8px 0 24px;align-items:stretch}
.platform-card{padding:32px;display:flex;flex-direction:column}
.platform-card.soon{background:linear-gradient(180deg,#fff,#fbfbfd)}
.platform-head{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.platform-head svg{width:34px;height:34px;fill:var(--text);flex-shrink:0}
.platform-card.soon .platform-head svg{fill:var(--accent);opacity:.85}
.platform-head h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.platform-tag{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:980px}
.platform-tag.ok{color:#1c7a3a;background:rgba(0,180,42,.12)}
.platform-tag.soon{color:var(--blue);background:rgba(22,93,255,.10)}
.platform-card p{margin:12px 0 20px;color:var(--muted);line-height:1.6}
.platform-card dl{margin:0 0 22px;display:grid;gap:0}
.platform-card dl div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:12px 0}
.platform-card dl div:first-child{border-top:0}
.platform-card dt{color:var(--muted);font-size:14px}
.platform-card dd{margin:0;text-align:right;color:var(--text);word-break:break-all;font-weight:500;font-size:14px}
.platform-card .button{margin-top:4px}
.platform-card .button.secondary,.platform-card .center-cta{margin-top:12px}
.download-actions{display:grid;gap:10px}
.platform-card .download-actions .button{margin-top:0}
.platform-card .form-hint{margin-top:16px;font-size:13px}
.account-download-actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 4px}.account-download-actions .button{margin:0}
.mono{font-family:"SF Mono","Cascadia Mono",Consolas,monospace;font-size:13px}

.explainer{padding:32px;margin:24px 0 80px}
.explainer h2{margin:0 0 16px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.explainer div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.explainer p{margin:0;color:var(--text-2)}

.page[data-page="help"] [data-aos]{opacity:1!important;transform:none!important}
.faq-grid,.status-board{grid-template-columns:repeat(2,1fr);padding:16px 0 80px}
.faq-grid article,.status-board article{position:relative;overflow:hidden;padding:28px}
.faq-grid article::after,.status-board article::after{content:"";position:absolute;right:-58px;top:-72px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--icon-glow,rgba(22,93,255,.1)),transparent 70%);pointer-events:none}
.info-icon{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border:1px solid color-mix(in srgb,var(--icon-color,var(--blue)) 12%,transparent);border-radius:15px;background:var(--icon-bg);color:var(--icon-color);box-shadow:0 11px 25px var(--icon-shadow)}
.info-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.info-icon.icon-fill svg{fill:currentColor;stroke:none}
.status-card-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.status-board article{display:flex;flex-direction:column;gap:6px}
.status-board .dot{width:10px;height:10px}

/* ---------- Auth / login ---------- */
.auth-page{display:none;place-items:start center;padding:24px;min-height:calc(100vh - 64px)}
.auth-page.active{display:grid}
.login-card{width:min(440px,100%);padding:32px 36px;box-shadow:var(--shadow-md);background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.auth-method-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:24px 0;padding:4px;border-radius:12px;background:var(--bg-3)}
.auth-method-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:600}
.auth-method-tabs button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-method-tabs button.active{background:#fff;color:var(--blue);box-shadow:var(--shadow-xs)}
.auth-step{display:none}
.auth-step.active{display:block;animation:stepIn .4s var(--ease-out)}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.auth-step h1{margin:0 0 8px;color:var(--text);font-size:28px;letter-spacing:-.02em;font-weight:600;text-align:center}
.auth-step p{color:var(--muted);text-align:center;margin:0 0 24px}
label{display:grid;gap:8px;color:var(--text-2);font-weight:500;font-size:14px}
input{width:100%;height:46px;border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff;color:var(--text);padding:0 14px;outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
input::placeholder{color:var(--faint)}
input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,93,255,.12)}
form{display:grid;gap:16px}
.code-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.code-grid input{text-align:center;font-size:24px;font-weight:600;height:56px;padding:0;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .18s var(--ease)}
.code-grid input:focus{transform:scale(1.06);border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,93,255,.14)}
.link-button{border:0;background:transparent;color:var(--blue);font-weight:500;justify-self:center}
.link-button:hover{text-decoration:underline;text-underline-offset:3px}
.link-button[disabled]{color:var(--faint)}
.captcha-row{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px}
.captcha-image{height:46px;padding:0;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg-3)}
.captcha-image img{display:block;width:100%;height:100%;object-fit:cover}
.alert{padding:13px 15px;border-radius:var(--r-md);background:rgba(255,59,48,.08);border:1px solid rgba(255,59,48,.2);color:#c0261d;font-size:14px;margin-top:16px}
.alert[data-type="success"]{background:rgba(0,180,42,.1);border-color:rgba(0,180,42,.24);color:#1c7a3a}
.terms{margin:20px 0 0;text-align:center;font-size:13px;color:var(--faint)}

/* ---------- Account ---------- */
.account-shell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding:40px 0 80px;min-width:0}
.account-sidebar{padding:18px;height:max-content;position:sticky;top:80px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-xs)}
.account-nav-scroll{display:contents}
.account-nav-more{display:none;margin:8px 8px 0;color:var(--muted);font-size:12px}
.account-guest-gate{display:none;margin-bottom:24px;padding:28px}
body.account-guest .account-sidebar,body.account-guest .account-tab{display:none!important}
body.account-guest .account-guest-gate{display:block}
body.account-guest .account-shell{grid-template-columns:minmax(0,760px);justify-content:center;align-content:center;min-height:calc(100vh - 72px);padding-block:64px}
body.account-guest .account-main{width:100%}
body.account-guest .account-head{margin-bottom:20px}
body.account-guest #accountLoginLink{display:none}
body.account-guest .account-guest-gate{position:relative;overflow:hidden;padding:42px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(240,246,255,.98));box-shadow:0 24px 70px rgba(16,43,82,.1)}
body.account-guest .account-guest-gate::after{content:"";position:absolute;right:-54px;top:-70px;width:190px;height:190px;border-radius:50%;background:rgba(22,93,255,.07);pointer-events:none}
body.account-guest .account-guest-gate h2{max-width:520px;font-size:28px;line-height:1.2}
body.account-guest .account-guest-gate p{max-width:600px;margin-bottom:24px}
.account-sidebar h2{margin:6px 8px 14px;color:var(--text);font-size:15px;font-weight:600}
.account-sidebar button{display:flex;align-items:center;gap:10px;width:100%;height:42px;margin:2px 0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);text-align:left;padding:0 12px;font-weight:500;font-size:14px;transition:background .2s var(--ease),color .2s var(--ease)}
.account-sidebar button svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.78}
.account-sidebar button.active svg{opacity:1}
.account-sidebar button:hover{background:var(--bg-3);color:var(--text)}
.account-sidebar button.active{background:rgba(22,93,255,.1);color:var(--blue);font-weight:600}
.account-sidebar .logout{color:var(--danger);margin-top:8px}
.account-sidebar .logout:hover{background:rgba(255,59,48,.08);color:var(--danger)}
.account-main{min-width:0;padding:0}
.account-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}
.account-head span{color:var(--blue);font-weight:600;font-size:14px}
.account-head h1{margin:4px 0 0;color:var(--text);font-size:28px;letter-spacing:-.02em;font-weight:600}
.account-tab{display:none}
.account-tab.active{display:block;animation:stepIn .4s var(--ease-out)}
.dashboard-grid{grid-template-columns:repeat(3,1fr)}
.dashboard-grid article,.panel{min-width:0;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-xs)}
.dashboard-grid span{color:var(--muted);font-weight:500;font-size:14px}
.dashboard-grid strong{display:block;margin-top:8px;color:var(--text);font-size:26px;letter-spacing:-.02em;font-weight:600;font-variant-numeric:tabular-nums}
.dashboard-grid p{margin:8px 0 0;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.dashboard-grid a{color:var(--blue);font-weight:500;font-size:14px;display:inline-block;margin-top:10px}
.dashboard-grid a:hover{text-decoration:underline;text-underline-offset:3px}
.overview-plan-actions,.usage-reset-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.overview-plan-actions .button.compact,.usage-reset-actions .button.compact,#usageManualRenewalButton.button.compact{margin-top:12px;max-width:100%}
#usageManualRenewalButton{align-self:flex-start}
.billing-renewal-hint{position:relative;margin:-8px 28px 18px;padding:12px 14px;border:1px solid rgba(22,93,255,.16);border-radius:12px;background:#f5f8ff;color:var(--text-2);font-size:13px;line-height:1.65}
.billing-plan-option:focus-visible,.overview-plan-actions .button:focus-visible,#usageManualRenewalButton:focus-visible{outline:3px solid rgba(22,93,255,.4);outline-offset:2px}
.two-col{grid-template-columns:1fr 1fr;margin-top:20px}
.meter{height:8px;background:var(--bg-3);border-radius:999px;overflow:hidden;margin-top:18px}
.meter.large{height:12px;margin-top:20px}
.meter b{display:block;height:100%;width:0;background:var(--blue);border-radius:inherit;transition:width .8s var(--ease-out)}
.item-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.item-row:first-child{border-top:0}
.item-row strong{display:block;color:var(--text);font-weight:600;font-size:15px}
.item-row small,.list-empty{color:var(--muted);font-size:14px}
.device-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.device-actions .button.compact{height:32px;margin-top:0;padding:0 12px}
.list-empty{padding:6px 0}
.nodes-page-panel{padding:8px 0 80px}
.nodes-page-panel .panel{padding:28px}
.nodes-page-panel .panel-title-row p{max-width:720px;margin:8px 0 0;color:var(--muted)}
.nodes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.node-card{min-width:0;padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#f8fbff)}
.node-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.node-card-head strong{font-size:18px}
.node-card p{margin:8px 0 0;color:var(--muted)}
.node-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.node-card-meta span{color:var(--muted);font-size:12px}
.node-card-meta strong{color:var(--blue);font-size:15px}
@media(max-width:980px){.nodes-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.nodes-grid{grid-template-columns:1fr}.nodes-page-panel .panel{padding:20px 18px}}
.inline-form{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.inline-form .button{height:46px}
.panel-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.panel-title-row>.button{flex:0 0 auto;min-width:64px}
.panel-title-row h2{margin:2px 0 0}
.billing-panel{position:relative;overflow:hidden;padding:0!important}
.billing-panel::before{content:'';position:absolute;inset:0 0 auto;height:150px;background:linear-gradient(135deg,rgba(22,93,255,.08),rgba(36,194,143,.045));pointer-events:none}
.billing-title-row{position:relative;padding:28px 28px 22px}
.billing-title-row p{margin:8px 0 0;color:var(--muted)}
.billing-current{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;margin:0 28px 24px;padding:15px 18px;border:1px solid rgba(22,93,255,.16);border-radius:14px;background:rgba(255,255,255,.82);backdrop-filter:blur(12px)}
.billing-current span{color:var(--muted);font-size:13px;font-weight:600}
.billing-current strong{color:var(--blue);font-size:18px}
.billing-current small{color:var(--muted)}
.billing-section-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 28px;margin:22px 0 12px}
.billing-section-head>div{display:flex;align-items:center;gap:11px}
.billing-section-head b{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--blue);color:#fff;font-size:13px}
.billing-section-head span span,.billing-section-head span{color:var(--muted);font-size:13px}
.billing-section-head strong,.billing-section-head small{display:block}
.billing-section-head strong{color:var(--text);font-size:15px}
.billing-section-head small{margin-top:2px;color:var(--muted);font-weight:400}
.billing-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 28px}
.billing-plan-option{position:relative;min-width:0;padding:18px;text-align:left;border:1px solid var(--line-2);border-radius:15px;background:#fff;color:var(--text);transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease)}
.billing-plan-option:hover{transform:translateY(-2px);border-color:rgba(22,93,255,.38);box-shadow:0 12px 30px rgba(22,93,255,.09)}
.billing-plan-option.selected{border:2px solid var(--blue);padding:17px;background:linear-gradient(145deg,#fff,#f2f7ff);box-shadow:0 0 0 4px rgba(22,93,255,.08)}
.billing-plan-option>span{display:block;color:var(--muted);font-size:12px}
.billing-plan-option>strong{display:block;margin:8px 0 3px;font-size:18px}
.billing-plan-option .billing-price{margin-top:14px;color:var(--text);font-size:25px;font-weight:700;letter-spacing:-.03em}
.billing-plan-option .billing-price small{color:var(--muted);font-size:12px;font-weight:500}
.billing-plan-option[data-plan="lite"]>strong{color:#0879db}
.billing-plan-option[data-plan="standard"]>strong{color:#6256d9}
.billing-plan-option[data-plan="pro"]>strong,.billing-plan-option[data-plan="pro"] .billing-price{color:#b98112;text-shadow:0 0 14px rgba(244,184,32,.25)}
.billing-plan-option em{position:absolute;right:12px;top:12px;padding:3px 8px;border-radius:999px;background:#6256d9;color:#fff;font-size:10px;font-style:normal}
.payment-provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 28px}
.payment-provider{position:relative;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;min-height:82px;padding:14px;text-align:left;border:1px solid var(--line-2);border-radius:15px;background:#fff;color:var(--text);transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease)}
.payment-provider:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.payment-provider:disabled,.payment-provider.unavailable{cursor:not-allowed;filter:grayscale(.72);opacity:.54;transform:none;box-shadow:none}
.payment-provider.selected{border:2px solid currentColor;padding:13px;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 10%,transparent)}
.payment-provider.wechat{color:#16a957}.payment-provider.alipay{color:#1677ff}.payment-provider.usdt{color:#26a17b}
.payment-provider .payment-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,currentColor 11%,#fff)}
.payment-provider .payment-icon svg{width:28px;height:28px;color:inherit;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.payment-provider.wechat .payment-icon svg{fill:currentColor;stroke:none}
.payment-provider .payment-icon.brand-icon{background:#fff;border:1px solid color-mix(in srgb,currentColor 14%,#fff);box-shadow:0 7px 18px color-mix(in srgb,currentColor 10%,transparent)}
.payment-provider .payment-icon.brand-icon img{display:block;width:30px;height:30px;object-fit:contain}
.payment-provider span strong,.payment-provider span small{display:block}.payment-provider span strong{color:var(--text);font-size:15px}.payment-provider span small{margin-top:4px;color:var(--muted);font-size:11px}
.payment-provider i{align-self:start;padding:3px 7px;border-radius:999px;background:rgba(22,169,87,.1);font-size:10px;font-style:normal}
.payment-checkout-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:26px 28px 28px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--bg-3)}
.payment-checkout-bar span,.payment-checkout-bar small{display:block;color:var(--muted);font-size:12px}.payment-checkout-bar strong{display:block;margin:3px 0;color:var(--text);font-size:27px}.payment-checkout-bar .button{min-width:150px}
.payment-order-panel{display:flex;align-items:flex-start;gap:14px;margin:0 28px 28px;padding:16px;border:1px solid rgba(22,93,255,.18);border-radius:15px;background:#f4f8ff}
.payment-order-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--blue);color:#fff}.payment-order-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.payment-order-panel strong{color:var(--text)}.payment-order-panel p{margin:4px 0;color:var(--muted)}.payment-order-panel code{color:var(--blue);font-size:12px}
.payment-order-content{min-width:0;flex:1}.payment-order-heading,.payment-order-meta,.payment-order-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.payment-order-status{padding:4px 9px;border-radius:999px;background:rgba(255,149,0,.12);color:#9a6400;font-size:11px;font-weight:700;white-space:nowrap}.payment-order-status[data-status="paid"]{background:rgba(0,180,42,.11);color:#15813a}.payment-order-status[data-status="expired"],.payment-order-status[data-status="failed"]{background:rgba(219,54,54,.1);color:#b32b2b}.payment-order-meta{margin-top:10px;flex-wrap:wrap}.payment-order-meta b{color:#8a5d05;font-size:12px}.payment-order-actions{justify-content:flex-start;margin-top:13px}.payment-order-actions .button{min-height:34px}

/* Account order history */
.order-history-panel{padding:0!important}
.order-history-title-row{padding:28px 28px 18px}
.order-history-title-row p{margin:8px 0 0;color:var(--muted)}
.order-filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 28px 18px}
.order-filters button{min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:13px;font-weight:600}
.order-filters button.active{border-color:rgba(22,93,255,.28);background:rgba(22,93,255,.1);color:var(--blue)}
.order-history-state{padding:8px 28px 28px;color:var(--muted)}
.order-history-state strong{display:block;margin-bottom:6px;color:var(--text)}
.order-history-error{color:#b32b2b}
.order-history-list{display:grid;gap:12px;padding:0 28px 24px}
.order-history-card{min-width:0;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#fbfdff)}
.order-history-head,.order-history-meta,.order-history-time,.order-history-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.order-history-head{align-items:flex-start}
.order-history-head small{display:block;margin-top:4px;color:var(--muted)}
.order-history-meta,.order-history-time{margin-top:12px;flex-wrap:wrap}
.order-history-id{display:block;max-width:100%;min-width:0;color:var(--blue);font-size:12px;overflow-wrap:anywhere;word-break:break-all}
.order-history-time{color:var(--muted);font-size:12px}
.order-history-actions{justify-content:flex-start;margin-top:14px;flex-wrap:wrap}
.order-history-actions .button{min-height:36px}
.order-history-table{display:none}
.button.ghost{background:transparent;border:0;color:var(--blue);padding:0 4px;min-height:32px}
.order-history-panel .form-hint{padding:0 28px 24px}
/* Usage center and paid traffic top-ups */
.usage-dashboard-panel{overflow:hidden;padding:0}.usage-title-row{padding:28px 30px 20px}.usage-subscription-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr);gap:22px;padding:0 30px 28px}.usage-subscription-main{padding:24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#fff 0%,#fbfdff 100%);box-shadow:0 18px 48px rgba(15,43,78,.06)}
.usage-plan-identity{display:flex;align-items:center;gap:13px;margin-bottom:18px}.usage-plan-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#0d66ff,#5147df);color:#fff;box-shadow:0 12px 25px rgba(22,93,255,.24)}.usage-plan-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2}.usage-plan-identity div{display:grid;gap:2px}.usage-plan-identity small,.usage-plan-identity span{color:var(--muted);font-size:12px}.usage-plan-identity strong{font-size:21px;color:var(--text)}
.usage-subscription-main>p{margin:0 0 20px;color:var(--muted);line-height:1.7}.usage-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:4px 0 18px}.usage-stat-grid>div{position:relative;padding:0 18px}.usage-stat-grid>div:first-child{padding-left:0}.usage-stat-grid>div+div:before{content:"";position:absolute;left:0;top:5px;bottom:3px;width:1px;background:var(--line)}.usage-stat-grid span{display:block;margin-bottom:7px;color:var(--muted);font-size:12px}.usage-stat-grid strong{color:#165dff;font-size:34px;letter-spacing:-1.5px}.usage-stat-grid small{margin-left:4px;color:#165dff;font-size:12px;font-weight:700}.usage-meter{height:13px;margin:0 0 20px;background:#e8ecf2}.usage-meter b{border-radius:999px;background:linear-gradient(90deg,#165dff,#6d5dfc);box-shadow:0 0 18px rgba(22,93,255,.25)}
.usage-date-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.usage-date-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:13px;background:var(--bg-3)}.usage-date-list span{color:var(--muted);font-size:12px}.usage-date-list strong{color:var(--text);font-size:13px}
.usage-reset-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:100%;padding:28px;overflow:hidden;border:1px solid #dbe5f4;border-radius:20px;background:linear-gradient(145deg,#f4f8ff,#f9fbff);isolation:isolate}.usage-reset-card:after{content:"";position:absolute;right:-42px;bottom:-55px;width:160px;height:160px;border-radius:42px;background:linear-gradient(145deg,rgba(22,93,255,.12),rgba(109,93,252,.03));transform:rotate(22deg);z-index:-1}.usage-reset-orbit{display:grid;place-items:center;width:46px;height:46px;margin-bottom:20px;border-radius:50%;background:#fff;color:#165dff;font-size:29px;box-shadow:0 12px 30px rgba(22,93,255,.13)}.usage-reset-card small{color:#165dff;font-weight:700}.usage-reset-card h3{margin:8px 0 10px;font-size:21px;line-height:1.35}.usage-reset-card p{margin:0 0 20px;color:var(--muted);font-size:13px;line-height:1.75}
.usage-topup-preview{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:24px 30px;border-top:1px solid var(--line);background:#fbfcff}.usage-topup-preview h3{margin:5px 0 6px;font-size:18px}.usage-topup-preview p{margin:0;color:var(--muted);font-size:12px}.usage-topup-cards{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.usage-topup-chip{display:grid;gap:2px;min-width:116px;padding:12px 14px;text-align:left;border:1px solid #d7e2f1;border-radius:14px;background:#fff;color:var(--text);transition:.2s var(--ease)}.usage-topup-chip:hover{transform:translateY(-2px);border-color:#165dff;box-shadow:0 12px 28px rgba(22,93,255,.1)}.usage-topup-chip strong{font-size:16px}.usage-topup-chip span{color:#165dff;font-size:12px;font-weight:700}.usage-topup-chip:disabled{opacity:.5;transform:none;box-shadow:none}
.daily-usage-panel{padding:24px 30px 28px;border-top:1px solid var(--line);background:#fff}
.daily-usage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.daily-usage-head h3{margin:5px 0 6px;font-size:20px}
.daily-usage-head p{margin:0;max-width:640px;color:var(--muted);font-size:12px;line-height:1.65}
.daily-usage-range{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:13px;background:var(--bg-3)}
.daily-usage-range button{min-height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:700}
.daily-usage-range button.active{background:#fff;color:#165dff;box-shadow:0 5px 16px rgba(15,43,78,.09)}
.daily-usage-state{padding:18px 16px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted);font-size:13px;line-height:1.65}
.daily-usage-state strong{display:block;margin-bottom:6px;color:var(--text);font-size:15px}
.daily-usage-error{border-color:rgba(229,72,77,.25);background:#fff7f7}
.daily-usage-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.daily-usage-summary>div{min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#f8fbff}
.daily-usage-summary span{display:block;margin-bottom:6px;color:var(--muted);font-size:12px}
.daily-usage-summary strong{display:block;color:var(--text);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.daily-usage-chart{display:flex;align-items:flex-end;gap:4px;min-height:148px;padding:14px 8px 8px;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#f8fbff 0%,#fff 100%)}
.daily-usage-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1 1 18px;min-width:16px;height:124px;padding:0;border:0;background:transparent;color:var(--muted)}
.daily-usage-bar span{display:block;width:100%;max-width:18px;height:var(--bar,3%);border-radius:7px 7px 4px 4px;background:linear-gradient(180deg,#165dff,#6d5dfc)}
.daily-usage-bar.is-zero span{background:#d7e0ec}
.daily-usage-bar small{margin-top:6px;font-size:10px}
.daily-usage-list{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.daily-usage-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--bg-3)}
.daily-usage-list span{color:var(--muted);font-size:12px}
.daily-usage-list strong{color:var(--text);font-size:13px;overflow-wrap:anywhere}
.traffic-reminder-panel{padding:24px 30px 28px;border-top:1px solid var(--line);background:linear-gradient(180deg,#fbfdff 0%,#fff 100%)}
.traffic-reminder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.traffic-reminder-head h3{margin:5px 0 6px;font-size:20px}
.traffic-reminder-head p{margin:0;max-width:640px;color:var(--muted);font-size:12px;line-height:1.65}
.traffic-reminder-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.traffic-mail-switch{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text);font-size:12px;font-weight:700}
.traffic-mail-switch input{width:16px;height:16px;accent-color:var(--blue)}
.traffic-reminder-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.traffic-reminder-item{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.traffic-reminder-item.is-unread{box-shadow:inset 3px 0 0 var(--warning)}
.traffic-reminder-item.critical{border-color:rgba(255,59,48,.22);background:#fff8f7}
.traffic-reminder-item.critical.is-unread{box-shadow:inset 3px 0 0 var(--danger)}
.traffic-reminder-copy{min-width:0}
.traffic-reminder-copy strong{display:flex;align-items:center;gap:8px;font-size:15px}
.traffic-reminder-copy em{padding:2px 7px;border-radius:999px;background:rgba(255,159,10,.14);color:#9a6200;font-size:11px;font-style:normal}
.traffic-reminder-copy em.is-read{background:var(--bg-3);color:var(--muted)}
.traffic-reminder-copy p,.traffic-reminder-copy small{display:block;margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.traffic-reminder-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

/* Billing mode and package catalog */
.billing-mode-switch{display:inline-flex;gap:4px;margin:0 28px 18px;padding:4px;border:1px solid var(--line);border-radius:13px;background:var(--bg-3)}.billing-mode-switch button{min-height:36px;padding:0 18px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:700}.billing-mode-switch button.active{background:#fff;color:#165dff;box-shadow:0 5px 16px rgba(15,43,78,.09)}
.billing-period-row{margin-top:0;margin-bottom:18px}.billing-period-switch{display:inline-flex;flex-wrap:wrap;width:max-content;max-width:100%;gap:4px;margin:0;padding:4px;border:1px solid var(--line);border-radius:13px;background:var(--bg-3)}.billing-period-switch button{min-height:36px;padding:0 16px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:700}.billing-period-switch button.active{background:#fff;color:#165dff;box-shadow:0 5px 16px rgba(15,43,78,.09)}.billing-panel .billing-period-switch{margin:0 28px 18px}.pricing-preview .billing-period-switch{margin:0 0 18px}
.traffic-package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 28px}.traffic-package-option{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:170px;padding:20px;text-align:left;border:1px solid var(--line-2);border-radius:18px;background:linear-gradient(145deg,#fff,#fbfdff);color:var(--text);transition:.2s var(--ease)}.traffic-package-option:hover{transform:translateY(-2px);border-color:#80aaff;box-shadow:0 15px 32px rgba(22,93,255,.1)}.traffic-package-option.selected{padding:19px;border:2px solid #165dff;box-shadow:0 0 0 4px rgba(22,93,255,.08)}.traffic-package-option em{position:absolute;right:14px;top:14px;padding:4px 8px;border-radius:999px;background:#edf4ff;color:#165dff;font-size:10px;font-style:normal;font-weight:700}.traffic-package-option>span{color:var(--muted);font-size:12px}.traffic-package-option strong{margin:8px 0 3px;color:#165dff;font-size:28px}.traffic-package-option p{margin:0;color:var(--muted);font-size:12px}.traffic-package-option .billing-price{margin-top:auto;padding-top:12px}.traffic-package-policy{display:flex;align-items:center;gap:10px;margin:14px 28px 0;padding:12px 14px;border-radius:13px;background:#f2f7ff;color:#4a6380;font-size:12px}.traffic-package-policy strong{color:#165dff;white-space:nowrap}

/* Branded payment confirmation */
.payment-confirm-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:rgba(5,17,32,.55);backdrop-filter:blur(10px);animation:fade-in .18s ease-out}.payment-confirm-card{position:relative;width:min(480px,calc(100vw - 32px));padding:30px;border:1px solid rgba(255,255,255,.76);border-radius:24px;background:linear-gradient(155deg,#fff 0%,#f7faff 100%);box-shadow:0 28px 90px rgba(5,25,52,.25);animation:confirm-pop .22s var(--ease)}.payment-confirm-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;border-radius:17px;background:linear-gradient(145deg,#165dff,#5147df);color:#fff;box-shadow:0 13px 28px rgba(22,93,255,.26)}.payment-confirm-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2}.payment-confirm-card h2{margin:6px 0 8px;font-size:25px}.payment-confirm-card>p{margin:0 0 20px;color:var(--muted);line-height:1.65}.payment-confirm-summary{display:grid;gap:1px;overflow:hidden;border:1px solid #dfe7f2;border-radius:15px;background:#fff}.payment-confirm-row{display:flex;justify-content:space-between;gap:18px;padding:12px 14px}.payment-confirm-row+.payment-confirm-row{border-top:1px solid #edf1f6}.payment-confirm-row span{color:var(--muted);font-size:12px}.payment-confirm-row strong{max-width:66%;text-align:right;color:var(--text);font-size:13px}.payment-confirm-notice{display:flex;gap:10px;margin:14px 0 22px;padding:12px 14px;border-radius:13px;background:#edf7f2;color:#33765b}.payment-confirm-notice>span{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#1ea66a;color:#fff;font-size:11px}.payment-confirm-notice p{margin:0;font-size:12px;line-height:1.55}.payment-confirm-actions{display:flex;justify-content:flex-end;gap:10px}.payment-confirm-actions .button{min-width:132px}
@keyframes confirm-pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

.panel-kicker{display:block;color:var(--blue);font-size:13px;font-weight:600}
.status-pill{display:inline-flex;align-items:center;min-height:28px;padding:3px 10px;border-radius:999px;background:rgba(0,180,42,.1);color:#16833b;font-size:12px;font-weight:600;white-space:nowrap}
.status-pill.muted{background:var(--bg-3);color:var(--muted)}
.subscription-panel{overflow:hidden}
.subscription-title-row{align-items:flex-start;padding:28px 28px 22px;border-bottom:1px solid var(--line)}
.subscription-title-row h2{margin-top:5px;font-size:25px;letter-spacing:-.025em}
.subscription-title-row p{max-width:680px;margin:8px 0 0;color:var(--muted);line-height:1.65}
.subscription-security-strip{display:flex;align-items:center;gap:13px;margin:20px 28px 0;padding:14px 16px;border:1px solid rgba(22,93,255,.15);border-radius:15px;background:linear-gradient(135deg,rgba(22,93,255,.07),rgba(98,86,217,.035))}
.subscription-shield{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(22,93,255,.22)}
.subscription-shield svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.subscription-security-strip strong,.subscription-security-strip small{display:block}.subscription-security-strip strong{font-size:14px}.subscription-security-strip small{margin-top:3px;color:var(--muted);font-size:12px}
.protocol-pill{margin-left:auto;padding:6px 9px;border:1px solid rgba(22,93,255,.13);border-radius:999px;background:#fff;color:#35527e;font-family:"SF Mono","Cascadia Mono",Consolas,monospace;font-size:10px;white-space:nowrap}
.subscription-client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px 28px 0}
.subscription-client-card{position:relative;min-width:0;padding:20px;border:1px solid var(--line-2);border-radius:18px;background:linear-gradient(145deg,#fff,#fbfcff);box-shadow:0 8px 26px rgba(24,42,84,.045);transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.subscription-client-card:hover{transform:translateY(-2px);border-color:rgba(22,93,255,.22);box-shadow:0 14px 32px rgba(24,42,84,.075)}
.subscription-client-card.clash-card{grid-column:1/-1}
.subscription-client-head{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px}
.subscription-client-head>div>span{display:block;margin-bottom:3px;color:var(--muted);font-size:11px}.subscription-client-head h3{margin:0;font-size:17px;letter-spacing:-.01em}
.subscription-client-head em{align-self:start;padding:4px 8px;border-radius:999px;background:rgba(22,93,255,.07);color:#476283;font-size:9px;font-style:normal;font-weight:700;white-space:nowrap}
.subscription-client-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px}
.subscription-client-icon svg{width:25px;height:25px}.subscription-client-icon.apple{background:#101114;color:#fff}.subscription-client-icon.apple svg{fill:currentColor}.subscription-client-icon.android{background:rgba(61,220,132,.13);color:#20a963}.subscription-client-icon.android svg,.subscription-client-icon.clash svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.subscription-client-icon.clash{background:rgba(98,86,217,.1);color:#6256d9}
.subscription-guide{display:grid;gap:9px;margin:18px 0 0;padding:0;list-style:none}
.subscription-guide li{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:9px;color:var(--text-2);font-size:12px;line-height:1.55}
.subscription-guide li b{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:var(--bg-3);color:var(--blue);font-size:10px}.subscription-guide li span strong{font-weight:700;color:var(--text)}
.subscription-routing-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:7px 10px;margin-top:14px;padding:11px 12px;border:1px solid rgba(255,149,0,.16);border-radius:11px;background:rgba(255,149,0,.055);font-size:10px;line-height:1.55}.subscription-routing-note strong{color:#865a08}.subscription-routing-note span{color:var(--muted)}.subscription-routing-note a{color:#8d650f;font-weight:700;white-space:nowrap}.subscription-routing-note.enabled{border-color:rgba(32,169,99,.16);background:rgba(32,169,99,.055)}.subscription-routing-note.enabled strong,.subscription-routing-note.enabled a{color:#168251}
.subscription-client-link{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.subscription-client-link label{display:block;margin-bottom:7px;color:var(--muted);font-size:11px;font-weight:600}
.subscription-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto}
.subscription-input-row input{width:100%;min-width:0;height:40px;border:1px solid var(--line-2);border-right:0;border-radius:10px 0 0 10px;background:#f8faff;padding:0 11px;color:var(--text);font-family:"SF Mono","Cascadia Mono",Consolas,monospace;font-size:11px}
.subscription-input-row input:focus{position:relative;z-index:1;outline:2px solid rgba(22,93,255,.17);border-color:var(--blue)}
.subscription-reveal-button{min-width:54px;border:1px solid var(--line-2);border-radius:0 10px 10px 0;background:#fff;color:var(--blue);font-size:11px;font-weight:600}
.subscription-card-actions{display:flex;gap:8px;margin-top:10px}.subscription-card-actions .button{flex:1;min-width:0}
.subscription-card-pending{margin:18px 0 0;padding:11px 12px;border-radius:10px;background:var(--bg-3);color:var(--muted);font-size:11px;text-align:center}
.subscription-existing-note{display:flex;align-items:center;gap:12px;margin:20px 28px 0;padding:14px 16px;border:1px dashed rgba(22,93,255,.22);border-radius:13px;background:rgba(22,93,255,.035);font-size:12px}.subscription-existing-note strong{flex:0 0 auto;color:var(--blue)}.subscription-existing-note span{color:var(--muted);line-height:1.55}
.subscription-actions{display:flex;align-items:center;gap:10px;margin:22px 28px 0;flex-wrap:wrap}
.subscription-panel>.form-hint{margin:12px 28px 0}
.subscription-panel>.privacy-note{margin:22px 28px 28px}
.subscription-qr-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(8,16,31,.52);backdrop-filter:blur(12px)}
.subscription-qr-modal.hidden{display:none}
.subscription-qr-card{position:relative;width:min(100%,380px);padding:28px;border:1px solid rgba(255,255,255,.6);border-radius:24px;background:#fff;text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.24);animation:stepIn .25s var(--ease-out)}
.subscription-qr-card h2{margin:6px 0 18px;font-size:21px}.subscription-qr-card>.panel-kicker{font-size:11px}.subscription-qr-card>p{margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.subscription-qr-close{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:var(--bg-3);color:var(--text-2);font-size:23px;line-height:1}
.subscription-qr-canvas{display:grid;place-items:center;width:236px;min-height:236px;margin:0 auto;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(20,37,75,.08)}
.subscription-qr-canvas img,.subscription-qr-canvas canvas{display:block;max-width:100%;height:auto}
.subscription-qr-local{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:11px 12px;border-radius:11px;background:#f2f8f4;color:#47705a;font-size:11px;line-height:1.5;text-align:left}.subscription-qr-local span{display:grid;place-items:center;flex:0 0 auto;width:17px;height:17px;border-radius:50%;background:#21a766;color:#fff;font-size:10px}
.privacy-note{display:flex;gap:12px;margin-top:22px;padding:14px 16px;border-radius:12px;background:var(--bg-3);color:var(--muted);font-size:13px;line-height:1.55}
.privacy-note strong{flex:0 0 auto;color:var(--text-2)}
.support-help-panel{margin-top:28px}
.support-form{display:grid;gap:14px;margin-top:18px;max-width:720px}
.support-form label{display:grid;gap:7px;color:var(--text-2);font-size:13px;font-weight:600}
.support-form input,.support-form select,.support-form textarea{width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);font:inherit}
.support-form textarea{min-height:140px;resize:vertical}
.support-form input:focus,.support-form select:focus,.support-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,93,255,.12)}
.support-count{margin:0;color:var(--muted);font-size:12px}
.support-check{display:flex!important;align-items:flex-start;gap:10px;font-weight:500}
.support-check input{width:18px;min-height:18px;margin-top:2px}
.support-guest-card{display:grid;gap:14px;margin-top:18px;padding:18px;border:1px dashed rgba(22,93,255,.22);border-radius:16px;background:rgba(22,93,255,.035)}
.support-guest-card p{margin:0;color:var(--muted);line-height:1.6}
.wallet-panel{display:grid;gap:16px}
.wallet-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wallet-stat-grid div{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.wallet-stat-grid span{display:block;color:var(--muted);font-size:12px}
.wallet-stat-grid strong{display:block;margin-top:6px;font-size:24px}
.wallet-section{display:grid;gap:10px}
.wallet-section h3{margin:0;font-size:16px}
.wallet-state{margin-top:4px;padding:16px 18px;border:1px dashed rgba(22,93,255,.22);border-radius:16px;background:rgba(22,93,255,.035);color:var(--text-2)}
.wallet-error{border-style:solid;border-color:rgba(217,48,37,.18);background:rgba(217,48,37,.05)}
.wallet-record-list{display:grid;gap:12px}
.wallet-record-card{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.wallet-record-card header{display:flex;justify-content:space-between;gap:12px;align-items:center}
.wallet-record-card header span{flex:0 0 auto;color:#165dff;font-weight:700}
.wallet-record-card p{margin:8px 0 0;color:var(--muted)}
@media(max-width:720px){
  .wallet-stat-grid{grid-template-columns:1fr}
  .wallet-record-card header{flex-direction:column;align-items:stretch}
}
.invite-panel{display:grid;gap:16px}
.invite-code-box{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#f7fbff)}
.invite-code-box span{display:block;color:var(--muted);font-size:12px;font-weight:600}
.invite-code-box strong{display:block;margin-top:6px;font-size:28px;letter-spacing:.08em}
.invite-link-row{display:grid;gap:8px;color:var(--text-2);font-size:13px;font-weight:600}
.invite-link-controls{display:flex;gap:10px;align-items:center}
.invite-link-controls input{flex:1;min-width:0;min-height:46px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);font:inherit}
.invite-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.invite-stat-grid div{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.invite-stat-grid span{display:block;color:var(--muted);font-size:12px}
.invite-stat-grid strong{display:block;margin-top:6px;font-size:24px}
.invite-state{margin-top:4px;padding:16px 18px;border:1px dashed rgba(22,93,255,.22);border-radius:16px;background:rgba(22,93,255,.035);color:var(--text-2)}
.invite-error{border-style:solid;border-color:rgba(217,48,37,.18);background:rgba(217,48,37,.05)}
.invite-record-list{display:grid;gap:12px}
.invite-record-card{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.invite-record-card header{display:flex;justify-content:space-between;gap:12px;align-items:center}
.invite-record-card header span{flex:0 0 auto;padding:4px 10px;border-radius:999px;background:#eef4ff;color:#165dff;font-size:12px;font-weight:700}
.invite-record-card p{margin:8px 0 0;color:var(--muted)}
@media(max-width:720px){
  .invite-code-box,.invite-link-controls,.invite-record-card header{flex-direction:column;align-items:stretch}
  .invite-stat-grid{grid-template-columns:1fr}
  .invite-link-controls .button,.invite-code-box .button{width:100%}
}
.support-ticket-list{display:grid;gap:12px;margin-top:18px}
.support-ticket-card{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#fbfdff)}
.support-ticket-card header{display:flex;justify-content:space-between;gap:12px;align-items:center}
.support-ticket-card header strong{color:var(--blue);overflow-wrap:anywhere}
.support-ticket-card header span{flex:0 0 auto;padding:4px 10px;border-radius:999px;background:#eef4ff;color:#165dff;font-size:12px;font-weight:700}
.support-ticket-card p{margin:10px 0 0;color:var(--text-2)}
.support-ticket-card ol{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.support-ticket-card li{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:var(--bg-3)}
.support-ticket-card li b{font-size:12px;color:var(--text)}
.support-ticket-card li span{color:var(--text-2);line-height:1.55;overflow-wrap:anywhere}
.support-ticket-card li small{color:var(--muted)}
.support-ticket-card form{display:grid;gap:8px;margin-top:12px}
.support-ticket-card form textarea{min-height:88px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font:inherit}
@media(max-width:560px){
  .support-ticket-card header{align-items:flex-start;flex-direction:column}
  .support-form .button,.support-ticket-card form .button{width:100%}
}
.security-panel form{max-width:520px;margin-top:22px}
.security-notice{margin-top:18px;padding:14px 16px;border:1px solid rgba(255,149,0,.25);border-radius:12px;background:rgba(255,149,0,.08);color:#8a5700;font-size:14px;line-height:1.6}

/* ---------- Toast ---------- */
.confirm-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(16,24,40,.42)}
.confirm-modal.hidden{display:none}
.confirm-card{width:min(420px,100%);padding:28px 24px 22px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.confirm-card h2{margin:8px 0 10px;font-size:22px}
.confirm-card p{margin:0 0 22px;color:var(--text-2);line-height:1.6}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px}
.confirm-actions .button{min-width:96px}
body.modal-open{overflow:hidden}
.mono,.sha,.order-id,[data-copy-value]{overflow-wrap:anywhere;word-break:break-word}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(0);z-index:70;padding:13px 20px;border-radius:980px;background:rgba(29,29,31,.92);backdrop-filter:blur(12px);color:#fff;font-weight:500;font-size:14px;box-shadow:var(--shadow-lg);transition:opacity .3s var(--ease),transform .3s var(--ease-out)}
.toast.hidden{opacity:0;transform:translateX(-50%) translateY(12px);pointer-events:none}
.toast[data-type="error"]{background:rgba(199,38,29,.94)}

/* ---------- Scroll reveal (custom fallback engine) ---------- */
.reveal{opacity:0;transform:translateY(38px) scale(.96);transition:opacity .7s var(--ease-spring),transform .7s var(--ease-spring);will-change:transform,opacity}
.reveal.in{opacity:1;transform:none}

/* data-aos attributes remain as declarative motion hooks. GSAP reads them;
   without JavaScript they have no visual side effect, so content stays visible. */

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .split-page,.account-shell,.footer-inner,.platform-grid{grid-template-columns:1fr}
  .account-shell{overflow-x:clip}
  .compatibility-section{grid-template-columns:1fr;gap:28px}
  .footer-inner{gap:24px}
  .stat-band{grid-template-columns:repeat(2,1fr)}
  .feature-grid,.steps,.plan-grid,.plan-grid.compact,.dashboard-grid,.two-col,.faq-grid,.status-board{grid-template-columns:1fr 1fr}
  .download-card,.account-sidebar{position:static}
  .account-sidebar{display:flex;flex-wrap:wrap;gap:6px}
  .account-sidebar h2{width:100%}
  .account-sidebar button{width:auto;flex:1 1 auto;text-align:center}
  .account-sidebar .logout{width:100%}
  .billing-plan-grid,.payment-provider-grid,.traffic-package-grid{grid-template-columns:1fr}
  .usage-subscription-layout{grid-template-columns:1fr}
}
@media(max-width:760px){
  .container,.nav-shell{width:min(100% - 32px,1120px)}
  .nav-shell{height:60px}
  .site-header[data-scrolled] .nav-shell{height:54px}
  .menu-button{display:flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:60px;flex-direction:column;align-items:stretch;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:12px 24px 18px;box-shadow:var(--shadow-md)}
  .site-nav.open{display:flex;animation:stepIn .3s var(--ease-out)}
  .site-nav a{padding:12px;font-size:16px;border-radius:10px}
  .site-nav a.active{background:rgba(22,93,255,.08)}
  .nav-actions{margin-left:auto}
  .nav-actions .button.primary{display:none}
  .hero{padding:56px 0 44px}
  .hero-visual{margin-top:40px}
  .stat-band{grid-template-columns:1fr 1fr;padding:32px 0 4px}
  .trust-strip,.feature-grid,.steps,.plan-grid,.plan-grid.compact,.dashboard-grid,.two-col,.faq-grid,.status-board,.explainer div,.platform-grid{grid-template-columns:1fr}
  .compatibility-grid{grid-template-columns:1fr}
  .trust-strip div+div{border-left:0;border-top:1px solid var(--line)}
  .band-inner,.trial-banner{flex-direction:column;align-items:stretch;text-align:left}
  .band-inner>div:last-child,.trial-banner a{align-self:flex-start}
  .band-inner{padding:52px 0}
  .app-preview{grid-template-columns:1fr}
  .app-preview aside{display:none}
  .preview-stats{grid-template-columns:1fr}
  .feature-grid{padding:48px 0 20px}
  .account-shell{width:100%;padding-top:12px;gap:18px}
  .account-sidebar{position:sticky;top:54px;z-index:15;display:block;width:100%;padding:8px 8px 10px;overflow:visible;border-radius:0;border-left:0;border-right:0}
  .account-nav-scroll{display:flex;flex-direction:row;flex-wrap:nowrap;gap:5px;width:100%;overflow-x:auto;scrollbar-width:thin}
  .account-nav-scroll::-webkit-scrollbar{height:4px}
  .account-sidebar h2{display:none}
  .account-sidebar button{flex:0 0 auto;width:auto;height:38px;padding:0 13px;text-align:center;white-space:nowrap}
  .account-sidebar .logout{width:auto;margin-top:2px}
  .account-nav-more{display:block;margin:8px 4px 0}
  .account-main{width:calc(100% - 32px);max-width:1120px;margin:0 auto}
  .billing-title-row{padding:22px 18px 18px}
  .billing-current,.payment-checkout-bar{margin-left:18px;margin-right:18px}
  .billing-section-head{padding-left:18px;padding-right:18px}
  .billing-plan-grid,.payment-provider-grid{padding-left:18px;padding-right:18px}
  .traffic-package-grid{padding-left:18px;padding-right:18px}
  .traffic-package-policy,.billing-mode-switch{margin-left:18px;margin-right:18px}
  .payment-order-panel{margin-left:18px;margin-right:18px}
  .order-history-title-row,.order-filters,.order-history-state,.order-history-list,.order-history-panel .form-hint{padding-left:18px;padding-right:18px}
  .order-history-head,.order-history-meta,.order-history-time,.order-history-actions{align-items:flex-start;flex-direction:column}
  .order-history-actions .button{width:100%}
  .billing-current{grid-template-columns:1fr;gap:5px}
  .payment-checkout-bar{align-items:stretch;flex-direction:column}
  .payment-checkout-bar .button{width:100%}
  .usage-title-row{padding:22px 18px 16px}.usage-subscription-layout{padding:0 18px 20px}.usage-subscription-main{padding:19px}.usage-stat-grid strong{font-size:27px}.usage-stat-grid>div{padding:0 10px}.usage-topup-preview{align-items:flex-start;flex-direction:column;padding:20px 18px}.usage-topup-cards{justify-content:flex-start;width:100%}.usage-topup-chip{flex:1 1 105px}.usage-date-list{grid-template-columns:1fr}.overview-plan-actions .button,.usage-reset-actions .button,#usageManualRenewalButton{width:100%}.billing-renewal-hint{margin-left:18px;margin-right:18px}.daily-usage-panel{padding:20px 18px 22px}.daily-usage-head{flex-direction:column}.daily-usage-summary{grid-template-columns:1fr}.daily-usage-list li{align-items:flex-start;flex-direction:column;gap:4px}.traffic-reminder-panel{padding:20px 18px 22px}.traffic-reminder-head,.traffic-reminder-item{flex-direction:column}.traffic-reminder-tools,.traffic-reminder-actions{justify-content:flex-start;width:100%}.traffic-reminder-actions .button{flex:1 1 auto}.payment-confirm-card{padding:24px}.payment-confirm-actions{flex-direction:column-reverse}.payment-confirm-actions .button{width:100%}
  .subscription-title-row{padding:22px 18px 18px}
  .subscription-title-row h2{font-size:22px}
  .subscription-security-strip{align-items:flex-start;margin-left:18px;margin-right:18px}
  .protocol-pill{display:none}
  .subscription-client-grid{grid-template-columns:1fr;padding-left:18px;padding-right:18px}
  .subscription-client-card.clash-card{grid-column:auto}
  .subscription-existing-note{align-items:flex-start;flex-direction:column;gap:4px;margin-left:18px;margin-right:18px}
  .subscription-actions{margin-left:18px;margin-right:18px}
  .subscription-panel>.form-hint{margin-left:18px;margin-right:18px}
  .subscription-panel>.privacy-note{margin-left:18px;margin-right:18px}
  .subscription-actions .button{width:100%}
  .privacy-note{flex-direction:column;gap:4px}
  .footer-base{flex-direction:column;gap:6px}
  /* disable tilt transforms on touch */
  .tilt,.plan-card,.desktop-frame{transform:none!important}
  /* keep the hero node network crisp but a touch softer on small screens */
  .net-bg-hero.on{opacity:.92}
  .hero{padding:104px 0 72px}
}
@media(max-width:460px){
  .hero h1,.hero .hero-title{font-size:clamp(28px,8vw,34px);line-height:1.18}
  .hero p{font-size:16px}
  .hero-actions{gap:10px;flex-direction:column;align-items:stretch}
  .hero-actions .button{width:100%}
  .stat-band{grid-template-columns:1fr 1fr}
  .code-grid{gap:6px}
  .code-grid input{font-size:20px;height:50px}
  .captcha-row{grid-template-columns:minmax(0,1fr) 118px}
  .login-card{padding:28px 22px}
  .platform-card{padding:24px 20px}
  .platform-card dl div{flex-direction:column;align-items:flex-start;gap:5px}
  .platform-card dd{text-align:left;max-width:100%;overflow-wrap:anywhere}
  .subscription-client-card{padding:17px}
  .subscription-client-head{grid-template-columns:42px minmax(0,1fr)}
  .subscription-client-head em{grid-column:2;justify-self:start;margin-top:-5px}
  .subscription-client-icon{width:42px;height:42px;grid-row:1/3}
  .subscription-routing-note{grid-template-columns:1fr}.subscription-routing-note a{justify-self:start}
  .subscription-card-actions{flex-direction:column}
  .subscription-qr-card{padding:24px 20px}
  .button.large{width:100%}
  .band-inner>div:last-child{flex-direction:column}
}
@media(max-height:820px){
  .auth-page{place-items:start center;padding:28px 24px}
  .login-card{padding:26px 32px}
  .auth-method-tabs{margin:14px 0}
  .auth-step p{margin-bottom:14px}
  .auth-step form{gap:11px}
  .auth-step input{height:42px}
  .captcha-image{height:42px}
  .terms{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto!important}
  .reveal,[data-aos]{opacity:1!important;transform:none!important}
  .hero-sub,.hero-actions,.hero-note,.hero-visual{opacity:1!important;transform:none!important}
  .band-inner .button.light,.plan-card.recommended:hover{animation:none!important}
  .hero-title .line__in{opacity:1!important;transform:none!important}
  .blob,.hero-grid,.desktop-frame.float,.mesh-blob,.dot.live::after{animation:none!important}
  .button:hover,.plan-card:hover,.feature-grid article:hover,.tilt:hover{transform:none}
  .desktop-frame,.tilt,.plan-card{transform:none!important}
  .magnetic{transform:none!important}
  .magnetic>span{transform:none!important}
  .tilt::before,.plan-card::before,.tilt::after,.plan-card::after{transition:none}
  .hero-glow,.hero-grid{animation:none!important}
  /* canvas networks stay present as a single static frame (JS renders once) */
  .net-bg-hero.on{opacity:1}
  .net-bg-band.on{opacity:1}
}

/* ============================================================
   2026-08 brand polish
   One visual language across the public site, authentication and
   account center: navy typography, Zhilian blue, quiet glass and
   generous white surfaces.
   ============================================================ */
:root{
  --bg:#f6f8fc;--bg-2:#f3f6fb;--bg-3:#edf2f9;
  --surface-2:#f8faff;--text:#10213f;--text-2:#43516a;--muted:#6f7c92;
  --line:rgba(18,45,88,.085);--line-2:rgba(18,45,88,.145);
  --shadow-xs:0 2px 10px rgba(16,43,82,.045);
  --shadow-sm:0 10px 34px rgba(16,43,82,.065);
  --shadow-md:0 20px 55px rgba(16,43,82,.105);
  --shadow-lg:0 34px 90px rgba(12,35,74,.16);
  --r-sm:12px;--r-md:15px;--r-lg:19px;--r-card:22px;--r-xl:24px;
}
body{background:
  radial-gradient(900px 520px at 8% -10%,rgba(22,93,255,.085),transparent 68%),
  radial-gradient(720px 460px at 96% 4%,rgba(69,139,255,.075),transparent 70%),
  var(--bg);color:var(--text)}
.mesh-veil{background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(246,248,252,.2) 42%,rgba(246,248,252,.78))}
.grain{opacity:.026}
.container{width:min(1180px,calc(100% - 56px))}

/* Header */
.site-header{background:rgba(250,252,255,.78);border-bottom-color:rgba(18,45,88,.055);box-shadow:0 1px 0 rgba(255,255,255,.72)}
.site-header[data-scrolled]{background:rgba(255,255,255,.92);box-shadow:0 12px 34px rgba(16,43,82,.075)}
.nav-shell{width:min(1180px,calc(100% - 56px));height:72px;gap:34px}
.site-header[data-scrolled] .nav-shell{height:62px}
.brand img{box-shadow:0 7px 18px rgba(22,93,255,.16)}
.brand strong{font-size:19px;font-weight:700}
.brand small{margin-top:1px;color:#77839a;letter-spacing:.035em}
.site-nav{gap:5px}
.site-nav a{margin:0;padding:8px 12px;border-radius:10px;color:#526078}
.site-nav a::after{left:12px;right:calc(100% - 12px);bottom:4px;height:2px}
.site-nav a:hover{background:rgba(22,93,255,.055);color:var(--blue)}
.site-nav a:hover::after,.site-nav a.active::after{right:12px}
.site-nav a.active{background:rgba(22,93,255,.075);color:var(--blue)}
.nav-actions .button{height:40px}
.account-chip{height:40px;border-color:rgba(22,93,255,.15);box-shadow:var(--shadow-xs)}

/* Common controls and surfaces */
.button{border-radius:12px;font-weight:700}
.button.primary{background:linear-gradient(110deg,#165dff,#347bff);box-shadow:0 9px 24px rgba(22,93,255,.2)}
.button.primary:hover{background:linear-gradient(110deg,#0e55f2,#2e74fb)}
.button.secondary{border-color:rgba(22,93,255,.11);background:#f1f6ff}
input{height:49px;border-radius:14px;background:#fbfcff}
input:hover{border-color:rgba(22,93,255,.28)}

/* Homepage hero: editorial copy + product proof side by side */
.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);grid-template-rows:auto auto auto auto auto auto;align-items:center;column-gap:64px;row-gap:0;padding:96px 0 76px;text-align:left}
.hero::before{content:"";position:absolute;right:0;top:42px;width:610px;height:610px;border-radius:50%;background:radial-gradient(circle,rgba(22,93,255,.12),rgba(83,125,255,.045) 48%,transparent 72%);filter:blur(3px);pointer-events:none}
.hero .eyebrow{grid-column:1;grid-row:1;justify-self:start}
.hero .hero-title{grid-column:1;grid-row:2;margin:24px 0 22px;font-size:clamp(45px,4.4vw,58px);line-height:1.08;letter-spacing:-.045em}
.hero .hero-sub{grid-column:1;grid-row:3;max-width:610px;font-size:18px;line-height:1.72}
.hero .hero-actions{grid-column:1;grid-row:4;justify-content:flex-start;margin:30px 0 8px}
.hero .hero-note{grid-column:1;grid-row:5;margin-top:15px}
.hero .hero-visual{grid-column:2;grid-row:1/6;width:100%;margin:0;align-self:center}
.hero .trust-strip{grid-column:1/-1;grid-row:6;max-width:none;margin:62px 0 0}
.eyebrow{padding:8px 14px;border-color:rgba(22,93,255,.15);background:rgba(255,255,255,.82);box-shadow:0 8px 26px rgba(22,93,255,.065)}
.mac-pill{border-style:solid;border-color:rgba(22,93,255,.16);background:#f1f6ff;color:#567098}
.mac-pill::before{background:#75a1ff;box-shadow:0 0 0 4px rgba(64,128,255,.12)}
.desktop-frame{border-color:rgba(17,53,104,.11);border-radius:26px;box-shadow:0 34px 90px rgba(16,43,82,.17),0 0 0 7px rgba(255,255,255,.58)}
.window-bar{height:46px;background:linear-gradient(180deg,#f9fbff,#f3f6fb)}
.app-preview{height:372px;grid-template-columns:160px 1fr}
.app-preview aside{padding:20px 12px}
.app-preview section{padding:20px}
.preview-head b{font-size:20px}
.connect-panel{background:linear-gradient(135deg,#f4f8ff,#fafcff);border-color:rgba(22,93,255,.12)}
.preview-stats{gap:8px}
.preview-stats div,.preview-list{padding:12px}
.preview-stats b{font-size:16px}
.trust-strip{border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 18px 55px rgba(16,43,82,.085)}
.trust-strip div{padding:22px 26px}

/* Proof, feature and flow sections */
.stat-band{grid-template-columns:repeat(4,1fr);gap:0;margin-top:4px;padding:10px;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.91);box-shadow:var(--shadow-sm)}
.stat{padding:28px 18px;border:0;border-radius:18px;background:transparent;box-shadow:none}
.stat+.stat{border-left:1px solid var(--line)}
.stat:hover{transform:none;background:#f8faff;box-shadow:none}
.stat-icon{width:42px;height:42px;margin-bottom:13px}
.stat b{font-size:clamp(31px,4vw,44px)}
.feature-grid{gap:22px;padding:68px 0 38px}
.feature-grid article,.steps article,.faq-grid article,.status-board article,.plan-card,.panel,.download-card,.login-card,.explainer,.platform-card{border-radius:24px;border-color:rgba(18,45,88,.09);box-shadow:0 10px 32px rgba(16,43,82,.055)}
.feature-grid article{position:relative;overflow:hidden;padding:32px}
.feature-grid article::before{content:"";position:absolute;right:-42px;top:-52px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,var(--icon-glow,rgba(22,93,255,.11)),transparent 70%)}
.feature-icon{width:58px;height:58px;border-radius:18px}
.process-section{padding:68px 0 76px}
.section-head{margin-bottom:32px}
.section-head span,.page-hero span{font-size:14px;letter-spacing:.09em;text-transform:uppercase}
.section-head h2,.download-band h2{font-size:clamp(32px,4vw,48px);letter-spacing:-.04em}
.steps{gap:22px}
.steps::before{content:"";position:absolute;left:15%;right:15%;top:54px;height:1px;background:linear-gradient(90deg,transparent,rgba(22,93,255,.24),transparent);z-index:0}
.steps article{padding:34px 30px;background:linear-gradient(155deg,#fff,#f9fbff)}
.steps .step-mark b{box-shadow:none}
.steps article:nth-child(2) .step-icon{border-color:rgba(109,74,255,.12);background:#f0edff;color:#6d4aff;box-shadow:0 10px 25px rgba(109,74,255,.1)}
.steps article:nth-child(3) .step-icon{border-color:rgba(17,151,90,.12);background:#eaf8f1;color:#11975a;box-shadow:0 10px 25px rgba(17,151,90,.1)}
.steps article:nth-child(2) .step-mark b{color:rgba(109,74,255,.28)}
.steps article:nth-child(3) .step-mark b{color:rgba(17,151,90,.28)}
.compatibility-section{margin:12px auto 64px;padding:46px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(247,250,255,.92));box-shadow:var(--shadow-sm)}
.compatibility-copy h2{letter-spacing:-.045em}
.client-chip{min-height:102px;border-radius:20px;background:#fff}

/* Pricing and download */
.pricing-preview{padding:42px 0 94px}
.trial-banner{padding:24px 28px;border-radius:20px;background:linear-gradient(110deg,#edf4ff,#f7faff);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.plan-grid{gap:18px}
.plan-card{display:flex;flex-direction:column;min-height:100%;padding:30px;background:linear-gradient(160deg,#fff,#fbfcff)}
.plan-card h3{font-size:22px}
.plan-card ul{flex:1}
.plan-card.recommended{border-width:1px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#165dff,#6d5dfc) border-box;box-shadow:0 24px 62px rgba(22,93,255,.17);transform:translateY(-7px)}
.plan-card.recommended:hover{transform:translateY(-12px)}
.price{font-size:42px}
.download-band{border-block:1px solid rgba(22,93,255,.09);background:linear-gradient(115deg,#eaf2ff 0%,#f4f8ff 54%,#eef5ff 100%)}
.download-band::after{content:"";position:absolute;right:-90px;bottom:-150px;width:430px;height:430px;border:70px solid rgba(22,93,255,.055);border-radius:50%}
.band-inner{padding:82px 0}
.band-device{width:136px;height:136px;border-radius:32px;box-shadow:0 22px 54px rgba(22,93,255,.15)}

/* Public inner pages */
.page-hero{position:relative;margin-top:42px;padding:68px 42px 62px;overflow:hidden;border:1px solid rgba(22,93,255,.1);border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(238,245,255,.94));box-shadow:0 20px 60px rgba(16,43,82,.075)}
.page-hero::before,.page-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.page-hero::before{width:280px;height:280px;right:-110px;top:-140px;background:rgba(22,93,255,.08)}
.page-hero::after{width:150px;height:150px;left:-70px;bottom:-100px;border:28px solid rgba(64,128,255,.055)}
.page-hero>*{position:relative;z-index:1}
.page-hero h1{margin:14px auto 18px;font-size:clamp(40px,5vw,60px);letter-spacing:-.045em}
.page-hero p{font-size:18px}
.page[data-page="pricing"] .plan-grid{padding-top:42px;padding-bottom:34px}
.platform-grid{gap:24px;padding:34px 0 88px}
.platform-card{position:relative;padding:36px;background:rgba(255,255,255,.94)}
.platform-card:not(.soon){border-color:rgba(22,93,255,.17);box-shadow:0 22px 56px rgba(22,93,255,.09)}
.platform-head{margin-bottom:16px}
.platform-head>svg{width:58px;height:58px;padding:15px;border:1px solid rgba(22,93,255,.11);border-radius:18px;background:linear-gradient(145deg,#e8f0ff,#f7f9ff);fill:var(--blue);box-shadow:0 12px 28px rgba(22,93,255,.13);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease)}
.platform-card:hover .platform-head>svg{transform:translateY(-2px) scale(1.035);box-shadow:0 16px 34px rgba(22,93,255,.17)}
.platform-card.soon .platform-head>svg{border-color:rgba(48,55,70,.09);background:linear-gradient(145deg,#eceff4,#fbfbfc);fill:#303746;box-shadow:0 12px 28px rgba(48,55,70,.1)}
.platform-head h2{font-size:26px}
.platform-card dl{padding:6px 18px;border-radius:17px;background:#f7f9fc}
.explainer{margin:18px auto 90px;padding:38px}
.explainer p{position:relative;padding:17px 18px 17px 48px;border-radius:15px;background:#f6f9ff}
.explainer p::before{content:"✓";position:absolute;left:18px;top:17px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(22,93,255,.12);color:var(--blue);font-size:11px;font-weight:700}
.faq-grid,.status-board{gap:22px;padding:36px 0 90px}
.faq-grid article,.status-board article{padding:32px;background:rgba(255,255,255,.95)}
.faq-grid article h2,.status-board article h2{font-size:21px}
.faq-grid article:hover .info-icon,.status-board article:hover .info-icon{transform:translateY(-2px) scale(1.04)}
.info-icon{transition:transform .28s var(--ease-out),box-shadow .28s var(--ease)}

/* Authentication */
.auth-page{position:relative;place-items:center;min-height:calc(100vh - 72px);padding:58px 24px 78px;overflow:hidden}
.auth-page::before,.auth-page::after{content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.auth-page::before{left:calc(50% - 430px);top:12%;width:300px;height:300px;background:radial-gradient(circle,rgba(22,93,255,.14),transparent 70%)}
.auth-page::after{right:calc(50% - 420px);bottom:8%;width:260px;height:260px;background:radial-gradient(circle,rgba(93,83,216,.11),transparent 70%)}
.login-card{position:relative;z-index:1;width:min(470px,100%);padding:40px 42px;border-color:rgba(22,93,255,.12);border-radius:28px;background:rgba(255,255,255,.94);box-shadow:0 30px 90px rgba(16,43,82,.14)}
.login-card::before{content:"";position:absolute;left:30%;right:30%;top:-1px;height:3px;border-radius:99px;background:linear-gradient(90deg,#165dff,#69a2ff)}
.brand.center{margin-bottom:28px}
.auth-method-tabs{margin:26px 0;padding:5px;border-radius:14px}
.auth-method-tabs button{height:42px;border-radius:10px}
.auth-step h1{font-size:30px;letter-spacing:-.035em}

/* Account center */
body[data-current-page="account"]{background:#f3f6fb}
body[data-current-page="login"] .site-footer,body[data-current-page="account"] .site-footer{display:none}
.account-shell{grid-template-columns:252px minmax(0,1fr);gap:28px;padding:44px 0 88px}
.account-sidebar{top:86px;padding:18px;border-radius:22px;box-shadow:0 16px 48px rgba(16,43,82,.075)}
.account-sidebar h2{margin:8px 10px 16px;font-size:17px}
.account-sidebar button{height:44px;padding:0 14px;border-radius:12px}
.account-sidebar button.active{background:linear-gradient(90deg,rgba(22,93,255,.12),rgba(22,93,255,.055));box-shadow:inset 3px 0 0 var(--blue)}
.account-head{padding:2px 2px 4px}
.account-head h1{font-size:32px;letter-spacing:-.035em;overflow-wrap:anywhere}
.dashboard-grid{gap:18px}
.dashboard-grid article,.panel{border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 10px 34px rgba(16,43,82,.055)}
.dashboard-grid article{position:relative;overflow:hidden;padding:26px}
.dashboard-grid article::after{content:"";position:absolute;right:-34px;top:-44px;width:120px;height:120px;border-radius:50%;background:rgba(22,93,255,.055)}
.dashboard-grid strong{font-size:28px}
.two-col{gap:18px}
.billing-panel::before{height:168px;background:linear-gradient(135deg,rgba(22,93,255,.095),rgba(92,83,216,.035))}
.billing-plan-option,.payment-provider,.traffic-package-option{border-radius:17px}
.payment-checkout-bar{background:linear-gradient(110deg,#f1f6ff,#f7f9fd)}

/* Footer */
.site-footer{display:block;padding:64px 0 30px;border-top:0;background:linear-gradient(135deg,#0c1931,#10264a 65%,#12305d);color:#dce7fb}
.site-footer .brand strong{color:#fff}
.site-footer .brand small,.footer-brand p,.site-footer nav a,.footer-base{color:rgba(220,231,251,.76)}
.site-footer nav b{color:#fff}
.site-footer nav a:hover{color:#8eb8ff}
.footer-inner{padding-bottom:38px;border-bottom-color:rgba(255,255,255,.11)}
.footer-base{padding-top:26px}

@media(max-width:1040px){
  .hero{grid-template-columns:minmax(0,.95fr) minmax(450px,1.05fr);column-gap:38px}
  .app-preview{grid-template-columns:130px 1fr}.app-preview aside{padding-inline:8px}.app-preview section{padding:16px}
  .preview-stats b{font-size:14px}.preview-stats small{font-size:11px}
}
@media(min-width:981px){.hero-title .line{white-space:nowrap}}
@media(max-width:980px){
  .hero{display:flex;flex-direction:column;align-items:center;padding:78px 0 64px;text-align:center}
  .hero .eyebrow{align-self:center}.hero .hero-title{max-width:820px}.hero .hero-sub{max-width:700px}
  .hero .hero-actions{justify-content:center}.hero .hero-visual{width:min(850px,100%);margin-top:48px}.hero .trust-strip{width:100%;margin-top:54px}
  .steps::before{display:none}
  .compatibility-section{padding:38px}
  .plan-card.recommended{transform:none}.plan-card.recommended:hover{transform:translateY(-5px)}
  .account-shell{grid-template-columns:1fr}
}
@media(max-width:760px){
  .container,.nav-shell{width:min(100% - 32px,1180px)}
  .nav-shell{height:62px;gap:12px}.site-header[data-scrolled] .nav-shell{height:58px}
  .site-nav{top:62px;padding:10px 16px 18px;border-radius:0 0 18px 18px}
  .site-nav a::after{display:none}
  .hero{padding:62px 0 48px;overflow:visible}.hero::before{right:-12px;top:80px;width:340px;height:340px}
  .hero .hero-title{margin-top:20px;font-size:clamp(28px,8vw,36px);line-height:1.18}
  .hero .hero-sub{font-size:17px}.hero .hero-visual{margin-top:40px}
  .app-preview{height:350px;grid-template-columns:1fr}.app-preview section{padding:18px}
  .stat-band{grid-template-columns:1fr 1fr;padding:8px}.stat{padding:24px 12px}.stat+.stat{border-left:0}.stat:nth-child(even){border-left:1px solid var(--line)}.stat:nth-child(n+3){border-top:1px solid var(--line)}
  .feature-grid{padding-top:52px}.process-section{padding:56px 0}
  .compatibility-section{width:min(100% - 32px,1180px);margin-bottom:50px;padding:26px;border-radius:24px}
  .pricing-preview{padding-bottom:70px}.trial-banner{padding:22px}
  .page-hero{width:min(100% - 32px,1180px);margin-top:24px;padding:48px 22px 44px;border-radius:24px}
  .page-hero h1{font-size:clamp(36px,10vw,50px)}
  .platform-grid{padding-top:24px}.platform-card{padding:28px 22px}
  .explainer{padding:25px;margin-bottom:70px}.explainer div{gap:10px}
  .auth-page{min-height:calc(100vh - 62px);padding:38px 16px 58px}.login-card{padding:34px 26px;border-radius:24px}
  .account-shell{padding-top:10px}.account-sidebar{top:58px}.account-head h1{font-size:28px}
  .site-footer{padding-top:50px}.footer-inner{gap:32px}.site-footer nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px}.site-footer nav b{grid-column:1/-1}
}
@media(max-width:980px){
  .account-shell{grid-template-columns:minmax(0,1fr);max-width:100%}
  .account-sidebar{max-width:100%;overflow-x:clip}
  .account-nav-scroll{max-width:100%}
}
/* ---------- Cross-platform client hub / guides ---------- */
.hub-platform-grid,.client-catalog-grid,.catalog-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:28px 0 36px}
.catalog-sections{display:flex;flex-direction:column;gap:28px;padding:28px 0 36px}
.catalog-group{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin:0;min-width:0}
.catalog-group h2{margin:0;font-size:18px;line-height:1.3}
.catalog-group .catalog-card-grid{padding:0}
.hub-platform-card,.client-catalog-card{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:100%;padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-xs);overflow-wrap:anywhere}
.hub-platform-card:hover,.client-catalog-card:hover{border-color:rgba(22,93,255,.22);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.hub-platform-card strong,.client-catalog-card h3{display:block;margin:0;font-size:20px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-platform-card span,.client-catalog-card p{color:var(--muted);line-height:1.6}
.hub-status-row,.hub-footer-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:0 0 48px}
.platform-switch,.hub-platform-switch{display:flex;flex-wrap:wrap;gap:8px;margin:18px 28px 0}
.page[data-page="download"] .platform-switch{margin:8px auto 0}
.platform-switch-link,.hub-platform-switch button{min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:13px;font-weight:700}
.platform-switch-link.active,.hub-platform-switch button.active{border-color:rgba(22,93,255,.28);background:rgba(22,93,255,.1);color:var(--blue)}
.client-catalog-card header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.hub-origin{display:block;margin-bottom:4px;color:var(--blue);font-size:12px;font-weight:700}
.hub-support,.support-level{display:inline-flex;align-items:center;min-height:26px;padding:3px 9px;border-radius:999px;background:var(--bg-3);color:var(--text-2);font-size:11px;font-weight:700;font-style:normal;white-space:nowrap}
.support-level.verified_one_click{background:rgba(0,180,42,.12);color:#16833b}
.support-level.manual_import{background:rgba(22,93,255,.1);color:var(--blue)}
.support-level.guide_only{background:#eef1f6;color:#5b6780}
.client-catalog-card dl{margin:0;display:grid;gap:8px}
.client-catalog-card dl div{display:flex;justify-content:space-between;gap:12px;padding-top:8px;border-top:1px solid var(--line)}
.client-catalog-card dt{color:var(--muted);font-size:12px}
.client-catalog-card dd{margin:0;text-align:right;font-size:12px;overflow-wrap:anywhere}
.hub-arch-links,.hub-card-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hub-arch-meta{color:var(--muted);font-size:12px}
.catalog-fallback{padding:18px 0 8px}
#legacyDownloadGrid[hidden],#legacyDownloadGrid.hidden{display:none!important;height:0;margin:0;padding:0;overflow:hidden}
.client-catalog-card .hub-card-actions{margin-top:auto}
.hub-card-actions .button.compact{margin-top:0}
@media(min-width:1440px){
  .catalog-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.subscription-catalog-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px 28px 0}
.guide-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;padding:28px 0 80px;align-items:start}
.guide-side h2{margin:0 0 12px;font-size:16px}
.guide-side nav{display:grid;gap:8px}
.guide-side nav a{color:var(--text-2);font-size:13px}
.guide-side nav a:hover{color:var(--blue)}
.guide-side-actions{display:grid;gap:8px;margin-top:18px}
.guide-article{padding:28px}
.guide-section+ .guide-section{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.guide-article h2{margin:0 0 10px;font-size:22px}
.guide-article p,.guide-client-list{color:var(--text-2);overflow-wrap:anywhere}
.guide-client-list{margin:12px 0 0;padding-left:18px}
@media(max-width:980px){
  .hub-platform-grid,.client-catalog-grid,.catalog-card-grid,.subscription-catalog-extras,.guide-layout{grid-template-columns:1fr}
}
@media(max-width:760px){
  .hub-platform-switch,.subscription-catalog-extras{margin-left:18px;margin-right:18px;padding-left:0;padding-right:0}
  .client-catalog-card h3{white-space:normal}
  .client-catalog-card header,.client-catalog-card dl div,.hub-status-row{flex-direction:column;align-items:flex-start}
  .client-catalog-card dd{text-align:left}
}
@media(max-width:460px){
  .hero{overflow:visible}
  .hero .hero-title{font-size:clamp(26px,8vw,34px);line-height:1.2}.hero .hero-actions{width:100%;flex-wrap:wrap}
  .trust-strip div{padding:18px 20px}
  .stat b{font-size:31px}.stat small{font-size:12px}
  .feature-grid article,.steps article,.faq-grid article,.status-board article{padding:26px 23px}
  .compatibility-section{padding:22px}.client-chip{min-height:90px;padding:15px}.client-icon{flex-basis:46px;width:46px;height:46px}
  .page-hero{padding-inline:18px}.page-hero p{font-size:16px}
  .page-hero h1{font-size:32px;line-height:1.12}
  .account-download-actions{display:grid;grid-template-columns:1fr}.account-download-actions .button{width:100%}
  body.account-guest .account-shell{padding-block:32px;align-content:start}
  body.account-guest .account-guest-gate{padding:28px 24px}
  body.account-guest .account-guest-gate h2{font-size:24px}
  .platform-head>svg{width:52px;height:52px}.platform-head h2{font-size:23px}
  .auth-step h1{font-size:27px}.login-card{padding-inline:22px}
  .site-footer nav{grid-template-columns:1fr 1fr}.site-footer nav b{grid-column:1/-1}
}

/* ============================================================
   2026-08 enterprise positioning
   A bright, infrastructure-led layer for cross-border business.
   Soft cloud surfaces keep the page open and energetic while
   precise blue/mint signals preserve the network-console character.
   ============================================================ */
:root{
  --enterprise-ink:#142747;
  --enterprise-ink-2:#2a4165;
  --enterprise-panel:#ffffff;
  --enterprise-mint:#0a9f83;
  --enterprise-mint-soft:#dff8f1;
  --enterprise-blue:#2f6bff;
  --enterprise-blue-soft:#eaf1ff;
  --enterprise-cloud:#f7faff;
  --enterprise-line:#dbe6f5;
  --enterprise-muted:#5f708d;
}

/* Shared enterprise controls */
.enterprise-kicker{display:inline-flex;align-items:center;gap:9px;color:#087d6b;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.enterprise-kicker::before{content:"";width:24px;height:1px;background:currentColor}
.button.enterprise-button{border:1px solid var(--enterprise-blue);background:var(--enterprise-blue);color:#fff;box-shadow:0 14px 34px rgba(47,107,255,.2)}
.button.enterprise-button:hover{border-color:#2459dc;background:#2459dc;box-shadow:0 18px 42px rgba(47,107,255,.26);transform:translateY(-2px)}
.button.enterprise-ghost{border:1px solid #bfcee4;background:rgba(255,255,255,.72);color:#2b4163;box-shadow:none}
.button.enterprise-ghost:hover{border-color:#7e9fd6;background:#fff;color:var(--enterprise-blue)}
.hero .hero-note{display:flex;align-items:center;flex-wrap:wrap;gap:14px}.hero-account-link{color:#50698d;font-size:13px;font-weight:700}.hero-account-link:hover{color:var(--blue)}

/* Homepage enterprise bridge */
.enterprise-spotlight{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(430px,.96fr);gap:54px;margin-top:66px;margin-bottom:30px;padding:58px 62px;overflow:hidden;border:1px solid #d9e5f4;border-radius:32px;background:
  radial-gradient(560px 340px at 94% 4%,rgba(100,117,255,.16),transparent 70%),
  radial-gradient(420px 300px at 8% 112%,rgba(31,198,163,.14),transparent 72%),
  linear-gradient(135deg,#fff 0%,#f6fbff 52%,#f7f5ff 100%);color:var(--enterprise-ink);box-shadow:0 28px 80px rgba(49,83,132,.12)}
.enterprise-spotlight::before{content:"";position:absolute;inset:0;opacity:.55;background-image:linear-gradient(rgba(47,107,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(47,107,255,.055) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(90deg,transparent 22%,#000)}
.enterprise-spotlight-copy,.enterprise-spotlight-grid{position:relative;z-index:1}
.enterprise-spotlight-copy h2{margin:18px 0 20px;color:var(--enterprise-ink);font-size:clamp(30px,3.2vw,43px);line-height:1.16;letter-spacing:-.045em}
.enterprise-spotlight-copy p{max-width:640px;margin:0;color:var(--enterprise-muted);font-size:16px;line-height:1.82}
.enterprise-spotlight-actions{display:flex;align-items:center;gap:24px;margin-top:30px}
.enterprise-text-link{color:var(--enterprise-blue);font-weight:700}
.enterprise-text-link:hover{color:#214fc4}
.enterprise-spotlight-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center;min-height:300px}
.enterprise-spotlight-grid article{display:flex;flex-direction:column;justify-content:center;min-height:128px;padding:22px;border:1px solid rgba(116,145,190,.18);border-radius:19px;background:rgba(255,255,255,.76);backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(57,86,128,.07);transition:border-color .28s var(--ease),transform .28s var(--ease-out),background .28s var(--ease)}
.enterprise-spotlight-grid article:nth-child(1){background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(226,249,243,.82))}
.enterprise-spotlight-grid article:nth-child(2){background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(231,239,255,.86))}
.enterprise-spotlight-grid article:nth-child(3){background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(242,236,255,.84))}
.enterprise-spotlight-grid article:hover{transform:translateY(-3px);border-color:rgba(47,107,255,.3);background:#fff}
.enterprise-spotlight-grid article span{color:var(--enterprise-blue);font:700 11px/1 "Cascadia Mono",Consolas,monospace;letter-spacing:.12em}
.enterprise-spotlight-grid article strong{margin-top:16px;color:var(--enterprise-ink);font-size:17px}
.enterprise-spotlight-grid article small{margin-top:7px;color:#6c7d98;font-size:12px}
.enterprise-spotlight-grid article:nth-child(3){grid-column:1/2}
.enterprise-orbit{position:absolute;right:0;bottom:0;width:188px;height:188px;border:1px solid rgba(47,107,255,.18);border-radius:50%}
.enterprise-orbit::before,.enterprise-orbit::after{content:"";position:absolute;inset:22px;border:1px solid rgba(100,117,255,.2);border-radius:50%}
.enterprise-orbit::after{inset:48px;border-color:rgba(10,159,131,.24)}
.enterprise-orbit i{position:absolute;width:7px;height:7px;border-radius:50%;background:#13b996;box-shadow:0 0 14px rgba(19,185,150,.4)}
.enterprise-orbit i:nth-child(1){left:29px;top:28px}.enterprise-orbit i:nth-child(2){right:7px;top:84px;background:var(--enterprise-blue)}.enterprise-orbit i:nth-child(3){left:54px;bottom:2px}
.enterprise-orbit b{position:absolute;inset:0;display:grid;place-items:center;color:#5c7093;font:700 11px/1.4 "Cascadia Mono",Consolas,monospace;letter-spacing:.13em;text-align:center}

/* Enterprise page hero */
body[data-current-page="solutions"]{background:var(--enterprise-cloud)}
.enterprise-solutions-page{background:var(--enterprise-cloud)}
.enterprise-hero-shell{position:relative;overflow:hidden;border-bottom:1px solid var(--enterprise-line);background:
  radial-gradient(780px 560px at 82% 26%,rgba(68,124,255,.18),transparent 68%),
  radial-gradient(640px 500px at 6% 96%,rgba(31,198,163,.14),transparent 70%),
  radial-gradient(520px 360px at 58% -8%,rgba(148,118,255,.12),transparent 70%),
  linear-gradient(130deg,#fbfdff 0%,#f3f8ff 55%,#f8f5ff 100%);color:var(--enterprise-ink)}
.enterprise-hero-shell::before{content:"";position:absolute;inset:0;opacity:.58;background-image:linear-gradient(rgba(47,107,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(47,107,255,.055) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent,#000 44%,#000)}
.enterprise-hero{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.94fr) minmax(520px,1.06fr);gap:64px;align-items:center;min-height:680px;padding-top:84px;padding-bottom:84px}
.enterprise-hero-copy h1{max-width:650px;margin:22px 0 24px;color:var(--enterprise-ink);font-size:clamp(48px,5.2vw,72px);line-height:1.06;letter-spacing:-.055em}
.enterprise-hero-copy h1 span{background:linear-gradient(90deg,#2f6bff,#08a786);color:transparent;background-clip:text;-webkit-background-clip:text}
.enterprise-hero-copy>p{max-width:650px;margin:0;color:var(--enterprise-muted);font-size:17px;line-height:1.82}
.enterprise-hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.enterprise-hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:36px 0 0;padding-top:26px;border-top:1px solid #dce6f3}
.enterprise-hero-facts div{padding-right:18px}
.enterprise-hero-facts div+div{padding-left:20px;border-left:1px solid #dce6f3}
.enterprise-hero-facts dt{color:#7b8ba3;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.enterprise-hero-facts dd{margin:7px 0 0;color:#273d61;font-size:13px;font-weight:700}

/* Network console illustration */
.enterprise-network-visual{position:relative;min-height:500px;overflow:hidden;border:1px solid #cad9ee;border-radius:28px;background:linear-gradient(155deg,rgba(255,255,255,.94),rgba(240,246,255,.94));box-shadow:0 34px 86px rgba(45,78,127,.18),inset 0 1px 0 rgba(255,255,255,.9)}
.enterprise-network-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,rgba(47,107,255,.1),transparent 54%);pointer-events:none}
.network-visual-head{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 20px;border-bottom:1px solid #dce6f3;background:rgba(255,255,255,.78);font:700 10px/1 "Cascadia Mono",Consolas,monospace;letter-spacing:.12em;backdrop-filter:blur(14px)}
.network-visual-head span{color:#637694}
.network-visual-head em{padding:6px 9px;border:1px solid rgba(10,159,131,.2);border-radius:99px;background:#e7faf4;color:#087d6b;font-style:normal}
.enterprise-network-visual svg{position:absolute;left:0;right:0;top:48px;width:100%;height:400px;overflow:visible}
.map-grid path{fill:none;stroke:rgba(58,92,141,.11);stroke-width:1}
.map-routes path{fill:none;stroke:url(#enterpriseRoute);stroke-width:2;stroke-linecap:round;stroke-dasharray:6 8;filter:drop-shadow(0 0 4px rgba(47,107,255,.28));animation:enterpriseRouteFlow 9s linear infinite}
.map-node circle:first-child{fill:rgba(15,184,148,.13);stroke:rgba(8,159,131,.62);stroke-width:1.5;animation:enterprisePulse 2.8s ease-in-out infinite}
.map-node circle:last-child{fill:#12b995;filter:drop-shadow(0 0 6px rgba(10,159,131,.42))}
.map-node.source circle:first-child{fill:rgba(47,107,255,.13);stroke:rgba(47,107,255,.72)}
.map-node.source circle:last-child{fill:#477cff}
.network-label{position:absolute;z-index:4;display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid rgba(116,145,190,.22);border-radius:10px;background:rgba(255,255,255,.82);box-shadow:0 9px 24px rgba(45,78,127,.12);font-style:normal;backdrop-filter:blur(10px)}
.network-label b{color:#294162;font:700 10px/1 "Cascadia Mono",Consolas,monospace;letter-spacing:.08em}.network-label small{color:#71829c;font-size:10px}
.label-source{left:46%;top:56%}.label-sea{left:21%;top:26%}.label-eu{right:11%;top:22%}.label-na{right:5%;bottom:25%}.label-me{left:8%;bottom:24%}
.network-telemetry{position:absolute;z-index:4;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;padding-top:15px;border-top:1px solid #dce6f3;color:#8392a8;font:700 9px/1 "Cascadia Mono",Consolas,monospace;letter-spacing:.1em}
.network-telemetry span:first-child{color:#536987}
.network-telemetry i{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#11b18f;box-shadow:0 0 9px rgba(10,159,131,.45)}
@keyframes enterpriseRouteFlow{to{stroke-dashoffset:-140}}
@keyframes enterprisePulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.14)}}

/* Section scaffolding */
.enterprise-service-section,.enterprise-process-section{padding-top:110px;padding-bottom:110px}
.enterprise-section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.62fr);gap:70px;align-items:end;margin-bottom:48px}
.enterprise-section-head>div>span,.enterprise-deliverables-copy>span,.enterprise-final-cta>div>span{color:#157e67;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.enterprise-section-head h2{margin:15px 0 0;color:#0b2430;font-size:clamp(34px,4vw,52px);line-height:1.13;letter-spacing:-.045em}
.enterprise-section-head>p{margin:0;color:#62747a;font-size:15px;line-height:1.86}

/* Solution cards */
.enterprise-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.enterprise-service-card{position:relative;min-height:376px;padding:34px;overflow:hidden;border:1px solid rgba(42,77,120,.11);border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(34,72,120,.06);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.enterprise-service-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--card-accent,#51e4b5)}
.enterprise-service-card::after{content:"";position:absolute;right:-78px;top:-84px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,var(--card-glow,rgba(81,228,181,.13)),transparent 70%)}
.enterprise-service-card:hover{transform:translateY(-2px);border-color:rgba(47,107,255,.2);box-shadow:0 18px 44px rgba(34,72,120,.1)}
.enterprise-service-card.accent-blue{--card-accent:#5f93ff;--card-glow:rgba(95,147,255,.14)}
.enterprise-service-card.accent-violet{--card-accent:#8b78ff;--card-glow:rgba(139,120,255,.14)}
.enterprise-service-card.accent-amber{--card-accent:#f1bd5b;--card-glow:rgba(241,189,91,.15)}
.enterprise-card-index{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.enterprise-card-index>span{color:#87979a;font:700 12px/1 "Cascadia Mono",Consolas,monospace;letter-spacing:.12em}
.enterprise-card-index svg{width:44px;height:44px;padding:10px;border:1px solid rgba(15,126,103,.1);border-radius:13px;background:#f1f8f6;fill:none;stroke:#147f68;stroke-width:1.7}
.enterprise-service-card h3{position:relative;z-index:1;margin:52px 0 14px;color:#0c2631;font-size:25px;letter-spacing:-.025em}
.enterprise-service-card>p{position:relative;z-index:1;margin:0;color:#607279;font-size:15px;line-height:1.75}
.enterprise-service-card ul{position:relative;z-index:1;display:grid;gap:9px;margin:25px 0 0;padding:19px 0 0;border-top:1px solid rgba(15,62,69,.08);list-style:none}
.enterprise-service-card li{position:relative;padding-left:19px;color:#334e56;font-size:13px;font-weight:600}
.enterprise-service-card li::before{content:"";position:absolute;left:0;top:.48em;width:7px;height:7px;border:2px solid var(--card-accent,#51e4b5);border-radius:50%}

/* Regional band */
.enterprise-region-band{position:relative;overflow:hidden;border-block:1px solid #d9e5f4;background:
  radial-gradient(620px 340px at 88% 28%,rgba(98,118,255,.15),transparent 72%),
  radial-gradient(480px 300px at 8% 112%,rgba(31,198,163,.13),transparent 70%),
  linear-gradient(120deg,#f1fbf8,#eff5ff 56%,#f7f2ff);color:var(--enterprise-ink)}
.enterprise-region-band::before{content:"";position:absolute;inset:0;opacity:.62;background-image:linear-gradient(rgba(47,107,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(47,107,255,.055) 1px,transparent 1px);background-size:54px 54px}
.enterprise-region-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.72fr) minmax(520px,1.28fr);gap:80px;align-items:center;padding-top:86px;padding-bottom:86px}
.enterprise-region-inner h2{margin:18px 0 0;color:var(--enterprise-ink);font-size:clamp(34px,3.7vw,49px);line-height:1.15;letter-spacing:-.04em}
.enterprise-region-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.enterprise-region-list span{display:flex;flex-direction:column;justify-content:center;min-height:96px;padding:18px;border:1px solid rgba(116,145,190,.18);border-radius:16px;background:rgba(255,255,255,.74);box-shadow:0 10px 28px rgba(52,83,128,.06)}
.enterprise-region-list b{margin-bottom:8px;color:#087d6b;font:700 10px/1 "Cascadia Mono",Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
.enterprise-region-list span{color:#2a4165;font-size:15px;font-weight:700}
.enterprise-region-list .region-note{border-style:dashed;color:#61738f}

/* Delivery process */
.enterprise-process-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0;padding:0;list-style:none}
.enterprise-process-grid::before{content:"";position:absolute;left:8%;right:8%;top:31px;height:1px;background:linear-gradient(90deg,transparent,rgba(20,127,104,.35),transparent)}
.enterprise-process-grid li{position:relative;z-index:1;min-height:290px;padding:25px;border:1px solid rgba(15,62,69,.09);border-radius:21px;background:rgba(255,255,255,.82)}
.enterprise-process-grid li>span{display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(20,127,104,.14);border-radius:50%;background:#edf8f4;color:#147f68;font:700 12px/1 "Cascadia Mono",Consolas,monospace;box-shadow:0 0 0 8px var(--enterprise-cloud)}
.enterprise-process-grid h3{margin:30px 0 12px;color:#102c36;font-size:20px}
.enterprise-process-grid p{margin:0;color:#64777c;font-size:14px;line-height:1.75}
.enterprise-process-grid small{position:absolute;left:25px;right:25px;bottom:23px;padding-top:14px;border-top:1px solid rgba(15,62,69,.08);color:#147f68;font-size:11px;font-weight:700}

/* Deliverables and final CTA */
.enterprise-deliverables{display:grid;grid-template-columns:minmax(0,.8fr) minmax(500px,1.2fr);gap:74px;align-items:start;margin-bottom:110px;padding:60px;border:1px solid rgba(15,62,69,.09);border-radius:30px;background:#fff;box-shadow:0 20px 60px rgba(14,51,58,.07)}
.enterprise-deliverables-copy h2{margin:17px 0 18px;color:#0c2832;font-size:clamp(32px,3.6vw,46px);line-height:1.15;letter-spacing:-.04em}
.enterprise-deliverables-copy p{margin:0 0 28px;color:#64777c;font-size:15px;line-height:1.82}
.enterprise-deliverables-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
.enterprise-deliverables-list>div{display:flex;gap:15px;min-height:118px;padding:20px;border-bottom:1px solid rgba(15,62,69,.08)}
.enterprise-deliverables-list>div:nth-child(odd){border-right:1px solid rgba(15,62,69,.08)}
.enterprise-deliverables-list>div:nth-last-child(-n+2){border-bottom:0}
.enterprise-deliverables-list>div>span{color:#159377;font:700 11px/1.4 "Cascadia Mono",Consolas,monospace}
.enterprise-deliverables-list p{display:flex;flex-direction:column;gap:7px;margin:0}
.enterprise-deliverables-list b{color:#1c3a42;font-size:14px}.enterprise-deliverables-list small{color:#748589;font-size:12px;line-height:1.6}
.enterprise-final-cta{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;margin-bottom:110px;padding:54px 58px;overflow:hidden;border:1px solid #cfdff5;border-radius:30px;background:
  radial-gradient(400px 240px at 92% 14%,rgba(103,119,255,.18),transparent 70%),
  radial-gradient(360px 240px at 7% 110%,rgba(31,198,163,.14),transparent 70%),
  linear-gradient(120deg,#f8fbff,#edf4ff 58%,#f5efff);color:var(--enterprise-ink);box-shadow:0 24px 70px rgba(48,82,132,.12)}
.enterprise-final-cta::after{content:"";position:absolute;right:-100px;bottom:-150px;width:300px;height:300px;border:50px solid rgba(47,107,255,.055);border-radius:50%}
.enterprise-final-cta>div{position:relative;z-index:1}.enterprise-final-cta h2{margin:13px 0 10px;color:var(--enterprise-ink);font-size:clamp(30px,3.6vw,45px);letter-spacing:-.04em}.enterprise-final-cta p{max-width:720px;margin:0;color:var(--enterprise-muted);line-height:1.7}
.enterprise-final-cta>div:nth-child(2){display:flex;gap:10px}
.enterprise-final-cta>small{position:relative;z-index:1;grid-column:1/-1;padding-top:20px;border-top:1px solid #dce6f3;color:#7a89a0;font-size:11px;line-height:1.7}

/* The added enterprise column keeps the footer balanced. */
.footer-inner{grid-template-columns:1.55fr .9fr .9fr .72fr}

@media(max-width:1100px){
  .enterprise-spotlight{grid-template-columns:1fr;gap:42px;padding:52px}.enterprise-spotlight-grid{min-height:280px}
  .enterprise-hero{grid-template-columns:1fr;gap:54px;padding-top:74px;padding-bottom:74px}.enterprise-hero-copy{max-width:820px}.enterprise-network-visual{width:min(820px,100%)}
  .enterprise-region-inner{grid-template-columns:1fr;gap:42px}.enterprise-region-list{max-width:800px}
  .enterprise-process-grid{grid-template-columns:1fr 1fr}.enterprise-process-grid::before{display:none}
  .enterprise-deliverables{grid-template-columns:1fr;gap:42px}
  .footer-inner{grid-template-columns:1.35fr 1fr 1fr}.footer-inner .footer-brand{grid-column:1/-1}.footer-brand p{max-width:520px}
}
@media(max-width:760px){
  .enterprise-spotlight{width:min(100% - 32px,1180px);margin-top:48px;padding:34px 24px;border-radius:24px}.enterprise-spotlight-copy h2 br{display:none}.enterprise-spotlight-actions{align-items:stretch;flex-direction:column;gap:16px}.enterprise-spotlight-actions .button{width:100%}.enterprise-spotlight-grid{grid-template-columns:1fr;min-height:0}.enterprise-spotlight-grid article:nth-child(3){grid-column:auto}.enterprise-orbit{display:none}
  .enterprise-hero{min-height:auto;gap:38px;padding-top:46px;padding-bottom:54px}.enterprise-hero-copy h1{font-size:clamp(38px,11vw,54px)}.enterprise-hero-copy>p{font-size:16px}.enterprise-hero-actions{align-items:stretch;flex-direction:column}.enterprise-hero-actions .button{width:100%}.enterprise-hero-facts{grid-template-columns:1fr}.enterprise-hero-facts div{padding:13px 0}.enterprise-hero-facts div+div{padding-left:0;border-left:0;border-top:1px solid #dce6f3}
  .enterprise-network-visual{min-height:380px;border-radius:22px}.enterprise-network-visual svg{top:44px;height:300px}.network-label{transform:scale(.88);transform-origin:left top}.label-source{left:39%;top:54%}.label-sea{left:11%;top:25%}.label-eu{right:2%;top:22%}.label-na{right:0;bottom:22%}.label-me{left:1%;bottom:23%}.network-telemetry span:last-child{display:none}
  .enterprise-service-section,.enterprise-process-section{padding-top:76px;padding-bottom:76px}.enterprise-section-head{grid-template-columns:1fr;gap:22px;margin-bottom:34px}.enterprise-section-head h2 br{display:none}.enterprise-section-head>p{font-size:14px}
  .enterprise-service-grid,.enterprise-process-grid{grid-template-columns:1fr}.enterprise-service-card{min-height:auto;padding:28px 24px}.enterprise-service-card h3{margin-top:38px}.enterprise-process-grid li{min-height:270px}
  .enterprise-region-inner{padding-top:68px;padding-bottom:68px}.enterprise-region-list{grid-template-columns:1fr 1fr}.enterprise-region-list span{min-height:88px}
  .enterprise-deliverables{width:min(100% - 32px,1180px);margin-bottom:76px;padding:34px 23px;border-radius:24px}.enterprise-deliverables-list{grid-template-columns:1fr}.enterprise-deliverables-list>div:nth-child(odd){border-right:0}.enterprise-deliverables-list>div:nth-last-child(2){border-bottom:1px solid rgba(15,62,69,.08)}
  .enterprise-final-cta{width:min(100% - 32px,1180px);grid-template-columns:1fr;margin-bottom:76px;padding:38px 24px;border-radius:24px}.enterprise-final-cta>div:nth-child(2){align-items:stretch;flex-direction:column}.enterprise-final-cta>div:nth-child(2) .button{width:100%}
  .footer-inner{grid-template-columns:1fr 1fr}.footer-inner .footer-brand{grid-column:1/-1}
}
@media(max-width:460px){
  .enterprise-network-visual{min-height:350px}.enterprise-network-visual svg{left:6px;width:calc(100% - 12px);height:275px}.network-label small{display:none}.label-source{left:34%;top:53%}.label-sea{left:4px;top:25%}.label-eu{right:4px;top:22%}.label-na{right:4px;bottom:22%}.label-me{left:4px;bottom:22%}
  .enterprise-region-list{grid-template-columns:repeat(2,minmax(0,1fr))}.enterprise-region-list span{min-height:72px;padding:14px}
  .enterprise-deliverables-list>div{padding-inline:8px}
}
@media(max-width:350px){.enterprise-region-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .map-routes path,.map-node circle:first-child{animation:none!important}
}

/* ============================================================
   2026 motion + typography consolidation
   One CJK-capable face is chosen before generic UI fonts so Chinese, Latin,
   numbers and punctuation share the same metrics on each operating system.
   The type scale, weights and tracking are intentionally restricted.
   ============================================================ */
:root{
  --font-sans:"PingFang SC","Microsoft YaHei UI","Noto Sans CJK SC","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --type-display:clamp(2.75rem,4.8vw,4.25rem);
  --type-section:clamp(2rem,3.6vw,3rem);
  --type-title:1.25rem;
  --type-body:1rem;
  --type-caption:.8125rem;
  --tracking-display:-.035em;
  --tracking-title:-.018em;
  --motion-fast:.24s;
  --motion-base:.48s;
  --motion-slow:.82s;
}
html{font-family:var(--font-sans);font-synthesis:none;-webkit-text-size-adjust:100%}
body,button,input,textarea,select{font-family:var(--font-sans)}
body{font-size:var(--type-body);line-height:1.65;letter-spacing:0}
:where(h1,h2,h3,h4,h5,h6){font-family:var(--font-sans);font-synthesis:none;text-wrap:balance}
:where(p,li,dd){text-wrap:pretty}
:where(code,kbd,samp,.sha-box,.network-label b,.enterprise-region-list b,.enterprise-process-grid li>span,.enterprise-deliverables-list>div>span){font-family:var(--font-mono)}
.button{font-weight:600;letter-spacing:0}
.site-nav a{letter-spacing:0}
.hero .hero-title{font-size:var(--type-display);font-weight:700;line-height:1.07;letter-spacing:var(--tracking-display)}
.hero .hero-sub{font-size:1.125rem;line-height:1.72;letter-spacing:0}
.section-head h2,.download-band h2{font-size:var(--type-section);font-weight:700;line-height:1.12;letter-spacing:var(--tracking-display)}
.section-head span,.page-hero span{font-size:.8125rem;font-weight:600;letter-spacing:.08em}
.page-hero h1,.split-page h1{font-weight:700;line-height:1.1;letter-spacing:var(--tracking-display)}
.page-hero p,.split-page p{font-size:1.0625rem;line-height:1.72;letter-spacing:0}
.feature-grid h3,.steps h3,.faq-grid h2,.status-board h2{font-size:var(--type-title);font-weight:600;letter-spacing:var(--tracking-title)}
.feature-grid p,.steps p,.faq-grid p,.status-board p{font-size:.9375rem;line-height:1.7;letter-spacing:0}
.stat b{font-weight:700;letter-spacing:-.025em}
.stat small{font-size:.8125rem;line-height:1.55;letter-spacing:0}
.enterprise-kicker,.enterprise-section-head>div>span,.enterprise-deliverables-copy>span,.enterprise-final-cta>div>span{font-weight:700;letter-spacing:.12em}
.enterprise-spotlight-copy h2,.enterprise-hero-copy h1,.enterprise-section-head h2,.enterprise-region-inner h2,.enterprise-deliverables-copy h2,.enterprise-final-cta h2{font-weight:700;letter-spacing:var(--tracking-display)}

/* A slim reading-position indicator adds feedback without competing with the
   navigation. GSAP drives scaleX against the active route's scroll range. */
.scroll-progress{position:fixed;inset:0 0 auto;z-index:65;height:2px;pointer-events:none;overflow:hidden;background:transparent}
.scroll-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#165dff,#5f8cff 62%,#41c7e8);box-shadow:0 0 12px rgba(22,93,255,.42)}

/* GSAP owns these transforms; their older CSS keyframes are disabled to keep
   a single animation clock and avoid transform races. */
html.gsap-ready .mesh-blob{animation:none}
html.gsap-ready .hero-title .line__in{opacity:1;transform:none;transition:none}
html.gsap-ready .enterprise-orbit{transform-origin:50% 50%}
.hero-sub,.hero-actions,.hero-note,.hero-visual{opacity:1;transform:none}
.steps::before{transform:scaleX(var(--motion-progress,1));transform-origin:left center;will-change:transform}

/* Tighten the visual system: one radius family and quieter surface borders.
   Brand colour and typography carry hierarchy instead of extra decoration. */
:where(.feature-grid article,.steps article,.plan-card,.platform-card,.faq-grid article,.status-board article,.client-chip){border-radius:20px}
:where(.feature-grid article,.steps article,.plan-card,.platform-card,.faq-grid article,.status-board article){border-color:rgba(20,40,90,.09)}
.trust-strip{border-radius:20px}
.trial-banner{border-radius:16px}

@media(max-width:760px){
  :root{--type-display:clamp(2.1rem,9vw,2.75rem);--type-section:clamp(1.8rem,8vw,2.3rem)}
  body{font-size:.9375rem}
  .hero{padding-top:48px;padding-bottom:42px}
  .hero .hero-title{line-height:1.13;letter-spacing:-.03em}
  .hero .hero-sub,.page-hero p,.split-page p{font-size:1rem;line-height:1.7}
  .hero .hero-visual{margin-top:32px}
  .app-preview{height:290px}
  .preview-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .preview-stats div{min-width:0;padding-inline:7px}
  .preview-stats b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero .trust-strip{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px}
  .trust-strip div{display:flex;min-width:0;min-height:86px;flex-direction:column;justify-content:center;padding:13px 8px;text-align:center}
  .trust-strip div+div{border-top:0;border-left:1px solid var(--line)}
  .trust-strip dt{font-size:.6875rem}
  .trust-strip dd{font-size:.6875rem;line-height:1.45}
  .scroll-progress{height:2px}
}

@media(prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .steps::before{transform:scaleX(1)!important}
  html.gsap-ready .hero-title .line__in{opacity:1!important;transform:none!important}
}

/* ============================================================
   2026 editorial + layout consolidation
   A consistent reading rhythm is shared by every information page: the
   heading carries the message, supporting copy stays within a readable line
   length, and cards align to a predictable desktop/tablet/mobile grid.
   ============================================================ */
:root{
  --content-wide:1180px;
  --content-reading:760px;
  --space-page:clamp(64px,8vw,112px);
}
.container,.nav-shell{width:min(var(--content-wide),calc(100% - 48px))}

/* Information-page introduction: editorial split instead of an oversized,
   centre-aligned billboard. */
.page-hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.62fr);
  column-gap:clamp(44px,6vw,82px);
  row-gap:12px;
  align-items:end;
  min-height:244px;
  margin-top:40px;
  padding:clamp(44px,5vw,66px);
  text-align:left;
}
.page-hero>span,.page-hero>h1{grid-column:1}
.page-hero>span{align-self:end;margin:0;font-size:.8125rem;letter-spacing:.08em}
.page-hero>h1{max-width:14ch;margin:0;font-size:clamp(2.5rem,4.15vw,3.6rem);line-height:1.08}
.page-hero>p{grid-column:2;grid-row:1/3;align-self:end;max-width:42rem;margin:0;padding-bottom:.25rem;color:var(--text-2)}
.page-hero>.hero-actions{grid-column:2;grid-row:3;justify-content:flex-start;margin:8px 0 0}
.page[data-page="notfound"] .page-hero>p{grid-row:1/3}

/* Page controls live close to the content they affect. */
.billing-period-row{padding-top:28px}
.page[data-page="pricing"] .plan-grid{padding-top:28px}
.page[data-page="download"] .platform-switch{margin-top:22px}
.catalog-sections{gap:32px;padding-top:24px;padding-bottom:56px}
.hub-status-row,.hub-footer-links{padding-bottom:64px}

/* Five supported platforms form one balanced desktop row. Client cards use
   three columns at regular desktop widths rather than only on extra-wide
   monitors. */
.hub-platform-grid{gap:14px;padding-top:28px;padding-bottom:34px}
.hub-platform-card{min-height:164px;padding:24px;justify-content:flex-start;transition:transform .28s var(--ease-out),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.hub-platform-card strong{font-size:1.125rem}
.hub-platform-card span{margin-top:auto;font-size:.875rem;line-height:1.65}
.catalog-card-grid{gap:16px}
.client-catalog-card{gap:14px;padding:24px}
.client-catalog-card>p{min-height:3.2em;margin:0;font-size:.875rem}
.client-catalog-card dl{gap:0;padding:4px 14px;border:1px solid rgba(20,40,90,.07);border-radius:14px;background:var(--surface-2)}
.client-catalog-card dl div{min-height:38px;align-items:center;padding:8px 0}
.client-catalog-card dl div:first-child{border-top:0}
.client-catalog-card .hub-card-actions{padding-top:2px}

/* Guide pages retain context while reading long instructions. */
.guide-layout{grid-template-columns:250px minmax(0,1fr);gap:26px;padding-top:28px}
.guide-side{position:sticky;top:82px}
.guide-side nav{gap:4px}
.guide-side nav a{padding:7px 9px;border-radius:8px;line-height:1.45}
.guide-side nav a:hover{background:rgba(22,93,255,.07)}
.guide-article{padding:clamp(30px,4vw,48px)}
.guide-article p,.guide-client-list{max-width:72ch;line-height:1.75}
.guide-section+.guide-section{margin-top:34px;padding-top:30px}

/* Equal-height information cards and restrained text measure improve scan
   speed on help and status pages. */
.faq-grid,.status-board{align-items:stretch;gap:18px;padding-top:32px;padding-bottom:var(--space-page)}
.faq-grid article,.status-board article{min-height:210px;padding:30px}
.faq-grid article{display:flex;flex-direction:column}
.faq-grid article>p,.status-board article>p{max-width:58ch}
.faq-grid article>.button{align-self:flex-start;margin-top:auto}

/* Text links follow one verb-led affordance without mixing arrow glyphs into
   source copy. */
:where(a.hero-account-link,a.enterprise-text-link,a.button.link-cta)::after{
  content:"→";
  display:inline-block;
  margin-left:.45em;
  transition:transform .22s var(--ease-out);
}
:where(a.hero-account-link,a.enterprise-text-link,a.button.link-cta):hover::after{transform:translateX(3px)}

@media(min-width:1101px){
  .hub-platform-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .catalog-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(min-width:761px) and (max-width:1100px){
  .hub-platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .catalog-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:761px){
  .catalog-card-grid:has(>:only-child){grid-template-columns:minmax(0,min(760px,100%))}
  .catalog-card-grid:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:980px){
  .page-hero{display:block;min-height:0;padding:46px 38px}
  .page-hero>span{margin-bottom:12px}
  .page-hero>h1{max-width:18ch}
  .page-hero>p{max-width:var(--content-reading);margin-top:18px;padding:0}
  .page-hero>.hero-actions{justify-content:flex-start;margin-top:24px}
  .guide-side{position:static}
}

@media(max-width:760px){
  .container,.nav-shell{width:min(100% - 32px,var(--content-wide))}
  .page-hero{width:min(100% - 32px,var(--content-wide));margin-top:18px;padding:34px 24px 32px;border-radius:22px}
  .page-hero>span{margin-bottom:10px}
  .page-hero>h1{max-width:18ch;font-size:clamp(2rem,9vw,2.55rem);line-height:1.12}
  .page-hero>p{margin-top:16px;font-size:1rem;line-height:1.7}
  .page-hero>.hero-actions{display:grid;grid-template-columns:1fr;width:100%;gap:10px;margin-top:22px}
  .page-hero>.hero-actions .button{width:100%}
  .billing-period-row{padding-top:20px}
  .page[data-page="pricing"] .plan-grid{padding-top:22px}
  .hub-platform-grid{grid-template-columns:1fr;gap:12px;padding-top:20px;padding-bottom:26px}
  .hub-platform-card{min-height:0;padding:20px}
  .hub-platform-card span{margin-top:4px}
  .catalog-sections{gap:24px;padding-top:20px;padding-bottom:44px}
  .catalog-card-grid{grid-template-columns:1fr}
  .client-catalog-card{padding:20px}
  .client-catalog-card>p{min-height:0}
  .client-catalog-card dl{width:100%}
  .guide-layout{gap:14px;padding-top:18px}
  .guide-side nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .guide-article{padding:26px 22px}
  .guide-section+.guide-section{margin-top:28px;padding-top:24px}
  .faq-grid,.status-board{gap:14px;padding-top:22px;padding-bottom:72px}
  .faq-grid article,.status-board article{min-height:0;padding:25px 22px}
  .hub-status-row,.hub-footer-links{align-items:stretch;padding-bottom:52px}
  .hub-status-row .button,.hub-footer-links .button{width:100%}
}

@media(max-width:420px){
  .guide-side nav{grid-template-columns:1fr}
  .client-catalog-card dl div{align-items:flex-start}
}