/*
Theme Name: Neeura AI
Theme URI: https://neeura.ai
Author: Neeura Studio
Description: Kinetic design system — AI agents, automation & custom software
Version: 2.0
*/

/* ── Design Tokens ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --bg:              #FCFCFD;
  --fg:              #0A0A0B;
  --card:            #ffffff;
  --primary:         hsl(250 100% 65%);
  --primary-h:       250;
  --primary-s:       100%;
  --primary-l:       65%;
  --primary-glow:    hsl(250 100% 75%);
  --secondary:       hsl(240 5% 96%);
  --muted-fg:        hsl(240 4% 46%);
  --border:          hsl(240 6% 92%);
  --ink:             #0A0A0B;
  --ink-soft:        hsl(240 5% 15%);
  --pulse:           hsl(140 100% 50%);
  --shadow-elegant:  0 30px 80px -30px rgba(10,10,11,.22), 0 6px 20px -10px rgba(10,10,11,.12);
  --shadow-glow:     0 10px 40px -10px hsl(250 100% 65% / .45);
  --shadow-pill:     0 8px 20px -6px rgba(10,10,11,.30);
  --radius:          1rem;
}

/* ── Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01","cv11";
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--primary); color: #fff; }

/* ── Typography helpers ───────────────────────────────────────── */
.font-mono     { font-family: 'Geist Mono', ui-monospace, monospace; }
.font-serif-i  { font-family: 'Instrument Serif', serif; font-style: italic; }
.tabular-nums  { font-variant-numeric: tabular-nums; }

/* ── Container ───────────────────────────────────────────────── */
.container, .wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media(min-width:640px)  { .container, .wrap { padding: 0 1.5rem; } }
@media(min-width:1024px) { .container, .wrap { padding: 0 3rem; } }

/* ── Utility ─────────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-glow    { box-shadow: var(--shadow-glow); }
.shadow-pill    { box-shadow: var(--shadow-pill); }

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes marquee       { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marquee-rev   { from{transform:translateX(-50%)} to{transform:translateX(0)} }
@keyframes fade-in-up    { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes scale-in      { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes blob          { 0%,100%{transform:scale(1) rotate(0deg);border-radius:50%} 33%{transform:scale(1.1) rotate(120deg);border-radius:40% 60% 60% 40%/60% 40% 60% 40%} 66%{transform:scale(.9) rotate(240deg);border-radius:60% 40% 30% 70%/40% 60% 70% 30%} }
@keyframes float         { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes float-slow    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes pulse-ring    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.2)} }
@keyframes ping          { 0%{opacity:.8;transform:scale(.8)} 100%{opacity:0;transform:scale(2)} }
@keyframes dot-bounce    { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-4px);opacity:1} }
@keyframes proc-pulse    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.85)} }
@keyframes node-halo     { 0%,100%{opacity:.12;transform:scale(1)} 50%{opacity:.22;transform:scale(1.15)} }
@keyframes panel-in      { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-rise     { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes bar-grow      { from{width:0} to{width:var(--w)} }
@keyframes hero-agent    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes typing-cursor { 0%,50%{opacity:1} 51%,100%{opacity:0} }
@keyframes fx-word-rise  { to{opacity:1;transform:translateY(0)} }
@keyframes spark-fly     { 0%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.4)} }
@keyframes hint-ring     { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.45);opacity:0} }
@keyframes reveal-in     { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes agent-step    { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
@keyframes shimmer       { from{background-position:200% center} to{background-position:-200% center} }

/* ── Reveal on scroll ────────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--delay,0ms), transform .8s cubic-bezier(.2,.8,.2,1) var(--delay,0ms); }
[data-reveal].revealed { opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce) { [data-reveal]{opacity:1;transform:none;transition:none;} }

/* ══════════════════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════════════════ */
.site-nav {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(1240px, calc(100% - 32px));
  border-radius: 9999px;
  border: 1px solid hsl(240 6% 92%);
  padding: .5rem .75rem;
  transition: box-shadow .3s, background .3s, transform .3s, opacity .3s;
  background: hsl(0 0% 100% / .88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px -8px hsl(240 10% 10% / .12), 0 1px 0 hsl(240 6% 92%);
}
.site-nav.scrolled {
  background: hsl(0 0% 100% / .96);
  box-shadow: 0 8px 32px -12px hsl(240 10% 10% / .18), 0 1px 0 hsl(240 6% 92%);
}
.site-nav.hidden-nav { transform: translateX(-50%) translateY(-130%); opacity: 0; }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: .25rem;
}
.nav-logo img { height: 3rem; width: auto; }
.nav-logo { display: flex; align-items: center; }

.nav-links {
  display: none;
  align-items: center;
  gap: .25rem;
}
@media(min-width:768px) { .nav-links { display: flex; } }

.nav-links a {
  display: block;
  border-radius: 9999px;
  padding: .5rem .875rem;
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: background .2s, color .2s;
}
.nav-links a:hover, .nav-links a.active {
  background: var(--secondary);
  color: var(--fg);
  font-weight: 500;
}

.nav-actions { display: flex; align-items: center; gap: .5rem; }

.btn-book {
  display: none;
  align-items: center;
  gap: .375rem;
  border-radius: 9999px;
  background: var(--ink);
  color: #fff;
  padding: .625rem 1rem;
  font-size: 13.5px;
  font-weight: 500;
  transition: all .2s;
}
.btn-book:hover { background: var(--primary); box-shadow: var(--shadow-glow); transform: translateY(-1px); }
@media(min-width:768px) { .btn-book { display: inline-flex; } }

.nav-hamburger {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.7);
  color: var(--fg);
}
@media(min-width:768px) { .nav-hamburger { display: none; } }

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.mobile-drawer.open { pointer-events: all; opacity: 1; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,10,11,.5);
  backdrop-filter: blur(4px);
}
.drawer-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  background: var(--bg);
  border-left: 1px solid var(--border);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.mobile-drawer.open .drawer-panel { transform: translateX(0); }

.drawer-logo img { height: 3rem; width: auto; }

.drawer-close {
  position: absolute;
  top: 1rem; right: 1rem;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fg);
}

.drawer-links { display: flex; flex-direction: column; gap: .5rem; }
.drawer-links a {
  display: block;
  padding: .75rem 1rem;
  border-radius: .75rem;
  font-size: 15px;
  color: var(--ink-soft);
  transition: background .2s;
}
.drawer-links a:hover, .drawer-links a.active { background: var(--secondary); color: var(--fg); font-weight: 500; }

.drawer-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 9999px;
  background: var(--ink);
  color: #fff;
  padding: .875rem 1.25rem;
  font-size: 14px;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  overflow: hidden;
  padding: 8rem 0 4rem;
}
@media(min-width:640px)  { .hero-section { padding: 8.5rem 0 5rem; } }
@media(min-width:1024px) { .hero-section { padding: 10rem 0 6rem; } }

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% -10%,  hsl(250 100% 65% / .18), transparent 60%),
    radial-gradient(ellipse 60% 50% at -10% 110%, hsl(250 100% 65% / .12), transparent 60%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2.5rem;
}
@media(min-width:1024px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
}

.hero-copy { display: flex; flex-direction: column; align-items: flex-start; animation: fade-in-up .8s cubic-bezier(.2,.8,.2,1) both; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: rgba(252,252,253,.7);
  padding: .375rem .75rem;
  backdrop-filter: blur(12px);
  margin-bottom: 1.5rem;
}
.badge-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: .5rem;
  height: .5rem;
}
.badge-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #10b981;
  opacity: .4;
  animation: ping 1.5s cubic-bezier(0,0,.2,1) infinite;
}
.badge-dot::after {
  content: '';
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: #10b981;
}

.hero-h1 {
  font-size: clamp(2.35rem, 11vw, 6.75rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.04em;
}
@media(min-width:640px) { .hero-h1 { line-height: .88; } }

.hero-h1 .word-invisible {
  position: relative;
  display: inline-block;
  padding-right: .125em;
  padding-bottom: .3em;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  overflow: visible;
}
.scribble-line {
  position: absolute;
  bottom: -.2em;
  left: 0;
  width: 105%;
  height: 8px;
  background: var(--primary);
  border-radius: 2px 8px 4px 12px;
  transform: rotate(-2deg);
}
.scribble-line-2 {
  position: absolute;
  bottom: -.1em;
  left: .125em;
  width: 98%;
  height: 5px;
  background: hsl(250 100% 65% / .5);
  border-radius: 10px 2px 8px 4px;
  filter: blur(1px);
  transform: rotate(1deg);
}

.hero-lede {
  margin-top: 1.5rem;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-fg);
}
@media(min-width:640px) { .hero-lede { font-size: 17px; margin-top: 1.75rem; } }
@media(min-width:1024px) { .hero-lede { font-size: 19px; } }

.hero-ctas {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  width: 100%;
}
@media(min-width:640px) { .hero-ctas { flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; } }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 9999px;
  background: var(--ink);
  color: #fff;
  padding: .875rem 1.5rem;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: var(--shadow-pill);
  transition: all .2s;
}
.btn-primary:hover { background: var(--primary); box-shadow: var(--shadow-glow); transform: translateY(-2px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: rgba(252,252,253,.6);
  color: var(--fg);
  padding: .875rem 1.5rem;
  font-size: 14.5px;
  font-weight: 500;
  backdrop-filter: blur(12px);
  transition: background .2s;
}
.btn-secondary:hover { background: var(--secondary); }

.hero-stats {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  width: 100%;
}
@media(min-width:640px) { .hero-stats { margin-top: 2.5rem; gap: .75rem; } }

.hero-stat-card {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .55rem .875rem .55rem .6rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: hsl(0 0% 100% / .75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px -4px hsl(240 10% 10% / .08);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms, box-shadow 260ms;
}
.hero-stat-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--ic, 250 100% 65%) / .35);
  box-shadow: 0 8px 20px -10px hsl(var(--ic, 250 100% 65%) / .35);
}

.hero-stat-icon {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: hsl(var(--ic, 250 100% 65%) / .12);
  color: hsl(var(--ic, 250 100% 65%));
  flex-shrink: 0;
}

