:root{
  --bg:#050506; --bg2:#0B0B0D;
  --ink:#F5F5F7; --ink2:#C7C9CE; --mute:#7D8087; --faint:#4A4C52;
  --line:rgba(245,245,247,.08);
  --tc:"Noto Sans TC",-apple-system,"PingFang TC",sans-serif;
  --en:"General Sans","Satoshi",sans-serif;
  --disp:"Clash Display",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --accent:#F5F5F7; --accent-rgb:245,245,247;
}
/* 冰青 accent:只給「活的信號」;去掉 html 上的 data-accent 即整站回退純黑白 */
html[data-accent="ion"]{--accent:#67E8F9; --accent-rgb:103,232,249}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:var(--tc);
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
.wrap{max-width:1280px; margin:0 auto; padding:0 48px}

/* ── i18n：純中 / 純英 兩版 ─────────────── */
html[data-lang="zh"] .en{display:none!important}
html[data-lang="en"] .zh{display:none!important}
.en{font-family:var(--en)}
h2 .en,.tt .en{font-family:var(--disp)}
.mlab .en,.mlab .zh{font-family:var(--mono)}

/* ── nav ─────────────────────────────── */
nav{position:fixed; top:0; left:0; right:0; z-index:40;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .45s, border-color .45s}
nav.scrolled{background:rgba(5,5,6,.6); backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid rgba(245,245,247,.05)}
.nav-inner{max-width:1280px; margin:0 auto; padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.logo .mark{width:20px; height:20px; flex:0 0 auto}
.mark .core{fill:var(--accent)}
.logo .wm{font-family:var(--disp); font-size:15px; font-weight:600; letter-spacing:.22em; line-height:1}
.logo .co{font-size:12px; font-weight:400; letter-spacing:.3em; color:var(--mute); line-height:1}
.logo .co.en{font-family:var(--mono); font-size:10px; letter-spacing:.24em}
.nav-right{display:flex; gap:14px; align-items:center}
#langBtn{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink2);
  background:none; border:1px solid rgba(245,245,247,.16); border-radius:100px;
  padding:6px 14px; cursor:pointer; transition:.25s}
#langBtn:hover{border-color:rgba(245,245,247,.4); color:var(--ink)}
.nav-cta{font-size:12.5px; padding:8px 18px; border-radius:100px; color:var(--bg); text-decoration:none;
  background:var(--ink); transition:.25s}
.nav-cta:hover{opacity:.8}

/* ── hero ─────────────────────────────── */
#hero{position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center}
#scene{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; touch-action:pan-y}
.rim-tint{position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:color;
  background:radial-gradient(circle 46vmin at 50% 46%,
    transparent 56%,
    rgba(var(--accent-rgb),.32) 76%,
    rgba(var(--accent-rgb),.58) 92%,
    transparent 103%)}
.hero-copy{position:relative; z-index:2; pointer-events:none; padding:0 24px}
.hero-copy::before{content:""; position:absolute; inset:-14% -20%; z-index:-1;
  background:radial-gradient(ellipse 60% 58% at 50% 46%, rgba(5,5,6,.82), transparent 76%)}
h1 .wm-big{display:block; font-family:var(--disp); font-weight:500; font-size:clamp(72px,11.5vw,168px);
  line-height:.98;
  background-image:
    linear-gradient(112deg, transparent 40%, rgba(var(--accent-rgb),.5) 50%, transparent 60%),
    linear-gradient(180deg,#FFFFFF 22%,#B7C4CA 68%,#84909A 100%);
  background-size:260% 100%, 100% 100%;
  background-position:-90% 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 28px rgba(var(--accent-rgb),.1), 0 0 90px rgba(var(--accent-rgb),.13);
  opacity:0;
  animation:h1en 1.4s .3s cubic-bezier(.16,.6,.18,1) forwards,
            wmGlint 9s ease-in-out 2.4s infinite}
@keyframes wmGlint{
  0%, 52%{background-position:-90% 0, 0 0}
  100%{background-position:190% 0, 0 0}}
@keyframes h1en{
  from{opacity:0; transform:translateY(28px); letter-spacing:.085em}
  to{opacity:1; transform:translateY(0); letter-spacing:.015em}}
.lead{margin-top:28px; font-size:17px; font-weight:300; line-height:1.9; color:var(--ink);
  text-shadow:0 1px 14px rgba(5,5,6,.95);
  opacity:0; animation:rise 1s .9s cubic-bezier(.2,.6,.2,1) forwards}
.lead .en{font-size:15.5px; letter-spacing:.02em}
.hero-actions{margin-top:42px; display:flex; gap:14px; justify-content:center; pointer-events:auto;
  opacity:0; animation:rise 1s 1.05s cubic-bezier(.2,.6,.2,1) forwards}
.btn{font-size:14px; text-decoration:none; padding:13px 28px; border-radius:100px; transition:.25s; font-weight:500}
.btn-p{background:var(--ink); color:var(--bg)}
.btn-p:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(var(--accent-rgb),.18)}
.btn-g{color:var(--ink); border:1px solid rgba(245,245,247,.18); background:rgba(5,5,6,.4)}
.btn-g:hover{border-color:rgba(245,245,247,.4)}
.scroll-cue{position:absolute; z-index:2; bottom:7vh; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none;
  opacity:0; animation:fade 1.4s 1.6s forwards}
.scroll-cue span{font-family:var(--mono); font-size:9.5px; letter-spacing:.3em; color:var(--faint)}
.scroll-cue i{display:block; width:1px; height:30px; background:linear-gradient(180deg,rgba(var(--accent-rgb),.85),transparent);
  animation:drip 2.2s 1.7s ease-in-out infinite}

/* ── 通用區塊 ─────────────────────────── */
section{position:relative}
.sec{padding:140px 0 150px; border-top:1px solid var(--line)}
.sec>.wrap{position:relative; z-index:1}
.sec::before{content:""; position:absolute; inset:0; pointer-events:none}
.mlab{font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--faint); text-transform:uppercase}
h2{font-size:clamp(30px,3.6vw,48px); font-weight:500; letter-spacing:.02em; line-height:1.25}
h2 .zh{font-weight:400}
.sec-sub{margin-top:18px; font-size:15.5px; font-weight:300; line-height:2; color:var(--mute); max-width:34em}
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1)}
.rv.on{opacity:1; transform:none}

