/* ==========================================================================
   ATHENALYTIX — marketing site design system
   "Command-room editorial": deep slate-navy atmosphere, blue signal accent,
   Montserrat display / Cabin body / mono data-labels.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Cabin:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* brand */
  --blue: #1583f6;
  --blue-hover: #0d6dd8;
  --blue-soft: #6cb2ff;
  --navy: #003174;
  --ink: #1a2030;          /* darkest brand slate */
  --slate-900: #161c28;    /* site-darkest atmospheric */
  --slate-800: #1d2433;
  --slate-700: #252c39;    /* app dark bg */
  --slate-600: #2d3748;
  --slate-500: #404354;
  --paper: #ffffff;
  --paper-tint: #f7fafc;
  --paper-edge: #e3e9f0;

  /* text on dark */
  --t-bright: #ffffff;
  --t-body: #d2dbed;
  --t-mute: #9aa6bd;
  --t-faint: #6b7894;

  /* text on light */
  --tl-head: #1a2030;
  --tl-body: #2d3748;
  --tl-mute: #5a6378;

  /* semantic (from Minerva tokens) */
  --ok: #2ea35a;
  --warn: #f7630c;
  --bad: #d93a20;
  --gold: #f5a524;

  --font-display: "Montserrat", sans-serif;
  --font-body: "Cabin", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --font-app: "Inter", system-ui, sans-serif;

  --max: 1160px;
  --radius: 12px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--t-body);
  background: var(--slate-900);
  line-height: 1.6;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--t-bright); line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
::selection { background: rgba(21, 131, 246, 0.35); color: #fff; }

/* ------------------------------------------------------------------ utils */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--blue); flex: none; }
.light .eyebrow { color: var(--blue); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 15.5px;
  padding: 15px 30px; border-radius: 9px; border: 0; cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff !important; box-shadow: 0 8px 24px rgba(21, 131, 246, 0.32); }
.btn-primary:hover { background: var(--blue-hover); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(21, 131, 246, 0.42); }
.btn-ghost { background: transparent; color: var(--t-body) !important; border: 1px solid rgba(210, 219, 237, 0.28); }
.btn-ghost:hover { border-color: rgba(210, 219, 237, 0.65); color: #fff !important; transform: translateY(-2px); }
.light .btn-ghost { color: var(--tl-head) !important; border-color: #c6cfdd; }
.light .btn-ghost:hover { border-color: var(--ink); }
.btn .arr { transition: transform 0.18s ease; }
.btn:hover .arr { transform: translateX(4px); }

/* sections */
.band { position: relative; padding: 120px 0; }
.band.light { background: var(--paper); color: var(--tl-body); }
.band.light h1, .band.light h2, .band.light h3, .band.light h4 { color: var(--tl-head); }
.band.tint { background: var(--paper-tint); color: var(--tl-body); }
.band.tint h2, .band.tint h3, .band.tint h4 { color: var(--tl-head); }

.h-xl { font-size: clamp(38px, 5.6vw, 68px); font-weight: 800; }
.h-lg { font-size: clamp(30px, 3.8vw, 46px); font-weight: 700; }
.h-md { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; }
.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--t-mute); }
.light .lede, .tint .lede { color: var(--tl-mute); }

/* atmosphere layers */
.dotgrid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.glow-tr::after, .glow-bl::after {
  content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%;
  pointer-events: none; filter: blur(20px);
}
.glow-tr::after { top: -220px; right: -180px; background: radial-gradient(circle, rgba(21,131,246,0.17) 0%, transparent 65%); }
.glow-bl::after { bottom: -220px; left: -180px; background: radial-gradient(circle, rgba(0,49,116,0.5) 0%, transparent 65%); }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.1s; } .rv-d2 { transition-delay: 0.2s; }
.rv-d3 { transition-delay: 0.3s; } .rv-d4 { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(22, 28, 40, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,0.07);
}
.site-header .wrap { width: 100%; display: flex; align-items: center; gap: 40px; }
/* The brand lockup is the real logo artwork (owl glyph + wordmark), drawn as
   vector so it stays crisp from the 26px header all the way up to the scaled
   hero. The tagline sits beneath it rather than beside it, because the
   wordmark is part of the artwork now. */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; }