.hero-stat-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hero-stat-v {
  font-family: 'Geist Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.hero-stat-l {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted-fg);
  line-height: 1;
}
@media(min-width:640px) { .hero-stat-v { font-size: 15px; } .hero-stat-l { font-size: 10px; } }

/* Hero visual / AI agent card — exact React HeroVisual */
.hero-visual {
  position: relative;
  width: 100%;
  height: 460px;       /* matches React: h-[460px] */
  animation: scale-in .8s cubic-bezier(.2,.8,.2,1) .1s both;
}
@media(min-width:640px)  { .hero-visual { height: 520px; } }
@media(min-width:1024px) { .hero-visual { height: 640px; } }

/* Static purple glow orbs centered in visual (React HeroVisual exact) */
.agent-visual-glow-a {
  pointer-events: none;
  position: absolute; left: 50%; top: 50%;
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, hsl(250 100% 65%), hsl(250 100% 75%));
  opacity: .30; filter: blur(80px); border-radius: 50%;
}
.agent-visual-glow-b {
  pointer-events: none;
  position: absolute; left: 50%; top: 50%;
  width: 180px; height: 180px;
  transform: translate(-50%, -50%);
  background: hsl(250 100% 65%);
  opacity: .15; filter: blur(50px); border-radius: 50%;
}
.agent-visual-grid {
  position: absolute; inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(to right, hsl(240 6% 4% / .04) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(240 6% 4% / .04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 85%);
  pointer-events: none;
}

/* Floating hint — top-left */
.hero-float-hint {
  position: absolute;
  top: 20px; left: -12px;
  z-index: 30;
  display: none;
  align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: .75rem;
  border: 1px solid hsl(250 100% 65% / .3);
  background: var(--card);
  box-shadow: var(--shadow-elegant);
  color: var(--muted-fg);
  font-size: 10.5px;
  animation: float 4s ease-in-out infinite;
}
@media(min-width:640px) { .hero-float-hint { display: flex; } }

/* Floating uptime pill — bottom-right, purple gradient */
.hero-float-uptime {
  position: absolute;
  bottom: 12px; right: -8px;
  z-index: 30;
  display: none;
  align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 9999px;
  background: linear-gradient(135deg, hsl(250 100% 65%), hsl(250 100% 75%));
  color: white;
  box-shadow: var(--shadow-glow);
  animation: float-slow 6s ease-in-out infinite;
}
@media(min-width:640px) { .hero-float-uptime { display: flex; } }

/* Agent card — exact React: rounded-3xl border bg-background/85 shadow-elegant backdrop-blur-xl */
.agent-card {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid hsl(240 6% 92%);
  background: hsl(0 0% 100% / .85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 30px 80px -30px hsl(240 10% 10% / .22), 0 6px 20px -10px hsl(240 10% 10% / .12);
  overflow: hidden;
  max-width: 520px;
  width: 100%;
  margin: 1.5rem auto 0;
  display: flex;
  flex-direction: column;
}

/* Card header: bg-secondary/40 px-4 py-3 */
.agent-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid hsl(240 6% 92%);
  background: hsl(240 5% 96% / .4);
}
.agent-dots { display: flex; gap: 6px; align-items: center; }
.agent-dot { width: 10px; height: 10px; border-radius: 50%; background: hsl(240 4% 46% / .8); }
.agent-card-title {
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .14em; color: hsl(240 4% 46%);
}
.agent-online-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 9999px;
  background: hsl(140 100% 50% / .1);
  padding: 2px 8px;
  font-size: 9.5px; color: #16a34a;
}
.agent-online-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  animation: proc-pulse 1.4s ease-in-out infinite;
}

/* Preset chips: flex-wrap gap-1.5 px-4 pb-2.5 pt-3.5 */
.agent-presets {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  padding: .875rem 1rem .625rem;
}
.agent-preset-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 9999px;
  border: 1px solid hsl(240 6% 92%);
  font-size: 12px; font-weight: 500;
  color: hsl(240 6% 4%); background: hsl(240 20% 99%);
  font-family: 'Geist', sans-serif;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
  cursor: pointer;
}
.agent-preset-btn.active {
  border-color: hsl(250 100% 65%);
  background: hsl(250 100% 65%);
  color: #fff;
  box-shadow: 0 4px 16px -8px hsl(250 100% 65% / .6);
}
.agent-preset-btn:not(.active):hover { border-color: hsl(250 100% 65% / .5); }
.preset-sym { font-size: 11px; opacity: .85; }

/* Body: flex min-h-[280px] flex-col gap-3 px-4 pb-4 pt-2.5 */
.agent-body {
  display: flex; flex-direction: column;
  gap: .75rem;
  padding: .625rem 1rem 1rem;
  min-height: 280px;
  overflow: hidden;
}

/* User message: max-w-[86%] self-end animate-fade-in-up */
.agent-user-wrap {
  display: flex; flex-direction: column; align-items: flex-end;
  max-width: 86%; align-self: flex-end;
  animation: fade-in-up .5s cubic-bezier(.2,.8,.2,1) both;
}
/* Dark bubble: rounded-2xl rounded-br-sm bg-ink px-3.5 py-2.5 */
.agent-bubble {
  background: hsl(240 6% 4%);
  color: hsl(240 20% 99%);
  border-radius: 1rem 1rem .25rem 1rem;
  padding: .625rem .875rem;
  font-size: 13px; line-height: 1.5;
  box-shadow: 0 8px 20px -6px hsl(240 10% 10% / .3);
}
.agent-bubble-ts {
  margin-top: 4px; font-size: 9.5px;
  color: hsl(240 4% 46%); text-align: right;
}

/* Agent row: flex gap-2.5 self-start */
.agent-agent-row { display: flex; gap: 10px; align-items: flex-start; max-width: 92%; }
/* Avatar: grid size-7 rounded-full bg-gradient-purple shadow-glow */
.agent-avatar-circle {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, hsl(250 100% 65%), hsl(250 100% 75%));
  color: white;
  box-shadow: 0 10px 40px -10px hsl(250 100% 65% / .45);
}
.agent-content { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }

/* Steps container: mb-2 flex-col gap-1 rounded-[10px] border bg-secondary/60 px-2.5 py-2 */
.agent-steps {
  display: flex; flex-direction: column; gap: 4px;
  border-radius: 10px;
  border: 1px solid hsl(240 6% 92%);
  background: hsl(240 5% 96% / .6);
  padding: 8px 10px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  margin-bottom: 2px;
}
.agent-steps:empty { display: none; }
/* Step row */
.agent-step { display: flex; align-items: center; gap: 8px; animation: agent-step .4s cubic-bezier(.2,.8,.2,1) both; }
/* Check circle: size-3.5 rounded-full bg-ink text-white */
.step-check {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: hsl(240 6% 4%); color: white;
  font-size: 8px; font-weight: 700; flex-shrink: 0;
}
.step-name { color: hsl(240 6% 4%); flex: 1; }
.step-ms { font-size: 9.5px; color: hsl(240 4% 46%); margin-left: auto; }

/* Reply bubble: min-h-14 rounded-2xl rounded-bl-sm border bg-background */
.agent-reply {
  min-height: 56px;
  border-radius: 1rem 1rem 1rem .25rem;
  border: 1px solid hsl(240 6% 92%);
  background: hsl(240 20% 99%);
  padding: .625rem .875rem;
  font-size: 13px; line-height: 1.6;
  color: hsl(240 6% 4%);
}
.agent-reply-text { display: inline; }

/* Phase label */
.agent-phase-label { font-size: 9.5px; color: hsl(240 4% 46%); margin-top: 2px; }

/* Footer: border-t bg-secondary/40 px-4 py-2.5 */
.agent-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .625rem 1rem;
  border-top: 1px solid hsl(240 6% 92%);
  background: hsl(240 5% 96% / .4);
}
.agent-footer-metrics { display: flex; gap: 18px; }
.agent-footer-metric { display: flex; flex-direction: column; gap: 2px; }
/* Label: text-[8.5px] uppercase tracking-[0.1em] text-muted-foreground */
.agent-footer-metric-label {
  font-size: 8.5px; text-transform: uppercase;
  letter-spacing: .1em; color: hsl(240 4% 46%);
}
/* Value: text-[13px] font-semibold tabular-nums */
.agent-footer-metric-val {
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: hsl(240 6% 4%);
}
/* Replay button */
.agent-replay-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 9999px;
  border: 1px solid hsl(240 6% 92%);
  background: hsl(240 20% 99%);
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: hsl(240 6% 4%);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.agent-replay-btn:hover { border-color: hsl(250 100% 65% / .5); color: hsl(250 100% 65%); }

/* ══════════════════════════════════════════════════════════════
   LOGOS MARQUEE
══════════════════════════════════════════════════════════════ */
.logos-marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  padding: 1.25rem 0;
  margin-top: 2.5rem;
}
@media(min-width:640px) { .logos-marquee { padding: 1.75rem 0; margin-top: 3rem; } }
@media(min-width:1024px) { .logos-marquee { margin-top: 3.5rem; } }

.logos-marquee::before, .logos-marquee::after {
  content: '';
  position: absolute;
  inset-y: 0;
  z-index: 10;
  width: 4rem;
  pointer-events: none;
}
@media(min-width:640px) { .logos-marquee::before, .logos-marquee::after { width: 8rem; } }
.logos-marquee::before { left: 0;  background: linear-gradient(to right,  var(--bg), transparent); }
.logos-marquee::after  { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

.logos-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 2rem;
  animation: marquee 35s linear infinite;
}
@media(min-width:640px) { .logos-track { gap: 4rem; } }
.logos-marquee:hover .logos-track { animation-play-state: paused; }

.logo-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: hsl(240 4% 46% / .5);
}
@media(min-width:640px) { .logo-item { font-size: 20px; gap: .625rem; } }
.logo-dot { width: .5rem; height: .5rem; border-radius: 3px; background: hsl(240 4% 46% / .3); flex-shrink: 0; }
@media(min-width:640px) { .logo-dot { width: .625rem; height: .625rem; } }