/* ── 業務：底紋 = 工程點陣 ─────────── */
#business::before{
  background-image:radial-gradient(rgba(245,245,247,.05) 1px, transparent 1.3px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 40%, #000 18%, transparent 76%);
  mask-image:radial-gradient(ellipse 75% 60% at 50% 40%, #000 18%, transparent 76%)}

/* ── 樞紐圖：光束對衝 ─────────────────── */
.hub-diagram{position:relative; margin-top:74px; height:480px}
.hub-diagram::before{content:""; position:absolute; left:4%; right:4%; top:50%; height:220px;
  transform:translateY(-50%); pointer-events:none;
  background:radial-gradient(ellipse 54% 56% at 50% 50%, rgba(245,245,247,.05), transparent 74%)}
#beams{position:absolute; inset:0; width:100%; height:100%; display:block}
.side-cap{position:absolute; top:-6px; font-family:var(--mono); font-size:10px; letter-spacing:.26em;
  color:var(--faint); text-transform:uppercase}
.side-cap.zh{font-family:var(--tc); letter-spacing:.3em; font-weight:300}
.side-cap.l{left:0}
.side-cap.r{right:0; text-align:right}
.ncol{position:absolute; top:50%; transform:translateY(-50%); width:240px;
  display:flex; flex-direction:column; gap:40px; z-index:2}
.ncol.l{left:0; align-items:flex-end}
.ncol.r{right:0; align-items:flex-start}
.nrow{display:flex; align-items:center; gap:16px}
.ncol.l .nrow{text-align:right}
.ncol.r .nrow{text-align:left}
.ntxt .nl{font-size:15.5px; font-weight:400; letter-spacing:.14em; color:var(--ink2)}
.ntxt .nl .en{font-family:var(--en); font-weight:500; letter-spacing:.05em}
.ntxt .ns{margin-top:6px; font-size:11px; font-weight:300; letter-spacing:.08em; color:var(--faint)}
.ntxt .ns .en{font-family:var(--en); letter-spacing:.03em}
.ncol.r .nl{font-family:var(--en); font-weight:500; letter-spacing:.06em}
.ncol.r .ns{font-family:var(--en); letter-spacing:.05em}
.nmark{position:relative; width:36px; height:1px; flex:0 0 auto}
.ncol.l .nmark{background:linear-gradient(90deg, transparent, rgba(245,245,247,.45))}
.ncol.r .nmark{background:linear-gradient(270deg, transparent, rgba(245,245,247,.45))}
.nmark::before{content:""; position:absolute; top:50%; width:5px; height:5px; border-radius:50%;
  background:var(--ink2); transform:translateY(-50%); box-shadow:0 0 8px rgba(245,245,247,.5)}
.ncol.l .nmark::before{right:-2px}
.ncol.r .nmark::before{left:-2px}
.hub-core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:24%; aspect-ratio:1; pointer-events:none; z-index:3}
.hub-core::before{content:""; position:absolute; inset:12%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.08), transparent 62%); border-radius:50%}
.hub-core canvas{position:absolute; inset:0; width:100%; height:100%}
.hub-core .lab{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:500; font-size:clamp(12px,1.35vw,16px);
  letter-spacing:.32em; text-indent:.32em; color:var(--ink);
  text-shadow:0 0 12px rgba(5,5,6,.95), 0 0 26px rgba(5,5,6,.85)}
