/* ============================================================
   zimmboard — landing
   Aesthetic: a warm studio wall. Sticky-note project cards on
   paper, honey accent, a board you can see your AI's hand on.
   Type: Space Grotesk (display) · Inter (body) · Space Mono (data)
   ============================================================ */

:root{
  --ink:#211F26;
  --ink-soft:#5A5650;
  --paper:#EFEBDD;
  --paper-2:#F7F4EC;
  --line:#DCD6C5;
  --honey:#DE9527;
  --honey-deep:#BC7C18;
  --canvas:#1B1D29;       /* dark board, shared with the app */
  --canvas-2:#23263456;
  /* chalky sticky-note palette */
  --n-sage:#9DBE9A; --n-clay:#D79E78; --n-butter:#E4C25E;
  --n-sky:#8FB1D6;  --n-lilac:#B6A3D6; --n-blue:#86ABD9;
  --n-rose:#D596A4; --n-teal:#79C0B3;  --n-slate:#98A4B8;

  --r:14px;
  --shadow:0 1px 0 rgba(0,0,0,.04), 0 10px 30px -16px rgba(40,33,20,.45);
  --shadow-lift:0 1px 0 rgba(0,0,0,.05), 0 22px 50px -22px rgba(40,33,20,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:"Inter",system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
     radial-gradient(1200px 600px at 80% -10%, #F4EFE0 0%, transparent 60%),
     radial-gradient(900px 500px at -10% 20%, #F1ECDD 0%, transparent 55%);
}
a{color:inherit}
h1,h2,h3{font-family:"Space Grotesk",sans-serif; font-weight:600; letter-spacing:-.02em; line-height:1.08; margin:0}
.mono{font-family:"Space Mono",monospace}

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

/* ---- nav ---- */
.nav{position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.2) blur(8px);
  background:color-mix(in srgb, var(--paper) 78%, transparent); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-family:"Space Grotesk"; font-weight:600; font-size:20px; letter-spacing:-.02em; text-decoration:none}
.brand .dot{width:22px; height:22px; border-radius:7px; background:var(--honey);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.08); display:grid; place-items:center}
.brand .dot::after{content:""; width:9px; height:9px; border-radius:2px; background:var(--canvas)}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{text-decoration:none; color:var(--ink-soft); font-size:15px; font-weight:500}
.nav-links a:hover{color:var(--ink)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:"Space Grotesk"; font-weight:600;
  font-size:15px; padding:11px 18px; border-radius:11px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, background .15s}
.btn-primary{background:var(--honey); color:#231a08; box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 8px 20px -10px var(--honey-deep)}
.btn-primary:hover{background:var(--honey-deep); color:#fff; transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--paper-2); border-color:#cdc6b2}
.btn-lg{padding:14px 24px; font-size:16px; border-radius:13px}

/* ---- hero ---- */
.hero{display:grid; grid-template-columns:1.05fr 1fr; gap:54px; align-items:center; padding:74px 0 54px}
.eyebrow{font-family:"Space Mono"; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--honey-deep); margin-bottom:20px}
.hero h1{font-size:clamp(34px,5vw,56px)}
.hero h1 em{font-style:normal; color:var(--honey-deep); position:relative; white-space:nowrap}
.hero h1 em::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.36em; background:rgba(222,149,39,.22); z-index:-1; border-radius:3px}
.lede{font-size:19px; color:var(--ink-soft); margin:22px 0 30px; max-width:38ch}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero-note{margin-top:16px; font-size:13.5px; color:var(--ink-soft)}
.hero-note .mono{color:var(--honey-deep)}

/* ---- the living mini-board (hero signature) ---- */
.demo{background:var(--canvas);
  border-radius:20px; padding:18px; box-shadow:var(--shadow-lift); position:relative; overflow:hidden;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0); background-size:22px 22px}