/* ══════════════════════════════════════════════════════════════
   SERVICES — Bento grid + Focus mode
══════════════════════════════════════════════════════════════ */

/* ── Eyebrow (shared across sections) ── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted-fg);
  margin-bottom: 1.25rem;
}
.section-eyebrow::before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1px;
  background: var(--fg);
}

/* ── Bento section wrapper ── */
.bento-section {
  position: relative;
  padding: 7.5rem 0 6rem;
  overflow: hidden;
}
.svc-ambient {
  position: absolute; inset: 0; pointer-events: none;
  transition: background 700ms;
}
.svc-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(50px); transition: background 700ms;
}
.svc-orb-a { top: 12%; left: 5%; width: 240px; height: 240px; animation: orb-drift-a 18s ease-in-out infinite; }
.svc-orb-b { bottom: 8%; right: 8%; width: 300px; height: 300px; animation: orb-drift-b 22s ease-in-out infinite; }
.svc-ghost {
  position: absolute; top: 60px; right: 32px; pointer-events: none; user-select: none;
  font-size: clamp(8rem, 16vw, 18rem); line-height: .85; letter-spacing: -.06em;
  color: hsl(250 100% 65% / 0.06); transition: color 700ms;
}

/* ── Section header ── */
.svc-bento-header { margin-bottom: 2.25rem; }
.svc-bento-header-row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem;
}
.svc-bento-h2 {
  font-size: clamp(2.25rem, 4.4vw, 4rem); font-weight: 600;
  line-height: 1.02; letter-spacing: -.03em; margin: 0;
}
.svc-bento-accent { font-weight: 400; color: hsl(250 100% 65%); transition: color 700ms; }
.svc-bento-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: .625rem; max-width: 380px; }
.svc-bento-desc { font-size: 14.5px; line-height: 1.55; color: var(--muted-fg); margin: 0; text-align: right; }
.svc-kbd-hint {
  display: flex; align-items: center; gap: .5rem;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg);
}
.svc-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--card);
  font-family: 'Geist Mono', monospace; font-size: 9.5px; color: hsl(240 6% 4% / .8);
}

/* ── Bento grid ── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media(max-width: 899px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 539px) { .bento-grid { grid-template-columns: 1fr; } }

/* ── Bento card ── */
.bento-card {
  position: relative; appearance: none; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden; border-radius: 22px; border: 1px solid hsl(240 6% 4% / .08);
  background: hsl(var(--card, 0 0% 100%));
  padding: 22px; min-height: 220px; color: hsl(var(--foreground, 240 6% 4%));
  box-shadow: 0 1px 0 hsl(240 6% 4% / .02), 0 8px 24px -18px hsl(240 10% 10% / .18);
  transition: transform 380ms cubic-bezier(.2,.8,.2,1), box-shadow 380ms, border-color 380ms;
}
.bento-card:hover { transform: translateY(-3px); }
.bento-card.is-hovered { border-color: var(--bento-accent-border, hsl(250 100% 65% / .45)); box-shadow: var(--bento-accent-shadow, 0 26px 60px -28px hsl(250 100% 65% / .55)); }

.bento-spotlight {
  pointer-events: none; position: absolute; inset: 0; border-radius: 22px;
  transition: background 240ms;
}
.bento-corner-glow {
  position: absolute; right: -60px; top: -60px;
  width: 180px; height: 180px; border-radius: 50%; filter: blur(48px);
  transition: background 380ms;
}
.bento-card.is-hovered .bento-corner-glow { filter: blur(48px); opacity: 1; }

/* Card header: icon + sparkline */
.bento-card-header {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.bento-icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; flex-shrink: 0; transition: background 320ms;
}
.bento-sparkline { overflow: visible; }

/* num · tag */
.bento-meta {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-fg);
}
.bento-meta-dash { display: inline-block; width: 14px; height: 1px; }

/* title + short */
.bento-content { position: relative; z-index: 2; }
.bento-title { font-size: 19px; font-weight: 600; line-height: 1.18; letter-spacing: -.015em; margin: 0; }
.bento-short { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted-fg); }

/* stat + open */
.bento-foot {
  position: relative; z-index: 2; margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.bento-stat { display: flex; align-items: baseline; gap: 6px; font-size: 10.5px; }
.bento-stat-key { color: var(--muted-fg); letter-spacing: .08em; text-transform: uppercase; }
.bento-stat-val { font-weight: 600; }
.bento-open {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-fg); transition: color 240ms, transform 240ms;
}
.bento-card:hover .bento-open { transform: translateX(3px); }

/* ── Focus view ── */
.focus-view {
  position: relative; overflow: hidden; border-radius: 32px;
  background: hsl(240 6% 4%); color: hsl(0 0% 98%);
  animation: panel-in 360ms cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 50px 100px -40px hsl(250 100% 65% / .35), 0 18px 50px -24px hsl(240 10% 10% / .4);
}
.focus-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); }
.focus-orb-a { right: -160px; top: -160px; width: 480px; height: 480px; }
.focus-orb-b { left: -120px; bottom: -120px; width: 360px; height: 360px; }

/* Top bar */
.focus-topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid hsl(0 0% 100% / .08);
}
.focus-topbar-left { display: flex; align-items: center; gap: 14px; }
.focus-icon-wrap {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid hsl(250 100% 65% / .4);
  background: hsl(250 100% 65% / .18); color: hsl(250 100% 65%);
  flex-shrink: 0; transition: background 300ms, border-color 300ms;
}
.focus-topbar-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: hsl(0 0% 98% / .55);
}
.focus-topbar-tag { color: hsl(250 100% 70%); transition: color 300ms; }
.focus-topbar-actions { display: flex; align-items: center; gap: 6px; }
.focus-nav-btn {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9999px; border: 1px solid hsl(0 0% 100% / .16);
  background: hsl(0 0% 100% / .04); color: hsl(0 0% 98%);
  cursor: pointer; appearance: none;
  transition: background 200ms, border-color 200ms;
}
.focus-nav-btn:hover { background: hsl(0 0% 100% / .1); border-color: hsl(0 0% 100% / .3); }
.focus-close-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; height: 34px; border-radius: 9999px;
  border: 1px solid hsl(0 0% 100% / .16); background: hsl(0 0% 100% / .04);
  color: hsl(0 0% 98%); cursor: pointer; appearance: none;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  margin-left: 6px; transition: background 200ms, border-color 200ms;
}
.focus-close-btn:hover { background: hsl(0 0% 100% / .1); }

/* Body: 2-col */
.focus-body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px; padding: 36px 36px 40px;
}
@media(max-width: 860px) { .focus-body { grid-template-columns: 1fr; padding: 24px 22px 28px; } }

/* Left: content */
.focus-title { margin: 0; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; line-height: 1.02; letter-spacing: -.025em; }
.focus-desc { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: hsl(0 0% 98% / .7); max-width: 56ch; }
.focus-bullets {
  margin: 26px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
}
.focus-bullets li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: hsl(0 0% 98% / .88); }
.focus-bullets li::before { content: '+'; color: hsl(250 100% 70%); flex-shrink: 0; }
.focus-ctas { margin-top: 32px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.focus-cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 9999px;
  background: hsl(250 100% 65%); color: white;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: transform 200ms, box-shadow 200ms;
  box-shadow: 0 14px 36px -14px hsl(250 100% 65% / .7);
}
.focus-cta-primary:hover { transform: translateY(-2px); }
.focus-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 9999px;
  background: hsl(0 0% 100% / .06); color: hsl(0 0% 98%);
  border: 1px solid hsl(0 0% 100% / .18);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.focus-counter { margin-left: auto; font-size: 11px; color: hsl(0 0% 98% / .55); letter-spacing: .14em; }

/* Right: demo */
.focus-demo {
  position: relative; border-radius: 22px;
  border: 1px solid hsl(250 100% 65% / .18);
  background: hsl(0 0% 100% / .04);
  padding: 20px; min-height: 320px;
  display: flex; flex-direction: column;
  transition: border-color 300ms;
}
.focus-demo-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.focus-demo-live { display: flex; align-items: center; gap: 8px; color: hsl(0 0% 98% / .55); }
.focus-demo-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; animation: demo-pulse 1.4s ease-in-out infinite;
}
.focus-demo-stat { font-size: 10px; color: hsl(0 0% 98% / .45); }
.focus-demo-body { flex: 1; display: flex; flex-direction: column; }

/* Focus rail (mini pills below focus) */
.focus-rail {
  margin-top: 18px; display: flex; gap: 8px;
  flex-wrap: wrap; justify-content: center;
}
.focus-rail-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 9999px;
  border: 1px solid hsl(240 6% 4% / .12);
  background: hsl(0 0% 100%); color: var(--muted-fg);
  cursor: pointer; appearance: none;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  transition: all 240ms;
}
.focus-rail-btn.is-active { color: hsl(250 100% 65%); }
.focus-rail-icon { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; }

