/* ==========================================================================
   Brimeo Marketing Website — Stylesheet
   Built from Brimeo Design System tokens (see /Brimeo Design System/README.md)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Public+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Neutrals */
  --black:#0b0b0d;
  --gray-900:#16161a;
  --gray-800:#26262b;
  --gray-700:#3d3d44;
  --gray-600:#57575f;
  --gray-500:#797981;
  --gray-400:#9d9da4;
  --gray-300:#c2c2c7;
  --gray-200:#e2e2e5;
  --gray-100:#eeeef0;
  --gray-50:#f6f6f7;
  --white:#ffffff;

  /* Brand + confetti */
  --indigo-600:#4433e0;
  --indigo-500:#5b4cf0;
  --indigo-400:#8177f5;
  --indigo-100:#e7e4fd;
  --coral-500:#ff6a5a;
  --coral-100:#ffe3df;
  --amber-500:#ffb648;
  --amber-100:#fff1d9;
  --sky-500:#4fb6ff;
  --sky-100:#dcf0ff;

  /* Warm surfaces */
  --cream-100:#faf8f3;
  --cream-200:#f3efe6;
  --cream-300:#e8e2d3;
  --stone-500:#8f8a7d;

  /* Semantic surfaces */
  --surface-bg:var(--cream-100);
  --surface-page:var(--cream-200);
  --surface-card:var(--white);
  --surface-nav:#96938d;
  --surface-inverse:var(--black);

  /* Text */
  --text-primary:var(--black);
  --text-secondary:var(--gray-600);
  --text-tertiary:var(--gray-500);
  --text-inverse:var(--white);
  --text-link:var(--indigo-600);
  --text-link-hover:var(--indigo-500);

  /* Borders */
  --border-subtle:var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong:var(--gray-700);

  --accent-primary:var(--indigo-600);
  --accent-primary-hover:var(--indigo-500);

  --glow-blue:var(--sky-100);
  --glow-amber:var(--amber-100);
  --glow-coral:var(--coral-100);
  --glow-indigo:var(--indigo-100);

  /* Typography */
  --font-display:'Source Serif 4','Iowan Old Style',Georgia,serif;
  --font-body:'Public Sans',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;

  --text-display-xl:clamp(2.75rem,6vw,5.5rem);
  --text-display-lg:clamp(2.25rem,4.4vw,3.75rem);
  --text-display-md:2.5rem;
  --text-h1:2.75rem;
  --text-h2:2rem;
  --text-h3:1.5rem;
  --text-h4:1.125rem;
  --text-body-lg:1.125rem;
  --text-body:1rem;
  --text-body-sm:0.875rem;
  --text-caption:0.75rem;

  --leading-tight:1.05;
  --leading-snug:1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight:-0.03em;
  --tracking-normal:-0.01em;
  --tracking-wide:0.04em;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;

  /* Spacing / radius / shadow */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px; --space-32:128px;

  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;

  --container-max:1280px;
  --container-pad:40px;

  --shadow-sm:0 1px 2px rgba(11,11,13,0.06);
  --shadow-md:0 4px 16px rgba(11,11,13,0.08);
  --shadow-lg:0 16px 48px rgba(11,11,13,0.12);

  --blur-md:24px;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --duration-fast:150ms;
  --duration-normal:280ms;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-primary);
  background:var(--surface-bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
img{max-width:100%;display:block}
h1,h2,h3,h4,p{margin:0}
p code{
  font-family:var(--font-mono);font-size:0.9em;background:var(--gray-100);
  padding:2px 6px;border-radius:5px;color:var(--text-primary);
}

.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--container-pad);padding-right:var(--container-pad)}