.hub-mobile{display:none}
@media(max-width:860px){
  .hub-diagram{display:none}
  .hub-mobile{display:flex; flex-direction:column; align-items:center; gap:0; margin-top:56px}
  .hm-box{font-size:12.5px; letter-spacing:.26em; color:var(--mute); font-weight:300; text-align:center}
  .hm-line{width:1px; height:44px; background:linear-gradient(180deg,rgba(245,245,247,.05),rgba(245,245,247,.3),rgba(245,245,247,.05));
    position:relative; overflow:hidden}
  .hm-line::after{content:""; position:absolute; left:0; top:-8px; width:1px; height:8px; background:var(--accent);
    animation:hmpulse 2.4s linear infinite}
  .hm-hub{position:relative; width:150px; height:150px}
  .hm-hub::before{content:""; position:absolute; inset:14%;
    background:radial-gradient(circle, rgba(245,245,247,.1), transparent 62%); border-radius:50%}
  .hm-hub canvas{position:absolute; inset:0; width:100%; height:100%}
  .hm-hub .lab{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--disp); font-weight:500; font-size:12px; letter-spacing:.28em; text-indent:.28em;
    color:var(--ink); text-shadow:0 0 12px rgba(5,5,6,.95), 0 0 26px rgba(5,5,6,.85)}
}
@keyframes hmpulse{0%{top:-8px}100%{top:44px}}

/* ── 五種形態：層疊卡組 ───────────────── */
.forms-head{margin-top:110px; display:flex; justify-content:space-between; align-items:center}
.deck-ctl{display:flex; align-items:center; gap:12px}
.deck-btn{width:38px; height:38px; border-radius:50%; border:1px solid rgba(245,245,247,.18);
  background:none; color:var(--ink2); font-family:var(--mono); font-size:15px; cursor:pointer; transition:.25s;
  display:flex; align-items:center; justify-content:center}
.deck-btn:hover{border-color:rgba(245,245,247,.5); color:var(--ink)}
.deck-zone{margin-top:34px; display:grid; grid-template-columns:minmax(0,600px) 1fr; gap:72px; align-items:center;
  perspective:1200px}
.deck{position:relative; height:408px; touch-action:pan-y;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d;
  transition:transform .25s ease-out}
