/* ======= Design tokens ======= */
:root{
  --bg:#0b1020; --surface:#11162a; --muted:#8ea1c0; --text:#e8eefc;
  --brand:#5aa1ff; --brand-2:#7cf6d6; --accent:#ffd166; --radius:16px; --max:1200px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f9fe; --surface:#ffffff; --muted:#5b6b86; --text:#0d1530; --brand:#2a6ef1; --brand-2:#0bbf9a; --accent:#e6b800; }
}

/* ======= Base ======= */
*{ box-sizing:border-box; }
html,body{ height:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font:500 16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(90,161,255,.15), transparent 60%),
    radial-gradient(1000px 600px at -10% 20%, rgba(124,246,214,.12), transparent 60%),
    var(--bg);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 20px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ======= Buttons ======= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.1rem; border-radius:calc(var(--radius) - 6px);
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#081021;
  font-weight:800; border:none; cursor:pointer; box-shadow:0 8px 24px rgba(42,110,241,.25);
}
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn.secondary{ background:transparent; color:var(--text); border:1px solid rgba(142,161,192,.35); box-shadow:none; }
.btn.small{ padding:.6rem .8rem; font-weight:700; }
.btn.block{ display:block; text-align:center; }

/* ======= Header / Nav ======= */
header{ position:sticky; top:0; z-index:40; backdrop-filter:blur(8px); background:color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid rgba(142,161,192,.15); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; }
.logo{ display:flex; align-items:center; gap:.6rem; font-weight:900; letter-spacing:.2px; }
.logo-badge{ width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
nav ul{ display:flex; align-items:center; gap:1.2rem; list-style:none; padding:0; margin:0; }
nav a:focus-visible, .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(90,161,255,.35); }
@media (max-width:900px){
  nav ul{ display:none; position:absolute; left:0; right:0; top:64px; background:var(--surface); border-bottom:1px solid rgba(142,161,192,.15); padding:1rem 20px; flex-direction:column; align-items:flex-start; }
  nav ul.open{ display:flex; }
}

/* ======= Sections ======= */
.section{ padding:4.5rem 0; }
.section.alt{ background:color-mix(in oklab, var(--surface) 65%, transparent); }
.section-title{ font-size:clamp(1.6rem,2.4vw + .5rem,2.4rem); margin:0 0 .6rem; }
.muted{ color:var(--muted); }
.small{ font-size:.9rem; }

/* ======= Hero (MakerPortal) ======= */
.mp-header{ background:color-mix(in oklab, var(--bg) 82%, transparent); }
.mp-hero{ padding:5.5rem 0 3rem; }
.hero-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center; }
.eyebrow{ color:var(--brand-2); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; }
.lead{ color:var(--muted); font-size:clamp(1rem,1.1vw + .6rem,1.2rem); max-width:52ch; }
.hero-cta{ display:flex; gap:.8rem; align-items:center; margin-top:1.2rem; }
.hero-points{ display:grid; grid-auto-flow:column; gap:1rem; margin:1.2rem 0 0; padding:0; list-style:none; color:var(--muted); font-size:.95rem; }
.mp-hero .mp-hero-media{ border-radius:var(--radius); overflow:hidden; border:1px solid rgba(142,161,192,.15); }
.mp-video{ width:100%; height:auto; display:block; border-radius:calc(var(--radius) - 4px); aspect-ratio:16/9; }
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:24px; }
  .hero-points{ grid-auto-flow:row; }
}

/* ======= Feature Summary ======= */
.mp-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{ background:var(--surface); border:1px solid rgba(142,161,192,.15); border-radius:var(--radius); padding:20px; }
.card-icon{ font-size:1.4rem; }
.card h3{ margin:.5rem 0; }
.card p{ color:var(--muted); margin:.2rem 0 0; }
@media (max-width:900px){ .mp-feature-grid{ grid-template-columns:1fr; }}

