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

:root {
  --ink: #0A0A0F;
  --ink-mid: #1C1C28;
  --ink-soft: #3D3D52;
  --ghost: #7B7B96;
  --surface: #F5F4F1;
  --surface-2: #EBEBEA;
  --white: #FAFAF8;
  --accent: #1A3FDB;
  --accent-2: #0E2AA0;
  --border: rgba(10,10,15,0.1);
  --border-strong: rgba(10,10,15,0.18);
  --font: 'Inter', system-ui, sans-serif;

  /* Type scale (use these going forward instead of arbitrary inline sizes) */
  --fs-micro: 9px;     /* legal/footer micro */
  --fs-eyebrow: 11px;  /* uppercase labels, tags */
  --fs-tiny: 12px;     /* small chrome */
  --fs-sm: 14px;       /* secondary body */
  --fs-body: 16px;     /* default body */
  --fs-lg: 17px;       /* long-form body */
  --fs-xl: 18px;       /* hero/section sub */
  --fs-h4: 20px;       /* card titles */
  --fs-h3: 28px;       /* small heads */
  --fs-h2: 48px;       /* section heads */
  --fs-h1: 62px;       /* hero head */

  /* Line heights, three steps total */
  --lh-tight: 1.1;     /* headings */
  --lh-snug: 1.4;      /* card titles, dense UI */
  --lh-normal: 1.6;    /* body */
  --lh-loose: 1.75;    /* long-form prose */

  /* Letter-spacing, five steps total */
  --ls-display: -0.04em; /* hero h1 */
  --ls-tight: -0.02em;   /* section heads */
  --ls-normal: 0;        /* body */
  --ls-wide: 0.12em;     /* eyebrow caps small */
  --ls-wider: 0.2em;     /* eyebrow caps tiny */
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1,h2,h3,h4 { font-family: var(--font); line-height: 1.1; }

/* ─── NAV ─── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,15,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
  gap: 20px;
}
.nav-logo { display: flex; align-items: center; gap: 0; text-decoration: none; flex-shrink: 0; }
.logo-text-wrap { display: flex; flex-direction: column; line-height: 1; }
.logo-wordmark { font-family: var(--font); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 2.4px; text-transform: uppercase; }
.logo-tagline { font-size: 8px; font-weight: 400; color: rgba(255,255,255,0.4); letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }
.nav-logo img { height: 28px; width: auto; opacity: 0.92; }
.nav-logo-tagline {
  font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.35);
  letter-spacing: 2.5px; text-transform: uppercase;
  border-left: 1px solid rgba(255,255,255,0.15); margin-left: 14px; padding-left: 14px;
}
.nav-links { display: flex; align-items: center; gap: 18px; list-style: none; flex-wrap: nowrap; }
.nav-links a { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; letter-spacing: 0.2px; white-space: nowrap; }
.nav-links a:hover { color: #fff; }
.nav-cta { background: var(--accent) !important; color: #fff !important; padding: 9px 18px; border-radius: 6px; font-weight: 500 !important; font-size: 13px !important; transition: all 0.2s !important; white-space: nowrap; }
.nav-cta:hover { background: var(--accent-2) !important; transform: translateY(-1px); }

/* ─── HERO ─── */
.hero { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); position: relative; overflow: hidden; }
.hero-left { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.hero-left::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px; pointer-events: none;
}
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(100,140,255,0.8); margin-bottom: 20px; }
.hero-eyebrow-dot { width: 5px; height: 5px; background: rgba(100,140,255,0.8); border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.6)} }

/* HERO H1, Inter */
.hero-h1 { font-family: var(--font); font-size: 62px; font-weight: 800; line-height: 1.04; letter-spacing: -2.5px; color: #fff; margin-bottom: 24px; }
.hero-h1 .accent-line { color: rgba(100,150,255,0.9); display: block; }

.hero-sub { font-size: 18px; font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1.65; max-width: 560px; margin-bottom: 40px; }
.hero-actions { display: flex; align-items: center; gap: 32px; margin-bottom: 56px; }

.btn-primary { background: var(--accent); color: #fff; padding: 14px 28px; border-radius: 7px; font-size: 15px; font-weight: 500; text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 7px; letter-spacing: -0.1px; }
.btn-primary:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(26,63,219,.35); }
.btn-ghost-light { color: rgba(255,255,255,0.6); font-size: 15px; font-weight: 400; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.18); transition: all 0.2s; }
.btn-ghost-light:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

.hero-trust { display: flex; flex-direction: column; gap: 12px; }
.hero-trust-label { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.22); font-weight: 500; }
.hero-logos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ─── Trusted-by logos: uniform 32px bay + per-logo optical sizing ─── */
/* Each logo has a wildly different aspect ratio (Arcadia ~1.9, Red Hat ~4.2,
   AF-KLM ~6.1), so a single height value makes them look mismatched.
   We give every logo the same vertical bay (32px) for perfect alignment,
   then tune each image's intrinsic height individually so the visual mass
   is balanced across the row. */
.client-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  opacity: 0.5;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 0.18s ease;
}
a.client-logo:hover { opacity: 0.95; }
a.client-logo:focus-visible { opacity: 0.95; outline: 1px solid rgba(255,255,255,0.5); outline-offset: 4px; border-radius: 2px; }
.client-logo img { display: block; width: auto; max-width: 140px; }
.client-logo--af-klm  img { height: 20px; }  /* very wide, slim it */
.client-logo--redhat  img { height: 19px; }  /* medium-wide, trimmed to match AF-KLM weight */
.client-logo--askvet  img { height: 20px; }  /* wordmark+icon, match AF-KLM weight */
/* AskVet's icon has internal detail (dog-face inside the circle) that gets
   destroyed by brightness(0)+invert(1). Drop contrast first (so the dark
   wordmark text moves toward midrange instead of staying near-black), then
   brighten, so text becomes legible, the icon stays visible, no inversion. */
.client-logo--askvet { filter: grayscale(1) contrast(0.5) brightness(1.5); opacity: 0.85; }
a.client-logo--askvet:hover { opacity: 1; }
a.client-logo--askvet:focus-visible { opacity: 1; }

/* Linked logos on the demo-page trust strip */
.demo-page-trust-link { display: inline-flex; align-items: center; transition: opacity 0.18s ease; }
.demo-page-trust-link:hover img { opacity: 0.95 !important; }
.demo-page-trust-link:focus-visible img { opacity: 0.95 !important; }

.client-logo-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.14); flex-shrink: 0; }

/* ─── HERO RIGHT ─── */
.hero-right { background: #0d0d1a; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,0.05); }
.hero-glow { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(26,63,219,0.28) 0%, transparent 65%); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.vi-stack { position: relative; z-index: 2; width: 370px; }
.vi-stack-label { font-size: 9px; text-transform: uppercase; letter-spacing: 2.5px; color: rgba(255,255,255,0.22); font-weight: 500; text-align: center; margin-bottom: 18px; }
/* ─── VI platform stack: cards (vi-layer), titles, descriptions ─── */
.vi-layer { border-radius: 10px; margin-bottom: 6px; padding: 14px 16px; transition: all 0.25s; }
.vi-layer-top { background: rgba(26,63,219,0.85); border: 1px solid rgba(100,130,255,0.45); }
.vi-layer-mid { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; }
.vi-layer-mid:hover { background: rgba(255,255,255,0.09); transform: translateX(3px); }

.vi-layer-name {
  display: flex;
  align-items: flex-start;          /* badge sits at top when title wraps */
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
  min-width: 0;                     /* let inner text shrink/wrap */
}
.vi-layer-name .vi-badge { margin-left: auto; align-self: flex-start; }

.vi-layer-desc { font-size: 11px; color: rgba(255,255,255,0.48); line-height: 1.45; }

/* ─── Standardized chip / badge, fixed height, never wraps, never shrinks ─── */
.vi-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.vi-badge-blue       { background: rgba(100,140,255,0.25); color: rgba(160,190,255,0.95); }
.vi-badge-studio     { background: rgba(100,140,255,0.30); color: rgba(180,200,255,0.95); }
.vi-badge-foundation { background: rgba(26,63,219,0.55);   color: rgba(190,215,255,0.98); }

/* ─── Floating "Visual Intelligence Platform" pill, highlighted ─── */
.vi-platform-pill {
  position: absolute;
  top: -13px;                       /* sit on the wrapper border */
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(60,100,220,0.95) 0%, rgba(26,63,219,0.95) 100%);
  border: 1px solid rgba(140,180,255,0.7);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  box-shadow: 0 0 0 4px rgba(13,13,26,0.85), 0 6px 18px rgba(26,63,219,0.5), 0 0 24px rgba(100,140,255,0.35);
}

