/* ============================================================
   OPTIMYZED — Inner Pages Stylesheet
   Complements the 3-D home (style.css) visual language.
   ============================================================ */

/* ---------- Reset / base overrides for multi-scroll pages -- */
html {
  scroll-behavior: smooth;
}

body.page {
  background: #0a1330;
  color: #e6f0fc;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  overflow-x: hidden;
  /* no scroll lock needed outside the home canvas */
  height: auto;
  overflow-y: auto;
}

/* subtle starfield behind every inner page */
body.page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(47, 141, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(40, 82, 170, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(56, 118, 224, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, #0c1740 0%, #0a1330 40%, #060c22 100%);
}

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

/* ---------- CSS variables (mirrors home style.css) --------- */
:root {
  --bg: #0a1330;
  --bg-deep: #060c22;
  --blue: #2f8dff;
  --blue-soft: #8fc4ff;
  --ink: #e6f0fc;
  --ink-dim: #b8cbe6;
  --engine: #2f8dff;
  --engine-rgb: 47, 141, 255;
  --gutter: clamp(20px, 6vw, 100px);
  --max: 1080px;
}

/* ---------- Scanlines (decorative, same as homepage) ------- */
body.page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: repeating-linear-gradient(
    to bottom, #fff 0px, #fff 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--gutter);
  background: transparent;
  border-bottom: 1px solid rgba(120, 175, 255, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

.site-nav.scrolled {
  background:
    linear-gradient(180deg, rgba(6, 12, 28, 0.98) 0%, rgba(8, 16, 36, 0.97) 100%);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: rgba(120, 175, 255, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42),
              inset 0 -1px 0 rgba(140, 190, 255, 0.08);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-brand .brand-canvas {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: block;
}

.nav-brand-word {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-left: -3px;
  background: linear-gradient(180deg, #9ed2f5 0%, #4a9ad8 55%, #2f7cc0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (max-width: 860px) {
  .nav-brand .brand-canvas { width: 34px; height: 34px; flex-basis: 34px; }
  .nav-brand-word { font-size: 15px; }
}

@media (max-width: 620px) {
  .nav-brand-word {
    display: block;
    font-size: 14px;
    margin-left: -2px;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.nav-links a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  color: #b8cbe6;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: #eaf3ff;
  background: rgba(79, 156, 255, 0.14);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(120, 175, 255, 0.48);
  background: rgba(47, 141, 255, 0.16);
  color: #c2dcff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.nav-cta:hover {
  background: rgba(47, 141, 255, 0.26);
  border-color: rgba(143, 196, 255, 0.7);
  color: #fff;
}

/* Groups the mobile call icon and the hamburger so they sit adjacent on the
   right, instead of the nav's justify-content:space-between spreading three
   separate items (brand / hamburger / cta) across the whole bar. Collapses
   to nothing at desktop so its children re-join .site-nav's own flex layout
   (where the hamburger and icon CTA are hidden anyway). */
.nav-mobile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 861px) {
  .nav-mobile-actions { display: contents; }
}

.nav-cta-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(120, 175, 255, 0.48);
  background: rgba(47, 141, 255, 0.16);
  color: #c2dcff;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.nav-cta-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.nav-cta-icon:hover {
  background: rgba(47, 141, 255, 0.26);
  border-color: rgba(143, 196, 255, 0.7);
  color: #fff;
}

@media (max-width: 860px) {
  .nav-cta-icon { display: flex; }
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border: none;
  background: none;
  color: #b8cbe6;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 860px) {
  .nav-hamburger { display: flex; }

  .nav-links {
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px var(--gutter);
    background: rgba(6, 12, 30, 0.97);
    border-bottom: 1px solid rgba(120, 175, 255, 0.12);
    backdrop-filter: blur(20px);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links a {
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 14.5px;
  }

  .nav-cta { padding: 9px 16px; font-size: 12.5px; }
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(60px, 9vw, 130px) 0;
}

.section + .section {
  border-top: 1px solid rgba(140, 180, 240, 0.08);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #a8d3ff;
  margin-bottom: 18px;
}

h1.page-title {
  font-size: clamp(36px, 5.6vw, 76px);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.08;
  color: #f4f9ff;
  margin-bottom: 28px;
}

h2.section-title {
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.18;
  color: #f4f9ff;
  margin-bottom: 24px;
}

h3.subsection-title {
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #e0efff;
  margin-bottom: 14px;
}

p.lead {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.8;
  color: var(--ink-dim);
  margin-bottom: 20px;
  max-width: 720px;
}

p.body-text {
  font-size: clamp(15px, 1.3vw, 18.5px);
  line-height: 1.85;
  color: var(--ink-dim);
  margin-bottom: 18px;
}

/* ============================================================
   BUTTONS / CTAs
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  border-radius: 999px;
  border: 1px solid rgba(120, 175, 255, 0.48);
  background: rgba(47, 141, 255, 0.16);
  color: #c2dcff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
  background: rgba(47, 141, 255, 0.26);
  border-color: rgba(143, 196, 255, 0.7);
  color: #fff;
}

.btn-primary {
  background: rgba(47, 141, 255, 0.22);
  border-color: rgba(143, 196, 255, 0.55);
  color: #eaf3ff;
}

.btn-primary:hover {
  background: rgba(47, 141, 255, 0.38);
  border-color: rgba(180, 215, 255, 0.8);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(120, 175, 255, 0.28);
  color: var(--ink-dim);
}

.btn-ghost:hover {
  background: rgba(47, 141, 255, 0.10);
  border-color: rgba(143, 196, 255, 0.55);
  color: #eaf3ff;
}

.btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.page-hero {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(47, 141, 255, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Engine pages (body[data-engine], set inline per page alongside --engine /
   --engine-rgb): a two-tone diagonal glow like the reference — blue stays
   the site's existing blue in the lower-left, the second corner takes each
   page's own engine colour instead of a fixed purple, and both drift slowly
   so the background reads as alive rather than a static image. Higher
   specificity than the plain .page-hero::before above, so it overrides it
   only on these pages; blog/about/contact keep the original subtle glow. */
body[data-engine] .page-hero::before {
  top: auto;
  left: -18%;
  bottom: -18%;
  width: 82%;
  height: 92%;
  background: radial-gradient(ellipse at center, rgba(47, 141, 255, 0.55) 0%, rgba(47, 141, 255, 0) 68%);
  filter: blur(2px);
  animation: engineGlowA 17s ease-in-out infinite alternate;
}

body[data-engine] .page-hero::after {
  content: '';
  position: absolute;
  top: -18%;
  right: -18%;
  width: 78%;
  height: 88%;
  background: radial-gradient(ellipse at center, rgba(var(--engine-rgb), 0.48) 0%, rgba(var(--engine-rgb), 0) 68%);
  filter: blur(2px);
  pointer-events: none;
  animation: engineGlowB 21s ease-in-out infinite alternate;
}

@keyframes engineGlowA {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, -7%) scale(1.14); }
}

@keyframes engineGlowB {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-6%, 6%) scale(1.12); }
}

/* =========================================================================
   INSIGHTS HERO (blog.html) — deep navy radial gradient background
   matching the reference screenshot (subtle deep blue colour shifts,
   cyan network particle net over top, cursor-reactive spotlight glow).
   ========================================================================= */
.insights-hero {
  background:
    radial-gradient(1200px 800px at 12% 8%, #123364 0%, rgba(18,51,100,0) 55%),
    radial-gradient(900px 700px at 90% 30%, #0f2a57 0%, rgba(15,42,87,0) 60%),
    radial-gradient(1400px 900px at 45% 110%, #11294f 0%, rgba(17,41,79,0) 62%),
    linear-gradient(180deg, #05132b 0%, #071835 45%, #05122a 100%);
  isolation: isolate;
}

.insights-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.insights-hero .hero-bg-grad {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: .65;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.insights-hero .hero-bg-grad-1 {
  width: 62%;
  height: 85%;
  left: -10%;
  top: -20%;
  background: radial-gradient(circle at 30% 30%, #1b4a96 0%, rgba(27,74,150,0.55) 38%, rgba(27,74,150,0) 70%);
  animation: insightsDrift1 18s ease-in-out infinite alternate;
}
.insights-hero .hero-bg-grad-2 {
  width: 55%;
  height: 75%;
  right: -12%;
  top: -8%;
  background: radial-gradient(circle at 65% 40%, #0e3a7d 0%, rgba(14,58,125,0.5) 42%, rgba(14,58,125,0) 72%);
  animation: insightsDrift2 22s ease-in-out infinite alternate;
}
.insights-hero .hero-bg-grad-3 {
  width: 70%;
  height: 70%;
  left: 10%;
  bottom: -30%;
  background: radial-gradient(circle at 50% 50%, #153e78 0%, rgba(21,62,120,0.45) 40%, rgba(21,62,120,0) 70%);
  animation: insightsDrift3 26s ease-in-out infinite alternate;
}
.insights-hero .hero-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(3,9,22,0.45) 100%),
    linear-gradient(180deg, rgba(4,14,34,0.35) 0%, rgba(4,14,34,0) 22%, rgba(4,14,34,0) 78%, rgba(4,14,34,0.55) 100%);
  mix-blend-mode: multiply;
}
.insights-hero .hero-net-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .95;
}
.insights-hero .hero-spotlight {
  position: absolute;
  inset: -10%;
  background: radial-gradient(360px 360px at var(--mx, 50%) var(--my, 50%), rgba(74,170,255,0.26) 0%, rgba(74,170,255,0.1) 28%, rgba(74,170,255,0) 62%);
  opacity: 0;
  transition: opacity .35s ease;
  mix-blend-mode: screen;
  will-change: background-position, opacity;
}
.insights-hero:hover .hero-spotlight { opacity: 1; }
.insights-hero .insights-eyebrow {
  color: #7fb4ff;
  letter-spacing: .22em;
  text-shadow: 0 0 16px rgba(96,168,255,0.35);
}
.insights-hero .page-title {
  text-shadow: 0 2px 24px rgba(5,22,52,0.55);
}
.insights-hero .lead {
  color: #c4d6f1;
}
@keyframes insightsDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(7%, 5%) scale(1.08); }
}
@keyframes insightsDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-8%, 6%) scale(1.1); }
}
@keyframes insightsDrift3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, -7%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .insights-hero .hero-bg-grad,
  .insights-hero .hero-spotlight {
    animation: none !important;
    transition: none !important;
  }
  .insights-hero:hover .hero-spotlight { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-engine] .page-hero::before,
  body[data-engine] .page-hero::after {
    animation: none;
  }
}

/* Fine wireframe mesh texture layered between the two glow blobs (see
   js/mesh-wave.js, which builds this element automatically — no per-page
   markup). Sits behind the copy via the existing .page-hero .container
   z-index rule above. */
.mesh-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mesh-field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-inner {
  position: relative;
  max-width: 780px;
}

/* Wave sits at a natural (auto) z-index, same painting layer as
   .page-hero::before; giving the container an explicit stack level keeps
   the hero copy above it without needing a negative z-index on the wave. */
.page-hero .container {
  position: relative;
  z-index: 1;
}

.hero-wave-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-wave-field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* contact.html hero: a real photo anchored to the right edge, faded on a
   soft oval mask rather than a hard crop so it blends into the dark
   background instead of looking pasted on. Hidden below 860px — a stacked
   layout has no spare width for a photo without crowding the form copy. */
.hero-photo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  pointer-events: none;
}

