/* Home + brand page design system (index.html and brand.html; style.css is the old base underneath).
   Rules this file holds itself to, so later edits keep the same feel:
   - colour: one neutral near-black, off-white text in three steps per ground; no pure white text, no green cast
   - type: Noto Sans SC subset (assets/fonts, built by scripts/build-site-font.py) in 7 sizes; display weight 300;
     Latin labels use the mono stack with wide tracking, Chinese never gets negative tracking
   - space: multiples of 8; components: one button system (pill, 48 / 40 high), one card radius (20)
   - motion: everything eases on cubic-bezier(.2,.8,.2,1); prefers-reduced-motion turns it all off */
@font-face{font-family:'ALTRANCE Sans';src:url(assets/fonts/altrance-sans.woff2) format('woff2');font-weight:200 700;font-display:swap}
:root{
  --font:'ALTRANCE Sans',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --ink:#0A0B0D;--surface:#0A0B0D;--paper:#F5F5F3;--silver:#ECEDEE;
  --fg:#ECEDEE;--fg-2:#A0A5AB;--fg-3:#6F757C;
  --line:rgba(236,237,238,.08);--line-strong:rgba(236,237,238,.18);--line-dark:rgba(10,11,13,.1);
  --fs-display:clamp(72px,7.4vw,112px);--fs-h2:clamp(36px,3.4vw,52px);--fs-h3:clamp(22px,1.9vw,28px);
  --fs-lead:20px;--fs-body:15px;--fs-small:13px;--fs-micro:11px;
  --ease:cubic-bezier(.2,.8,.2,1);
  font-family:var(--font);
}
.light-section,.volume-home dialog,.volume-home .toast{--surface:#F5F5F3;--fg:#0D0F12;--fg-2:#4A5058;--fg-3:#6B7178;--line:rgba(10,11,13,.1);--line-strong:rgba(10,11,13,.2)}
@media(max-width:820px){:root{--fs-display:64px;--fs-h2:36px;--fs-h3:22px;--fs-lead:18px}}
@media(max-width:520px){:root{--fs-display:52px;--fs-h2:32px;--fs-h3:20px;--fs-lead:17px;--fs-body:14px;--fs-small:12px}}

body.volume-home{background:var(--ink);color:var(--fg)}
.volume-home h1,.volume-home h2,.volume-home h3,.volume-home strong,.volume-home dd{font-weight:400;letter-spacing:0}
.dark-section{background:var(--ink)}
.light-section{background:var(--paper);color:var(--fg)}
/* A fixed sheet of film grain over everything: the depth a flat fill lacks. */
.volume-home::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.mono,.kicker{font-family:var(--mono)}
/* p.kicker: style.css has `.download-copy>p:not(...)` at 14px that would otherwise win. */
.kicker,.volume-home p.kicker{font-size:var(--fs-micro);line-height:1.6;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin:0 0 24px}

/* Header: transparent over the hero, frosted once the page scrolls. */
.site-header{position:fixed;left:0;right:0;top:0;min-height:80px;padding:0 max(32px,calc((100vw - 1328px)/2));background:transparent;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
.site-header.is-scrolled{background:rgba(10,11,13,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line)}
.site-header .brand img,.footer-main .brand img{width:136px}
.desktop-nav{gap:40px;font-size:var(--fs-small);letter-spacing:.04em}
.desktop-nav a{color:var(--fg-2);position:relative}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:var(--fg)}
.desktop-nav a::after{content:"";position:absolute;left:50%;bottom:4px;width:3px;height:3px;border-radius:50%;background:currentColor;transform:translateX(-50%) scale(0);transition:transform .3s var(--ease)}
.desktop-nav a:hover::after,.desktop-nav a[aria-current=page]::after{transform:translateX(-50%) scale(1)}
.volume-home .mobile-menu{top:80px;background:rgba(10,11,13,.94);backdrop-filter:blur(18px)}
.volume-home .mobile-menu a{font-size:var(--fs-lead);color:var(--fg)}

/* Buttons: one system. Primary = filled pill, ghost = hairline pill; same heights, same type. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;font-size:var(--fs-small);font-weight:500;letter-spacing:.04em;white-space:nowrap;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,box-shadow .3s var(--ease),transform .35s var(--ease)}
.btn-sm{height:40px;padding:0 18px}
.btn-primary{background:var(--fg);color:var(--surface);border:1px solid var(--fg)}
.btn-primary:hover{box-shadow:0 0 0 6px color-mix(in srgb,var(--fg) 12%,transparent),0 12px 32px rgba(0,0,0,.28)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--fg);background:color-mix(in srgb,var(--fg) 3%,transparent)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--fg) 45%,transparent);background:color-mix(in srgb,var(--fg) 7%,transparent)}
.btn .arrow{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn:hover .arrow.down{transform:translateY(2px)}
.volume-home .text-link,.volume-home .quiet-button{font-size:var(--fs-small);color:var(--fg)}
.volume-home .quiet-button{color:var(--fg-2);border-bottom:1px solid var(--line-strong);padding:0 0 2px}

/* Reveal motion (enabled by home-fx.js adding .fx-ready, so the page still reads without script). */
.fx-ready [data-reveal] .ch{display:inline-block;opacity:0;transform:translateY(.32em);filter:blur(10px);
  transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:calc(var(--i) * 60ms)}
.fx-ready [data-reveal].is-in .ch{opacity:1;transform:none;filter:none}
.fx-ready [data-fade]{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.fx-ready [data-fade].is-in{opacity:1;transform:none}

/* Hero */
.volume-home .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:80px;overflow:hidden;
  background:radial-gradient(120% 70% at 50% -8%,#1B1F25 0%,#0E1014 38%,#0A0B0D 70%)}
.glyph-field{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.volume-home .hero-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:32px;align-items:center;padding-block:48px 112px}
.volume-home .hero-copy{padding:0}
.volume-home .hero h1{font-size:var(--fs-display);font-weight:300;letter-spacing:.04em;line-height:1.05;margin:0;color:var(--fg)}
.hero-statement{font-size:var(--fs-h3);font-weight:300;line-height:1.5;color:var(--fg-2);margin-top:24px;white-space:nowrap}
.volume-home .hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:48px}
.volume-home .hero-object{position:relative;width:100%;max-width:760px;aspect-ratio:79/64;justify-self:end}
.hero-glow{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(168,196,206,.22),rgba(150,180,190,.07) 52%,transparent 74%);animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.06);opacity:.8}}
.volume-home .logo-stage{position:absolute;inset:9% 11%;height:auto;width:auto}
.hero-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:transform .8s var(--ease)}
.hero-lines path,.tree-lines path{fill:none;stroke:var(--fg);stroke-width:1;opacity:.16;transition:opacity .4s,stroke-dashoffset 1.6s var(--ease)}
.hero-lines path.is-active,.tree-lines path.is-active{opacity:.7}
.hero-lines circle,.tree-lines circle{fill:var(--fg);filter:drop-shadow(0 0 4px rgba(236,237,238,.9))}
/* The node layer covers the mark; only the pills take the pointer so the canvas can be dragged. */
.hero-nodes{position:absolute;inset:0;list-style:none;margin:0;padding:0;pointer-events:none;transition:transform .8s var(--ease)}
.hero-nodes li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);pointer-events:auto}
.stage-hint{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;color:var(--fg-3);white-space:nowrap;pointer-events:none;transition:opacity .6s}
.logo-stage.is-touched~.stage-hint{opacity:0}
.node{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 9px;border-radius:999px;border:1px solid var(--line);background:rgba(16,18,22,.56);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--fg-2);font-size:var(--fs-small);white-space:nowrap;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.node-dot{width:7px;height:7px;border-radius:50%;background:var(--fg);box-shadow:0 0 0 4px rgba(236,237,238,.07),0 0 14px rgba(236,237,238,.7)}
.node-label .mono{font-size:var(--fs-micro);letter-spacing:.12em;color:var(--fg-3);margin-right:8px}
.node:hover,.hero-nodes .is-active .node{color:var(--fg);border-color:var(--line-strong);background:rgba(24,27,32,.8)}
.node-card{position:absolute;left:50%;top:calc(100% + 10px);width:232px;margin:0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(14,16,20,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:var(--fs-small);line-height:1.7;color:var(--fg-2);opacity:0;pointer-events:none;transform:translate(-50%,6px);transition:opacity .3s,transform .4s var(--ease)}
.hero-nodes .up .node-card{top:auto;bottom:calc(100% + 10px)}
.hero-nodes .start .node-card{left:0;transform:translate(0,6px)}
.hero-nodes .end .node-card{left:auto;right:0;transform:translate(0,6px)}
.hero-nodes .is-active .node-card{opacity:1;transform:translate(-50%,0)}
.hero-nodes .start.is-active .node-card,.hero-nodes .end.is-active .node-card{transform:none}
.scroll-cue{position:absolute;left:50%;bottom:32px;z-index:1;width:1px;height:48px;transform:translateX(-50%);background:var(--line-strong);overflow:hidden}
.scroll-cue span{position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--fg);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{to{top:100%}}

/* Sections */
.volume-home .about,.business,.platform,.brand-teaser,.volume-home .download,.volume-home .contact{padding-block:128px}
.section-head{margin-bottom:64px}
.section-head h2,.volume-home .section-title,.teaser-copy h2,.volume-home .download h2,.volume-home .contact h2{font-size:var(--fs-h2);font-weight:300;line-height:1.3;letter-spacing:.02em;color:var(--fg)}
.section-sub{font-size:var(--fs-body);line-height:1.9;color:var(--fg-2);margin-top:16px}
/* Adjacent light sections meet at fractional heights; at 1.25-1.5x scaling a hairline of the dark page showed between them. */
.volume-home .light-section+.light-section{box-shadow:0 -1px 0 var(--paper)}

.volume-home .section-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:96px}
.volume-home .about-copy .large-copy+.large-copy{margin-top:16px}
.volume-home .about-copy .large-copy{font-size:var(--fs-lead);font-weight:300;line-height:1.9;letter-spacing:0;color:var(--fg)}
.volume-home .company-facts{margin:48px 0 0;border-top:1px solid var(--line)}
.volume-home .company-facts>div{display:grid;grid-template-columns:96px 1fr;gap:24px;padding-block:20px;border-bottom:1px solid var(--line);font-size:var(--fs-small)}
.volume-home .company-facts dt{color:var(--fg-3)}
.volume-home .company-facts dd{margin:0;color:var(--fg)}

