@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Baloo+2:wght@500;600;700;800&display=swap');

  /* ---------- DESIGN TOKENS (Studio) ---------- */
  :root {
    --bg:        #fff7ee;
    --bg-2:      #ffeede;
    --panel:     #ffffff;
    --panel-2:   #fff3e7;
    --line:      #ffe0c2;
    --line-soft: #ffeada;
    --ink:       #2b1b4d;
    --ink-2:     #6a5a86;
    --ink-3:     #a89bbd;
    --accent:    #ff5436;
    --accent-2:  #7b4dff;
    --glow:      rgba(123,77,255,0.18);
    --code-bg:   #fff3e7;
    --shadow:    0 22px 50px -26px rgba(123,77,255,0.30);
    --punch:     #ff5436;
    --grape:     #7b4dff;
    --lagoon:    #00c2b8;
    --sun:       #ffc44d;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background .5s ease, color .5s ease;
    overflow-x: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
  }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
  a { color: inherit; text-decoration: none; }

  /* ---------- NAV ---------- */
  nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    border-bottom: 1px solid var(--line-soft);
    transition: background .5s ease, border-color .5s ease;
  }
  .nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .brand { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk'; font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
  .brand .mark {
    width: 22px; height: 22px; border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, var(--accent), var(--accent-2));
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
    flex: 0 0 auto;
  }
  .nav-right { display: flex; align-items: center; gap: 22px; }
  .nav-links { display: flex; gap: 22px; }
  .nav-links a { color: var(--ink-2); font-size: .92rem; font-weight: 450; transition: color .2s; }
  .nav-links a:hover { color: var(--ink); }

  /* ---------- BUTTONS ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: .95rem; cursor: pointer;
    border-radius: 11px; padding: 13px 22px; border: 1px solid transparent;
    transition: transform .15s, box-shadow .25s, background .25s, border-color .25s;
    font-family: inherit;
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; box-shadow: 0 10px 30px -12px var(--glow);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px var(--glow); }
  .btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
  .btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); }
  .btn small { font-weight: 400; opacity: .8; font-size: .82rem; }

  /* ---------- HERO ---------- */
  .hero { padding: 86px 0 64px; position: relative; }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(900px 480px at 72% -10%, var(--glow), transparent 60%);
    pointer-events: none;
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono'; font-size: .76rem; letter-spacing: .04em;
    color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px;
    padding: 6px 13px; margin-bottom: 26px; background: var(--panel);
  }
  .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
  h1 {
    font-family: 'Space Grotesk'; font-weight: 700;
    font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.04;
    letter-spacing: -0.025em; max-width: 16ch;
  }
  h1 .grad { background: linear-gradient(115deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .sub {
    margin-top: 22px; font-size: 1.18rem; color: var(--ink-2);
    max-width: 52ch; font-weight: 450;
  }
  .hero-cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .hero-note { margin-top: 16px; font-size: .85rem; color: var(--ink-3); font-family: 'JetBrains Mono'; }

  /* ---------- DEMO PANEL (signature) ---------- */
  .demo {
    margin-top: 58px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--panel); box-shadow: var(--shadow); overflow: hidden;
    transition: background .5s, border-color .5s;
  }
  .demo-bar {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft); background: var(--panel-2);
  }
  .demo-bar .dots { display: flex; gap: 6px; }
  .demo-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); display: block; }
  .demo-bar .title { font-family: 'JetBrains Mono'; font-size: .76rem; color: var(--ink-3); margin-left: 8px; }
  .demo-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 340px; }
  @media (max-width: 720px){ .demo-body { grid-template-columns: 1fr; } }

  .chat { padding: 20px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 14px; }
  @media (max-width: 720px){ .chat { border-right: 0; border-bottom: 1px solid var(--line-soft); } }
  .chat-label, .tools-label { font-family: 'JetBrains Mono'; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .bubble { font-size: .9rem; padding: 11px 13px; border-radius: 11px; max-width: 90%; }
  .bubble.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 3px; }
  .bubble.ai { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line-soft); border-bottom-left-radius: 3px; color: var(--ink-2); }
  .prompt-card {
    border: 1px solid var(--line); border-left: 3px solid var(--accent-2);
    background: var(--code-bg); border-radius: 9px; padding: 11px 13px;
    font-family: 'JetBrains Mono'; font-size: .78rem; color: var(--ink-2);
  }
  .prompt-card .send-row { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
  .chip {
    font-family: 'Inter'; font-size: .72rem; font-weight: 500;
    border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px;
    color: var(--ink-2); background: var(--panel); cursor: default;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .chip .pin { width: 5px; height: 5px; border-radius: 50%; }
  .chip.flow .pin{background:#e2603c} .chip.eleven .pin{background:#6e8bff} .chip.gemini .pin{background:#5B9BF5}

  .tools { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
  .tool-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
  .tool-tab { font-size: .76rem; font-weight: 500; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-3); background: var(--panel-2); }
  .tool-tab.active { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
  .tool-screen {
    flex: 1; border: 1px dashed var(--line); border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; color: var(--ink-3); font-size: .82rem; text-align: center; padding: 20px;
    background: repeating-linear-gradient(45deg, transparent, transparent 11px, var(--line-soft) 11px, var(--line-soft) 12px);
  }
  .tool-screen .filled { color: var(--ink); font-family: 'JetBrains Mono'; font-size: .78rem; border:1px solid var(--line); background: var(--panel); padding: 8px 11px; border-radius: 8px; }
  .tool-screen .ok { font-size: .72rem; color: var(--accent); }

  /* ---------- SECTION SHELL ---------- */
  section { padding: 78px 0; }
  .sec-head { max-width: 60ch; margin-bottom: 44px; }
  .sec-eyebrow { display: inline-block; font-family: 'JetBrains Mono'; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; text-decoration: none; transition: opacity .2s; }
  a.sec-eyebrow:hover { opacity: .7; }
  section[id] { scroll-margin-top: 84px; }
  h2 { font-family: 'Space Grotesk'; font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.1; }
  .sec-head p { margin-top: 14px; color: var(--ink-2); font-size: 1.06rem; }

  /* ---------- STEPS ---------- */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 800px){ .steps { grid-template-columns: 1fr; } }
  .step {
    border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px;
    background: var(--panel); transition: transform .2s, border-color .2s, background .5s;
  }
  .step:hover { transform: translateY(-4px); border-color: var(--accent); }
  .step .n { font-family: 'JetBrains Mono'; font-size: .82rem; color: var(--accent); border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 18px; }
  .step h3 { font-family: 'Space Grotesk'; font-size: 1.18rem; margin-bottom: 9px; letter-spacing: -0.01em; }
  .step p { color: var(--ink-2); font-size: .94rem; }

  /* ---------- FEATURES ---------- */
  .feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  @media (max-width: 720px){ .feat-grid { grid-template-columns: 1fr; } }
  .feat {
    border: 1px solid var(--line); border-radius: 14px; padding: 24px;
    background: var(--panel); display: flex; gap: 16px; transition: background .5s, border-color .5s;
  }
  .feat .ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--accent); }
  .feat h3 { font-family: 'Space Grotesk'; font-size: 1.06rem; margin-bottom: 6px; }
  .feat p { color: var(--ink-2); font-size: .9rem; }
  svg { display: block; }

  /* ---------- ANIMATED FEATURE PANELS ---------- */
  .fpanels { display: flex; flex-direction: column; gap: 28px; }
  .fpanel { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
    border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 40px;
    transition: background .5s, border-color .5s; overflow: hidden; }
  .fpanel.flip .fpanel-copy { order: 2; }
  .fpanel-copy .tag { display: inline-block; font-family:'JetBrains Mono'; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--accent); margin-bottom: 14px; }
  .fpanel-copy h3 { font-family: 'Space Grotesk'; font-weight: 700; font-size: 1.5rem; letter-spacing:-0.01em; margin-bottom: 12px; line-height: 1.15; }
  .fpanel-copy p { color: var(--ink-2); font-size: 1.02rem; max-width: 42ch; }
  .fpanel-demo { position: relative; height: 280px; display: flex; align-items: center; justify-content: center;
    background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 26px; overflow: hidden; }
  @media (max-width: 760px){
    .fpanel { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
    .fpanel.flip .fpanel-copy { order: 0; }
    .fpanel-demo { height: 252px; }
  }

  /* demo A — API key field typing in masked */
  .akey { width: 100%; max-width: 340px; }
  .akey-label { font-size:.78rem; color: var(--ink-2); margin-bottom: 8px; font-weight: 500; }
  .akey-field { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1.5px solid var(--line);
    border-radius: 11px; padding: 12px 14px; transition: border-color .3s, box-shadow .3s; }
  .akey-field.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
  .akey-key { flex: 1; font-family:'JetBrains Mono'; font-size:.9rem; color: var(--ink); letter-spacing: 2px; min-height: 1.2em; word-break: break-all; }
  .akey-caret { display:inline-block; width: 2px; height: 1.05em; background: var(--accent); vertical-align: -2px; margin-left: 1px; animation: caretBlink 1s step-end infinite; }
  @keyframes caretBlink { 50% { opacity: 0; } }
  .akey-eye { color: var(--ink-3); flex: 0 0 auto; }
  .akey-status { margin-top: 12px; font-size:.8rem; font-weight: 500; color: var(--lagoon, #1aa37a); opacity: 0; transition: opacity .4s; display: flex; align-items: center; gap: 6px; }
  .akey-status.show { opacity: 1; }
  .akey-providers { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
  .akey-plbl { font-size: .76rem; color: var(--ink-3); margin-right: 2px; width: 100%; margin-bottom: 2px; }
  .akey-providers .pill { font-size: .78rem; padding: 5px 12px; }

  /* demo B — adding a tool to the tab bar */
  .addtools { width: 100%; max-width: 360px; }
  .addtools-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .at-tab { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px;
    padding: 7px 11px; font-size: .8rem; font-weight: 500; color: var(--ink-2); background: var(--panel); white-space: nowrap; }
  .at-tab .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
  .at-tab.adding { animation: tabPop .45s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes tabPop { from { opacity: 0; transform: scale(.6) translateY(6px); } to { opacity: 1; transform: none; } }
  .at-add { width: 30px; height: 30px; border-radius: 9px; border: 1px dashed var(--line); color: var(--ink-3);
    display: grid; place-items: center; font-size: 1.1rem; background: transparent; transition: transform .2s, border-color .2s; }
  .at-add.pressed { transform: scale(.88); border-color: var(--accent); color: var(--accent); }
  .at-menu { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
    padding: 6px; box-shadow: var(--shadow); width: 200px; opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .25s, transform .25s; }
  .at-menu.show { opacity: 1; transform: none; }
  .at-menu-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: .82rem; color: var(--ink-2); }
  .at-menu-item.hot { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--ink); }

  /* demo C — generate → route fill */
  .route { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
  #fp-route .fpanel-demo, #fp-docs .fpanel-demo { align-items: flex-start; }
  .route-card { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--panel);
    border-radius: 10px; padding: 12px 13px; }
  .route-card .rc-lbl { font-family:'JetBrains Mono'; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-3); margin-bottom: 6px; }
  .route-card .rc-txt { font-size:.82rem; color: var(--ink-2); line-height: 1.5; }
  .route-send { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 11px; font-size:.76rem; font-weight: 500; color: var(--ink-2); background: var(--panel); transition: all .2s; }
  .route-send .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .route-send.firing { border-color: var(--accent); color: var(--accent); transform: translateX(4px); }
  .route-target { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); padding: 12px 13px;
    min-height: 56px; font-size:.82rem; color: var(--ink-3); transition: border-color .3s, box-shadow .3s, color .2s; position: relative; }
  .route-target.filled { color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
  .route-target .rt-cap { font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-3); display:block; margin-bottom: 5px; }

  /* demo D — drop a knowledge/skills doc */
  .kdocs { width: 100%; max-width: 360px; position: relative; }
  .kdocs-zone { border: 1.5px dashed var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-3); font-size: .82rem; transition: border-color .3s, background .3s, color .3s; }
  .kdocs-zone.hot { border-color: var(--accent); color: var(--accent); background: var(--glow); }
  .kdocs-zone .kd-up { opacity: .8; }
  .kd-flyer { position: absolute; top: 0; left: 50%; display: inline-flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; font-family:'JetBrains Mono'; font-size:.76rem; color: var(--ink); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, -34px) scale(.96); }
  .kd-flyer.fly { animation: kdFly 1.1s cubic-bezier(.5,0,.4,1) forwards; }
  @keyframes kdFly {
    0% { opacity: 0; transform: translate(-50%, -50px) scale(.9); }
    20% { opacity: 1; }
    75% { opacity: 1; transform: translate(-50%, 6px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, 14px) scale(.9); }
  }
  .kdocs-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
  .kd-item { display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: .82rem; color: var(--ink-2); }
  .kd-item.adding { animation: kdAdd .45s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes kdAdd { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
  .kd-item .kd-ic { flex: 0 0 auto; font-size: .9rem; }
  .kd-item .kd-name { flex: 1; font-family:'JetBrains Mono'; font-size:.76rem; color: var(--ink); }
  .kd-item .kd-check { color: var(--lagoon); font-weight: 700; }

  /* demo E — project workspaces switching */
  .pw { width: 100%; max-width: 380px; display: flex; gap: 14px; }
  .pw-rail { flex: 0 0 110px; display: flex; flex-direction: column; gap: 8px; }
  .pw-proj { font: inherit; font-size: .8rem; text-align: left; padding: 9px 11px; border-radius: 9px; cursor: pointer;
    border: 1px solid transparent; background: transparent; color: var(--ink-2); transition: all .2s; }
  .pw-proj:hover { background: var(--line-soft); }
  .pw-proj.active { background: var(--panel); border-color: var(--line); color: var(--ink); font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
  .pw-stage { flex: 1; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 12px; transition: opacity .26s ease, transform .26s ease; }
  .pw-stage.swap { opacity: 0; transform: translateY(6px); }
  .pw-model { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--ink); }
  .pw-model .pw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: 0 0 auto; }
  .pw-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
  .pw-tab { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 500; color: var(--ink-2);
    border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; background: var(--bg-2); white-space: nowrap; }
  .pw-tab .pw-tdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
  @media (max-width: 760px){ .pw { max-width: 100%; } }

  /* ---------- FAQ ---------- */
  .faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
  .faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 4px 20px; transition: background .5s, border-color .5s; }
  .faq-item summary { list-style: none; cursor: pointer; padding: 16px 0; font-family: 'Space Grotesk'; font-weight: 600; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--accent); transition: transform .25s; line-height: 1; }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-item p { color: var(--ink-2); font-size: .96rem; padding: 0 0 18px; max-width: 64ch; }

  /* providers strip */
  .providers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; align-items: center; }
  .providers .lbl { font-family:'JetBrains Mono'; font-size:.74rem; color: var(--ink-3); margin-right: 6px; }
  .pill { border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; font-size: .85rem; font-weight: 500; color: var(--ink-2); background: var(--panel); }

  /* ---------- PRICING ---------- */
  .price-wrap { max-width: 460px; margin: 0 auto; }
  .price-card {
    border: 1px solid var(--accent); border-radius: 18px; padding: 38px 34px;
    background: var(--panel); box-shadow: var(--shadow); position: relative; overflow: hidden;
  }
  .price-card::before { content:""; position:absolute; inset:0; z-index:0; background: radial-gradient(400px 200px at 80% -20%, var(--glow), transparent 70%); }
  .price-card > * { position: relative; z-index: 1; }
  .price-tag { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 4px; }
  .price-tag .amt { font-family: 'Space Grotesk'; font-weight: 700; font-size: 3rem; letter-spacing: -0.03em; }
  .price-tag .per { color: var(--ink-3); font-size: .95rem; }
  .price-trial { font-size: .9rem; color: var(--accent); font-weight: 500; margin-bottom: 22px; }
  .price-list { list-style: none; margin: 22px 0; display: flex; flex-direction: column; gap: 12px; }
  .price-list li { display: flex; gap: 11px; font-size: .94rem; color: var(--ink-2); }
  .price-list .tick { color: var(--accent); flex: 0 0 auto; }
  .price-card .btn { width: 100%; justify-content: center; margin-top: 6px; }

  /* ---------- FOOTER ---------- */
  footer { border-top: 1px solid var(--line-soft); padding: 40px 0; }
  .foot-in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
  .foot-in p { color: var(--ink-3); font-size: .86rem; }
  .foot-links { display: flex; gap: 20px; }
  .foot-links a { color: var(--ink-3); font-size: .86rem; }
  .foot-links a:hover { color: var(--ink); }

  /* ---------- SANDBOX (mirrors the real app) ---------- */
  .sandbox-shell {
    margin-top: 30px; border: 1px solid var(--line); border-radius: 14px;
    background: #0a0b0e; box-shadow: var(--shadow); overflow: hidden;
  }
  /* force the app's true dark skin regardless of site theme */
  .sandbox-shell {
    --app-bg: #0a0b0e; --app-panel: #111319; --app-line: #23262e; --app-line-soft: #1a1c22;
    --app-ink: #f3f2ef; --app-ink2: #9c9ea7; --app-ink3: #63666f; --app-amber: #e8a13c;
  }
  .sb-titlebar { display: flex; align-items: center; gap: 8px; padding: 11px 15px; background: #0d0e12; border-bottom: 1px solid var(--app-line-soft); }
  .sb-traffic { display: flex; gap: 8px; }
  .sb-traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; }
  .sb-traffic .r { background: #ff5f57; } .sb-traffic .y { background: #febc2e; } .sb-traffic .g { background: #28c840; }
  .sb-titlebar .tt { font-family:'JetBrains Mono'; font-size:.72rem; color: var(--app-ink3); margin-left: 6px; }
  .sb-titlebar .demobadge { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family:'JetBrains Mono'; font-size:.66rem; color: var(--app-amber); border:1px solid color-mix(in srgb, var(--app-amber) 40%, transparent); border-radius: 999px; padding: 3px 9px; }
  .demobadge .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--app-amber); position: relative; flex: 0 0 auto; }
  .demobadge .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: livePulse 1.8s ease-out infinite; }
  @keyframes livePulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
  @media (prefers-reduced-motion: reduce){ .demobadge .live-dot::after { animation: none; } }

  .sb-body { display: grid; grid-template-columns: 168px 320px 1fr; min-height: 470px; background: var(--app-bg); color: var(--app-ink); }
  @media (max-width: 860px){ .sb-body { grid-template-columns: 1fr; } .sb-rail { display: none !important; } .sb-chat { border-right: 0 !important; border-bottom: 1px solid var(--app-line); } }

  /* projects rail */
  .sb-rail { border-right: 1px solid var(--app-line-soft); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
  .sb-rail .proj { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-radius: 9px; font: inherit; font-size: .82rem; color: var(--app-ink2); cursor: pointer; background: transparent; border: 1px solid transparent; text-align: left; width: 100%; transition: background .18s, color .18s, border-color .18s; }
  .sb-rail .proj:hover { background: var(--app-line-soft); color: var(--app-ink); }
  .sb-rail .proj.active { background: var(--app-panel); color: var(--app-ink); border: 1px solid var(--app-line); }
  .sb-rail .proj .count { font-size: .7rem; color: var(--app-ink3); }
  .sb-rail .newproj { margin-top: 4px; text-align: center; font-size: .8rem; color: var(--app-ink3); border: 1px dashed var(--app-line); border-radius: 9px; padding: 9px; cursor: default; }

  /* project switch transition */
  .sb-chat, .sb-tools { transition: opacity .28s ease, transform .28s ease; }
  .sb-body.switching .sb-chat,
  .sb-body.switching .sb-tools { opacity: 0; transform: translateY(8px); }

  /* chat column */
  .sb-chat { display: flex; flex-direction: column; border-right: 1px solid var(--app-line-soft); min-width: 0; }
  .sb-chat-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--app-line-soft); }
  .sb-chat-head .stat { width: 8px; height: 8px; border-radius: 50%; background: var(--app-amber); box-shadow: 0 0 8px var(--app-amber); }
  .sb-chat-head .who { font-weight: 600; font-size: .9rem; }
  .sb-chat-head .pencil { color: var(--app-ink3); font-size: .8rem; }
  .sb-cardnav { margin-left: auto; display: flex; gap: 5px; }
  .sb-cardnav button { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--app-line); background: transparent; color: var(--app-ink3); font-size: .78rem; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
  .sb-cardnav button:hover { color: var(--app-ink); border-color: var(--app-amber); background: rgba(232,161,60,.08); }
  .sb-card.nav-hit { box-shadow: 0 0 0 2px var(--app-amber); transition: box-shadow .2s; }
  .sb-feed { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; max-height: 330px; }
  .sb-feed::-webkit-scrollbar { width: 8px; } .sb-feed::-webkit-scrollbar-thumb { background: var(--app-line); border-radius: 8px; }
  .sb-empty { color: var(--app-ink3); font-size: .85rem; text-align: center; margin: auto 0; padding: 0 18px; line-height: 1.6; }

  .sb-bubble { font-size: .88rem; padding: 10px 13px; border-radius: 12px; max-width: 92%; animation: rise .3s ease; }
  @keyframes rise { from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
  .sb-bubble.user { align-self: flex-end; background: var(--app-amber); color: #1a1206; font-weight: 500; border-bottom-right-radius: 3px; }
  .sb-bubble.ai { align-self: flex-start; background: var(--app-panel); border: 1px solid var(--app-line-soft); color: var(--app-ink2); border-bottom-left-radius: 3px; }

  .sb-thinking { align-self: flex-start; display: flex; gap: 5px; padding: 11px 13px; background: var(--app-panel); border:1px solid var(--app-line-soft); border-radius: 12px; }
  .sb-thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-ink3); animation: blink 1.2s infinite; }
  .sb-thinking i:nth-child(2){ animation-delay:.2s } .sb-thinking i:nth-child(3){ animation-delay:.4s }
  @keyframes blink { 0%,80%,100%{opacity:.25; transform: translateY(0)} 40%{opacity:1; transform: translateY(-3px)} }

  /* prompt cards — layout you liked, recolored to app */
  .sb-card { align-self: stretch; border: 1px solid var(--app-line); border-left: 3px solid var(--app-amber); background: #0e0f14; border-radius: 10px; padding: 12px; animation: rise .3s ease; }
  .sb-card.vo { border-left-color: #b98bff; }
  .sb-card .lbl { font-family:'JetBrains Mono'; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color: var(--app-ink3); margin-bottom: 7px; display:flex; align-items:center; gap:6px; }
  .sb-card .lbl .tag { color: var(--app-amber); } .sb-card.vo .lbl .tag { color: #b98bff; }
  .sb-card .txt { font-family:'JetBrains Mono'; font-size:.78rem; color: var(--app-ink2); line-height: 1.55; }
  .sb-send { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
  .sb-send button { font-family:'Inter'; font-size:.72rem; font-weight: 500; cursor: pointer; border: 1px solid var(--app-line); border-radius: 8px; padding: 5px 9px; color: var(--app-ink2); background: var(--app-panel); display: inline-flex; align-items: center; gap: 6px; transition: all .18s; }
  .sb-send button:hover { border-color: var(--app-amber); color: var(--app-ink); }
  .sb-send button .pin { width: 6px; height: 6px; border-radius: 50%; }
  .sb-send button.sent { border-color: var(--app-amber); color: var(--app-amber); }

  /* composer */
  .sb-composer { padding: 13px; border-top: 1px solid var(--app-line-soft); }
  .sb-starters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .sb-starters button { font-family:'Inter'; font-size:.74rem; cursor: pointer; color: var(--app-ink2); border: 1px dashed var(--app-line); border-radius: 999px; padding: 5px 11px; background: transparent; transition: all .18s; }
  .sb-starters button:hover { border-style: solid; border-color: var(--app-amber); color: var(--app-ink); }
  .sb-input-row { display: flex; gap: 8px; align-items: stretch; }
  .sb-attach { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px; border: 1px solid var(--app-line); background: #0d0e12; color: var(--app-ink3); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s; position: relative; }
  .sb-attach:hover { color: var(--app-amber); border-color: var(--app-amber); }
  .sb-attach-tip { position: absolute; bottom: calc(100% + 8px); left: 0; white-space: nowrap; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 8px; padding: 6px 10px; font-size: .74rem; color: var(--app-ink2); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .2s, transform .2s; z-index: 5; }
  .sb-attach-tip.show { opacity: 1; transform: none; }
  .sb-input-row textarea { flex: 1; font: inherit; font-size: .85rem; color: var(--app-ink); background: #0d0e12; border: 1px solid var(--app-line); border-radius: 10px; padding: 10px 12px; resize: none; height: 46px; line-height: 1.35; transition: border-color .2s; }
  .sb-input-row textarea:focus { outline: none; border-color: var(--app-amber); }
  .sb-input-row textarea::placeholder { color: var(--app-ink3); }
  .sb-input-row button { font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; color: #1a1206; background: var(--app-amber); border: 0; border-radius: 10px; padding: 0 18px; transition: opacity .2s; }
  .sb-input-row button:disabled { opacity: .4; cursor: not-allowed; }

  /* tool column */
  .sb-tools { display: flex; flex-direction: column; min-width: 0; }
  .sb-tool-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--app-line-soft); }
  .sb-tool-head .ptitle { font-family:'Space Grotesk'; font-weight: 700; font-size: 1.05rem; }
  .sb-tool-head .actions { display: flex; gap: 9px; }
  .sb-tool-head .actions span { font-size: .76rem; color: var(--app-ink3); border: 1px solid var(--app-line); border-radius: 8px; padding: 5px 11px; }
  .sb-tool-tabs { display: flex; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--app-line-soft); flex-wrap: wrap; align-items: center; }
  .sb-tool-tabs button { font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--app-line); color: var(--app-ink2); background: var(--app-panel); transition: all .18s; display:flex; align-items:center; gap:8px; }
  .sb-tool-tabs button .fav { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
  .sb-tool-tabs button.active { color: var(--app-ink); border-color: var(--app-amber); box-shadow: 0 0 0 1px var(--app-amber); }
  .sb-tool-tabs .addtool { width: 32px; height: 32px; padding: 0; justify-content: center; color: var(--app-ink3); border-style: dashed; }
  .sb-tool-view { flex: 1; position: relative; overflow: hidden; }

  /* mock tool screens — each evokes the real app */
  .sb-screen { position: absolute; inset: 0; display: none; }
  .sb-screen.active { display: flex; }
  .sb-screen .mj-body, .sb-screen .fl-body, .sb-screen .el-body, .sb-screen .cc-body, .sb-screen .rw-body, .sb-screen .su-body, .sb-screen .fg-body { flex: 1; display: flex; min-width: 0; }

  /* the auto-fill target — shared, styled per host below */
  .sb-target { transition: border-color .3s, box-shadow .3s; }
  .sb-target.flash, [data-target].flash { box-shadow: 0 0 0 3px var(--glow) !important; border-color: var(--app-amber) !important; }
  .sb-ok { font-size: .74rem; font-weight: 500; opacity: 0; transition: opacity .3s; display:flex; align-items:center; gap:6px; color: var(--app-amber); }
  .sb-ok.show { opacity: 1; }

  /* mini left-nav shared by the mock apps */
  .mock-nav { width: 132px; flex: 0 0 132px; border-right: 1px solid; padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
  .mock-nav .brand { font-weight: 700; font-size: .92rem; padding: 4px 8px 12px; }
  .mock-nav .item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: .8rem; }
  .mock-nav .item .gi { width: 14px; height: 14px; opacity: .8; }
  .mock-nav .sect { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .5; padding: 12px 9px 4px; }
  @media (max-width: 980px){ .mock-nav { display: none; } }

  .mock-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

  /* ---- MIDJOURNEY (light) ---- */
  .sb-screen[data-screen="midjourney"] { background: #fbfbfb; color: #1c1c1c; }
  .mj-bar { padding: 18px 20px 0; }
  .mj-imagine { width: 100%; display: flex; align-items: center; gap: 12px; background: #f1f1f1; border-radius: 14px; padding: 14px 18px; min-height: 52px; }
  .mj-imagine-ic, .mj-imagine-sliders { color: #8a8a8a; flex: 0 0 auto; }
  .mj-imagine-sliders { margin-left: auto; }
  .mj-imagine-txt { font-size: .92rem; color: #1c1c1c; line-height: 1.4; }
  .mj-imagine-txt.empty { color: #9a9a9a; }
  .mj-actions { padding: 12px 20px 4px; display: flex; align-items: center; gap: 14px; }
  .mj-imagine-btn { background: #1c1c1c; color: #fff; font-weight: 600; font-size: .83rem; border-radius: 10px; padding: 9px 22px; }
  .mj-filters { padding: 10px 20px 4px; display: flex; align-items: center; gap: 18px; font-size: .85rem; color: #6a6a6a; flex-wrap: wrap; }
  .mj-f { cursor: default; }
  .mj-f.active { color: #1c1c1c; font-weight: 600; }
  .mj-toggle { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  .mj-toggle .mj-t { font-size: .8rem; color: #8a8a8a; padding: 5px 11px; border-radius: 999px; }
  .mj-toggle .mj-t.on { color: #e0492f; background: #fdeeec; font-weight: 600; }
  .mj-grid { flex: 1; padding: 12px 20px 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; overflow: hidden; align-content: start; }
  .mj-tile { border-radius: 10px; aspect-ratio: 3/4; }

  /* ---- GOOGLE FLOW (dark) ---- */
  .sb-screen[data-screen="flow"] { background: #0c0c0d; color: #e9e9ea; }
  .fl-nav { background: #0c0c0d; border-color: #1d1d1f; color: #e9e9ea; }
  .fl-nav .item.active { background: #232325; }
  .fl-main { position: relative; }
  .fl-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #8a8a8d; }
  .fl-empty .rose { font-size: 2.2rem; opacity: .55; }
  .fl-promptbar { margin: 0 26px 22px; border: 1px solid #2a2a2d; border-radius: 16px; background: #161617; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
  .fl-promptbar .ptext { font-size: .85rem; color: #e9e9ea; min-height: 20px; }
  .fl-promptbar .ptext.empty { color: #6e6e72; }
  .fl-promptbar .prow { display: flex; align-items: center; gap: 10px; }
  .fl-chip { font-size: .76rem; background: #fff; color: #111; border-radius: 999px; padding: 5px 13px; font-weight: 500; }
  .fl-send { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: #2a2a2d; display: grid; place-items: center; color: #e9e9ea; }

  /* ---- ELEVENLABS (light) ---- */
  .sb-screen[data-screen="eleven"] { background: #fff; color: #111; }
  .el-nav { background: #fff; border-color: #ececec; color: #111; }
  .el-nav .item.active { background: #f3f3f3; font-weight: 600; }
  .el-main { padding: 0; }
  .el-head { padding: 16px 22px; border-bottom: 1px solid #efefef; font-weight: 600; font-size: .9rem; }
  .el-text { flex: 1; padding: 22px; font-size: .95rem; line-height: 1.5; color: #111; }
  .el-text.empty { color: #aaa; }
  .el-foot { border-top: 1px solid #efefef; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .el-foot .meta { font-size: .76rem; color: #8a8a8a; }
  .el-gen { background: #111; color: #fff; font-weight: 600; font-size: .82rem; border-radius: 9px; padding: 9px 16px; }

  /* ---- RUNWAY (dark, Project 2) ---- */
  .sb-screen[data-screen="runway"] { background: #0b0b0b; color: #ededed; }
  .rw-main { padding: 0; }
  .rw-head { padding: 16px 22px; border-bottom: 1px solid #1d1d1d; font-weight: 600; font-size: .9rem; }
  .rw-stage { flex: 1; padding: 20px 22px; display: flex; align-items: center; justify-content: center; }
  .rw-preview { width: 100%; height: 100%; min-height: 120px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; color: rgba(255,255,255,.5);
    background: linear-gradient(135deg, #1a2535, #2b1a35); border: 1px solid #242424; }
  .rw-foot { border-top: 1px solid #1d1d1d; padding: 14px 22px; display: flex; flex-direction: column; gap: 12px; }
  .rw-input { border: 1px solid #2a2a2a; border-radius: 10px; background: #141414; padding: 11px 13px; font-size: .85rem; color: #ededed; transition: border-color .3s, box-shadow .3s; }
  .rw-input.empty { color: #6a6a6a; }
  .rw-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
  .rw-gen { background: #fff; color: #000; font-weight: 600; font-size: .82rem; border-radius: 9px; padding: 9px 18px; }

  /* ---- SUNO (dark, Project 2) ---- */
  .sb-screen[data-screen="suno"] { background: #0d0c10; color: #ececef; }
  .su-main { padding: 0; }
  .su-head { padding: 16px 22px; border-bottom: 1px solid #211f28; font-weight: 600; font-size: .9rem; }
  .su-stage { flex: 1; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
  .su-label { font-size: .74rem; color: #8a8794; text-transform: uppercase; letter-spacing: .05em; }
  .su-input { border: 1px solid #2c2933; border-radius: 10px; background: #16141b; padding: 12px 13px; font-size: .85rem; color: #ececef; min-height: 60px; transition: border-color .3s, box-shadow .3s; }
  .su-input.empty { color: #6c6878; }
  .su-wave { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: 4px; }
  .su-wave span { flex: 1; background: linear-gradient(180deg,#9a6bff,#ff6ba3); border-radius: 3px; height: 30%; opacity: .55; }
  .su-wave span:nth-child(odd){ height: 70% } .su-wave span:nth-child(3n){ height: 95% } .su-wave span:nth-child(4n){ height: 45% }
  .su-foot { border-top: 1px solid #211f28; padding: 14px 22px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
  .su-gen { background: linear-gradient(135deg,#9a6bff,#ff6ba3); color: #fff; font-weight: 600; font-size: .82rem; border-radius: 9px; padding: 9px 18px; }

  /* ---- FIGMA (light, Project 2) ---- */
  .sb-screen[data-screen="figma"] { background: #f8f8f8; color: #1a1a1a; }
  .fg-main { padding: 0; }
  .fg-head { padding: 16px 22px; border-bottom: 1px solid #ececec; font-weight: 600; font-size: .9rem; }
  .fg-canvas { flex: 1; padding: 20px 22px; display: flex; gap: 14px; align-items: stretch; background: #efefef; }
  .fg-frame { flex: 1; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); position: relative; min-height: 110px; }
  .fg-frame::before { content:""; position:absolute; top:12px; left:12px; right:12px; height:10px; border-radius:4px; background:#e6e6e6; }
  .fg-frame::after { content:""; position:absolute; top:30px; left:12px; width:60%; height:8px; border-radius:4px; background:#efefef; }
  .fg-frame.alt::before { background:#dCe7ff } .fg-frame.alt::after { background:#e8efff }
  .fg-foot { border-top: 1px solid #ececec; padding: 14px 22px; display: flex; flex-direction: column; gap: 12px; }
  .fg-input { border: 1px solid #e2e2e2; border-radius: 10px; background: #fff; padding: 11px 13px; font-size: .85rem; color: #1a1a1a; transition: border-color .3s, box-shadow .3s; }
  .fg-input.empty { color: #aaa; }
  .fg-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
  .fg-gen { background: #1a1a1a; color: #fff; font-weight: 600; font-size: .82rem; border-radius: 9px; padding: 9px 18px; }

  /* reveal on scroll */
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* =========================================================
     STUDIO THEME — playful & vibrant, a different page
     ========================================================= */
  body { background:
      radial-gradient(1100px 600px at 88% -8%, rgba(123,77,255,.10), transparent 55%),
      radial-gradient(900px 520px at 5% 12%, rgba(0,194,184,.10), transparent 55%),
      var(--bg);
  }
  /* hide all the techie monospace notes */
  .hero-note,
  .eyebrow { font-family: 'Baloo 2', sans-serif; }
  .hero-note { display: none; }
  .providers .lbl { font-family: 'Baloo 2', sans-serif; text-transform: none; }
  .sec-eyebrow { font-family: 'Baloo 2', sans-serif; letter-spacing: .02em; text-transform: none; }

  /* display type → soft characterful Fraunces */
  h1,
  h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 900; letter-spacing: -0.015em; }
  h3 { font-family: 'Baloo 2', sans-serif; }
  .brand { font-family: 'Baloo 2', sans-serif; font-weight: 800; }
  .sub { font-size: 1.24rem; color: var(--ink-2); }

  /* NAV → floating rounded pill */
  nav { background: transparent; border: 0; backdrop-filter: none; padding: 14px 28px 0; }
  .nav-in { background: var(--panel); border: 2px solid var(--ink); border-radius: 20px;
      max-width: 1120px; margin: 0 auto; padding: 0 26px; box-shadow: 5px 5px 0 var(--grape); height: 60px; }
  .nav-links a { font-family: 'Baloo 2', sans-serif; font-weight: 600; }
  .nav-links a:hover { color: var(--punch); }
  .brand .mark { background: var(--punch); box-shadow: 0 0 0 2px var(--ink); border-radius: 50%; transform: none; }

  /* HERO eyebrow → sticker */
  .eyebrow { background: var(--sun); color: var(--ink); border: 2px solid var(--ink);
      border-radius: 999px; font-weight: 700; transform: rotate(-2deg); box-shadow: 3px 3px 0 rgba(43,27,77,.18); }
  .eyebrow .dot { background: var(--punch); box-shadow: none; }
  h1 .grad { background: none; -webkit-text-fill-color: currentColor; color: var(--punch); position: relative; }
  h1 .grad:nth-of-type(2) { color: var(--grape); }
  .hero::before { display: none; }

  /* BUTTONS → chunky bordered with hard shadow */
  .btn { font-family: 'Baloo 2', sans-serif; font-weight: 700; border-radius: 14px; border: 2px solid var(--ink); }
  .btn-primary { background: var(--punch); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
  .btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
  .btn-ghost { background: var(--panel); color: var(--ink); box-shadow: 4px 4px 0 var(--grape); }
  .btn-ghost:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--grape); border-color: var(--ink); }

  /* DEMO frame → playful thick rounded border instead of mac chrome */
  .sandbox-shell { border: 3px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--grape); overflow: hidden; }
  .sb-titlebar { background: var(--sun); border-bottom: 3px solid var(--ink); }
  .sb-titlebar .tt { color: var(--ink); font-family: 'Baloo 2', sans-serif; font-weight: 600; }
  .demobadge { background: var(--punch); color: #fff; border: 2px solid var(--ink); font-family: 'Baloo 2', sans-serif; }
  .demobadge .live-dot { background: #fff; }

  /* HOW IT WORKS → color-blocked cards, drop the terminal numbers' mono look */
  .step { border: 2px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); transition: transform .18s, box-shadow .18s; }
  .step:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--ink); border-color: var(--ink); }
  .step:nth-child(1) { background: #fff0f6; }
  .step:nth-child(2) { background: #f1ecff; }
  .step:nth-child(3) { background: #e6fbf8; }
  .step .n { font-family: 'Baloo 2', sans-serif; font-weight: 800; color: #fff; border: 2px solid var(--ink); border-radius: 12px; width: 40px; height: 40px; }
  .step:nth-child(1) .n { background: var(--punch); }
  .step:nth-child(2) .n { background: var(--grape); }
  .step:nth-child(3) .n { background: var(--lagoon); }

  /* FEATURES → bubbly tiles with tilted icons */
  #features { background: transparent; }
  /* animated feature panels → playful bordered cards, alternating accent shadows */
  .fpanel { border: 2px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--grape); }
  .fpanel:nth-child(2) { box-shadow: 6px 6px 0 var(--lagoon); }
  .fpanel:nth-child(3) { box-shadow: 6px 6px 0 var(--sun); }
  .fpanel:nth-child(4) { box-shadow: 6px 6px 0 var(--punch); }
  .fpanel:nth-child(5) { box-shadow: 6px 6px 0 var(--lagoon); }
  .fpanel-copy h3 { font-family: 'Baloo 2', sans-serif; font-weight: 800; }
  .fpanel-copy .tag { font-family: 'Baloo 2', sans-serif; text-transform: none; letter-spacing: 0; color: var(--punch); font-weight: 700; }
  .fpanel-demo { border: 2px solid var(--ink); border-radius: 16px; background: #fff; }
  .akey-status { color: #10a37a; }

  /* FAQ → playful */
  .faq-item { border: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--sun); }
  .faq-item:nth-child(even) { box-shadow: 4px 4px 0 var(--lagoon); }
  .faq-item summary { font-family: 'Baloo 2', sans-serif; }
  .faq-item summary::after { color: var(--punch); }

  /* provider pills → candy */
  .pill { border: 2px solid var(--ink); border-radius: 999px; font-family: 'Baloo 2', sans-serif; font-weight: 600; background: var(--panel); }
  .pill:nth-child(2){ background:#fff0f6 } .pill:nth-child(3){ background:#f1ecff }
  .pill:nth-child(4){ background:#e6fbf8 } .pill:nth-child(5){ background:#fff6e0 }
  .pill:nth-child(6){ background:#ffeae3 }
  .providers .lbl { font-weight: 600; }

  /* PRICING → bright sticker card */
  .price-card { border: 3px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--punch); }
  .price-card::before { background: radial-gradient(420px 220px at 80% -20%, rgba(255,196,77,.4), transparent 70%); }
  .price-tag .amt { font-family: 'Fraunces', serif; font-weight: 900; }
  .price-trial { color: var(--grape); font-family: 'Baloo 2', sans-serif; font-weight: 700; }
  .price-list .tick { color: var(--lagoon); }

  /* FOOTER */
  footer { border-top: 2px dashed var(--line); }
  .foot-links a:hover { color: var(--punch); }

  @media (prefers-reduced-motion: reduce){
    .btn:hover, .step:hover, .feat:hover { transform: none; }
  }

  /* =========================================================
     RESPONSIVE — tablet & mobile, down to 320px
     ========================================================= */
  @media (max-width: 920px){
    .wrap { padding: 0 20px; }
    nav { padding: 14px 20px 0; }
    .hero { padding: 60px 0 48px; }
    section { padding: 60px 0; }
  }

  @media (max-width: 720px){
    /* nav: keep brand + toggle, drop the inline links */
    .nav-links { display: none; }
    .nav-in { height: 58px; }
    .hero { padding: 44px 0 40px; }
    h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
    .sub { font-size: 1.05rem; }
    .hero-cta { gap: 10px; }
    .btn { padding: 12px 18px; font-size: .9rem; }
    .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
    section { padding: 52px 0; }
    h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
    .sec-head { margin-bottom: 32px; }

    /* sandbox: stack chat above tools, give the tool view real height */
    .sb-tool-view { min-height: 360px; }
    .sb-feed { max-height: 240px; }
    .sb-tool-head { padding: 12px 16px; }
    .sb-tool-head .ptitle { font-size: .95rem; }
    .sb-tool-tabs { padding: 11px 14px; gap: 6px; }
    .sb-tool-tabs button { padding: 6px 10px; font-size: .76rem; }
    .price-card { padding: 30px 24px; }
  }

  @media (max-width: 480px){
    .wrap { padding: 0 16px; }
    nav { padding: 12px 16px 0; }
    .hero { padding: 36px 0 32px; }
    h1 { font-size: clamp(1.75rem, 9.5vw, 2.2rem); line-height: 1.08; }
    .eyebrow { font-size: .72rem; padding: 5px 11px; }
    .sub { font-size: 1rem; }
    /* stack hero buttons full-width */
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; }
    section { padding: 44px 0; }

    /* sandbox titlebar + badge breathing room */
    .sb-titlebar { padding: 10px 12px; flex-wrap: wrap; }
    .demobadge { font-size: .6rem; }
    .sb-rail { padding: 12px 10px; }

    /* tabs scroll horizontally instead of wrapping into a tall stack */
    .sb-tool-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .sb-tool-tabs::-webkit-scrollbar { display: none; }
    .sb-tool-tabs button { flex: 0 0 auto; }
    .sb-tool-view { min-height: 320px; }

    /* mock app screens: tighten padding so content fits */
    .mj-grid { grid-template-columns: repeat(3, 1fr); padding: 12px 14px; }
    .mj-topbar { padding: 14px 14px 12px; }
    .el-text, .el-head, .el-foot { padding-left: 16px; padding-right: 16px; }
    .fl-promptbar { margin: 0 16px 18px; }

    /* feature tiles: icon above text instead of beside on tightest screens */
    .feat { flex-direction: column; gap: 12px; }

    /* pricing */
    .price-card { padding: 26px 20px; border-radius: 18px; }
    .price-tag .amt { font-size: 2.5rem; }

    /* footer wraps cleanly */
    .foot-in { flex-direction: column; align-items: flex-start; gap: 14px; }
  }

  @media (max-width: 360px){
    .wrap { padding: 0 13px; }
    nav { padding: 12px 13px 0; }
    h1 { font-size: clamp(1.6rem, 9vw, 1.95rem); }
    .brand { font-size: 1rem; }
    .mj-grid { grid-template-columns: repeat(2, 1fr); }
    .sb-rail .proj { font-size: .78rem; padding: 8px 9px; }
  }

  /* Studio nav pill: also collapse links on mobile */
  @media (max-width: 720px){
    .nav-in { box-shadow: 4px 4px 0 var(--grape); }
  }

/* ═══════════════════════════════════════════
   WAITLIST CARD (replaces pricing card at launch)
═══════════════════════════════════════════ */
.waitlist-card {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 40px;
}
.waitlist-icon { font-size: 2.8rem; color: var(--accent); margin-bottom: 16px; }
.waitlist-title { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 2rem; margin-bottom: 8px; letter-spacing: -0.015em; }
.waitlist-sub { color: var(--ink-2); font-size: .9rem; margin-bottom: 28px; }
.waitlist-form { margin-bottom: 28px; }
.waitlist-field {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.waitlist-field input[type="email"] {
  flex: 1 1 220px; padding: 13px 16px;
  border: 2px solid var(--ink); border-radius: 14px;
  font-family: inherit; font-size: .95rem; color: var(--ink);
  background: var(--panel);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.waitlist-field input[type="email"]:focus {
  border-color: var(--grape);
  box-shadow: 0 0 0 3px var(--glow);
}
.waitlist-field input[type="email"]::placeholder { color: var(--ink-3); }
.waitlist-field .btn { flex: 0 0 auto; font-family: 'Baloo 2', sans-serif; font-weight: 700; }
.waitlist-note { font-size: .85rem; color: var(--lagoon); min-height: 1.2em; margin-top: 10px; font-weight: 600; }
.waitlist-note.error { color: var(--punch); }
.waitlist-perks { list-style: none; text-align: left; display: inline-block; }
.waitlist-perks li { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-2); padding: 4px 0; }
.waitlist-perks .tick { color: var(--lagoon); font-weight: 700; }

/* Screen-reader-only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════
   MOBILE: waitlist stacks
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .waitlist-field { flex-direction: column; }
  .waitlist-field .btn { width: 100%; justify-content: center; }
  .waitlist-card { padding: 32px 20px; }
}

/* ═══════════════════════════════════════════
   LEGAL PAGES (privacy.html, terms.html)
═══════════════════════════════════════════ */
.legal { padding: 56px 0 80px; }
.legal-wrap { max-width: 760px; }
.legal-head { margin-bottom: 36px; }
.legal-head h1 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 900;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem); letter-spacing: -0.015em;
  line-height: 1.12; margin: 10px 0 14px;
}
.legal-updated { font-size: .85rem; color: var(--ink-3); }

.legal-summary {
  background: var(--panel); border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--sun); padding: 24px 26px; margin-bottom: 44px;
}
.legal-summary h2 {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.05rem;
  margin-bottom: 12px; color: var(--ink);
}
.legal-summary ul { list-style: none; }
.legal-summary li { padding: 6px 0; font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.legal-summary li strong { color: var(--ink); }

.legal section { padding: 0; margin-bottom: 30px; }
.legal section h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 900;
  font-size: 1.4rem; margin-bottom: 10px; color: var(--ink); letter-spacing: -0.015em;
}
.legal section h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-size: 1.08rem; margin: 16px 0 6px; color: var(--ink);
}
.legal section p { color: var(--ink-2); font-size: .98rem; line-height: 1.7; margin-bottom: 10px; }
.legal section ul { margin: 8px 0 12px 20px; }
.legal section li { color: var(--ink-2); font-size: .96rem; line-height: 1.65; padding: 3px 0; }
.legal section a { color: var(--grape); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal section a:hover { color: var(--punch); }
.legal code {
  font-family: 'JetBrains Mono', monospace; font-size: .85em;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px;
}

@media (max-width: 480px) {
  .legal { padding: 36px 0 56px; }
  .legal-summary { padding: 18px; box-shadow: 4px 4px 0 var(--sun); }
}