.brand-logo { height: 26px; width: auto; display: block; }
.brand-tag { font-family: var(--font-mono); font-weight: 400; font-size: 8.5px; letter-spacing: 0.28em; color: var(--t-faint); text-transform: uppercase; white-space: nowrap; }
/* app mockups and the CTA still use the owl glyph on its own */
.app-logo img { height: 18px; width: auto; }
.cta-owl { height: 54px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > a, .nav-drop > button {
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  color: var(--t-body); text-decoration: none; padding: 9px 14px; border-radius: 7px;
  background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.15s, background 0.15s;
}
.nav > a:hover, .nav-drop > button:hover, .nav > a.active { color: #fff; background: rgba(255,255,255,0.07); }
.nav .btn { margin-left: 14px; padding: 11px 22px; font-size: 14.5px; }

.nav-drop { position: relative; }
.nav-drop .caret { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }
.nav-drop.open .caret { transform: rotate(225deg) translateY(-1px); }
.drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 300px; background: #1d2433; border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; padding: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.nav-drop.open .drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop-menu a { display: block; padding: 12px 14px; border-radius: 8px; text-decoration: none; transition: background 0.15s; }
.drop-menu a:hover { background: rgba(21,131,246,0.12); }
.drop-menu .dm-t { display: block; font-weight: 600; font-size: 15px; color: #fff; white-space: nowrap; }
.drop-menu .dm-s { display: block; font-size: 13px; color: var(--t-mute); margin-top: 2px; line-height: 1.45; white-space: nowrap; }

.nav-burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-burger span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1020px) {
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: rgba(22,28,40,0.98); backdrop-filter: blur(10px);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 24px 28px;
    display: none; overflow-y: auto;
  }
  .nav-open .nav { display: flex; }
  .nav > a, .nav-drop > button { font-size: 18px; padding: 14px 12px; width: 100%; justify-content: space-between; }
  .nav-drop .drop-menu { position: static; transform: none; opacity: 1; visibility: visible; display: none; box-shadow: none; border: 0; background: rgba(255,255,255,0.04); margin: 4px 0 8px; }
  .nav-drop.open .drop-menu { display: block; transform: none; }
  .nav .btn { margin: 18px 0 0; justify-content: center; }
  .nav-burger { display: block; }
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  padding: calc(var(--header-h) + 70px) 0 90px; overflow: hidden;
  background: linear-gradient(150deg, #1d2433 0%, #252c39 45%, #0d2147 100%);
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.38; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,28,40,0.55) 0%, rgba(22,28,40,0.78) 70%, var(--slate-900) 100%); }
.hero .wrap { position: relative; }
/* ---------- hero brand that docks into the header on scroll ----------
   The hero lockup is drawn at its FULL size and only ever scales DOWN to meet
   the header. Scaling up would let the compositor stretch a raster it cached
   at the small docked size, which is what made the logo come back blurry
   after scrolling away and back. Every child is sized as --k multiples of the
   header lockup, so scale 1/--k lands on it exactly.

   No will-change here on purpose: pinning it to a cached layer reintroduces
   the same staleness. The element is one small vector, so repainting is cheap. */
.hero-brand-slot { --k: 2.3; height: calc(26px * var(--k) + 8.5px * var(--k) + 4px * var(--k) + 8px); margin-bottom: 10px; }
.hero-brand { --k: 2.3; transform-origin: left top; gap: calc(4px * var(--k)); cursor: default; backface-visibility: hidden; }
.hero-brand .brand-logo { height: calc(26px * var(--k)); }
.hero-brand .brand-tag { font-size: calc(8.5px * var(--k)); letter-spacing: 0.28em; }
/* While the hero lockup is still in flight, the header keeps its own copy
   hidden so the two never render at once. */
.brand-morph .site-header .brand { opacity: 0; pointer-events: none; }
.brand-morph.brand-docked .site-header .brand { opacity: 1; pointer-events: auto; }
.brand-morph.brand-docked .hero-brand { visibility: hidden; }
@media (max-width: 900px) { .hero-brand-slot, .hero-brand { --k: 1.75; } }
@media (max-width: 560px) { .hero-brand-slot, .hero-brand { --k: 1.35; } }
/* No morph without motion: the hero lockup is simply hidden and the header
   keeps its normal logo. */
@media (prefers-reduced-motion: reduce) {
  .hero-brand-slot { display: none; }
  .brand-morph .site-header .brand { opacity: 1; }
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue-soft); border: 1px solid rgba(108,178,255,0.3); border-radius: 100px;
  padding: 8px 18px; margin-bottom: 30px; background: rgba(21,131,246,0.08);
}
.hero-kicker .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pulse 2.2s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21,131,246,0.55); }
  50% { box-shadow: 0 0 0 7px rgba(21,131,246,0); }
}
.hero h1 { max-width: 900px; }
.hero h1 .accent { color: var(--blue-soft); position: relative; white-space: nowrap; }
.hero h1 .accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.1em;
  background: linear-gradient(90deg, var(--blue), transparent); border-radius: 3px;
  transform: scaleX(0); transform-origin: left; animation: underline 1s 1.1s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes underline { to { transform: scaleX(1); } }