/* ---------- Decorative backgrounds ---------- */
.brimeo-grid-field{
  background-image:linear-gradient(var(--cream-300) 1px,transparent 1px),linear-gradient(90deg,var(--cream-300) 1px,transparent 1px);
  background-size:48px 48px;
}
.brimeo-gradient-glow{
  background:
    radial-gradient(60% 60% at 20% 20%,var(--glow-blue) 0%,transparent 60%),
    radial-gradient(50% 50% at 85% 15%,var(--glow-coral) 0%,transparent 55%),
    radial-gradient(55% 55% at 80% 90%,var(--glow-amber) 0%,transparent 55%),
    radial-gradient(50% 50% at 10% 85%,var(--glow-indigo) 0%,transparent 55%);
  filter:blur(var(--blur-md));
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:var(--weight-semibold);
  border:1px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform var(--duration-fast) var(--ease-standard),
             filter var(--duration-fast) var(--ease-standard),
             opacity var(--duration-fast) var(--ease-standard);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

.btn-md{padding:10px 20px;font-size:var(--text-body)}
.btn-lg{padding:14px 28px;font-size:var(--text-body-lg)}

.btn-primary{background:var(--surface-inverse);color:var(--text-inverse)}
.btn-primary:hover{color:var(--text-inverse)}
.btn-secondary{background:var(--gray-100);color:var(--text-primary)}
.btn-secondary:hover{color:var(--text-primary)}
.btn-outline{background:transparent;color:var(--text-primary);border-color:var(--border-default)}
.btn-outline:hover{color:var(--text-primary)}
.btn-ghost{background:transparent;color:var(--text-secondary)}

/* ---------- Badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:var(--weight-semibold);
  font-size:var(--text-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;
}
.badge-neutral{background:var(--gray-100);color:var(--text-secondary)}
.badge-indigo{background:var(--glow-indigo);color:var(--indigo-600)}
.badge-coral{background:var(--glow-coral);color:var(--coral-500)}
.badge-amber{background:var(--glow-amber);color:#8a5a06}
.badge-sky{background:var(--glow-blue);color:#12689e}

/* ---------- Navbar ---------- */
.navbar-wrap{padding:20px 24px 0;font-family:var(--font-body)}
.navbar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--container-max);margin:0 auto;padding:10px 12px 10px 18px;
  background:var(--surface-nav);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);
}
.navbar-logo{
  display:flex;align-items:center;gap:9px;font-size:1.05rem;font-weight:var(--weight-extrabold);
  letter-spacing:var(--tracking-tight);color:var(--white);flex-shrink:0;
}
.navbar-logo:hover{color:var(--white)}
.navbar-links{display:flex;gap:26px;font-size:var(--text-body-sm);color:rgba(255,255,255,.85);font-weight:var(--weight-medium)}
.navbar-links a{color:inherit}
.navbar-links a:hover{color:var(--white)}
.navbar-links a.is-active{color:var(--white);font-weight:var(--weight-semibold)}
.navbar-cta{
  background:var(--white);color:var(--text-primary);border:none;text-decoration:none;
  border-radius:var(--radius-pill);padding:9px 18px;font-size:var(--text-body-sm);
  font-weight:var(--weight-semibold);cursor:pointer;display:inline-block;flex-shrink:0;
  transition:transform var(--duration-fast) var(--ease-standard),filter var(--duration-fast) var(--ease-standard);
}
.navbar-cta:hover{color:var(--text-primary);transform:translateY(-1px);filter:brightness(1.06)}
.navbar-toggle{display:none;background:none;border:none;padding:6px;cursor:pointer}
.navbar-toggle span{display:block;width:20px;height:2px;background:var(--white);margin:4px 0;border-radius:2px}
.navbar-mobile-menu{display:none}

/* ---------- Eyebrow badge (hero / page header) ---------- */
.eyebrow-pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--cream-300);font-family:var(--font-body);font-weight:var(--weight-semibold);
  font-size:var(--text-body-sm);
}
.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-primary);display:inline-block}

/* ---------- Hero ---------- */
.fold{min-height:100vh;display:flex;flex-direction:column}
.fold .navbar-wrap{flex:0 0 auto}
.hero{
  position:relative;flex:1 0 auto;display:flex;align-items:center;justify-content:center;
  padding:60px 40px;text-align:center;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;opacity:.6}
.hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--surface-bg) 92%)}
.hero-inner{position:relative;z-index:1;max-width:980px;margin:0 auto}
.hero-inner .eyebrow-pill{margin-bottom:28px}
.hero h1{
  font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-display-xl);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-normal);margin:20px 0 32px;
}
.hero p{
  font-family:var(--font-body);font-size:var(--text-body-lg);color:var(--text-secondary);
  max-width:620px;margin:0 auto 40px;line-height:var(--leading-relaxed);
}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Hero heading reveal ----------
   Every character is already laid out in the DOM from first paint (just
   invisible), and each one only ever animates opacity/filter/transform —
   all compositor-only properties. That's what makes this smooth: no text
   reflow per character, no JS timer driving it frame-by-frame. JS's only
   job is to split the string into spans and give each one a staggered
   transition-delay; the browser's own animation engine does the rest.
   The real, readable heading for assistive tech is the .sr-only span. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.type-heading{position:relative}