.deck .card{position:absolute; left:0; top:0; right:84px; bottom:60px;
  padding:32px 34px 28px; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(245,245,247,.13); border-radius:2px;
  background:linear-gradient(180deg,#0D0D10,#070708);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transition:transform .62s cubic-bezier(.2,.6,.2,1), opacity .62s cubic-bezier(.2,.6,.2,1);
  will-change:transform,opacity}
.card .cimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:grayscale(1) brightness(.8) contrast(1.06); opacity:.92; transform:var(--imgT,none)}
.card[data-slot="0"] .cimg{animation:kb 16s ease-in-out infinite alternate}
@keyframes kb{from{transform:var(--imgT,none) scale(1)}to{transform:var(--imgT,none) scale(1.07)}}
.card .cscrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(5,5,6,.18), rgba(5,5,6,.4) 42%, rgba(5,5,6,.86) 74%, rgba(5,5,6,.96))}
.card .tag,.card h3,.card p{position:relative; z-index:2}
.deck .card::before{content:""; position:absolute; top:-1px; left:14px; right:14px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,245,247,.32), transparent)}
.card[data-slot="0"]{transform:translateZ(0); opacity:1; z-index:5;
  box-shadow:0 30px 80px rgba(0,0,0,.66), 0 0 44px rgba(245,245,247,.045)}
.card[data-slot="1"]{transform:translate3d(28px,20px,-42px) scale(.985); opacity:.8; z-index:4}
.card[data-slot="2"]{transform:translate3d(56px,40px,-84px) scale(.97); opacity:.5; z-index:3}
.card[data-slot="3"]{transform:translate3d(84px,60px,-126px) scale(.955); opacity:.24; z-index:2}
.card[data-slot="h"]{transform:translate3d(84px,60px,-126px) scale(.955); opacity:0; z-index:1; pointer-events:none}
.card.cycling{animation:deckOut .55s cubic-bezier(.4,.1,.6,1); z-index:6}
@keyframes deckOut{from{transform:none; opacity:1}to{transform:translateX(-13%) rotate(-2.5deg); opacity:0}}
.card.entering{animation:deckIn .6s cubic-bezier(.2,.6,.2,1); z-index:6}
@keyframes deckIn{from{transform:translateX(-13%) rotate(-2.5deg); opacity:0}to{transform:none; opacity:1}}
.card .tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; color:var(--faint); text-transform:uppercase}
.card h3{margin-top:auto; font-size:clamp(20px,1.9vw,25px); font-weight:500; letter-spacing:.03em}
.card h3 .zh{font-weight:400}
.card p{margin-top:12px; font-size:13.5px; line-height:1.85; color:var(--mute); font-weight:300; max-width:30em}
.deck-prog{height:1px; background:var(--line); margin-top:22px; overflow:hidden}
.deck-prog i{display:block; height:100%; background:rgba(var(--accent-rgb),.8); transform:scaleX(0); transform-origin:left}
.deck-prog.run i{animation:prog 2.75s linear infinite}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.deck-list{display:flex; flex-direction:column}
.dl{position:relative; text-align:left; background:none; border:0; border-bottom:1px solid var(--line);
  padding:19px 2px 18px 26px; cursor:pointer; transition:.3s; color:var(--mute)}
.dl:first-child{border-top:1px solid var(--line)}
.dl::before{content:""; position:absolute; left:0; top:50%; width:14px; height:1px;
  background:var(--accent); opacity:0; transform:scaleX(.4); transform-origin:left; transition:.3s}
.dl .t{font-size:15.5px; font-weight:400; letter-spacing:.04em; display:flex; justify-content:space-between; align-items:baseline; gap:18px}
.dl .t .en{font-family:var(--en)}
.dl .m{font-family:var(--mono); font-size:9px; letter-spacing:.22em; color:var(--faint)}
.dl .d{display:block; overflow:hidden; max-height:0; opacity:0; margin-top:0;
  font-size:12.5px; font-weight:300; line-height:1.7; color:var(--mute);
  transition:max-height .5s cubic-bezier(.2,.6,.2,1), opacity .45s, margin-top .5s cubic-bezier(.2,.6,.2,1)}
