/* ======================================================================
   v6: agentic. Live console, drifting field, scroll reveals, counters.
   Loaded after style.css. Home page and case-study pages only.
   ====================================================================== */
body.dark { --accent-2: #4ad7ff; --accent-glow: rgba(46,232,143,.35); }

/* field: grid + slow glows behind everything */
.field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.field::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(241,239,231,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(241,239,231,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}
.glow { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.glow-a { width: 560px; height: 560px; background: var(--accent); top: -180px; right: -120px; animation: driftA 26s ease-in-out infinite alternate; opacity: .22; }
.glow-b { width: 420px; height: 420px; background: var(--accent-2); top: 40vh; left: -160px; animation: driftB 32s ease-in-out infinite alternate; opacity: .12; }
@keyframes driftA { to { transform: translate(-140px, 160px) scale(1.15); } }
@keyframes driftB { to { transform: translate(180px, -120px) scale(.9); } }

/* scroll reveal */
.io { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.io.in { opacity: 1; transform: none; }
.io-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.io-stagger.in > * { opacity: 1; transform: none; }
.io-stagger.in > *:nth-child(2) { transition-delay: .08s } .io-stagger.in > *:nth-child(3) { transition-delay: .16s }
.io-stagger.in > *:nth-child(4) { transition-delay: .24s } .io-stagger.in > *:nth-child(5) { transition-delay: .32s }
.io-stagger.in > *:nth-child(6) { transition-delay: .40s } .io-stagger.in > *:nth-child(7) { transition-delay: .48s }
.io-stagger.in > *:nth-child(8) { transition-delay: .56s } .io-stagger.in > *:nth-child(9) { transition-delay: .64s }

/* hero */
.hero-a {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(44px, 7vw, 96px) var(--gutter) clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hero-a h1.display { font-size: clamp(54px, 7vw, 96px); }
.hero-a h1 .hl { color: var(--accent); }
.hero-a .lede { max-width: 44ch; }
.hero-a .hero-ctas { margin: 28px 0 30px; }
.hero-note { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin: 0; }
.hero-note b { color: var(--accent); font-weight: 500; }

/* console */
.console {
  position: relative; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #161a1f 0%, #0f1316 100%);
  border: 1px solid #2b3137;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(46,232,143,.06), 0 0 80px -30px var(--accent-glow);
  font-family: var(--mono); font-size: 13.5px;
}
.console::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(46,232,143,.07) 50%, transparent 70%); background-size: 250% 100%; animation: sheen 7s linear infinite; pointer-events: none; }
@keyframes sheen { to { background-position: -150% 0; } }
.con-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #22282e; background: rgba(255,255,255,.015); }
.dots { display: flex; gap: 6px; } .dots i { width: 9px; height: 9px; border-radius: 50%; background: #2f363d; display: block; }
.con-title { color: var(--ink-3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(46,232,143,.6); animation: ping 1.8s ease-out infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(46,232,143,0); } 100% { box-shadow: 0 0 0 0 rgba(46,232,143,0); } }
.log { list-style: none; margin: 0; padding: 14px 16px 6px; min-height: 206px; }
.log li { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 6px 0; color: var(--ink-2); line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.log li.on { opacity: 1; transform: none; }
.log time { color: var(--ink-3); font-size: 12px; padding-top: 1px; }
.log .ok { color: var(--accent); } .log .wait { color: #f0c15a; } .log .app { color: var(--accent-2); }
.cursor { display: inline-block; width: 8px; height: 15px; background: var(--accent); vertical-align: -2px; margin-left: 3px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.gate { margin: 8px 16px 16px; padding: 12px 14px; border: 1px dashed #3a4148; border-radius: 12px; display: flex; align-items: center; gap: 12px; background: rgba(240,193,90,.04); transition: border-color .3s, background .3s; }
.gate span { color: var(--ink-2); font-size: 12.5px; }
.gate b { margin-left: auto; font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; border: 1px solid #f0c15a; color: #f0c15a; white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.gate.approved { border-color: rgba(46,232,143,.4); background: rgba(46,232,143,.05); }
.gate.approved b { background: var(--accent); color: #06130d; border-color: var(--accent); }
.con-foot { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 16px; }
.chip { font-size: 11.5px; color: var(--ink-3); border: 1px solid #2b3137; padding: 5px 9px; border-radius: 999px; }
.chip i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }

/* graph */
.graph-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(32px, 5vw, 64px); }
.graph { width: 100%; height: auto; display: block; }
.graph .wire { stroke: #3a4148; stroke-width: 1.5; fill: none; }
.graph .pulse { stroke: var(--accent); stroke-width: 2; fill: none; stroke-dasharray: 8 160; animation: flow 3.4s linear infinite; }
.graph .pulse.b { animation-delay: -1.1s; } .graph .pulse.c { animation-delay: -2.2s; } .graph .pulse.d { animation-delay: -.6s; } .graph .pulse.e { animation-delay: -1.7s; }
@keyframes flow { to { stroke-dashoffset: -168; } }
.graph .node { fill: #171b1f; stroke: #2b3137; stroke-width: 1.5; }
.graph .core { fill: #0f1316; stroke: var(--accent); stroke-width: 1.5; filter: drop-shadow(0 0 14px rgba(46,232,143,.45)); }
.graph text { font-family: var(--mono); font-size: 11.5px; fill: var(--ink-2); text-anchor: middle; }
.graph .core-t { fill: var(--accent); font-weight: 500; letter-spacing: .06em; }
.graph .gate-t { fill: #f0c15a; font-size: 10.5px; }

/* marquee */
.marquee-label { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 10px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li { list-style: none; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: #1d2227; white-space: nowrap; }
.marquee-track { margin: 0; padding: 0; }
@keyframes slide { to { transform: translateX(-50%); } }

/* offers */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.offer {
  position: relative; background: #171b1f; border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px 22px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; overflow: hidden;
}
.offer::after { content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1px; background: linear-gradient(135deg, var(--accent), transparent 45%, transparent 55%, var(--accent-2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; }
.offer:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 60px -30px var(--accent-glow); }
.offer:hover::after { opacity: 1; }
.offer .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.offer h3 { font-size: 19px; letter-spacing: -0.015em; margin-bottom: 8px; }
.offer p { color: var(--ink-2); font-size: 15px; margin: 0 0 14px; }
.offer .price { font-family: var(--mono); font-size: 13.5px; color: var(--ink); margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.offer .price small { color: var(--ink-3); }
.group-head { display: flex; align-items: baseline; gap: 16px; margin: clamp(32px, 4vw, 48px) 0 16px; }
.group-head h3 { font-family: var(--condensed); text-transform: uppercase; font-size: clamp(26px, 3vw, 36px); letter-spacing: .01em; margin: 0; }
.group-head p { color: var(--ink-3); font-size: 15px; margin: 0; }
.group-head.first { margin-top: 0; }

/* flow */
.flow { list-style: none; counter-reset: f; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.flow::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 1px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 16px); background-size: 32px 1px; animation: dash 1.4s linear infinite; opacity: .6; }
@keyframes dash { to { background-position: 32px 0; } }
.flow li { counter-increment: f; padding: 0 20px 0 0; position: relative; }
.flow li::before { content: counter(f, decimal-leading-zero); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #0f1215; border: 1px solid var(--accent); color: var(--accent); font-family: var(--mono); font-size: 13px; margin-bottom: 16px; position: relative; z-index: 1; }
.flow strong { display: block; font-family: var(--display); font-size: 18px; letter-spacing: -0.015em; margin-bottom: 6px; }
.flow span { color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px; background: rgba(23,27,31,.7); backdrop-filter: blur(6px); }
.stat b { display: block; font-family: var(--condensed); font-size: clamp(44px, 5vw, 64px); line-height: .95; letter-spacing: .01em; color: var(--ink); font-weight: 800; }
.stat b .u { font-size: .5em; color: var(--accent); margin-left: 4px; }
.stat span { display: block; margin-top: 8px; color: var(--ink-3); font-size: 14px; line-height: 1.4; }

/* case study teaser */
.cs-teaser { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 48px); background: linear-gradient(135deg, rgba(46,232,143,.06), transparent 60%); position: relative; overflow: hidden; }
.cs-teaser::before { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; bottom: -160px; border-radius: 50%; background: var(--accent); filter: blur(100px); opacity: .12; }
.cs-teaser .section-head { margin-bottom: 0; }
.cs-teaser .stats { grid-template-columns: 1fr 1fr; }

/* not list */
.not { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.not li { font-family: var(--mono); font-size: 13px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; text-decoration: line-through; text-decoration-color: rgba(139,144,151,.6); }

/* pricing tweaks */
.plan-featured::after { content: "Start here"; }
.plan-tiers { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.plan-tiers li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--dark-line); font-size: 14.5px; }
.plan-tiers li::before { display: none; }
.plan-tiers b { font-family: var(--mono); color: var(--accent); font-weight: 500; }

/* case study page */
.cs-hero { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(32px, 4vw, 56px); }
.cs-hero h1.display { font-size: clamp(50px, 7.6vw, 108px); max-width: 14ch; }
.cs-hero .lede { max-width: 56ch; }
.cs-body { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 7vw, 96px); display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 72px); }
.cs-section h2 { font-family: var(--condensed); text-transform: uppercase; font-size: clamp(32px, 4vw, 52px); line-height: .95; margin-bottom: 16px; }
.cs-section > p { color: var(--ink-2); font-size: 17.5px; max-width: 64ch; }
.replace { width: 100%; border-collapse: collapse; font-size: 15.5px; margin-top: 8px; }
.replace th { text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 0 16px 12px 0; }
.replace td { padding: 14px 16px 14px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.replace td:first-child { color: var(--ink); font-weight: 600; width: 26%; }
.replace td:nth-child(2) { color: var(--ink-3); width: 30%; }
.replace td:last-child { color: var(--ink); }
.cs-quote { border-left: 3px solid var(--accent); padding-left: 22px; font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; max-width: 30ch; margin: 0; }
.cs-quote small { display: block; font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-top: 14px; font-weight: 400; letter-spacing: 0; }
.cs-cta { border-top: 1px solid var(--line); padding-top: clamp(32px, 4vw, 48px); }
.day { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.day:last-child { border-bottom: 1px solid var(--line); }
.day time { font-family: var(--mono); font-size: 13px; color: var(--accent); padding-top: 3px; }
.day strong { display: block; font-family: var(--display); font-size: 17px; letter-spacing: -0.015em; margin-bottom: 4px; }
.day span { color: var(--ink-2); font-size: 15px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .glow, .console::before, .live i, .cursor, .graph .pulse, .marquee-track, .flow::before { animation: none !important; }
  .io, .io-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .log li { opacity: 1; transform: none; }
}
@media (max-width: 1000px) {
  .hero-a { grid-template-columns: 1fr; }
  .offer-grid { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: 1fr; gap: 18px; } .flow::before { display: none; } .flow li::before { margin-bottom: 10px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .cs-teaser { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .offer-grid, .stats, .cs-teaser .stats { grid-template-columns: 1fr; }
  .hero-a h1.display { font-size: 52px; }
  .console { font-size: 12.5px; } .log li { grid-template-columns: 46px 1fr; }
  .group-head { flex-direction: column; gap: 4px; }
  .day { grid-template-columns: 1fr; gap: 4px; }
  .glow { filter: blur(60px); }
  .gate { flex-direction: column; align-items: flex-start; gap: 10px; } .gate b { margin-left: 0; }
  .graph-wrap { display: none; }
}