.vi-connector { width: 1px; height: 12px; background: rgba(255,255,255,0.14); margin: 0 auto; }
.vi-modules-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 5px; }
.vi-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; }
.vi-stat { padding: 12px 13px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; text-align: center; }
.vi-stat-num { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.vi-stat-label { font-size: 10px; color: rgba(255,255,255,0.38); margin-top: 3px; }

/* ─── TICKER ─── */
.ticker { background: var(--ink-mid); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 16px 0; overflow: hidden; white-space: nowrap; }
/* Uniform gap so dots sit centered between adjacent logos. align-items:center
   keeps every logo (regardless of intrinsic height) vertically aligned with
   the small dot separators. */
.ticker-inner { display: inline-flex; align-items: center; gap: 32px; animation: ticker-scroll 50s linear infinite; }
.ticker-dot { width: 4px; height: 4px; background: rgba(100,140,255,0.55); border-radius: 50%; flex-shrink: 0; }
.ticker-text { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.5); flex-shrink: 0; }
@keyframes ticker-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Ticker logos: three filter treatments based on logo type:
     --mono   : clean wordmark, becomes a flat white silhouette
     --askvet : icon with internal detail; lift contrast so wordmark + icon both read
     --bg     : logo with a colored background rectangle (ATK, Weather Channel) -
                desaturate but keep the box visible rather than inverting it to white. */
.ticker-logo { width: auto; display: block; flex-shrink: 0; }
.ticker-logo--mono   { filter: brightness(0) invert(1); opacity: 0.55; }
.ticker-logo--askvet { filter: grayscale(1) contrast(0.5) brightness(1.5); opacity: 0.85; }
.ticker-logo--bg     { filter: grayscale(1) brightness(0.95) contrast(0.9); opacity: 0.5; }

/* Per-logo height tuning, since each logo's intrinsic aspect ratio differs, so we
   tune individually to balance the visual weight across the row. */
.ticker-logo--af-klm    { height: 18px; }   /* very wide */
.ticker-logo--redhat    { height: 18px; }   /* hat icon + wordmark */
.ticker-logo--askvet    { height: 22px; }   /* squarish, icon + wordmark */
.ticker-logo--arcadia   { height: 22px; }   /* compact wordmark */
.ticker-logo--samsung   { height: 18px; }   /* wide wordmark */
.ticker-logo--atk       { height: 24px; }   /* squarish red box */
.ticker-logo--cegid     { height: 48px; }   /* wordmark; image has heavy padding around the letters, needs extra height to read */
.ticker-logo--dartmouth { height: 28px; }   /* tree icon + DARTMOUTH stacked */
.ticker-logo--twc       { height: 32px; }   /* square stacked logo */
.ticker-logo--ultra     { height: 24px; }   /* logo + wordmark, two lines */

/* ─── SECTIONS ─── */
section { padding: 96px 60px; }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 2.5px; color: var(--accent); font-weight: 700; margin-bottom: 14px; }
.section-h2 { font-size: 48px; font-weight: 800; letter-spacing: -1.6px; color: var(--ink); margin-bottom: 18px; line-height: 1.06; }
.section-sub { font-size: 18px; color: var(--ink-soft); line-height: 1.6; font-weight: 300; max-width: 720px; }