.type-chars .word{display:inline-block}
.type-chars .char{
  display:inline-block;opacity:0;filter:blur(7px);transform:translateY(10px);
  transition:opacity .5s var(--ease-out),filter .5s var(--ease-out),transform .5s var(--ease-out);
  will-change:opacity,filter,transform;
}
.type-chars.is-visible .char{opacity:1;filter:blur(0);transform:none}
.type-cursor{
  display:inline-block;width:0.045em;height:0.85em;margin-left:0.05em;background:currentColor;
  vertical-align:-0.08em;opacity:0;animation:type-blink 1s steps(1) infinite;
  transition:opacity .3s ease;
}
.type-cursor.is-on{opacity:1}
.type-cursor.is-fading{animation:none;opacity:0;transition:opacity .6s ease}
@keyframes type-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.hero-reveal-group{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.hero-reveal-group.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .type-cursor{display:none}
  .hero-reveal-group{opacity:1;transform:none;transition:none}
}

/* ---------- Page header (subpages) ---------- */
.page-header{position:relative;padding:70px 40px 60px;text-align:center;overflow:hidden}
.page-header-bg{position:absolute;inset:0;opacity:.5}
.page-header-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--surface-bg) 95%)}
.page-header-inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.page-header-inner .eyebrow-pill{margin-bottom:18px}
.page-header h1{
  font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-display-lg);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-normal);margin:0 0 18px;
}
.page-header p{
  font-family:var(--font-body);font-size:var(--text-body-lg);color:var(--text-secondary);
  line-height:var(--leading-relaxed);margin:0;
}

/* ---------- Demo video (scroll-zoom) ---------- */
.demo-section{padding:0 40px 110px;overflow:hidden}
.demo-video-wrap{
  position:relative;max-width:var(--container-max);margin:0 auto;border-radius:var(--radius-xl);
  overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/9;background:var(--black);
  transform:scale(0.82);transform-origin:center top;
}
.demo-video-wrap video,
.demo-video-wrap iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}

/* ---------- Product intro line ---------- */
.product-intro{text-align:center;padding:20px 40px 0}
.product-intro p{
  font-family:var(--font-display);font-size:var(--text-h2);font-weight:var(--weight-semibold);
  max-width:760px;margin:0 auto;line-height:var(--leading-snug);
}

/* ---------- Product panels (2-col alternating rows, wide container) ---------- */
.product-row{
  display:grid;grid-template-columns:0.9fr 1.3fr;gap:56px;align-items:center;
  max-width:1440px;margin:0 auto;padding:90px 40px;
}
.product-row.is-reversed{grid-template-columns:1.3fr 0.9fr}
.product-row h2{
  font-family:var(--font-display);font-size:var(--text-display-md);font-weight:var(--weight-semibold);
  margin:0 0 16px;letter-spacing:var(--tracking-tight);
}
.product-row p{
  font-family:var(--font-body);font-size:var(--text-body-lg);color:var(--text-secondary);
  line-height:var(--leading-relaxed);max-width:440px;
}

/* Tighter variant used on the Product page */
.product-row.is-compact{padding:0;margin-bottom:110px}
.product-row.is-compact:last-child{margin-bottom:0}
.product-row.is-compact h2{font-size:var(--text-display-md)}

/* ---------- Gradient card (glow wrapper) ---------- */
.gradient-card{position:relative;border-radius:var(--radius-xl);padding:3px}
.gradient-card-glow{position:absolute;inset:-24px;border-radius:var(--radius-xl);filter:blur(28px);z-index:0}
.gradient-card-glow.tone-indigo{background:radial-gradient(60% 60% at 30% 20%,var(--glow-indigo) 0%,transparent 70%)}
.gradient-card-glow.tone-coral{background:radial-gradient(60% 60% at 30% 20%,var(--glow-coral) 0%,transparent 70%)}
.gradient-card-glow.tone-amber{background:radial-gradient(60% 60% at 30% 20%,var(--glow-amber) 0%,transparent 70%)}
.gradient-card-glow.tone-sky{background:radial-gradient(60% 60% at 30% 20%,var(--glow-blue) 0%,transparent 70%)}
.gradient-card-body{
  position:relative;z-index:1;background:var(--surface-card);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);overflow:hidden;
}

/* Large modifier — bigger halo, more presence */
.gradient-card-lg .gradient-card-glow{inset:-64px;filter:blur(52px)}
.gradient-card-lg .gradient-card-body{border-radius:var(--radius-xl)}

/* ---------- Code panel ---------- */
.code-panel{
  background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);
  font-family:var(--font-mono);font-size:13px;overflow:hidden;box-shadow:var(--shadow-md);
}
.code-panel-header{
  display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border-subtle);
  color:var(--text-tertiary);flex-wrap:wrap;
}
.code-panel-header .crumb::after{content:'\203A';margin-left:8px;color:var(--text-tertiary)}
.code-panel-header .filename{color:var(--text-primary);font-weight:var(--weight-medium)}

