/* ============ font: only the mono is self-hosted (JetBrains Mono, OFL, Latin + Cyrillic subset); CJK stays on system fonts ============ */
@font-face{font-family:"JetBrains Mono";src:url(../fonts/JetBrainsMono-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ============ tokens: one ground, one ink, one accent ============ */
:root{
  color-scheme:light;
  --lime:#C8F03C;--black:#0B0F0E;--ice:#DDE3E0;
  /* page (light) */
  --bg:#DDE3E0;--fg:#0B0F0E;--mu:#4C5652;--ln:rgba(11,15,14,.16);--panel:#D0D8D4;--card:#EBEFED;--field:#F6F8F7;
  /* ink sections */
  --ink-bg:#0B0F0E;--ink-fg:#DDE3E0;--ink-mu:#98A39F;--ink-ln:rgba(221,227,224,.14);--ink-panel:#161D1B;
  /* the floating bar and its menus stay dark in both themes */
  --bar:#0B0F0E;--bar-ln:#323B38;--bar-fg:#C9D0CD;
  --wm-c:#000;--wm-o:.12;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans JP","Noto Sans KR",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;
  --pad:clamp(88px,10vw,152px);--r:12px;--maxw:1760px;--gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B0F0E;--fg:#DDE3E0;--mu:#98A39F;--ln:rgba(221,227,224,.14);--panel:#161D1B;--card:#131917;--field:#0B0F0E;
  --ink-bg:#131917;--ink-panel:#1B2321;
  --bar:#1A211F;--bar-ln:#38423F;
  --wm-c:#fff;--wm-o:.07;
}

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,select,input,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
p,dl,dd,figure{margin:0}
ol,ul{list-style:none;margin:0;padding:0}
:lang(zh) :is(h1,h2,h3,.h2,.h3),:lang(ko) :is(h1,h2,h3,.h2,.h3){word-break:keep-all;overflow-wrap:anywhere}
:lang(ja) :is(h1,h2,h3,.h2,.h3){word-break:auto-phrase}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:0.7812rem;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.skip{position:absolute;left:12px;top:-80px;z-index:100;padding:10px 14px;background:var(--lime);color:var(--black);border-radius:8px;font:0.8125rem var(--mono)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
::selection{background:var(--lime);color:var(--black)}
[hidden]{display:none!important}

/* ============ sections ============ */
.sec{padding-block:var(--pad)}
.s-paper,.s-ink{background:var(--bg);color:var(--fg)}
.s-ink{--bg:var(--ink-bg);--fg:var(--ink-fg);--mu:var(--ink-mu);--ln:var(--ink-ln);--panel:var(--ink-panel);--card:var(--ink-panel)}
.rule{border-top:1px solid var(--ln)}
#work{padding-bottom:calc(var(--pad) * .6)}

/* ============ type & controls ============ */
h2,.h2{font-size:clamp(2.3rem,1rem + 3.7vw,5rem);font-weight:900;line-height:1.04;letter-spacing:-.05em;text-wrap:balance}
:root:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) :is(h2,.h2){font-size:clamp(2rem,.9rem + 2.9vw,4.1rem);letter-spacing:-.045em;overflow-wrap:break-word}
h3{font-size:1.25rem;font-weight:800}
.kicker{display:inline-block;font:400 0.7812rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-bottom:28px}
.kicker::before{content:"[\00a0\00a0"}
.kicker::after{content:"\00a0\00a0]"}
.lead{font-size:clamp(1.02rem,.96rem + .26vw,1.16rem);line-height:1.65;color:var(--mu);max-width:54ch;text-wrap:pretty}
.head{display:grid;grid-template-columns:1.3fr .7fr;gap:24px 72px;align-items:end;margin-bottom:clamp(48px,5vw,80px)}
.head>p:not(.h2){color:var(--mu);text-wrap:pretty;max-width:42ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,112px);align-items:start}
.split h2{margin-bottom:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 22px;border:0;border-radius:10px;font:400 0.8125rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s,scale .15s}
.btn:active{scale:.97}
.btn-go{background:var(--lime);color:var(--black);box-shadow:inset 0 0 0 1.5px var(--black)}
.btn-go:hover{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.btn-go:disabled{opacity:.6;cursor:progress}
.btn-sm{min-height:40px;padding:0 14px;border-radius:8px;box-shadow:none}
.btn-text,.link{display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;font:400 0.8125rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.btn-text::after{content:"↗"}
/* underline as a scaled line, redrawn from the left on hover */
.btn-text,.link,.contact-lines a,.work .more{position:relative}
.btn-text::before,.link::before,.contact-lines a::before,.work .more::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform-origin:left}
.btn-text:hover::before,.link:hover::before,.contact-lines a:hover::before,.work:hover .more::before{animation:grow .45s var(--ease)}
@keyframes grow{from{scale:0 1}}
.tag{font:400 0.75rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:400 0.7188rem/1.4 var(--mono);letter-spacing:.04em;padding:5px 9px;border-radius:6px;border:1px solid var(--ln);color:var(--mu)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.num{font:400 0.7812rem var(--mono);letter-spacing:.06em;color:var(--mu)}

/* ============ nav: a compact floating dark bar ============ */
.nav{position:fixed;z-index:50;top:18px;left:50%;translate:-50% 0;width:max-content;max-width:calc(100% - 24px);height:58px;padding:0 8px 0 22px;border-radius:var(--r);background:var(--bar);color:var(--bar-fg);box-shadow:0 18px 40px -22px rgba(11,15,14,.6),inset 0 0 0 1px rgba(221,227,224,.06);transition:scale .4s var(--ease),translate .4s var(--ease)}
.nav.compact{scale:.95;translate:-50% -6px}
.nav-inner{display:flex;align-items:center;gap:30px;height:100%}
.nav :focus-visible{outline-color:var(--lime)}
.logo-mono{display:block;aspect-ratio:5944/1164;background:currentColor;-webkit-mask:url(../logo-mono.svg) center/100% 100% no-repeat;mask:url(../logo-mono.svg) center/100% 100% no-repeat}
.brand .logo-mono{height:22px;color:#fff}
.links{display:flex;gap:2px}
.links a{padding:8px 11px;font-size:0.875rem;font-weight:500;white-space:nowrap;border-radius:6px;transition:color .2s}
.links a:hover,.links a.on{color:#fff}
.links a.on{box-shadow:inset 0 -1.5px 0 var(--lime);border-radius:0}
.actions{display:flex;align-items:center;gap:6px}
.lang{position:relative}
.lang-btn,.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;border:1px solid var(--bar-ln);border-radius:8px;background:transparent;color:#E6ECE9;cursor:pointer;transition:border-color .2s}
.lang-btn{padding:0 10px 0 12px;font:400 0.8125rem var(--mono);letter-spacing:.04em}
.icon-btn{width:40px;padding:0}
.lang-btn:hover,.lang-btn[aria-expanded="true"],.icon-btn:hover{border-color:#8E9995}
.lang-btn svg{width:15px;height:15px;flex:none}
.lang-btn .chev{width:13px;height:13px;opacity:.6;transition:rotate .2s}
.lang-btn[aria-expanded="true"] .chev{rotate:180deg}
.icon-btn svg{width:17px;height:17px}
.lang-code{display:none}
.lang-menu{position:absolute;right:0;top:calc(100% + 14px);z-index:60;min-width:212px;padding:6px;background:var(--bar);color:#E6ECE9;border:1px solid var(--bar-ln);border-radius:var(--r);box-shadow:0 24px 48px -16px rgba(11,15,14,.5);animation:menuIn .16s ease-out}
@keyframes menuIn{from{opacity:0;translate:0 -4px}}
.lang-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border:0;border-radius:6px;background:none;color:inherit;font-size:0.9062rem;text-align:start;cursor:pointer}
.lang-menu button span{font:400 0.7188rem var(--mono);letter-spacing:.06em;opacity:.5}
.lang-menu button:hover,.lang-menu button:focus-visible{background:rgba(221,227,224,.08);outline:none}
.lang-menu button[aria-current="true"]{color:var(--lime)}
.lang-menu button[aria-current="true"] span{opacity:1}
.nav-cta{color:var(--black)}
.nav-cta::after{content:"→"}
.nav-cta:hover{background:#fff;color:var(--black);box-shadow:none}
.moon{display:none}
[data-theme="dark"] .sun{display:none}
[data-theme="dark"] .moon{display:block}
.menu{display:none}

/* ============ hero: sized off the viewport height so title, copy and product fit one screen ============ */
.hero{
  --vh:min(100svh,1360px);                  /* very tall screens: keep one composed hero, let the next section show */
  --top:clamp(88px,calc(var(--vh) * .11),128px);
  --wm-w:min(100vw - 68px,1824px);          /* keeps the wordmark in proportion with the 1760–1920px content */
  --wmv:min(var(--wm-w) * .153,var(--vh) * .19);      /* how much of the wordmark shows above the fold */
  --avail:calc(var(--vh) - var(--top) - var(--wmv) - 24px);
  --sw:clamp(200px,min(22vw,(var(--avail) + var(--wmv) * .6) / 2.145),var(--sw-max,330px)); /* 640px screenshots: ≤330 CSS px stays sharp at 2x */
  position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:min(100vh,1360px);min-height:var(--vh);padding:var(--top) 0 calc(var(--wmv) + 24px)}
.hero-main{position:relative;z-index:3;flex:1;width:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2svh,24px)}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 40px;color:var(--mu)}
.hero-meta .kicker{margin:0}
.clock{display:inline-flex;align-items:center;gap:8px}
.clock i{width:7px;height:7px;border-radius:50%;background:#2BB673}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--sw) * 1.75);gap:24px;align-items:center}
.hero-copy{min-width:0}
/* three limits: width, what is left of the screen height after meta + lead + buttons, and "真正值得托付。" on one line */
.hero-title{margin:0 0 clamp(20px,3.6svh,40px) -.04em;font-size:clamp(3rem,min(7vw,(var(--avail) - 18.125rem) / 3.36,(min(100vw,var(--maxw)) - 2 * var(--gut) - var(--sw) * 1.75 - 1.5rem) / 6.9),8.75rem);font-weight:900;line-height:1.12;letter-spacing:-.055em}
:root:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .hero-title{font-size:clamp(2.25rem,min(4.9vw,(var(--avail) - 18.75rem) / 3.9),6.5rem);line-height:1.06;letter-spacing:-.045em;overflow-wrap:break-word}
:lang(ja) .hero-title{font-size:clamp(2.5rem,min(5.4vw,(var(--avail) - 18.75rem) / 4.6),7rem)}
.hero-title>span:first-child{display:block}
.hero-title .hl{padding:0 .06em .04em;background:var(--black);color:var(--lime);-webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-theme="dark"] .hero-title .hl{background:var(--lime);color:var(--black)}
.hero .lead{max-width:34em;margin-bottom:clamp(20px,3.4svh,36px);color:var(--fg);opacity:.82}
/* product carousel: the column is wide enough for the Mac window; phones sit at its right edge */
.hero-shot{position:relative;align-self:stretch;margin:0}
.stage{position:absolute;z-index:1;right:0;top:50%;width:var(--sw);height:calc(var(--sw) * 2.145);margin-top:calc(var(--sw) * -1.0725 + var(--wmv) * .3)}
.slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none}
.slide.is-on{opacity:1;pointer-events:auto}
/* shots of one product are stacked in one grid cell and cross-fade */
/* each frame has a fixed screen ratio and the shots fill it like the demo (cover, top): the flip canvas draws with the same math */
.screens{display:grid;grid-template:100% / 100%}
.stage .phone .screens{aspect-ratio:640/1373}
.window .screens{aspect-ratio:1600/1074}
.screens img{grid-area:1/1;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .4s}
.screens img.is-on{opacity:1}
.screens{position:relative}
.flip{position:absolute;z-index:2;pointer-events:none}
.travel,.morph{position:absolute;z-index:1;pointer-events:none}
.morph{z-index:0}
.slide.mac{left:auto;width:calc(var(--sw) * 1.75)}
.stage .phone{--pw:var(--sw);rotate:5deg;padding:calc(var(--sw) * .028);border-radius:calc(var(--sw) * .145);box-shadow:0 44px 70px -34px rgba(11,15,14,.6),inset 0 0 0 1px rgba(221,227,224,.12)}
.stage .phone img{border-radius:calc(var(--sw) * .12)}
.window{display:block;width:100%}
.window img{filter:drop-shadow(0 34px 40px rgba(11,15,14,.3))}
.hero-tag{position:absolute;z-index:2;top:calc(50% - var(--sw) * .65 + var(--wmv) * .3);right:calc(var(--sw) - 16px);display:grid;gap:10px;min-width:200px;padding:12px 12px 8px;border-radius:10px;background:#fff;color:var(--black);box-shadow:inset 0 0 0 1.5px var(--black);transition:translate .6s var(--ease)}
.is-mac .hero-tag{translate:calc(100% + 8px - var(--sw) * .75) calc(var(--sw) * 1.237 - 24px)}
[data-theme="dark"] .hero-tag{background:var(--panel);color:var(--fg);box-shadow:inset 0 0 0 1px var(--ln)}
.tag-text{line-height:1.5;white-space:nowrap}
.tag-text b{display:block;font:700 .9375rem/1.4 var(--sans);letter-spacing:0;text-transform:none}
.swap .tag-text{animation:fade .4s both}
/* one segment per shot; the running segment is the clock: its animationend advances, so pausing it pauses the carousel */
.tag-bar{display:flex;gap:4px;height:3px}
.tag-bar i{flex:1;border-radius:2px;background:var(--black);overflow:hidden}
.tag-bar b{display:block;height:100%;background:var(--lime);transform-origin:left;scale:0 1}
.tag-bar .done b{scale:1 1}
.run .tag-bar .on b{animation:fill 2.5s linear forwards}
.hold .tag-bar .on b{animation-play-state:paused}
@keyframes fill{to{scale:1 1}}
.tag-ctrl{display:flex;align-items:center;margin:-2px -6px 0}
.tag-ctrl button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.dot::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transition:background-color .2s}
.dot[aria-current="true"]::before{background:currentColor}
.dot:hover::before{background:var(--lime)}
.play{margin-inline-start:auto}
.play::before{content:"";width:3px;height:10px;background:currentColor;box-shadow:5px 0 0 currentColor;translate:-2.5px 0}
.play[aria-pressed="true"]::before{width:9px;height:10px;box-shadow:none;translate:1px 0;clip-path:polygon(0 0,100% 50%,0 100%)}
.tag-ctrl :focus-visible{outline-offset:-2px}
.wordmark{position:absolute;z-index:2;left:0;right:0;bottom:calc(var(--wmv) - var(--wm-w) * .196);width:var(--wm-w);margin-inline:auto;pointer-events:none;color:var(--wm-c);opacity:var(--wm-o)}
.phone{--pw:220px;display:block;width:var(--pw);padding:calc(var(--pw)*.028);border-radius:calc(var(--pw)*.145);background:var(--black);box-shadow:inset 0 0 0 1px rgba(221,227,224,.12)}
.phone img{width:100%;border-radius:calc(var(--pw)*.12)}

/* ============ motion: one-time hero entrance (≤1.2s). html.motion is set in <head> unless reduced motion is on;
   these are CSS animations with fill "both", so everything ends visible even if main.js never runs ============ */
@keyframes up{from{opacity:0;translate:0 24px}}
@keyframes fade{from{opacity:0}}
@keyframes lineUp{from{translate:0 105%}}
@keyframes wipe{from{background-size:0% 100%}}
@keyframes devIn{from{opacity:0;translate:0 80px;rotate:6deg}}
.motion .hero-meta{animation:fade .5s both}
.motion .hero-title:not(.is-split){animation:up .7s .08s var(--ease) both}
/* only the bottom edge clips (the lines rise from below it): the highlight block reaches ~3px above its line box, and clipping it
   there made it jump when the split markup went away */
.is-split .ln{display:block;clip-path:inset(-1em -1em 0);padding:0 .1em .08em;margin:0 -.1em -.08em}
.is-split .ln-in{display:block;animation:lineUp .7s calc(min(var(--i),3) * 80ms + 80ms) var(--ease) both}
/* the block wipes in as the .hl's own background, so it is painted exactly where it stays once the split markup goes
   (an absolute ::before came out a device pixel taller in Safari); the dark rule restates it all, or
   [data-theme="dark"] .hero-title .hl wins and shows the full block before the wipe */
.is-split .hl{background:linear-gradient(var(--black),var(--black)) no-repeat 0 0/100% 100%;animation:wipe .4s calc(min(var(--i),3) * 80ms + 300ms) cubic-bezier(.7,0,.2,1) both}
[data-theme="dark"] .is-split .hl{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 0/100% 100%}
.is-split .hl>span{animation:fade .3s calc(min(var(--i),3) * 80ms + 640ms) both}
.motion .hero .lead{animation:up .6s .35s var(--ease) both}
.motion .hero .cta-row{animation:up .6s .45s var(--ease) both}
.motion .stage{animation:devIn .8s .25s var(--ease) backwards} /* backwards, not both: a filled animation keeps the stage on its own layer, which paints the window <img> off the pixel grid the transition canvas uses */
.motion .hero-tag{animation:fade .4s .7s both}
.motion .wordmark{animation:up .6s .55s var(--ease) both}
/* scroll reveal: html.reveal is added by main.js only after the observer is in place */
.reveal .rv{transition:opacity .6s var(--d,0ms) var(--ease),translate .6s var(--d,0ms) var(--ease)}
.reveal .rv:not(.in){opacity:0;translate:0 24px}

/* ============ proofs band (moved out of the hero) ============ */
.band{padding-block:clamp(56px,7vw,96px)}
.proofs{display:flex;flex-wrap:wrap;gap:8px 0;color:var(--mu);margin-bottom:clamp(32px,4vw,56px)}
.proofs li+li::before{content:"/";margin-inline:14px;opacity:.5}
.trust{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ln)}
.trust li{padding:28px 24px 0;display:grid;gap:8px;align-content:start;border-inline-start:1px solid var(--ln)}
.trust li:first-child{border-inline-start:0;padding-inline-start:0}
.trust b{font-size:clamp(1.5rem,1rem + 1.3vw,2.3rem);font-weight:900;line-height:1.1;letter-spacing:-.04em}
.trust span{color:var(--mu);font-size:0.9375rem}

/* ============ services: a big-type index ============ */
.rows{border-top:1px solid var(--ln)}
.rows li{border-bottom:1px solid var(--ln)}
.row{display:grid;grid-template-columns:72px minmax(0,1.15fr) minmax(0,1fr) 48px;gap:32px;align-items:center;padding:32px 20px;margin-inline:-20px;transition:background-color .2s,color .2s}
.row:hover,.row:focus-visible{background:var(--fg);color:var(--bg)}
.row-num{font:400 0.7812rem var(--mono);letter-spacing:.06em;opacity:.6}
.row-num::before{content:"["}
.row-num::after{content:"]"}
.row h3{font-size:clamp(1.5rem,1rem + 1.5vw,2.5rem);font-weight:900;letter-spacing:-.045em;hyphens:auto;overflow-wrap:break-word}
.row p{opacity:.72;text-wrap:pretty}
.row-arrow{justify-self:end;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;font-size:1.0625rem;opacity:.5;transition:background-color .2s,color .2s,opacity .2s,translate .3s var(--ease)}
.row:hover .row-arrow{background:var(--lime);color:var(--black);border-color:var(--lime);opacity:1;translate:6px 0}

/* ============ delivery forms ============ */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.cols li{display:grid;gap:14px;align-content:start;padding-top:28px;border-top:1px solid var(--ln)}
.cols h3{font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem);font-weight:900;letter-spacing:-.045em}
.cols p{color:var(--mu);font-size:0.9375rem}
.cols .chips{margin-top:6px}

/* ============ products: one screen each, shown large ============ */
.product{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,104px);align-items:center;padding-block:clamp(48px,6vw,88px);border-top:1px solid var(--ln)}
.product:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.product:nth-child(even) .product-copy{order:2}
.product-copy{display:grid;gap:18px;justify-items:start}
.credit{margin-top:-8px;font-size:.875rem;color:var(--mu)}
.p-meta{display:flex;align-items:center;gap:14px}
.app-icon{width:44px;height:44px;border-radius:11px}
.product h3{font-size:clamp(2.2rem,1.2rem + 2.8vw,4.2rem);font-weight:900;letter-spacing:-.05em}
.product p{color:var(--mu);max-width:46ch;text-wrap:pretty}
.product .link{margin-top:8px}
.devices{position:relative;width:100%;min-height:clamp(420px,46vw,680px);display:grid;border-radius:16px;background:var(--panel)}
.shot-open{display:grid;place-items:center;width:100%;padding:clamp(40px,5vw,72px) clamp(20px,3vw,48px) clamp(56px,6vw,84px);border:0;border-radius:inherit;background:none;color:inherit;font:inherit;cursor:zoom-in}
.shot-open:focus-visible{outline-offset:-6px}
.devices .count{position:absolute;top:18px;left:20px;color:var(--mu)}
.devices .phone{--pw:clamp(220px,21vw,320px);transition:translate .3s}
.devices:hover .phone{translate:0 -6px}
/* a product's screens stacked in one cell; the current one is opaque */
.pshots{display:grid;width:100%}
.pshots img{grid-area:1/1;opacity:0;transition:opacity .5s}
.pshots img.is-on{opacity:1}
.devices.desk .pshots{transition:translate .3s}
.devices.desk img{width:100%;border-radius:10px;box-shadow:0 30px 60px -34px rgba(11,15,14,.5)}
.devices.desk:hover .pshots{translate:0 -6px}
.pdots{position:absolute;left:0;right:0;bottom:clamp(14px,1.6vw,22px);display:flex;justify-content:center}
.pdots button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;background:none;color:var(--fg);cursor:pointer}
.pdots button::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.55;transition:background-color .2s,opacity .2s}
.pdots button[aria-current="true"]::before{background:currentColor;opacity:1}
.pdots button:hover::before{background:var(--lime);opacity:1}
.pdots button:focus-visible{outline-offset:-3px}