/* ─── WHAT IS VI ─── */
.vi-section { background: var(--white); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.vi-def-cards { display: flex; flex-direction: column; gap: 14px; }
.vi-def-card { padding: 20px 22px; border: 1px solid var(--border); border-radius: 12px; transition: all 0.2s; }
.vi-def-card:hover { border-color: rgba(26,63,219,0.3); background: #f0f3ff; }

/* Title (left) + chip (right) on the first row, description below */
.vi-def-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.vi-def-card-title {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin: 0;
}
.vi-def-card-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  /* Same family (Inter), tighter weight, no uppercase, no letter-spacing → narrower chip */
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  background: rgba(26,63,219,0.08);
  border: 1px solid rgba(26,63,219,0.22);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.vi-def-card-text { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }

/* vi-def-card-head flex-wrap → handled in mobile breakpoint */

/* ─── PLATFORM SECTION ─── */
.platform-section { background: var(--ink); color: #fff; }
.platform-section .section-h2 { color: #fff; letter-spacing: -1.5px; }
.platform-section .section-sub { color: rgba(255,255,255,0.48); }
.platform-section .section-label { color: rgba(100,140,255,0.85); }

/* ─── DEMO ─── */
.groundx-demo { margin-top: 56px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; overflow: hidden; }
.demo-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.07); overflow-x: auto; scrollbar-width: none; }
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tab { padding: 13px 20px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.32); cursor: pointer; transition: all 0.2s; white-space: nowrap; border: none; border-bottom: 2px solid transparent; background: none; font-family: var(--font); letter-spacing: 0.2px; }
.demo-tab:hover { color: rgba(255,255,255,0.68); }
.demo-tab.active { color: #fff; border-bottom-color: rgba(100,140,255,0.85); background: rgba(26,63,219,0.1); }
.demo-panel { display: none; }
.demo-panel.active { display: grid; grid-template-columns: 1fr 1fr; }
.demo-visual { background: #0d0d16; padding: 32px; min-height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,0.06); }

/* ─── DOCUMENT MOCKUPS ─── */
.doc-invoice { width: 280px; background: #f9f8f5; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.65); position: relative; }
.doc-invoice-header { background: #1a3fdb; padding: 16px 20px; display: flex; justify-content: space-between; align-items: flex-start; }
.doc-invoice-header h3 { font-size: 14px; font-weight: 800; letter-spacing: 2px; color: #fff; }
.inv-num { font-size: 9px; color: rgba(255,255,255,0.55); margin-top: 3px; font-weight: 400; }
.doc-invoice-body { padding: 16px 20px; }
.inv-row-head { font-size: 8px; color: #999; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 6px; display: flex; justify-content: space-between; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px; }
.inv-row { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 10px; color: #333; }
.inv-divider { height: 1px; background: #e0e0e0; margin: 8px 0; }
.inv-subtotal { display: flex; justify-content: space-between; font-size: 9px; color: #888; margin-bottom: 3px; }
.inv-total { display: flex; justify-content: space-between; align-items: center; background: #1a3fdb; margin: 12px -20px -16px; padding: 11px 20px; }
.inv-total-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.6); font-weight: 600; }
.inv-total-val { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }

/* Scan overlay */
.doc-scan-line { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(100,180,255,0.85), transparent); animation: scan-anim 2.5s ease-in-out infinite; pointer-events: none; z-index: 10; }
@keyframes scan-anim { 0%{top:0;opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{top:100%;opacity:0} }
.doc-highlight { position: absolute; border: 1.5px solid rgba(100,210,180,0.75); background: rgba(100,210,180,0.1); border-radius: 3px; animation: hl-pulse 3s ease-in-out infinite; }
@keyframes hl-pulse { 0%,100%{opacity:0} 30%,70%{opacity:1} }

/* Table mockup */
.doc-table { width: 280px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.65); }
.doc-table-header { background: #1e2d5c; padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.doc-table-dot { width: 8px; height: 8px; border-radius: 50%; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: 9px; }
.doc-table th { background: #e8f0fe; color: #1a3fdb; font-weight: 700; padding: 6px 10px; text-align: left; font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid #d0d8f0; }
.doc-table td { padding: 5px 10px; color: #333; border: 1px solid #eee; font-family: var(--font); }
.doc-table tr:nth-child(even) td { background: #f5f8ff; }
.doc-table tr.total-row td { background: #1a3fdb; color: #fff; font-weight: 700; }
.cell-hl { background: rgba(100,200,180,0.2) !important; border: 1px solid rgba(100,200,180,0.6) !important; }

/* Handwritten */
.doc-hw { width: 280px; background: #f5f0e8; border-radius: 4px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.65), 2px 2px 0 #d4c9a8; position: relative; }
.doc-hw::before { content: ''; position: absolute; left: 32px; top: 0; bottom: 0; width: 1px; background: rgba(220,130,130,0.4); }
.doc-hw-header { background: #e8e0cc; padding: 10px 14px 10px 40px; border-bottom: 1px solid #d4c9a8; }
.doc-hw-title { font-family: Georgia, serif; font-size: 11px; font-weight: 700; color: #5c4a2a; font-style: italic; }
.doc-hw-body { padding: 10px 14px 14px 40px; }
.doc-hw-line { font-family: Georgia, serif; font-size: 10px; font-style: italic; color: #2a2a3a; margin-bottom: 6px; line-height: 1.4; padding-bottom: 6px; border-bottom: 1px solid rgba(180,160,120,0.2); }
.hw-hl { background: rgba(255,200,50,0.38); border-radius: 2px; padding: 0 2px; }

/* Chart, larger so the bars and pie are readable */
.doc-chart { width: 340px; background: #13131e; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.7); padding: 22px; }
.doc-chart-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(100,140,255,0.85); font-weight: 700; margin-bottom: 16px; }
.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; margin-bottom: 8px; }
.chart-bar { flex: 1; border-radius: 4px 4px 0 0; }
.chart-bar-label { font-size: 9px; color: rgba(255,255,255,0.45); text-align: center; margin-top: 6px; font-family: var(--font); }
.chart-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 14px 0; }
.pie-row { display: flex; align-items: center; gap: 16px; }
.pie-legend-item { display: flex; align-items: center; gap: 7px; font-size: 10px; color: rgba(255,255,255,0.55); margin-bottom: 5px; font-family: var(--font); }
.pie-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Architecture, larger SVG for readability */
.doc-arch { width: 340px; background: #0a0f1e; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.7); padding: 20px; }
.doc-arch-title { font-size: 10px; color: rgba(100,140,255,0.85); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; font-weight: 700; }

/* Photo */
.doc-photo { width: 280px; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.7); position: relative; }
.photo-scene { background: linear-gradient(180deg, #1a2535 0%, #1a2535 45%, #2a1f18 45%, #2a1f18 100%); height: 190px; position: relative; }
.photo-meta { background: #0d0d16; padding: 9px 14px; }
.photo-meta-text { font-size: 8px; color: rgba(255,255,255,0.32); font-family: monospace; }
.damage-ring { position: absolute; border: 2px dashed rgba(255,70,70,0.8); border-radius: 50%; animation: dmg-pulse 2s ease-in-out infinite; }
@keyframes dmg-pulse { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }
.damage-tag { position: absolute; background: rgba(210,40,40,0.92); color: #fff; font-size: 7px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; font-family: var(--font); }

/* Demo output */
.demo-output { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.demo-output-label { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.28); font-weight: 600; }
.demo-output-title { font-size: 20px; font-weight: 700; color: #fff; margin-top: 2px; letter-spacing: -0.5px; }
.demo-output-desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; font-weight: 300; }
.demo-field { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 13px; }
.demo-field-key { font-size: 11px; color: rgba(100,140,255,0.85); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 5px; }
.demo-field-val { font-size: 14px; color: rgba(255,255,255,0.88); line-height: 1.5; font-weight: 400; }
.demo-acc-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,137,123,0.14); border: 1px solid rgba(0,187,173,0.28); border-radius: 20px; padding: 5px 12px; width: fit-content; }
.demo-acc-dot { width: 6px; height: 6px; background: #4DB6AC; border-radius: 50%; animation: pulse-dot 1.5s ease-in-out infinite; }
.demo-acc-text { font-size: 11px; color: #4DB6AC; font-weight: 600; }

/* ─── PLATFORM GRID ─── */
.platform-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; overflow: hidden; margin-top: 56px; }
.platform-cell { background: #111120; padding: 32px 28px; transition: background 0.2s; }
.platform-cell:hover { background: rgba(255,255,255,0.03); }
.platform-cell-icon { width: 38px; height: 38px; border-radius: 9px; background: rgba(26,63,219,0.2); border: 1px solid rgba(26,63,219,0.35); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.platform-cell-icon svg { width: 18px; height: 18px; stroke: rgba(100,140,255,0.85); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.platform-cell-title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: -0.3px; }
.platform-cell-text { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; font-weight: 300; }

/* ─── VERTICALS ─── */
.verticals-section { background: var(--white); }
.verticals-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 44px; }
.verticals-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: stretch; }
.vertical-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 52px 26px 28px;          /* extra top padding to clear the absolute status chip */
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  /* flex column so the action button can be pinned to the bottom (margin-top:auto) */
  display: flex;
  flex-direction: column;
  height: 100%;
}
.vertical-card .vertical-module { margin-top: auto; }
/* Status chips that sit in the top-right corner of each outcome card */
.vertical-status {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}
.vertical-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vertical-status--live {
  background: rgba(0,170,140,0.12);
  color: #008970;
  border: 1px solid rgba(0,170,140,0.3);
}
.vertical-status--live::before {
  background: #00b894;
  box-shadow: 0 0 0 2px rgba(0,184,148,0.25);
  animation: pulse-dot 2s ease-in-out infinite;
}
.vertical-status--soon {
  background: rgba(123,123,150,0.12);
  color: #5a5a72;
  border: 1px solid rgba(123,123,150,0.3);
}
.vertical-status--soon::before { background: #9b9bb0; }
.vertical-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
.vertical-card:hover { border-color: rgba(26,63,219,0.2); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(10,10,15,0.07); }
a[href*="getfraudx"] { display: block; text-decoration: none; color: inherit; }
a[href*="getfraudx"]:hover .vertical-card { border-color: rgba(26,63,219,0.2); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(10,10,15,0.07); }
a[href*="getfraudx"]:hover .vertical-card::before { transform: scaleX(1); }
.vertical-card:hover::before { transform: scaleX(1); }
.vertical-card-tag { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.vertical-card-title { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.4px; }
.vertical-card-text { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 18px; font-weight: 300; }
.vertical-module { display: inline-flex; align-items: center; gap: 5px; background: var(--ink); color: #fff; padding: 6px 13px; border-radius: 20px; font-size: 12px; font-weight: 600; text-decoration: none; letter-spacing: -0.1px; }

/* ─── TESTIMONIAL ─── */
.testimonial-section { background: #0d0d1a; text-align: center; padding: 80px 60px; }
.testimonial-quote { font-size: 31px; font-weight: 700; color: #fff; max-width: 680px; margin: 0 auto 26px; line-height: 1.25; letter-spacing: -0.8px; }
.testimonial-source { font-size: 14px; color: rgba(255,255,255,0.45); font-weight: 400; }
.testimonial-source strong { color: rgba(255,255,255,0.78); font-weight: 600; display: block; font-size: 16px; margin-bottom: 4px; letter-spacing: -0.2px; }

/* ─── CTA ─── */
.cta-section { background: var(--accent); padding: 96px 60px; text-align: center; }
.cta-h2 { font-size: 50px; font-weight: 800; letter-spacing: -2px; color: #fff; margin-bottom: 18px; line-height: 1.06; }
.cta-sub { font-size: 17px; color: rgba(255,255,255,0.62); margin-bottom: 36px; font-weight: 300; }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 14px; }
.btn-white { background: #fff; color: var(--accent); padding: 14px 28px; border-radius: 7px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.2s; letter-spacing: -0.2px; }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.2); }
.btn-ghost-white { color: rgba(255,255,255,0.82); font-size: 15px; font-weight: 400; border: 1px solid rgba(255,255,255,0.3); padding: 14px 28px; border-radius: 7px; text-decoration: none; transition: all 0.2s; }
.btn-ghost-white:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); }

/* ─── FOOTER ─── */
footer { background: #07070f; padding: 56px 60px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; }
.footer-brand-desc { font-size: 14px; color: rgba(255,255,255,0.32); line-height: 1.65; max-width: 280px; font-weight: 300; margin-top: 14px; }
.footer-col-title { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: rgba(255,255,255,0.22); margin-bottom: 16px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 14px; color: rgba(255,255,255,0.48); text-decoration: none; transition: color 0.2s; font-weight: 300; }
.footer-links a:hover { color: #fff; }
.footer-bottom { background: #07070f; border-top: 1px solid rgba(255,255,255,0.05); padding: 16px 60px; display: flex; align-items: center; justify-content: space-between; }
.footer-bottom-text { font-size: 12px; color: rgba(255,255,255,0.18); font-weight: 400; }
.footer-bottom-text a { color: rgba(255,255,255,0.18); text-decoration: none; }
.footer-bottom-text a:hover { color: rgba(255,255,255,0.45); }

/* Utility buttons */
.btn-sec-light { color: var(--ink-soft); font-size: 14px; font-weight: 400; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 13px 0; border-bottom: 1px solid var(--border-strong); transition: all 0.2s; }
.btn-sec-light:hover { color: var(--accent); border-color: var(--accent); }
.btn-sec-dark { color: rgba(255,255,255,0.52); font-size: 14px; font-weight: 400; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.18); transition: all 0.2s; }
.btn-sec-dark:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

/* ─── SCROLL ANIMATIONS ─── */
.fade-in { opacity: 0; transform: translateY(22px); transition: opacity 0.65s, transform 0.65s; }
.fade-in.visible { opacity: 1; transform: none; }

/* ─── NAV TOGGLE (mobile hamburger) ─── */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 6px;
  margin-left: 12px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 22px;
  background: rgba(255,255,255,0.85);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Marker on the "Request Demo" CTA when you're already on the demo page */
.nav-cta--current { background: var(--accent-2) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }

/* ════════════════════════════════════════════════════════ */
/* ─── REQUEST-A-DEMO PAGE ─── */
/* ════════════════════════════════════════════════════════ */
.demo-page { background: var(--ink); color: #fff; min-height: calc(100vh - 68px); padding: 80px 60px 96px; position: relative; overflow: hidden; }
.demo-page::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px; pointer-events: none;
}
.demo-page-grid { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }

/* Left intro */
.demo-page-intro { padding-top: 8px; }
.demo-page-h1 { font-family: var(--font); font-size: 56px; font-weight: 800; letter-spacing: -2.2px; line-height: 1.04; color: #fff; margin: 14px 0 24px; }
.demo-page-sub { font-size: 18px; color: rgba(255,255,255,0.58); line-height: 1.65; font-weight: 300; margin-bottom: 36px; max-width: 520px; }
.demo-page-bullets { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.demo-page-bullets li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255,255,255,0.78); font-weight: 300; }
.demo-bullet-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(100,140,255,0.85); flex-shrink: 0; }
.demo-page-trust { padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.08); }
.demo-page-trust-label { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.32); font-weight: 600; margin-bottom: 14px; }
.demo-page-trust-logos { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* Right form */
.demo-page-form-wrap {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 36px 36px 32px;
  backdrop-filter: blur(12px);
}
.demo-form { display: flex; flex-direction: column; gap: 22px; }
.demo-form-row { display: flex; flex-direction: column; gap: 22px; }
.demo-form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.demo-form-field { display: flex; flex-direction: column; gap: 6px; }
.demo-form-field label {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85);
  letter-spacing: 0.1px;
}
.demo-form-required { color: rgba(120,160,255,0.95); margin-left: 2px; }
.demo-form-optional { font-weight: 400; color: rgba(255,255,255,0.4); font-size: 12px; margin-left: 2px; }
.demo-form-hint { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; line-height: 1.5; }

.demo-form input[type="text"],
.demo-form input[type="email"],
.demo-form input[type="tel"],
.demo-form input[type="url"],
.demo-form input[type="number"],
.demo-form select,
.demo-form textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  padding: 12px 14px;
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  width: 100%;
}
.demo-form select { cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.55)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.demo-form textarea { resize: vertical; min-height: 110px; font-family: var(--font); }

.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus {
  outline: none;
  border-color: rgba(120,160,255,0.65);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(26,63,219,0.18);
}
.demo-form input::placeholder,
.demo-form textarea::placeholder { color: rgba(255,255,255,0.35); }
.demo-form-input--error,
.demo-form input.demo-form-input--error,
.demo-form select.demo-form-input--error,
.demo-form textarea.demo-form-input--error {
  border-color: rgba(255,120,120,0.75) !important;
  background: rgba(255,80,80,0.06) !important;
}
.demo-form-error { font-size: 12.5px; color: rgba(255,140,140,0.95); min-height: 0; margin-top: 2px; line-height: 1.4; }
.demo-form-error:empty { display: none; }

/* Captcha */
.demo-form-captcha-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 7px;
  padding: 8px 14px;
}
.demo-form-captcha-q { font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,0.88); flex-shrink: 0; }
.demo-form-captcha-row input {
  background: transparent !important; border: none !important; padding: 4px 0 !important;
  width: 80px !important; box-shadow: none !important;
  font-size: 15px !important;
}
.demo-form-captcha-row input:focus { box-shadow: none !important; background: transparent !important; }
.demo-form-captcha-refresh {
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,0.55); font-size: 18px; padding: 4px 8px;
  border-radius: 4px; transition: color 0.18s, background 0.18s;
  margin-left: auto;
}
.demo-form-captcha-refresh:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* Submit */
.demo-form-submit {
  margin-top: 6px;
  align-self: flex-start;
  position: relative;
  font-size: 15px;
  padding: 14px 28px;
  cursor: pointer;
  border: none;
}
.demo-form-submit:disabled { opacity: 0.7; cursor: wait; }
.demo-form-submit-spinner {
  display: none; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; margin-left: 8px;
  animation: demo-form-spin 0.7s linear infinite;
}
.demo-form-submit--loading .demo-form-submit-spinner { display: inline-block; }
.demo-form-submit--loading .demo-form-submit-label::after { content: '…'; }
@keyframes demo-form-spin { to { transform: rotate(360deg); } }

/* Status message */
.demo-form-status { font-size: 14px; line-height: 1.5; padding: 10px 14px; border-radius: 6px; min-height: 0; }
.demo-form-status:empty { display: none; padding: 0; }
.demo-form-status--info    { background: rgba(100,140,255,0.1); border: 1px solid rgba(100,140,255,0.25); color: rgba(180,200,255,0.95); }
.demo-form-status--success { background: rgba(0,180,140,0.12);   border: 1px solid rgba(0,200,150,0.3);  color: rgba(120,230,190,0.95); }
.demo-form-status--error   { background: rgba(255,80,80,0.1);    border: 1px solid rgba(255,120,120,0.3); color: rgba(255,160,160,0.95); }

/* ════════════════════════════════════════════════════════ */
/* ─── CASE STUDY PAGE ─── */
/* ════════════════════════════════════════════════════════ */
.case-study { background: var(--white); color: var(--ink); }

/* Hero */
.case-study-hero {
  background: var(--ink);
  color: #fff;
  padding: 80px 60px 96px;
  position: relative;
  overflow: hidden;
}
.case-study-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px; pointer-events: none;
}
.case-study-hero-inner { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; }

.case-study-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.case-study-eyebrow-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(100,140,255,0.95);
}
.case-study-eyebrow-divider { width: 24px; height: 1px; background: rgba(255,255,255,0.2); }
.case-study-eyebrow-customer {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.65); letter-spacing: 0.3px;
}
.case-study-eyebrow-logo {
  height: 22px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.case-study-h1 {
  font-family: var(--font);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.06;
  color: #fff;
  margin: 0 0 20px;
  max-width: 880px;
}
.case-study-deck {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255,255,255,0.65);
  max-width: 760px;
  margin: 0 0 48px;
}

/* Metadata strip */
.case-study-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.case-study-meta > div { display: flex; flex-direction: column; gap: 4px; }
.case-study-meta dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
  color: rgba(255,255,255,0.4);
  margin: 0;
}
.case-study-meta dd {
  font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.92); margin: 0; line-height: 1.4;
}

/* Body */
.case-study-body {
  background: var(--white);
  padding: 80px 60px 96px;
}
.case-study-prose,
.case-study-pullquote,
.case-study-stats {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.case-study-prose { padding: 0 0 8px; }
.case-study-prose p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 24px;
  font-weight: 300;
}
.case-study-prose p strong { color: var(--ink); font-weight: 600; }
.case-study-prose p em { font-style: italic; color: var(--ink); }

.case-study-h2 {
  font-size: 28px !important;
  letter-spacing: -0.8px !important;
  margin: 48px 0 20px;
  color: var(--ink);
}

/* Pull quote */
.case-study-pullquote {
  margin-top: 48px;
  margin-bottom: 48px;
  padding: 36px 40px;
  background: var(--surface);
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
}
.case-study-pullquote blockquote {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.4px;
  margin: 0 0 20px;
}
.case-study-pullquote figcaption { display: flex; flex-direction: column; gap: 2px; }
.case-study-pullquote figcaption strong {
  font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.1px;
}
.case-study-pullquote figcaption span {
  font-size: 13px; color: var(--ink-soft); font-weight: 400;
}

/* Stats */
.case-study-stats {
  margin-top: 56px; margin-bottom: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.case-study-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 22px;
}
.case-study-stat-num {
  font-family: var(--font);
  font-size: 30px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 12px;
}
.case-study-stat-label {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  font-weight: 400;
}

/* ════════════════════════════════════════════════════════ */
/* ─── NEWS PAGE ─── */
/* ════════════════════════════════════════════════════════ */
.news-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.news-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.news-item:hover {
  border-color: rgba(26,63,219,0.45);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(26,63,219,0.08);
}
.news-item--featured {
  border-color: rgba(26,63,219,0.35);
  background: linear-gradient(180deg, rgba(26,63,219,0.04), rgba(26,63,219,0));
}
.news-item-link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.news-item-meta {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--accent);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.news-item-pip {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.news-item-h3 {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin: 0;
  line-height: var(--lh-snug);
}
.news-item-excerpt {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  margin: 0;
}
.news-item-excerpt strong { color: var(--ink); font-weight: 700; }
.news-item-arrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
  transition: transform 0.2s;
}
.news-item--featured .news-item-arrow {
  font-size: 14px;
  letter-spacing: -0.1px;
}
.news-item:hover .news-item-arrow { transform: translateX(4px); }
.news-item-footer {
  font-size: 12px;
  color: var(--ink-soft);
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
}
.news-item-footer span + span::before {
  content: "·";
  margin: 0 12px;
  color: var(--ink-soft);
  opacity: 0.55;
}

/* ════════════════════════════════════════════════════════ */
/* ─── About section: text + decorative constellation column ─── *

/* ════════════════════════════════════════════════════════ */
/* ─── BULLET LISTS (used in GroundX Studio plug-in cards) ─── */

/* ════════════════════════════════════════════════════════ */
/* ─── TICKER: pause on hover so users can read items ─── */

/* ════════════════════════════════════════════════════════ */
/* ─── DEMO TABS: right-edge fade so users see scroll-cue ─── */
/* ════════════════════════════════════════════════════════ */
.demo-tabs { position: relative; }
.demo-tabs::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 1px;
  width: 36px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(13,13,22,0.85) 100%);
  opacity: 0.9;
}

/* Demo tab focus state (keyboard a11y) */
.demo-tab:focus-visible {
  outline: 2px solid rgba(100,140,255,0.85);
  outline-offset: -2px;
}

/* ════════════════════════════════════════════════════════ */
/* ─── About section: text + decorative constellation column ─── */
/* ════════════════════════════════════════════════════════ */
.about-story-row {
  display: grid;
  grid-template-columns: minmax(0, 760px) 1fr;
  gap: 60px;
  align-items: start;
}
.about-story-text { max-width: 760px; min-width: 0; }
.about-story-illustration {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
}
.about-constellation {
  width: 100%;
  max-width: 320px;
  height: auto;
  opacity: 0.85;
}

/* ════════════════════════════════════════════════════════ */
/* ─── BULLET LISTS (used in GroundX Studio plug-in cards) ─── */
/* ════════════════════════════════════════════════════════ */
.bullet-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bullet-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* ════════════════════════════════════════════════════════ */
/* ─── TICKER: pause on hover so users can read items ─── */
/* ════════════════════════════════════════════════════════ */
.ticker:hover .ticker-inner,
.ticker:focus-within .ticker-inner { animation-play-state: paused; }

/* ════════════════════════════════════════════════════════ */
/* ─── REDUCED MOTION: respect prefers-reduced-motion ─── */
/* Honors OS-level motion preference; cuts CPU and prevents */
/* nausea-trigger animations for sensitive users.            */
/* ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Hide the persistently-running ticker (no value when not animated) */
  .ticker { display: none; }
  /* Stop the pulse/scan/highlight visuals from holding final frames in awkward spots */
  .doc-scan-line, .doc-highlight, .damage-ring,
  .hero-eyebrow-dot, .demo-acc-dot { display: none; }
}/* ════════════════════════════════════════════════════════ */
/* ─── RESPONSIVE: MOBILE  max-width: 767px ─── */
/* Covers 320px (small phones) → 767px (pre-tablet).         */
/* clamp() lets type & spacing scale fluidly across the range.*/
/* ════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ─── NAV ─── */
  nav { padding: 0 clamp(14px, 4.5vw, 20px); height: 60px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 60px; left: 0; right: 0;
    background: rgba(10,10,15,0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links li { width: 100%; display: block !important; }
  .nav-links li a {
    display: block;
    padding: 13px clamp(14px, 4.5vw, 22px);
    font-size: 15px;
    color: rgba(255,255,255,0.78);
  }
  .nav-cta {
    display: block !important;
    margin: 8px clamp(14px, 4.5vw, 22px) 0;
    text-align: center;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
  .logo-wordmark { font-size: clamp(11px, 3.5vw, 14px); letter-spacing: 2.2px; }
  .logo-tagline  { font-size: clamp(6px, 1.8vw, 7px); }
  .nav-logo img  { height: clamp(22px, 6vw, 26px) !important; }

  /* ─── HERO ─── */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: clamp(34px, 6vw, 48px) clamp(14px, 4.5vw, 22px) clamp(28px, 5vw, 40px); }
  .hero-h1 { font-size: clamp(32px, 9.5vw, 44px); letter-spacing: -1.2px; line-height: 1.04; }
  .hero-sub { font-size: clamp(15px, 4vw, 17px); line-height: 1.6; max-width: 100%; }
  .hero-actions { flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
  .hero-actions .btn-primary { padding: 12px 20px; font-size: 14px; }
  .hero-actions .btn-ghost-light { font-size: 14px; }
  .hero-trust { gap: 10px; }
  .hero-logos { gap: 12px; flex-wrap: wrap; }
  .hero-right {
    padding: clamp(20px, 4vw, 36px) clamp(14px, 4.5vw, 22px) clamp(36px, 6vw, 56px);
    min-height: 400px;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .vi-stack { width: 100%; max-width: 380px; }
  .vi-stack > div { padding: 16px 10px 10px !important; }
  .vi-modules-row { grid-template-columns: 1fr; }
  .vi-stats { grid-template-columns: 1fr 1fr; }
  .hero-glow { width: clamp(220px, 60vw, 320px); height: clamp(220px, 60vw, 320px); }

  /* ─── SECTIONS ─── */
  section { padding: clamp(36px, 5.5vw, 48px) clamp(14px, 4.5vw, 22px); }
  .section-h2 { font-size: clamp(26px, 7.5vw, 34px); letter-spacing: -1px; line-height: 1.07; }
  .section-sub { font-size: clamp(15px, 4vw, 17px); max-width: 100%; }

  /* Inline-padded sections */
  #enterprise-imperative { padding: clamp(36px, 5.5vw, 56px) clamp(14px, 4.5vw, 22px) !important; }
  #security              { padding: clamp(34px, 5.5vw, 48px) clamp(14px, 4.5vw, 22px) !important; }
  #about                 { padding: clamp(34px, 5.5vw, 48px) clamp(14px, 4.5vw, 22px) !important; }
  #groundx-studio        { padding: clamp(34px, 5.5vw, 48px) clamp(14px, 4.5vw, 22px) !important; }
  .testimonial-section   { padding: clamp(28px, 5vw, 44px) clamp(14px, 4.5vw, 22px) !important; }
  .cta-section           { padding: clamp(40px, 5.5vw, 56px) clamp(14px, 4.5vw, 22px) !important; }

  /* ─── TYPE SCALE OVERRIDES ─── */
  /* Inline heading at 52px */
  #enterprise-imperative h2.section-h2[style*="font-size:52px"] {
    font-size: clamp(26px, 7.5vw, 34px) !important;
    letter-spacing: -1px !important;
  }
  /* Large stat/display numbers */
  #enterprise-imperative div[style*="font-size:42px"] {
    font-size: clamp(26px, 7vw, 34px) !important;
    white-space: normal !important;
  }
  #about div[style*="font-size:48px"] {
    font-size: clamp(30px, 8vw, 38px) !important;
    letter-spacing: -1.5px !important;
  }
  /* Prevent inline nowrap from causing horizontal scroll */
  [style*="white-space:nowrap"] { white-space: normal !important; }
  /* Bump small inline text for legibility */
  [style*="font-size:13px"][style*="line-height:1.6"],
  [style*="font-size:13px"][style*="line-height:1.65"],
  [style*="font-size:13px"][style*="color:var(--ink-soft)"],
  [style*="font-size:13px"][style*="line-height:1.5"] { font-size: 15px !important; }
  [style*="font-size:14px"][style*="line-height:1.6"],
  [style*="font-size:14px"][style*="line-height:1.65"],
  [style*="font-size:14px"][style*="line-height:1.5"] { font-size: 15px !important; }
  [style*="font-size:11px"][style*="line-height:1.4"]  { font-size: 13px !important; }
  [style*="font-size:12px"][style*="font-weight:700"][style*="color:var(--ink)"] { font-size: 14px !important; }
  [style*="font-size:11px"][style*="font-weight:700"][style*="line-height:1.2"] { font-size: 14px !important; }
  [style*="font-size:9px"][style*="color:var(--ghost)"]  { font-size: 11px !important; }

  /* ─── VI DEF CARDS ─── */
  .vi-section { grid-template-columns: 1fr; gap: 28px; }
  .vi-def-card-head { flex-wrap: wrap; gap: 8px; }
  .vi-def-card-tag  { order: -1; }

  /* ─── ENTERPRISE IMPERATIVE ─── */
  #enterprise-imperative > div.fade-in[style*="grid-template-columns:1fr 1fr;"][style*="gap:72px"] {
    grid-template-columns: 1fr !important; gap: 28px !important;
  }
  #enterprise-imperative > div.fade-in[style*="max-width:760px"] { max-width: 100% !important; }
  #enterprise-imperative h2.section-h2[style*="max-width:680px"] { max-width: 100% !important; }
  #enterprise-imperative p[style*="font-size:17px"] { font-size: 17px !important; }
  #enterprise-imperative > div.fade-in[style*="margin-bottom:72px"] { margin-bottom: 36px !important; }
  #enterprise-imperative > div.fade-in[style*="grid-template-columns:1fr 1fr;"] > div { padding: 26px 20px !important; }
  /* Format tiles → 2-col on mobile */
  #enterprise-imperative div[style*="grid-template-columns:1fr 1fr 1fr;gap:8px"] {
    grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  /* Border-left dividers → top when stacked */
  #enterprise-imperative div[style*="border-left"][style*="padding-left:40px"] {
    border-left: none !important; padding-left: 0 !important;
    border-top: 1px solid var(--border) !important; padding-top: 18px !important;
  }

  /* ─── PLATFORM DEMO ─── */
  .demo-panel.active { grid-template-columns: 1fr; }
  .demo-visual { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); min-height: 280px; padding: 22px; }
  .demo-tab { font-size: 12px; padding: 11px 14px; }
  .demo-output { padding: 22px; }
  .groundx-demo { margin-top: 28px; border-radius: 14px; }
  .demo-tabs::after { width: 24px; }

  /* ─── PLATFORM GRID ─── */
  .platform-grid { grid-template-columns: 1fr !important; }
  .platform-cell { padding: 26px 20px; }

  /* ─── GROUNDX STUDIO ─── */
  #groundx-studio div[style*="grid-template-columns:1fr 1fr;"] {
    grid-template-columns: 1fr !important; gap: 14px !important;
  }
  #groundx-studio div[style*="grid-template-columns:1fr 1fr;"] > div { padding: 26px 22px !important; }
  #groundx-studio h3[style*="font-size:22px"] { font-size: 20px !important; }
  #groundx-studio > div.fade-in[style*="margin-bottom:32px"] { margin-bottom: 22px !important; }
  #groundx-studio > div.fade-in[style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column; align-items: flex-start !important;
    gap: 16px !important; padding: 22px 24px !important;
  }
  #groundx-studio > div.fade-in[style*="display:flex"] > div[style*="text-align:right"] {
    text-align: left !important;
  }

  /* ─── VERTICALS ─── */
  .verticals-header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .verticals-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .vertical-card { padding: 24px 20px; }

  /* ─── SECURITY ─── */
  #security div[style*="grid-template-columns:1fr 1fr 1fr;"] {
    grid-template-columns: 1fr !important; gap: 14px !important;
  }
  #security div[style*="grid-template-columns:1fr 1fr 1fr;"] > div { padding: 26px 22px !important; }
  #security div[style*="border-left:1px solid rgba(255,255,255,0.06)"][style*="border-right:1px solid rgba(255,255,255,0.06)"] {
    border-left: none !important; border-right: none !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  /* ─── TESTIMONIAL ─── */
  .testimonial-quote { font-size: clamp(18px, 5.5vw, 22px); letter-spacing: -0.3px; }

  /* ─── CTA ─── */
  .cta-h2 { font-size: clamp(26px, 7.5vw, 32px); letter-spacing: -1px; }
  .cta-sub { font-size: clamp(15px, 4vw, 16px); }
  .cta-actions { flex-direction: column; gap: 12px; }
  .cta-actions a {
    width: 100%; max-width: 320px; text-align: center;
    justify-content: center; padding: 14px 22px; font-size: 15px;
  }

  /* ─── ABOUT ─── */
  .about-story-row { grid-template-columns: 1fr; gap: 24px; }
  .about-story-illustration { padding-top: 0; }
  .about-constellation { max-width: 200px; opacity: 0.5; }
  #about > div.fade-in[style*="max-width:760px"] { max-width: 100% !important; }
  #about p[style*="font-size:17px"] { font-size: 17px !important; }
  #about > div.fade-in[style*="margin-bottom:80px"] { margin-bottom: 44px !important; }
  #about div[style*="grid-template-columns:1fr 1fr;"],
  #about div[style*="grid-template-columns:1fr 1fr 1fr;"] {
    grid-template-columns: 1fr !important; gap: 14px !important;
  }
  #about div[style*="grid-template-columns:1fr 1fr 1fr;"] > div,
  #about div[style*="grid-template-columns:1fr 1fr;"]     > div { padding: 24px 20px !important; }
  #about div[style*="grid-template-columns:1fr 1fr 1fr;"] > div > div[style*="font-size:48px"] {
    font-size: clamp(30px, 8vw, 38px) !important;
  }

  /* ─── FOOTER ─── */
  footer {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: clamp(28px, 5vw, 40px) clamp(14px, 4.5vw, 22px);
  }
  .footer-bottom {
    padding: 14px clamp(14px, 4.5vw, 22px);
    flex-direction: column; gap: 6px; text-align: center;
  }

  /* ─── DEMO PAGE ─── */
  .demo-page { padding: clamp(32px, 5vw, 40px) clamp(14px, 4.5vw, 22px) clamp(44px, 6vw, 56px); }
  .demo-page-grid { grid-template-columns: 1fr; gap: 36px; }
  .demo-page-h1 { font-size: clamp(26px, 7.5vw, 34px); letter-spacing: -1.1px; }
  .demo-page-sub { font-size: clamp(15px, 4vw, 16px); max-width: 100%; }
  .demo-form-row--two { grid-template-columns: 1fr; gap: 22px; }
  .demo-page-form-wrap { padding: clamp(18px, 4vw, 24px) clamp(14px, 4vw, 20px); border-radius: 12px; }
  .demo-form-submit { width: 100%; text-align: center; justify-content: center; align-self: stretch; }
  .demo-page-trust-logos { gap: 18px; }

  /* ─── CASE STUDY ─── */
  .case-study-hero { padding: clamp(34px, 5.5vw, 48px) clamp(14px, 4.5vw, 22px) clamp(40px, 6vw, 56px); }
  .case-study-h1   { font-size: clamp(24px, 7vw, 32px); letter-spacing: -1px; }
  .case-study-deck { font-size: clamp(15px, 4vw, 16px); margin-bottom: 36px; }
  .case-study-meta { grid-template-columns: 1fr; gap: 18px; }
  .case-study-body { padding: clamp(34px, 5.5vw, 48px) clamp(14px, 4.5vw, 22px) clamp(44px, 6vw, 64px); }
  .case-study-h2   { font-size: clamp(20px, 5.5vw, 24px) !important; margin: 36px 0 16px; }
  .case-study-prose p { font-size: clamp(16px, 4vw, 17px); line-height: 1.7; }
  .case-study-pullquote { padding: clamp(18px, 4vw, 24px) clamp(14px, 4vw, 22px); margin: 36px 0; }
  .case-study-pullquote blockquote { font-size: clamp(17px, 4.5vw, 19px); }
  .case-study-stats   { grid-template-columns: 1fr; gap: 12px; margin: 36px 0; }
  .case-study-stat-num { font-size: clamp(22px, 6vw, 26px); }

  /* ─── DOC MOCKUPS ─── */
  .doc-invoice, .doc-table, .doc-hw { width: 100%; max-width: 280px; }
  .doc-chart, .doc-arch              { width: 100%; max-width: 320px; }
  .doc-photo                         { width: 100%; max-width: 280px; }
}