/* Business: three cards, cursor-lit, slight tilt. */
.panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;perspective:1200px}
.panel{position:relative;min-height:448px;padding:32px;border-radius:20px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,rgba(236,237,238,.04),rgba(236,237,238,.01));transform-style:preserve-3d;transition:transform .6s var(--ease),border-color .4s}
.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(480px circle at var(--mx,50%) var(--my,0%),rgba(236,237,238,.09),transparent 60%);opacity:0;transition:opacity .4s}
.panel:hover{border-color:var(--line-strong)}
.panel:hover::before{opacity:1}
.panel>*{position:relative}
.panel-index{display:block;font-size:var(--fs-micro);letter-spacing:.16em;color:var(--fg-3)}
.panel-tag{position:absolute!important;top:28px;right:28px;padding:3px 10px;border-radius:999px;border:1px solid var(--line-strong);font-size:var(--fs-micro);color:var(--fg-2);letter-spacing:.06em}
.panel h3{font-size:var(--fs-h2);font-weight:300;line-height:1.2;margin-top:88px;color:var(--fg)}
.panel .panel-role{font-size:var(--fs-small);color:var(--fg);margin-top:8px;letter-spacing:.04em}
.panel p{font-size:var(--fs-body);line-height:1.9;color:var(--fg-2);margin-top:16px;max-width:300px}
.panel-link{display:inline-flex;align-items:center;gap:8px;margin-top:32px;font-size:var(--fs-small);color:var(--fg);letter-spacing:.04em}
.panel-link .arrow{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .35s var(--ease)}
.panel-link:hover .arrow{transform:translateX(3px)}
.panel-link.quiet{color:var(--fg-3)}
.panel-art{position:absolute!important;right:-6%;bottom:-4%;width:96%;height:60%;opacity:.7;pointer-events:none;-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent);transition:opacity .5s}
.panel:hover .panel-art{opacity:1}
/* Filled by particles.js: vortex / flow / patrol canvases. */
.panel-art canvas{display:block;width:100%;height:100%}

