:root{
  --bg:#050509;
  --panel:#101017;
  --panel-2:#171721;
  --text:#f4f4f6;
  --dim:#a1a1ad;
  --muted:#6d6d79;
  --line:rgba(255,255,255,.12);
  --green:#34d399;
  --purple:#b06cff;
  --blue:#55b8ff;
  --gold:#f4c860;
  --accent:var(--green);
  --accent-soft:rgba(52,211,153,.12);
  color-scheme:dark;
  font-family:"Cascadia Code","JetBrains Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.65}
body.flow-page{--accent:var(--blue);--accent-soft:rgba(85,184,255,.12)}
body.rhythm-page{--accent:var(--purple);--accent-soft:rgba(176,108,255,.12)}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1080px,calc(100% - 40px));margin:0 auto}
.site-head{
  position:absolute;top:0;left:0;right:0;z-index:5;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-head .wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-weight:800;font-size:1.25rem}
.brand img{width:28px;height:36px}
.brand b{color:var(--green)}
.site-nav{display:flex;align-items:center;gap:18px;font-size:.78rem;color:var(--dim)}
.site-nav a{text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--accent)}
.play-link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 17px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:8px;background:var(--accent-soft);color:var(--accent);
  text-decoration:none;font-weight:800;
}
.play-link:hover{background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:var(--accent)}
.hero{
  min-height:620px;display:flex;align-items:center;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 58% 75% at 80% 28%, color-mix(in srgb,var(--accent) 13%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 70%, rgba(255,255,255,.025) 0%, transparent 55%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero-copy{width:min(700px,67%);padding:126px 0 74px}
.eyebrow{margin:0 0 14px;color:var(--accent);font-size:.76rem;font-weight:800;text-transform:uppercase}
h1{font-family:"Chakra Petch","Segoe UI",sans-serif;font-size:4rem;line-height:1.02;margin:0;font-weight:900}
.hero p{font-size:1.08rem;color:#c3c3cc;max-width:680px;margin:24px 0 0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-actions .primary{background:var(--accent);color:#06100c;border-color:var(--accent)}
.hero-actions .quiet{background:rgba(5,5,9,.58);border-color:var(--line);color:var(--text)}
.proof-strip{background:#09090e;border-bottom:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-item{padding:22px 18px;border-right:1px solid var(--line)}
.proof-item:last-child{border-right:0}
.proof-item b{display:block;color:var(--accent);font-size:1.25rem}
.proof-item span{display:block;color:var(--muted);font-size:.72rem;margin-top:3px}
.content-band{padding:78px 0;border-bottom:1px solid var(--line)}
.content-band.alt{background:#09090e}
.section-head{max-width:780px;margin-bottom:38px}
.section-kicker{color:var(--accent);font-size:.74rem;text-transform:uppercase;font-weight:800;margin-bottom:8px}
h2{font-family:"Chakra Petch","Segoe UI",sans-serif;font-size:2.25rem;line-height:1.15;margin:0}
.section-head p,.body-copy p{color:var(--dim)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.steps{counter-reset:steps;display:grid;gap:0}
.step{counter-increment:steps;padding:22px 0 22px 60px;border-top:1px solid var(--line);position:relative}
.step:first-child{border-top:0}
.step:before{
  content:counter(steps);position:absolute;left:0;top:22px;width:36px;height:36px;
  display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
  border-radius:50%;color:var(--accent);font-weight:900;
}
.step h3{margin:0 0 5px;font-size:1rem}
.step p{margin:0;color:var(--dim);font-size:.9rem}
.metric-list{display:grid;gap:12px}
.metric{
  padding:15px 16px;border-left:3px solid var(--accent);
  background:rgba(255,255,255,.025);
}
.metric b{display:block;font-size:.9rem}
.metric span{display:block;color:var(--dim);font-size:.8rem;margin-top:3px}
.method{
  padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
  color:#d2d2da;font-size:.86rem;
}
.method code{color:var(--accent)}
.product-shot{
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.explore{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.explore a{
  min-height:145px;padding:20px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;
}
.explore a:hover{border-color:var(--accent);background:var(--panel-2)}
.explore b{font-family:"Chakra Petch","Segoe UI",sans-serif;font-size:1.12rem}
.explore span{color:var(--dim);font-size:.78rem}
.cta-band{padding:70px 0;text-align:center;background:#08080d}
.cta-band h2{max-width:760px;margin:0 auto}
.cta-band p{color:var(--dim);margin:16px auto 24px;max-width:700px}
.site-foot{padding:34px 0 44px;color:var(--muted);font-size:.72rem}
.site-foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--accent)}
@media(max-width:760px){
  .site-head .wrap{height:auto;min-height:72px;align-items:flex-start;padding:16px 0}
  .site-nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}
  .site-nav .optional{display:none}
  .hero{min-height:590px;background-position:70% center}
  .hero-copy{width:100%;padding:118px 0 62px}
  h1{font-size:2.65rem}
  .hero p{font-size:.96rem}
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof-item:nth-child(2){border-right:0}
  .proof-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .two-col{grid-template-columns:1fr;gap:38px}
  .explore{grid-template-columns:1fr}
  .content-band{padding:58px 0}
  h2{font-size:1.8rem}
}
@media(max-width:440px){
  .wrap{width:min(100% - 28px,1080px)}
  .brand span{display:none}
  .site-nav{font-size:.7rem}
  .site-nav .play-link{min-height:36px;padding:0 10px}
  h1{font-size:2.2rem}
  .proof-item{padding:17px 12px}
  .proof-item b{font-size:1rem}
}