/* ============================================================ inner pages
   The Simples inner pages share the homepage's grammar without its 3D
   scene: the same tokens, type, navigation, scan lines and components, on a
   still photograph instead of a live world. */
:root{
  --ink:#05040e; --ink-2:#0b0918; --bone:#e6efff; --bone-dim:#a9b6cc; --muted:#6f7a92;
  --line:rgba(230,239,255,.13); --line-soft:rgba(230,239,255,.07);
  --neon:#22e6ff; --neon-dim:#0fb3c9; --coral:#e5745c; --coral-hot:#ff8a66;
  --pad:clamp(20px, 3.4vw, 56px); --nav-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Onest','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
::selection{ background:var(--neon); color:var(--ink); }
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{ outline:1px solid var(--neon); outline-offset:3px; }

.en{ font-family:'Orbitron','Onest',sans-serif; }
.k, .eyebrow, .nav-link .alt, .foot h4, .foot-base, .mx-h, .mx-r, .cell, .mx-cap, .mx-foot, .who, .cap .k, .faq-q i{
  font-family:'JetBrains Mono','Onest',monospace;
}
.eyebrow{ font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--neon-dim); }
.display{ font-family:'Noto Sans TC','Onest',sans-serif; font-weight:500; letter-spacing:.01em; line-height:1.18; margin:0; text-wrap:balance; }
.h-hero{ font-size:clamp(30px,3.8vw,58px); }
.h-sec{ font-size:clamp(24px,2.8vw,40px); }
.display .hl{ color:var(--coral); text-shadow:0 0 18px rgba(229,116,92,.55); }
.body-lg{ font-size:clamp(14px,1.02vw,17px); line-height:1.72; color:#b4bfd0; }
.body{ font-size:14px; line-height:1.68; color:#9aa5b8; }
.k{ font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* ---- overlays */
#scan{ position:fixed; inset:0; z-index:57; pointer-events:none; opacity:.42;
  background:repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.20) 2px 3px); mix-blend-mode:multiply; }
#vignette{ position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%, transparent 40%, rgba(3,2,9,.55) 100%); }

/* ---- nav */
.nav{ position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:50;
  display:flex; align-items:center; gap:24px; padding:0 var(--pad);
  background:rgba(5,4,14,.62); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1); }
.nav::after{ content:''; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px; background:var(--line-soft); }
.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand svg{ width:34px; height:34px; display:block; }
.brand-tx{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.brand-tx b{ font-family:'Orbitron','Onest',sans-serif; font-size:12px; font-weight:500; letter-spacing:.3em; }
.brand-tx i{ font-style:normal; font-size:8px; letter-spacing:.2em; color:var(--muted); }
.nav-links{ display:flex; gap:clamp(18px,2.6vw,46px); margin-left:auto; }
.nav-link{ position:relative; font-family:'Noto Sans TC','Onest',sans-serif; font-size:12px; font-weight:500; letter-spacing:.14em;
  color:var(--bone-dim); display:block; height:15px; line-height:15px; overflow:hidden; }
.nav-link span{ display:block; height:15px; line-height:15px; transition:transform .55s var(--ease-out), color .3s; }
.nav-link .alt{ position:absolute; inset:0; transform:translate3d(0,100%,0); color:var(--neon); text-transform:uppercase; letter-spacing:.3em; font-size:11px; }
.nav-link:hover span{ transform:translate3d(0,-100%,0); }
.nav-link:hover .alt{ transform:none; }
.nav-link.on{ color:var(--bone); }
.nav-link.on::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--neon); box-shadow:0 0 8px var(--neon); }
.nav-burger{ display:none; margin-left:auto; width:26px; height:16px; position:relative; }
.nav-burger i{ position:absolute; right:0; height:1.5px; background:var(--bone); transition:.45s var(--ease-out); }
.nav-burger i:nth-child(1){ top:4px; width:26px; } .nav-burger i:nth-child(2){ top:11px; width:17px; }

/* ---- 中 / EN */
.lang{ display:inline-flex; align-items:center; gap:7px; margin-left:clamp(14px,2vw,30px); flex:0 0 auto;
  font-family:'JetBrains Mono','Onest',monospace; font-size:10px; font-weight:500; letter-spacing:.22em; color:var(--muted); }