/* Full-hero scrim, opaque over the text column and clear by the time it
   reaches the photo, so legibility never depends on what happens to be
   behind a given word. Never fades fully to transparent — keeps a faint
   navy wash over the photo itself so it reads as tinted, not pasted on. */
.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    #0a1330 0%, #0a1330 28%, rgba(10, 19, 48, 0.85) 42%,
    rgba(10, 19, 48, 0.5) 68%, rgba(10, 19, 48, 0.3) 100%);
}

.hero-photo img {
  position: relative;
  height: 108%;
  width: auto;
  min-width: 30%;
  max-width: 40%;
  object-fit: cover;
  object-position: 68% 22%;
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 78% 50%, #000 40%, transparent 88%);
  mask-image: radial-gradient(ellipse 70% 85% at 78% 50%, #000 40%, transparent 88%);
  /* sepia + hue-rotate tips the photo's whole palette toward the site's
     navy/blue rather than leaving it a literal, un-tinted photograph. */
  filter: saturate(0.5) brightness(0.72) contrast(1.02) sepia(0.35) hue-rotate(175deg);
  opacity: 0.55;
  mix-blend-mode: screen;
}

@media (max-width: 860px) {
  .hero-photo { display: none; }
}

/* Softens the hard seam where the hero's own background (including the
   photo/scrim above) meets the flat colour of the next section — without
   this the boundary reads as a visible cut line. Paints on top of the photo
   but under the copy, matching the stacking already set up for the rest of
   this hero's layers. */
.page-hero-photo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(90px, 14vw, 170px);
  background: linear-gradient(to bottom, transparent 0%, #0a1330 100%);
  pointer-events: none;
}

/* services.html hero: full-bleed swirling particle vortex, mouse-reactive,
   cycling hue. Needs generous room to read as a real background rather than
   being squeezed by the copy above it. */
.page-hero-vortex {
  min-height: clamp(560px, 82vh, 900px);
  display: flex;
  align-items: center;
}

.vortex-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.vortex-field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-qual {
  margin-top: 24px;
  font-size: 12.5px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: rgba(184, 203, 230, 0.78);
}

/* ============================================================
   GLASSMORPHISM CARDS
   ============================================================ */
.card {
  padding: 28px 32px;
  border-radius: 14px;
  border: 1px solid rgba(140, 180, 240, 0.14);
  background: rgba(10, 20, 44, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  border-color: rgba(140, 180, 240, 0.34);
  transform: translateY(-3px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(var(--engine-rgb), 0.34);
  background: rgba(var(--engine-rgb), 0.12);
  margin-bottom: 18px;
}

.card-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--engine);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   GRID LAYOUTS
   ============================================================ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .grid-auto { grid-template-columns: 1fr; }
}

/* ============================================================
   STEP LIST
   ============================================================ */
.step-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: step;
}

.step-item {
  display: flex;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(140, 180, 240, 0.08);
  counter-increment: step;
}

.step-item:last-child {
  border-bottom: none;
}

.step-number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(var(--engine-rgb), 0.5);
  background: rgba(var(--engine-rgb), 0.14);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #c2ddff;
  margin-top: 2px;
  flex-shrink: 0;
}

.step-number::before {
  content: counter(step, decimal-leading-zero);
}

.step-body strong {
  display: block;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #e2eeff;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* ============================================================
   BULLET LIST
   ============================================================ */
.bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.bullet-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.75;
  color: var(--ink-dim);
}

.bullet-list li::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--engine);
  margin-top: 9px;
}

/* ============================================================
   FIT / POOR FIT SECTION
   ============================================================ */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}

.fit-block {
  padding: 28px;
  border-radius: 14px;
  border: 1px solid rgba(140, 180, 240, 0.14);
  background: rgba(10, 20, 44, 0.45);
}

.fit-block.good { border-color: rgba(80, 200, 130, 0.28); }
.fit-block.poor { border-color: rgba(231, 76, 82, 0.24); }

.fit-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.fit-block.good .fit-label { color: #78d4a6; }
.fit-block.poor .fit-label { color: #f0929a; }

.fit-block .bullet-list li::before {
  background: #78d4a6;
}

.fit-block.poor .bullet-list li::before {
  background: #f0929a;
}

@media (max-width: 640px) {
  .fit-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(140, 180, 240, 0.14);
  border-radius: 14px;
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid rgba(140, 180, 240, 0.10);
}

.faq-item:last-child { border-bottom: none; }

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 28px;
  background: rgba(10, 20, 44, 0.40);
  border: none;
  cursor: pointer;
  color: #e0efff;
  font-size: clamp(15px, 1.3vw, 18.5px);
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  transition: background 0.25s ease;
}

.faq-question:hover,
.faq-item.open .faq-question {
  background: rgba(47, 141, 255, 0.10);
}

.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--blue-soft);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-chevron svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-answer { max-height: 600px; }

.faq-answer p {
  padding: 0 28px 24px;
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.85;
  color: var(--ink-dim);
}

/* ============================================================
   DIAGNOSTIC CARDS
   ============================================================ */
.diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.diag-card {
  display: flex;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 12px;
  border: 1px solid rgba(140, 180, 240, 0.14);
  background: rgba(10, 20, 44, 0.40);
  transition: border-color 0.3s ease, background 0.3s ease;
  cursor: default;
}

.diag-card:hover {
  border-color: rgba(var(--engine-rgb), 0.3);
  background: rgba(var(--engine-rgb), 0.06);
}

.diag-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(var(--engine-rgb), 0.12);
  color: var(--engine);
}

.diag-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diag-body strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: #e0efff;
  margin-bottom: 6px;
}

.diag-body span {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-dim);
}

/* ============================================================
   ENGINE OVERVIEW GRID (Services page) — "engine constellation"
   ============================================================ */
.engine-starfield {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "left hub right";
  align-items: center;
  justify-items: center;
  gap: 20px 24px;
  margin-top: 44px;
  padding: 6px 0;
}

.ecol-left   { grid-area: left;  width: 100%; }
.engine-hub  { grid-area: hub;   width: 100%; }
.ecol-right  { grid-area: right; width: 100%; }

.engine-lines {
  position: absolute;
  inset: -1.5% -1% -1% -1%;
  width: 102%;
  height: 103%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.engine-lines .eline {
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
  transition: opacity 0.4s ease, stroke-width 0.4s ease, filter 0.4s ease;
  stroke-width: 0.7;
}

.engine-lines .eline[data-for="discovery"] { animation-delay: 0s; }
.engine-lines .eline[data-for="authority"] { animation-delay: 1.0s; }
.engine-lines .eline[data-for="quotify"]   { animation-delay: 2.0s; }
.engine-lines .eline[data-for="outreach"]  { animation-delay: 1.5s; }
.engine-lines .eline[data-for="demand"]    { animation-delay: 0.5s; }
.engine-lines .eline[data-for="revenue"]   { animation-delay: 2.5s; }

@keyframes eline-flow {
  from { stroke-dashoffset: 3.2; }
  to   { stroke-dashoffset: 0; }
}

.ecol {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ecol-left  .engine-card { text-align: left;  margin-right: auto; }
.ecol-right .engine-card { text-align: right; margin-left:  auto; }

.ecol-right .engine-card .engine-head { flex-direction: row-reverse; }
.ecol-right .engine-card .engine-left { flex-direction: row-reverse; }
.ecol-right .engine-card .engine-left > :first-child { margin-left: 12px; margin-bottom: 0; }
.ecol-right .engine-card .engine-left > div:last-child { text-align: right; }
.ecol-right .engine-card .engine-body { text-align: right; }
.ecol-right .engine-card .engine-body .engine-link { justify-content: flex-end; }

.engine-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 20px 20px 12px;
  border-radius: 14px;
  border: 1px solid rgba(140, 180, 240, 0.14);
  background: rgba(10, 20, 44, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
}

.engine-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at 0% 0%, rgba(var(--engine-card-rgb, 47, 141, 255), 0.14) 0%, transparent 65%);
  transition: opacity 0.4s ease;
}

.engine-card:hover,
.engine-card.open {
  border-color: rgba(var(--engine-card-rgb, 47, 141, 255), 0.42);
  background: rgba(10, 20, 44, 0.72);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(var(--engine-card-rgb, 47, 141, 255), 0.1),
              inset 0 0 20px rgba(var(--engine-card-rgb, 47, 141, 255), 0.08);
  transform: translateY(-2px);
}

.engine-card:hover::before,
.engine-card.open::before { opacity: 1; }

.engine-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.engine-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.engine-card h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #f4f9ff;
  margin: 0 0 4px;
}

.engine-card .engine-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--engine-card-color, #2f8dff);
  line-height: 1.6;
}

.engine-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--engine-card-color, #2f8dff);
  box-shadow: 0 0 10px var(--engine-card-color, #2f8dff),
              0 0 22px rgba(var(--engine-card-rgb, 47, 141, 255), 0.45);
}

