:root{
  --bg:#0c1411; --bg2:#101b17; --ink:#eef1e8; --mute:#a3b0a6; --line:rgba(238,241,232,.12);
  --moss:#7fa38a; --amber:#f2b66d; --rose:#e98a6b; --sky:#8fb8c9;
  --serif:'Instrument Serif',Georgia,serif; --sans:'Manrope',system-ui,sans-serif;
  --r:22px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--amber)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* nav */
.nav{position:fixed;inset:14px 0 auto;z-index:50;margin:0 auto;width:min(1120px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 20px;border:1px solid var(--line);border-radius:999px;background:rgba(12,20,17,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink)}
.brand svg{color:var(--amber)}
.brand em{font-size:1.15em}
.nav nav{display:flex;align-items:center;gap:26px;font-size:15px;color:var(--mute)}
.nav nav a:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;border:0;background:var(--amber);color:#1a1208;font:600 16px var(--sans);cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(242,182,109,.55)}
.btn-sm{padding:10px 18px;font-size:14px;color:#1a1208!important}
.btn-lg{padding:20px 36px;font-size:clamp(16px,2.4vw,22px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{box-shadow:none;border-color:var(--mute)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(120% 80% at 70% 15%,rgba(242,182,109,.20),transparent 55%),
             radial-gradient(90% 70% at 10% 0%,rgba(143,184,201,.12),transparent 60%),
             linear-gradient(180deg,#14221d 0%,var(--bg) 100%)}
.contours{position:absolute;inset:-10%;opacity:.5;
  background:repeating-radial-gradient(ellipse at 72% 38%,transparent 0 26px,rgba(238,241,232,.07) 27px 28px);
  mask-image:radial-gradient(70% 70% at 70% 40%,#000,transparent 80%);-webkit-mask-image:radial-gradient(70% 70% at 70% 40%,#000,transparent 80%)}
.hero-inner{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:140px 24px 220px;width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);font-weight:600;margin-bottom:22px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em}
h1{font-size:clamp(46px,9vw,124px);max-width:11ch;max-width:14ch}
h2{font-size:clamp(36px,5.6vw,72px);max-width:18ch;margin-bottom:22px}
.lead{font-size:clamp(17px,1.8vw,21px);color:var(--mute);max-width:56ch;margin-top:26px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.ridges{position:absolute;left:0;bottom:-1px;width:100%;height:46vh;min-height:240px;z-index:1}
.ridges path{will-change:transform}
.r1{fill:#2a4a3d}.r2{fill:#1b3329}.r3{fill:#0c1411}

/* strip */
.strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px;padding:30px 24px;border-block:1px solid var(--line);color:var(--mute);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.strip i{width:5px;height:5px;border-radius:50%;background:var(--moss);opacity:.6}

/* sections */
.section{padding:clamp(80px,12vw,160px) 0}
.alt{background:var(--bg2);border-block:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.card{position:relative;padding:34px 30px 30px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-6px);border-color:rgba(242,182,109,.5)}
.card .num{position:absolute;top:26px;right:28px;font-size:13px;color:var(--mute);letter-spacing:.1em}
.ico{width:52px;height:52px;color:var(--amber);margin-bottom:26px}
.card h3{font-size:34px;margin-bottom:12px}
.card p{color:var(--mute);font-size:16px}
.card ul{list-style:none;padding:0;margin-top:22px;border-top:1px solid var(--line)}
.card li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.card li::before{content:"↗";color:var(--moss);margin-right:10px}

.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:start}
.prose p{color:var(--mute);margin-bottom:18px;font-size:18px}
.facts{margin-top:34px;display:grid;gap:0}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.facts dt{font-weight:600}.facts dd{color:var(--mute);margin:0;font-size:16px}

/* next */
.next{position:relative;background:radial-gradient(80% 50% at 50% 0%,rgba(127,163,138,.14),transparent 70%)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 0 rgba(233,138,107,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(233,138,107,0)}100%{box-shadow:0 0 0 0 rgba(233,138,107,0)}}
.studio{margin-top:56px;border:1px solid var(--line);border-radius:var(--r);background:#0a110e;overflow:hidden;box-shadow:0 40px 100px -40px rgba(0,0,0,.8)}
.studio-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--mute)}
.studio-bar i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.studio-bar span{margin-left:12px}
.who{margin-left:auto;display:flex;gap:6px}
.who b{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;color:#10120e}
.you{--c:var(--sky)}.des{--c:var(--amber)}.ai{--c:var(--moss)}
.who b{background:var(--c)}
.studio-body{display:grid;grid-template-columns:1.5fr 1fr}
.canvas{position:relative;padding:40px;min-height:340px;background:
  radial-gradient(circle,rgba(238,241,232,.09) 1px,transparent 1.5px) 0 0/22px 22px}
.mock{border-radius:14px;background:#17251f;border:1px solid var(--line);padding:18px;display:grid;gap:16px}
.mock-nav{height:10px;width:40%;border-radius:6px;background:var(--line)}
.mock-hero{padding:26px 18px;border-radius:10px;background:linear-gradient(135deg,rgba(242,182,109,.35),rgba(233,138,107,.15))}
.mock-hero .l1{height:16px;width:70%;border-radius:6px;background:rgba(238,241,232,.8)}
.mock-hero .l2{height:10px;width:45%;border-radius:6px;background:rgba(238,241,232,.4);margin-top:12px}
.mock-btn{height:26px;width:90px;border-radius:99px;background:var(--amber);margin-top:18px}
.mock-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mock-row div{height:62px;border-radius:10px;background:rgba(238,241,232,.07)}
.cursor{position:absolute;font-size:12px;font-weight:700;padding:3px 9px;border-radius:0 10px 10px 10px;color:#10120e;animation:float 7s ease-in-out infinite}
.cursor::before{content:"";position:absolute;left:-6px;top:-6px;border:6px solid transparent;border-bottom-color:inherit}
.c-you{background:var(--sky);top:52%;left:58%}
.c-des{background:var(--amber);top:34%;left:22%;animation-delay:-2s}
.c-ai{background:var(--moss);top:70%;left:34%;animation-delay:-4s}
@keyframes float{50%{transform:translate(22px,-14px)}}
.thread{list-style:none;padding:26px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:14px;justify-content:center}
.thread li{font-size:15px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.thread b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;color:var(--c)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:48px 0 70px}
.trio div{padding-top:18px;border-top:1px solid var(--line)}
.trio h4{font-size:30px;margin-bottom:8px}.trio p{color:var(--mute);font-size:16px}
.waitlist{max-width:560px}
.waitlist label{display:block;font-family:var(--serif);font-size:34px;margin-bottom:14px}
.field{display:flex;gap:10px;padding:6px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04)}
.field input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font:inherit;padding:0 18px;outline:0}
.field:focus-within{border-color:var(--amber)}
.hp{position:absolute;left:-9999px}
.note{margin-top:12px;color:var(--mute);font-size:14px}
.note.ok{color:var(--moss)}.note.err{color:var(--rose)}

.contact{text-align:center;background:linear-gradient(180deg,transparent,rgba(242,182,109,.08))}
.contact h2,.contact .lead{margin-inline:auto}
.contact .btn{margin-top:36px}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:28px 24px;border-top:1px solid var(--line);color:var(--mute);font-size:14px;max-width:1160px;margin:0 auto}

/* motion */
.reveal{opacity:0;transform:translateY(24px);animation:in .9s cubic-bezier(.2,.7,.2,1) forwards}
.reveal:nth-child(2){animation-delay:.1s}.reveal:nth-child(3){animation-delay:.2s}.reveal:nth-child(4){animation-delay:.3s}
@keyframes in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}.cursor,.pulse{animation:none}html{scroll-behavior:auto}}

@media (max-width:860px){
  .nav nav a:not(.btn){display:none}
  .grid,.trio,.split,.studio-body{grid-template-columns:1fr}
  .thread{border-left:0;border-top:1px solid var(--line)}
  .facts div{grid-template-columns:1fr;gap:4px}
  .hero-inner{padding:120px 20px 180px}
}