.hero .lede { max-width: 660px; margin: 30px 0 42px; }
.hero-ctas { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* staggered hero load */
.hero .stagger { opacity: 0; transform: translateY(26px); animation: rise 0.9s cubic-bezier(0.22,1,0.36,1) forwards; }
.hero .stagger:nth-child(1) { animation-delay: 0.05s; }
.hero .stagger:nth-child(2) { animation-delay: 0.18s; }
.hero .stagger:nth-child(3) { animation-delay: 0.32s; }
.hero .stagger:nth-child(4) { animation-delay: 0.46s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero-strip {
  position: relative; margin-top: 84px; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-stat { padding: 26px 26px 0 0; }
.hero-stat .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.8vw, 38px); color: #fff; letter-spacing: -0.02em; }
.hero-stat .l { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-faint); margin-top: 6px; line-height: 1.5; }
@media (max-width: 800px) { .hero-strip { grid-template-columns: repeat(2, 1fr); } .hero { min-height: 0; } }

/* ------------------------------------------------------------------ cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; gap: 40px; } }

.svc-card {
  position: relative; background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(26,32,48,0.13); }
.svc-img { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.svc-card:hover .svc-img img { transform: scale(1.06); }
.svc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(26,32,48,0.35)); }
.svc-body { padding: 28px 30px 32px; }
.svc-num { font-family: var(--font-mono); font-size: 12px; color: var(--blue); letter-spacing: 0.2em; margin-bottom: 10px; }
.svc-body h3 { font-size: 21px; margin-bottom: 12px; }
.svc-body p { font-size: 15.5px; color: var(--tl-mute); line-height: 1.6; }

/* feature card on dark */
.feat {
  background: rgba(255,255,255,0.028); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); padding: 34px 30px;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  position: relative; overflow: hidden;
}
.feat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), transparent 70%);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.feat:hover { transform: translateY(-5px); border-color: rgba(21,131,246,0.4); background: rgba(21,131,246,0.05); }
.feat:hover::before { transform: scaleX(1); }
.feat .ic {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(21,131,246,0.13); border: 1px solid rgba(21,131,246,0.28); margin-bottom: 22px;
}
.feat .ic svg { width: 23px; height: 23px; stroke: var(--blue-soft); }
.feat h3 { font-size: 19px; margin-bottom: 11px; }
.feat p { font-size: 15px; color: var(--t-mute); line-height: 1.62; }
.feat .tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue-soft); background: rgba(21,131,246,0.12); border-radius: 100px; padding: 4px 11px; margin-top: 16px; }

/* numbered belief items (light) */
.belief { position: relative; padding-top: 22px; }
.belief::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--blue); }
.belief .num { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--blue); letter-spacing: 0.22em; margin-bottom: 14px; }
.belief h3 { font-size: 21px; margin-bottom: 13px; }
.belief p { font-size: 15.5px; color: var(--tl-mute); line-height: 1.65; }