/* ── Demo area inner styles ── */
.demo-chat { display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.demo-bubble { border-radius: 8px; padding: 6px 10px; max-width: 100%; width: fit-content; transition: opacity 400ms, transform 400ms; }
.demo-bubble-l { align-self: flex-start; background: hsl(0 0% 98% / .08); color: hsl(0 0% 98% / .85); }
.demo-bubble-r { align-self: flex-end; background: hsl(0 0% 98% / .18); color: hsl(0 0% 98%); }

.demo-kanban { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.demo-kanban-col { display: flex; flex-direction: column; gap: 6px; border-radius: 8px; background: hsl(0 0% 98% / .08); padding: 6px; min-height: 140px; }
.demo-kanban-head { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: hsl(0 0% 98% / .55); margin: 0; }
.demo-kanban-card { border-radius: 6px; background: hsl(0 0% 98% / .95); padding: 4px 6px; font-size: 10px; color: hsl(240 6% 4%); transition: box-shadow 300ms; }
.demo-kanban-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.demo-kanban-amt { font-size: 9px; color: hsl(250 100% 65%); font-family: 'Geist Mono', monospace; }

.demo-wa { display: flex; flex-direction: column; gap: 8px; border-radius: 16px; background: #ECE5DD; padding: 16px; }
.demo-wa-bubble { border-radius: 8px; padding: 6px 10px; font-size: 11.5px; color: hsl(240 6% 4%); max-width: 80%; transition: opacity 400ms, transform 400ms; }
.demo-wa-bubble-l { align-self: flex-start; background: white; border-top-left-radius: 2px; }
.demo-wa-bubble-r { align-self: flex-end; background: #DCF8C6; border-top-right-radius: 2px; }
.demo-wa-time { text-align: right; font-size: 8.5px; color: hsl(240 6% 4% / .5); margin-top: 2px; font-family: 'Geist Mono', monospace; }

.demo-flow { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 12px; }
.demo-flow-node { border-radius: 8px; background: hsl(0 0% 98% / .95); padding: 8px; text-align: center; font-size: 10px; color: hsl(240 6% 4%); font-family: 'Geist Mono', monospace; transition: box-shadow 300ms; }
.demo-flow-center { border-radius: 8px; background: hsl(240 6% 4%); padding: 8px; text-align: center; font-size: 10px; color: hsl(0 0% 98%); font-family: 'Geist Mono', monospace; transition: box-shadow 300ms; }
.demo-flow-label { font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; color: hsl(240 4% 46%); margin-bottom: 3px; }
.demo-flow-center-label { font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; color: hsl(0 0% 98% / .5); margin-bottom: 3px; }
.demo-flow-col { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 10; }

.demo-shop { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.demo-shop-img { border-radius: 12px; background: hsl(0 0% 98% / .95); color: hsl(240 6% 4%); overflow: hidden; }
.demo-shop-placeholder { height: 96px; background: repeating-linear-gradient(45deg,#f1f1f5 0 8px,#e7e7eb 8px 16px); display: grid; place-items: center; font-size: 9px; letter-spacing: .2em; color: hsl(240 4% 46%); font-family: 'Geist Mono', monospace; }
.demo-shop-info { padding: 8px; }
.demo-shop-name { font-size: 11px; font-weight: 600; }
.demo-shop-price { font-size: 10px; color: hsl(250 100% 65%); font-family: 'Geist Mono', monospace; }
.demo-shop-stats { border-radius: 12px; background: hsl(0 0% 98% / .08); padding: 10px; font-size: 10.5px; color: hsl(0 0% 98% / .85); }
.demo-shop-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; border-radius: 4px; transition: background 300ms; }
.demo-shop-k { color: hsl(0 0% 98% / .65); }
.demo-shop-v { color: hsl(0 0% 98%); font-family: 'Geist Mono', monospace; }

.demo-code { border-radius: 12px; background: hsl(0 0% 98% / .08); padding: 12px; font-size: 11px; line-height: 1.6; color: hsl(0 0% 98% / .9); margin: 0; white-space: pre-wrap; overflow-x: auto; font-family: 'Geist Mono', monospace; }

/* ══════════════════════════════════════════════════════════════
   PROCESS
══════════════════════════════════════════════════════════════ */
.process-section {
  position: relative;
  overflow: hidden;
  background: hsl(240 5% 96% / .4);
  padding: 3.5rem 0 4rem;
}
@media(min-width:640px)  { .process-section { padding: 5rem 0 6rem; } }
@media(min-width:1024px) { .process-section { padding: 7rem 0 8rem; } }

.process-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 80% 0%, hsl(250 100% 65% / .07), transparent 60%);
}

.process-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: 2.5rem;
}
@media(min-width:640px) { .process-header { margin-bottom: 3.5rem; } }

.process-h2 {
  max-width: 48rem;
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.03em;
}

.process-desc {
  max-width: 28rem;
  font-size: 15px;
  color: var(--muted-fg);
}

/* SVG Rail */
.process-rail-wrap {
  position: relative;
  margin-bottom: 2rem;
  padding: .75rem 0;
}
.process-rail-svg {
  display: block;
  width: 100%;
  height: 140px;
  overflow: visible;
}

/* Detail grid */
.process-detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media(max-width:1024px) { .process-detail-grid { grid-template-columns: 1fr; } }

.process-detail-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 2rem;
  animation: panel-in .5s cubic-bezier(.2,.8,.2,1);
}

.process-preview-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, hsl(240 5% 96% / .5), var(--card));
  padding: 1.5rem;
  animation: panel-in .5s .08s cubic-bezier(.2,.8,.2,1) backwards;
}

/* Pills */
.process-pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .625rem;
}
@media(max-width:1024px) { .process-pills { grid-template-columns: repeat(2,1fr); } }
@media(max-width:640px)  { .process-pills { grid-template-columns: 1fr; } }

.process-pill {
  text-align: left;
  border-radius: .75rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: .75rem .875rem;
  cursor: pointer;
  transition: all .28s cubic-bezier(.2,.8,.2,1);
}
.process-pill.active {
  transform: translateY(-2px);
}

/* Mobile process steps (visible < 768px) */
.process-steps-mobile {
  display: none;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media(max-width:767px) {
  .process-steps-mobile { display: flex; }
  .process-rail-wrap { display: none; }
}

.process-step-mobile {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: border-color .2s;
}
.process-step-mobile.active { border-color: hsl(250 100% 65% / .5); background: hsl(250 100% 65% / .03); }
.step-num-badge {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  flex-shrink: 0;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   STACK
══════════════════════════════════════════════════════════════ */
.stack-section {
  position: relative;
  padding: 3.5rem 0 4rem;
}
@media(min-width:640px)  { .stack-section { padding: 5rem 0 6rem; } }
@media(min-width:1024px) { .stack-section { padding: 7rem 0 8rem; } }

.stack-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 4rem;
}
.stack-h2 {
  max-width: 48rem;
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.stack-desc { max-width: 28rem; font-size: 15px; color: var(--muted-fg); }

.stack-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media(min-width:1024px) { .stack-grid { grid-template-columns: 1fr 2fr; } }

.stack-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--fg);
  padding: 2rem;
  color: var(--bg);
  box-shadow: var(--shadow-elegant);
}
@media(min-width:1024px) { .stack-aside { padding: 2.5rem; } }

.stack-aside-glow {
  position: absolute;
  right: -6rem;
  top: -6rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: hsl(250 100% 65% / .35);
  filter: blur(80px);
  pointer-events: none;
}
.stack-aside-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  background-image: linear-gradient(var(--bg) 1px, transparent 1px), linear-gradient(90deg, var(--bg) 1px, transparent 1px);
  background-size: 28px 28px;
}

.stack-aside-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  padding: .25rem .75rem;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(252,252,253,.8);
  margin-bottom: 1.5rem;
}
.stack-aside-dot { width: .375rem; height: .375rem; border-radius: 50%; background: var(--primary); }

.stack-aside p {
  position: relative;
  font-size: 18px;
  line-height: 1.5;
}

.stack-aside-tags {
  position: relative;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.stack-tag {
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  padding: .25rem .75rem;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(252,252,253,.85);
}

.stack-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media(min-width:640px) { .stack-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1280px) { .stack-cards-grid { grid-template-columns: repeat(3, 1fr); } }

.stack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.75rem 1.75rem 6rem;
  transition: transform .3s, border-color .3s, box-shadow .4s;
  cursor: default;
  /* Always visible — no JS reveal needed */
  opacity: 1;
}
.stack-card:hover {
  transform: translateY(-4px);
  border-color: hsl(250 100% 65% / .6);
  box-shadow: var(--shadow-elegant);
}

.stack-card-num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--primary);
}
.stack-card h3 {
  margin-top: .75rem;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.stack-card p {
  margin-top: .75rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted-fg);
}

.stack-chips {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  transition: opacity .3s;
}
.stack-card:hover .stack-chips { opacity: 0; }
.stack-chip-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: hsl(240 6% 4% / .75);
}
.stack-chip-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }

.stack-flow {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.stack-card:hover .stack-flow { opacity: 1; transform: translateY(0); }
.flow-step {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  padding: .375rem .75rem;
  border-radius: .5rem;
  background: hsl(250 100% 65% / .1);
}
.flow-arrow {
  flex: 1;
  height: 1px;
  background: hsl(250 100% 65% / .25);
  position: relative;
}
.flow-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: hsl(250 100% 65% / .4);
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════════ */
.testimonials-section {
  position: relative;
  overflow: hidden;
  background: hsl(240 5% 96% / .4);
  padding: 3.5rem 0 4rem;
}
@media(min-width:640px)  { .testimonials-section { padding: 5rem 0 6rem; } }
@media(min-width:1024px) { .testimonials-section { padding: 7rem 0 8rem; } }

.testimonials-header {
  margin-bottom: 2.5rem;
}
@media(min-width:640px) { .testimonials-header { margin-bottom: 3.5rem; } }

.testimonials-h2 {
  max-width: 32rem;
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}

.testimonials-marquee-wrap {
  position: relative;
}
.testimonials-fade-l {
  position: absolute;
  left: 0;
  inset-y: 0;
  z-index: 10;
  width: 4rem;
  background: linear-gradient(to right, hsl(240 5% 96% / .4), transparent);
  pointer-events: none;
}
@media(min-width:640px) { .testimonials-fade-l { width: 8rem; } }
.testimonials-fade-r {
  position: absolute;
  right: 0;
  inset-y: 0;
  z-index: 10;
  width: 4rem;
  background: linear-gradient(to left, hsl(240 5% 96% / .4), transparent);
  pointer-events: none;
}
@media(min-width:640px) { .testimonials-fade-r { width: 8rem; } }

.testimonials-rows { display: flex; flex-direction: column; gap: 1rem; }
@media(min-width:640px) { .testimonials-rows { gap: 1.25rem; } }

.testimonials-row-inner {
  display: flex;
  width: max-content;
  align-items: stretch;
  gap: 1rem;
}
@media(min-width:640px) { .testimonials-row-inner { gap: 1.25rem; } }

.t-row-fwd .testimonials-row-inner { animation: marquee 45s linear infinite; }
.t-row-rev .testimonials-row-inner { animation: marquee-rev 45s linear infinite; }
.t-row-fwd:hover .testimonials-row-inner,
.t-row-rev:hover .testimonials-row-inner { animation-play-state: paused; }

.quote-card {
  width: 340px;
  flex-shrink: 0;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.25rem;
  box-shadow: 0 15px 40px -15px rgba(10,10,11,.11);
  transition: transform .2s, border-color .2s;
}
@media(min-width:640px) { .quote-card { width: 420px; border-radius: 1.5rem; padding: 1.75rem; } }
.quote-card:hover { transform: translateY(-2px); border-color: hsl(250 100% 65% / .4); }

.quote-text {
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.01em;
}
@media(min-width:640px) { .quote-text { font-size: 16px; } }
.quote-mark { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--primary); }

