/*
    Layout concept: terminal-chrome landing page. An oversized app-window
    hero (traffic lights, real toolbar, commit graph + diff) bleeds past the
    fold; "+ / -" diff markers stand in for bullets and section numbering
    throughout; the feature grid reads like a row of inspector panes.
    Single dark world on purpose, mirroring the app's own native dark UI.
  */
  :root{
    color-scheme: dark;
    --bg:          #1c1c1e;
    --bg-elevated: #232325;
    --bg-content:  #19191b;
    --bg-card:     #1f1f22;
    --line:        rgba(255,255,255,.09);
    --line-soft:   rgba(255,255,255,.055);
    --text:        #f2f2f5;
    --text-2:      #a2a3aa;
    --text-3:      #6e6f76;
    --accent:      #4e8bff;
    --accent-dim:  rgba(78,139,255,.14);
    --green:       #43c46d;
    --red:         #ff6b54;
    --amber:       #e6a23c;
    --indigo:      #5e5ce6;
    --pink:        #d6336c;

    --font-display: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%}
  a{color:inherit}
  ::selection{background:var(--accent-dim);color:var(--text)}

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding-inline:24px;
  }

  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:-0.01em;
    text-wrap:balance;
    margin:0;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-3);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:7px;height:7px;border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 3px var(--accent-dim);
    flex:none;
  }

  code, .mono{font-family:var(--font-mono)}

  /* ---------- Nav ---------- */
  header.nav{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px}
  .brand .dots{display:flex; gap:5px}
  .brand .dots span{width:9px;height:9px;border-radius:50%;display:block}
  .brand .dots span:nth-child(1){background:#ff5f57}
  .brand .dots span:nth-child(2){background:#febc2e}
  .brand .dots span:nth-child(3){background:#28c840}
  .brand b{font-family:var(--font-display)}

  nav.links{display:flex; gap:28px; font-size:14px; color:var(--text-2)}
  nav.links a{text-decoration:none}
  nav.links a:hover{color:var(--text)}

  .btn{
    font-family:var(--font-body);
    font-size:14px;
    font-weight:600;
    padding:10px 18px;
    border-radius:8px;
    border:1px solid transparent;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    transition:transform .15s ease, border-color .15s ease, background .15s ease;
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--accent); color:#fff}
  .btn-primary:hover{background:#3d7af0}
  .btn-ghost{background:transparent; color:var(--text); border-color:var(--line)}
  .btn-ghost:hover{border-color:color-mix(in srgb, var(--text) 30%, transparent)}

  /* ---------- Hero ---------- */
  .hero{padding:76px 0 40px}
  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
    text-align:center;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(34px,5.4vw,58px);
    line-height:1.08;
    margin-top:18px;
  }
  .hero h1 .hl{color:var(--accent)}
  .hero p.lede{
    max-width:600px;
    margin:18px auto 0;
    color:var(--text-2);
    font-size:17px;
  }
  .hero-ctas{
    display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap;
  }
  .hero-note{
    margin-top:14px;
    font-size:12.5px;
    color:var(--text-3);
    font-family:var(--font-mono);
  }

  /* ---------- Window mockup ---------- */
  .stage{
    margin-top:52px;
    perspective:1400px;
  }
  .window{
    background:var(--bg-elevated);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.65), 0 10px 30px -15px rgba(0,0,0,.5);
    transform:rotateX(2deg);
  }
  .titlebar{
    height:44px;
    display:flex;align-items:center;gap:16px;
    padding:0 14px;
    background:var(--bg-elevated);
    border-bottom:1px solid var(--line);
  }
  .tl{display:flex;gap:7px}
  .tl span{width:11px;height:11px;border-radius:50%;display:block}
  .tl span:nth-child(1){background:#ff5f57}
  .tl span:nth-child(2){background:#febc2e}
  .tl span:nth-child(3){background:#28c840}
  .repo-chip{
    display:flex; align-items:center; gap:8px;
    font-size:12.5px; color:var(--text-2);
    background:var(--bg-card);
    border:1px solid var(--line-soft);
    border-radius:6px; padding:5px 10px;
  }
  .repo-chip b{color:var(--text); font-weight:600}
  .repo-chip .branch{color:var(--amber); font-family:var(--font-mono); font-size:11.5px}
  .tb-actions{display:flex; gap:6px; margin-left:auto}
  .tb-actions .ta{
    font-size:11px; color:var(--text-2); font-family:var(--font-mono);
    padding:5px 9px; border-radius:6px; border:1px solid var(--line-soft);
  }
  .tb-actions .ta.active{color:var(--text); border-color:var(--line); background:var(--bg-card)}

  .app-body{display:grid; grid-template-columns:200px 1fr 1fr; min-height:420px}
  @media (max-width:860px){ .app-body{grid-template-columns:1fr} .app-body .sidebar{display:none} }

  .sidebar{
    background:var(--bg-elevated);
    border-right:1px solid var(--line);
    padding:16px 12px;
    font-size:12.5px;
  }
  .sb-label{
    font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
    color:var(--text-3); text-transform:uppercase; margin:14px 6px 6px;
  }
  .sb-label:first-child{margin-top:0}
  .sb-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 8px; border-radius:6px; color:var(--text-2);
  }
  .sb-row.active{background:var(--accent-dim); color:var(--text)}
  .sb-row .n{font-family:var(--font-mono); font-size:10.5px; color:var(--text-3)}
  .sb-branch{padding:4px 8px; color:var(--text-2); display:flex; align-items:center; gap:6px}
  .sb-branch::before{content:"⑂"; font-size:11px; color:var(--text-3)}

  .history{background:var(--bg-content); border-right:1px solid var(--line)}
  .hist-row{
    display:flex; gap:10px; align-items:flex-start;
    padding:11px 16px; border-bottom:1px solid var(--line-soft);
  }
  .hist-dot{width:9px;height:9px;border-radius:50%; margin-top:5px; flex:none}
  .hist-msg{font-size:12.5px; color:var(--text); line-height:1.4}
  .hist-meta{display:flex; gap:8px; margin-top:4px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-3)}
  .tag{
    font-family:var(--font-mono); font-size:9.5px; font-weight:600;
    padding:1px 6px; border-radius:4px; background:var(--accent-dim); color:var(--accent);
    margin-right:6px;
  }

  .diff{background:var(--bg-content); font-family:var(--font-mono); font-size:12px}
  .diff-head{
    padding:10px 16px; border-bottom:1px solid var(--line);
    color:var(--text-2); font-size:11.5px; display:flex; justify-content:space-between;
  }
  .diff-line{padding:3px 16px; white-space:pre; color:var(--text-2)}
  .diff-line.add{background:rgba(67,196,109,.10); color:#9fe3b4}
  .diff-line.add::before{content:"+ "; color:var(--green)}
  .diff-line.del{background:rgba(255,107,84,.10); color:#ffb3a3}
  .diff-line.del::before{content:"- "; color:var(--red)}
  .diff-line.ctx::before{content:"  "}

  /* ---------- Sections ---------- */
  section{padding:88px 0}
  .section-head{max-width:640px; margin:0 auto 48px; text-align:center}
  .section-head h2{font-size:clamp(26px,3.6vw,36px); margin-top:14px}
  .section-head p{color:var(--text-2); margin-top:14px; font-size:16px}

  .grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
  }
  @media (max-width:860px){ .grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .grid{grid-template-columns:1fr} }

  .card{
    background:var(--bg-card);
    padding:26px 22px;
    min-width:0;
  }
  .card .mark{
    font-family:var(--font-mono); font-size:13px; font-weight:700;
    width:28px;height:28px; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:16px;
  }
  .card h3{font-family:var(--font-body); font-size:15px; font-weight:600}
  .card p{font-size:13.5px; color:var(--text-2); margin:8px 0 0}

  .m-blue{background:rgba(78,139,255,.15); color:var(--accent)}
  .m-green{background:rgba(67,196,109,.15); color:var(--green)}
  .m-amber{background:rgba(230,162,60,.15); color:var(--amber)}
  .m-indigo{background:rgba(94,92,230,.15); color:var(--indigo)}
  .m-pink{background:rgba(214,51,108,.15); color:var(--pink)}
  .m-red{background:rgba(255,107,84,.15); color:var(--red)}

  /* ---------- Engine / trust ---------- */
  .engine{
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  }
  @media (max-width:820px){ .engine{grid-template-columns:1fr} }
  .engine h2{font-size:clamp(24px,3.2vw,32px)}
  .engine p{color:var(--text-2); margin-top:14px; font-size:15.5px}
  .spec-list{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px}
  .spec-list li{display:flex; gap:12px; font-size:14.5px; color:var(--text)}
  .spec-list li::before{content:"›"; color:var(--accent); font-family:var(--font-mono); font-weight:700}

  .stack-panel{
    background:var(--bg-card); border:1px solid var(--line); border-radius:12px;
    padding:22px; font-family:var(--font-mono); font-size:12.5px;
  }
  .stack-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line-soft)}
  .stack-row:last-child{border-bottom:none}
  .stack-row .k{color:var(--text-3)}
  .stack-row .v{color:var(--text)}

  /* ---------- Locales ---------- */
  .locales{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  }
  @media (max-width:700px){ .locales{grid-template-columns:repeat(2,1fr)} }
  .locale{background:var(--bg-card); padding:24px 20px; text-align:center}
  .locale .code{font-family:var(--font-mono); font-size:11px; color:var(--text-3); letter-spacing:.08em}
  .locale .word{font-size:19px; font-weight:600; margin-top:10px}
  .locale .en{font-size:12.5px; color:var(--text-2); margin-top:4px}

  /* ---------- CTA / Footer ---------- */
  .cta{
    text-align:center;
    background:radial-gradient(ellipse at 50% 0%, rgba(78,139,255,.12), transparent 60%);
    border-top:1px solid var(--line-soft);
  }
  .cta h2{font-size:clamp(26px,4vw,40px)}
  .cta p{color:var(--text-2); margin-top:14px}
  .status-pill{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:12px; color:var(--text-2);
    border:1px solid var(--line); border-radius:999px; padding:7px 14px;
    margin-top:28px;
  }
  .status-pill span.dot{width:6px;height:6px;border-radius:50%; background:var(--amber)}

  footer{border-top:1px solid var(--line-soft); padding:36px 0}
  .foot-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px}
  .foot-inner .brand{font-size:13px; color:var(--text-2)}
  .foot-inner .meta{font-family:var(--font-mono); font-size:12px; color:var(--text-3)}

  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
    .reveal.in{opacity:1; transform:none}
    .window{transition:transform .6s ease}
  }

