/* ============================================================
   STARLING — light design system
   Primary: white / violet-tinted paper
   Second primary: royal violet (from the violet-backed starling)
   Accent: eye-yellow
   ============================================================ */

:root {
  /* violet ramp (royal) */
  --v-50:  #f5f3ff;
  --v-100: #ede9fe;
  --v-200: #ddd6fe;
  --v-300: #c4b5fd;
  --v-400: #a78bfa;
  --v-500: #8b5cf6;
  --v-600: #7c3aed;
  --v-700: #6d28d9;
  --v-800: #5b21b6;
  --v-900: #4c1d95;

  /* primary (tweakable shade) */
  --primary:        var(--v-700);
  --primary-strong: var(--v-800);
  --primary-deep:   var(--v-900);
  --primary-soft:   var(--v-100);
  --primary-tint:   var(--v-50);
  --on-primary:     #ffffff;

  /* accent — eye yellow */
  --accent:      #ffd83a;
  --accent-deep: #f3c200;
  --accent-ink:  #2a2200;

  /* neutrals (faint violet tint) */
  --bg:        #ffffff;
  --paper:     #f7f5fb;
  --paper-2:   #f1eef8;
  --ink:       #17131f;
  --ink-soft:  #4b4458;
  --ink-faint: #8b8498;
  --line:      #eae6f2;
  --line-2:    #e1dcec;

  /* type */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: var(--font-sans);

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);

  --radius: 16px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(23,19,31,.05), 0 2px 8px rgba(23,19,31,.04);
  --shadow:    0 10px 30px -12px rgba(76,29,149,.22), 0 4px 12px rgba(23,19,31,.05);
  --shadow-lg: 0 40px 80px -28px rgba(76,29,149,.32), 0 12px 32px -12px rgba(23,19,31,.10);

  --ease: cubic-bezier(.4,0,.1,1);
}

/* ---- VIOLET SHADE tweak ---- */
[data-violet="bright"] { --primary: var(--v-600); --primary-strong: var(--v-700); --primary-deep: var(--v-800); }
[data-violet="deep"]   { --primary: var(--v-800); --primary-strong: var(--v-900); --primary-deep: #3b1378; }

/* ---- YELLOW intensity tweak: controls accent saturation/usage ---- */
[data-yellow="subtle"]   { --accent: #ffe680; --accent-deep: #ffd83a; }
[data-yellow="bold"]     { --accent: #ffd000; --accent-deep: #f0b400; }

/* ============================================================ base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
h1,h2,h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; line-height: 1.04; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(72px, 11vw, 150px); position: relative; }

/* eyebrow / section label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: lowercase;
}
.eyebrow::before { content: "//"; color: var(--ink-faint); font-weight: 600; }

.lede {
  color: var(--ink-soft);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  max-width: 56ch;
  text-wrap: pretty;
}
.lede strong { color: var(--ink); font-weight: 700; }

/* ============================================================ buttons */
.btn {
  --bg-btn: var(--primary);
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15.5px;
  padding: 13px 22px; border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--primary) 70%, transparent); }
.btn-primary:hover { background: var(--primary-strong); box-shadow: 0 12px 26px -8px color-mix(in oklab, var(--primary) 70%, transparent); transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 12px 26px -10px color-mix(in oklab, var(--accent-deep) 80%, transparent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.32); }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); border-color: #fff; }

