/* ════════════════════════════════════════════════════════════════
   keva · website/ · shared stylesheet
   Brand tokens (single source: doc/keva_Brand_VI/keva-theme.css)
   Dark墨黑 base · 宣纸白 text · 朱砂 accent (≤5%, no red buttons)
   Zero external runtime requests · self-hosted fonts · mobile-first
   ════════════════════════════════════════════════════════════════ */

/* ─── Self-hosted fonts ─── */
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('/assets/fonts/noto-sans-sc-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('/assets/fonts/noto-sans-sc-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('/assets/fonts/noto-sans-sc-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('/assets/fonts/noto-sans-sc-latin-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root{
  /* background layers (ink → surface → elevated) */
  --bg:#211E1B; --bg-surface:#2A2622; --bg-elevated:#353029; --bg-hover:#3f3a32;
  /* borders */
  --border:#3a352e; --border-strong:#4a443b;
  /* text (paper white) */
  --text:#F2EDE3; --text-secondary:#b3aa99; --text-muted:#797161;
  /* brand accent — cinnabar, used sparingly */
  --brand:#D4523A; --brand-soft:rgba(212,82,58,.14);
  /* primary action — indigo (NOT red) */
  --primary:#4f7cc4; --primary-hover:#5d8ad2; --primary-on:#ffffff; --primary-soft:rgba(79,124,196,.16);
  /* semantic */
  --success:#5c9e72; --success-soft:rgba(92,158,114,.15); --warning:#c98a3c;
  /* code / terminal */
  --code-bg:#1b1916; --code-text:#c9c0b0;
  /* fonts */
  --font-hanzi:'Noto Sans SC','PingFang SC','Source Han Sans CN','Microsoft YaHei',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* radius */
  --r-lg:16px; --r-md:10px; --r-sm:7px;
  --maxw:1100px;
  --nav-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-hanzi);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--brand-soft);color:var(--text)}