.quote-footer {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.quote-avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-glow));
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.quote-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.quote-role { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--muted-fg); margin-top: .125rem; }

/* ══════════════════════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════════════════════ */
.about-section {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--bg);
  padding: 4rem 0;
}
@media(min-width:640px)  { .about-section { padding: 5.5rem 0; } }
@media(min-width:1024px) { .about-section { padding: 8rem 0; } }

.about-blob-a {
  position: absolute;
  left: -5rem;
  top: 33%;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: hsl(250 100% 65% / .3);
  filter: blur(80px);
  pointer-events: none;
  animation: blob 14s ease-in-out infinite;
}
.about-blob-b {
  position: absolute;
  right: -6rem;
  bottom: 0;
  width: 21rem;
  height: 21rem;
  border-radius: 50%;
  background: hsl(250 100% 75% / .3);
  filter: blur(80px);
  pointer-events: none;
  animation: float-slow 6s ease-in-out infinite;
}
.about-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .4;
  background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2.5rem;
}
@media(min-width:1024px) { .about-grid { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; } }

.about-badge {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  padding: .375rem .75rem;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(252,252,253,.7);
  backdrop-filter: blur(12px);
  margin-bottom: 1rem;
}
.about-badge-dot { width: .375rem; height: .375rem; border-radius: 50%; background: var(--pulse); }

.about-h2 {
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.about-p {
  margin-top: 1.25rem;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(252,252,253,.7);
}
@media(min-width:640px) { .about-p { font-size: 16px; } }

.about-ctas {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  width: 100%;
}
@media(min-width:640px) { .about-ctas { flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; } }

.btn-primary-purple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  padding: .875rem 1.5rem;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: var(--shadow-glow);
  transition: all .2s;
}
.btn-primary-purple:hover { transform: translateY(-2px); }

.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(252,252,253,.85);
  padding: .875rem 1.5rem;
  font-size: 14.5px;
  font-weight: 500;
  transition: background .2s;
}
.btn-ghost-light:hover { background: rgba(255,255,255,.05); }

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media(min-width:640px) { .about-stats { gap: 1rem; } }

.about-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  padding: 1rem;
  backdrop-filter: blur(12px);
  transition: border-color .2s;
}
@media(min-width:640px) { .about-stat-card { border-radius: 1.5rem; padding: 1.75rem; } }
.about-stat-card:hover { border-color: hsl(250 100% 65% / .4); }

.about-stat-v {
  font-family: 'Geist Mono', monospace;
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}
@media(min-width:640px) { .about-stat-v { font-size: 56px; } }
@media(min-width:1024px) { .about-stat-v { font-size: 80px; } }

.about-stat-l {
  margin-top: 1rem;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(252,252,253,.5);
}
@media(min-width:640px) { .about-stat-l { font-size: 11px; letter-spacing: .14em; } }

/* ══════════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════════ */
.faq-section {
  position: relative;
  padding: 4rem 0;
}
@media(min-width:640px)  { .faq-section { padding: 5.5rem 0; } }
@media(min-width:1024px) { .faq-section { padding: 8rem 0; } }

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media(min-width:640px)  { .faq-grid { gap: 3rem; } }
@media(min-width:1024px) { .faq-grid { grid-template-columns: 1fr 1.5fr; gap: 3.5rem; } }

.faq-h2 {
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.faq-note { margin-top: 1.5rem; max-width: 28rem; font-size: 15px; color: var(--muted-fg); }

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }

.faq-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--fg);
  transition: color .2s;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
}
@media(min-width:640px) { .faq-btn { font-size: 18px; padding: 1.5rem 0; gap: 1.5rem; } }
@media(min-width:1024px) { .faq-btn { font-size: 20px; } }
.faq-btn:hover { color: var(--primary); }

.faq-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted-fg);
  transition: transform .3s, color .3s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--primary); }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .3s;
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner {
  min-height: 0;
  overflow: hidden;
}
.faq-answer p {
  padding-bottom: 1.25rem;
  max-width: 48rem;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-fg);
}
@media(min-width:640px) { .faq-answer p { padding-bottom: 1.5rem; } }

/* ══════════════════════════════════════════════════════════════
   CTA
══════════════════════════════════════════════════════════════ */
.cta-section {
  padding: 3.5rem 1rem;
}
@media(min-width:640px)  { .cta-section { padding: 5rem 1.5rem; } }
@media(min-width:1024px) { .cta-section { padding: 6rem 3rem; } }

.cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.625rem;
  background: var(--ink);
  padding: 1.5rem;
  color: var(--bg);
}
@media(min-width:640px)  { .cta-card { border-radius: 2rem; padding: 2.5rem; } }
@media(min-width:1024px) { .cta-card { padding: 5rem; } }

.cta-blob-a {
  position: absolute;
  right: -8rem;
  top: -8rem;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-glow));
  opacity: .5;
  filter: blur(80px);
  pointer-events: none;
  animation: blob 14s ease-in-out infinite;
}
.cta-blob-b {
  position: absolute;
  left: -5rem;
  bottom: -8rem;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: hsl(250 100% 65% / .4);
  opacity: .6;
  filter: blur(80px);
  pointer-events: none;
  animation: float-slow 6s ease-in-out infinite;
}

.cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 2.5rem;
}
@media(min-width:1024px) { .cta-inner { grid-template-columns: 1.4fr 1fr; } }

.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  padding: .375rem .75rem;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(252,252,253,.7);
  backdrop-filter: blur(12px);
  margin-bottom: 1.25rem;
}
.cta-badge-dot { width: .375rem; height: .375rem; border-radius: 50%; background: #34d399; animation: pulse-ring 1.4s ease-in-out infinite; }

.cta-h2 {
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.035em;
}

.cta-p {
  margin-top: 1.25rem;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(252,252,253,.65);
}
@media(min-width:640px) { .cta-p { font-size: 16px; margin-top: 1.5rem; } }

.cta-actions { display: flex; flex-direction: column; gap: .625rem; }
@media(min-width:640px) { .cta-actions { gap: .75rem; } }

.btn-cta-main {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-radius: 9999px;
  background: var(--bg);
  color: var(--fg);
  padding: .875rem 1.25rem;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
}
@media(min-width:640px) { .btn-cta-main { padding: 1rem 1.5rem; font-size: 15px; } }
.btn-cta-main:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }

.btn-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(252,252,253,.85);
  padding: .875rem 1.25rem;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s;
}
@media(min-width:640px) { .btn-cta-ghost { padding: 1rem 1.5rem; font-size: 15px; } }
.btn-cta-ghost:hover { background: rgba(255,255,255,.05); }

.cta-footnote {
  margin-top: .5rem;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(252,252,253,.45);
}


/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(200%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  padding: .875rem 1.25rem;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-elegant);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
  flex-wrap: wrap;
}
.cookie-banner.show { transform: translateX(-50%) translateY(0); }
.cookie-text { font-size: 13px; color: var(--muted-fg); flex: 1; min-width: 200px; }
.cookie-text a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: .5rem; }
.btn-cookie-accept {
  border-radius: 9999px;
  background: var(--ink);
  color: #fff;
  padding: .375rem .875rem;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: 'Geist', sans-serif;
}
.btn-cookie-decline {
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted-fg);
  padding: .375rem .875rem;
  font-size: 12.5px;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   SERVICES PAGE
══════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 8rem 0 5rem;
}
@media(min-width:1024px) { .page-hero { padding: 10rem 0 7rem; } }

.page-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--bg);
}
.page-hero-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
  background-image: linear-gradient(to right, hsl(240 6% 4% / .045) 1px, transparent 1px), linear-gradient(to bottom, hsl(240 6% 4% / .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 85%);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted-fg);
  margin-bottom: 2rem;
}
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb-sep { opacity: .5; }

.services-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 4rem;
}
@media(min-width:1024px) { .services-hero-grid { grid-template-columns: 1.3fr 1fr; } }

.services-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: rgba(252,252,253,.7);
  padding: .375rem .75rem;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted-fg);
  backdrop-filter: blur(12px);
  margin-bottom: 1.75rem;
}
.services-hero-badge-dot { width: .375rem; height: .375rem; border-radius: 50%; background: var(--primary); }

.services-h1 {
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.04em;
}

.services-hero-p {
  margin-top: 1.75rem;
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted-fg);
}

.services-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.services-stat-card {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.25rem;
}
.services-stat-v {
  font-family: 'Geist Mono', monospace;
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.services-stat-l {
  margin-top: .75rem;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted-fg);
}

/* FX Marquee (services page) */
.fx-marquee {
  position: relative;
  overflow: hidden;
  padding: 1.375rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.fx-marquee-track {
  display: inline-flex;
  gap: 2.25rem;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.fx-marquee:hover .fx-marquee-track { animation-play-state: paused; }

/* Catalogue */
.catalogue-section { padding: 5rem 0; }
@media(min-width:1024px) { .catalogue-section { padding: 7rem 0; } }

.catalogue-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.catalogue-h2 {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.svc-row {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  gap: 3.5rem;
  padding: 5rem 0;
  border-top: 1px solid var(--border);
}
@media(min-width:1024px) { .svc-row { grid-template-columns: repeat(2, 1fr); } }
.svc-row:first-child { border-top: none; }

.svc-ghost-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: clamp(280px, 38vw, 520px);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1;
  pointer-events: none;
  z-index: -1;
  user-select: none;
  opacity: 0;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s;
  font-family: 'Geist', sans-serif;
}
/* Show ghost num when row is revealed by scroll observer OR set active */
.svc-row.in-view      .svc-ghost-num,
.svc-row.revealed     .svc-ghost-num,
.svc-row.svc-row-active .svc-ghost-num { opacity: 1; }
/* Scale up the active row's ghost num */
.svc-row.svc-row-active .svc-ghost-num { transform: translate(-50%,-50%) scale(1.04); }

.svc-icon-tile {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.125rem;
  border: 1px solid;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.svc-row:hover .svc-icon-tile { transform: rotate(-6deg) scale(1.06); }

.svc-row-copy-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.svc-row-num-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted-fg);
}

.svc-row h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.svc-row-desc {
  margin-top: 1rem;
  max-width: 50ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted-fg);
}