.dl.act .d{max-height:48px; opacity:1; margin-top:9px}
.dl:hover{color:var(--ink2)}
.dl.act{color:var(--ink)}
.dl.act::before{opacity:1; transform:scaleX(1)}
@media(max-width:1080px){.deck-zone{grid-template-columns:1fr; gap:40px} .deck-list{max-width:520px}}
@media(max-width:760px){
  .deck{height:372px}
  .deck .card{right:52px; bottom:44px; padding:26px 24px 22px}
  .card[data-slot="1"]{transform:translate3d(18px,14px,-42px) scale(.98)}
  .card[data-slot="2"]{transform:translate3d(36px,28px,-84px) scale(.96)}
  .card[data-slot="3"]{transform:translate3d(52px,42px,-126px) scale(.94); opacity:.18}
  .card[data-slot="h"]{transform:translate3d(52px,42px,-126px) scale(.94)}
  .deck-list{display:none}
}

/* ── 市場認知 ─────────────────────────── */
#market::before{
  background:
    radial-gradient(ellipse 42% 36% at 84% 4%, rgba(245,245,247,.05), transparent 70%),
    repeating-linear-gradient(90deg, rgba(245,245,247,.025) 0 1px, transparent 1px 190px)}
#market .grid{display:grid; grid-template-columns:1fr 1.7fr; gap:80px; align-items:start}
.thoughts{padding-top:8px}
.thought{max-width:32em; padding:52px 0 0}
.thought:first-child{padding-top:4px}
.thought:nth-child(2){margin-left:11%}
.thought:nth-child(3){margin-left:22%}
.thought:nth-child(4){margin-left:33%}
.thought .tick{width:26px; height:1px; background:rgba(245,245,247,.45); margin-bottom:20px}
.tt{font-size:clamp(21px,2.4vw,31px); font-weight:500; letter-spacing:.02em; line-height:1.5}
.tt .zh{font-weight:400}
.thought p{margin-top:12px; font-size:14px; font-weight:300; line-height:1.95; color:var(--mute)}
@media(max-width:980px){
  #market .grid{grid-template-columns:1fr; gap:36px}
  .thought:nth-child(2){margin-left:6%}
  .thought:nth-child(3){margin-left:12%}
  .thought:nth-child(4){margin-left:18%}
}

/* ── 願景 ─────────────────────────────── */
#vision{min-height:86vh; display:flex; align-items:center; text-align:center; overflow:hidden}
#vision::before{
  background:
    radial-gradient(ellipse 46% 38% at 50% 52%, rgba(245,245,247,.06), transparent 70%),
    repeating-radial-gradient(circle at 50% 55%, rgba(245,245,247,.022) 0 1px, transparent 1px 128px)}
.vision-t{font-size:clamp(38px,5.6vw,80px); font-weight:400; letter-spacing:.02em; line-height:1.3}
.vision-t .en{font-family:var(--disp); font-weight:500; letter-spacing:.015em}
#vision p{margin:34px auto 0; font-size:15.5px; font-weight:300; line-height:2.1; color:var(--mute); max-width:36em}

/* ── 理念 ─────────────────────────────── */
#principles{background:linear-gradient(180deg,#08080A 0%,var(--bg) 66%)}
#principles::before{background:radial-gradient(ellipse 50% 42% at 14% 0%, rgba(245,245,247,.045), transparent 72%)}
.prin{margin-top:64px; border-top:1px solid var(--line)}
.prin-row{display:grid; grid-template-columns:1.1fr 1.5fr; gap:28px; align-items:baseline;
  padding:38px 2px 36px; border-bottom:1px solid var(--line)}
.prin-row h3{font-size:20px; font-weight:500; letter-spacing:.03em}
.prin-row h3 .zh{font-weight:400}
.prin-row p{font-size:14px; font-weight:300; line-height:1.9; color:var(--mute)}
@media(max-width:860px){.prin-row{grid-template-columns:1fr; gap:8px}}

