:root{
  --bg:#f5f7fb;
  --bg-soft:#edf3fb;
  --bg-elev:#ffffff;
  --fg:#0f172a;
  --muted:#5b6b84;
  --border:#dbe4f0;
  --brand:#1759ff;
  --brand-2:#0d47d7;
  --accent:#0d9488;
  --shadow:0 16px 40px rgba(15,23,42,.08);
  --shadow-lg:0 22px 60px rgba(15,23,42,.12);
  --radius:24px;
  --radius-sm:16px;
  --gap:32px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#07111f;
    --bg-soft:#0d182b;
    --bg-elev:#0d182b;
    --fg:#eff6ff;
    --muted:#9fb1cb;
    --border:#1a2941;
    --brand:#68a0ff;
    --brand-2:#4e86f0;
    --accent:#34d399;
    --shadow:0 18px 50px rgba(0,0,0,.35);
    --shadow-lg:0 28px 70px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  margin:0;
  min-height:100vh;
  color:var(--fg);
  font-family:var(--sans);
  line-height:1.6;
  background:
    radial-gradient(circle at top left, rgba(23,89,255,.10), transparent 28%),
    radial-gradient(circle at top right, rgba(13,148,136,.10), transparent 24%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code,pre{font-family:var(--mono)}

.site-shell{max-width:1280px;margin:0 auto;padding:28px 32px 48px}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}
.site-nav-links{display:flex;flex-wrap:wrap;gap:18px}
.site-nav-links a{font-size:14px;font-weight:700;color:var(--muted)}
.brand-lockup{display:inline-flex;align-items:center;gap:14px;color:var(--fg)}
.brand-lockup:hover{text-decoration:none}
.brand-mark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;
  font-weight:900;
  box-shadow:0 16px 34px rgba(23,89,255,.22);
}
.brand-sub{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.hero-panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:36px;
  background:
    radial-gradient(circle at top right, rgba(23,89,255,.16), transparent 32%),
    radial-gradient(circle at bottom left, rgba(13,148,136,.12), transparent 28%),
    linear-gradient(145deg,var(--bg-elev),var(--bg-soft));
  box-shadow:var(--shadow-lg);
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:24px;align-items:start}
.hero-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:12px;
}
.hero-title{
  margin:0 0 18px;
  font-size:clamp(34px,6vw,60px);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:900;
}
.hero-deck{max-width:64ch;font-size:18px;color:var(--muted);margin:0}
.hero-actions,.resource-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-aside{display:grid;gap:16px}
.hero-note{
  padding:20px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--bg-elev);
  box-shadow:var(--shadow);
}
.hero-note-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.hero-note-copy{margin:0}
.artifact-list{margin:0;padding-left:18px;display:grid;gap:8px}

.info-band{padding-top:30px}
.section-heading{display:flex;flex-direction:column;gap:4px;margin-bottom:18px}
.section-title{
  margin:0;
  font-size:clamp(24px,4vw,38px);
  line-height:1.08;
  letter-spacing:-.03em;
}
.card-grid,.agent-grid,.steps-grid{display:grid;gap:18px}
.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.agent-grid{grid-template-columns:1.05fr 1fr 1fr}
.steps-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.info-card,.agent-card,.step-card{
  border:1px solid var(--border);
  border-radius:20px;
  padding:22px;
  background:var(--bg-elev);
  box-shadow:var(--shadow);
}
.info-card h3,.agent-card h3,.step-card h3{margin:0 0 10px;font-size:18px}
.info-card p,.agent-card p,.step-card p{margin:0;color:var(--muted)}
.workflow-list{margin:0;padding-left:20px;display:grid;gap:10px}
.agent-card pre{
  margin:0;
  padding:16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg-soft);
  white-space:pre-wrap;
  word-break:break-word;
  font-size:12px;
}
.step-number{
  display:inline-block;
  margin-bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}

.btn{
  appearance:none;
  border:none;
  border-radius:16px;
  padding:12px 20px;
  font-size:14px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
}
.btn:hover{text-decoration:none}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  box-shadow:0 16px 34px rgba(23,89,255,.22);
}
.btn-ghost{
  background:transparent;
  color:var(--fg);
  border:1px solid var(--border);
}

@media (max-width:1100px){
  .hero-grid,.agent-grid,.steps-grid,.card-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:768px){
  .site-shell{padding:20px 16px 40px}
  .site-nav{flex-direction:column;align-items:flex-start}
  .hero-panel{padding:24px}
  .hero-grid,.agent-grid,.steps-grid,.card-grid{grid-template-columns:1fr}
  .hero-title{font-size:clamp(30px,12vw,44px)}
}