/* Large modifier — bigger type, roomier lines, taller panel */
.code-panel-lg{font-size:16px;border-radius:var(--radius-xl)}
.code-panel-lg .code-panel-header{padding:22px 28px;font-size:var(--text-body)}
.code-panel-lg .code-panel-line{padding:8px 28px;gap:20px}
.code-panel-lg .code-panel-line:first-child{padding-top:20px}
.code-panel-lg .code-panel-line:last-child{padding-bottom:20px}
.code-panel-line{display:flex;gap:16px;padding:3px 16px}
.code-panel-line.is-highlighted{background:var(--gray-50)}
.code-panel-line .ln{color:var(--gray-400);min-width:14px}
.code-panel-line .code{color:var(--text-secondary)}

/* ---------- Prompt bar ---------- */
.prompt-bar{
  background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  border:1px solid var(--border-subtle);padding:18px 20px;font-family:var(--font-body);
  display:flex;flex-direction:column;gap:14px;width:100%;
}
.prompt-bar-context{display:flex;align-items:center;gap:8px;font-size:var(--text-body-sm);color:var(--text-tertiary)}
.prompt-bar-text{color:var(--text-tertiary);font-size:var(--text-body)}
.prompt-bar-footer{display:flex;align-items:center;justify-content:space-between}
.prompt-bar-model{display:flex;align-items:center;gap:8px;font-size:var(--text-body-sm);color:var(--text-secondary)}
.prompt-bar-plus{
  border:1px solid var(--border-default);border-radius:6px;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
}
.prompt-bar-mic{
  width:30px;height:30px;border-radius:50%;background:var(--gray-100);
  display:inline-flex;align-items:center;justify-content:center;
}

/* Large modifier — roomier composer, bigger type */
.prompt-bar-lg{border-radius:var(--radius-xl);padding:32px 32px 28px;gap:28px}
.prompt-bar-lg .prompt-bar-text{font-size:var(--text-h3);font-family:var(--font-display);color:var(--text-tertiary)}
.prompt-bar-lg .prompt-bar-context,
.prompt-bar-lg .prompt-bar-model{font-size:var(--text-body)}
.prompt-bar-lg .prompt-bar-plus{width:28px;height:28px}
.prompt-bar-lg .prompt-bar-mic{width:38px;height:38px}

