/* Product Compass — agentic landing
   Layout: 1120px column; hero = headline over a full-width live session demo; short visual sections.
   Dark-first; light palette under prefers-color-scheme: light. */
:root{
  --bg:#07090f; --bg-2:#0c1018; --surface:#10151f; --surface-2:#161c29; --line:#1e2533; --line-2:#2b3447;
  --fg:#f2f4f8; --muted:#a3abbd; --faint:#657088;
  --accent:#4f8cff; --accent-2:#7cc4ff; --accent-soft:rgba(79,140,255,.14); --on-accent:#fff;
  --grad:linear-gradient(90deg,#4f8cff,#7cc4ff);
  --ok:#34c57a; --warn:#f0a53a; --crit:#f25f5c;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:1120px; --gutter:20px; --r:14px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 80px rgba(0,0,0,.55);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#ffffff; --bg-2:#f5f7fb; --surface:#ffffff; --surface-2:#f0f3f9; --line:#e5e8f0; --line-2:#d2d7e3;
  --fg:#0b0f1a; --muted:#515a6e; --faint:#8a91a3;
  --accent:#2f6bff; --accent-2:#1f4fd1; --accent-soft:rgba(47,107,255,.1); --grad:linear-gradient(90deg,#2f6bff,#4f8cff);
  --shadow:0 1px 2px rgba(10,15,30,.05),0 24px 60px rgba(10,15,30,.10); color-scheme:light}}
:root[data-theme="light"]{
  --bg:#ffffff; --bg-2:#f5f7fb; --surface:#ffffff; --surface-2:#f0f3f9; --line:#e5e8f0; --line-2:#d2d7e3;
  --fg:#0b0f1a; --muted:#515a6e; --faint:#8a91a3;
  --accent:#2f6bff; --accent-2:#1f4fd1; --accent-soft:rgba(47,107,255,.1); --grad:linear-gradient(90deg,#2f6bff,#4f8cff);
  --shadow:0 1px 2px rgba(10,15,30,.05),0 24px 60px rgba(10,15,30,.10); color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);width:100%}
[id]{scroll-margin-top:90px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.05;letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12}
h3{font-size:1rem;line-height:1.35}
p{margin:0}
.lede{font-size:1.125rem;color:var(--muted);max-width:52ch}
.eyebrow{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);font-weight:500}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--measure);margin-inline:auto;padding:0 var(--gutter);display:flex;align-items:center;gap:1.5rem;min-height:60px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:600;font-size:.95rem}
.brand svg{color:var(--accent)}
.nav{display:flex;gap:1.5rem;margin-left:auto}
.nav a{font-size:.875rem;color:var(--muted);text-decoration:none}.nav a:hover{color:var(--fg)}
@media (max-width:640px){.nav{display:none}}

/* buttons */
.actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:500;padding:.7rem 1.1rem;border-radius:10px;text-decoration:none;border:1px solid transparent;transition:.15s}
.btn-primary{background:var(--fg);color:var(--bg)}.btn-primary:hover{opacity:.9}
.btn-ghost{border-color:var(--line-2);color:var(--fg);background:transparent}.btn-ghost:hover{border-color:var(--faint)}
.btn-sm{padding:.45rem .85rem;font-size:.8125rem}

/* hero */
.hero{position:relative;padding-block:clamp(3.5rem,8vw,6rem) 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:620px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,var(--accent-soft),transparent 70%)}
.hero h1{max-width:16ch}
.hero .lede{text-align:center}
.pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--accent-2);
  border:1px solid var(--line-2);border-radius:999px;padding:.35rem .85rem;background:var(--surface)}
.pill i{width:.45rem;height:.45rem;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}

