/* ============================================================
   Zorv AI · V3 Design System
   Direction: Quiet Dark Editorial / Technical Monograph
   - Matte solid color, no glow, no glass, no gradient
   - Typography-first, hairline 1px grid, monospace technical labels
   - Single restrained accent (amber). No AI-template signals.
   ============================================================ */

:root{
  /* Surfaces — flat, matte, never gradient-lit */
  --bg:        #0F0F0E;   /* page background, near-black, faint warm tint */
  --bg-soft:   #161614;   /* card / panel surface */
  --bg-soft-2: #1C1B18;   /* raised / inline-code surface */

  /* Hairlines */
  --line:        rgba(237,234,227,0.10);
  --line-strong: rgba(237,234,227,0.22);

  /* Ink — warm off-white, not pure white (avoids "techy glow") */
  --ink:        #EDEAE3;
  --ink-dim:    #A8A49B;
  --ink-faint:  #6F6B62;

  /* Single restrained accent */
  --accent:     #C9A24B;
  --accent-soft:rgba(201,162,75,0.14);

  --maxw: 1080px;
  --pad: clamp(20px, 5vw, 40px);
  --r: 6px;
  --t: 200ms;
  --ease: cubic-bezier(.2,.6,.2,1);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1, "liga" 1;
}

::selection{ background:var(--accent); color:#0F0F0E; }

a{ color:inherit; }

img,svg{ display:block; }

code{
  font-family:var(--mono);
  font-size:.88em;
  color:var(--ink);
  background:var(--bg-soft-2);
  padding:.12em .42em;
  border-radius:4px;
  border:1px solid var(--line);
  white-space:nowrap;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* ---------- Typography ---------- */
.eyebrow,
.kicker{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0;
}
.kicker::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--accent);
  display:inline-block;
}

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.02em; }