/* ---------- Mock UI (abstract wireframe "screenshot" for annotated use-case panels) ---------- */
.mock-ui{
  position:relative;display:flex;min-height:340px;background:var(--gray-900);
  border-radius:var(--radius-xl);overflow:hidden;
}
.mock-ui.tone-indigo{background:linear-gradient(150deg,#1c1653 0%,var(--black) 72%)}
.mock-ui.tone-sky{background:linear-gradient(150deg,#0c3552 0%,var(--black) 72%)}
.mock-ui.tone-coral{background:linear-gradient(150deg,#4a1912 0%,var(--black) 72%)}
.mock-ui.tone-amber{background:linear-gradient(150deg,#4a3408 0%,var(--black) 72%)}

.mock-ui-sidebar{width:64px;flex-shrink:0;padding:20px 12px;display:flex;flex-direction:column;gap:10px;background:rgba(0,0,0,.22)}
.mock-ui-sidebar-item{width:100%;height:8px;border-radius:4px;background:rgba(255,255,255,.14)}
.mock-ui-sidebar-item.is-active{background:rgba(255,255,255,.55)}

.mock-ui-main{flex:1;min-width:0;padding:24px 26px;display:flex;flex-direction:column;gap:12px}
.mock-ui-topbar{display:flex;gap:6px;margin-bottom:8px}
.mock-ui-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}
.mock-ui-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.045)}
.mock-ui-row.is-highlight{background:rgba(255,255,255,.09);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.mock-ui-chip{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.16);flex-shrink:0}
.mock-ui-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.16);flex-shrink:0}
.mock-ui-bar.w-70{width:70%}
.mock-ui-bar.w-60{width:60%}
.mock-ui-bar.w-50{width:50%}
.mock-ui-bar.w-40{width:40%}
.mock-ui-bar.w-30{width:30%}
.mock-ui-bar.w-20{width:20%}

/* Floating annotation callouts — pointing at whatever the customization touched */
.annotation-pill{
  position:absolute;padding:8px 15px;border-radius:var(--radius-pill);font-family:var(--font-body);
  font-weight:var(--weight-semibold);font-size:var(--text-caption);white-space:nowrap;box-shadow:var(--shadow-md);
  z-index:2;letter-spacing:var(--tracking-normal);
}
.annotation-pill.tone-indigo{background:var(--indigo-500);color:var(--white)}
.annotation-pill.tone-coral{background:var(--coral-500);color:var(--white)}
.annotation-pill.tone-amber{background:var(--amber-500);color:#402c00}
.annotation-pill.tone-sky{background:var(--sky-500);color:#00263d}

/* ---------- Testimonial ---------- */
.testimonial{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--gray-800);
  aspect-ratio:4/5;display:flex;align-items:flex-end;
}
.testimonial img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.testimonial-content{position:relative;z-index:1;padding:var(--space-6);color:var(--text-inverse)}
.testimonial-name{font-size:var(--text-h4);font-weight:var(--weight-bold)}
.testimonial-role{font-size:var(--text-body-sm);opacity:.8}
.testimonial-quote{margin-top:10px;font-size:var(--text-body-sm);opacity:.9;max-width:90%}

/* ---------- Built For section ---------- */
.built-for{padding:90px 40px;max-width:var(--container-max);margin:0 auto}
.built-for-header{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:48px;align-items:start}
.built-for-header h2{
  font-family:var(--font-display);font-size:var(--text-h1);font-weight:var(--weight-semibold);
  margin:0;letter-spacing:var(--tracking-tight);
}
.built-for-header p{
  font-family:var(--font-body);font-size:var(--text-body-lg);color:var(--text-secondary);
  line-height:var(--leading-relaxed);
}
.built-for-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* ---------- Feature grid (Product page — the rest of the capability list) ----------
   Figma-style pattern: a colored icon panel sits above plain heading/description
   text — no card border or shadow, the panel itself carries the visual weight. */
.feature-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;padding:24px 40px 90px;
  max-width:var(--container-max);margin:0 auto;
}
.feature-card{display:flex;flex-direction:column;gap:20px}
.feature-visual{
  aspect-ratio:16/11;border-radius:0;display:flex;align-items:center;justify-content:center;
}
.feature-visual svg{width:64px;height:64px}
.feature-visual.tone-indigo{background:var(--glow-indigo);color:var(--indigo-600)}
.feature-visual.tone-coral{background:var(--glow-coral);color:var(--coral-500)}
.feature-visual.tone-amber{background:var(--glow-amber);color:#8a5a06}
.feature-visual.tone-sky{background:var(--glow-blue);color:#12689e}
.feature-card-title{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-h3);margin:0}
.feature-card-body{font-family:var(--font-body);font-size:var(--text-body);color:var(--text-secondary);line-height:var(--leading-relaxed);margin:0}

/* ---------- Conflict row (4 touching panels, sharp edges, one grows on hover) ---------- */
.conflict-row{display:flex;width:100%;max-width:var(--container-max);margin:0 auto}
.conflict-item{
  flex:1 1 0%;min-width:0;padding:36px 30px;transition:flex-grow var(--duration-normal) var(--ease-standard);
  cursor:default;
}
.conflict-item:hover{flex-grow:1.7}
.conflict-item.tone-coral{background:var(--white)}
.conflict-item.tone-amber{background:var(--gray-50)}
.conflict-item.tone-sky{background:var(--gray-100)}
.conflict-item.tone-indigo{background:var(--gray-200)}
.conflict-label{
  display:block;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;margin-bottom:16px;color:var(--gray-600);
}
.conflict-title{
  font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-h3);
  margin:0 0 10px;color:var(--text-primary);
}
.conflict-body{
  font-family:var(--font-body);font-size:var(--text-body-sm);color:var(--text-secondary);
  line-height:var(--leading-normal);margin:0;
}

/* ---------- Pricing grid ---------- */
.pricing-wrap{max-width:var(--container-max);margin:0 auto;padding:70px 40px 120px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pricing-card{
  padding:32px;border-radius:var(--radius-xl);background:var(--surface-card);color:var(--text-primary);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:18px;
}
.pricing-card.is-featured{background:var(--surface-inverse);color:var(--text-inverse)}
.pricing-card-price{display:flex;align-items:baseline;gap:6px}
.pricing-card-price .amount{font-family:var(--font-display);font-size:var(--text-display-md);font-weight:var(--weight-semibold)}
.pricing-card-price .per{font-family:var(--font-body);font-size:var(--text-body-sm);opacity:.7}
.pricing-card-desc{font-family:var(--font-body);font-size:var(--text-body);opacity:.85;margin:0;line-height:var(--leading-normal)}
.pricing-card-features{display:flex;flex-direction:column;gap:8px;font-family:var(--font-body);font-size:var(--text-body-sm)}
.pricing-card-cta{margin-top:auto}

/* ---------- Footer ---------- */
.footer{background:var(--surface-inverse);color:var(--text-inverse);padding:64px 40px 32px}
.footer-top{
  max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px;
}
.footer-brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:1.1rem}
.footer-brand-mark{width:18px;height:18px;border-radius:5px;background:var(--indigo-400);display:inline-block}
.footer-col-title{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-body-sm);margin-bottom:12px;opacity:.6}
.footer-col-links{display:flex;flex-direction:column;gap:8px}
.footer-col-links a{color:rgba(255,255,255,.75);font-size:var(--text-body-sm)}
.footer-col-links a:hover{color:var(--white)}
.footer-bottom{
  max-width:var(--container-max);margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--text-caption);opacity:.5;font-family:var(--font-body);
}

/* ---------- Section header (generic, reused across new sections) ---------- */
.section-header{max-width:640px;margin:0 auto 48px;text-align:center}
.section-header .eyebrow-pill{margin-bottom:16px}
.section-header h2{
  font-family:var(--font-display);font-size:var(--text-h1);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);margin:0 0 14px;
}
.section-header p{
  font-family:var(--font-body);font-size:var(--text-body-lg);color:var(--text-secondary);
  line-height:var(--leading-relaxed);margin:0;
}
.section-header.is-left{text-align:left;margin-left:0}