/* ============================================================ nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.scrolled { border-color: var(--line); background: color-mix(in oklab, var(--bg) 88%, transparent); }
.nav-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 4px; margin-left: 18px; }
.nav-links a {
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  padding: 8px 13px; border-radius: 9px; transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--ink); background: var(--paper); }
.nav-spacer { flex: 1; }
.nav-gh { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px;
  padding: 9px 15px; border-radius: 10px; border: 1px solid var(--line-2); transition: .18s var(--ease); }
.nav-gh:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
@media (max-width: 760px){ .nav-links { display: none; } }

/* ============================================================ HERO */
.hero { position: relative; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero-eyebrow { margin-bottom: 26px; }
.hero h1 {
  font-size: clamp(48px, 8.2vw, 104px);
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.hero h1 .accentword { color: var(--primary); position: relative; white-space: nowrap; }
.hero .lede { margin-top: 28px; font-size: clamp(18px, 1.85vw, 22px); }
.hero-cta { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.hero-meta { margin-top: 40px; display: flex; gap: 26px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }
.hero-meta b { color: var(--ink); font-weight: 600; }

/* hero art — flock of birds */
.hero-art { position: relative; height: 100%; min-height: 360px; display: grid; place-items: center; }
.hero-glow { position: absolute; inset: -10% -20%; background:
  radial-gradient(60% 60% at 60% 40%, color-mix(in oklab, var(--primary) 22%, transparent), transparent 70%);
  filter: blur(8px); z-index: 0; }
.bird-main { width: clamp(220px, 30vw, 380px); height: auto; position: relative; z-index: 2;
  filter: drop-shadow(0 26px 40px rgba(76,29,149,.28)); }
.bird-echo { position: absolute; opacity: .16; z-index: 1; }
.bird-echo.e1 { width: 84px; left: 6%; top: 60%; }
.bird-echo.e2 { width: 52px; left: 20%; top: 78%; opacity: .1; }
.bird-echo.e3 { width: 120px; right: 2%; top: 10%; opacity: .1; }

@media (max-width: 880px){
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; min-height: 230px; }
  .bird-main { width: clamp(180px, 46vw, 260px); }
}

/* entrance — visible end-state is the BASE; we animate FROM hidden, so
   content shows even if the transition never fires (resolves to .in via IO). */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.hero-copy > .reveal:nth-child(1){ transition-delay: .02s; }
.hero-copy > .reveal:nth-child(2){ transition-delay: .10s; }
.hero-copy > .reveal:nth-child(3){ transition-delay: .20s; }
.hero-copy > .reveal:nth-child(4){ transition-delay: .30s; }
.hero-copy > .reveal:nth-child(5){ transition-delay: .38s; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}
@media (prefers-reduced-motion: no-preference){
  .bird-main { animation: floaty 7s ease-in-out infinite; }
}
@keyframes floaty { 0%,100%{ transform: translateY(0) rotate(-1deg);} 50%{ transform: translateY(-14px) rotate(1deg);} }

/* ============================================================ ENGINE / render demo */
.engine { background: var(--paper); border-block: 1px solid var(--line); }
.engine-head { max-width: 720px; }
.engine-head h2 { font-size: clamp(30px, 4.4vw, 50px); margin-top: 18px; }
.engine-head h2 em { font-style: italic; color: var(--primary); font-weight: 800; }
.engine-head .lede { margin-top: 20px; }

.browser {
  margin-top: 46px; border-radius: var(--radius-lg); background: #fff;
  border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); overflow: hidden;
}
.browser-bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--bg), var(--paper)); }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.dots i:nth-child(1){ background: #ffbdbd; } .dots i:nth-child(2){ background: var(--accent); } .dots i:nth-child(3){ background: #b9f0c6; }
.addr { flex: 1; display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 13.5px;
  color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; }
.addr .scheme { color: var(--primary); font-weight: 600; }
.addr .lock { width: 13px; height: 13px; opacity: .6; }
.browser-tag { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.render-slot { width: 100%; aspect-ratio: 16 / 9; display: block; }
.render-slot image-slot { width: 100%; height: 100%; }

/* ============================================================ STATUS */
.status-head { max-width: 720px; }
.status-head h2 { font-size: clamp(30px, 4.4vw, 50px); margin-top: 18px; }
.status-head .lede { margin-top: 20px; }

.metrics-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 48px; }
.metric-big {
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 30px 32px;
  background: var(--bg); box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.metric-big .mlabel { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); display: flex; justify-content: space-between; }
.metric-big .mlabel .tag { color: var(--primary); }
.metric-big .mnum { font-size: clamp(52px, 7vw, 76px); font-weight: 800; letter-spacing: -0.04em; margin-top: 14px; line-height: 1;
  font-variant-numeric: tabular-nums; }
.metric-big .mnum span { font-size: .5em; color: var(--ink-faint); font-weight: 600; margin-left: 4px; }
.bar { height: 9px; border-radius: 99px; background: var(--paper-2); margin-top: 22px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--primary-strong)); transition: width 1.4s var(--ease); }
.metric-big .msub { font-size: 14px; color: var(--ink-faint); margin-top: 14px; }

.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.chip {
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 20px 22px; background: var(--bg);
  display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.chip:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.chip .ctop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chip .cname { font-weight: 700; font-size: 16.5px; }
.chip .cdesc { font-size: 13.5px; color: var(--ink-faint); font-family: var(--font-mono); }
.badge { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 7px; letter-spacing: .02em; white-space: nowrap; }
.badge.ok    { background: var(--accent); color: var(--accent-ink); }
.badge.spec  { background: var(--primary-soft); color: var(--primary-strong); }
.badge.wip   { background: var(--paper-2); color: var(--ink-soft); }

@media (max-width: 820px){ .metrics-feature { grid-template-columns: 1fr; } .metrics-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .metrics-grid { grid-template-columns: 1fr; } }

/* ============================================================ APPROACH */
.approach { background: var(--paper); border-block: 1px solid var(--line); }
.approach-head { max-width: 860px; }
.approach-head h2 { font-size: clamp(30px, 4.6vw, 54px); margin-top: 18px; max-width: 18ch; }
.approach-head h2 em { font-style: normal; color: var(--primary); }
.approach-head .lede { margin-top: 22px; }
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 52px; }
.card {
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  padding: 32px 30px 34px; position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card .cnum {
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; border: 1.5px solid var(--primary-soft); background: var(--primary-tint);
}
.card h3 { font-size: 22px; margin-top: 22px; font-weight: 700; letter-spacing: -0.02em; }
.card p { margin-top: 12px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, var(--primary-tint), transparent 70%); opacity: 0; transition: opacity .3s; }
.card:hover::after { opacity: 1; }
@media (max-width: 820px){ .cards { grid-template-columns: 1fr; } }