/* ============ evidence ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ln)}
.stat{padding:36px 24px 0;border-inline-start:1px solid var(--ln)}
.stat:first-child{border-inline-start:0;padding-inline-start:0}
.stat b{display:block;font-size:clamp(4rem,2rem + 7vw,9.5rem);font-weight:900;line-height:.9;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:18px;color:var(--mu);font:400 0.7812rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* ============ work ============ */
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(36px,4vw,56px) clamp(16px,2vw,28px)}
.work{grid-column:span 2;display:block;width:100%;padding:0;border:0;background:none;text-align:start;cursor:pointer;color:inherit}
.work:nth-child(-n+2){grid-column:span 3}
.work-media{display:block;aspect-ratio:1586/992;overflow:hidden;border-radius:10px;background:var(--panel)}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.work:hover .work-media img{transform:scale(1.03)}
.work-body{display:grid;gap:8px;padding-top:18px;justify-items:start}
.work .h3{font-size:clamp(1.25rem,1rem + .7vw,1.7rem);font-weight:900;letter-spacing:-.04em;line-height:1.2}
.work .desc{color:var(--mu);font-size:0.9062rem}
.work .more{margin-top:6px;padding-bottom:3px;font:400 0.75rem var(--mono);letter-spacing:.06em;text-transform:uppercase}
.scope-note{margin-top:48px;color:var(--mu);font-size:0.8125rem}