.engine-chev {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(140, 180, 240, 0.22);
  background: rgba(var(--engine-card-rgb, 47, 141, 255), 0.06);
  color: #cfe1f6;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.2, 1, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease;
}

.engine-chev svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.engine-chev:hover {
  background: rgba(var(--engine-card-rgb, 47, 141, 255), 0.18);
  color: #fff;
  border-color: rgba(var(--engine-card-rgb, 47, 141, 255), 0.55);
}

.engine-card.open .engine-chev {
  transform: rotate(180deg);
  color: #fff;
  background: rgba(var(--engine-card-rgb, 47, 141, 255), 0.28);
  border-color: rgba(var(--engine-card-rgb, 47, 141, 255), 0.68);
}

.engine-body {
  position: relative;
  z-index: 1;
  overflow: hidden;
  animation: engine-body-in 0.4s cubic-bezier(0.2, 1, 0.3, 1) both;
}

@keyframes engine-body-in {
  from { max-height: 0; opacity: 0; transform: translateY(-6px); }
  to   { max-height: 520px; opacity: 1; transform: translateY(0); }
}

.engine-body p {
  margin: 14px 0 18px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-dim);
}

.engine-card .engine-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--engine-card-color, #2f8dff);
  text-decoration: none;
  transition: gap 0.25s ease, filter 0.25s ease;
}

.engine-card .engine-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.engine-card .engine-link:hover { gap: 14px; filter: brightness(1.15); }

/* Line glow when the engine card is open (modern browsers with :has) */
.engine-starfield:has(.engine-card[data-engine-id="discovery"].open) .eline[data-for="discovery"],
.engine-starfield:has(.engine-card[data-engine-id="authority"].open) .eline[data-for="authority"],
.engine-starfield:has(.engine-card[data-engine-id="quotify"].open)   .eline[data-for="quotify"],
.engine-starfield:has(.engine-card[data-engine-id="outreach"].open)  .eline[data-for="outreach"],
.engine-starfield:has(.engine-card[data-engine-id="demand"].open)    .eline[data-for="demand"],
.engine-starfield:has(.engine-card[data-engine-id="revenue"].open)   .eline[data-for="revenue"],

/* Fallback classes set from pages.js accordion state — works everywhere */
.engine-starfield.open-discovery .eline[data-for="discovery"],
.engine-starfield.open-authority .eline[data-for="authority"],
.engine-starfield.open-quotify   .eline[data-for="quotify"],
.engine-starfield.open-outreach  .eline[data-for="outreach"],
.engine-starfield.open-demand    .eline[data-for="demand"],
.engine-starfield.open-revenue   .eline[data-for="revenue"] {
  opacity: 1;
  stroke-width: 0.95;
  filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);
}

/* —————————————————————————————————————————————————————————————————————
   IDLE base-visibility: all 6 connector lines softly visible by default
   so Demand + Authority show up even without a card being open.
   ————————————————————————————————————————————————————————————————————— */
.engine-lines .eline[data-for="discovery"],
.engine-lines .eline[data-for="authority"],
.engine-lines .eline[data-for="quotify"],
.engine-lines .eline[data-for="outreach"],
.engine-lines .eline[data-for="demand"],
.engine-lines .eline[data-for="revenue"] {
  opacity: 0.62;
}


/* ---------- CENTER HUB ---------- */
.engine-hub {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 20px 0;
}

.engine-hub-inner {
  position: relative;
  width: min(460px, 96%);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.engine-hub-canvas {
  position: absolute;
  z-index: 3;
  width: 92%;
  height: 92%;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  margin: 0;
}

.engine-hub-ring {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 1px solid rgba(90, 160, 255, 0.22);
  box-shadow:
    inset 0 0 40px rgba(90, 160, 255, 0.12),
    0 0 40px rgba(90, 160, 255, 0.10);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(79, 156, 255, 0.08) 0%,
      rgba(79, 156, 255, 0.02) 45%,
      transparent 68%);
  z-index: 1;
}

.engine-hub-ring::after {
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  border: 1px dashed rgba(120, 175, 255, 0.14);
  animation: ring-turn 38s linear infinite;
}

.engine-hub-core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(143, 196, 255, 0.28);
  box-shadow:
    inset 0 0 40px rgba(143, 196, 255, 0.15),
    0 0 50px rgba(90, 160, 255, 0.18);
  background:
    radial-gradient(circle at 32% 30%, rgba(220, 240, 255, 0.22), transparent 45%),
    radial-gradient(circle at 70% 72%, rgba(47, 141, 255, 0.28), transparent 55%);
  animation: ring-turn 26s linear infinite reverse;
  z-index: 2;
}

.engine-hub-copy {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  text-align: center;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

.engine-hub-eyebrow {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.28em;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 999px;
  color: #e6f0fc;
  border: 1px solid rgba(143, 196, 255, 0.35);
  background: rgba(20, 50, 100, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 8px;
}

.engine-hub-name {
  font-size: 31px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #cfeaff 0%, #5cabff 55%, #2f7cc0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  margin-bottom: 2px;
}

.engine-hub-copy p {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: rgba(220, 236, 255, 0.78);
}

@keyframes ring-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .engine-starfield {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "hub hub";
  }
  .ecol-left { grid-area: left; }
  .ecol-right { grid-area: right; }
  .engine-hub { grid-area: hub; margin-top: 16px; }
  .engine-hub-inner { width: min(360px, 90%); }
  .engine-lines { display: none; }
}

@media (max-width: 720px) {
  .engine-starfield {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hub"
      "left"
      "right";
    margin-top: 32px;
  }
  .ecol { gap: 18px; }
  .ecol-right .engine-card,
  .ecol-left  .engine-card { max-width: 100%; margin: 0 auto; }
  .ecol-right .engine-card .engine-head { flex-direction: row; }
  .ecol-right .engine-card .engine-left { flex-direction: row; }
  .ecol-right .engine-card .engine-left > :first-child { margin-left: 0; }
  .ecol-right .engine-card .engine-left > div:last-child { text-align: left; }
  .ecol-right .engine-card .engine-body { text-align: left; }
  .ecol-right .engine-card .engine-body .engine-link { justify-content: flex-start; }
  .engine-card { padding: 16px 16px 8px; }
  .engine-card h3 { font-size: 17.5px; }
  .engine-card .engine-label { font-size: 10.5px; letter-spacing: 0.2em; }
  .engine-hub-inner { width: min(320px, 92%); }
  .engine-hub-copy { bottom: -4px; }
  .engine-hub-name { font-size: 26px; }
  .engine-hub-eyebrow { font-size: 10px; }
  .engine-hub-copy p { font-size: 13.5px; }
}

/* ============================================================
   HIGHLIGHT BOX
   ============================================================ */
.highlight-box {
  padding: 32px 36px;
  border-radius: 14px;
  border: 1px solid rgba(var(--engine-rgb), 0.28);
  background: rgba(var(--engine-rgb), 0.07);
  margin: 36px 0;
}

.highlight-box p {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.85;
  color: var(--ink-dim);
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  padding: clamp(60px, 8vw, 100px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(47, 141, 255, 0.10) 0%, transparent 65%);
}

.cta-banner .container { position: relative; }

.cta-banner .eyebrow { justify-content: center; display: flex; }

.cta-banner h2 {
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #f4f9ff;
  line-height: 1.2;
  margin-bottom: 20px;
}

.cta-banner p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.85;
  color: var(--ink-dim);
  max-width: 580px;
  margin: 0 auto 36px;
}

.cta-banner .cta-group {
  justify-content: center;
}

.cta-microcopy {
  margin-top: 18px;
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: rgba(184, 203, 230, 0.72);
}

/* ============================================================
   TWO-COLUMN CONTENT LAYOUT
   ============================================================ */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.split-layout.reverse { direction: rtl; }
.split-layout.reverse > * { direction: ltr; }

@media (max-width: 768px) {
  .split-layout { grid-template-columns: 1fr; }
  .split-layout.reverse { direction: ltr; }
}

/* ============================================================
   BLOG PAGE
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 48px;
}

.post-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(140, 180, 240, 0.14);
  background: rgba(10, 20, 44, 0.50);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
  border-color: rgba(140, 180, 240, 0.36);
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
}

.post-thumb {
  width: 100%;
  aspect-ratio: 16 / 8;
  background: linear-gradient(135deg, #0f1d3c 0%, #0c1530 100%);
  position: relative;
  overflow: hidden;
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85) saturate(0.8);
}

.post-thumb .post-type {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(143, 196, 255, 0.35);
  background: rgba(6, 12, 28, 0.72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a8d3ff;
}

.post-body {
  flex: 1;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
}

.post-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 10px;
}

.post-body h2 {
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f4f9ff;
  line-height: 1.35;
  margin-bottom: 14px;
}

.post-body p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-dim);
  flex: 1;
  margin-bottom: 22px;
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.post-read-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blue-soft);
  transition: gap 0.25s ease;
}

.post-read-more svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.post-card:hover .post-read-more { gap: 12px; }

/* Blog filter tabs */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
}

.filter-btn {
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(140, 180, 240, 0.22);
  background: none;
  color: var(--ink-dim);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: rgba(47, 141, 255, 0.14);
  border-color: rgba(143, 196, 255, 0.5);
  color: #eaf3ff;
}

/* ============================================================
   SINGLE BLOG POST
   ============================================================ */
.post-hero-img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 48px;
  filter: brightness(0.85) saturate(0.75);
  display: block;
}

.post-content {
  max-width: 740px;
  margin: 0 auto;
}