/* ======= Workflow header ======= */
.flow-header{ margin-bottom:1.4rem; }
.flow-badge{ display:inline-block; padding:.38rem .75rem; border-radius:999px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#081021; font-weight:900; letter-spacing:.02em; font-size:.85rem; box-shadow:0 8px 24px rgba(42,110,241,.25); }
.flow-header h2{ margin:.6rem 0 .2rem; font-size:clamp(1.8rem,2.6vw + .6rem,2.6rem); }
.flow-sub{ color:var(--muted); margin:.2rem 0 .6rem; }
.flow-legend{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{ display:inline-block; padding:.3rem .55rem; border-radius:999px; background:color-mix(in oklab, var(--surface) 70%, transparent); border:1px solid rgba(142,161,192,.25); font-size:.83rem; }
.chip.alt{ background:linear-gradient(135deg, rgba(90,161,255,.18), rgba(124,246,214,.18)); border-color:rgba(142,161,192,.15); }
.chip.outline{ background:transparent; }

/* ======= Vertical Timeline (continuous spine, 3-col rows) ======= */
.tl{ position:relative; overflow:visible; }
.tl::before{
  content:""; position:absolute; top:0; bottom:0; left:calc(var(--backbone-left, 50%) + var(--backbone-nudge, 0px));
  transform:translateX(-50%); width:6px; background:linear-gradient(var(--brand),var(--brand-2)); opacity:.38; pointer-events:none; z-index:0;
}
.tl-node{
  display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);
  column-gap:28px; align-items:center; margin:60px 0; position:relative;
  transition:transform .1s ease, filter .1s ease, box-shadow .1s ease; will-change:transform; isolation:isolate; z-index:1;
}
.tl-node.inview{ } /* hook for JS reveal if needed */
.tl-node .slot.video{ grid-column:1; }
.tl-node .slot.node{ grid-column:2; display:grid; place-items:center; }
.tl-node .slot.card{ grid-column:3; }
.tl-node:nth-child(even) .slot.card{ grid-column:1; }
.tl-node:nth-child(even) .slot.node{ grid-column:2; }
.tl-node:nth-child(even) .slot.video{ grid-column:3; }

.tl-node .tl-pin{
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#081021; font-weight:900;
  border:2px solid color-mix(in oklab, var(--surface) 65%, transparent);
  box-shadow:0 12px 28px rgba(42,110,241,.28), 0 0 0 8px rgba(90,161,255,.08);
}

.tl-media-box, .tl-card{
  background:color-mix(in oklab, var(--surface) 86%, transparent);
  border:1px solid rgba(142,161,192,.15); border-radius:var(--radius);
  box-shadow:0 12px 34px rgba(0,0,0,.18); padding:12px;
}
.tl-card{ padding:18px; }
.tl-head{
  padding:.6rem .8rem; margin:-.2rem -.2rem .6rem; border-radius:calc(var(--radius) - 6px);
  background:linear-gradient(135deg, rgba(90,161,255,.14), rgba(124,246,214,.10));
  border:1px solid rgba(142,161,192,.12);
}
.mp-bullets{ margin:.5rem 0 .2rem; padding-left:1rem; }
.mp-bullets li{ margin:.2rem 0; }
.faq.compact{ margin-top:.5rem; padding:12px; }

/* ======= CTA & Footer ======= */
.cta{ padding:5rem 0; }
.cta-inner{
  background: linear-gradient(135deg, rgba(90,161,255,.15), rgba(124,246,214,.15)), var(--surface);
  border:1px solid rgba(142,161,192,.15); border-radius:calc(var(--radius) + 6px);
  padding:24px; display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:center;
}
.cta .lead{ margin:.2rem 0 0; }
.cta-form{ display:flex; gap:10px; align-items:center; }
.cta-form input{
  flex:1; border-radius:12px; border:1px solid rgba(142,161,192,.35); padding:.9rem 1rem;
  background:transparent; color:var(--text);
}
.cta-form input::placeholder{ color: color-mix(in oklab, var(--muted) 80%, transparent); }
footer{ padding:2.5rem 0; border-top:1px solid rgba(142,161,192,.15); background:color-mix(in oklab, var(--surface) 40%, transparent); }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
footer nav{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ======= Responsive ======= */
@media (max-width:1000px){
  .tl::before{ left:42px; transform:none; }
  .tl-node{ grid-template-columns:28px 28px 1fr; column-gap:14px; row-gap:12px; }
  .tl-col.media, .tl-col.card{ grid-column:3; }
  .tl-node .slot.video{ grid-column:3; }
  .tl-node .slot.card{ grid-column:3; }
  .tl-node .slot.node{ grid-column:2; }
  .cta-inner{ grid-template-columns:1fr; }
  .cta-form{ flex-direction:column; align-items:stretch; }
}
@media (max-width:900px){
  .footer-grid{ flex-direction:column; }
}