/* ---------- Stats bar ---------- */
.stats-bar{
  max-width:var(--container-max);margin:0 auto;padding:56px 40px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.stat-item{
  padding:28px 24px;background:var(--surface-card);border-radius:0;box-shadow:var(--shadow-sm);
  text-align:center;
}
.stat-number{
  display:block;font-family:var(--font-display);font-size:var(--text-display-md);font-weight:var(--weight-semibold);
  color:var(--text-primary);letter-spacing:var(--tracking-tight);margin-bottom:8px;
}
.stat-label{font-family:var(--font-body);font-size:var(--text-body-sm);color:var(--text-secondary);line-height:var(--leading-normal)}

/* ---------- Platform pillars (home) — touching panels, sharp edges, grey shades ---------- */
.pillar-grid{
  max-width:var(--container-max);margin:0 auto;padding:20px 40px 90px;
  display:flex;width:100%;
}
.pillar-card{
  flex:1 1 0%;min-width:0;padding:32px 28px;transition:flex-grow var(--duration-normal) var(--ease-standard);
  cursor:default;
}
.pillar-card:hover{flex-grow:1.7}
.pillar-card:nth-child(1){background:var(--white)}
.pillar-card:nth-child(2){background:var(--gray-50)}
.pillar-card:nth-child(3){background:var(--gray-100)}
.pillar-card:nth-child(4){background:var(--gray-200)}
.pillar-card-title{
  font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-h4);margin:14px 0 8px;
}
.pillar-card-body{font-family:var(--font-body);font-size:var(--text-body-sm);color:var(--text-secondary);line-height:var(--leading-normal);margin:0}

/* ---------- Numbered steps (how it works) ---------- */
.steps{max-width:var(--container-max);margin:0 auto;padding:20px 40px 90px}
.steps-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step-card{
  position:relative;padding:36px 28px 32px;background:transparent;border:1px solid var(--border-default);
  border-radius:var(--radius-lg);transition:background var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard);
}
.step-card:nth-child(1):hover{background:var(--sky-500);border-color:var(--sky-500)}
.step-card:nth-child(2):hover{background:var(--coral-500);border-color:var(--coral-500)}
.step-card:nth-child(3):hover{background:var(--amber-500);border-color:var(--amber-500)}
.step-card:nth-child(4):hover{background:var(--indigo-500);border-color:var(--indigo-500)}
.step-number{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--border-default);color:var(--text-tertiary);font-family:var(--font-body);
  font-weight:var(--weight-semibold);font-size:var(--text-caption);margin-bottom:24px;
  transition:border-color var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard);
}
.step-card:nth-child(1):hover .step-number,
.step-card:nth-child(2):hover .step-number,
.step-card:nth-child(3):hover .step-number{border-color:rgba(11,11,13,.35);color:var(--black)}
.step-card:nth-child(4):hover .step-number{border-color:rgba(255,255,255,.6);color:var(--white)}
.step-title{
  font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-h3);
  margin-bottom:16px;color:var(--text-primary);transition:color var(--duration-normal) var(--ease-standard);
}
.step-card:nth-child(1):hover .step-title,
.step-card:nth-child(2):hover .step-title,
.step-card:nth-child(3):hover .step-title{color:var(--black)}
.step-card:nth-child(4):hover .step-title{color:var(--white)}
.step-divider{display:block;width:28px;height:1px;background:var(--border-default);margin-bottom:16px;transition:background var(--duration-normal) var(--ease-standard)}
.step-card:nth-child(1):hover .step-divider,
.step-card:nth-child(2):hover .step-divider,
.step-card:nth-child(3):hover .step-divider{background:rgba(11,11,13,.35)}
.step-card:nth-child(4):hover .step-divider{background:rgba(255,255,255,.4)}
.step-body{font-family:var(--font-body);font-size:var(--text-body-sm);color:var(--text-secondary);line-height:var(--leading-normal);margin:0;transition:color var(--duration-normal) var(--ease-standard)}
.step-card:nth-child(1):hover .step-body,
.step-card:nth-child(2):hover .step-body,
.step-card:nth-child(3):hover .step-body{color:rgba(11,11,13,.75)}
.step-card:nth-child(4):hover .step-body{color:rgba(255,255,255,.9)}