.post-content h2 {
  font-size: clamp(22px, 2.6vw, 31px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #f4f9ff;
  margin: 36px 0 14px;
}

.post-content p {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.9;
  color: var(--ink-dim);
  margin-bottom: 20px;
}

.post-content ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-content ul li {
  padding-left: 18px;
  position: relative;
  font-size: clamp(15.5px, 1.25vw, 18.5px);
  line-height: 1.78;
  color: var(--ink-dim);
}

.post-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.post-content blockquote {
  margin: 28px 0;
  padding: 20px 28px;
  border-left: 2px solid var(--blue);
  background: rgba(47, 141, 255, 0.07);
  border-radius: 0 10px 10px 0;
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.9;
  color: var(--ink);
  font-style: italic;
}

.post-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.breadcrumb a {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover { color: var(--blue-soft); }

.breadcrumb-sep {
  color: rgba(147, 169, 198, 0.4);
  font-size: 9px;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout-section {
  padding-top: clamp(48px, 8vw, 110px);
  padding-bottom: clamp(48px, 8vw, 120px);
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

/* The info column runs much longer than the form, which used to leave a big
   empty void under the form once it ran out of content. Pinning it near the
   nav keeps it in reach (and the layout balanced) while the visitor reads
   through the rest of the page. Desktop only — a single stacked column on
   narrow layouts has no room for a floating form. */
.contact-form-col {
  position: sticky;
  top: 90px;
  align-self: start;
}

@media (max-width: 860px) {
  .contact-form-col {
    position: static;
  }
}

.contact-info h3 {
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 600;
  color: #e0efff;
  margin-bottom: 14px;
  margin-top: 32px;
}

.contact-info h3:first-of-type { margin-top: 0; }

.contact-info p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.85;
  color: var(--ink-dim);
  margin-bottom: 10px;
}

.contact-info a {
  color: var(--blue-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-info a:hover { color: #fff; }

.form-card {
  padding: 36px;
  border-radius: 16px;
  border: 1px solid rgba(140, 180, 240, 0.18);
  background: rgba(10, 20, 44, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.field-group label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.field-group input,
.field-group textarea,
.field-group select {
  width: 100%;
  padding: 13px 16px;
  border-radius: 9px;
  border: 1px solid rgba(140, 180, 240, 0.2);
  background: rgba(5, 10, 24, 0.6);
  color: var(--ink);
  font-family: inherit;
  font-size: 15.5px;
  outline: none;
  resize: vertical;
  transition: border-color 0.25s ease, background 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}

.field-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%2393a9c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
  border-color: rgba(143, 196, 255, 0.55);
  background: rgba(8, 16, 34, 0.75);
}

.field-group input[aria-invalid='true'],
.field-group textarea[aria-invalid='true'] {
  border-color: rgba(231, 76, 82, 0.7);
}

.submit-btn {
  width: 100%;
  padding: 15px 32px;
  border-radius: 999px;
  border: 1px solid rgba(143, 196, 255, 0.45);
  background: rgba(47, 141, 255, 0.18);
  color: #eaf3ff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.submit-btn:hover {
  background: rgba(47, 141, 255, 0.34);
  border-color: rgba(180, 215, 255, 0.8);
}

.submit-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-status {
  margin-top: 14px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-align: center;
  min-height: 20px;
}

.form-status.ok { color: #8fd3a8; }
.form-status.err { color: #f0929a; }

@media (max-width: 768px) {
  .contact-layout { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 24px; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.principle-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.principle-item {
  display: flex;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(140, 180, 240, 0.08);
}

.principle-item:last-child { border-bottom: none; }

.principle-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(47, 141, 255, 0.3);
  background: rgba(47, 141, 255, 0.10);
  color: var(--blue);
  margin-top: 2px;
}

.principle-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.principle-body strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #e0efff;
  margin-bottom: 6px;
}

.principle-body span {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-dim);
}

/* ============================================================
   ENGINE INDIVIDUAL PAGE — hero accent bar
   ============================================================ */
.engine-hero-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--engine-rgb), 0.4);
  background: rgba(var(--engine-rgb), 0.10);
  margin-bottom: 24px;
}

.engine-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--engine);
  box-shadow: 0 0 8px var(--engine);
}

.engine-hero-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--engine);
}

/* capabilities tag cloud */
.cap-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.cap-tag {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--engine-rgb), 0.28);
  background: rgba(var(--engine-rgb), 0.07);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

/* measurement metric chips */
.metric-chips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.metric-chip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(140, 180, 240, 0.12);
  background: rgba(10, 20, 44, 0.40);
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-dim);
}

.metric-chip::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--engine);
  margin-top: 8px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.page-footer {
  border-top: 1px solid rgba(140, 180, 240, 0.12);
  background: rgba(5, 10, 24, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(40px, 6vw, 80px) 0 28px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: clamp(30px, 4vw, 60px);
}

.footer-brand-mark {
  display: flex;
  align-items: center;
  gap: 2px;
}

.footer-brand-mark .brand-canvas {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: block;
}

.footer-brand-word {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-left: -3px;
  background: linear-gradient(180deg, #9ed2f5 0%, #4a9ad8 55%, #2f7cc0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.footer-brand p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-dim);
  margin-top: 14px;
  max-width: 300px;
}

.footer-col h4 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul a {
  color: rgba(184, 203, 230, 0.82);
  text-decoration: none;
  font-size: 14.5px;
  transition: color 0.2s ease;
}

.footer-col ul a:hover { color: #eaf3ff; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(140, 180, 240, 0.08);
}

.footer-bottom p {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(184, 203, 230, 0.62);
}

.footer-legal-links {
  display: flex;
  gap: 18px;
}

.footer-legal-links a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(184, 203, 230, 0.62);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-links a:hover { color: var(--ink-dim); }

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-24 { margin-top: 24px; }
.mt-36 { margin-top: 36px; }
.mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }

.section-header {
  margin-bottom: 48px;
}

.section-header.center { text-align: center; }
.section-header.center .lead { margin: 0 auto 0; }

/* inline accent colour helper — set via style attr */
.accent { color: var(--engine); }

/* divider line */
.hr {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140, 180, 240, 0.25), transparent);
  margin: clamp(40px, 6vw, 80px) 0;
}

/* NOTE box */
.note-box {
  display: flex;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 10px;
  border: 1px solid rgba(var(--engine-rgb), 0.24);
  background: rgba(var(--engine-rgb), 0.06);
  margin-top: 24px;
}

.note-box p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-dim);
}

/* scroll-reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- engine chat panel (engine pages) ---------- */
:root {
  --panel-w: min(420px, 88vw);
}

#chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 260;
  width: var(--panel-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 1ms linear 0.56s, pointer-events 1ms linear 0.56s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  background:
    linear-gradient(180deg,
      rgba(var(--engine-rgb), 0.22) 0%,
      rgba(var(--engine-rgb), 0.10) 28%,
      rgba(6, 10, 20, 0.82) 100%);
  border-left: 1px solid rgba(var(--engine-rgb), 0.42);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.6),
              inset 0 0 90px rgba(var(--engine-rgb), 0.12);
}

#chat-panel.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: visibility 1ms linear 0s, pointer-events 1ms linear 0s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(var(--engine-rgb), 0.32);
  background:
    linear-gradient(180deg,
      rgba(10, 18, 36, 0.98) 0%,
      rgba(10, 18, 36, 0.96) 55%,
      rgba(10, 18, 36, 0.92) 100%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

#chat-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 14px;
  background: rgba(var(--engine-rgb), 0.14);
  border: 1px solid rgba(var(--engine-rgb), 0.34);
}

.chat-title { flex: 1; min-width: 0; }

.chat-title h2 {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-title p {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--engine);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(var(--engine-rgb), 0.32);
  background: rgba(var(--engine-rgb), 0.10);
  color: #cfe0f5;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

@media (max-width: 860px) {
  #chat-panel {
    top: 0;
    top: env(safe-area-inset-top, 0px);
    right: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-left: 0;
    border-top: 1px solid rgba(var(--engine-rgb), 0.42);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55),
                inset 0 0 90px rgba(var(--engine-rgb), 0.10);
    transform: translateY(102%);
  }
  #chat-panel.open { transform: translateY(0); }
  .chat-head {
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-right: 14px;
    padding-bottom: 12px;
    padding-left: 14px;
  }
  #chat-icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 11px; }
  .chat-title h2 { font-size: 14.5px; letter-spacing: 0.05em; }
  .chat-title p { font-size: 10px; letter-spacing: 0.14em; }
  .icon-btn { width: 32px; height: 32px; border-radius: 8px; }
  .icon-btn svg { width: 14px; height: 14px; }
  .chat-log { padding: 16px 14px; gap: 10px; }
  .msg { max-width: 88%; padding: 10px 12px; font-size: 13px; line-height: 1.55; }
  .chat-form {
    padding-top: 12px;
    padding-right: 14px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding-left: 14px;
    gap: 6px;
  }
  #chat-input { padding: 11px 14px; font-size: 13px; }
  .icon-btn.send { width: 40px; height: 40px; }
  .icon-btn.chat-mic { width: 40px; height: 40px; }
  .icon-btn.chat-mic .mic-ico { width: 17px; height: 17px; }
  body.chat-open #call-btn { opacity: 0; visibility: hidden; transform: translateY(4px); }
}

/* ============================================================
   ABOUT PAGE — Tech/innovation background + parallax orbs
   ============================================================ */
body.page.page-about::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(47, 184, 255, 0.22) 0%, transparent 55%),
    radial-gradient(900px 700px at -10% 30%, rgba(80, 130, 255, 0.18) 0%, transparent 55%),
    radial-gradient(1000px 700px at 50% 8%, rgba(100, 200, 255, 0.28) 0%, rgba(40, 140, 255, 0.16) 25%, transparent 58%),
    radial-gradient(700px 500px at 60% 110%, rgba(47, 141, 255, 0.24) 0%, transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(120, 180, 255, 0.045) 0px,
      rgba(120, 180, 255, 0.045) 1px,
      transparent 1px,
      transparent 56px),
    repeating-linear-gradient(
      90deg,
      rgba(120, 180, 255, 0.045) 0px,
      rgba(120, 180, 255, 0.045) 1px,
      transparent 1px,
      transparent 56px),
    radial-gradient(circle at 1px 1px, rgba(150, 200, 255, 0.18) 1px, transparent 0),
    linear-gradient(180deg, #0b2255 0%, #0a1846 28%, #0a1330 58%, #060c22 100%);
  background-size:
    auto, auto, auto, auto, auto, auto, 14px 14px, auto;
}

