/* ============================================================
   Reset + base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
}
img,picture,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--accent);text-decoration:none;text-underline-offset:.2em}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:.25rem}

/* ============================================================
   Theme tokens (light + dark via prefers-color-scheme)
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --surface:#F8FAFC;
  --surface-2:#F1F5F9;
  --border:#E2E8F0;
  --border-strong:#CBD5E1;
  --text:#0F172A;
  --text-2:#475569;
  --text-3:#64748B;
  --accent:#4F46E5;
  --accent-hover:#4338CA;
  --accent-soft:#EEF2FF;
  --success:#059669;
  --danger:#DC2626;
  --code-bg:#0F172A;
  --code-fg:#E2E8F0;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 4px 6px -1px rgba(15,23,42,.08),0 2px 4px -2px rgba(15,23,42,.06);
  --shadow-lg:0 20px 40px -16px rgba(15,23,42,.18);
  --radius:.75rem;
  --radius-lg:1rem;
  --container:72rem;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#020617;
    --surface:#0F172A;
    --surface-2:#1E293B;
    --border:#1E293B;
    --border-strong:#334155;
    --text:#F1F5F9;
    --text-2:#94A3B8;
    --text-3:#64748B;
    --accent:#818CF8;
    --accent-hover:#A5B4FC;
    --accent-soft:#1E1B4B;
    --code-bg:#0B1120;
    --code-fg:#E2E8F0;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 4px 6px -1px rgba(0,0,0,.5);
    --shadow-lg:0 20px 40px -16px rgba(0,0,0,.6);
  }
}
[data-theme="light"]{
  --bg:#FFFFFF;--surface:#F8FAFC;--surface-2:#F1F5F9;--border:#E2E8F0;--border-strong:#CBD5E1;
  --text:#0F172A;--text-2:#475569;--text-3:#64748B;--accent:#4F46E5;--accent-hover:#4338CA;
  --accent-soft:#EEF2FF;--code-bg:#0F172A;--code-fg:#E2E8F0;
}
[data-theme="dark"]{
  --bg:#020617;--surface:#0F172A;--surface-2:#1E293B;--border:#1E293B;--border-strong:#334155;
  --text:#F1F5F9;--text-2:#94A3B8;--text-3:#64748B;--accent:#818CF8;--accent-hover:#A5B4FC;
  --accent-soft:#1E1B4B;--code-bg:#0B1120;--code-fg:#E2E8F0;
}

/* ============================================================
   Layout primitives
   ============================================================ */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:1.25rem;
}
@media(min-width:768px){.container{padding-inline:2rem}}

.section{padding-block:4rem}
@media(min-width:768px){.section{padding-block:6rem}}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-100px;left:1rem;padding:.75rem 1rem;background:var(--accent);
  color:#fff;border-radius:.5rem;z-index:100;
}
.skip-link:focus{top:1rem}