/* ---------- Architecture / subsystem grid ---------- */
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.arch-card{padding:24px;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.arch-card-name{
  font-family:var(--font-mono);font-size:var(--text-body-sm);font-weight:var(--weight-medium);
  color:var(--text-tertiary);margin-bottom:10px;
}
.arch-card-title{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-body);margin-bottom:8px}
.arch-card-body{font-family:var(--font-body);font-size:var(--text-body-sm);color:var(--text-secondary);line-height:var(--leading-normal);margin:0}

/* ---------- Spec table (sharp edges, no border-radius) ---------- */
.spec-table-wrap{
  max-width:var(--container-max);margin:0 auto;padding:20px 40px 90px;
}
.spec-table{
  width:100%;border-collapse:collapse;background:var(--surface-card);
  border:1px solid var(--border-default);box-shadow:var(--shadow-sm);
}
.spec-table th{
  text-align:left;font-family:var(--font-body);font-size:var(--text-caption);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--text-tertiary);font-weight:var(--weight-semibold);padding:16px 24px;
  border-bottom:1px solid var(--border-default);background:var(--gray-50);
}
.spec-table td{padding:18px 24px;border-bottom:1px solid var(--border-subtle);font-size:var(--text-body-sm);vertical-align:top}
.spec-table tr:last-child td{border-bottom:none}
.spec-table tbody tr{transition:background var(--duration-fast) var(--ease-standard)}
.spec-table tbody tr:hover{background:var(--gray-50)}
.spec-table td:first-child{font-family:var(--font-mono);color:var(--text-tertiary);white-space:nowrap;width:1%}
.spec-table td:nth-child(2){font-weight:var(--weight-semibold);color:var(--text-primary);white-space:nowrap}
.spec-table td:nth-child(3){color:var(--text-secondary);line-height:var(--leading-normal)}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:820px;margin:0 auto;padding:20px 40px 100px}
.faq-item{padding:24px 0;border-bottom:1px solid var(--border-subtle)}
.faq-item:first-child{border-top:1px solid var(--border-subtle)}
.faq-q{
  font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-body-lg);
  margin:0 0 10px;color:var(--text-primary);
}
.faq-a{font-family:var(--font-body);font-size:var(--text-body);color:var(--text-secondary);line-height:var(--leading-relaxed);margin:0}

/* ---------- Callout banner ---------- */
.callout{
  max-width:var(--container-max);margin:0 auto 90px;padding:56px 48px;border-radius:var(--radius-xl);
  background:var(--surface-inverse);color:var(--text-inverse);text-align:center;
}
.callout h2{
  font-family:var(--font-display);font-size:var(--text-h1);font-weight:var(--weight-semibold);margin:0 0 14px;
  letter-spacing:var(--tracking-tight);
}
.callout p{font-family:var(--font-body);font-size:var(--text-body-lg);opacity:.8;max-width:560px;margin:0 auto 32px;line-height:var(--leading-relaxed)}
.callout-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Pricing: 2-tier layout override ---------- */
.pricing-grid.is-two-col{grid-template-columns:repeat(2,1fr);max-width:920px;margin:0 auto}
.pricing-card-note{font-family:var(--font-body);font-size:var(--text-caption);opacity:.6;margin-top:-8px}

/* ---------- Quote card (text-only testimonial variant) ---------- */
.quote-card{
  background:var(--surface-inverse);color:var(--text-inverse);border-radius:var(--radius-xl);
  padding:var(--space-8);display:flex;flex-direction:column;justify-content:center;height:100%;
}
.quote-card-text{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-medium);line-height:var(--leading-snug)}
.quote-card-name{font-size:var(--text-h4);font-weight:var(--weight-bold);margin-top:28px}
.quote-card-role{font-size:var(--text-body-sm);opacity:.7}

/* ---------- Logo strip ---------- */
.logo-strip{max-width:var(--container-max);margin:0 auto;padding:8px 40px 90px;text-align:center}
.logo-strip-label{
  font-family:var(--font-body);font-size:var(--text-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:24px;
}
.logo-strip-row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap;opacity:.55}
.logo-strip-item{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-h4);color:var(--text-secondary)}