/* ---------- Simple matrix / blueprint grid overlay (straight lines + nodes only; NO curved lines) ---------- */
body.page.page-about::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(160, 220, 255, 0.28) 1.1px, rgba(120, 200, 255, 0.14) 1.8px, transparent 2.4px),
    repeating-linear-gradient(
      0deg,
      rgba(130, 200, 255, 0.06) 0px,
      rgba(130, 200, 255, 0.06) 1px,
      transparent 1px,
      transparent 14px),
    repeating-linear-gradient(
      90deg,
      rgba(130, 200, 255, 0.06) 0px,
      rgba(130, 200, 255, 0.06) 1px,
      transparent 1px,
      transparent 14px);
  background-size:
    56px 56px,
    auto,
    auto;
  background-repeat: repeat;
  mix-blend-mode: screen;
  filter: saturate(1.05);
}

/* Cycling colour for the About hero orbs: --hue is retargeted every ~2s by a
   small inline script on about.html and eased here via the transition, so
   every hue-rotate() below (base rules and breakpoint overrides alike) drifts
   smoothly instead of snapping. Position, size, blur amount, and the existing
   float/pulse animations are untouched. */
@property --hue {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

body.page.page-about {
  --hue: 0deg;
  transition: --hue 2.2s linear;
}

body.page.page-about > .bg-orb {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px) hue-rotate(var(--hue, 0deg));
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
  transform: translate3d(var(--orb-x, 0), var(--orb-y, 0), 0) scale(1);
  transition: transform 0.08s linear;
}

body.page.page-about > .bg-glow {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
  animation: glowFloat 18s ease-in-out infinite alternate, glowPulse 9s ease-in-out infinite;
}

body.page.page-about > .bg-orb--1 {
  width: 520px;
  height: 520px;
  top: -120px;
  left: -140px;
  background:
    radial-gradient(circle at 30% 30%, rgba(140, 220, 255, 0.95) 0%, rgba(47, 141, 255, 0.75) 35%, rgba(20, 70, 180, 0.35) 65%, transparent 80%);
  --orb-factor-y: 0.18;
  --orb-factor-x: -0.06;
  box-shadow:
    0 0 120px rgba(80, 170, 255, 0.45),
    inset 0 0 80px rgba(140, 210, 255, 0.25);
  transform:
    translate3d(calc(var(--orb1-x, 0px)), calc(var(--orb1-y, 0px)), 0);
}

body.page.page-about > .bg-orb--2 {
  width: 420px;
  height: 420px;
  bottom: -60px;
  right: -80px;
  background:
    radial-gradient(circle at 65% 40%, rgba(180, 230, 255, 0.9) 0%, rgba(80, 130, 255, 0.7) 30%, rgba(30, 70, 170, 0.32) 65%, transparent 80%);
  --orb-factor-y: -0.10;
  --orb-factor-x: 0.09;
  box-shadow:
    0 0 140px rgba(120, 180, 255, 0.45),
    inset 0 0 70px rgba(180, 220, 255, 0.22);
  transform:
    translate3d(calc(var(--orb2-x, 0px)), calc(var(--orb2-y, 0px)), 0);
}

body.page.page-about > .bg-glow--3 {
  width: 340px;
  height: 340px;
  top: 14%;
  left: 12%;
  background: radial-gradient(circle at 50% 50%, rgba(195, 245, 255, 0.80) 0%, rgba(80, 200, 255, 0.42) 32%, rgba(30, 130, 240, 0.18) 58%, transparent 78%);
  filter: blur(6px) hue-rotate(var(--hue, 0deg));
  animation-delay: 0s, -2s;
  animation-duration: 22s, 10s;
}

body.page.page-about > .bg-glow--4 {
  width: 260px;
  height: 260px;
  top: 24%;
  right: 18%;
  background: radial-gradient(circle at 40% 45%, rgba(220, 250, 255, 0.78) 0%, rgba(110, 220, 255, 0.40) 30%, rgba(50, 150, 245, 0.18) 58%, transparent 78%);
  filter: blur(5px) hue-rotate(var(--hue, 0deg));
  animation-delay: -5s, -5s;
  animation-duration: 19s, 8s;
}

body.page.page-about > .bg-glow--5 {
  width: 200px;
  height: 200px;
  top: 44%;
  left: 28%;
  background: radial-gradient(circle at 55% 40%, rgba(235, 253, 255, 0.78) 0%, rgba(100, 218, 255, 0.38) 28%, rgba(40, 140, 240, 0.16) 56%, transparent 78%);
  filter: blur(4px) hue-rotate(var(--hue, 0deg));
  animation-delay: -9s, -1s;
  animation-duration: 24s, 11s;
}

body.page.page-about > .bg-glow--6 {
  width: 290px;
  height: 290px;
  bottom: 22%;
  right: 8%;
  background: radial-gradient(circle at 40% 55%, rgba(210, 245, 255, 0.74) 0%, rgba(90, 200, 255, 0.36) 32%, rgba(40, 140, 240, 0.16) 58%, transparent 78%);
  filter: blur(7px) hue-rotate(var(--hue, 0deg));
  animation-delay: -14s, -4s;
  animation-duration: 20s, 9s;
}

body.page.page-about > .bg-glow--7 {
  width: 170px;
  height: 170px;
  top: 58%;
  right: 32%;
  background: radial-gradient(circle at 45% 50%, rgba(248, 255, 255, 0.82) 0%, rgba(150, 226, 255, 0.40) 30%, rgba(60, 150, 245, 0.18) 58%, transparent 78%);
  filter: blur(3px) hue-rotate(var(--hue, 0deg));
  animation-delay: -3s, -6s;
  animation-duration: 17s, 7s;
}

body.page.page-about > .bg-glow--8 {
  width: 220px;
  height: 220px;
  bottom: 38%;
  left: 8%;
  background: radial-gradient(circle at 50% 50%, rgba(230, 252, 255, 0.76) 0%, rgba(120, 216, 255, 0.38) 32%, rgba(40, 140, 240, 0.16) 58%, transparent 78%);
  filter: blur(5px) hue-rotate(var(--hue, 0deg));
  animation-delay: -11s, -3s;
  animation-duration: 25s, 12s;
}

@keyframes glowFloat {
  0%   { opacity: 0.08; transform: translate3d(0, 0, 0) scale(0.92); }
  20%  { opacity: 0.42; transform: translate3d(60px, -90px, 0) scale(1.02); }
  45%  { opacity: 0.58; transform: translate3d(-40px, -170px, 0) scale(1.10); }
  70%  { opacity: 0.50; transform: translate3d(-120px, -80px, 0) scale(1.04); }
  90%  { opacity: 0.32; transform: translate3d(-20px, -10px, 0) scale(0.96); }
  100% { opacity: 0.12; transform: translate3d(0, 0, 0) scale(0.90); }
}

@keyframes glowPulse {
  0%, 100% { filter: blur(6px) drop-shadow(0 0 16px rgba(120, 220, 255, 0.30)); }
  50%      { filter: blur(2px) drop-shadow(0 0 32px rgba(180, 240, 255, 0.48)); }
}

@media (max-width: 860px) {
  body.page.page-about > .bg-orb--1 { width: 320px; height: 320px; top: -80px; left: -100px; filter: blur(60px) hue-rotate(var(--hue, 0deg)); }
  body.page.page-about > .bg-orb--2 { width: 280px; height: 280px; bottom: -40px; right: -60px; filter: blur(56px) hue-rotate(var(--hue, 0deg)); }
  body.page.page-about > .bg-glow--3 { width: 200px; height: 200px; top: 10%; left: -20px; }
  body.page.page-about > .bg-glow--4 { width: 170px; height: 170px; top: 20%; right: -10px; }
  body.page.page-about > .bg-glow--5 { width: 140px; height: 140px; top: 42%; left: 12%; }
  body.page.page-about > .bg-glow--6 { width: 190px; height: 190px; bottom: 20%; right: -30px; }
  body.page.page-about > .bg-glow--7 { width: 120px; height: 120px; top: 56%; right: 22%; }
  body.page.page-about > .bg-glow--8 { width: 150px; height: 150px; bottom: 40%; left: -20px; }
}

@media (max-width: 620px) {
  body.page.page-about > .bg-orb--1 { width: 240px; height: 240px; top: -60px; left: -80px; filter: blur(48px) hue-rotate(var(--hue, 0deg)); }
  body.page.page-about > .bg-orb--2 { width: 220px; height: 220px; bottom: -30px; right: -50px; filter: blur(44px) hue-rotate(var(--hue, 0deg)); }
  body.page.page-about > .bg-glow--3 { width: 170px; height: 170px; top: 8%; left: -40px; }
  body.page.page-about > .bg-glow--4 { width: 150px; height: 150px; top: 18%; right: -20px; }
  body.page.page-about > .bg-glow--5 { width: 120px; height: 120px; top: 40%; left: 6%; }
  body.page.page-about > .bg-glow--6 { width: 160px; height: 160px; bottom: 18%; right: -40px; }
  body.page.page-about > .bg-glow--7 { width: 100px; height: 100px; top: 54%; right: 20%; }
  body.page.page-about > .bg-glow--8 { width: 130px; height: 130px; bottom: 42%; left: -30px; }
}

.icon-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:hover {
  background: rgba(var(--engine-rgb), 0.26);
  color: #fff;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--engine-rgb), 0.45) transparent;
}

.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-thumb {
  background: rgba(var(--engine-rgb), 0.45);
  border-radius: 3px;
}

.msg {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.65;
  animation: msg-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.msg.bot {
  align-self: flex-start;
  background: rgba(var(--engine-rgb), 0.16);
  border: 1px solid rgba(var(--engine-rgb), 0.3);
  border-bottom-left-radius: 4px;
  color: #e8f0fa;
}

.msg.user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom-right-radius: 4px;
  color: #f2f7fd;
}

.msg.bot.msg-summary {
  max-width: 100%;
  padding: 14px 16px;
  background: linear-gradient(180deg,
    rgba(var(--engine-rgb), 0.18),
    rgba(var(--engine-rgb), 0.08));
  border-color: rgba(var(--engine-rgb), 0.36);
}

.msg.bot.msg-summary-head {
  max-width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
}

