/* ============================================================
   Adagrad IT: design system

   Editorial light. Deliberately the opposite of the generated
   dark-glass-gradient look:

     no gradients        no glassmorphism
     no glow or halos    no backdrop blur
     no floating orbs    no rounded-everything

   Type and whitespace do the work. Colour is rationed: the brand
   teal appears about three times per page and means something
   each time. Structure comes from hairline rules, not shadows.

   Section order mirrors the markup order in the HTML pages.
   ============================================================ */

:root{
  /* --- surfaces --- */
  --paper:#fbfaf8;        /* warm off-white, not screen-white */
  --paper-2:#f4f2ee;      /* recessed blocks */
  --ink:#101014;          /* near-black, never pure */
  --ink-soft:#4a4a52;
  --ink-dim:#86868f;

  /* --- brand --- */
  --accent:#00c2a8;       /* the adagradit.com teal */
  --accent-ink:#00594e;   /* teal dark enough to read as text on paper */

  /* --- structure --- */
  --rule:#e4e1db;
  --rule-strong:#c9c5bc;

  /* --- geometry: restrained, not pill-shaped --- */
  --r:3px;
  --maxw:1240px;
  --nav-h:72px;

  /* --- type --- */
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --display:"Space Grotesk",var(--sans);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px);}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5{font-family:var(--display);font-weight:700;letter-spacing:-0.035em;line-height:1.02;}
h1{font-size:clamp(40px,7vw,88px);}
h2{font-size:clamp(30px,4.6vw,56px);}
h3{font-size:clamp(18px,1.9vw,22px);letter-spacing:-0.02em;line-height:1.22;}
h4{font-size:17px;letter-spacing:-0.015em;line-height:1.3;}
p{color:var(--ink-soft);}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
::selection{background:var(--accent);color:#fff;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.wrap-sm{max-width:820px;margin:0 auto;padding:0 32px;}
.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;}
.accent{color:var(--accent-ink);}

/* ---------- labels: a mono line above a rule. No pill, no pulsing dot. ---------- */
.mono{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-dim);
}
.eyebrow{
  display:block;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-dim);
  padding-bottom:10px;border-bottom:1px solid var(--rule);
  margin-bottom:26px;
}
.eyebrow::before{content:none;}

/* ---------- reveal: opacity and a short rise, nothing more ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}

/* ---------- buttons: flat, sharp, high contrast ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-0.01em;
  padding:14px 22px;border-radius:var(--r);
  border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:var(--accent-ink);}
.btn-ghost{border-color:var(--rule-strong);color:var(--ink);background:transparent;}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper);}
.btn .arw{transition:transform .18s ease;}
.btn:hover .arw{transform:translateX(4px);}
.btn-lg{padding:17px 28px;font-size:15.5px;}

.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);
  padding-bottom:3px;border-bottom:1px solid var(--ink);
}
.tlink .arw{color:var(--accent-ink);transition:transform .18s ease;}
.tlink:hover .arw{transform:translateX(5px);}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:200;height:var(--nav-h);
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
header.scrolled{border-bottom-color:var(--rule);}
nav.wrap{display:flex;align-items:center;gap:32px;height:var(--nav-h);}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-0.03em;}
.logo .mark{width:28px;height:28px;flex:none;}
.logo .mark svg{width:100%;height:100%;}
.nav-links{display:flex;gap:2px;margin-left:auto;}
.nav-links a{
  display:block;padding:8px 13px;border-radius:var(--r);
  font-size:14.5px;font-weight:500;color:var(--ink-soft);
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink);font-weight:600;}
.nav-right{display:flex;align-items:center;gap:12px;}
.burger{display:none;width:40px;height:40px;border:1px solid var(--rule-strong);border-radius:var(--r);padding:11px 10px;}
.burger span{display:block;height:1.5px;background:var(--ink);transition:transform .25s,opacity .25s;}
.burger span+span{margin-top:5px;}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-menu{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:199;
  background:var(--paper);border-bottom:1px solid var(--rule);
  padding:8px 32px 28px;display:none;
}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block;padding:15px 0;font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-0.02em;border-bottom:1px solid var(--rule);}
.mobile-menu .btn{margin-top:22px;width:100%;justify-content:center;}

/* ---------- section rhythm: rules, not shadows ---------- */
section{padding:clamp(72px,9vw,120px) 0;position:relative;}
section + section{border-top:1px solid var(--rule);}
.section-head{max-width:780px;margin-bottom:56px;}
.section-head h2{margin-bottom:20px;}
.section-head p{font-size:clamp(16px,1.5vw,18.5px);max-width:620px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .eyebrow{display:inline-block;}
.section-head.center p{margin-left:auto;margin-right:auto;}

/* ---------- hero ---------- */
.hero{padding-top:clamp(48px,7vw,92px);padding-bottom:clamp(56px,7vw,96px);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center;}
.hero h1{margin:0 0 28px;}
.hero-sub{font-size:clamp(16.5px,1.6vw,19px);max-width:520px;margin-bottom:36px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px;}
.hero-trust{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule);}
.hero-trust span{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);padding:14px 24px 0 0;
}
.hero-trust span::before{content:none;}