/* ─── Layout primitives ─── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:84px 0;border-top:1px solid var(--border)}
.section.pt-0{padding-top:0}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--brand);
  display:inline-block;margin-bottom:14px;
}
h1,h2,h3{font-weight:700;line-height:1.2;letter-spacing:.01em}
h2{font-size:clamp(24px,3.6vw,32px);margin-bottom:14px}
h3{font-size:19px;margin-bottom:8px}
.lead{color:var(--text-secondary);font-size:17px;max-width:62ch}
.muted{color:var(--text-muted)}
.center{text-align:center}

/* ─── Nav ─── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(33,30,27,.86);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
  height:var(--nav-h);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;height:100%;padding:0 24px;
  display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:.04em}
.brand .logo{width:30px;height:30px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:6px;font-size:15px}
.nav-links a{color:var(--text-secondary);transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.ico{width:20px;height:20px;color:var(--text-secondary);transition:color .15s}
.ico:hover{color:var(--text)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--text);padding:8px;margin-left:auto}
.nav-toggle svg{width:24px;height:24px}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-hanzi);font-size:15px;font-weight:500;
  padding:11px 20px;border-radius:var(--r-md);cursor:pointer;
  border:1px solid transparent;transition:background .15s,border-color .15s,transform .04s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--text);color:var(--bg);font-weight:700}
.btn-primary:hover{background:#fff}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--text-secondary);background:var(--bg-surface)}
.btn-ghost{background:var(--primary-soft);color:var(--primary)}
.btn-ghost:hover{background:rgba(79,124,196,.26)}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ─── Hero ─── */
.hero{padding:36px 0 32px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,56px);letter-spacing:-.01em;margin-bottom:18px}
.hero .sub{font-size:19px;color:var(--text-secondary);max-width:48ch;margin-bottom:26px}
.hero .smallprint{margin-top:16px;font-size:13.5px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.02em}
.hero-phone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.hero-vid{display:block;background:#000}
.hero-vid-cap{max-width:320px;text-align:center;color:var(--text-muted);
  font-family:var(--font-mono);font-size:12px;line-height:1.6;letter-spacing:.01em}

/* ─── Hero video player (phone shell) ─── */
.phone--video .phone-screen{position:relative;overflow:hidden}
.phone--video .hero-vid{width:100%;height:100%;object-fit:cover;display:block}
/* big center play button */
.vid-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  color:#fff;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .2s ease, background .2s ease, transform .08s ease;
}
.vid-play svg{width:34px;height:34px;fill:#fff;margin-left:5px}
.vid-play:hover{background:rgba(0,0,0,.58)}
.vid-play:active{transform:translate(-50%,-50%) scale(.95)}
.vid-playing .vid-play{opacity:0;pointer-events:none}
/* bottom controls — hidden by default, reveal on hover */
.vid-controls{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:10px;
  padding:24px 12px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease;
}
.phone-screen:hover .vid-controls,
.vid-modal-frame:hover .vid-controls{opacity:1;pointer-events:auto;transform:none}
/* touch devices have no hover — keep controls visible */
@media (hover:none){.vid-controls{opacity:1;pointer-events:auto;transform:none}}
.vid-toggle,.vid-full{
  flex:0 0 auto;width:30px;height:30px;border:none;border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.vid-toggle:hover,.vid-full:hover{background:rgba(255,255,255,.16)}
.vid-toggle svg,.vid-full svg{width:20px;height:20px;fill:#fff}
.vid-full svg{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vid-toggle .i-pause{display:none}
.vid-playing .vid-toggle .i-play{display:none}
.vid-playing .vid-toggle .i-pause{display:block}
.vid-progress{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.28);position:relative;cursor:pointer}
.vid-progress:hover{background:rgba(255,255,255,.4)}
.vid-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--brand);border-radius:99px}

/* ─── Fullscreen video modal ─── */
.vid-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(8,7,6,.95);padding:0}
.vid-modal.open{display:flex}
.vid-modal-backdrop{position:absolute;inset:0;background:transparent;cursor:pointer}
.vid-modal-close{
  position:fixed;top:18px;right:22px;z-index:3;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.5);color:#fff;cursor:pointer;
  font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.vid-modal-close:hover{background:rgba(0,0,0,.7)}