/* ---------- Legal pages ---------- */
.legal{padding:64px 0 100px}
.legal .back{
  font-family:var(--font-mono); font-size:13px; color:var(--text-2);
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.legal .back:hover{color:var(--text)}
.legal h1{
  font-size:clamp(28px,4vw,40px);
  margin-top:20px;
}
.legal .updated{
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-3);
  margin-top:10px;
}
.legal .prose{max-width:680px; margin-top:40px}
.legal .prose h2{
  font-family:var(--font-body); font-size:19px; font-weight:600;
  margin-top:40px; margin-bottom:12px;
}
.legal .prose h2:first-child{margin-top:0}
.legal .prose p{color:var(--text-2); font-size:15px; margin:0 0 14px}
.legal .prose ul{color:var(--text-2); font-size:15px; margin:0 0 14px; padding-left:20px}
.legal .prose li{margin-bottom:8px}
.legal .prose strong{color:var(--text); font-weight:600}
.legal .prose a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.legal .prose code{
  background:var(--bg-card); border:1px solid var(--line-soft);
  border-radius:4px; padding:1px 6px; font-size:13.5px;
}
.legal .callout{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:10px; padding:16px 18px; margin:0 0 28px;
  font-size:14px; color:var(--text-2);
}
.legal .callout strong{color:var(--text)}