.page-hero{padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(44px,5vw,68px);}
.page-hero h1{font-size:clamp(36px,5.6vw,68px);margin:0 0 24px;max-width:17ch;}
.page-hero p{font-size:clamp(16px,1.5vw,18.5px);max-width:620px;}
.page-hero .hero-actions{margin-top:36px;margin-bottom:0;}

/* ============================================================
   THE MOTION GRAPHIC: agent pipeline.
   Flat line work on paper, one teal accent. No glow, no glass.
   ============================================================ */
.pipeline-shell{
  position:relative;
  border:1px solid var(--rule-strong);
  border-radius:var(--r);
  background:var(--paper);
  padding:0;
}
.pipeline-shell::before{content:none;}
.pipeline-bar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--rule);}
.pipeline-bar .dots{display:none;}
.pipeline-bar .title{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);}
.pipeline-bar .status{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);
}
.pipeline-bar .status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
.pipeline-stage{position:relative;background:var(--paper);}
.pipeline-stage svg{width:100%;height:auto;display:block;}

.pl-wire{fill:none;stroke:var(--rule-strong);stroke-width:1;}
.pl-node-box{fill:none;stroke:var(--rule-strong);stroke-width:1;transition:fill .3s,stroke .3s;}
.pl-node-box.hot{fill:rgba(0,194,168,0.10);stroke:var(--accent);}
.pl-node-label{font-family:var(--mono);font-size:8.6px;letter-spacing:.1em;fill:var(--ink);text-transform:uppercase;}
.pl-node-sub{font-family:var(--mono);font-size:7px;letter-spacing:.06em;fill:var(--ink-dim);}
.pl-core{fill:none;stroke:var(--ink);stroke-width:1.4;transition:fill .3s,stroke .3s;}
.pl-core.hot{fill:rgba(0,194,168,0.10);stroke:var(--accent);}
.pl-core-ring{fill:none;stroke:var(--rule-strong);stroke-width:1;}
.pl-core-label{font-family:var(--display);font-size:12px;font-weight:700;fill:var(--ink);letter-spacing:-0.02em;}
.pl-core-sub{font-family:var(--mono);font-size:6.8px;letter-spacing:.14em;fill:var(--ink-dim);text-transform:uppercase;}
.pl-packet{fill:var(--accent);}
.pl-packet-alt{fill:var(--ink);}

.pipeline-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--rule);}
.pipeline-tabs button{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 16px;border-right:1px solid var(--rule);
  color:var(--ink-dim);background:transparent;
  transition:color .15s ease,background .15s ease;
}
.pipeline-tabs button:hover{color:var(--ink);}
.pipeline-tabs button[aria-selected="true"]{color:var(--ink);background:var(--paper-2);font-weight:500;}

.pipeline-log{
  padding:14px 16px;border-top:1px solid var(--rule);
  background:var(--paper-2);
  font-family:var(--mono);font-size:11px;line-height:1.85;color:var(--ink-dim);
  height:92px;overflow:hidden;
}
.pipeline-log .ln{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pipeline-log .t{color:var(--ink-dim);opacity:.6;}
.pipeline-log .ok{color:var(--accent-ink);}
.pipeline-log .ag{color:var(--ink);}
.pipeline-log .hi{color:var(--ink);font-weight:500;}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 0;overflow:hidden;}
.marquee-track{display:flex;gap:48px;width:max-content;animation:slide 46s linear infinite;}
.marquee-track span{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);white-space:nowrap;
}
.marquee-track span::after{content:none;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes slide{to{transform:translateX(-50%);}}

/* ---------- panels: hairline boxes, no fill ---------- */
.panel{
  border:1px solid var(--rule);border-radius:var(--r);
  background:transparent;padding:30px;
  transition:border-color .2s ease;
}
.panel:hover{border-color:var(--rule-strong);}

/* ---------- mechanism ---------- */
.mech-grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--rule);}
.mech-step{
  padding:24px 26px 30px;border-right:1px solid var(--rule);
  border-top:2px solid var(--ink);
}
.mech-step::after{content:none;}
.mech-step .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-dim);margin-bottom:18px;display:block;}
.mech-step h3{margin-bottom:12px;}
.mech-step p{font-size:14.5px;}
.mech-step .meta{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-dim);text-transform:uppercase;
}