.svc-row-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 2rem;
}
.svc-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted-fg);
  margin-bottom: .375rem;
}
.svc-meta-val { font-size: 16px; font-weight: 500; }

.btn-svc-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  background: var(--ink);
  color: #fff;
  padding: .75rem 1.25rem;
  font-size: 14px;
  font-weight: 500;
  margin-top: 2rem;
  transition: all .2s;
  overflow: hidden;
}
.btn-svc-cta:hover { background: var(--primary); transform: translateY(-1px); }

.svc-row-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 2rem;
  box-shadow: var(--shadow-elegant);
  transition: box-shadow .4s;
}
.svc-row:hover .svc-row-card { box-shadow: 0 40px 80px -30px hsl(250 100% 65% / .35), var(--shadow-elegant); }

.svc-row-card-glow {
  position: absolute;
  right: -5rem; top: -5rem;
  width: 15rem; height: 15rem;
  border-radius: 50%;
  opacity: .18;
  filter: blur(60px);
  pointer-events: none;
}
.deliverables-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted-fg);
  margin-bottom: 1rem;
}
.deliverable-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: .625rem;
}
.deliverable-diamond {
  width: .375rem;
  height: .375rem;
  flex-shrink: 0;
  transform: rotate(45deg);
  border-radius: 1.5px;
  margin-top: .5rem;
}

.stack-section-divider {
  border-top: 1px dashed var(--border);
  margin-top: 1.75rem;
  padding-top: 1.25rem;
}
.stack-chips-row { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .75rem; }
.stack-chip {
  border-radius: .375rem;
  border: 1px solid var(--border);
  background: var(--secondary);
  padding: .25rem .625rem;
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: hsl(240 6% 4% / .75);
  transition: all .2s;
  cursor: default;
}
.stack-chip:hover { transform: translateY(-2px); }

/* Engagements */
.engagements-section {
  background: hsl(240 5% 96% / .4);
  padding: 7rem 0;
}
.engagements-h2 {
  max-width: 44rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.engagements-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 3.5rem;
}
@media(min-width:768px) { .engagements-grid { grid-template-columns: repeat(3, 1fr); } }

.eng-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  padding: 2.25rem;
  transition: transform .4s, box-shadow .4s;
  background: var(--card);
}
.eng-card:hover { transform: translateY(-6px); }
.eng-card.featured {
  border-color: hsl(250 100% 65% / .4);
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-glow);
}
.eng-card-popular {
  position: absolute;
  top: -10px;
  right: 1.5rem;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  padding: .25rem .75rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.eng-name { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.eng-duration {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.eng-price {
  font-family: 'Geist Mono', monospace;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 1rem;
  color: var(--primary);
}
.eng-card.featured .eng-price { color: var(--primary-glow); }
.eng-desc { font-size: 14px; line-height: 1.55; margin-top: .75rem; }
.eng-card.featured .eng-desc { color: rgba(252,252,253,.7); }
.eng-features { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.eng-feature {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: 13.5px;
}
.eng-feature-dot {
  margin-top: .5rem;
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.eng-card.featured .eng-feature-dot { background: var(--primary-glow); }
.eng-card.featured .eng-feature { color: rgba(252,252,253,.85); }
.eng-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  margin-top: 2rem;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  transition: color .2s;
}
.eng-card.featured .eng-cta { border-color: rgba(255,255,255,.15); }
.eng-cta:hover { color: var(--primary); }

/* Industries */
.industries-section {
  background: hsl(240 5% 96% / .4);
  padding: 7rem 0;
}
.industries-h2 {
  max-width: 44rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.industries-grid {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}
@media(min-width:768px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1024px) { .industries-grid { grid-template-columns: repeat(3, 1fr); } }

.industry-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.75rem;
  transition: transform .3s, border-color .3s;
}
.industry-card:hover { transform: translateY(-4px); border-color: hsl(250 100% 65% / .4); }
.industry-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--primary);
}
.industry-title { margin-top: .75rem; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.industry-desc { margin-top: .625rem; font-size: 14px; line-height: 1.55; color: var(--muted-fg); }

/* Services page process strip */
.process-strip-section { padding: 7rem 0; }
.process-strip-h2 {
  max-width: 44rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.process-strip-grid {
  display: grid;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  margin-top: 3.5rem;
}
@media(min-width:768px) { .process-strip-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1024px) { .process-strip-grid { grid-template-columns: repeat(4, 1fr); } }

.proc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 2rem;
  transition: background .3s;
}
.proc-tile:hover { background: hsl(250 100% 65% / .04); }
.proc-tile::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.proc-tile:hover::after { transform: scaleX(1); }
.proc-num {
  font-family: 'Geist Mono', monospace;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.proc-week {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted-fg);
}
.proc-title { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.proc-desc { font-size: 14px; line-height: 1.55; color: var(--muted-fg); }

/* Services contact CTA */
.svc-contact-section {
  position: relative;
  overflow: hidden;
  padding: 7rem 0;
}

/* ══════════════════════════════════════════════════════════════
   PAGE-LEVEL GENERIC
══════════════════════════════════════════════════════════════ */
.inner-page-wrap { padding-top: 6rem; }

/* ══════════════════════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media(min-width:1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-info-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  transition: color .2s;
}
.contact-info-row:first-child { border-top: 1px solid var(--border); }
.contact-info-row:hover { color: var(--primary); }
.contact-info-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted-fg);
  width: 5rem;
  flex-shrink: 0;
}
.contact-info-val { font-size: 15px; }

.contact-next-steps {
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
  margin-top: 2.5rem;
}
.contact-form-wrap {
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 2rem;
}

.form-field { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted-fg);
  margin-bottom: .5rem;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--bg);
  padding: .75rem 1rem;
  font-size: 14px;
  color: var(--fg);
  font-family: 'Geist', sans-serif;
  transition: border-color .2s;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media(max-width:480px) { .form-row { grid-template-columns: 1fr; } }
.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  background: var(--ink);
  color: #fff;
  padding: .875rem 1.5rem;
  font-size: 14.5px;
  font-weight: 500;
  width: 100%;
  justify-content: center;
  margin-top: .5rem;
  transition: all .2s;
  cursor: pointer;
  border: none;
  font-family: 'Geist', sans-serif;
}
.btn-submit:hover { background: var(--primary); }
.form-hint {
  text-align: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--muted-fg);
  margin-top: .75rem;
}
.contact-success {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
}
.contact-success.show { display: block; }

/* ══════════════════════════════════════════════════════════════
   MIND-NEURONS CANVAS
   Canvas sits at z-index 0, draws its OWN gradient background
   so there is zero CSS stacking / transparency conflict.
   hero-bg div is kept as a no-JS fallback only.
══════════════════════════════════════════════════════════════ */
#mind-neurons {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;  /* cursor tracking is on .hero-section */
  z-index: 0;
  display: block;
}
.hero-section {
  position: relative;
  overflow: hidden;
}
/* Content always above canvas */
.hero-section > .container { position: relative; z-index: 2; }
/* hero-bg handled by canvas — no CSS gradient overlay */

/* ══════════════════════════════════════════════════════════════
   SERVICES — EXACT REACT SCROLL-DRIVEN CAROUSEL
══════════════════════════════════════════════════════════════ */

/* Bento section base */
#services { position: relative; }

/* ══════════════════════════════════════════════════════════════
   PROCESS — PRE-RENDERED PANELS  (class-swap, zero reflow)
══════════════════════════════════════════════════════════════ */
/* Process panels */
.proc-panels-col { position: relative; }

.process-detail-card,
.process-preview-card {
  display: none;   /* hidden — JS shows the active one via style.display */
  position: relative;
  overflow: hidden;
}

/* Fallback: if JS fails, at least show first panel */
.process-detail-card:first-child,
.process-preview-card:first-child {
  display: block;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1023px) {
  .process-section { contain: layout; }
  .process-detail-grid { grid-template-columns: 1fr !important; }
  #proc-right { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   3D TILT  (data-fx-tilt) — same as React ServicesFX
══════════════════════════════════════════════════════════════ */
[data-fx-tilt] {
  transform-style: preserve-3d;
  position: relative;
}
[data-fx-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    220px 220px at var(--fx-spot-x, 50%) var(--fx-spot-y, 50%),
    hsl(250 100% 65% / .18), transparent 60%
  );
  opacity: 0;
  transition: opacity .25s;
  mix-blend-mode: screen;
}
[data-fx-tilt]:hover::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   CANVAS: ensure it doesn't intercept pointer events
   (cursor tracking is on the parent hero section, not the canvas)
══════════════════════════════════════════════════════════════ */
#mind-neurons { pointer-events: none; }
.hero-section  { cursor: default; }

/* ══════════════════════════════════════════════════════════════
   TABLET / MID-SCREEN RESPONSIVE  768px – 1023px
   Screens at ~1000px get a proper intermediate layout instead
   of collapsing fully to the mobile single-column stack.
══════════════════════════════════════════════════════════════ */

/* ── Hero: 2-column at 900px+ ────────────────────────────── */
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
  }
  .hero-h1 { font-size: clamp(2.5rem, 7vw, 6.75rem); }
  .hero-lede { font-size: 17px; }
}

/* ── Services: 2-col card grid at 768px (tablet) ─────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Mobile shows all cards stacked; tablet can show 2-col grid */
  #svc-track {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    transform: none !important;
    padding: 0 1rem !important;
  }
  [data-svc-card] {
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .svc-card { height: auto; min-height: 480px; }
  /* Hide scroll chrome on tablet grid view */
  .svc-arrow, #svc-dots, .carousel-progress-wrap, #svc-count { display: none; }
  .svc-footer { display: none; }
}