.lang span{ transition:color .3s, text-shadow .3s; }
.lang span.on{ color:var(--neon); text-shadow:0 0 8px rgba(34,230,255,.6); }
.lang i{ font-style:normal; opacity:.45; }
html[data-lang="en"] .display{ font-family:'Onest','Noto Sans TC',sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:-.012em; line-height:1.06; }
html[data-lang="en"] .h-hero{ font-size:clamp(28px,3.6vw,54px); }
html[data-lang="en"] .nav-link{ font-family:'JetBrains Mono','Onest',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.2em; }
html[data-lang="en"] .nav-link .alt{ font-family:'Noto Sans TC',sans-serif; text-transform:none; letter-spacing:.14em; font-size:12px; }
html[data-lang="en"] .cap b, html[data-lang="en"] .pc b{ font-family:'Onest',sans-serif; }
html[data-lang="en"] .foot-brand p .foot-en{ font-family:'Noto Sans TC',sans-serif; letter-spacing:.2em; text-transform:none; }

/* ---- page */
.page{ position:relative; z-index:10; }
.sec{ position:relative; padding:clamp(60px,9vh,120px) var(--pad); }
.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(26px,4vh,50px); }
.sec-head .k b{ color:var(--coral); text-shadow:0 0 12px rgba(229,116,92,.6); font-weight:500; }
.rule{ flex:1 1 auto; height:1px; background:var(--line-soft); }
.cur-head{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,5vw,90px); align-items:start; margin-bottom:clamp(30px,5vh,60px); }

/* ---- hero: a still photograph, graded like the homepage cards */
.hero{ position:relative; min-height:78svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h) + 40px) var(--pad) clamp(40px,7vh,80px); overflow:hidden; isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-1;
  background:url('cases/engine-billboards.webp') center 30% / cover no-repeat; filter:saturate(.92) contrast(1.08) brightness(.6); }
.hero-bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,4,14,.55), rgba(5,4,14,.15) 40%, rgba(5,4,14,.92) 100%); }
.hero-in{ max-width:860px; display:flex; flex-direction:column; gap:18px; }
.hero-in .eyebrow{ display:flex; align-items:center; gap:10px; }
.hero-in .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--neon); box-shadow:0 0 10px var(--neon); }
.hero-in .body-lg{ max-width:62ch; margin:0; }
.hero-meta{ display:flex; gap:clamp(20px,3vw,44px); flex-wrap:wrap; margin-top:14px; padding-top:16px; border-top:1px solid var(--line-soft); }
.hero-meta div b{ display:block; font-family:'Orbitron','Onest',sans-serif; font-weight:500; font-size:clamp(18px,1.7vw,26px); color:var(--neon); text-shadow:0 0 14px rgba(34,230,255,.45); }
.hero-meta div:nth-child(even) b{ color:var(--coral); text-shadow:0 0 14px rgba(229,116,92,.45); }
.hero-meta div span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-family:'JetBrains Mono',monospace; }