.display{
  font-size:clamp(2.6rem, 7.2vw, 5rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:600;
}
h2{
  font-size:clamp(1.7rem, 3.6vw, 2.4rem);
  line-height:1.12;
  letter-spacing:-.025em;
}
h3{ font-size:1.18rem; letter-spacing:-.01em; }

.lead{
  color:var(--ink-dim);
  font-size:clamp(1.02rem, 1.8vw, 1.2rem);
  line-height:1.65;
  max-width:60ch;
  margin:18px 0 0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:500;
  line-height:1;
  padding:13px 22px;
  border-radius:var(--r);
  border:1px solid transparent;
  text-decoration:none;
  color:var(--ink);
  cursor:pointer;
  transition:background var(--t) var(--ease),
             border-color var(--t) var(--ease),
             color var(--t) var(--ease),
             transform var(--t) var(--ease);
}
.btn--primary{ background:var(--ink); color:#0F0F0E; }
.btn--primary:hover{ background:#fff; transform:translateY(-1px); }
.btn--ghost{ background:transparent; border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--ink); background:rgba(237,234,227,0.04); }
.btn--text{ background:transparent; color:var(--ink-dim); padding:13px 6px; }
.btn--text:hover{ color:var(--accent); }
.btn--lg{ padding:16px 28px; font-size:1rem; }
.btn svg{ width:18px; height:18px; }

/* ---------- Nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:16px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.01em;
  font-size:1.02rem;
}
.brand__mark{ color:var(--accent); display:flex; }
.brand__ai{ color:var(--accent); }

.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a{
  text-decoration:none;
  color:var(--ink-dim);
  font-size:.92rem;
  transition:color var(--t) var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__gh{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:.8rem;
  letter-spacing:.04em;
  border:1px solid var(--line);
  padding:8px 13px;
  border-radius:var(--r);
}
.nav__gh:hover{ border-color:var(--line-strong); color:var(--ink); }
.nav__gh svg{ width:15px; height:15px; }

.nav__toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r);
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  width:18px;
  height:1.5px;
  margin:0 auto;
  background:var(--ink);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

/* ---------- Hero ---------- */
.hero{ padding:clamp(64px,10vw,120px) 0 clamp(56px,8vw,104px); }
.hero__inner{ max-width:880px; }
.hero .eyebrow{ margin-bottom:28px; }
.hero .display{ color:var(--ink); }
.hero .display .accent{ color:var(--accent); }
.hero__sub{
  margin:26px 0 0;
  font-size:clamp(1.05rem, 2vw, 1.25rem);
  line-height:1.6;
  color:var(--ink-dim);
  max-width:54ch;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }

/* ---------- Section scaffold ---------- */
.section{ padding:clamp(72px,11vw,128px) 0; border-top:1px solid var(--line); }
.section--plain{ border-top:none; }

.sec-head{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:40px;
  align-items:start;
}
.sec-head__aside .kicker{ position:sticky; top:96px; }
.sec-head h2{ margin-top:2px; }
.sec-head .lead{ margin-top:18px; }

/* ---------- ACI · four-piece grid ---------- */
.puzzle{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  margin-top:52px;
}
.piece{ background:var(--bg); padding:34px; }
.piece__idx{ font-family:var(--mono); font-size:.78rem; color:var(--accent); letter-spacing:.08em; }
.piece h4{ font-size:1.18rem; font-weight:600; margin:14px 0 10px; letter-spacing:-.01em; }
.piece p{ margin:0; color:var(--ink-dim); font-size:.97rem; line-height:1.65; }

/* ---------- Governance layer ---------- */
.gov{ margin-top:72px; }
.gov__title{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 4px;
}
.gov__list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 56px;
  margin-top:24px;
  border-top:1px solid var(--line);
}
.gov__item{
  display:flex;
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.gov__num{ font-family:var(--mono); font-size:.78rem; color:var(--ink-faint); padding-top:3px; min-width:22px; }
.gov__body b{ font-weight:600; font-size:1rem; }
.gov__body code{ margin-left:8px; font-size:.8rem; }
.gov__body span{ display:block; color:var(--ink-dim); font-size:.92rem; margin-top:5px; line-height:1.6; }

/* ---------- Core capability cards ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;
  margin-top:52px;
}
.card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:30px;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.card__idx{ font-family:var(--mono); font-size:.76rem; color:var(--ink-faint); letter-spacing:.06em; }
.card__ico{
  margin:16px 0 18px;
  color:var(--ink-dim);
  transition:color var(--t) var(--ease);
}
.card:hover .card__ico{ color:var(--accent); }
.card__ico svg{ width:26px; height:26px; }
.card h3{ font-size:1.16rem; font-weight:600; margin-bottom:9px; }
.card p{ margin:0; color:var(--ink-dim); font-size:.96rem; line-height:1.62; }
.tag--soon{
  display:inline-block;
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 9px;
  margin-left:10px;
  vertical-align:middle;
}

/* ---------- Download ---------- */
.download{
  display:grid;
  grid-template-columns:1.45fr .85fr;
  gap:52px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(32px,5vw,56px);
}
.download__main .kicker{ margin-bottom:22px; }
.download__main h2{ margin-bottom:16px; }
.download__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.download__note{
  margin:30px 0 0;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.04em;
  color:var(--ink-faint);
}
.download__meta{
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--line);
  padding-left:32px;
}
.meta-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:.84rem;
}
.meta-row:last-child{ border-bottom:none; }
.meta-row > span{ color:var(--ink-faint); letter-spacing:.04em; }
.meta-row code{ font-size:.8rem; }
.meta-row .ok{ color:var(--accent); }
.bm-title{ font-size:1.3rem; margin:16px 0 10px; letter-spacing:-.01em; font-weight:600; }
.bm-desc{ font-size:.9rem; color:var(--ink-faint); line-height:1.6; margin-bottom:20px; }
.bm-desc code{ font-size:.82rem; }
.btn--block{ width:100%; justify-content:center; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding:54px 0 40px; }
.footer__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:28px;
}
.footer__brand .brand{ margin-bottom:12px; }
.footer__brand p{ margin:0; color:var(--ink-faint); font-size:.9rem; }
.footer__links{ display:flex; flex-wrap:wrap; gap:24px; }
.footer__links a{
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--ink-dim);
  text-decoration:none;
  transition:color var(--t) var(--ease);
}
.footer__links a:hover{ color:var(--ink); }
.footer__copy{
  max-width:var(--maxw);
  margin:36px auto 0;
  padding:24px var(--pad) 0;
  border-top:1px solid var(--line);
  color:var(--ink-faint);
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.04em;
}

/* ---------- Scroll reveal (motion-safe only) ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .sec-head{ grid-template-columns:1fr; gap:20px; }
  .sec-head__aside .kicker{ position:static; }
  .puzzle{ grid-template-columns:1fr; }
  .gov__list{ grid-template-columns:1fr; gap:0; }
  .download{ grid-template-columns:1fr; gap:36px; }
  .download__meta{ border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:8px; }
}

@media (max-width:760px){
  .nav__links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px var(--pad) 18px;
    display:none;
  }
  .nav__links.open{ display:flex; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav__gh{ margin-top:10px; justify-content:center; }
  .nav__toggle{ display:flex; }
  .cards{ grid-template-columns:1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn,.card{ transition:none; }
  *{ animation:none !important; }
}