/* live demo */
.demo{margin-top:clamp(2rem,4vw,3rem);width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  overflow:hidden;text-align:left;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:860px){.demo{grid-template-columns:minmax(0,1fr)}}
.demo-bar{grid-column:1/-1;display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;border-bottom:1px solid var(--line);font-size:.8125rem;color:var(--muted)}
.dots{display:flex;gap:.3rem}.dots i{width:.55rem;height:.55rem;border-radius:50%;background:var(--line-2)}
.demo-bar .st{margin-left:auto;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.45rem;color:var(--accent-2)}
.demo-bar .st i{width:.45rem;height:.45rem;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
.demo-bar .st.done{color:var(--ok)}.demo-bar .st.done i{background:var(--ok);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,140,255,.5)}100%{box-shadow:0 0 0 9px rgba(79,140,255,0)}}
@media (prefers-reduced-motion:reduce){.demo-bar .st i{animation:none}}
.left{padding:1.1rem;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.9rem;min-width:0}
@media (max-width:860px){.left{border-right:0;border-bottom:1px solid var(--line)}}
.promptbox{background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:.75rem .9rem;font-family:var(--mono);font-size:.8125rem;color:var(--fg);min-height:2.75rem;display:flex;align-items:center;gap:.5rem}
.promptbox .cur{width:1px;height:1.1em;background:var(--accent-2);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.log{display:flex;flex-direction:column;gap:.45rem;min-height:14rem}
.log .ln{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.6rem;font-size:.8125rem;color:var(--muted);
  opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.log .ln.on{opacity:1;transform:none}
.log .k{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;padding-top:.2rem;color:var(--faint)}
.log .k.r{color:var(--accent-2)}.log .k.w{color:var(--warn)}.log .k.s{color:var(--ok)}
.log b{color:var(--fg);font-weight:500}
.right{padding:1.1rem;display:flex;flex-direction:column;gap:.9rem;min-width:0}
.star{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;display:flex;flex-direction:column;gap:.2rem;min-height:4.4rem}
.star .lbl{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.star p{font-size:.875rem;font-weight:500;line-height:1.4;opacity:0;transition:opacity .5s}
.star p.on{opacity:1}
.axes{display:flex;flex-direction:column;gap:.5rem}
.axrow{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,2fr) 3.2rem;gap:.7rem;align-items:center;font-size:.8125rem;opacity:.35;transition:opacity .4s}
.axrow.on{opacity:1}
.axrow .nm{font-weight:500;display:flex;align-items:center;gap:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tagd{font-family:var(--mono);font-size:.6rem;color:var(--accent-2);background:var(--accent-soft);border-radius:4px;padding:.05rem .3rem;opacity:0;transition:opacity .4s}
.tagd.on{opacity:1}
.track{position:relative;height:6px;background:var(--line);border-radius:3px}
.track .cur{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--grad);width:0;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.track .tgt{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--accent-2);transform:translate(-50%,-50%) scale(0);transition:transform .3s}
.track .tgt.on{transform:translate(-50%,-50%) scale(1)}
.axrow .dep{font-family:var(--mono);font-size:.6875rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.axrow.gap .track .cur{background:var(--crit)}.axrow.gap .dep{color:var(--crit)}
.legend{display:flex;flex-wrap:wrap;gap:1rem;font-size:.6875rem;color:var(--faint);font-family:var(--mono)}
.legend span{display:inline-flex;align-items:center;gap:.35rem}
.legend i{width:.6rem;height:.35rem;border-radius:2px;background:var(--accent);display:inline-block}
.legend i.o{width:.5rem;height:.5rem;border-radius:50%;background:var(--surface);border:2px solid var(--accent-2)}
.legend i.c{background:var(--crit)}
@media (max-width:460px){.axrow{grid-template-columns:minmax(0,1fr) 3.2rem}.axrow .track{grid-column:1/-1}}

/* logos / trust strip */
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.5rem;padding-block:2rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.strip span{display:inline-flex;align-items:center;gap:.5rem}
.strip b{color:var(--fg);font-weight:600;font-size:.95rem;letter-spacing:0;font-family:var(--sans)}

/* sections */
.sec{padding-block:clamp(3.5rem,7vw,6rem)}
.sec.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:.7rem;max-width:58ch;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.sec-head.center{align-items:center;text-align:center;margin-inline:auto}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bento{grid-template-columns:1fr}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;display:flex;flex-direction:column;gap:.9rem;min-width:0;overflow:hidden}
.tile.wide{grid-column:span 2}
@media (max-width:600px){.tile.wide{grid-column:auto}}
.tile h3{font-size:1.0625rem}
.tile p{font-size:.875rem;color:var(--muted)}
.viz{flex:1;min-height:120px;border-radius:10px;background:var(--bg);border:1px solid var(--line);padding:.9rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.viz .row{display:flex;align-items:center;gap:.6rem}
.viz .src{color:var(--accent-2)}.viz .inf{color:var(--faint)}
.viz .bar{flex:1;height:6px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.viz .bar::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--grad);border-radius:3px}
.viz .bar.dim::after{opacity:.35}
.bubble{border:1px solid var(--line-2);border-radius:10px;padding:.55rem .75rem;font-size:.8125rem;color:var(--fg);background:var(--surface-2);max-width:92%}
.bubble.w{border-color:color-mix(in srgb,var(--warn) 55%,var(--line-2));align-self:flex-end}
.bubble .k{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:.15rem}
.bubble.w .k{color:var(--warn)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{font-size:.75rem;border:1px solid var(--line-2);border-radius:999px;padding:.25rem .65rem;color:var(--fg);background:var(--surface-2)}
.chip.off{opacity:.35;text-decoration:line-through}
.chip.d{border-color:var(--accent);color:var(--accent-2)}

/* flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
@media (max-width:860px){.flow{grid-template-columns:1fr 1fr}}
@media (max-width:500px){.flow{grid-template-columns:1fr}}
.fstep{padding:1.4rem 1.25rem;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.5rem;min-width:0;position:relative}
.fstep:last-child{border-right:0}
@media (max-width:860px){.fstep{border-bottom:1px solid var(--line)}}
.fstep .n{font-family:var(--mono);font-size:.6875rem;color:var(--accent-2);letter-spacing:.1em}
.fstep p{font-size:.875rem;color:var(--muted)}
.fstep.loop::after{content:"↻ repeats";position:absolute;top:1.25rem;right:1.1rem;font-family:var(--mono);font-size:.625rem;color:var(--faint)}

/* radar */
.radar-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (max-width:860px){.radar-wrap{grid-template-columns:minmax(0,1fr)}}
.radar{width:100%;height:auto;display:block}
.radar .g{stroke:var(--line-2);fill:none;stroke-width:1}
.radar .sp{stroke:var(--line);stroke-width:1}
.radar .lb{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.radar .cur{fill:rgba(79,140,255,.22);stroke:var(--accent);stroke-width:2}
.radar .tgt{fill:none;stroke:var(--accent-2);stroke-width:1.5;stroke-dasharray:5 4}
.radar .pt{fill:var(--accent)}
.depths{display:flex;flex-direction:column;gap:.4rem}
.dl{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.75rem;align-items:center;font-size:.9rem}
.dl i{display:block;height:.6rem;border-radius:3px;background:var(--accent);opacity:var(--o)}
.dl b{font-weight:600}.dl span{color:var(--muted);font-size:.8125rem;margin-left:.5rem}
.rad-legend{display:flex;gap:1.25rem;font-family:var(--mono);font-size:.6875rem;color:var(--faint);margin-top:.75rem}
.rad-legend i{display:inline-block;width:1rem;height:0;border-top:2px solid var(--accent);margin-right:.4rem;vertical-align:middle}
.rad-legend i.t{border-top-style:dashed;border-color:var(--accent-2)}

/* outputs */
.outs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:860px){.outs{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.outs{grid-template-columns:1fr}}
.out{display:flex;flex-direction:column;gap:.4rem;padding:1.1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.out .ic{width:2rem;height:2rem;border-radius:8px;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;margin-bottom:.3rem}
.out p{font-size:.8125rem;color:var(--muted)}

/* cta/footer */
.cta{padding-block:clamp(3rem,7vw,6rem)}
.cta-box{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;padding:clamp(2.5rem,5vw,4rem);text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem;background:var(--surface)}
.cta-box::before{content:"";position:absolute;inset:auto 0 -60% 0;height:120%;background:radial-gradient(50% 50% at 50% 100%,var(--accent-soft),transparent 70%);pointer-events:none}
.cta-box>*{position:relative}
.cta-box p{color:var(--muted);max-width:44ch}
.ftr{border-top:1px solid var(--line);padding-block:1.5rem;font-size:.8125rem;color:var(--faint)}
.ftr-in{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
.ftr nav{display:flex;gap:1.25rem}.ftr a{text-decoration:none;color:var(--muted)}.ftr a:hover{color:var(--fg)}
@media (max-width:860px){.log{min-height:9rem}}