/* ════════════════════════════════════════════════════════ */
/* ─── RESPONSIVE: TABLET  768px – 1023px ─── */
/* ════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {

  /* ─── NAV ─── */
  nav { padding: 0 28px; height: 64px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: rgba(10,10,15,0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links li { width: 100%; display: block !important; }
  .nav-links li a { display: block; padding: 14px 28px; font-size: 15px; color: rgba(255,255,255,0.78); }
  .nav-cta { display: block !important; margin: 10px 28px 0; text-align: center; padding: 12px 20px !important; }

  /* ─── HERO ─── */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 64px 40px 56px; }
  .hero-h1 { font-size: 52px; letter-spacing: -1.8px; line-height: 1.04; }
  .hero-sub { font-size: 18px; max-width: 100%; }
  .hero-right { padding: 48px 40px 72px; min-height: 480px; border-left: none; border-top: 1px solid rgba(255,255,255,0.05); }
  .vi-stack { width: 100%; max-width: 420px; }
  .hero-glow { width: 420px; height: 420px; }

  /* ─── SECTIONS ─── */
  section { padding: 64px 40px; }
  .section-h2 { font-size: 42px; letter-spacing: -1.4px; }
  .section-sub { font-size: 18px; max-width: 100%; }

  /* Inline-padded sections */
  #enterprise-imperative { padding: 72px 40px !important; }
  #security              { padding: 64px 40px !important; }
  #about                 { padding: 64px 40px !important; }
  #groundx-studio        { padding: 64px 40px !important; }
  .testimonial-section   { padding: 56px 40px !important; }
  .cta-section           { padding: 72px 40px !important; }

  /* ─── TYPE OVERRIDES ─── */
  #enterprise-imperative h2.section-h2[style*="font-size:52px"] {
    font-size: 40px !important; letter-spacing: -1.4px !important;
  }
  #enterprise-imperative > div.fade-in[style*="max-width:760px"] { max-width: 100% !important; }
  #enterprise-imperative h2.section-h2[style*="max-width:680px"] { max-width: 100% !important; }
  #enterprise-imperative p[style*="font-size:17px"] { font-size: 18px !important; }
  #about > div.fade-in[style*="max-width:760px"]    { max-width: 100% !important; }
  #about p[style*="font-size:17px"] { font-size: 18px !important; }
  [style*="font-size:13px"][style*="line-height:1.6"],
  [style*="font-size:13px"][style*="line-height:1.65"],
  [style*="font-size:13px"][style*="color:var(--ink-soft)"],
  [style*="font-size:13px"][style*="line-height:1.5"] { font-size: 16px !important; }
  [style*="font-size:14px"][style*="line-height:1.6"],
  [style*="font-size:14px"][style*="line-height:1.65"],
  [style*="font-size:14px"][style*="line-height:1.5"] { font-size: 16px !important; }
  [style*="font-size:11px"][style*="line-height:1.4"] { font-size: 13px !important; }
  [style*="font-size:12px"][style*="font-weight:700"][style*="color:var(--ink)"] { font-size: 14px !important; }
  [style*="font-size:11px"][style*="font-weight:700"][style*="line-height:1.2"] { font-size: 14px !important; }
  [style*="font-size:9px"][style*="color:var(--ghost)"] { font-size: 11px !important; }
  [style*="font-size:20px"][style*="font-weight:700"] { font-size: 22px !important; }
  [style*="font-size:22px"][style*="font-weight:700"] { font-size: 24px !important; }

  /* ─── VI SECTION ─── */
  .vi-section { grid-template-columns: 1fr; gap: 40px; }

  /* ─── ENTERPRISE IMPERATIVE ─── */
  #enterprise-imperative > div.fade-in[style*="grid-template-columns:1fr 1fr;"][style*="gap:72px"] {
    grid-template-columns: 1fr !important; gap: 36px !important;
  }
  #enterprise-imperative > div.fade-in[style*="margin-bottom:72px"] { margin-bottom: 36px !important; }
  #enterprise-imperative div[style*="grid-template-columns:1fr 1fr 1fr;gap:8px"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #enterprise-imperative > div.fade-in[style*="grid-template-columns:1fr 1fr;"] > div { padding: 26px 22px !important; }
  #enterprise-imperative div[style*="border-left"][style*="padding-left:40px"] {
    border-left: none !important; padding-left: 0 !important;
    border-top: 1px solid var(--border) !important; padding-top: 18px !important;
  }

  /* ─── PLATFORM DEMO ─── */
  .demo-panel.active { grid-template-columns: 1fr; }
  .demo-visual { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); min-height: 340px; }

  /* ─── PLATFORM GRID (3 → 2 col) ─── */
  .platform-grid { grid-template-columns: 1fr 1fr !important; }

  /* ─── GROUNDX STUDIO ─── */
  #groundx-studio div[style*="grid-template-columns:1fr 1fr;"] {
    grid-template-columns: 1fr !important; gap: 20px !important;
  }
  #groundx-studio div[style*="grid-template-columns:1fr 1fr;"] > div { padding: 26px 28px !important; }
  #groundx-studio h3[style*="font-size:22px"] { font-size: 22px !important; }
  #groundx-studio > div.fade-in[style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column; align-items: flex-start !important;
    gap: 16px !important; padding: 22px 28px !important;
  }
  #groundx-studio > div.fade-in[style*="display:flex"] > div[style*="text-align:right"] {
    text-align: left !important;
  }

  /* ─── VERTICALS (3 → 2 col) ─── */
  .verticals-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .verticals-grid { grid-template-columns: 1fr 1fr !important; }

  /* ─── SECURITY (3 → 2 col) ─── */
  #security div[style*="grid-template-columns:1fr 1fr 1fr;"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #security div[style*="border-left:1px solid rgba(255,255,255,0.06)"][style*="border-right:1px solid rgba(255,255,255,0.06)"] {
    border-left: none !important; border-right: none !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  /* ─── TESTIMONIAL ─── */
  .testimonial-quote { font-size: 26px; letter-spacing: -0.5px; }

  /* ─── CTA ─── */
  .cta-h2 { font-size: 42px; letter-spacing: -1.4px; }

  /* ─── ABOUT ─── */
  .about-story-row { grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; }
  .about-constellation { max-width: 220px; opacity: 0.7; }
  #about > div.fade-in[style*="margin-bottom:80px"] { margin-bottom: 44px !important; }
  #about div[style*="grid-template-columns:1fr 1fr 1fr;"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #about div[style*="grid-template-columns:1fr 1fr 1fr;"] > div { padding: 24px 22px !important; }
  #about div[style*="grid-template-columns:1fr 1fr 1fr;"] > div > div[style*="font-size:48px"] {
    font-size: 38px !important;
  }

  /* ─── FOOTER ─── */
  footer { padding: 48px 40px; gap: 36px; }
  .footer-bottom { padding: 16px 40px; }

  /* ─── DEMO PAGE ─── */
  .demo-page { padding: 56px 40px 72px; }
  .demo-page-grid { grid-template-columns: 1fr; gap: 48px; }
  .demo-page-h1 { font-size: 44px; letter-spacing: -1.6px; }
  .demo-page-sub { font-size: 17px; max-width: 100%; }
  .demo-page-form-wrap { padding: 28px 26px 26px; }

  /* ─── CASE STUDY ─── */
  .case-study-hero { padding: 64px 40px 72px; }
  .case-study-h1   { font-size: 42px; letter-spacing: -1.5px; }
  .case-study-deck { font-size: 17px; }
  .case-study-meta { grid-template-columns: 1fr 1fr; gap: 22px; }
  .case-study-body { padding: 64px 40px 80px; }
  .case-study-stats { grid-template-columns: 1fr 1fr; }
  .case-study-pullquote blockquote { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════ */
/* ─── RESPONSIVE: DESKTOP  min-width: 1024px ─── */
/* Default styles are desktop-first; this block ensures     */
/* nav and grids are explicitly set for 1024px+.            */
/* ════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Hamburger hidden at full desktop */
  .nav-toggle { display: none; }

  /* Ensure 3-col grids are always 3-col at desktop */
  .verticals-grid { grid-template-columns: repeat(3, 1fr); }
  .platform-grid  { grid-template-columns: 1fr 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════ */
/* ─── RESPONSIVE: LARGE DESKTOP  min-width: 1440px ─── */
/* Center content at ≤1320px so 1440px, 1920px, and wider  */
/* monitors don't stretch text lines uncomfortably.         */
/* Sections keep full-bleed backgrounds; only horizontal    */
/* padding scales up proportionally.                        */
/* ════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {

  /* Scale horizontal padding to keep content ≤1320px wide */
  nav {
    padding-left:  max(60px, calc((100vw - 1320px) / 2));
    padding-right: max(60px, calc((100vw - 1320px) / 2));
  }
  section {
    padding-left:  max(60px, calc((100vw - 1320px) / 2));
    padding-right: max(60px, calc((100vw - 1320px) / 2));
  }
  footer {
    padding-left:  max(60px, calc((100vw - 1320px) / 2));
    padding-right: max(60px, calc((100vw - 1320px) / 2));
  }
  .footer-bottom {
    padding-left:  max(60px, calc((100vw - 1320px) / 2));
    padding-right: max(60px, calc((100vw - 1320px) / 2));
  }

  /* Inline-padded sections */
  #enterprise-imperative {
    padding-left:  max(60px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1320px) / 2)) !important;
  }
  #security {
    padding-left:  max(60px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1320px) / 2)) !important;
  }
  #about {
    padding-left:  max(60px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1320px) / 2)) !important;
  }
  #groundx-studio {
    padding-left:  max(60px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1320px) / 2)) !important;
  }
  .testimonial-section {
    padding-left:  max(60px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1320px) / 2)) !important;
  }
  .cta-section {
    padding-left:  max(60px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1320px) / 2)) !important;
  }
  .demo-page {
    padding-left:  max(60px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1320px) / 2)) !important;
  }
  .case-study-hero {
    padding-left:  max(60px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1320px) / 2)) !important;
  }
  .case-study-body {
    padding-left:  max(60px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 1320px) / 2)) !important;
  }

  /* Hero columns: distribute outer padding so neither column stretches */
  .hero-left {
    padding-left:  max(60px, calc((100vw - 1320px) / 4));
    padding-right: 80px;
  }
  .hero-right {
    padding-right: max(60px, calc((100vw - 1320px) / 4));
    padding-left:  60px;
  }

  /* Type boost for large monitors */
  .hero-h1    { font-size: 68px; }
  .section-h2 { font-size: 52px; }
}