/* ============================================================
   Header / nav
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
@media(prefers-color-scheme:dark){
  .site-header{background:rgba(2,6,23,.78)}
}
[data-theme="light"] .site-header{background:rgba(255,255,255,.78)}
[data-theme="dark"] .site-header{background:rgba(2,6,23,.78)}

.nav{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:4rem;
}
.logo{
  font-weight:800;font-size:1.125rem;color:var(--text);letter-spacing:-.02em;
  display:flex;align-items:center;gap:.5rem;
}
.logo:hover{text-decoration:none}
.logo-mark{
  display:grid;place-items:center;width:1.75rem;height:1.75rem;
  background:linear-gradient(135deg,var(--accent),#A855F7);
  color:#fff;border-radius:.5rem;font-weight:900;font-size:.95rem;
}
.nav-links{
  display:none;list-style:none;gap:1.75rem;
  font-size:.9375rem;font-weight:500;
}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{color:var(--text-2);transition:color .15s}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-actions{display:flex;align-items:center;gap:.5rem}
.theme-toggle{
  width:2.25rem;height:2.25rem;display:grid;place-items:center;
  border-radius:.5rem;color:var(--text-2);
  transition:background .15s,color .15s;
}
.theme-toggle:hover{background:var(--surface);color:var(--text)}
.theme-toggle svg{width:1.1rem;height:1.1rem}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
@media(prefers-color-scheme:dark){
  .theme-toggle .icon-sun{display:block}
  .theme-toggle .icon-moon{display:none}
}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.25rem;
  font-weight:600;font-size:.9375rem;line-height:1;
  border-radius:.625rem;
  transition:transform .12s,background .15s,border-color .15s,box-shadow .15s;
  white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:0 4px 14px -4px rgba(79,70,229,.5);
}
.btn-primary:hover{background:var(--accent-hover);color:#fff}
.btn-secondary{
  background:var(--surface);color:var(--text);border-color:var(--border);
}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--border-strong)}
.btn-large{padding:1rem 1.75rem;font-size:1.0625rem}
.btn-icon{width:1.1em;height:1.1em}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  padding-block:3rem 4rem;
  overflow:hidden;
}
@media(min-width:768px){.hero{padding-block:5rem 7rem}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--accent-soft) 0%, transparent 70%),
    radial-gradient(40% 30% at 100% 50%, rgba(168,85,247,.08) 0%, transparent 70%);
  pointer-events:none;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.375rem .875rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  background:var(--accent-soft);color:var(--accent);
  border-radius:9999px;
  margin-bottom:1.5rem;
}
.eyebrow::before{
  content:"";display:block;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}
}
.hero h1{
  font-size:clamp(2rem,5vw + 1rem,4rem);
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:800;
  margin-bottom:1.25rem;
  max-width:22ch;
  overflow-wrap:break-word;
}
.hero h1 .grad{
  background:linear-gradient(135deg,var(--accent) 0%,#A855F7 60%,#EC4899 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero .lead{
  font-size:clamp(1.0625rem,.5vw + 1rem,1.25rem);
  color:var(--text-2);
  max-width:38rem;
  margin-bottom:2rem;
}
.cta-row{
  display:flex;flex-wrap:wrap;gap:.75rem;
  margin-bottom:2.5rem;
}
.stats{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 2rem;
  max-width:36rem;
}
@media(min-width:640px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stats li{
  display:flex;flex-direction:column;
  font-size:.8125rem;color:var(--text-3);
  line-height:1.3;
}
.stats strong{
  display:block;font-size:1.5rem;font-weight:700;color:var(--text);
  margin-bottom:.125rem;letter-spacing:-.02em;
}

/* ============================================================
   Terminal demo
   ============================================================ */