/* ---------- service / agent cards ---------- */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule);}
.agent-card{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:30px 28px;display:flex;flex-direction:column;gap:16px;
  transition:background .2s ease;
}
.agent-card:hover{background:var(--paper-2);}
.agent-head{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.agent-id{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-dim);}
.agent-chip{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--rule-strong);border-radius:var(--r);color:var(--ink-soft);
  white-space:nowrap;
}
.agent-chip.live{color:var(--accent-ink);border-color:var(--accent);}
.agent-card h3{margin-bottom:-4px;}
.agent-card>p{font-size:14.5px;}
.agent-spec{margin-top:auto;border-top:1px solid var(--rule);padding-top:16px;display:grid;gap:9px;}
.agent-spec>div{display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:baseline;}
.agent-spec .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);}
.agent-spec .v{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.5;}

/* ---------- proof ---------- */
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);}
.proof-cell{padding:34px 26px;border-right:1px solid var(--rule);}
.proof-cell:last-child{border-right:0;}
.proof-cell .big{font-family:var(--display);font-size:clamp(38px,4.8vw,60px);font-weight:700;letter-spacing:-0.05em;line-height:1;color:var(--ink);}
.proof-cell .big span{color:var(--accent-ink);}
.proof-cell .lbl{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}
.tags span{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:8px 13px;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink-soft);
}

/* ---------- split rows ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px);align-items:start;}
.checklist{display:grid;margin-top:26px;border-top:1px solid var(--rule);}
.checklist li{
  display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--ink-soft);
  padding:13px 0;border-bottom:1px solid var(--rule);
}
.checklist li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;background:var(--accent);}

/* ---------- pricing ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--rule);}
.tier{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:32px 28px;display:flex;flex-direction:column;position:relative;
}
.tier.featured{background:var(--paper-2);}
.tier-flag{
  position:absolute;top:0;right:0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:6px 11px;
}
.tier .tname{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-0.03em;}
.tier .tfor{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dim);margin-top:8px;}
.tier .tscope{margin:24px 0 8px;font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-0.02em;line-height:1.28;color:var(--ink);}
.tier .tnote{font-size:14px;color:var(--ink-soft);}
.tier .btn{margin-top:24px;width:100%;justify-content:center;}
.tier ul{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule);display:grid;gap:10px;}
.tier ul li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-soft);}
.tier ul li::before{content:"";flex:none;width:6px;height:6px;margin-top:7px;background:var(--accent);}
.tier ul li.off{color:var(--ink-dim);}
.tier ul li.off::before{background:var(--rule-strong);}

.table-wrap{overflow-x:auto;border-top:1px solid var(--ink);}
table{width:100%;border-collapse:collapse;min-width:680px;}
th,td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--rule);font-size:14.5px;}
thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dim);font-weight:500;}
tbody th{font-weight:500;color:var(--ink);font-family:var(--sans);font-size:14.5px;}
td{color:var(--ink-soft);}
td .yes{color:var(--accent-ink);font-weight:500;}
td .no{color:var(--ink-dim);}

/* ---------- FAQ ---------- */
.faq{display:grid;border-top:1px solid var(--ink);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-size:clamp(17px,1.8vw,20px);font-weight:600;letter-spacing:-0.025em;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--accent-ink);}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-6px;
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-size:12px 1.5px,1.5px 12px;background-position:center;background-repeat:no-repeat;
  transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{padding:0 60px 26px 0;font-size:15.5px;max-width:820px;}

/* ---------- CTA ---------- */
.cta-inner{border-top:2px solid var(--ink);padding:clamp(48px,6vw,80px) 0 0;text-align:left;}
.cta-inner .eyebrow{display:inline-block;}
.cta-inner h2{margin:0 0 20px;}
.cta-inner>p{max-width:560px;font-size:17px;}