/* ============ approach ============ */
.commits{border-top:1px solid var(--ln)}
.commit{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:30px 0;border-bottom:1px solid var(--ln)}
.commit .num{padding-top:8px}
.commit b{display:block;font-size:clamp(1.3rem,1rem + .8vw,1.8rem);font-weight:900;letter-spacing:-.04em;line-height:1.2;margin-bottom:8px}
.commit p{color:var(--mu)}

/* ============ process ============ */
.process{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ln)}
.step{padding:32px 28px 8px;border-inline-start:1px solid var(--ln);display:grid;gap:14px;align-content:start}
.step:first-child{border-inline-start:0;padding-inline-start:0}
.step h3{font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem);font-weight:900;letter-spacing:-.045em}
.step p{color:var(--mu);font-size:0.9375rem}

/* ============ security ============ */
.panel{padding:clamp(28px,3vw,44px);border-radius:16px;background:var(--black);color:var(--ice);--mu:var(--ink-mu);--ln:var(--ink-ln)}
[data-theme="dark"] .panel{background:var(--panel);box-shadow:inset 0 0 0 1px var(--ln)}
.panel-title{margin-bottom:10px;font:400 0.7812rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.check{display:grid;grid-template-columns:22px 1fr;gap:14px;padding:20px 0;border-top:1px solid var(--ln)}
.check svg{width:18px;height:18px;color:var(--lime);margin-top:3px}
.check b{display:block;font-weight:700}
.check span{color:var(--mu);font-size:0.9062rem}

/* ============ contact ============ */
.contact-lines{margin-top:40px;border-top:1px solid var(--ln)}
.contact-lines>div{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--ln)}
.contact-lines dt{font:400 0.75rem var(--mono);color:var(--mu);letter-spacing:.06em;text-transform:uppercase}
.contact-lines dd{font-weight:700;font-size:1.1rem;overflow-wrap:anywhere}
.contact-lines a{padding-bottom:2px}
.contact-lines .wechat{grid-template-columns:auto 1fr;gap:16px;align-items:center}
.wechat img{width:88px;border-radius:8px;background:#fff;padding:4px}
.wechat dd{font-weight:400;font-size:0.9062rem;color:var(--mu)}
.form-card{display:grid;gap:16px;padding:clamp(24px,3vw,44px);background:var(--card);border-radius:16px;box-shadow:inset 0 0 0 1px var(--ln)}
.form-card h3{font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem);font-weight:900;letter-spacing:-.045em}
.form-hint{color:var(--mu);font-size:0.9062rem;margin-bottom:6px}
.form-card label{display:grid;gap:8px}
.form-card label>span{font:400 0.75rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.form-card input,.form-card textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:8px;border:1px solid var(--ln);background:var(--field);color:var(--fg);font-size:0.9375rem;resize:vertical;transition:border-color .2s,box-shadow .2s}
.form-card input::placeholder,.form-card textarea::placeholder{color:var(--mu);opacity:.8}
.form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.form-card .btn{justify-self:start;margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.form-note{font-size:0.875rem;min-height:1.4em}
.form-note.ok{color:#16683F}.form-note.err{color:#B5432F}
[data-theme="dark"] .form-note.ok{color:var(--lime)}
[data-theme="dark"] .form-note.err{color:#FF8A73}

/* ============ footer ============ */
.footer{padding:64px 0 calc(32px + env(safe-area-inset-bottom));font-size:0.8438rem}
.footer-inner{display:grid;gap:32px;color:var(--mu)}
.footer-brand{display:flex;flex-wrap:wrap;align-items:center;gap:18px;color:var(--fg)}
.footer-brand .logo-mono{height:26px;color:#fff}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;border-top:1px solid var(--ln);padding-top:24px}
.legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.legal a{display:inline-flex;align-items:center;gap:6px}
.legal a:hover,.friends a:hover{color:var(--fg)}
.friends a{margin-inline-start:14px}

/* ============ gallery, fab ============ */
dialog{opacity:0;transition:opacity .25s,display .25s allow-discrete,overlay .25s allow-discrete}
dialog[open]{opacity:1}
@starting-style{dialog[open]{opacity:0}}
dialog::backdrop{background:rgba(11,15,14,.7)}
body:has(dialog[open]){overflow:hidden}
.gallery{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;background:rgba(11,15,14,.97);color:var(--ice)}
.gallery[open]{display:grid;grid-template-rows:auto 1fr auto}
.gallery-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-weight:700}
.gallery-stage{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:0 12px;min-height:0}
.gallery-stage img{max-width:100%;max-height:calc(100vh - 150px);margin:auto;object-fit:contain;border-radius:8px}
.gallery-nav{width:44px;height:44px;border-radius:8px;border:1px solid var(--bar-ln);background:transparent;color:var(--ice);cursor:pointer;font-size:1.125rem;transition:background-color .2s,color .2s}
.gallery-nav:hover{background:var(--lime);color:var(--black);border-color:var(--lime)}
.gallery.single #galleryPrev,.gallery.single #galleryNext{visibility:hidden}
.gallery-count{text-align:center;padding:14px;opacity:.7}
.fab{position:fixed;right:20px;bottom:calc(28px + env(safe-area-inset-bottom));z-index:40;display:grid;justify-items:end;gap:10px;transition:opacity .25s,visibility .25s}
.fab.away{opacity:0;visibility:hidden}
.fab-bar{display:flex;flex-direction:column;padding:4px 0;border-radius:var(--r);background:var(--bar);box-shadow:0 14px 30px -14px rgba(11,15,14,.55),inset 0 0 0 1px rgba(221,227,224,.06);transition:opacity .35s,transform .45s cubic-bezier(.2,0,0,1),visibility .35s}
.fab-btn{position:relative;display:grid;place-items:center;width:46px;height:44px;border:0;background:none;color:var(--bar-fg);cursor:pointer;transition:color .15s}
.fab-btn:hover,.fab-wechat.open .fab-btn{color:var(--lime)}
.fab-btn:focus-visible{outline-color:var(--lime);outline-offset:-4px}
.fab-btn svg{width:21px;height:21px}
/* tooltip: reuses the aria-label so the accessible name and the hint never drift apart */
.fab-btn[aria-label]::after{content:attr(aria-label);position:absolute;top:50%;right:calc(100% + 12px);padding:6px 10px;border-radius:6px;background:var(--bar);color:#E6ECE9;font:400 0.7188rem var(--mono);letter-spacing:.04em;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(4px,-50%);transition:opacity .15s,transform .15s}
.fab-btn:hover::after,.fab-btn:focus-visible::after{opacity:1;transform:translate(0,-50%)}
.fab-wechat{position:relative}
.fab-wechat .fab-btn::after{display:none}
.fab-pop{position:absolute;top:50%;right:100%;padding-right:14px;opacity:0;visibility:hidden;transform:translate(4px,-50%);transition:opacity .15s,transform .15s,visibility .15s}
.fab-wechat:hover .fab-pop,.fab-wechat:focus-within .fab-pop,.fab-wechat.open .fab-pop{opacity:1;visibility:visible;transform:translate(0,-50%)}
.fab-card{position:relative;display:grid;justify-items:center;gap:4px;width:196px;padding:16px 16px 14px;border-radius:var(--r);background:#F6F8F7;color:var(--black);box-shadow:0 20px 40px -18px rgba(11,15,14,.45),inset 0 0 0 1.5px var(--black);text-align:center}
.fab-card img{width:150px;border-radius:6px;margin-bottom:6px}
.fab-card b{font-size:0.9062rem}
.fab-card span{color:#4C5652;font-size:0.75rem;line-height:1.5}
.fab-fold{display:grid;place-items:center;width:34px;height:34px;margin-right:6px;border:0;border-radius:8px;background:var(--bar);color:var(--bar-fg);box-shadow:0 10px 24px -12px rgba(11,15,14,.5);cursor:pointer;transition:transform .45s cubic-bezier(.2,0,0,1),color .15s,background-color .2s}
.fab-fold:hover{color:var(--lime)}
.fab-fold:focus-visible{outline-color:var(--lime)}
.fab-fold svg{width:16px;height:16px;transition:transform .45s cubic-bezier(.2,0,0,1)}
/* folded: the bar slides off-screen and the toggle becomes an edge tab */
.fab.folded .fab-bar{opacity:0;visibility:hidden;transform:translateX(70px)}
.fab.folded .fab-fold{width:30px;height:28px;border-radius:8px 0 0 8px;background:var(--lime);color:var(--black);transform:translateX(26px)}
.fab.folded .fab-fold svg{transform:rotate(180deg)}

/* ============ responsive ============ */
@media (max-width:1180px){
  .nav{width:calc(100% - 24px);max-width:760px;padding-inline:18px 8px}
  .nav-inner{justify-content:space-between;gap:12px}
  .links{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;padding:8px;background:var(--bar);border:1px solid var(--bar-ln);border-radius:var(--r);box-shadow:0 24px 50px -20px rgba(11,15,14,.5)}
  .links a{padding:14px;font-size:1rem;color:var(--bar-fg)}
  .links a.on{box-shadow:none;color:var(--lime)}
  .links.open{display:flex}
  .menu{display:inline-flex}
}
@media (max-width:960px){
  .hero{--wmv:calc(var(--wm-w) * .153);--sw:min(58vw,280px);display:block;min-height:0;padding:104px 0 calc(var(--wmv) * .8)}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-title{font-size:clamp(2.6rem,7.4vw,4.4rem)}
  :root:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .hero-title{font-size:clamp(2.2rem,6vw,3.6rem)}
  :lang(ja) .hero-title{font-size:clamp(2.2rem,6.2vw,3.8rem)}
  .hero-shot{margin-top:48px}
  .stage{position:relative;top:auto;width:100%;margin:0}
  .slide .phone{translate:6% 0}
  .slide.mac{left:0;width:100%}
  .hero-tag,.is-mac .hero-tag{position:relative;top:auto;right:auto;translate:none;width:max-content;max-width:100%;margin-top:28px}
  .head,.split{grid-template-columns:1fr}
  .row{grid-template-columns:48px minmax(0,1fr) 40px;gap:10px 16px;padding-block:24px}
  .row p{grid-column:2}
  .row-arrow{grid-column:3;grid-row:1;width:36px;height:36px}
  .cols{grid-template-columns:1fr}
  .product,.product:nth-child(even){grid-template-columns:1fr}
  .product:nth-child(even) .product-copy{order:0}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .stat:nth-child(n+3){margin-top:28px}
  .work-grid{grid-template-columns:1fr 1fr}
  .work,.work:nth-child(-n+2){grid-column:span 1}
  .work:first-child{grid-column:1/-1}
  .process{grid-template-columns:1fr 1fr}
  .step:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .step:nth-child(n+3){border-top:1px solid var(--ln);margin-top:16px}
  .trust{grid-template-columns:1fr 1fr}
  .trust li:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .trust li:nth-child(n+3){border-top:1px solid var(--ln);margin-top:28px}
}
@media (max-width:600px){
  html{scroll-padding-top:80px}
  .nav{top:10px;height:54px;padding-inline:16px 7px}
  .brand .logo-mono{height:20px}
  .actions{gap:5px}
  .nav-cta{display:none}
  .lang-name{display:none}
  .lang-code{display:inline}
  .lang-btn{gap:6px;padding:0 8px}
  .lang-btn>svg:first-child{display:none}
  .lang-btn,.icon-btn{height:40px}
  .hero{--wm-w:calc(100vw - 24px);padding-top:92px}
  .wordmark{width:auto;left:12px;right:12px}
  .hero-meta .clock{display:none}
  .hero-title{font-size:clamp(2.3rem,11.4vw,3.4rem);letter-spacing:-.05em}
  :root:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .hero-title{font-size:clamp(2rem,9.4vw,2.8rem)}
  :lang(ja) .hero-title{font-size:clamp(2rem,9.6vw,2.8rem)}
  .hero-tag{width:auto}
  .tag-text{white-space:normal}
  .cta-row .btn{flex:1 1 100%}
  .proofs{flex-direction:column}
  .proofs li+li::before{display:none}
  .trust,.stats{grid-template-columns:1fr}
  .trust li,.trust li:nth-child(n),.stat,.stat:nth-child(n){border-inline-start:0;padding-inline:0}
  .trust li:nth-child(n+2),.stat:nth-child(n+2){border-top:1px solid var(--ln);margin-top:24px}
  .stat b{font-size:5rem}
  .row{margin-inline:-12px;padding-inline:12px}
  .devices{min-height:0}
  .shot-open{padding:48px 20px 60px}
  .devices .phone{--pw:min(62vw,250px)}
  .work-grid,.process{grid-template-columns:1fr}
  .work:first-child{grid-column:auto}
  .step,.step:nth-child(n){border-inline-start:0;padding:24px 0 0;margin-top:0}
  .step+.step{border-top:1px solid var(--ln);margin-top:24px}
  .form-card .btn{justify-self:stretch}
  .fab{right:12px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .fab-btn::after{display:none}
  .footer-row{flex-direction:column;align-items:flex-start}
}
@media (min-width:2400px){
  :root{--maxw:1920px}
  html{font-size:125%}
}
/* 1x screens this wide can show the 640px screenshots larger without blur */
@media (min-width:2400px) and (max-resolution:1.5dppx){.hero{--sw-max:440px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .tag-bar{display:none}
}
@media print{.reveal .rv{opacity:1!important;translate:none!important}}