.summary-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--engine-rgb), 0.32);
  background: rgba(var(--engine-rgb), 0.10);
  animation: msg-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.summary-card-glyph {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 55%),
    linear-gradient(180deg, rgba(var(--engine-rgb), 1), rgba(calc(var(--engine-rgb) - 60), calc(var(--engine-rgb) - 80), calc(var(--engine-rgb) - 120), 0.9));
  border: 1px solid rgba(var(--engine-rgb), 0.6);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3),
              inset 0 0 10px rgba(255,255,255,0.15);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.summary-card-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-card-kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(230, 242, 255, 0.78);
}

.summary-card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
  line-height: 1.35;
}

.summary-card-blurb {
  margin-top: 2px;
  font-size: 14.2px;
  line-height: 1.65;
  color: #eaf2fd;
}

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

.chat-form {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 14px 18px 22px;
  border-top: 1px solid rgba(var(--engine-rgb), 0.32);
  background:
    linear-gradient(0deg,
      rgba(8, 14, 28, 0.98) 0%,
      rgba(8, 14, 28, 0.96) 70%,
      rgba(8, 14, 28, 0.92) 100%);
  box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.32);
}

#chat-input {
  flex: 1;
  min-width: 0;
  padding: 12px 15px;
  border-radius: 999px;
  border: 1px solid rgba(var(--engine-rgb), 0.32);
  background: rgba(6, 12, 24, 0.92);
  color: #eaf3ff;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#chat-input::placeholder { color: rgba(150, 175, 205, 0.55); }
#chat-input:focus {
  border-color: rgba(var(--engine-rgb), 0.78);
  box-shadow: 0 0 0 3px rgba(var(--engine-rgb), 0.12);
}

.icon-btn.send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(var(--engine-rgb), 0.34);
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
}

.icon-btn.send:hover {
  background: rgba(var(--engine-rgb), 0.52);
  box-shadow: 0 0 0 2px rgba(var(--engine-rgb), 0.2),
              0 10px 24px rgba(0, 0, 0, 0.42);
  transform: translateY(-1px);
}

.icon-btn.chat-mic {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(var(--engine-rgb), 0.16);
  color: #f4f8ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease, color 0.2s ease;
}
.icon-btn.chat-mic .mic-ico {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 2;
}
.icon-btn.chat-mic .mic-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(var(--engine-rgb), 0.55);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.25s ease;
  opacity: 0;
}
.icon-btn.chat-mic:hover:not(:disabled) {
  background: rgba(var(--engine-rgb), 0.28);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(var(--engine-rgb), 0.15),
              0 10px 24px rgba(0, 0, 0, 0.36);
}
.icon-btn.chat-mic.is-listening {
  background: rgba(235, 80, 95, 0.18);
  color: #ffb6bd;
  box-shadow: 0 0 0 2px rgba(235, 80, 95, 0.22),
              0 0 28px rgba(235, 80, 95, 0.18);
  animation: mic-bounce 1.1s ease-in-out infinite;
}
.icon-btn.chat-mic.is-listening .mic-pulse {
  opacity: 1;
  animation: mic-pulse 1.25s ease-out infinite;
}
.icon-btn.chat-mic.chat-mic-error {
  color: #ff939c;
}
.icon-btn.chat-mic-disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
#chat-form[data-mic-supported="0"] .chat-mic {
  display: inline-flex;
}
@keyframes mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(235, 80, 95, 0.55); }
  80%  { box-shadow: 0 0 0 18px rgba(235, 80, 95, 0.00); }
  100% { box-shadow: 0 0 0 0 rgba(235, 80, 95, 0.00); }
}
@keyframes mic-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

/* ---------- lead-capture card + typing indicator (chatbot backend) ---------- */
.msg.bot.lead-form-card {
  max-width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
}

.lead-form-inner {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(var(--engine-rgb), 0.36);
  background: linear-gradient(180deg, rgba(var(--engine-rgb), 0.18), rgba(var(--engine-rgb), 0.08));
}

.lead-form-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
}

.lead-form-sub {
  margin-top: 3px;
  font-size: 13px;
  color: rgba(230, 242, 255, 0.75);
}

.lead-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lead-form input {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(var(--engine-rgb), 0.32);
  background: rgba(6, 12, 24, 0.92);
  color: #eaf3ff;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}

.lead-form input:focus {
  border-color: rgba(var(--engine-rgb), 0.78);
}

.lead-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.lead-form-submit, .lead-form-skip {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.lead-form-submit {
  background: rgba(var(--engine-rgb), 0.55);
  color: #fff;
}

.lead-form-submit:hover { background: rgba(var(--engine-rgb), 0.72); }

.lead-form-skip {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(230, 242, 255, 0.7);
}

.lead-form-skip:hover { border-color: rgba(255, 255, 255, 0.32); }

.lead-form-status {
  font-size: 12px;
  color: rgba(255, 150, 160, 0.9);
  min-height: 14px;
}

.lead-form-thanks {
  font-size: 14px;
  color: #eaf2fd;
}

.msg.bot.msg-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 13px 16px;
}

.msg.bot.msg-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--engine-rgb), 0.85);
  animation: typing-bounce 1.1s ease-in-out infinite;
}

.msg.bot.msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.msg.bot.msg-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.msg.bot .msg-text { line-height: 1.55; }

.msg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.msg-chip {
  appearance: none;
  border: 1px solid rgba(var(--engine-rgb), 0.45);
  background: linear-gradient(180deg,
    rgba(var(--engine-rgb), 0.14) 0%,
    rgba(var(--engine-rgb), 0.06) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #eaf2fd;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
              0 1px 2px rgba(0,0,0,0.25);
  text-align: left;
  max-width: 100%;
  word-break: break-word;
}

.msg-chip:hover {
  border-color: rgba(var(--engine-rgb), 0.85);
  background: linear-gradient(180deg,
    rgba(var(--engine-rgb), 0.26) 0%,
    rgba(var(--engine-rgb), 0.12) 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
              0 3px 8px rgba(0,0,0,0.35),
              0 0 0 1px rgba(var(--engine-rgb), 0.25);
}

.msg-chip:active {
  transform: translateY(0);
}

/* ---------- chat toggle button (engine pages) ---------- */
#chat-toggle {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 55;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #eaf3ff;
  border: 1px solid rgba(var(--engine-rgb), 0.55);
  background: rgba(var(--engine-rgb), 0.34);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45),
              0 0 24px rgba(var(--engine-rgb), 0.35);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  transition: opacity 0.45s ease, visibility 0.45s ease,
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

#chat-toggle.ready {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

#chat-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#chat-toggle:hover {
  background: rgba(var(--engine-rgb), 0.55);
  transform: scale(1.06);
}

body.page.chat-open #chat-toggle {
  transform: translateX(calc(-1 * (var(--panel-w) + 16px))) scale(0.9);
  opacity: 0;
  visibility: hidden;
}

.chat-toggle-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(var(--engine-rgb), 0.45);
  opacity: 0.7;
  animation: chat-ring 2.8s ease-out infinite;
  pointer-events: none;
}

@keyframes chat-ring {
  0%   { transform: scale(0.9); opacity: 0.65; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 768px) {
  #chat-toggle { right: 18px; bottom: 18px; width: 52px; height: 52px; }
  body.page.chat-open #chat-toggle { transform: scale(0.9); opacity: 0; visibility: hidden; }
}

@media (min-width: 861px) {
  .cta-mobile-only { display: none !important; }
}

@media (max-width: 860px) {
  .cta-desktop-only { display: none !important; }
}

/* ---------- contact form wizard (pages.css copy of style.css rules) ---------- */
.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 18px 26px;
  border-radius: 14px;
  border: 1px solid rgba(140, 180, 240, 0.18);
  background: rgba(10, 20, 44, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
  text-align: left;
}

.progress-wrap {
  position: relative;
  padding: 6px 2px 18px;
  margin-bottom: 4px;
}
.form-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: step;
  position: relative;
  z-index: 2;
}
.form-steps li {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-dim);
}
.form-steps li::after { display: none; }