/* ── About: 2-column at 900px+ ───────────────────────────── */
@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
  }
}

/* ── Stack: sidebar at 900px+ ────────────────────────────── */
@media (min-width: 900px) {
  .stack-grid { grid-template-columns: 1fr 2fr; }
  .stack-aside { padding: 2rem; }
}

/* ── Stack cards: 2-col already at 640px, keep it ────────── */

/* ── Process: keep 2-col pills at 768px+ ─────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .process-pills { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── FAQ: 2-col at 900px+ ────────────────────────────────── */
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: 1fr 1.5fr; gap: 3.5rem; }
}

/* ── CTA: 2-col at 900px+ ────────────────────────────────── */
@media (min-width: 900px) {
  .cta-inner { grid-template-columns: 1.4fr 1fr; }
}

/* ── Footer row: side-by-side at 768px+ ─────────────────── */
@media (min-width: 768px) {
}

/* ── Services page catalogue: 2-col at 900px+ ───────────── */
@media (min-width: 900px) {
  .svc-row { grid-template-columns: repeat(2, 1fr); }
  .services-hero-grid { grid-template-columns: 1.3fr 1fr; }
}

/* ── Engagements: 3-col at 768px+ ───────────────────────── */
@media (min-width: 768px) {
  .engagements-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Industries: 2-col at 768px, 3-col at 900px ─────────── */
@media (min-width: 768px) {
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .industries-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Process strip: 2-col at 768px, 4-col at 900px ──────── */
@media (min-width: 768px) {
  .process-strip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .process-strip-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Contact grid: 2-col at 900px+ ──────────────────────── */
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

/* ── About stats: ensure 2-col at all sizes ─────────────── */
@media (min-width: 480px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   1920px / WIDE SCREEN RESPONSIVE
   Content was too narrow at 1920×1080. Widen the container
   and adjust proportions so the site uses the screen properly.
══════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .container, .wrap { max-width: 1360px; }
}
@media (min-width: 1680px) {
  .container, .wrap { max-width: 1560px; }
}
@media (min-width: 1920px) {
  .container, .wrap { max-width: 1760px; padding: 0 4rem; }

  /* Nav: wider pill */
  .site-nav { width: min(1780px, calc(100% - 32px)); }

  /* Hero: more breathing room */
  .hero-h1 { font-size: clamp(3rem, 6vw, 7.5rem); }

  /* Process: wider detail grid */
  .process-detail-grid { gap: 2rem; }
}

/* ══════════════════════════════════════════════════════════════
   ISO CERTIFICATIONS — .iso-section
══════════════════════════════════════════════════════════════ */
.iso-section {
  position: relative;
  padding: 80px 48px 56px;
  background: hsl(240 20% 99%);
  overflow: hidden;
}
.iso-section::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, hsl(250 100% 65% / .06), transparent 70%);
  pointer-events: none;
}
.iso-inner { position: relative; max-width: 1280px; margin: 0 auto; }
.iso-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.iso-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: hsl(240 4% 46%);
  padding: 6px 12px; border-radius: 9999px;
  border: 1px solid hsl(240 6% 92%);
  background: hsl(0 0% 100%);
}
.iso-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: hsl(140 100% 50%);
  box-shadow: 0 0 0 3px hsl(140 100% 50% / .2);
  animation: footer-pulse 2s ease-in-out infinite;
}
.iso-title {
  margin: 18px 0 12px; font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
  color: hsl(240 6% 4%);
}
.iso-sub {
  margin: 0; font-size: 13px; line-height: 1.6;
  color: hsl(240 4% 46%);
}
.iso-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.iso-badge {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 22px 14px 18px;
  background: hsl(0 0% 100%);
  border: 1px solid hsl(240 6% 92%);
  border-radius: 18px;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), border-color 280ms, box-shadow 280ms, background 280ms;
  overflow: hidden;
}
.iso-badge::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, hsl(var(--iso-tone, 250 100% 65%) / .12), transparent 70%);
  opacity: 0; transition: opacity 280ms; pointer-events: none;
}
.iso-badge:hover {
  transform: translateY(-4px);
  border-color: hsl(var(--iso-tone, 250 100% 65%) / .4);
  box-shadow: 0 18px 40px -20px hsl(var(--iso-tone, 250 100% 65%) / .45);
}
.iso-badge:hover::before { opacity: 1; }
.iso-badge-ring {
  position: relative;
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(from 0deg, hsl(var(--iso-tone, 250 100% 65%) / .85), hsl(var(--iso-tone, 250 100% 65%) / .25), hsl(var(--iso-tone, 250 100% 65%) / .85));
  padding: 3px;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.iso-badge:hover .iso-badge-ring { transform: rotate(8deg); }
.iso-badge-ring-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: hsl(0 0% 100%);
  display: grid; place-items: center;
  border: 1px solid hsl(var(--iso-tone, 250 100% 65%) / .25);
}
.iso-badge-mark {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  color: hsl(var(--iso-tone, 250 100% 65%));
}
.iso-badge-body { text-align: center; }
.iso-badge-code {
  margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: hsl(240 6% 4%);
}
.iso-badge-label {
  margin: 4px 0 0; font-size: 12.5px; line-height: 1.4;
  color: hsl(240 6% 4%); font-weight: 500;
}
.iso-badge-year {
  margin: 6px 0 0; font-size: 10px; letter-spacing: .12em;
  color: hsl(240 4% 46%);
}
.iso-badge-check {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: hsl(var(--iso-tone, 250 100% 65%) / .12);
  color: hsl(var(--iso-tone, 250 100% 65%));
  opacity: 0; transform: scale(.6);
  transition: opacity 240ms, transform 280ms cubic-bezier(.2,.8,.2,1);
}
.iso-badge:hover .iso-badge-check { opacity: 1; transform: scale(1); }
.iso-fineprint {
  margin: 36px 0 0; text-align: center;
  font-size: 10.5px; letter-spacing: .04em;
  color: hsl(240 4% 46%);
}
.iso-registry {
  margin: 36px auto 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid hsl(240 6% 92%);
  border-radius: 18px;
  background: linear-gradient(135deg, hsl(250 100% 65% / .04), transparent 60%), hsl(0 0% 100%);
  position: relative; overflow: hidden;
}
.iso-registry::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 50%, hsl(250 100% 65% / .07), transparent 70%);
  pointer-events: none;
}
.iso-registry-head { display: flex; align-items: center; gap: 14px; position: relative; }
.iso-registry-seal {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: hsl(250 100% 65% / .12);
  color: hsl(250 100% 65%);
}
.iso-registry-name {
  margin: 0; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: hsl(240 6% 4%);
}
.iso-registry-sub {
  margin: 3px 0 0; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: hsl(240 4% 46%);
}
.iso-registry-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  position: relative;
}
.iso-registry-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  background: hsl(240 20% 99%);
  border: 1px solid hsl(240 6% 92%);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), border-color 240ms, box-shadow 240ms;
}
.iso-registry-row:hover {
  transform: translateY(-2px);
  border-color: hsl(250 100% 65% / .35);
  box-shadow: 0 12px 24px -16px hsl(250 100% 65% / .4);
}
.iso-registry-key {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: hsl(240 4% 46%);
}
.iso-registry-val {
  font-size: 13px; font-weight: 600;
  color: hsl(240 6% 4%); letter-spacing: .02em;
}
@media (max-width: 760px) {
  .iso-registry { grid-template-columns: 1fr; padding: 18px; gap: 16px; }
  .iso-registry-rows { grid-template-columns: 1fr; }
  .iso-registry-row { flex-direction: row; align-items: baseline; justify-content: space-between; }
}
@media (max-width: 1024px) {
  .iso-section { padding: 72px 32px 48px; }
  .iso-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .iso-section { padding: 56px 20px 40px; }
  .iso-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .iso-badge { padding: 18px 10px 14px; }
  .iso-badge-ring { width: 62px; height: 62px; }
}

/* ══════════════════════════════════════════════════════════════
   SITE FOOTER — dark, 3-column (brand / capabilities / features)
   Matches footer.jsx + footer.css v2
══════════════════════════════════════════════════════════════ */
.site-footer {
  --f-bg: 240 8% 6%;
  --f-bg-2: 240 10% 9%;
  --f-fg: 0 0% 98%;
  --f-fg-muted: 240 6% 65%;
  --f-border: 0 0% 100% / 0.08;
  --f-card: 0 0% 100% / 0.04;
  --f-card-hover: 0 0% 100% / 0.08;
  position: relative;
  padding: 56px 48px 0;
  overflow: hidden;
  color: hsl(var(--f-fg));
  background: linear-gradient(180deg, hsl(var(--f-bg)) 0%, hsl(var(--f-bg-2)) 100%);
  border-top: 1px solid hsl(var(--f-border));
}
.footer-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.footer-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, hsl(0 0% 100% / 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(0 0% 100% / 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 85%);
}
.footer-glow {
  position: absolute; width: 50vw; height: 50vw; max-width: 720px; max-height: 720px;
  border-radius: 50%; filter: blur(120px); opacity: 0.45;
}
.footer-glow-a { top: -25%; left: -15%; background: hsl(250 100% 65% / 0.45); }
.footer-glow-b { bottom: -30%; right: -10%; background: hsl(263 90% 60% / 0.35); }
.site-footer-inner { position: relative; z-index: 1; margin: 0 auto; max-width: 1280px; }