/* ------------------------------------------------------------------ section head */
.sec-head { max-width: 780px; margin-bottom: 64px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head.center .eyebrow::before { display: none; }
.sec-head h2 { margin-bottom: 18px; }
.sec-head p { font-size: 17.5px; line-height: 1.6; color: var(--t-mute); }
.light .sec-head p, .tint .sec-head p { color: var(--tl-mute); }

/* ------------------------------------------------------------------ marquee */
.marquee-band { background: var(--ink); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 18px 0; overflow: hidden; }
.marquee { display: flex; gap: 64px; width: max-content; animation: marquee 36s linear infinite; }
.marquee span { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t-faint); display: flex; align-items: center; gap: 64px; white-space: nowrap; }
.marquee span i { font-style: normal; color: var(--blue); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ CTA band */
.cta-band {
  position: relative; overflow: hidden; text-align: center; padding: 130px 0;
  background: radial-gradient(circle at 50% 0%, rgba(21,131,246,0.16) 0%, transparent 55%), linear-gradient(160deg, var(--slate-600) 0%, var(--slate-500) 50%, #0d2147 100%);
}
.cta-band h2 { margin-bottom: 20px; }
.cta-band .lede { max-width: 620px; margin: 0 auto 44px; }
.cta-owl { height: 54px; width: auto; opacity: 0.92; margin: 0 auto 30px; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: #11161f; border-top: 1px solid rgba(255,255,255,0.06); padding: 72px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand img { height: 30px; width: auto; margin-bottom: 18px; }
.foot-brand p { font-size: 14.5px; color: var(--t-faint); max-width: 300px; line-height: 1.65; }
.foot-col h4 { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t-faint); margin-bottom: 20px; }
.foot-col a { display: block; font-size: 15px; color: var(--t-mute); padding: 6px 0; transition: color 0.15s; }
.foot-col a:hover { color: #fff; }
.foot-base { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 30px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--t-faint); }
.foot-base .mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; }

/* ------------------------------------------------------------------ contact form */
.form-card {
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 40px; text-align: left;
  backdrop-filter: blur(6px);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.fg { margin-bottom: 18px; }
.fg label { display: block; font-size: 13.5px; font-weight: 600; color: var(--t-body); margin-bottom: 8px; letter-spacing: 0.02em; }
.fg input, .fg select, .fg textarea {
  width: 100%; background: rgba(255,255,255,0.06); color: #fff;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 9px;
  padding: 13px 15px; font-size: 15px; font-family: var(--font-body);
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.fg select option { background: var(--slate-800); }
.fg input::placeholder, .fg textarea::placeholder { color: var(--t-faint); }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  outline: none; border-color: var(--blue); background: rgba(255,255,255,0.09);
  box-shadow: 0 0 0 3px rgba(21,131,246,0.22);
}
.form-error {
  display: none; margin: 0 0 16px; padding: 12px 14px; border-radius: 9px;
  background: rgba(217, 58, 32, 0.12); border: 1px solid rgba(217, 58, 32, 0.4);
  color: #f0a08c; font-size: 14.5px; line-height: 1.5;
}
.form-error.show { display: block; }
.form-card button[type="submit"][disabled] { opacity: 0.65; cursor: default; transform: none; }
.form-note { font-size: 13.5px; color: var(--t-faint); margin-top: 18px; }
.form-note a { color: var(--blue-soft); text-decoration: underline; }
.form-success { display: none; text-align: center; padding: 40px 10px; }
.form-success.show { display: block; }
.form-success .ok-ring { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; border: 2px solid var(--ok); display: grid; place-items: center; color: var(--ok); font-size: 28px; }

/* ------------------------------------------------------------------ page hero (interior pages) */
.page-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + 96px) 0 96px;
  background: radial-gradient(circle at 18% 25%, rgba(21,131,246,0.14) 0%, transparent 50%), linear-gradient(150deg, #1d2433 0%, #252c39 50%, #0d2147 100%);
}
.page-hero h1 { max-width: 860px; }
.page-hero .lede { max-width: 680px; margin-top: 26px; }

/* breadcrumb-ish persona switcher */
.persona-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 44px; }
.persona-nav a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-mute); border: 1px solid rgba(255,255,255,0.14); border-radius: 100px;
  padding: 9px 18px; transition: all 0.18s;
}
.persona-nav a:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.persona-nav a.on { color: #fff; background: rgba(21,131,246,0.18); border-color: var(--blue); }

/* checklist */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding: 9px 0 9px 34px; font-size: 16px; line-height: 1.55; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 19px; height: 19px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9' fill='none' stroke='%231583f6' stroke-width='1.4'/><path d='M6 10.5l2.6 2.6L14 7.5' stroke='%231583f6' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.check-list li strong { color: inherit; }
.band:not(.light):not(.tint) .check-list li strong { color: #fff; }

/* pain/solution two-col rows */
.ps-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 56px 0; border-top: 1px solid rgba(26,32,48,0.09); }
.ps-row:last-child { border-bottom: 1px solid rgba(26,32,48,0.09); }
@media (max-width: 960px) { .ps-row { grid-template-columns: 1fr; gap: 36px; } }

/* stat chips */
.chip-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 100px; padding: 8px 16px; color: var(--t-mute);
}
.chip b { color: var(--blue-soft); font-weight: 600; }