/* ---------- Scroll reveal ----------
   Progressive enhancement: html.js-reveal is added by an inline script in <head>,
   before paint, so content is only ever hidden when JS is present and will run
   the IntersectionObserver in main.js to reveal it. No JS -> everything just shows. */
html.js-reveal [data-reveal]{
  opacity:0;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);will-change:opacity,transform;
}
html.js-reveal [data-reveal="up"]{transform:translateY(32px)}
html.js-reveal [data-reveal="left"]{transform:translateX(-40px)}
html.js-reveal [data-reveal="right"]{transform:translateX(40px)}
html.js-reveal [data-reveal="scale"]{transform:scale(.92);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
html.js-reveal [data-reveal].is-visible{opacity:1;transform:none}

html.js-reveal [data-reveal="stagger"]{opacity:1;transform:none;transition:none}
html.js-reveal [data-reveal="stagger"] > *{
  opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
html.js-reveal [data-reveal="stagger"].is-visible > *{opacity:1;transform:none}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(1){transition-delay:0ms}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(2){transition-delay:90ms}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(3){transition-delay:180ms}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(4){transition-delay:270ms}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(5){transition-delay:360ms}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(6){transition-delay:450ms}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(7){transition-delay:540ms}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(8){transition-delay:630ms}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(9){transition-delay:720ms}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(10){transition-delay:810ms}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(11){transition-delay:900ms}
html.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(12){transition-delay:990ms}

@media (prefers-reduced-motion:reduce){
  html.js-reveal [data-reveal],
  html.js-reveal [data-reveal="stagger"] > *{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:960px){
  .built-for-header,.product-row,.product-row.is-reversed,.product-row.is-compact{grid-template-columns:1fr}
  .product-row p{max-width:none}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid,.pricing-grid.is-two-col{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr;row-gap:32px}
  .stats-bar,.steps-list{grid-template-columns:repeat(2,1fr)}
  .arch-grid{grid-template-columns:repeat(2,1fr)}
  .logo-strip-row{gap:28px}
  .conflict-row,.pillar-grid{flex-wrap:wrap}
  .conflict-item,.pillar-card{flex:1 1 50%}
  .conflict-item:hover,.pillar-card:hover{flex-grow:1}
}

@media (max-width:720px){
  .navbar-links{display:none}
  .navbar-toggle{display:block}
  .navbar-mobile-menu.is-open{
    display:flex;flex-direction:column;gap:4px;max-width:var(--container-max);margin:8px auto 0;
    padding:14px 18px;background:var(--surface-nav);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  }
  .navbar-mobile-menu a{color:rgba(255,255,255,.9);font-size:var(--text-body);padding:8px 4px;font-weight:var(--weight-medium)}
  .navbar-mobile-menu a.is-active{color:var(--white);font-weight:var(--weight-semibold)}
  .hero{padding:48px 20px}
  .page-header{padding:56px 20px 44px}
  .built-for,.pricing-wrap,.stats-bar,.pillar-grid,.steps,.faq-wrap,.logo-strip,.demo-section,.product-row,.spec-table-wrap{padding-left:20px;padding-right:20px}
  .spec-table td,.spec-table th{padding:12px 14px}
  .spec-table td:nth-child(2){white-space:normal}
  .spec-table td:nth-child(1){display:none}
  .spec-table th:nth-child(1){display:none}
  .demo-video-wrap{transform:none !important}
  .product-row{padding-top:56px;padding-bottom:56px}
  .code-panel-lg{font-size:13px}
  .code-panel-lg .code-panel-header{padding:16px 20px}
  .code-panel-lg .code-panel-line{padding:5px 20px;gap:14px}
  .prompt-bar-lg{padding:22px 22px 20px}
  .prompt-bar-lg .prompt-bar-text{font-size:var(--text-h4)}
  .mock-ui{min-height:260px}
  .mock-ui-sidebar{display:none}
  .mock-ui-main{padding:18px 16px}
  .annotation-pill{font-size:11px;padding:6px 11px}
  .feature-grid{grid-template-columns:1fr;padding:20px 20px 56px;gap:32px}
  .feature-visual svg{width:52px;height:52px}
  .footer{padding:48px 20px 24px}
  .footer-top{grid-template-columns:1fr}
  .stats-bar,.steps-list,.arch-grid{grid-template-columns:1fr}
  .conflict-row,.pillar-grid{flex-direction:column}
  .conflict-item,.pillar-card{flex:1 1 auto;padding:26px 20px}
  .callout{padding:40px 24px;margin-left:20px;margin-right:20px;width:calc(100% - 40px)}
  .callout h2{font-size:var(--text-h2)}
}