.vid-modal-inner{position:relative;z-index:1;height:90vh;display:flex;align-items:center;justify-content:center}
.vid-modal-frame{
  position:relative;height:100%;max-width:96vw;
  aspect-ratio:1200 / 2608;background:#000;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.vid-modal-frame .hero-vid{width:100%;height:100%;object-fit:contain;background:#000}
@media (max-width:560px){.vid-modal-inner{height:90vh}.vid-modal-frame{max-width:98vw}}

/* ─── Generic cards / grids ─── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:26px 24px;
}
.card h3{font-size:18px;margin-bottom:10px}
.card p{color:var(--text-secondary);font-size:15.5px}
.card .ico-led{width:30px;height:30px;color:var(--brand);margin-bottom:14px}
.num{
  font-family:var(--font-mono);font-size:13px;color:var(--brand);
  letter-spacing:.1em;display:block;margin-bottom:10px;
}

/* ─── Steps (How it works) ─── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{position:relative;padding:24px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-surface)}
.step .n{font-family:var(--font-mono);font-size:14px;color:var(--primary);font-weight:500;margin-bottom:8px}
.step h3{font-size:17px;margin-bottom:6px}
.step p{color:var(--text-secondary);font-size:15px}

/* ─── Showcase (mockups B + C) ─── */
.showcase{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;margin-top:8px}

/* ─── Real-case video carousel ─── */
.case-carousel{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:28px 2px 14px}
.case-card{flex:0 0 min(78vw,278px);scroll-snap-align:start;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-surface);padding:12px}
.case-video{display:block;width:100%;aspect-ratio:884 / 1920;object-fit:cover;background:#000;border-radius:calc(var(--r-lg) - 6px)}
.case-card h3{font-size:17px;margin:14px 4px 6px}
.case-card p{margin:0 4px 4px;color:var(--text-secondary);font-size:14px;line-height:1.6}

/* ─── Phone mockup ─── */
.phone{
  width:266px;flex:0 0 auto;
  background:#15130f;
  border:1px solid var(--border-strong);
  border-radius:34px;
  padding:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  position:relative;
}
.phone::before{ /* notch */
  content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:54px;height:6px;border-radius:99px;background:var(--border-strong);z-index:2;
}
.phone-screen{
  background:var(--bg);
  border-radius:24px;
  overflow:hidden;
  height:520px;
  display:flex;flex-direction:column;
  font-size:13px;
}
/* screenshot variant — real app capture fills the screen */
.phone-screen--shot{display:block;padding:0}
.phone-screen--shot img{width:100%;height:100%;object-fit:cover;display:block}
.phone:has(.phone-screen--shot)::before{display:none}
/* Hero video phone is shrunk so the caption stays above the fold (screenshots keep full size) */
.phone--video{width:220px;cursor:pointer}
.phone--video .phone-screen{height:400px}
/* hover affordance for the click-to-play hero */
.js-hero-trigger{transition:transform .15s ease}
.js-hero-trigger:hover{transform:translateY(-2px)}
.js-hero-trigger:hover .vid-play{transform:translate(-50%,-50%) scale(1.06);background:rgba(0,0,0,.58)}
.ps-status{display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px 6px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.ps-status .dots{display:flex;gap:4px}
.ps-status .dots i{width:5px;height:5px;border-radius:50%;background:var(--text-muted);display:block}
.ps-chat{flex:1;padding:14px 14px 8px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.bubble{max-width:82%;padding:10px 13px;border-radius:14px;line-height:1.5}
.bubble.user{align-self:flex-end;background:var(--primary);color:var(--primary-on);border-bottom-right-radius:5px}
.bubble.agent{align-self:flex-start;background:var(--bg-elevated);color:var(--text);border-bottom-left-radius:5px}
.toolsteps{align-self:flex-start;max-width:92%;width:92%;
  background:var(--code-bg);border:1px solid var(--border);border-radius:12px;
  padding:10px 12px;font-family:var(--font-mono);font-size:11.5px;color:var(--code-text);
  display:flex;flex-direction:column;gap:5px}
.toolsteps .ts{display:flex;gap:7px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toolsteps .ts .ok{color:var(--success);flex:0 0 auto}
.toolsteps .ts .cmd{color:var(--text-secondary)}
.filecard{align-self:flex-start;max-width:92%;width:92%;
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:11px}
.filecard .fi{width:26px;height:26px;border-radius:7px;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.filecard .fmeta{display:flex;flex-direction:column;line-height:1.3}
.filecard .fname{font-size:12.5px;color:var(--text)}
.filecard .fsize{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted)}
.ps-input{display:flex;align-items:center;gap:10px;margin:6px 12px 14px;
  background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:99px;padding:9px 12px}
.ps-input .ph{flex:1;color:var(--text-muted);font-size:12px}
.ps-input .mi,.ps-input .se{width:18px;height:18px;flex:0 0 auto;color:var(--text-secondary)}
.ps-input .se{background:var(--brand);color:#fff;border-radius:50%;padding:3px}

/* model picker (mockup B) */
.modelpicker{align-self:center;width:92%;background:var(--bg-elevated);border:1px solid var(--border-strong);
  border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:4px}
.modelpicker .mp-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:13px;color:var(--text-secondary)}
.modelpicker .mp-row .av{width:16px;height:16px;border-radius:50%;background:var(--bg-hover);flex:0 0 auto}
.modelpicker .mp-row.on{background:var(--bg-surface);color:var(--text)}
.modelpicker .mp-row.on .av{background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* ─── Proof (real-device capture) ─── */
.proof-video{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:32px}
.proof-vid{width:100%;max-width:300px;height:auto;display:block;
  border-radius:20px;border:1px solid var(--border-strong);background:#000;
  box-shadow:0 18px 50px rgba(0,0,0,.55)}
.proof-cap{max-width:520px;text-align:center;color:var(--text-secondary);font-size:14px;line-height:1.65}

/* ─── Manifesto (brand essence · 点睛) ─── */
.manifesto{padding:84px 24px;text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(180deg,transparent,rgba(0,0,0,.18),transparent)}
.manifesto-line{font-size:clamp(21px,3.6vw,32px);font-weight:700;letter-spacing:.01em;color:var(--text);line-height:1.45}
.manifesto-sub{margin:16px auto 0;max-width:580px;color:var(--text-secondary);font-size:15px;line-height:1.75}
.manifesto-sub .dot{color:var(--brand)}

/* ─── FAQ ─── */
.faq{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.faq details{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-surface);overflow:hidden}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:500;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{color:var(--text-muted);font-family:var(--font-mono);transition:transform .2s;flex:0 0 auto}
.faq details[open] summary .plus{transform:rotate(45deg);color:var(--brand)}
.faq .ans{padding:0 20px 18px;color:var(--text-secondary);font-size:15px}

/* ─── Status / notice card ─── */
.notice{
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  background:var(--bg-surface);padding:22px 24px;margin-top:20px;
}
.notice .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--warning);display:block;margin-bottom:10px}
.notice.is-danger .tag{color:var(--brand)}

/* ─── Footer ─── */
.footer{border-top:1px solid var(--border);padding:48px 0 40px;margin-top:20px}
.footer-grid{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.footer .brand{margin-bottom:10px}
.footer .tagline{color:var(--text-secondary);font-size:14px;max-width:30ch}
.footer-cols{display:flex;gap:48px;flex-wrap:wrap}
.footer-col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;font-weight:500}
.footer-col a{display:block;color:var(--text-secondary);font-size:14.5px;padding:4px 0;transition:color .15s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:36px;padding-top:22px;border-top:1px solid var(--border);color:var(--text-muted);font-size:13px}
.lang-switch{display:flex;gap:6px;align-items:center;font-family:var(--font-mono);font-size:13px}
.lang-switch a{padding:3px 8px;border-radius:6px;color:var(--text-secondary)}
.lang-switch a.on{color:var(--text);background:var(--bg-surface)}
.lang-switch .sep{color:var(--border-strong)}

/* ─── Misc page header (download / privacy) ─── */
.page-head{padding:64px 0 8px}
.page-head h1{font-size:clamp(30px,4.6vw,44px);margin-bottom:12px}
.req-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.req-list li{display:flex;gap:10px;align-items:flex-start;color:var(--text-secondary);font-size:15.5px}
.req-list li .ck{color:var(--success);flex:0 0 auto;margin-top:3px}
.install-steps{counter-reset:istep;list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:6px}
.install-steps li{counter-increment:istep;position:relative;padding-left:42px;color:var(--text-secondary);font-size:15.5px;min-height:28px;display:flex;align-items:center}
.install-steps li::before{content:counter(istep);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border-strong);
  color:var(--primary);font-family:var(--font-mono);font-size:13px;display:flex;align-items:center;justify-content:center}
.priv-block{margin-top:24px}
.priv-block h3{font-size:17px;margin-bottom:6px}
.priv-block p{color:var(--text-secondary);font-size:15.5px}

/* ─── Responsive ─── */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero .hero-phone{justify-content:center}
  .phone--video{width:200px}
  .phone--video .phone-screen{height:360px}
  .grid-3,.steps{grid-template-columns:1fr}
  .showcase{gap:32px}
}
@media(max-width:720px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-links.open{display:flex;position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;gap:0;background:var(--bg-surface);border-bottom:1px solid var(--border);padding:8px 24px 16px}
  .nav-links.open a{padding:12px 0;border-bottom:1px solid var(--border)}
  .nav-right .gh-only{display:none}
  .section{padding:60px 0}
  .footer-grid{flex-direction:column}
}
@media(max-width:420px){
  .wrap{padding:0 18px}
  .btn{padding:10px 16px;font-size:14px}
}