/* ---------- forms: underlined fields, no boxes ---------- */
.form{max-width:560px;margin:36px 0 0;display:grid;text-align:left;}
.form-row{display:grid;grid-template-columns:1fr 1fr;}
.form input,.form textarea,.form select{
  width:100%;padding:16px 2px;
  background:transparent;border:0;border-bottom:1px solid var(--rule-strong);
  color:var(--ink);font-family:inherit;font-size:16px;border-radius:0;
  transition:border-color .2s ease;
}
.form-row>div+div input{padding-left:16px;}
.form textarea{resize:vertical;min-height:110px;}
.form select{appearance:none;cursor:pointer;}
.form select:has(option[value=""]:checked){color:var(--ink-dim);}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-dim);}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-bottom-color:var(--accent);}
.form .btn{width:auto;margin-top:28px;justify-self:start;}
.form-status{font-family:var(--mono);font-size:12px;letter-spacing:.05em;min-height:20px;color:var(--ink-dim);margin-top:14px;}
.form-status.ok{color:var(--accent-ink);}
.form-status.err{color:#b3261e;}
.hp-field{position:absolute!important;left:-9999px!important;opacity:0!important;pointer-events:none;}
.form-note{font-size:13px;color:var(--ink-dim);margin-top:16px;}

/* ---------- numbered steps ---------- */
.steps{display:grid;counter-reset:s;border-top:1px solid var(--rule);}
.steps li{
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  padding:24px 0;border-bottom:1px solid var(--rule);
}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-dim);padding-top:4px;
}
.steps h4{margin-bottom:7px;}
.steps p{font-size:14.5px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--ink);padding:56px 0 28px;}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;}
.footer-brand p{font-size:14px;max-width:280px;margin-top:16px;}
.footer-col h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);font-weight:500;margin-bottom:16px;}
.footer-col a{display:block;padding:6px 0;font-size:14.5px;color:var(--ink-soft);transition:color .15s ease;}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{
  border-top:1px solid var(--rule);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-dim);text-transform:uppercase;
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .mech-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .tier-grid{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .nav-links{display:none;}
  .nav-right{margin-left:auto;}
  .nav-right .btn{display:none;}
  .burger{display:block;}
  .hero-grid{grid-template-columns:1fr;gap:48px;}
  .split{grid-template-columns:1fr;}
  .proof-grid{grid-template-columns:1fr 1fr;}
  .proof-cell:nth-child(2n){border-right:0;}
  .proof-cell:nth-child(-n+2){border-bottom:1px solid var(--rule);}
}
@media (max-width:640px){
  .wrap,.wrap-sm{padding:0 20px;}
  .mech-grid{grid-template-columns:1fr;border-left:0;}
  .mech-step{border-right:0;}
  .form-row{grid-template-columns:1fr;}
  .form-row>div+div input{padding-left:2px;}
  .footer-top{grid-template-columns:1fr;}
  .agent-grid{grid-template-columns:1fr;border-left:0;}
  .agent-card{border-right:0;}
  .proof-cell{padding:26px 20px;}
  .pipeline-log{height:104px;}
}

/* ---------- small screens: the components added later ---------- */
@media (max-width:640px){
  /* heading and arrows were side by side and got cramped */
  .carousel-head{flex-wrap:wrap;}
  .carousel-head .carousel-nav{margin-left:auto;}

  /* size cards to the viewport so the next one peeks, which is the only
     cue on touch that the row scrolls */
  .carousel{grid-auto-columns:minmax(0,84vw);}

  /* flow labels are in viewBox units, so they shrink with the container.
     Bump them back to something legible on a phone. */
  .flow{padding:18px 14px;}
  .flow-label{font-size:11px;}

  /* seven tabs will never fit, so make the horizontal scroll visible */
  .tabs-bar{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
            mask-image:linear-gradient(90deg,#000 86%,transparent);}
  .tabs-bar button{padding:14px 14px;font-size:14px;}
  .tabs-bar .idx{margin-right:7px;}

  /* The hero pipeline is a 640-unit viewBox squeezed into ~355px, so its
     labels render under 5px. Scale the type up in viewBox units and drop
     the secondary line, which is unreadable at any size on a phone. */
  .pl-node-label{font-size:12px;}
  .pl-node-sub{display:none;}
  .pl-core-label{font-size:18px;}
  .pl-core-sub{display:none;}

  /* stat pairs inside a story sit too tight at this width */
  .accordion .proof-grid{grid-template-columns:1fr 1fr;}
  .accordion .proof-cell{padding:22px 16px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .marquee-track{animation:none;transform:none;}
  .reveal{opacity:1!important;transform:none!important;}
}

/* ============================================================
   INTERACTIVE COMPONENTS
   Added to replace long-form text with things you click through.
   Carousel: scroll-snap, no library, works with touch and keys.
   Accordion: native <details>, so it works with JS disabled.
   ============================================================ */

/* ---------- carousel ---------- */
.carousel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;}
.carousel-nav{display:flex;gap:8px;flex:none;}
.carousel-nav button{
  width:42px;height:42px;border:1px solid var(--rule-strong);border-radius:var(--r);
  display:grid;place-items:center;color:var(--ink);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.carousel-nav button:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink);}
.carousel-nav button:disabled{opacity:.3;cursor:default;}
.carousel-nav svg{width:16px;height:16px;}

.carousel{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(300px,340px);
  gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none;}
.carousel > *{scroll-snap-align:start;}
.carousel .agent-card{border-bottom:1px solid var(--rule);}

/* ---------- accordion ---------- */
.accordion{border-top:1px solid var(--ink);}
.accordion details{border-bottom:1px solid var(--rule);}
.accordion summary{
  list-style:none;cursor:pointer;position:relative;
  padding:26px 52px 26px 0;
}
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary .n{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-dim);
}
.accordion summary .t{
  display:block;
  font-family:var(--display);font-size:clamp(20px,2.4vw,28px);font-weight:700;
  letter-spacing:-0.03em;line-height:1.15;
}
.accordion summary .s{
  display:block;margin-top:8px;font-family:var(--sans);font-size:15px;
  font-weight:400;letter-spacing:0;color:var(--ink-soft);max-width:60ch;
}
.accordion summary:hover .t{color:var(--accent-ink);}
.accordion summary::after{
  content:"";position:absolute;right:8px;top:34px;width:13px;height:13px;
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-size:13px 1.5px,1.5px 13px;background-position:center;background-repeat:no-repeat;
  transition:transform .25s ease;
}
.accordion details[open] summary::after{transform:rotate(45deg);}
.accordion .body{
  padding:0 52px 32px 0;
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);
  animation:acc-in .35s cubic-bezier(.2,.7,.3,1);
}
@keyframes acc-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.accordion .body .checklist{margin-top:0;}
@media (max-width:820px){
  .accordion .body{grid-template-columns:1fr;padding-right:0;}
  .accordion summary{padding-right:44px;}
}