.demo-bar{display:flex; align-items:center; gap:7px; padding:2px 4px 14px}
.demo-bar i{width:11px; height:11px; border-radius:50%; background:#3a3d4e; display:inline-block}
.demo-bar .t{margin-left:8px; font-family:"Space Mono"; font-size:11.5px; color:#7C8099}
.demo-bar .live{margin-left:auto; font-family:"Space Mono"; font-size:11px; color:#cdd3e6; display:flex; align-items:center; gap:7px}
.demo-bar .live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--honey); box-shadow:0 0 0 0 rgba(222,149,39,.7); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(222,149,39,.6)}70%{box-shadow:0 0 0 9px rgba(222,149,39,0)}100%{box-shadow:0 0 0 0 rgba(222,149,39,0)}}
.demo-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.card{background:#262938; border:1px solid #313548; border-radius:13px; padding:13px 14px; position:relative}
.card.wide{grid-column:1 / -1}
.card .spine{position:absolute; left:0; top:13px; bottom:13px; width:4px; border-radius:4px}
.card h4{font-family:"Space Grotesk"; font-weight:600; font-size:14px; color:#EDEFF7; margin:0 0 9px 8px; letter-spacing:-.01em}
.card ul{list-style:none; margin:0; padding:0 0 0 8px; display:flex; flex-direction:column; gap:7px}
.card li{display:flex; align-items:flex-start; gap:9px; font-size:12.6px; color:#AEB4C6; line-height:1.35}
.tick{flex:0 0 auto; width:15px; height:15px; border-radius:5px; border:1.5px solid #44495f; margin-top:1px; display:grid; place-items:center; transition:.25s}
.tick.done{background:var(--n-sage); border-color:var(--n-sage)}
.tick.done::after{content:"✓"; font-size:10px; color:#10241a; font-weight:700}
li.done span{color:#69708A; text-decoration:line-through; text-decoration-color:#566}
.due{margin-left:auto; font-family:"Space Mono"; font-size:10px; color:#7C8099; padding-left:8px}

.demo-foot{margin-top:13px; padding:10px 12px; background:#20222f; border:1px solid #2c3043; border-radius:11px; font-family:"Space Mono"; font-size:11px; color:#9aa1bb; display:flex; gap:9px; align-items:center}
.demo-foot b{color:var(--honey); font-weight:400}

/* #192: the build-itself hero demo — cards pop in as the AI "reads the plan" */
.demo-grid .card{transition:opacity .55s ease, transform .55s ease}
.demo-grid .card.hide{opacity:0; transform:translateY(12px) scale(.97)}
.planchip{position:absolute; top:56px; left:50%; transform:translate(-50%,-8px); z-index:3;
  display:flex; align-items:center; gap:8px; background:var(--paper-2); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:8px 14px;
  font-family:"Space Mono"; font-size:12px; box-shadow:var(--shadow-lift);
  opacity:0; pointer-events:none; transition:opacity .4s ease, transform .4s ease}
.planchip.show{opacity:1; transform:translate(-50%,0)}
.planchip .pcicon{color:var(--honey-deep); font-weight:700}

/* ---- problem strip ---- */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2); padding:40px 0}
.strip h2{font-size:22px; margin-bottom:24px}
.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.col .k{font-family:"Space Mono"; font-size:12px; color:var(--honey-deep); margin-bottom:7px}
.col p{margin:0; color:var(--ink-soft); font-size:15.5px}

/* ---- sections ---- */
.section{padding:72px 0}
.section-head{max-width:54ch; margin-bottom:40px}
.section-head .eyebrow{margin-bottom:14px}
.section-head h2{font-size:clamp(26px,3.4vw,36px)}
.section-head p{color:var(--ink-soft); margin:14px 0 0; font-size:17.5px}

/* steps (a real sequence → numbered) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.step{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow)}
.step .num{font-family:"Space Mono"; font-size:13px; color:#231a08; background:var(--honey); width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-weight:700; margin-bottom:16px}
.step h3{font-size:19px; margin-bottom:8px}
.step p{margin:0; color:var(--ink-soft); font-size:15px}
.step code{font-family:"Space Mono"; font-size:12.5px; background:#2a2d3b; color:#e7ebf6; padding:2px 6px; border-radius:5px}

/* teams band */
.band{background:var(--canvas); color:#E7EAF3; border-radius:22px; padding:46px; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; box-shadow:var(--shadow-lift)}
.band h2{color:#fff; font-size:30px}
.band p{color:#AEB4C6; margin:14px 0 0; font-size:16.5px}
.band .who{display:flex; flex-direction:column; gap:12px}
.whorow{display:flex; align-items:center; gap:12px; background:#23263a; border:1px solid #2f3346; padding:12px 14px; border-radius:12px; font-size:14px; color:#cfd4e4}
.whorow .av{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-family:"Space Grotesk"; font-weight:600; font-size:13px; color:#15110a}
.whorow .mono{margin-left:auto; color:#7f86a0; font-size:11px}

/* cta + footer */
.cta-final{text-align:center; padding:84px 0 30px}
.cta-final h2{font-size:clamp(28px,4vw,44px); margin-bottom:14px}
.cta-final p{color:var(--ink-soft); margin:0 auto 28px; max-width:46ch; font-size:18px}
footer{border-top:1px solid var(--line); padding:28px 0; color:var(--ink-soft); font-size:14px; display:flex; justify-content:space-between; align-items:center}
footer .mono{font-size:12px}

@media (max-width:880px){
  .hero{grid-template-columns:1fr; gap:36px; padding:48px 0 30px}
  .cols,.steps{grid-template-columns:1fr}
  .band{grid-template-columns:1fr; padding:32px}
  .nav-links a:not(.btn){display:none}
}