.terminal{
  margin-top:3.5rem;
  background:var(--code-bg);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--border-strong) 30%,var(--code-bg));
}
.term-bar{
  display:flex;align-items:center;gap:.4375rem;
  padding:.75rem 1rem;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.term-bar i{display:block;width:.75rem;height:.75rem;border-radius:50%}
.term-bar i:nth-child(1){background:#FF5F57}
.term-bar i:nth-child(2){background:#FEBC2E}
.term-bar i:nth-child(3){background:#28C840}
.term-title{
  margin-left:.5rem;color:#94A3B8;font-size:.8125rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.term-body{
  padding:1.25rem 1.25rem 1.5rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.8125rem;line-height:1.75;
  color:var(--code-fg);
  overflow-x:auto;
}
@media(min-width:640px){.term-body{font-size:.875rem}}
.term-body p{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:normal;
  text-indent:-1.25rem;
  padding-left:1.25rem;
}
.term-body .prompt{color:#A78BFA;font-weight:700;margin-right:.5rem}
.term-body .cmd{color:#67E8F9}
.term-body .agent{color:#FBBF24}
.term-body .output{color:#94A3B8}
.term-body .ok{color:#34D399}
.term-body .warn{color:#FBBF24;font-weight:600}
.term-body .err{color:#F87171;font-weight:600}
.term-body p+p{margin-top:.25rem}
.term-body .blink::after{
  content:"▊";color:#A78BFA;animation:blink 1.1s steps(2) infinite;margin-left:.125rem;
}
@keyframes blink{50%{opacity:0}}

/* ============================================================
   Sections
   ============================================================ */
.section-head{
  text-align:center;
  max-width:42rem;
  margin:0 auto 3rem;
}
.section-head h2{
  font-size:clamp(1.75rem,2vw + 1rem,2.5rem);
  letter-spacing:-.025em;
  line-height:1.15;
  margin-bottom:.875rem;
}
.section-head p{color:var(--text-2);font-size:1.0625rem}

.bg-surface{background:var(--surface)}

/* Problem cards */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media(min-width:768px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  transition:border-color .15s,transform .15s,box-shadow .15s;
  min-width:0;
}
.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.card-icon{
  display:inline-grid;place-items:center;
  width:2.75rem;height:2.75rem;
  border-radius:.625rem;
  background:var(--accent-soft);color:var(--accent);
  margin-bottom:1rem;
  font-size:1.25rem;
}
.card h3{
  font-size:1.125rem;font-weight:700;letter-spacing:-.01em;
  margin-bottom:.5rem;
}
.card p{color:var(--text-2);font-size:.9375rem}

/* Solution / 3 piliers */
.pillars{
  display:grid;grid-template-columns:1fr;gap:2rem;
  max-width:60rem;margin:0 auto;
}
@media(min-width:768px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{text-align:left}
.pillar .num{
  display:inline-grid;place-items:center;
  width:2.25rem;height:2.25rem;
  font-weight:800;font-size:.9375rem;
  border-radius:.5rem;
  background:linear-gradient(135deg,var(--accent),#A855F7);
  color:#fff;
  margin-bottom:1rem;
}
.pillar h3{font-size:1.1875rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.015em}
.pillar p{color:var(--text-2)}

/* Catalog section */
#agents{padding-block:5rem}
@media(min-width:768px){#agents{padding-block:7rem}}

/* Install steps */
.steps{
  display:grid;grid-template-columns:1fr;gap:1.5rem;
  max-width:48rem;margin:0 auto;
}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  position:relative;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem 1.5rem;
  min-width:0;
}
.step .step-num{
  position:absolute;top:-.875rem;left:1.5rem;
  display:grid;place-items:center;
  width:2rem;height:2rem;border-radius:.5rem;
  background:var(--accent);color:#fff;
  font-weight:800;font-size:.875rem;
}
.step h3{
  font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;
  margin-top:.5rem;margin-bottom:.5rem;
}
.step p{font-size:.9375rem;color:var(--text-2)}
.step code{
  display:inline-block;
  background:var(--surface-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.8125rem;
  padding:.125rem .375rem;
  border-radius:.25rem;
  overflow-wrap:anywhere;
  word-break:normal;
  max-width:100%;
}
.code-block{
  margin-top:2rem;
  background:var(--code-bg);
  color:var(--code-fg);
  border-radius:var(--radius);
  padding:1.25rem 1.5rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.8125rem;line-height:1.75;
  overflow-x:auto;
  box-shadow:var(--shadow);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:normal;
  -moz-tab-size:2;
  tab-size:2;
}
@media(min-width:640px){.code-block{font-size:.875rem}}
.code-block .comment{color:#64748B;font-style:italic}
.code-block .agent{color:#FBBF24;font-weight:600}
.code-block .prompt{color:#A78BFA;font-weight:700;margin-right:.25rem}

/* Comparison table */
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -1rem;padding:0 1rem}
.scroll-hint{
  display:none;align-items:center;gap:.4rem;justify-content:center;
  margin:0 0 1rem;font-size:.8125rem;font-weight:500;color:var(--text-3);
}
.scroll-hint svg{width:1rem;height:1rem;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(.25rem)}}
@media(max-width:639px){.scroll-hint{display:flex}}
.compare{
  width:100%;min-width:36rem;
  border-collapse:separate;border-spacing:0;
  font-size:.9375rem;
}
.compare th,.compare td{
  padding:1rem 1.25rem;text-align:left;
  border-bottom:1px solid var(--border);
}
.compare thead th{
  font-weight:600;color:var(--text-2);font-size:.875rem;
  background:var(--surface);
}
.compare thead th:first-child{border-top-left-radius:var(--radius)}
.compare thead th:last-child{border-top-right-radius:var(--radius)}
.compare .featured{
  background:linear-gradient(180deg,var(--accent-soft) 0%,transparent 100%);
  color:var(--accent);font-weight:700;
}
.compare tbody td:first-child{font-weight:500}
.yes{color:var(--success);font-weight:700}
.no{color:var(--text-3)}

/* FAQ */
.faq-list{max-width:48rem;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}
.faq-item{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .15s;
}
.faq-item[open]{border-color:var(--accent)}
.faq-item summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.125rem 1.375rem;
  font-weight:600;font-size:1.0625rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-size:1.5rem;font-weight:400;color:var(--text-3);
  transition:transform .15s;flex-shrink:0;
}
.faq-item[open] summary::after{content:"−";color:var(--accent)}
.faq-item .answer{
  padding:0 1.375rem 1.375rem;
  color:var(--text-2);font-size:.9375rem;line-height:1.65;
}
.faq-item .answer p+p{margin-top:.75rem}

/* Final CTA */
.final-cta{
  text-align:center;
  background:
    radial-gradient(60% 80% at 50% 0%, var(--accent-soft) 0%, transparent 65%),
    var(--bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.final-cta h2{font-size:clamp(1.75rem,2vw + 1rem,2.5rem);margin-bottom:1rem;letter-spacing:-.025em}
.final-cta p{color:var(--text-2);font-size:1.0625rem;margin-bottom:2rem}
.final-cta .meta{color:var(--text-3);font-size:.875rem;margin-top:1.25rem;margin-bottom:0}

/* Footer */
.site-footer{
  padding:3rem 0 2.5rem;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.footer-grid{
  display:grid;grid-template-columns:1fr;gap:2rem;
  margin-bottom:2.5rem;
}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-brand p{
  color:var(--text-2);font-size:.9375rem;margin-top:.75rem;max-width:24rem;
}
.footer-col h4{
  font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-3);margin-bottom:.875rem;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.footer-col a{color:var(--text-2);font-size:.9375rem}
.footer-col a:hover{color:var(--text);text-decoration:none}
.footer-bottom{
  padding-top:2rem;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  color:var(--text-3);font-size:.875rem;
}

/* Very small screens — keep the sticky header from crowding/clipping */
@media(max-width:374px){
  .nav{gap:.5rem}
  .nav-actions{gap:.375rem}
  .site-header .btn-primary{padding-inline:.875rem}
  .site-header .btn-primary .btn-icon{display:none}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Print */
@media print{
  .site-header,.theme-toggle,.final-cta,.terminal,.site-footer{display:none}
  a{color:#000;text-decoration:underline}
  body{background:#fff;color:#000}
}

/* ============================================================
   Language switcher (i18n)
   ============================================================ */
.lang-switch{position:relative}
.lang-switch>summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.375rem;
  height:2.25rem;padding:0 .625rem;
  border-radius:.5rem;color:var(--text-2);font-size:.875rem;font-weight:600;
  transition:background .15s,color .15s;
}
.lang-switch>summary::-webkit-details-marker{display:none}
.lang-switch>summary:hover{background:var(--surface);color:var(--text)}
.lang-switch>summary svg{width:1rem;height:1rem;flex-shrink:0}
.lang-switch[open]>summary{background:var(--surface);color:var(--text)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + .375rem);z-index:60;
  min-width:9rem;padding:.375rem;
  background:var(--bg);border:1px solid var(--border);
  border-radius:.625rem;box-shadow:var(--shadow-lg);
  list-style:none;display:flex;flex-direction:column;gap:.125rem;
}
.lang-menu li{margin:0}
.lang-menu a{
  display:block;padding:.5rem .625rem;border-radius:.4rem;
  color:var(--text-2);font-size:.875rem;font-weight:500;
}
.lang-menu a:hover{background:var(--surface);color:var(--text);text-decoration:none}
.lang-menu a[aria-current="true"]{color:var(--accent);font-weight:700;background:var(--accent-soft)}

/* Ecosystem product cards reuse .card; small badge for the editor list */
.eco-editors{
  display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.875rem;
}
.eco-editors span{
  font-size:.75rem;font-weight:600;color:var(--text-2);
  background:var(--surface-2);border-radius:9999px;padding:.25rem .625rem;
}
.eco-card .cmd{
  display:block;margin-top:.875rem;
  background:var(--code-bg);color:var(--code-fg);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;
  padding:.625rem .75rem;border-radius:.5rem;overflow-x:auto;white-space:pre;
}