/* ------------------------------------------------------------------ pricing */
.toggle {
  display: inline-flex; padding: 5px; background: #eef2f7; border: 1px solid var(--paper-edge);
  border-radius: 100px; margin-bottom: 56px;
}
.toggle button {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--tl-mute);
  background: none; border: 0; border-radius: 100px; padding: 11px 22px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; transition: all 0.2s;
}
.toggle button.active { background: var(--ink); color: #fff; box-shadow: 0 2px 10px rgba(26,32,48,0.22); }
.save-pill { font-family: var(--font-mono); font-size: 10px; padding: 3px 9px; background: rgba(21,131,246,0.14); color: var(--blue); border-radius: 100px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.toggle button.active .save-pill { background: rgba(108,178,255,0.25); color: var(--blue-soft); }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; max-width: 1180px; margin: 0 auto; text-align: left; }
@media (max-width: 980px) { .price-grid { grid-template-columns: 1fr; max-width: 480px; } .price-card.featured { transform: none !important; } }
.price-card {
  background: #fff; border: 1px solid var(--paper-edge); border-radius: 16px;
  padding: 40px 32px 34px; display: flex; flex-direction: column; position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.price-card:hover { transform: translateY(-5px); box-shadow: 0 24px 52px rgba(26,32,48,0.11); }
.price-card.featured { border: 2px solid var(--blue); box-shadow: 0 22px 56px rgba(21,131,246,0.2); transform: translateY(-14px); }
.price-card.featured:hover { transform: translateY(-19px); }
.price-pill {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; padding: 7px 18px; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 100px; white-space: nowrap;
}
.price-card h3 { font-size: 26px; margin-bottom: 10px; }
.price-aud { color: var(--tl-mute); font-size: 14.5px; margin-bottom: 26px; min-height: 64px; line-height: 1.5; }
.price-num { font-family: var(--font-display); font-size: 38px; font-weight: 800; color: var(--tl-head); letter-spacing: -0.02em; line-height: 1; }
.price-num small { font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--tl-mute); letter-spacing: 0; }
.price-note { font-size: 13.5px; color: var(--tl-mute); margin: 10px 0 22px; line-height: 1.5; }
.price-note .save { color: var(--blue); font-weight: 700; }
.trial-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--blue); font-weight: 600; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.14em; }
.price-card hr { border: 0; height: 1px; background: var(--paper-edge); margin: 0 0 22px; }
.price-tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.price-list { list-style: none; padding: 0; margin: 0 0 32px; flex-grow: 1; }
.price-list li { position: relative; padding: 7px 0 7px 30px; font-size: 15px; color: var(--tl-body); line-height: 1.5; }
.price-list li::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 17px; height: 17px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' stroke='%231583f6' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.price-list li strong { color: var(--tl-head); }
.price-cta { display: block; text-align: center; padding: 14px 24px; border-radius: 9px; font-weight: 600; font-size: 15px; transition: all 0.2s; }
.price-card:not(.featured) .price-cta { color: var(--blue) !important; border: 1.5px solid var(--blue); }
.price-card:not(.featured) .price-cta:hover { background: var(--blue); color: #fff !important; }
.price-card.featured .price-cta { background: var(--blue); color: #fff !important; }
.price-card.featured .price-cta:hover { background: var(--blue-hover); }
[data-billing="monthly"] .annual-only { display: none; }
[data-billing="annual"] .monthly-only { display: none; }
.price-foot { max-width: 720px; margin: 56px auto 0; text-align: center; font-size: 14.5px; color: var(--tl-mute); line-height: 1.65; }
.price-foot a { text-decoration: underline; font-weight: 600; }

/* ------------------------------------------------------------------ FAQ */
.faq-list { max-width: 840px; margin: 0 auto; }
.faq-item { border-top: 1px solid rgba(26,32,48,0.12); }
.faq-item:last-child { border-bottom: 1px solid rgba(26,32,48,0.12); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative; padding: 26px 52px 26px 0;
  font-family: var(--font-display); font-size: 17.5px; font-weight: 600; color: var(--tl-head);
  transition: color 0.15s;
}
.faq-item summary:hover { color: var(--blue); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 13px; height: 13px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.25s;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item p { padding: 0 40px 28px 0; color: var(--tl-body); font-size: 16px; line-height: 1.7; }
.faq-item p strong { color: var(--tl-head); }

/* ------------------------------------------------------------------ misc */
.img-rounded { border-radius: 14px; box-shadow: 0 24px 64px rgba(26,32,48,0.16); }
.dark-img { border-radius: 14px; box-shadow: 0 28px 72px rgba(0,0,0,0.45); }

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.kpi {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 13px; padding: 26px 24px; backdrop-filter: blur(4px);
}
.kpi .n { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.02em; margin-bottom: 9px; }
.kpi .l { font-size: 13.5px; color: var(--t-mute); line-height: 1.45; }

@media (max-width: 768px) {
  .band { padding: 80px 0; }
  .cta-band { padding: 96px 0; }
  .page-hero { padding: calc(var(--header-h) + 64px) 0 64px; }
}