.step-dot {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(180, 208, 248, 0.75);
  background: rgba(10, 20, 48, 0.0);
  border: 1.5px solid rgba(120, 164, 232, 0.28);
  counter-increment: step;
  transition: all 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.step-dot::before { content: counter(step); }

.form-steps li.active { color: #eaf3ff; }
.form-steps li.active .step-dot {
  color: #0b1830;
  background: linear-gradient(180deg, #bde1ff 0%, #4f9cff 100%);
  border-color: #8fc4ff;
  box-shadow: 0 0 0 3px rgba(89, 156, 255, 0.16),
              0 0 14px rgba(90, 160, 255, 0.5);
  transform: scale(1.04);
}
.form-steps li.done { color: #c6e1ff; }
.form-steps li.done .step-dot {
  background: rgba(79, 156, 255, 0.18);
  border-color: rgba(124, 184, 255, 0.55);
  color: #e0eeff;
  box-shadow: 0 0 0 3px rgba(79, 156, 255, 0.06);
}
.step-label { display: none !important; }

.progress-track {
  position: absolute;
  top: calc(15px + 2px);
  left: calc(12.5% + 15px);
  right: calc(12.5% + 15px);
  height: 3px;
  z-index: 1;
  border-radius: 999px;
  background: rgba(120, 164, 232, 0.14);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(120, 164, 232, 0.08);
}
.progress-fill {
  display: block;
  width: var(--progress-pct, 0%);
  height: 100%;
  background: linear-gradient(90deg, #5cb4ff 0%, #2f8cff 50%, #6da9ff 100%);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(90, 160, 255, 0.45);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}

.form-step {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  animation: form-step-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.form-step[hidden] { display: none !important; }
@keyframes form-step-in {
  from { opacity: 0; transform: translateY(10px) scale(0.992); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.form-step-title {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 0;
  margin: 2px 0 6px;
  line-height: 1.3;
  display: block;
  width: 100%;
}

.form-step-hint {
  margin: 0 0 6px;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  width: 100%;
  display: block;
}

.engine-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.engine-pick input { position: absolute; opacity: 0; pointer-events: none; }

.pick-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(140, 180, 240, 0.18);
  background: rgba(10, 22, 48, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink-dim);
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.2, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.pick-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 0% 0%, rgba(79, 156, 255, 0.16) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.engine-pick:hover .pick-card {
  border-color: rgba(143, 196, 255, 0.42);
  background: rgba(18, 42, 86, 0.68);
  color: #e4efff;
  transform: translateY(-1px);
}
.engine-pick:hover .pick-card::after { opacity: 1; }
.engine-pick input:checked + .pick-card {
  color: #fff;
  border-color: rgba(143, 196, 255, 0.7);
  background: rgba(47, 141, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(143, 196, 255, 0.34),
              0 18px 44px rgba(0, 0, 0, 0.42),
              inset 0 0 22px rgba(79, 156, 255, 0.26);
  transform: translateY(-2px);
}
.engine-pick input:checked + .pick-card::after { opacity: 1; }

.pick-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  z-index: 1;
}
.pick-tag {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(140, 180, 240, 0.28);
  background: rgba(10, 20, 44, 0.5);
  color: var(--ink-dim);
  z-index: 1;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.engine-pick input:checked + .pick-card .pick-tag {
  color: #e0eeff;
  border-color: rgba(143, 196, 255, 0.55);
  background: rgba(79, 156, 255, 0.28);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}
.field > span {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(210, 228, 255, 0.72);
  font-weight: 600;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  color: #f1f7ff;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1px solid rgba(140, 180, 240, 0.22);
  background: rgba(6, 14, 34, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}
.field textarea {
  resize: none;
  min-height: 68px;
  max-height: 68px;
  line-height: 1.5;
  padding: 9px 13px;
  overflow: auto;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(175, 205, 255, 0.38);
  letter-spacing: 0.02em;
}
.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: rgba(143, 196, 255, 0.42);
  background: rgba(12, 28, 62, 0.72);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(143, 196, 255, 0.78);
  background: rgba(18, 40, 84, 0.78);
  box-shadow:
    0 0 0 3px rgba(79, 156, 255, 0.24),
    0 10px 30px rgba(0, 0, 0, 0.35);
}

.review {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid rgba(140, 180, 240, 0.16);
  background: rgba(8, 16, 34, 0.5);
  margin-bottom: 2px;
}
.review .rev-row { display: flex; flex-direction: column; gap: 2px; }
.review .rev-row.full { grid-column: 1 / -1; }
.review .rev-label { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); }
.review .rev-value { font-size: 13px; color: #eaf3ff; line-height: 1.45; word-break: break-word; }
.review .rev-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.review .rev-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: #cfe0f5;
  border: 1px solid rgba(143, 196, 255, 0.45);
  background: rgba(79, 156, 255, 0.18);
}
.review .rev-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8fc4ff;
  box-shadow: 0 0 5px rgba(143, 196, 255, 0.8);
}

.consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px dashed rgba(140, 180, 240, 0.28);
  background: rgba(8, 16, 34, 0.35);
}
.consent input { position: absolute; opacity: 0; pointer-events: none; }
.consent-box {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(140, 180, 240, 0.4);
  background: rgba(5, 10, 24, 0.5);
  display: grid;
  place-items: center;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.consent-box svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.consent input:checked + .consent-box {
  background: linear-gradient(180deg, #5cabff, #2f7cc0);
  border-color: #8fc4ff;
  box-shadow: 0 0 10px rgba(90, 160, 255, 0.55);
}
.consent input:checked + .consent-box svg { opacity: 1; transform: scale(1); }
.consent-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
}
.consent.invalid {
  border-color: rgba(240, 130, 140, 0.55);
  background: rgba(60, 8, 16, 0.25);
}

.form-step-done {
  align-items: center;
  text-align: center;
  padding: 8px 6px 2px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  gap: 7px;
}
.done-check {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(90, 220, 160, 0.1);
  border: 1px solid rgba(130, 230, 180, 0.5);
  display: grid;
  place-items: center;
  margin: -2px auto 6px;
  animation: done-pop 0.65s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  flex-shrink: 0;
}
.done-check svg { width: 36px; height: 36px; }
.done-check circle {
  fill: none;
  stroke: rgba(130, 230, 180, 0.45);
  stroke-width: 2;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  animation: draw-ring 0.8s cubic-bezier(0.6, 0, 0.2, 1) 0.05s forwards;
}
.done-check path {
  fill: none;
  stroke: #8fd3a8;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: draw-tick 0.55s ease 0.55s forwards;
}
@keyframes done-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes draw-ring { to { stroke-dashoffset: 0; } }
@keyframes draw-tick { to { stroke-dashoffset: 0; } }

.done-title {
  font-size: clamp(14px, 1.45vw, 17px);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0 0 5px;
}
.done-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto 2px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}
.done-steps li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 9px;
  border: 1px solid rgba(140, 180, 240, 0.16);
  background: rgba(8, 16, 34, 0.45);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}
.done-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #0b1830;
  background: linear-gradient(180deg, #bde1ff, #4f9cff);
  box-shadow: 0 0 8px rgba(90, 160, 255, 0.5);
}
.done-signoff {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  margin: 1px 0 0;
}
.form-foot-done {
  justify-content: center;
  margin-top: 4px;
}
.form-foot-done .contact-submit { height: 34px; font-size: 9.5px; letter-spacing: 0.16em; padding: 0 16px; gap: 8px; }
.form-foot-done .contact-submit > svg { width: 13px; height: 13px; }

.booking-panel {
  margin-top: 4px;
  padding: 4px 6px 2px;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.booking-panel.booking-cta-inline {
  margin-top: 6px;
  padding: 8px 12px;
  max-width: 560px;
  border-radius: 11px;
  border: 1px solid rgba(140, 180, 240, 0.18);
  background:
    radial-gradient(circle at 0% 0%, rgba(108, 140, 255, 0.18), transparent 55%),
    rgba(8, 16, 34, 0.62);
}
.booking-cta-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  align-items: center;
}
.booking-cta-left {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
}
.booking-cta-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b9cbff;
  padding-left: 1px;
  white-space: nowrap;
}
.booking-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #7a9aff, #4f78e0);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 5px 16px rgba(80, 130, 240, 0.28), inset 0 1px 0 rgba(255,255,255,0.15);
  font-family: inherit;
  transition: transform .14s ease, box-shadow .2s ease;
  min-width: 140px;
  justify-content: center;
}
.booking-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(80, 130, 240, 0.38), inset 0 1px 0 rgba(255,255,255,0.18);
}
.booking-cta-btn:active { transform: translateY(0); }
.booking-cta-btn svg { width: 13px; height: 13px; }
.booking-cta-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.booking-cta-skip {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-dim);
  text-align: right;
  max-width: 250px;
}
@media (max-width: 640px) {
  .booking-cta-row { grid-template-columns: 1fr; gap: 12px; }
  .booking-cta-right { justify-content: flex-start; }
  .booking-cta-skip { text-align: left; max-width: none; }
  .booking-cta-btn { min-width: 0; width: 100%; }
}
.booking-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}
.booking-hd h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  text-transform: uppercase;
}
.booking-hd p {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-dim);
}
.booking-empty,
.booking-error,
.booking-loading {
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid rgba(140, 180, 240, 0.14);
  background: rgba(8, 16, 34, 0.42);
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.booking-error { color: #ff9aae; border-color: rgba(240, 130, 140, 0.35); background: rgba(60, 8, 16, 0.28); }
.booking-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.booking-slot {
  position: relative;
  padding: 9px 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(140, 180, 240, 0.22);
  background:
    radial-gradient(circle at 20% 15%, rgba(110, 170, 255, 0.22), transparent 55%),
    rgba(8, 16, 34, 0.62);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
  user-select: none;
}
.booking-slot:hover {
  border-color: rgba(110, 170, 255, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(60, 120, 220, 0.18);
}
.booking-slot.selected {
  border-color: rgba(150, 180, 255, 0.72);
  background:
    radial-gradient(circle at 30% 20%, rgba(140, 175, 255, 0.38), transparent 60%),
    linear-gradient(180deg, rgba(56, 96, 200, 0.35), rgba(28, 52, 120, 0.45));
  box-shadow: 0 0 0 1px rgba(150, 180, 255, 0.35), 0 8px 22px rgba(80, 130, 240, 0.22);
}
.booking-slot .slot-date {
  font-size: 10.5px;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.booking-slot .slot-day {
  font-size: 12px;
  color: #dbe7ff;
  margin-top: 2px;
}
.booking-slot .slot-time {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.booking-more {
  margin-top: 10px;
  text-align: center;
}
.booking-more-btn {
  background: transparent;
  border: none;
  color: #9fbaff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
}
.booking-more-btn:hover { color: #fff; background: rgba(108, 140, 255, 0.08); }
.booking-more-btn[hidden] { display: none !important; }

.booking-confirm {
  margin-top: 10px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(140, 180, 240, 0.18);
  background: rgba(8, 16, 34, 0.6);
}
.booking-confirm-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.booking-confirm-slot {
  font-size: 12.5px;
  color: #fff;
  font-weight: 600;
}
.booking-confirm-slot span { color: var(--ink-dim); font-weight: 500; margin-left: 4px; }
.booking-confirm-change {
  background: none;
  border: none;
  color: #9fbaff;
  font-size: 11.5px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.booking-confirm-change:hover { background: rgba(108, 140, 255, 0.1); }
.booking-confirm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.booking-confirm-grid > div.full { grid-column: 1 / -1; }
.booking-confirm label {
  display: block;
  font-size: 10.5px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 3px;
}
.booking-confirm input,
.booking-confirm textarea {
  width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(140, 180, 240, 0.18);
  background: rgba(5, 10, 24, 0.75);
  color: var(--ink);
  font-size: 12.5px;
  font-family: inherit;
  box-sizing: border-box;
}
.booking-confirm input:focus,
.booking-confirm textarea:focus {
  outline: none;
  border-color: rgba(108, 140, 255, 0.62);
}
.booking-confirm textarea { min-height: 34px; resize: vertical; }
.booking-confirm-foot {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.booking-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #7a9aff, #4f78e0);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px rgba(80, 130, 240, 0.28);
  font-family: inherit;
}
.booking-book-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(80, 130, 240, 0.34); }
.booking-book-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; }
.booking-book-btn svg { width: 14px; height: 14px; }

.booking-success {
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(92, 196, 166, 0.3);
  background: rgba(14, 40, 32, 0.45);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}
.booking-success svg {
  width: 28px; height: 28px; color: #5cc4a6;
}
.booking-success p { margin: 0; font-size: 12.5px; color: #dff6ec; line-height: 1.5; }
.booking-success p strong { color: #fff; }
.booking-success a { color: #9fbaff; }

.booking-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 18, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 6000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.booking-modal.open { opacity: 1; pointer-events: auto; }
.booking-modal-card {
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 18px;
  border: 1px solid rgba(140, 180, 240, 0.22);
  background:
    radial-gradient(1200px 500px at 50% -20%, rgba(108, 140, 255, 0.18), transparent 60%),
    rgba(8, 14, 30, 0.96);
  padding: 26px 24px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(10px) scale(0.98);
  transition: transform .25s cubic-bezier(.2,1.3,.4,1);
}
.booking-modal.open .booking-modal-card { transform: translateY(0) scale(1); }
.booking-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.booking-modal-head h3 {
  margin: 0;
  font-size: 17px;
  color: #fff;
  font-weight: 600;
}
.booking-modal-head p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.booking-modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-dim);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.booking-modal-close:hover { color: #fff; border-color: rgba(140, 180, 240, 0.35); }
.booking-modal-card .booking-panel { max-width: 100%; margin-top: 4px; padding-top: 4px; }
.booking-modal-card .booking-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 520px) {
  .booking-grid,
  .booking-modal-card .booking-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-confirm-grid { grid-template-columns: 1fr; }
}

#main-contact-form,
#contact-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 18px;
}
.form-step {
  grid-column: 1 / 1;
  grid-row: 2 / 3;
  grid-area: 2 / 1 / 3 / 2;
  min-height: 300px;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 62px 0;
  scrollbar-width: thin;
  position: relative;
  scroll-padding-bottom: 62px;
}
.form-step::-webkit-scrollbar { width: 0; height: 0; display: none; }

.form-step > .form-foot.form-foot-nav,
.form-step > .form-foot.form-foot-done {
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 !important;
  padding: 10px 2px 0;
  background: linear-gradient(180deg, rgba(10,20,44,0) 0%, rgba(10,20,44,0.86) 22%, rgba(10,20,44,0.94) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(140, 180, 240, 0.12);
  z-index: 5;
  transform: translateZ(0);
}
.form-step > .form-foot.form-foot-nav {
  margin-top: 12px !important;
}
.form-step > .form-foot.form-foot-done {
  margin-top: 8px !important;
  background: linear-gradient(180deg, rgba(10,20,44,0) 0%, rgba(10,20,44,0.9) 25%, rgba(10,20,44,0.97) 100%);
}

.form-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
}
.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 20px 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(160, 195, 240, 0.34);
  background:
    radial-gradient(circle at 30% 30%, rgba(90, 160, 255, 0.35), transparent 55%),
    rgba(8, 16, 34, 0.72);
  color: #eaf3ff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
  flex-shrink: 0;
}
.contact-submit > svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.contact-submit:hover {
  border-color: rgba(190, 215, 250, 0.62);
  background:
    radial-gradient(circle at 30% 30%, rgba(110, 180, 255, 0.5), transparent 55%),
    rgba(20, 44, 82, 0.78);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35),
              inset 0 0 18px rgba(79, 156, 255, 0.16);
  transform: translateY(-1px);
}
.contact-submit:active {
  transform: translateY(0);
}
.contact-next,
.contact-send {
  background:
    radial-gradient(circle at 30% 20%, rgba(120, 200, 255, 0.55), transparent 55%),
    linear-gradient(180deg, rgba(55, 135, 255, 0.62), rgba(24, 70, 150, 0.68));
  border-color: rgba(143, 196, 255, 0.55);
  color: #fff;
}
.contact-next:hover,
.contact-send:hover {
  background:
    radial-gradient(circle at 30% 20%, rgba(150, 220, 255, 0.7), transparent 55%),
    linear-gradient(180deg, rgba(75, 160, 255, 0.78), rgba(28, 85, 180, 0.78));
  box-shadow: 0 0 0 1px rgba(143, 196, 255, 0.45),
              0 12px 30px rgba(20, 70, 160, 0.45),
              inset 0 0 16px rgba(160, 210, 255, 0.25);
}

.form-foot-nav {
  justify-content: space-between;
  margin-top: 6px;
}
.form-foot-nav > span:first-child:empty { display: block; flex: 1; }
.contact-prev {
  background: transparent;
  border-color: rgba(140, 180, 240, 0.24);
  color: var(--ink-dim);
}
.contact-prev:hover {
  background: rgba(140, 185, 240, 0.10);
  border-color: rgba(190, 215, 250, 0.4);
  color: #cfe0f5;
}
.contact-submit[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.form-note {
  margin: -6px 4px 0;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  min-height: 1.3em;
}
.form-note.ok { color: #8fd3a8; }
.form-note.bad { color: #f0929a; }

@media (max-width: 860px) {
  .form-card {
    padding: 14px 10px 12px;
    border-radius: 13px;
    box-sizing: border-box;
  }
  .contact-form {
    padding: 10px 12px 10px;
    margin-top: 2px;
    margin-bottom: 8px;
    gap: 8px;
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(620px, 78vh);
  }
  .field-row { grid-template-columns: 1fr; gap: 6px; }
  .progress-wrap { padding: 1px 0 5px; margin-bottom: 0px; }
  .form-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0px;
  }
  .step-dot { width: 22px; height: 22px; font-size: 10.5px; flex-basis: 22px; }
  .progress-track {
    top: calc(11px + 2px);
    left: calc(12.5% + 11px);
    right: calc(12.5% + 11px);
    height: 2.2px;
  }
  .step-label { display: none !important; }
  .form-step-title { font-size: 13px; margin: 0 0 2px; letter-spacing: 0.025em; line-height: 1.2; }
  .form-step-hint { font-size: 9.5px; line-height: 1.38; margin: 0 0 2px; }
  .engine-picks { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .form-step { gap: 6px; padding-bottom: 54px; }
  #main-contact-form,
  #contact-form { gap: 7px; }
  .pick-card { padding: 7px 8px; gap: 5px; border-radius: 9px; grid-template-columns: 1fr; }
  .pick-name { font-size: 11.5px; letter-spacing: 0.015em; }
  .pick-tag { font-size: 7.5px; padding: 1px 5px; letter-spacing: 0.08em; }
  .review { grid-template-columns: 1fr; gap: 8px; }
  .consent {
    grid-template-columns: 18px 1fr;
    gap: 7px;
    padding: 8px;
    border-radius: 9px;
  }
  .consent-box { width: 17px; height: 17px; }
  .form-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    margin-top: 4px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  .form-foot-nav {
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-top: 4px;
    box-sizing: border-box;
  }
  .contact-submit {
    height: 34px;
    padding: 0 10px 0 13px;
    font-size: 9px;
    letter-spacing: 0.14em;
    gap: 6px;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
  }
  .contact-next,
  .contact-send {
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 0 12px 0 15px;
    margin-left: auto;
  }
  .contact-restart {
    flex: 1 1 100%;
    justify-content: center;
  }
  .contact-prev {
    padding: 0 9px 0 11px;
    flex-shrink: 0;
  }
  .contact-submit > svg { width: 12.5px; height: 12.5px; }
  .form-foot-nav > span:first-child:empty { display: none; }
  .form-step-done { padding: 4px 3px 2px; gap: 5px; }
  .done-check { width: 32px; height: 32px; margin: -1px auto 3px; }
  .done-check svg { width: 30px; height: 30px; }
  .done-check circle { stroke-dasharray: 106; stroke-dashoffset: 106; }
  .done-check path { stroke-width: 3; stroke-dasharray: 28; stroke-dashoffset: 28; }
  .done-title { margin: 0 0 4px; }
  .done-steps { gap: 5px; margin-bottom: 2px; }
  .done-steps li { grid-template-columns: 20px 1fr; gap: 6px; padding: 5px 8px; font-size: 11px; line-height: 1.4; }
  .done-step-num { width: 20px; height: 20px; font-size: 9.5px; }
  .done-signoff { font-size: 10.5px; }
  .form-foot-done { margin-top: 4px; }
  .booking-panel { margin-top: 4px; padding: 4px 4px 2px; }
  .booking-panel.booking-cta-inline { margin-top: 6px; padding: 7px 10px; border-radius: 10px; }
  .booking-cta-row { grid-template-columns: 1fr; gap: 6px; }
  .booking-cta-left { grid-template-columns: auto 1fr; gap: 6px; align-items: center; }
  .booking-cta-label { font-size: 9.5px; letter-spacing: 0.12em; }
  .booking-cta-btn { padding: 8px 12px; font-size: 11.5px; gap: 5px; min-width: 0; }
  .booking-cta-btn svg { width: 12px; height: 12px; }
  .booking-cta-right { justify-content: flex-start; }
  .booking-cta-skip { font-size: 10.5px; line-height: 1.35; text-align: left; max-width: none; margin: 0; }
  .field { gap: 3px; }
  .field > span { font-size: 9.5px; letter-spacing: 0.18em; line-height: 1; }
  .field input,
  .field textarea,
  .field select {
    padding: 8px 11px;
    font-size: 13px;
    line-height: 1.35;
    border-radius: 8px;
    min-height: 36px;
  }
  .field textarea {
    min-height: 52px;
    max-height: 52px;
    padding: 7px 11px;
    line-height: 1.4;
  }
  .review { padding: 9px 10px; gap: 6px 10px; }
  .review .rev-row { gap: 1px; }
  .review .rev-label { font-size: 8px; letter-spacing: 0.18em; }
  .review .rev-value { font-size: 12px; line-height: 1.35; }
  .review .rev-chips { gap: 4px; }
  .review .rev-chip {
    padding: 3px 7px;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    gap: 4px;
  }
  .review .rev-chip::before { width: 5px; height: 5px; }
  .consent-text { font-size: 10.5px; line-height: 1.42; }
  .contact-form-col { position: static; }
  .contact-layout-section {
    padding-top: clamp(30px, 10vh, 54px);
    padding-bottom: clamp(30px, 8vh, 54px);
  }
  .contact-layout { gap: 14px; padding: 10px 8px 20px; }
}