/* ---------- platform / capability grid ---------- */
.plat-group + .plat-group{margin-top:34px;}
.plat-group h4{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--rule);
}
.plat-list{display:flex;flex-wrap:wrap;gap:8px;}
.plat-list span{
  font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-0.01em;
  padding:9px 15px;border:1px solid var(--rule-strong);border-radius:var(--r);
  color:var(--ink);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.plat-list span:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ============================================================
   TABS with animated panels.
   Spara-style: pick a line, the panel swaps, a small diagram
   animates. All CSS and SVG, so it costs no video weight.
   ============================================================ */
.tabs-bar{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--rule);
}
.tabs-bar::-webkit-scrollbar{display:none;}
.tabs-bar button{
  position:relative;white-space:nowrap;
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-0.015em;
  padding:16px 20px;color:var(--ink-dim);
  transition:color .18s ease;
}
.tabs-bar button:hover{color:var(--ink);}
.tabs-bar button[aria-selected="true"]{color:var(--ink);}
.tabs-bar button[aria-selected="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);
}
.tabs-bar .idx{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--ink-dim);margin-right:9px;
}

.tab-panel{display:none;padding-top:44px;}
.tab-panel[data-active]{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);animation:tab-in .35s cubic-bezier(.2,.7,.3,1);}
@keyframes tab-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.tab-panel h3{font-size:clamp(24px,2.8vw,34px);margin-bottom:16px;}
.tab-panel .lede{font-size:16.5px;margin-bottom:26px;}
@media (max-width:900px){.tab-panel[data-active]{grid-template-columns:1fr;}}

/* the animated flow strip inside each panel */
.flow{
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper-2);padding:22px 20px;
}
.flow svg{width:100%;height:auto;display:block;overflow:visible;}
.flow-box{fill:var(--paper);stroke:var(--rule-strong);stroke-width:1;}
.flow-label{font-family:var(--mono);font-size:7.4px;letter-spacing:.08em;fill:var(--ink);text-transform:uppercase;}
.flow-wire{stroke:var(--rule-strong);stroke-width:1;fill:none;}
.flow-dot{fill:var(--accent);animation:flow-run 5.2s linear infinite;}
.flow-dot:nth-of-type(2){animation-delay:1.7s;}
.flow-dot:nth-of-type(3){animation-delay:3.4s;}
@keyframes flow-run{
  0%{transform:translateX(0);opacity:0;}
  6%{opacity:1;}
  94%{opacity:1;}
  100%{transform:translateX(376px);opacity:0;}
}
.flow-cap{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);
}
@media (prefers-reduced-motion:reduce){.flow-dot{animation:none;opacity:1;}}

/* service cards that link into a capability tab */
a.agent-card{color:inherit;cursor:pointer;}
a.agent-card h3{transition:color .18s ease;}
a.agent-card:hover h3{color:var(--accent-ink);}
a.agent-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}