/* ============================================================ CTA (violet full-bleed) */
.cta { background:
    radial-gradient(120% 120% at 80% -10%, var(--primary-strong), transparent 55%),
    linear-gradient(160deg, var(--primary-deep), var(--primary-strong));
  color: #fff; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 26px 26px; mask: radial-gradient(80% 80% at 50% 30%, #000, transparent 75%); opacity: .5; }
.cta-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.cta .eyebrow { color: var(--v-200); }
.cta .eyebrow::before { color: rgba(255,255,255,.5); }
.cta h2 { font-size: clamp(32px, 5vw, 60px); margin-top: 20px; max-width: 16ch; color: #fff; }
.cta p.note { margin-top: 24px; color: var(--v-200); font-family: var(--font-mono); font-size: 13px; }
.cta-actions { display: flex; flex-direction: column; gap: 14px; }
.cta-bird { width: 150px; opacity: .95; filter: drop-shadow(0 18px 30px rgba(0,0,0,.3)); margin-bottom: 10px; }
@media (max-width: 760px){ .cta-inner { grid-template-columns: 1fr; } }

/* ============================================================ FOOTER */
.footer { padding-block: 52px; border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer .brand { font-size: 17px; }
.footer .brand img { width: 26px; height: 26px; }
.footer-links { display: flex; gap: 22px; margin-left: 8px; }
.footer-links a { font-size: 14.5px; color: var(--ink-soft); }
.footer-links a:hover { color: var(--primary); }
.footer .copy { margin-left: auto; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }

/* ============================================================ DIRECTION: TERMINAL */
[data-direction="terminal"] {
  --font-display: var(--font-mono);
  --radius-lg: 12px; --radius: 9px;
}
[data-direction="terminal"] body { background: var(--bg); }
[data-direction="terminal"] .hero { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; background-position: center; }
[data-direction="terminal"] .hero::after { content:""; position:absolute; inset:0; z-index:1; background: radial-gradient(80% 70% at 50% 30%, transparent, var(--bg) 85%); pointer-events:none; }
[data-direction="terminal"] .hero h1 { font-size: clamp(38px, 6.4vw, 82px); letter-spacing: -0.04em; font-weight: 700; }
[data-direction="terminal"] .hero h1::before { content: "› "; color: var(--primary); }
[data-direction="terminal"] .hero h1 .accentword::after { content: "_"; color: var(--accent-deep); animation: blink 1.1s steps(1) infinite; }
[data-direction="terminal"] h2, [data-direction="terminal"] .card h3 { font-weight: 700; }
[data-direction="terminal"] .btn { border-radius: 8px; }
[data-direction="terminal"] .metric-big, [data-direction="terminal"] .chip, [data-direction="terminal"] .card { border-radius: 10px; }
@keyframes blink { 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }

/* ============================================================ DIRECTION: PLAYFUL */
[data-direction="playful"] .hero {
  background:
    radial-gradient(70% 90% at 88% 0%, var(--primary-tint), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, color-mix(in oklab, var(--accent) 28%, transparent), transparent 60%);
}
[data-direction="playful"] .hero h1 { font-size: clamp(52px, 9vw, 116px); }
[data-direction="playful"] .hero h1 .accentword {
  color: var(--ink);
  background: linear-gradient(transparent 62%, var(--accent) 62% 92%, transparent 92%);
  padding-inline: 4px;
}
[data-direction="playful"] .bird-main { width: clamp(240px, 36vw, 460px); }
[data-direction="playful"] .bird-echo { opacity: .26; }
[data-direction="playful"] .btn-primary { border-radius: 99px; }
[data-direction="playful"] .btn-ghost { border-radius: 99px; }
[data-direction="playful"] .nav-gh { border-radius: 99px; }
[data-direction="playful"] .eyebrow { background: var(--primary-tint); padding: 5px 12px; border-radius: 99px; }
[data-direction="playful"] .eyebrow::before { content: "✦"; }
[data-direction="playful"] .chip:hover, [data-direction="playful"] .card:hover { box-shadow: 0 24px 50px -20px color-mix(in oklab, var(--primary) 45%, transparent); }
[data-direction="playful"] .metric-big .mnum { color: var(--primary); }

/* tweak-hidden helper for tweaks panel default */
[hidden] { display: none !important; }


/* ---- production: static render placeholder ---- */
.render-ph {
  position: relative; width: 100%; height: 100%;
  display: grid; place-items: center; gap: 16px;
  background:
    radial-gradient(120% 150% at 85% -20%, var(--v-100), transparent 55%),
    repeating-linear-gradient(135deg, var(--paper) 0 11px, #fff 11px 22px);
}
.render-ph-bird { width: 82px; opacity: .55; filter: drop-shadow(0 12px 22px rgba(76,29,149,.18)); }
.render-ph-cap { font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; color: var(--ink-faint); }