/* ── 路線圖 ───────────────────────────── */
#roadmap{overflow:hidden}
#roadmap::before{background:linear-gradient(0deg, rgba(245,245,247,.05), transparent 30%)}
.rail-wrap{position:relative; height:430px; margin-top:80px}
.rail{position:absolute; left:0; right:-48px; top:50%; height:1px;
  background:linear-gradient(90deg,
    rgba(245,245,247,.85), rgba(245,245,247,.6) 40%,
    rgba(245,245,247,.14) 62%, rgba(245,245,247,.14));
  -webkit-mask:linear-gradient(90deg,#000 88%,transparent);
  mask:linear-gradient(90deg,#000 88%,transparent)}
.ms{position:absolute; left:var(--x); top:50%; width:262px}
.ms .dot{position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%; background:var(--bg); border:1px solid var(--mute)}
.ms.done .dot{background:var(--ink); border-color:var(--ink)}
.ms.now .dot{background:var(--accent); border-color:var(--accent); box-shadow:0 0 16px rgba(var(--accent-rgb),.6)}
.ms.now .dot::after{content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.4); animation:ping 2.8s ease-out infinite}
.ms .stem{position:absolute; left:-.5px; width:1px; height:22px}
.ms.up .stem{bottom:6px; background:linear-gradient(0deg,rgba(245,245,247,.38),transparent)}
.ms.dn .stem{top:6px; background:linear-gradient(180deg,rgba(245,245,247,.38),transparent)}
.ms .txt{position:absolute; left:-6px; width:100%}
.ms.up .txt{bottom:34px}
.ms.dn .txt{top:34px}
.ms .chip{font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--faint); text-transform:uppercase}
.ms.now .chip,.ms.done .chip{color:var(--ink2)}
.ms h3{margin-top:10px; font-size:17px; font-weight:500; letter-spacing:.03em; line-height:1.55}
.ms h3 .zh{font-weight:400}
.ms p{margin-top:7px; font-size:13px; font-weight:300; line-height:1.85; color:var(--mute)}
@media(max-width:860px){
  .rail-wrap{height:auto; margin-top:64px; border-left:1px solid rgba(245,245,247,.16); margin-left:4px}
  .rail{display:none}
  .ms{position:relative; left:auto!important; top:auto; width:auto; padding:0 0 44px 30px}
  .ms .stem{display:none}
  .ms .dot{left:0; top:5px; transform:translate(-50%,0)}
  .ms .txt{position:static}
}
@keyframes ping{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.7);opacity:0}}

/* ── footer ──────────────────────────── */
footer{border-top:1px solid var(--line); padding:80px 0 56px}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:44px}
.foot-brand .wm{font-family:var(--disp); font-size:22px; font-weight:600; letter-spacing:.18em; line-height:1;
  display:flex; align-items:center; gap:13px}
.foot-brand .mark{width:25px; height:25px}
.foot-brand .legal{margin-top:14px; font-size:13px; font-weight:300; color:var(--mute)}
.foot-brand .legal small{display:block; font-family:var(--mono); font-size:10px; color:var(--faint); margin-top:8px; letter-spacing:.14em}
.foot-contact .h{font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--faint); text-transform:uppercase}
.foot-contact a{display:inline-block; margin-top:14px; font-family:var(--en); font-size:17px; color:var(--ink2);
  text-decoration:none; border-bottom:1px solid rgba(245,245,247,.2); padding-bottom:3px; transition:.25s}
.foot-contact a:hover{color:var(--ink); border-color:rgba(245,245,247,.55)}
.foot-bot{margin-top:72px; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px;
  border-top:1px solid var(--line); padding-top:26px}
.foot-bot span{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--faint)}

#grain{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade{to{opacity:1}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion: reduce){
  h1 .wm-big,.lead,.hero-actions,.scroll-cue{animation:none;opacity:1}
  .scroll-cue i,.hm-line::after,.ms.now .dot::after{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .card.entering{animation:none}
  .card[data-slot="0"] .cimg{animation:none}
  .deck-prog.run i{animation:none}
}
@media(max-width:760px){
  .wrap{padding:0 24px}
  .nav-inner{padding:16px 24px}
  .logo{gap:9px}
  .logo .co{font-size:11px; letter-spacing:.2em}
  .sec{padding:100px 0 110px}
  #vision{min-height:auto}
  .lead{font-size:15px}
  .forms-head{margin-top:80px}
}