/* Platform tree: one core, lines fanning out to six capabilities. */
.tree{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;min-height:560px}
.tree-core{position:relative;z-index:1;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:32px}
.core-orb{position:relative;width:128px;height:128px;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#fff 0,#DCE8EC 7%,rgba(168,196,206,.62) 20%,rgba(96,122,128,.22) 46%,transparent 70%);
  box-shadow:0 0 120px 30px rgba(150,180,190,.16);animation:breathe 7s ease-in-out infinite}
.core-orb::before,.core-orb::after{content:"";position:absolute;inset:-36px;border-radius:50%;border:1px dashed rgba(236,237,238,.14);animation:spin 40s linear infinite}
.core-orb::after{inset:-72px;border-style:solid;border-color:rgba(236,237,238,.06);animation-duration:70s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.core-label{font-size:var(--fs-micro);letter-spacing:.2em;color:var(--fg-3)}
.tree-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tree-list{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tree-list li{display:grid;grid-template-columns:104px 112px minmax(0,1fr);align-items:baseline;gap:16px;padding:20px 24px;border-radius:14px;border:1px solid transparent;transition:border-color .3s,background .3s}
.tree-list li.is-active{border-color:var(--line);background:rgba(236,237,238,.03)}
.tree-list .mono{font-size:var(--fs-micro);letter-spacing:.14em;color:var(--fg-3)}
.tree-list strong{font-size:var(--fs-body);font-weight:500;color:var(--fg)}
.tree-list li>span:last-child{font-size:var(--fs-small);line-height:1.7;color:var(--fg-2)}

/* Brand teaser: the mark drawn in characters. */
.teaser-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.glyph-mark{position:relative;inset:auto;aspect-ratio:1/1;width:100%;max-width:600px;pointer-events:auto;cursor:crosshair}
.teaser-copy p:not(.kicker){font-size:var(--fs-body);line-height:1.9;color:var(--fg-2);margin:24px 0 40px;max-width:400px}

/* Download */
.volume-home .download{border:0}
.volume-home .download-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:96px;align-items:start}
.volume-home .download-copy>p:not(.kicker){font-size:var(--fs-body);line-height:1.9;color:var(--fg-2);margin-top:24px}
.volume-home .qr-area{display:flex;align-items:center;gap:24px;margin-top:48px;padding:0}
.volume-home .qr-area img{width:120px;height:120px;border-radius:12px;padding:8px;background:#fff}
/* 群浪卡片里第二个链接（扫码打开小程序，跳到下载区的小程序码）：和「访问群浪」上下排，留一点间距 */
.panel-link-mini{display:flex;width:fit-content;margin-top:14px}
/* 小程序码紧跟安卓下载码，间距收一点，两块读作同一组「扫码」 */
.volume-home .qr-area-mini{margin-top:28px}
.volume-home .qr-area-mini p{font-size:var(--fs-small);line-height:1.7;color:var(--fg-2);margin:0;max-width:240px}
.volume-home .qr-area strong{display:block;font-size:var(--fs-small);color:var(--fg);margin-bottom:12px}
.platforms{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.platforms li{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:28px 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease)}
.platforms li:hover{padding-inline:12px}
.platforms strong{display:flex;align-items:center;gap:12px;font-size:var(--fs-h3);font-weight:300;color:var(--fg)}
.platforms li span{display:block;font-size:var(--fs-small);line-height:1.7;color:var(--fg-2);margin-top:8px;max-width:440px}
.platforms .tag{display:inline-block;margin:0;padding:3px 10px;border-radius:999px;border:1px solid var(--line-strong);font-size:var(--fs-micro);color:var(--fg-2);letter-spacing:.06em}

/* Contact */
.volume-home .contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:96px;align-items:end}
.contact-email{display:inline-block;max-width:100%;font-size:var(--fs-h2);font-weight:300;line-height:1.3;color:var(--fg);overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.contact-email:hover{background-size:100% 1px}
.volume-home .contact-actions{margin-top:24px}
.contact-note{font-size:var(--fs-small);color:var(--fg-3);margin-top:24px}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding-top:64px}
.volume-home .footer-main{padding-bottom:32px}
.volume-home .footer-bottom>div{gap:24px}
.volume-home .footer-main>div{gap:32px;font-size:var(--fs-small);color:var(--fg-2)}
.volume-home .footer-main a:hover{color:var(--fg)}
.volume-home .footer-bottom{font-size:var(--fs-micro);color:var(--fg-3);border-top-color:var(--line)}

/* Dialog and toast */
.volume-home dialog{background:var(--surface);border-radius:20px}
.volume-home .dialog-body h2{font-size:var(--fs-h3);color:var(--fg)}
.volume-home .dialog-body>p{font-size:var(--fs-body);color:var(--fg-2)}
.volume-home .dialog-close{font-size:var(--fs-small);color:var(--fg-3)}
.volume-home .toast{font-size:var(--fs-small);color:var(--fg);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:12px 20px}

@media(max-width:1100px){
  .desktop-nav{gap:28px}
  .volume-home .hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tree-list li{grid-template-columns:96px minmax(0,1fr)}
  .tree-list li>span:last-child{grid-column:2}
}
@media(max-width:820px){
  .site-header{min-height:72px}
  .site-header .brand img,.footer-main .brand img{width:120px}
  .volume-home .mobile-menu{top:72px}
  .volume-home .hero{padding-top:72px;min-height:auto}
  .volume-home .hero-layout{grid-template-columns:1fr;gap:16px;padding-block:48px 80px}
  .volume-home .hero-object{max-width:560px;justify-self:center}
  .hero-lines,.hero-nodes{display:none}
  .scroll-cue{display:none}
  .volume-home .about,.business,.platform,.brand-teaser,.volume-home .download,.volume-home .contact{padding-block:80px}
  .section-head{margin-bottom:40px}
  .volume-home .section-grid,.volume-home .download-grid,.volume-home .contact-grid,.teaser-grid{grid-template-columns:1fr;gap:40px}
  .panels{grid-template-columns:1fr}
  .panel{min-height:320px}
  .panel h3{margin-top:56px}
  .tree{grid-template-columns:1fr;min-height:0;gap:40px}
  .tree-lines{display:none}
}
@media(max-width:520px){
  .volume-home .hero-links{gap:12px;margin-top:32px}
  .volume-home .about,.business,.platform,.brand-teaser,.volume-home .download,.volume-home .contact{padding-block:64px}
  .panel{padding:24px;min-height:280px}
  .tree-list li{grid-template-columns:1fr;gap:6px;padding:16px}
  .tree-list li>span:last-child{grid-column:1}
  .platforms li{flex-direction:column;align-items:flex-start;gap:16px}
  .volume-home .company-facts>div{grid-template-columns:64px 1fr;gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .hero-glow,.core-orb,.core-orb::before,.core-orb::after,.scroll-cue span{animation:none}
  .fx-ready [data-reveal] .ch,.fx-ready [data-fade]{opacity:1;transform:none;filter:none;transition:none}
}