/* ---- the engine: matrix, figures, capabilities, process, faq */
.eng-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr); gap:clamp(16px,2.4vw,40px); align-items:stretch; }
.matrix-wrap{ display:flex; flex-direction:column; gap:12px; padding:clamp(14px,1.6vw,22px); border:1px solid var(--line-soft); background:rgba(5,4,14,.72); position:relative; }
.matrix-wrap::before, .matrix-wrap::after{ content:''; position:absolute; width:10px; height:10px; border:1px solid var(--neon); }
.matrix-wrap::before{ left:-1px; top:-1px; border-right:0; border-bottom:0; }
.matrix-wrap::after{ right:-1px; bottom:-1px; border-left:0; border-top:0; }
.mx-cap, .mx-foot{ display:flex; justify-content:space-between; gap:12px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.mx-foot #mx-status{ color:var(--neon-dim); }
.matrix{ display:grid; grid-template-columns:minmax(96px,1.2fr) repeat(5,minmax(0,1fr)); gap:5px; }
.mx-h, .mx-r{ font-size:9.5px; letter-spacing:.12em; color:var(--bone-dim); display:flex; flex-direction:column; gap:3px; justify-content:flex-end; padding:6px 4px; }
.mx-h b, .mx-r b{ font-weight:500; color:var(--coral); letter-spacing:.2em; }
.mx-r{ justify-content:center; }
.cell{ position:relative; display:grid; place-items:center; aspect-ratio:5/4; font-style:normal; font-size:10px; letter-spacing:.12em;
  color:var(--muted); border:1px solid var(--line-soft); background:rgba(230,239,255,.02); transition:background .5s, color .5s, border-color .5s, box-shadow .5s; }
.cell.lit{ color:var(--ink); background:var(--neon); border-color:var(--neon); box-shadow:0 0 14px rgba(34,230,255,.55), inset 0 0 10px rgba(255,255,255,.3); }
.cell.was{ color:var(--neon); background:rgba(34,230,255,.10); border-color:rgba(34,230,255,.45); }
.eng-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.eng-stats div{ background:rgba(5,4,14,.82); padding:clamp(16px,1.8vw,26px); display:flex; flex-direction:column; justify-content:flex-end; gap:10px; min-height:120px; }
.eng-stats b{ font-family:'Orbitron','Onest',sans-serif; font-weight:500; font-size:clamp(20px,2vw,30px); letter-spacing:-.01em; color:var(--bone); font-variant-numeric:tabular-nums; }
.eng-stats div:nth-child(odd) b{ color:var(--neon); text-shadow:0 0 16px rgba(34,230,255,.45); }
.eng-stats div:nth-child(even) b{ color:var(--coral); text-shadow:0 0 16px rgba(229,116,92,.45); }
.eng-stats span{ font-size:11px; line-height:1.5; color:#8f9ab0; }
.caps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.cap{ position:relative; display:flex; flex-direction:column; gap:10px; padding:clamp(18px,2vw,28px); background:rgba(5,4,14,.84); overflow:hidden; }
.cap::before{ content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(34,230,255,.10), transparent 60%); opacity:0; transition:opacity .45s; }
.cap:hover::before{ opacity:1; }
.cap .k{ color:var(--neon-dim); }
.cap b{ font-size:clamp(16px,1.35vw,21px); font-weight:400; }
.cap p{ margin:0; font-size:12.5px; line-height:1.65; color:#8f9ab0; }
.proc{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(8px,1vw,16px); border-top:1px solid var(--line-soft); padding-top:18px; }
.pc{ position:relative; display:flex; flex-direction:column; gap:6px; padding-right:10px; }
.pc::after{ content:''; position:absolute; right:0; top:8px; width:calc(100% - 34px); height:1px; background:linear-gradient(90deg, transparent, var(--line)); }
.pc:last-child::after{ display:none; }
.pc .no{ font-family:'Orbitron','Onest',sans-serif; font-size:12px; color:var(--neon); text-shadow:0 0 10px rgba(34,230,255,.5); }
.pc .who{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--coral); }
.pc b{ font-size:13px; font-weight:400; }
.pc p{ margin:0; font-size:12px; color:#8f9ab0; line-height:1.55; }
.faq{ border-top:1px solid var(--line-soft); max-width:760px; }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-size:15px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq-q i{ font-style:normal; color:var(--neon); transition:transform .4s var(--ease-out); }
.faq details[open] .faq-q i{ transform:rotate(45deg); }
.faq p{ margin:0 0 18px; font-size:13.5px; color:#9aa5b8; max-width:60ch; }

/* ---- call to action */
.cta-band{ display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:clamp(20px,3vw,50px); align-items:center;
  padding:clamp(28px,3.5vw,48px); border:1px solid var(--line-soft); background:rgba(5,4,14,.72); position:relative; }
.cta-band::before, .cta-band::after{ content:''; position:absolute; width:10px; height:10px; border:1px solid var(--coral); }
.cta-band::before{ left:-1px; top:-1px; border-right:0; border-bottom:0; }
.cta-band::after{ right:-1px; bottom:-1px; border-left:0; border-top:0; }
.cta-band p{ margin:8px 0 0; }
.cta{ position:relative; display:inline-flex; align-items:center; gap:14px; padding:17px 30px; border:1px solid var(--line); border-radius:100px; overflow:hidden;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; transition:color .45s var(--ease), border-color .45s; white-space:nowrap; }
.cta i{ position:absolute; inset:0; background:var(--neon); transform:translate3d(0,101%,0); transition:transform .62s var(--ease-out); z-index:-1; }
.cta span,.cta svg{ position:relative; z-index:1; }
.cta:hover{ color:var(--ink); border-color:var(--neon); }
.cta:hover i{ transform:none; }
.cta:hover svg path{ stroke:var(--ink); }

/* ---- footer */
.foot{ position:relative; padding:clamp(50px,8vh,96px) var(--pad) clamp(26px,4vh,40px); border-top:1px solid var(--line-soft); }
.foot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,4vw,60px); }
.foot-brand{ grid-column:1 / -1; display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center; padding-bottom:34px; margin-bottom:8px; border-bottom:1px solid var(--line-soft); }
.foot-brand svg{ width:54px; height:54px; }
.foot-brand p{ margin:0; max-width:48ch; font-size:clamp(18px,2vw,30px); line-height:1.35; color:var(--bone-dim); }
.foot-brand p .foot-en{ font-family:'JetBrains Mono',monospace; font-size:.5em; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.foot-grid > div:nth-child(n+3){ padding-left:clamp(18px,2.2vw,34px); border-left:1px solid var(--line-soft); }
.foot h4{ margin:0 0 16px; font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.foot li a{ font-size:13px; color:#8f9ab0; transition:color .35s; }
.foot li a:hover{ color:var(--neon); }
.foot-note{ font-size:12px; color:#6f7a92; }
.foot-base{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; margin-top:clamp(38px,6vh,74px); padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.foot-base span:last-child{ text-align:right; }

/* ---- reveal */
[data-rv]{ opacity:0; transform:translate3d(0,22px,0); transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out); }
[data-rv].rv-in{ opacity:1; transform:none; }

@media (max-width:1080px){
  .cur-head{ grid-template-columns:1fr; gap:18px; }
  .eng-grid{ grid-template-columns:1fr; }
  .caps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .proc{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 12px; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .nav-links{ position:fixed; top:0; right:0; bottom:0; width:min(84vw,360px); padding:calc(var(--nav-h) + 28px) var(--pad) 34px;
    flex-direction:column; align-items:flex-start; gap:0; background:rgba(4,3,12,.98); border-left:1px solid var(--line-soft);
    transform:translate3d(100%,0,0); transition:transform .5s var(--ease-out); }
  .nav.menu-open .nav-links{ transform:none; }
  .nav-links .nav-link{ width:100%; height:auto; padding:17px 0; overflow:visible; border-bottom:1px solid var(--line-soft); font-size:17px; line-height:1.2; }
  .nav-links .nav-link span{ height:auto; line-height:1.2; transform:none !important; }
  .nav-links .nav-link .alt{ position:static; margin-top:6px; font-size:10px; color:var(--muted); }
  .nav-burger{ display:block; margin-left:18px; }
  .lang{ margin-left:auto; }
  .nav-burger.active i:nth-child(1){ top:7px; width:26px; transform:rotate(45deg); }
  .nav-burger.active i:nth-child(2){ top:7px; width:26px; transform:rotate(-45deg); }
  .hero{ min-height:64svh; }
  .caps{ grid-template-columns:1fr; }
  .matrix{ grid-template-columns:minmax(64px,.9fr) repeat(5,minmax(0,1fr)); gap:3px; }
  .mx-h, .mx-r{ font-size:8px; padding:4px 2px; }
  .cell{ font-size:8px; }
  .cta-band{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .foot-brand{ grid-column:auto; grid-template-columns:minmax(0,1fr); row-gap:16px; }
  .foot-grid > div:nth-child(n+3){ padding-left:0; border-left:0; }
  .foot-base{ display:flex; flex-wrap:wrap; }
  .foot-base span:last-child{ text-align:left; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.001ms !important; animation:none !important; }
  [data-rv]{ opacity:1; transform:none; }
}