/* CTA strip */
.footer-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  padding: 4px 0 24px;
}
.footer-cta-left { display: flex; flex-direction: column; gap: 14px; min-width: 280px; flex: 1 1 480px; }
.footer-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: hsl(var(--f-fg-muted));
  padding: 6px 12px; border-radius: 9999px;
  border: 1px solid hsl(var(--f-border));
  background: hsl(var(--f-card));
}
.footer-cta-title {
  margin: 0; font-size: clamp(24px, 3vw, 36px);
  line-height: 1.05; letter-spacing: -0.02em;
  font-weight: 600; color: hsl(var(--f-fg));
}
.footer-cta-right { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 9999px;
  background: hsl(var(--f-fg)); color: hsl(var(--f-bg));
  font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms, background 240ms;
  box-shadow: 0 12px 28px -14px hsl(0 0% 100% / 0.6);
}
.footer-cta-btn:hover {
  transform: translateY(-2px);
  background: hsl(250 100% 65%);
  color: white;
  box-shadow: 0 16px 32px -14px hsl(250 100% 65% / 0.7);
}
.footer-cta-btn-arrow {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: hsl(0 0% 0% / 0.12);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.footer-cta-btn:hover .footer-cta-btn-arrow { transform: translateX(3px); }
.footer-cta-link {
  font-size: 12px; letter-spacing: 0.04em;
  color: hsl(var(--f-fg-muted)); text-decoration: none;
  border-bottom: 1px dashed hsl(var(--f-border));
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}
.footer-cta-link:hover { color: hsl(var(--f-fg)); border-color: hsl(var(--f-fg) / 0.4); }

/* Horizontal rule */
.footer-rule {
  height: 1px;
  background: linear-gradient(to right, transparent, hsl(0 0% 100% / 0.14), transparent);
  margin: 12px 0 28px;
}

/* 3-column grid */
.footer-cols {
  display: grid;
  grid-template-columns: 1.3fr 1.1fr 1fr;
  gap: 48px;
  margin-bottom: 32px;
}
.footer-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.footer-col-title {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: hsl(var(--f-fg-muted)); margin: 0 0 4px;
}
.footer-col-brand { gap: 14px; }

/* Brand col — logo uses image in a white card */
.footer-logo-card {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid hsl(0 0% 100% / 0.6);
  background: #ffffff !important;
  text-decoration: none; color: hsl(var(--f-fg));
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), border-color 280ms, box-shadow 280ms;
  box-shadow: 0 6px 22px -10px hsl(250 100% 65% / 0.4);
}
.footer-logo-card:hover {
  transform: translateY(-2px);
  border-color: hsl(250 100% 65% / 0.6);
  background: #ffffff !important;
  box-shadow: 0 12px 30px -12px hsl(250 100% 65% / 0.6);
}
.footer-logo-img {
  display: block;
  height: 36px;
  width: auto;
  object-fit: contain;
}

.footer-address {
  display: flex; align-items: flex-start; gap: 10px;
  font-style: normal; font-size: 12px; line-height: 1.55;
  color: hsl(var(--f-fg) / 0.85);
  padding: 12px 14px;
  border-radius: 12px;
  background: hsl(var(--f-card));
  border: 1px solid hsl(var(--f-border));
  max-width: 360px;
  transition: border-color 240ms, background 240ms;
  text-decoration: none;
}
.footer-address:hover {
  border-color: hsl(250 100% 65% / 0.35);
  background: hsl(var(--f-card-hover));
}
.footer-address-icon {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px;
  background: hsl(250 100% 65% / 0.18);
  color: hsl(250 100% 75%);
}
.footer-entity {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: hsl(var(--f-card));
  border: 1px solid hsl(var(--f-border));
  max-width: 360px;
  transition: border-color 240ms, background 240ms;
}
.footer-entity:hover {
  border-color: hsl(250 100% 65% / 0.35);
  background: hsl(var(--f-card-hover));
}
.footer-entity-name {
  margin: 0; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; color: hsl(var(--f-fg));
}
.footer-entity-rows {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: hsl(var(--f-fg-muted));
}
.footer-entity-rows b { font-weight: 600; color: hsl(250 100% 75%); margin-right: 4px; }
.footer-socials { display: flex; gap: 8px; }
.footer-social {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid hsl(var(--f-border));
  background: hsl(var(--f-card));
  color: hsl(var(--f-fg-muted));
  text-decoration: none;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), border-color 240ms, color 240ms, background 240ms;
}
.footer-social:hover {
  transform: translateY(-2px);
  color: hsl(var(--f-fg));
  border-color: hsl(250 100% 65% / 0.5);
  background: hsl(250 100% 65% / 0.15);
}

/* Legal links */
.footer-nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  color: hsl(var(--f-fg) / 0.85); text-decoration: none;
  width: fit-content;
  transition: color 200ms, transform 200ms;
}
.footer-legal { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer-legal-link { color: hsl(var(--f-fg-muted)) !important; font-size: 11.5px; }
.footer-legal-link:hover { color: hsl(var(--f-fg)) !important; }

/* Capability pills — white on dark */
.footer-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-pill {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 9999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  color: hsl(var(--f-bg));
  background: #ffffff !important;
  border: 1px solid hsl(0 0% 100% / 0);
  text-decoration: none;
  box-shadow: 0 6px 18px -10px hsl(0 0% 100% / 0.5);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), background 240ms, color 240ms, box-shadow 240ms;
}
.footer-pill:hover {
  transform: translateY(-2px);
  background: hsl(250 100% 65%) !important;
  color: white;
  box-shadow: 0 12px 26px -12px hsl(250 100% 65% / 0.8);
}

/* Feature bullet list */
.footer-features {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer-feature {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: hsl(var(--f-fg));
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), color 240ms;
}
.footer-feature:hover { transform: translateX(3px); color: hsl(250 100% 75%); }
.footer-feature-dot {
  flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: hsl(250 100% 65%);
  box-shadow: 0 0 0 3px hsl(250 100% 65% / 0.16);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), background 240ms;
}
.footer-feature:hover .footer-feature-dot { transform: scale(1.2); background: hsl(250 100% 75%); }
.footer-feature-label { font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.4; }
.footer-feature-arrow {
  margin-left: 2px; font-size: 11px;
  color: hsl(var(--f-fg-muted));
  opacity: 0; transform: translate(-4px, 2px);
  transition: opacity 240ms, transform 240ms cubic-bezier(.2,.8,.2,1), color 240ms;
}
.footer-feature:hover .footer-feature-arrow { opacity: 1; transform: translate(0, 0); color: hsl(250 100% 75%); }

/* Meta row */
.footer-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 18px;
}
.footer-meta-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-meta-text {
  margin: 0; font-size: 11px; letter-spacing: 0.04em;
  color: hsl(var(--f-fg-muted));
  display: inline-flex; align-items: center; gap: 8px;
}
.footer-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: hsl(140 100% 50%);
  box-shadow: 0 0 0 4px hsl(140 100% 50% / 0.18);
  animation: footer-pulse 2s ease-in-out infinite;
}
.footer-status-dot-sm { width: 6px; height: 6px; box-shadow: 0 0 0 3px hsl(140 100% 50% / 0.18); }
@keyframes footer-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.6; transform: scale(0.85); }
}

/* Back-to-top */
.footer-btt {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 16px; border-radius: 9999px;
  border: 1px solid hsl(var(--f-border));
  background: hsl(var(--f-card)) !important;
  cursor: pointer; font-family: inherit;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), border-color 240ms, background 240ms;
}
.footer-btt:hover {
  transform: translateY(-2px);
  border-color: hsl(250 100% 65% / 0.5);
  background: hsl(250 100% 65% / 0.18) !important;
}
.footer-btt-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: hsl(var(--f-fg));
}
.footer-btt-icon {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: hsl(250 100% 65% / 0.25);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}
.footer-btt-icon svg path { stroke: hsl(250 100% 75%) !important; }
.footer-btt:hover .footer-btt-icon { transform: translateY(-2px); }

/* Giant SVG wordmark */
.footer-wordmark {
  position: relative; user-select: none;
  margin-top: -8px; padding-bottom: 12px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}
.footer-wordmark-svg { display: block; width: 100%; height: auto; overflow: visible; transform: translateY(10%); }
.footer-wordmark-text { font-family: 'Geist','Inter',sans-serif; font-size: 220px; font-weight: 800; letter-spacing: -10px; }

/* Responsive */
@media (max-width: 1100px) {
  .footer-cols { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .site-footer { padding: 56px 32px 0; }
}
@media (max-width: 760px) {
  .site-footer { padding: 48px 22px 0; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .footer-cta-left { flex: none; min-width: 0; width: 100%; }
  .footer-cta-right { align-items: flex-start; width: 100%; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-col-brand { grid-column: 1 / -1; }
  .footer-meta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL IMAGE & PROPORTIONAL SIZING — all screens 1920px → mobile
   Ensures every image, card, and section scales proportionally.
══════════════════════════════════════════════════════════════ */

/* All images scale to their container and never overflow */
img { max-width: 100%; height: auto; display: block; }

/* Hero visual column: fixed width so it never shrinks weirdly */
.hero-visual {
  width: 100%;
  max-width: 480px;
}
@media (min-width: 1024px) {
  .hero-visual { max-width: 520px; }
}
@media (min-width: 1440px) {
  .hero-visual { max-width: 560px; }
}
@media (min-width: 1920px) {
  .hero-visual { max-width: 620px; }
  /* Agent card scales up slightly at 1920px */
  .agent-card  { height: 520px; max-width: 560px; }
}

/* Services carousel cards: proportional at 1920px */
@media (min-width: 1920px) {
  [data-svc-card] .svc-card { height: var(--svc-card-h, 620px); }
}

/* About stats: fix the huge font at very large screens */
@media (min-width: 1440px) {
  .about-stat-v { font-size: clamp(44px, 4.5vw, 80px) !important; }
}

/* Stack cards: consistent height */
.stack-card { min-height: 420px; }

/* Quote cards: consistent width */
.quote-card { width: clamp(300px, 32vw, 420px); }

/* CTA card: full max-width inside padding */
.cta-card { max-width: 1280px; }
@media (min-width: 1440px) { .cta-card { max-width: 1360px; } }
@media (min-width: 1680px) { .cta-card { max-width: 1560px; } }
@media (min-width: 1920px) { .cta-card { max-width: 1760px; } }

/* Prevent any element from ever exceeding viewport width */
* { max-width: 100vw; box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; }