:root {
    --void: #07040d;
    --surface: #110a1f;
    --surface-2: #1a1130;
    --border: rgba(168, 139, 250, 0.14);
    --border-strong: rgba(168, 139, 250, 0.28);
    --brand: #8b5cf6;
    --brand-bright: #a78bfa;
    --lilac: #c4b5fd;
    --paper: #f5f3ff;
    --muted: #9a90b4;
    --faint: #6b6286;
    --font-display: 'Archivo', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--void);
    color: var(--paper);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* Ambient glow from top, like blink.new */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
    isolation: isolate;
  }
  .hero::before {
    content: "";
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 720px;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139, 92, 246, 0.35), rgba(124, 58, 237, 0.12) 40%, transparent 70%);
    filter: blur(20px);
    z-index: -2;
    pointer-events: none;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(196, 181, 253, 0.07) 1px, transparent 0);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 75%);
    z-index: -1;
    pointer-events: none;
  }

  /* Nav */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px max(32px, calc((100% - 1280px) / 2 + 4px));
    z-index: 100;
    transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s, padding 0.3s;
    border-bottom: 1px solid transparent;
  }
  nav.scrolled {
    background: rgba(10, 7, 18, 0.72);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--border);
    padding-top: 14px; padding-bottom: 14px;
  }
  .brand { display: flex; align-items: center; gap: 11px; }
  .brand-mark {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(150deg, #c4b5fd, #7c3aed 55%, #2d1b69);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 17px;
    color: #fff;
    box-shadow: 0 0 22px rgba(124, 58, 237, 0.5);
  }
  .brand-name {
    font-family: var(--font-mono);
    font-size: 15px; font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--paper);
  }
  .nav-links { display: flex; gap: 38px; }
  .nav-links a {
    font-family: 'Geist', sans-serif;
    font-size: 15px; font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--paper); }
  .nav-cta {
    font-family: 'Geist', sans-serif;
    font-size: 14px; font-weight: 500; letter-spacing: 0;
    color: var(--paper);
    text-decoration: none;
    border: 1px solid var(--border-strong);
    padding: 9px 18px;
    border-radius: 999px;
    transition: all 0.2s;
  }
  .nav-cta:hover { background: rgba(139, 92, 246, 0.14); border-color: var(--brand-bright); }

  /* Hero center */
  .hero-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 920px;
    padding: 90px 0 80px;
    width: 100%;
  }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(26, 17, 48, 0.6);
    backdrop-filter: blur(8px);
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 42px;
    text-decoration: none;
    transition: border-color 0.2s;
    opacity: 0;
    animation: rise 0.7s 0.05s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  .pill:hover { border-color: var(--border-strong); }
  .pill-tag {
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.1em;
    color: #ddd6fe;
    background: rgba(139, 92, 246, 0.22);
    padding: 3px 9px;
    border-radius: 999px;
  }
  .pill-arrow { color: var(--brand-bright); transition: transform 0.2s; }
  .pill:hover .pill-arrow { transform: translateX(3px); }

  h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-stretch: 125%;
    font-size: clamp(42px, 6.6vw, 88px);
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--paper);
    margin-bottom: 30px;
    opacity: 0;
    animation: rise 0.8s 0.12s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  h1 .it {
    font-style: italic;
    font-weight: 600;
    font-stretch: 100%;
    background: linear-gradient(100deg, #c4b5fd, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  h1 .line1, h1 .line2 { display: block; }
  h1 .line2 { margin-top: 2px; }

  .sub {
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.6;
    color: var(--muted);
    max-width: 620px;
    margin-bottom: 44px;
    opacity: 0;
    animation: rise 0.8s 0.2s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  .sub .pay { color: var(--lilac); }

  /* Prompt box */
  .composer {
    width: 100%;
    max-width: 720px;
    opacity: 0;
    animation: rise 0.8s 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  .tabs {
    display: flex;
    gap: 4px;
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
  }
  .tab {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 18px 13px;
    font-size: 13.5px; font-weight: 500;
    color: var(--faint);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    transition: all 0.18s;
    font-family: var(--font-body);
  }
  .tab svg { width: 15px; height: 15px; opacity: 0.7; }
  .tab:hover { color: var(--muted); }
  .tab.active {
    color: var(--paper);
    background: var(--surface);
    border-color: var(--border);
  }
  .tab.active svg { opacity: 1; }

  .box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0 16px 16px 16px;
    padding: 20px 20px 16px;
    text-align: left;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  }
  .box-input {
    min-height: 88px;
    font-size: 15.5px;
    color: var(--muted);
    line-height: 1.5;
    padding: 4px 2px;
  }
  .box-input .cursor {
    display: inline-block;
    width: 2px; height: 18px;
    background: var(--brand-bright);
    vertical-align: -3px;
    margin-left: 1px;
    animation: blink 1.1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  .box-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
  }
  .box-left { display: flex; align-items: center; gap: 10px; }
  .chip {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--muted);
    border: 1px solid var(--border);
    background: rgba(26, 17, 48, 0.5);
    padding: 7px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: var(--font-body);
  }
  .chip:hover { border-color: var(--border-strong); color: var(--paper); }
  .chip svg { width: 14px; height: 14px; }
  .box-right { display: flex; align-items: center; gap: 10px; }
  .icon-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.18s;
  }
  .icon-btn:hover { color: var(--paper); border-color: var(--border-strong); }
  .icon-btn svg { width: 17px; height: 17px; }
  .send {
    width: 40px; height: 40px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(150deg, #a78bfa, #7c3aed);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.45);
    transition: transform 0.15s, box-shadow 0.2s;
  }
  .send:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(124, 58, 237, 0.65); }
  .send svg { width: 18px; height: 18px; }

  /* quick action chips below */
  .quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
    opacity: 0;
    animation: rise 0.8s 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  .quick-chip {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px;
    color: var(--muted);
    border: 1px solid var(--border);
    background: rgba(17, 10, 31, 0.5);
    padding: 9px 15px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: var(--font-body);
  }
  .quick-chip:hover { border-color: var(--border-strong); color: var(--paper); background: rgba(26,17,48,0.7); }
  .quick-chip svg { width: 14px; height: 14px; opacity: 0.7; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 720px) {
    .nav-links { display: none; }
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab { flex-shrink: 0; }
    .box-input .label-text { font-size: 14px; }
  }

/* extra vars from dev section */
:root{
    --void:#07040d;--surface:#110a1f;--surface-2:#1a1130;--ade:#0c0a14;--ade-2:#13101f;
    --border:rgba(168,139,250,0.14);--border-strong:rgba(168,139,250,0.28);
    --brand:#8b5cf6;--brand-bright:#a78bfa;--lilac:#c4b5fd;--paper:#f5f3ff;--muted:#9a90b4;--faint:#6b6286;
    --green:#5dcaa5;--red:#ff5577;--amber:#fbbf24;
    --font-display:'Archivo',sans-serif;--font-body:'Inter',sans-serif;--font-mono:'JetBrains Mono',monospace;
  }

  
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--void);color:var(--paper);font-family:var(--font-body);-webkit-font-smoothing:antialiased;padding:90px 0 70px}
  .wrap{max-width:1320px;margin:0 auto;padding:0 32px}

  .sec-head{margin-bottom:42px;max-width:760px}
  .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-bright);margin-bottom:18px;display:flex;align-items:center;gap:10px}
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--brand)}
  h2{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(30px,4.4vw,56px);letter-spacing:-.03em;line-height:1.0;margin-bottom:20px}
  h2 .it{font-style:italic;font-weight:600;font-stretch:100%;background:linear-gradient(100deg,#c4b5fd,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .lead{font-size:17px;color:var(--muted);line-height:1.6;max-width:620px}
  .lead b{color:var(--paper);font-weight:500}

  /* ADE window */
  .ade{background:var(--ade);border:1px solid var(--border-strong);border-radius:14px;overflow:hidden;box-shadow:0 50px 120px -30px rgba(124,58,237,.4)}
  .titlebar{height:42px;background:#0a0810;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:14px}
  .tdots{display:flex;gap:7px}.tdots i{width:11px;height:11px;border-radius:50%;display:block}
  .tdots .r{background:#ff5f57}.tdots .y{background:#febc2e}.tdots .g{background:#28c840}
  .tpath{font-family:var(--font-mono);font-size:12px;color:var(--faint)}
  .tright{margin-left:auto;display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:11px;color:var(--muted)}
  .badge{display:flex;align-items:center;gap:6px;background:rgba(93,202,165,.12);color:var(--green);padding:4px 10px;border-radius:6px;font-size:10.5px;font-weight:500}
  .badge .pulse{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(93,202,165,.5);animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(93,202,165,.5)}70%{box-shadow:0 0 0 6px rgba(93,202,165,0)}100%{box-shadow:0 0 0 0 rgba(93,202,165,0)}}

  .body{display:grid;grid-template-columns:200px minmax(0,1fr) 330px;height:472px}
  .body>*{min-height:0;min-width:0}
  /* below 1100: drop the swarm column to its own full-width row under the editor */
  @media(max-width:1100px){
    .body{grid-template-columns:190px minmax(0,1fr);grid-template-rows:420px auto;height:auto}
    .tree{grid-row:1}
    .editor{grid-row:1;grid-column:2}
    .agents-col{grid-row:2;grid-column:1 / -1;border-left:none;border-top:1px solid var(--border)}
    /* 5 equal cards across the full width — a pipeline strip */
    .agents{display:grid !important;grid-template-columns:repeat(5,1fr);gap:10px;overflow:visible !important;align-items:stretch;flex:none}
    .agent{flex-direction:column;align-items:stretch;gap:0;padding:14px}
    .agent .ai{margin-bottom:10px}
    .agent .aname{font-size:12.5px}
    .agent .astatus{margin-top:6px}
    /* in the strip, hide the verbose disagreement detail so cards stay even height */
    .agent .disagree,.agent .resolve{display:none}
    .agent .tick{margin-left:8px}
  }
  @media(max-width:820px){
    .agents{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:720px){
    .body{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto}
    .tree{display:none}
    .editor{grid-column:1;grid-row:1}
    .agents-col{grid-column:1;grid-row:2}
    .agents{grid-template-columns:1fr}
  }

  /* file tree */
  .tree{background:var(--ade-2);border-right:1px solid var(--border);padding:14px 0;overflow:hidden}
  .tree-sec{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:6px 16px 8px}
  .tnode{display:flex;align-items:center;gap:8px;padding:5px 16px 5px 16px;font-family:var(--font-mono);font-size:12.5px;color:var(--muted);cursor:default}
  .tnode.ind{padding-left:30px}.tnode.ind2{padding-left:44px}
  .tnode.active{background:rgba(139,92,246,.14);color:var(--paper);border-left:2px solid var(--brand-bright);padding-left:14px}
  .tnode.ind.active{padding-left:28px}
  .tnode svg{width:13px;height:13px;flex-shrink:0;opacity:.8}
  .tnode .dot{width:6px;height:6px;border-radius:2px;flex-shrink:0}
  .tnode .mod{margin-left:auto;color:var(--amber);font-size:10px}

  /* editor */
  .editor{background:var(--ade);display:flex;flex-direction:column;overflow:hidden;min-height:0}
  .tabs{display:flex;height:38px;border-bottom:1px solid var(--border);background:#0a0810}
  .etab{display:flex;align-items:center;gap:8px;padding:0 16px;font-family:var(--font-mono);font-size:12px;color:var(--faint);border-right:1px solid var(--border)}
  .etab.on{background:var(--ade);color:var(--paper);border-top:2px solid var(--brand-bright)}
  .etab .x{opacity:.5}
  .code{flex:0 0 auto;overflow:hidden;padding:14px 0 8px;font-family:var(--font-mono);font-size:12.5px;line-height:1.7}
  .ln{display:flex;padding:0 16px}
  .ln .num{width:30px;color:#3a3550;text-align:right;margin-right:18px;flex-shrink:0;user-select:none}
  .ln.add{background:rgba(93,202,165,.1)}
  .ln.add .num{color:var(--green)}
  .ln.add::before{content:"+";position:absolute;margin-left:-12px;color:var(--green)}
  .ln.del{background:rgba(255,85,119,.09)}
  .ln.del .num{color:var(--red)}
  .ln.del::before{content:"\2212";position:absolute;margin-left:-12px;color:var(--red)}
  .kw{color:#c084fc}.fn{color:#7dd3fc}.str{color:#5dcaa5}.cm{color:#5a5470;font-style:italic}.num2{color:#fbbf24}.var{color:#e0d4ff}.op{color:#9a90b4}

  /* agents panel */
  .agents-col{background:var(--ade-2);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
  .ap-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
  .ap-head .t{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .ap-head .run{font-family:var(--font-mono);font-size:10px;color:var(--faint)}
  .agents{padding:10px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;min-height:0;flex:1 1 auto;scrollbar-width:thin;scrollbar-color:rgba(168,139,250,.25) transparent}
  .agent{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.02);border:1px solid transparent}
  .agent.done{opacity:.65}
  .agent.active{background:rgba(139,92,246,.1);border-color:var(--border-strong)}
  .agent.reject{background:rgba(255,85,119,.08);border-color:rgba(255,85,119,.25)}
  .ai{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:600;flex-shrink:0;margin-top:1px}
  .ai.p{background:rgba(96,165,250,.18);color:#7dd3fc}
  .ai.c{background:rgba(167,139,250,.2);color:#c4b5fd}
  .ai.cr{background:rgba(255,85,119,.18);color:#ff8fab}
  .ai.r{background:rgba(251,191,36,.16);color:#fcd34d}
  .ai.d{background:rgba(93,202,165,.18);color:#5dcaa5}
  .ainfo{flex:1;min-width:0}
  .aname{font-family:var(--font-mono);font-size:12px;font-weight:500;display:flex;align-items:center;gap:7px}
  .astatus{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}
  .tick{margin-left:auto;font-size:11px}
  .tick.ok{color:var(--green)}.tick.no{color:var(--red)}.tick.run{color:var(--brand-bright)}
  .disagree{margin-top:7px;padding:8px 10px;background:rgba(255,85,119,.08);border-left:2px solid var(--red);border-radius:0 6px 6px 0;font-size:11px;color:#ffb3c4;line-height:1.5}
  .disagree b{color:#ff8fab;font-weight:600}
  .resolve{margin-top:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--green);display:flex;align-items:center;gap:6px}

  /* terminal strip */
  .term{flex:0 0 auto;height:128px;border-top:1px solid var(--border);background:#070510;padding:12px 16px;font-family:var(--font-mono);font-size:11.5px;line-height:1.65;overflow:hidden}
  .term .p{color:var(--green)}.term .c2{color:var(--lilac)}.term .o{color:var(--muted)}.term .ok{color:var(--green)}
  .cursor{display:inline-block;width:7px;height:13px;background:var(--brand-bright);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}

  .feat-row{display:flex;gap:36px;margin-top:34px;flex-wrap:wrap}
  .feat{display:flex;align-items:flex-start;gap:11px;max-width:280px}
  .feat .fi{width:30px;height:30px;border-radius:8px;background:rgba(139,92,246,.14);color:var(--brand-bright);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .feat .fi svg{width:16px;height:16px}

  /* ===== dev workspace animation ===== */
  /* agent state classes driven by JS */
  #devAgents .agent{opacity:.5;filter:saturate(.7);border:1px solid transparent;transition:opacity .45s,filter .45s,background .4s,border-color .4s,box-shadow .4s,transform .4s cubic-bezier(.16,1,.3,1)}
  #devAgents .agent.is-done{opacity:1;filter:none;border-color:rgba(93,202,165,.35)}
  #devAgents .agent.is-active{opacity:1;filter:none;transform:translateY(-3px);border-color:var(--brand-bright);box-shadow:0 0 0 1px var(--brand-bright),0 0 26px -4px rgba(139,92,246,.6);background:rgba(139,92,246,.08)}
  #devAgents .agent.is-active .ai{box-shadow:0 0 0 4px rgba(139,92,246,.16),0 0 22px rgba(139,92,246,.5);animation:aiPulse 1.4s ease-in-out infinite}
  #devAgents .agent.is-reject{opacity:1;filter:none;background:rgba(255,85,119,.08)!important;border-color:var(--red)!important;box-shadow:0 0 0 1px var(--red),0 0 26px -4px rgba(255,85,119,.55);animation:agentShake .45s}
  #devAgents .agent.is-reject .ai{box-shadow:0 0 0 4px rgba(255,85,119,.16),0 0 22px rgba(255,85,119,.45)}
  @keyframes aiPulse{0%,100%{box-shadow:0 0 0 4px rgba(139,92,246,.16),0 0 18px rgba(139,92,246,.4)}50%{box-shadow:0 0 0 6px rgba(139,92,246,.06),0 0 30px rgba(139,92,246,.65)}}
  @keyframes agentShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  /* tick content driven by state */
  #devAgents .agent .tick{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--faint);white-space:nowrap}
  #devAgents .agent.is-active .tick{color:var(--brand-bright)}
  #devAgents .agent.is-done .tick{color:var(--green)}
  #devAgents .agent.is-reject .tick{color:var(--red)}
  /* disagree/resolve hidden until critic reaches that beat */
  #devAgents .disagree,#devAgents .resolve{max-height:0;opacity:0;overflow:hidden;margin-top:0;padding-top:0;padding-bottom:0;transition:max-height .5s ease,opacity .4s,margin .4s,padding .4s}
  #devAgents .agent.show-detail .disagree{max-height:120px;opacity:1;margin-top:7px;padding:8px 10px}
  #devAgents .agent.show-detail .resolve{max-height:40px;opacity:1;margin-top:6px}

  /* diff lines animate in */
  #devCode .diffline{opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1)}
  #devCode .diffline.lit{opacity:1;transform:translateX(0)}
  #devCode .diffline.lit::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(167,139,250,.18),transparent);transform:translateX(-100%);animation:sweep .7s ease}
  @keyframes sweep{to{transform:translateX(100%)}}

  /* terminal lines reveal */
  #devTerm .tl{opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
  #devTerm .tl.lit{opacity:1;transform:translateY(0)}
  #devTerm .tl:first-child{opacity:.55}
  #devTerm .tl:first-child.lit{opacity:1}

  /* title-bar step counter + badge can flip */
  .badge.is-shipped{background:rgba(93,202,165,.16);color:var(--green)}
  .feat .ft{font-size:14px;font-weight:600;margin-bottom:3px}
  .feat .fd{font-size:13px;color:var(--muted);line-height:1.5}

.dev-sec{padding-top:30px}

  .gallery{padding:96px 0 30px;position:relative}
  .g-headwrap{max-width:1320px;margin:0 auto 40px;padding:0 32px}
  .g-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px}
  .g-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-bright);margin-bottom:16px;display:flex;align-items:center;gap:10px}
  .g-eyebrow::before{content:"";width:26px;height:1px;background:var(--brand)}
  .g-title{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(30px,4vw,52px);letter-spacing:-.03em;line-height:1.02}
  .g-title .it{font-style:italic;font-weight:600;font-stretch:100%;background:linear-gradient(100deg,#c4b5fd,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .g-sub{font-size:16px;color:var(--muted);max-width:380px;line-height:1.6}
  .scroller{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:8px 32px 26px;cursor:grab;scrollbar-width:thin;scrollbar-color:rgba(168,139,250,.3) transparent}
  .scroller.dragging{cursor:grabbing;scroll-snap-type:none}
  .scroller::-webkit-scrollbar{height:8px}.scroller::-webkit-scrollbar-track{background:transparent}
  .scroller::-webkit-scrollbar-thumb{background:rgba(168,139,250,.22);border-radius:8px}.scroller::-webkit-scrollbar-thumb:hover{background:rgba(168,139,250,.4)}
  .g-track{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);grid-auto-columns:340px;gap:22px;width:max-content}
  .scroller:hover .g-card{opacity:.45;filter:saturate(.6)}.scroller:hover .g-card:hover{opacity:1;filter:none}
  .g-card{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;border:1px solid var(--border);background:var(--surface);scroll-snap-align:start;transition:opacity .4s ease,filter .4s ease,transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s;outline:none}
  .g-card:hover,.g-card:focus-visible{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 30px 70px -24px rgba(124,58,237,.65)}
  .g-shot{aspect-ratio:16/10;overflow:hidden;background:#0d0818}
  .g-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .55s cubic-bezier(.16,1,.3,1);user-select:none}
  .g-card:hover .g-shot img,.g-card:focus-visible .g-shot img{transform:scale(1.06)}
  .g-caption{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;transition:opacity .35s}
  .g-cap-name{font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:-.01em}
  .g-cap-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .g-card:hover .g-caption,.g-card:focus-visible .g-caption{opacity:0}
  .g-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,4,13,.1) 0%,rgba(7,4,13,.5) 55%,rgba(7,4,13,.92) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;opacity:0;transition:opacity .4s;pointer-events:none}
  .g-card:hover .g-overlay,.g-card:focus-visible .g-overlay{opacity:1}
  .g-ov-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lilac);margin-bottom:6px;transform:translateY(10px);opacity:0;transition:all .4s .05s}
  .g-ov-name{font-family:var(--font-display);font-weight:800;font-stretch:110%;font-size:22px;letter-spacing:-.02em;margin-bottom:11px;transform:translateY(10px);opacity:0;transition:all .4s .1s}
  .g-ov-cta{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--brand-bright);display:flex;align-items:center;gap:7px;transform:translateY(10px);opacity:0;transition:all .4s .15s}
  .g-ov-cta .arr{transition:transform .3s}
  .g-card:hover .g-ov-tag,.g-card:hover .g-ov-name,.g-card:hover .g-ov-cta,.g-card:focus-visible .g-ov-tag,.g-card:focus-visible .g-ov-name,.g-card:focus-visible .g-ov-cta{transform:translateY(0);opacity:1}
  .g-card:hover .g-ov-cta .arr{transform:translateX(5px)}
  .g-hint{max-width:1320px;margin:0 auto;padding:0 32px;font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.01em;color:var(--faint);display:flex;align-items:center;gap:8px}
  @media(max-width:640px){.g-track{grid-auto-columns:80vw}.g-head{flex-direction:column;align-items:flex-start}.scroller:hover .g-card{opacity:1;filter:none}}


/* ===== AGENTS SECTION ===== */
.agents-sec{padding-top:20px}

  
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--void);color:var(--paper);font-family:var(--font-body);-webkit-font-smoothing:antialiased;padding:100px 0 110px;overflow-x:hidden}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px}

  .sec-head{text-align:center;margin-bottom:20px;max-width:720px;margin-left:auto;margin-right:auto}
  .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-bright);margin-bottom:20px;display:inline-flex;align-items:center;gap:10px}
  .eyebrow::before,.eyebrow::after{content:"";width:26px;height:1px;background:var(--brand)}
  h2{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(34px,5.5vw,68px);letter-spacing:-.035em;line-height:.98;margin-bottom:22px}
  h2 .it{font-style:italic;font-weight:600;font-stretch:100%;background:linear-gradient(100deg,#c4b5fd,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .lead{font-size:18px;color:var(--muted);line-height:1.6;max-width:560px;margin:0 auto}

  .status{display:flex;align-items:center;justify-content:center;gap:10px;margin:34px 0 8px;font-family:var(--font-mono);font-size:12.5px;color:var(--muted);height:20px}
  .status .blip{width:8px;height:8px;border-radius:50%;background:var(--brand-bright);box-shadow:0 0 12px var(--brand-bright)}
  .status .phase{color:var(--paper)}

  /* stage */
  .stage{position:relative;margin-top:30px;padding:30px 0 10px}
  .pipeline{display:flex;align-items:flex-start;justify-content:space-between;position:relative;gap:0}
  .connectors{position:absolute;top:46px;left:0;right:0;height:4px;z-index:0}

  .node{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:18%;transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .orb{width:88px;height:88px;border-radius:24px;display:flex;align-items:center;justify-content:center;position:relative;
    background:var(--surface);border:1px solid var(--border);transition:all .5s cubic-bezier(.16,1,.3,1)}
  .orb .icon{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--faint);transition:color .4s;z-index:2}
  .orb .ring{position:absolute;inset:-1px;border-radius:24px;border:2px solid transparent;transition:all .4s}
  .node .label{font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--muted);margin-top:16px;letter-spacing:.02em;transition:color .4s}
  .node .role{font-size:11.5px;color:var(--faint);margin-top:5px;text-align:center;max-width:130px;line-height:1.4;transition:opacity .4s}

  /* active state */
  .node.active .orb{border-color:var(--brand-bright);background:var(--surface-2);box-shadow:0 0 0 4px rgba(139,92,246,.12),0 16px 40px -8px rgba(124,58,237,.6);transform:scale(1.08)}
  .node.active .orb .icon{color:var(--paper)}
  .node.active .orb .ring{border-color:rgba(167,139,250,.5);animation:spin 3s linear infinite}
  .node.active .label{color:var(--paper)}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* done */
  .node.done .orb{border-color:rgba(93,202,165,.5);background:rgba(93,202,165,.08)}
  .node.done .orb .icon{color:var(--green)}
  .node.done .label{color:var(--green)}

  /* reject (critic flashing the coder) */
  .node.reject .orb{border-color:var(--red);background:rgba(255,85,119,.1);box-shadow:0 0 0 4px rgba(255,85,119,.14),0 16px 40px -8px rgba(255,85,119,.5);animation:shake .5s}
  .node.reject .orb .icon{color:var(--red)}
  .node.reject .label{color:var(--red)}
  @keyframes shake{0%,100%{transform:scale(1.08) translateX(0)}25%{transform:scale(1.08) translateX(-5px)}75%{transform:scale(1.08) translateX(5px)}}

  /* connector segments */
  .seg{position:absolute;height:4px;top:0;background:var(--border);border-radius:4px;overflow:hidden}
  .seg .fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#7c3aed,#a78bfa);border-radius:4px;transition:width .6s ease}
  .seg.flow .fill{width:100%}
  .seg.reverse .fill{background:linear-gradient(90deg,#ff5577,#ff8fab)}
  .pulse{position:absolute;top:-3px;width:10px;height:10px;border-radius:50%;background:#c4b5fd;box-shadow:0 0 14px #a78bfa;opacity:0}

  /* disagreement card */
  .disagree-wrap{height:230px;margin-top:50px;position:relative;display:flex;align-items:center;justify-content:center}
  .card{position:absolute;width:560px;max-width:92%;min-height:150px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 24px;opacity:0;transform:translateY(20px) scale(.97);transition:all .5s cubic-bezier(.16,1,.3,1);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
  .card.show{opacity:1;transform:translateY(0) scale(1)}
  .card.reject{border-color:rgba(255,85,119,.35)}
  .card-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
  .ch-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;font-size:14px}
  .ch-ic.cr{background:rgba(255,85,119,.16);color:#ff8fab}
  .ch-ic.ok{background:rgba(93,202,165,.16);color:var(--green)}
  .ch-ic.p{background:rgba(125,211,252,.16);color:var(--blue)}
  .ch-ic.c{background:rgba(167,139,250,.2);color:var(--lilac)}
  .ch-ic.r{background:rgba(251,191,36,.16);color:var(--amber)}
  .ch-t{font-family:var(--font-mono);font-size:13px;font-weight:600}
  .ch-tag{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;padding:4px 11px;border-radius:20px;letter-spacing:.05em}
  .ch-tag.no{background:rgba(255,85,119,.14);color:#ff8fab}
  .ch-tag.yes{background:rgba(93,202,165,.14);color:var(--green)}
  .card-msg{font-size:14.5px;color:var(--paper);line-height:1.6}
  .card-msg .typed{border-right:2px solid var(--brand-bright)}
  .card-code{font-family:var(--font-mono);font-size:12.5px;color:var(--lilac);background:rgba(124,58,237,.1);padding:2px 7px;border-radius:5px}
  .card-sub{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;gap:8px}

  .replay{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;font-family:var(--font-mono);font-size:12px;color:var(--faint);cursor:pointer;transition:color .2s}
  .replay:hover{color:var(--brand-bright)}
  .replay svg{width:14px;height:14px}

  .footnote{text-align:center;margin-top:40px;font-size:14px;color:var(--muted);max-width:560px;margin-left:auto;margin-right:auto;line-height:1.6}
  .footnote b{color:var(--paper);font-weight:500}

  @media(max-width:760px){
    .pipeline{flex-wrap:wrap;gap:24px;justify-content:center}
    .node{width:42%}.connectors{display:none}
    .orb{width:72px;height:72px}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ===== CTA + FOOTER ===== */

  
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--void);color:var(--paper);font-family:var(--font-body);-webkit-font-smoothing:antialiased}

  /* CTA */
  .cta{position:relative;padding:130px 32px 120px;text-align:center;overflow:hidden;isolation:isolate}
  .cta::before{content:"";position:absolute;top:10%;left:50%;transform:translateX(-50%);width:1000px;height:600px;
    background:radial-gradient(ellipse 55% 50% at 50% 30%,rgba(139,92,246,.3),rgba(124,58,237,.08) 45%,transparent 70%);
    filter:blur(20px);z-index:-2}
  .cta::after{content:"";position:absolute;inset:0;z-index:-1;
    background-image:radial-gradient(circle at 1px 1px,rgba(196,181,253,.06) 1px,transparent 0);background-size:42px 42px;
    -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,black,transparent 72%);
    mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,black,transparent 72%)}

  .cta-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-bright);margin-bottom:26px;display:inline-flex;align-items:center;gap:10px}
  .cta-eyebrow::before,.cta-eyebrow::after{content:"";width:26px;height:1px;background:var(--brand)}
  h2{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(40px,7vw,92px);letter-spacing:-.04em;line-height:.96;margin-bottom:24px}
  h2 .it{font-style:italic;font-weight:600;font-stretch:100%;background:linear-gradient(100deg,#c4b5fd,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .cta-sub{font-size:19px;color:var(--muted);max-width:540px;margin:0 auto 44px;line-height:1.6}

  .signup{display:flex;gap:10px;max-width:480px;margin:0 auto;background:var(--surface);border:1px solid var(--border-strong);border-radius:14px;padding:8px;transition:border-color .25s,box-shadow .25s}
  .signup:focus-within{border-color:var(--brand-bright);box-shadow:0 0 0 4px rgba(139,92,246,.14)}
  .signup input{flex:1;background:transparent;border:none;outline:none;color:var(--paper);font-family:var(--font-body);font-size:15px;padding:0 16px}
  .signup input::placeholder{color:var(--faint)}
  .signup button{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff;border:none;border-radius:10px;padding:13px 26px;font-family:var(--font-body);font-weight:600;font-size:15px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:transform .15s,box-shadow .2s;white-space:nowrap;box-shadow:0 0 22px rgba(124,58,237,.4)}
  .signup button:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(124,58,237,.6)}
  .signup button .arr{transition:transform .25s}
  .signup button:hover .arr{transform:translateX(4px)}

  .cta-meta{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:26px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;color:var(--faint)}
  .cta-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}
  .cta-meta .avatars{display:flex;align-items:center}
  .cta-meta .av{width:24px;height:24px;border-radius:50%;border:2px solid var(--void);margin-left:-8px}
  .cta-meta .av:first-child{margin-left:0}
  .cnt{color:var(--lilac)}

  /* success state */
  .success{display:none;max-width:480px;margin:0 auto;background:rgba(93,202,165,.08);border:1px solid rgba(93,202,165,.3);border-radius:14px;padding:22px 24px;align-items:center;gap:14px}
  .success.show{display:flex}
  .success .ic{width:38px;height:38px;border-radius:50%;background:rgba(93,202,165,.18);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
  .success .t{font-size:15px;font-weight:600;text-align:left}
  .success .d{font-size:13px;color:var(--muted);margin-top:2px;text-align:left}

  /* footer */
  footer{border-top:1px solid var(--border);padding:54px 32px 40px}
  .foot-wrap{max-width:1320px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}
  .foot-brand{max-width:300px}
  .foot-logo{display:flex;align-items:center;gap:11px;margin-bottom:16px}
  .foot-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(150deg,#c4b5fd,#7c3aed 55%,#2d1b69);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:17px;color:#fff}
  .foot-name{font-family:var(--font-mono);font-size:15px;font-weight:500;letter-spacing:.22em}
  .foot-tag{font-family:'Geist',sans-serif;font-size:13.5px;color:var(--muted);line-height:1.6}
  .foot-cols{display:flex;gap:64px;flex-wrap:wrap}
  .foot-col h4{font-family:'Geist',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:16px;font-weight:600}
  .foot-col a{display:block;font-family:'Geist',sans-serif;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;margin-bottom:11px;transition:color .2s}
  .foot-col a:hover{color:var(--paper)}
  .foot-bottom{max-width:1320px;margin:46px auto 0;padding-top:24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:'Geist',sans-serif;font-size:12px;color:var(--faint);letter-spacing:.02em}
  .foot-social{display:flex;gap:18px}
  .foot-social a{color:var(--faint);transition:color .2s}.foot-social a:hover{color:var(--brand-bright)}
  .foot-social svg{width:17px;height:17px}

  @media(max-width:640px){.signup{flex-direction:column}.signup button{justify-content:center}.foot-wrap{flex-direction:column}}


/* ===== INTEGRATIONS + MODELS ===== */
/* fix: integ cards must be visible (override generic .card from agents section) */
.integ-sec .card{position:relative !important;opacity:1 !important;transform:none !important;min-height:0 !important;min-width:0}
.integ-sec .card:nth-child(2){display:flex;flex-direction:column}
.integ-sec .card:nth-child(2) .marquee{flex:1;justify-content:center}

.integ-sec{padding:10px 0}

  
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--void);color:var(--paper);font-family:var(--font-body);-webkit-font-smoothing:antialiased;padding:90px 0}
  .wrap{max-width:1280px;margin:0 auto;padding:0 32px}

  .sec-head{text-align:center;max-width:680px;margin:0 auto 50px}
  .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-bright);margin-bottom:18px;display:inline-flex;align-items:center;gap:10px}
  .eyebrow::before,.eyebrow::after{content:"";width:26px;height:1px;background:var(--brand)}
  h2{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(30px,4.4vw,52px);letter-spacing:-.03em;line-height:1.0;margin-bottom:18px}
  h2 .it{font-style:italic;font-weight:600;font-stretch:100%;background:linear-gradient(100deg,#c4b5fd,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .sec-sub{font-size:17px;color:var(--muted);line-height:1.6}

  .cards{display:flex;justify-content:center;gap:22px}
  .cards > .card{width:500px;flex:0 0 500px}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px;position:relative;overflow:hidden}
  .card-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
  .card-ic{width:40px;height:40px;border-radius:11px;background:rgba(139,92,246,.14);display:flex;align-items:center;justify-content:center;color:var(--brand-bright);flex-shrink:0}
  .card-ic svg{width:20px;height:20px}
  .card-title{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.01em}
  .card-desc{font-size:14.5px;color:var(--muted);line-height:1.55;margin-bottom:24px;max-width:90%}
  .card-desc b{color:var(--paper);font-weight:500}

  /* integrations grid */
  .logos{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
  .logo{aspect-ratio:1;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:transform .2s,border-color .2s,background .2s}
  .logo:hover{transform:translateY(-2px);border-color:var(--border-strong);background:rgba(255,255,255,.05)}
  .logo svg{width:54px;height:54px}
  .logo.more{font-family:var(--font-ui);font-weight:600;font-size:12px;color:var(--brand-bright)}

  .logo{position:relative}
  .logo[data-name]::after{content:attr(data-name);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:#1a1130;border:1px solid var(--border-strong);color:var(--paper);font-family:var(--font-ui);font-size:12px;font-weight:500;padding:5px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:20;box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
  .logo[data-name]::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%) translateY(4px);border:5px solid transparent;border-top-color:#1a1130;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:20}
  .logo[data-name]:hover::after,.logo[data-name]:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}


  /* model chips */
  .chips{display:flex;flex-wrap:wrap;gap:9px}
  .chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;background:rgba(255,255,255,.025);border:1px solid var(--border);font-family:var(--font-ui);font-size:13.5px;font-weight:500;color:var(--paper);transition:transform .2s,border-color .2s}
  .chip:hover{transform:translateY(-2px);border-color:var(--border-strong)}
  .chip .cm{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
  .chip .cm svg{width:14px;height:14px}
  .chip.more{color:var(--brand-bright);border-style:dashed}

  .foot-note{text-align:center;margin-top:40px;font-family:var(--font-ui);font-size:14px;color:var(--faint)}

  .marquee{display:flex;flex-direction:column;gap:11px;margin-top:4px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .mrow{overflow:hidden}
  .mtrack{display:flex;gap:10px;width:max-content;animation:marq 28s linear infinite}
  .mtrack.right{animation-direction:reverse}
  .marquee:hover .mtrack{animation-play-state:paused}
  @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .mchip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:11px;background:rgba(255,255,255,.025);border:1px solid var(--border);font-family:var(--font-ui);font-size:13.5px;font-weight:500;color:var(--paper);white-space:nowrap;flex-shrink:0}
  .mchip .cm{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
  .mchip .cm svg{width:14px;height:14px}


/* ===== Mobile polish (appended) ===== */
@media (max-width: 720px) {
  nav .nav-links { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 18px; font-size: 14px; }
  .cards { flex-direction: column; align-items: center; }
  .cards > .card { width: 100%; max-width: 500px; flex: 0 0 auto; }
  .logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 420px) {
  .logos { grid-template-columns: repeat(3, 1fr); }
}