/* ===== Design tokens ===== */
:root {
  --color-bg: #000000;
  --color-bg-alt: #03060f;
  --color-ink: #02040b;
  --color-surface: #070d1f;
  --color-text: #ffffff;
  --color-muted: #a3adc2;
  --color-navy: #0b1f5c;
  --color-primary: #1d3f9e;
  --color-primary-light: #3a63d8;
  --color-accent: #7fa2ff;  /* light blue for small text on black, stays readable */
  --color-border: rgba(127, 162, 255, 0.14);
  --color-border-strong: rgba(127, 162, 255, 0.38);
  --glow: 0 0 0 1px rgba(127, 162, 255, 0.12), 0 24px 60px -32px rgba(29, 63, 158, 0.85);

  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 5rem;
  --section-pad: clamp(4.5rem, 9vw, 7rem);
  --stack: 2.5rem; /* gap between a section heading and its content */

  --radius: 10px;
  --radius-lg: 18px;
  --max-width: 1100px;

  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Registered so the portrait's idle sway can animate them */
@property --rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 var(--space-2); }
h1, h2 { font-weight: 200; line-height: 1.05; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.5rem, 7vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); margin-bottom: 1.25rem; }
h3 { font-weight: 400; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; }
strong { font-weight: 500; }
p { margin: 0 0 var(--space-2); }
a { color: var(--color-accent); }
img { max-width: 100%; display: block; }

.container { width: min(100% - 2rem, var(--max-width)); margin-inline: auto; }
.container.narrow { max-width: 720px; }

.eyebrow {
  margin-bottom: 0.9rem;
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 0.78rem 1.55rem;
  border: 1px solid rgba(127, 162, 255, 0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(58, 99, 216, 0.38), rgba(29, 63, 158, 0.16));
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.3s var(--ease-cinematic), box-shadow 0.3s, border-color 0.3s, background 0.3s;
}
.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(159, 184, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(127, 162, 255, 0.2), 0 0 28px -8px rgba(58, 99, 216, 0.75);
}
.btn-outline { background: transparent; border-color: rgba(255, 255, 255, 0.22); box-shadow: none; }
.btn-outline:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.04); }
.btn-small { padding: 0.45rem 1.05rem; font-size: 0.85rem; }

/* ===== Header ===== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
.site-header.scrolled {
  background: rgba(2, 4, 11, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1.1rem; }
.logo { font-weight: 300; font-size: 1.05rem; color: var(--color-text); text-decoration: none; letter-spacing: 0.14em; }
.logo span { color: var(--color-accent); }
.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav a:not(.btn) { color: var(--color-muted); text-decoration: none; font-size: 0.88rem; font-weight: 400; letter-spacing: 0.04em; transition: color 0.2s; }
.site-nav a:not(.btn):hover { color: #fff; }

.nav-toggle { display: none; background: none; border: 0; padding: var(--space-1); cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--color-text); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 1.25rem;
    padding: var(--space-3);
    background: rgba(2, 4, 11, 0.96);
    border-bottom: 1px solid var(--color-border);
  }
  .site-nav.open { display: flex; }
}

/* ===== Letterbox intro ===== */
.letterbox { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.letterbox-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5vh;
  background: #000;
  transition: transform 1.4s var(--ease-cinematic) 0.2s;
}
.letterbox-top { top: 0; }
.letterbox-bottom { bottom: 0; }
html:not(.js) .letterbox { display: none; }
.loaded .letterbox-top { transform: translateY(-100%); }
.loaded .letterbox-bottom { transform: translateY(100%); }

/* ===== Hero ===== */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 7rem var(--space-8);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-glow {
  position: absolute;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(40% 35% at 50% 40%, rgba(29, 63, 158, 0.55), transparent 70%),
    radial-gradient(30% 30% at 20% 70%, rgba(11, 31, 92, 0.7), transparent 70%),
    radial-gradient(30% 30% at 80% 65%, rgba(58, 99, 216, 0.25), transparent 70%);
  animation: glow-drift 18s ease-in-out infinite alternate;
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(127, 162, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 162, 255, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
@keyframes glow-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* Background video, with the poster image underneath as the fallback.
   In 3D mode, js/hero-scene.js zooms .hero-media-zoom into the laptop screen. */
.hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-media-zoom { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video { opacity: 0; transition: opacity 1.2s var(--ease-cinematic); }
.hero-video.is-playing { opacity: 1; }
/* Deeper, punchier footage in the static hero: true blacks, more contrast */
.hero-poster,
.hero-video { filter: contrast(1.18) saturate(0.9) brightness(0.8); }
/* Navy-to-ink grade over the footage, falling off to black */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(11, 31, 92, 0.28), transparent 70%),
    linear-gradient(180deg, rgba(2, 4, 11, 0.55) 0%, rgba(3, 9, 30, 0.62) 55%, #000 100%);
}
.hero-3d .hero-grid { display: none; }
/* In 3D mode the video is drawn by the WebGL canvas; keep the raw HTML video (white screen) hidden under black until it fades in */
.hero-3d .hero-overlay { background: #000; opacity: 1; }

/* Scroll-driven 3D scene. .hero-3d (set in index.html) makes the wrapper tall
   and pins the hero; js/hero-scene.js scrubs the scene as you scroll. */
.hero-scroll { position: relative; }
.hero-3d .hero-scroll { height: 400vh; }
@media (max-width: 768px) {
  .hero-3d .hero-scroll { height: 300vh; }
}
.hero-3d .hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding-block: 5.5rem 3rem;
}
.hero-end { position: absolute; left: 0; bottom: 0; width: 1px; height: 100vh; height: 100svh; pointer-events: none; }

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: none;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-cinematic);
}
.hero-3d .hero-canvas { display: block; }
.hero-canvas.is-ready { opacity: 1; }

.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 95% at 50% 45%, transparent 38%, rgba(0, 0, 0, 0.5) 74%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(to bottom, transparent 78%, var(--color-bg));
}
.hero-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fff, rgba(127, 162, 255, 0.6) 35%, transparent 75%);
}
.hero-grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: var(--grain, 0.16);
  mix-blend-mode: overlay; /* grain without lifting the blacks to gray */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

.hero-content { position: relative; z-index: 2; }

/* The logo is the big headline. In 3D mode it stays invisible but keeps its
   space, and the 3D letters land exactly on top of it. */
.hero-logo {
  margin: 0 0 var(--space-3);
  font-size: clamp(3rem, 12vw, 7.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.16em;
}
/* padding-left balances the letter-spacing after the last letter, so the word sits centered.
   The mask cuts the same horizontal slice lines as the 3D logo (seen in the static hero). */
.hero-logo-word {
  display: inline-block;
  padding-left: 0.16em;
  --cut: 0.9%;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(41.3% - var(--cut)), transparent 0 calc(41.3% + var(--cut)), #000 0 calc(55.8% - var(--cut)), transparent 0 calc(55.8% + var(--cut)), #000 0 calc(71.8% - var(--cut)), transparent 0 calc(71.8% + var(--cut)), #000 0);
  mask-image: linear-gradient(to bottom, #000 calc(41.3% - var(--cut)), transparent 0 calc(41.3% + var(--cut)), #000 0 calc(55.8% - var(--cut)), transparent 0 calc(55.8% + var(--cut)), #000 0 calc(71.8% - var(--cut)), transparent 0 calc(71.8% + var(--cut)), #000 0);
}
.hero-logo-accent { color: var(--color-accent); }

.hero-skip {
  position: absolute;
  right: 1rem;
  bottom: 1.25rem;
  z-index: 3;
  display: none;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(2, 4, 11, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.hero-skip:hover,
.hero-skip:focus-visible { border-color: #fff; background: rgba(29, 63, 158, 0.6); }
.hero-skip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.hero-3d .hero-skip { display: inline-block; }

.hero-cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  z-index: 3;
  display: none;
  transform: translateX(-50%);
  color: var(--color-muted);
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.hero-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 28px;
  margin: 0.5rem auto 0;
  background: linear-gradient(var(--color-accent), transparent);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero-3d .hero-cue { display: block; }

@media (max-width: 520px) {
  .hero-skip { right: 0.75rem; bottom: 0.9rem; }
  .hero-cue { display: none !important; }
}
@media (max-height: 700px) {
  .hero-logo { font-size: clamp(2.75rem, 10vw, 5rem); }
  .hero .lead { font-size: 1rem; }
  .hero-actions { margin-top: var(--space-3); }
}

.hero-title { max-width: 22ch; margin-inline: auto; font-size: clamp(1.5rem, 3.6vw, 2.5rem); font-weight: 200; letter-spacing: -0.025em; }
.lead { font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 300; color: var(--color-muted); max-width: 560px; margin-inline: auto; }
.hero-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }

/* Headline words rise out of a mask, one after another */
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.word-inner {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  transition: transform 1.2s var(--ease-cinematic);
  transition-delay: var(--delay, 0ms);
}
.loaded .word-inner { transform: none; }

/* ===== Hero on phones, tablets and low-power devices (.hero-lite) =====
   Set in index.html. No 3D, no pinning, no scroll-driven animation: the small video
   loops behind a dark overlay, and the logo and headline fade up once on load.
   The hero's height uses svh (with vh as the fallback, on .hero above), which stays
   fixed when the browser bar shows or hides, so nothing jumps. */
.hero-lite .letterbox { display: none; }
.hero-lite .hero-media-zoom { will-change: auto; }
.hero-lite .hero-poster,
.hero-lite .hero-video { filter: none; } /* video filters are costly on phones; the overlay does the grading */
.hero-lite .hero-overlay {
  background:
    radial-gradient(ellipse 80% 55% at 50% 35%, rgba(11, 31, 92, 0.3), transparent 70%),
    linear-gradient(180deg, rgba(2, 4, 11, 0.62) 0%, rgba(3, 9, 30, 0.7) 55%, #000 100%);
}
.hero-lite .hero-glow { animation: none; }
.hero-lite .hero-grain,
.hero-lite .hero-grid { display: none; }
.hero-lite .hero-logo { animation: hero-rise 0.9s var(--ease-cinematic) 0.1s both; }
/* Without the letterbox intro there's nothing to wait for, so the rest follows quickly */
.hero-lite .hero-content [data-reveal] { transition-delay: calc(var(--delay, 0ms) * 0.4); }
.hero-lite .hero-content [data-reveal="blur"]:not(.is-visible) { filter: none; transform: translateY(14px); }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ===== Sections ===== */
.section { position: relative; padding-block: var(--section-pad); scroll-margin-top: 4rem; }
.section-alt {
  background:
    radial-gradient(60% 50% at 15% 50%, rgba(11, 31, 92, 0.32), transparent 70%),
    var(--color-bg-alt);
}

.grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--stack);
  perspective: 1200px;
}
.card {
  position: relative;
  padding: 2rem 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(12, 20, 44, 0.5), rgba(2, 4, 11, 0.35));
  transition: border-color 0.4s, box-shadow 0.4s;
}
.card:hover { border-color: var(--color-border-strong); box-shadow: var(--glow); }
.card-number { display: block; margin-bottom: 1.75rem; color: var(--color-accent); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.3em; }
.card p { color: var(--color-muted); margin: 0; font-size: 0.98rem; }
.card-list { margin: 1.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--color-border); list-style: none; display: grid; gap: 0.6rem; }
.card-list li { position: relative; padding-left: 1.4rem; font-size: 0.92rem; color: #cdd5e6; }
.card-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--color-accent); }

/* Shared checkmark used by pricing lists */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.checklist li { position: relative; padding-left: 1.9rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid rgba(127, 162, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 14px -6px rgba(58, 99, 216, 0.9);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 0.41rem;
  top: 0.45em;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--color-accent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* ===== About + 3D portrait ===== */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: center;
}
.about-text p:not(.eyebrow) { color: var(--color-muted); font-size: 1.05rem; }
.about-text .btn { margin-top: var(--space-2); }
.about-text .about-promise {
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-primary-light);
  color: var(--color-text);
  font-weight: 400;
}

@media (max-width: 820px) {
  .about-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .portrait { max-width: 380px; margin-inline: auto; width: 100%; }
}

.portrait-float {
  perspective: 1000px;
  animation: float 7s ease-in-out infinite;
}
.portrait-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  animation: sway 9s ease-in-out infinite;
  transition: transform 0.25s ease-out;
}
.portrait-card.is-tilting { animation: none; }

/* Navy plate sitting behind the photo for depth */
.portrait-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-navy) 60%, #000);
  transform: translateZ(-50px) translate(22px, 22px);
  box-shadow: 0 40px 80px -20px rgba(29, 63, 158, 0.9);
}
.portrait-card img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateZ(30px);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.9);
}
.portrait-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateZ(31px);
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, 0.28), transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes sway {
  0%, 100% { --rx: 6deg; --ry: -10deg; }
  50% { --rx: -4deg; --ry: 10deg; }
}

/* ===== Process ===== */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin: var(--stack) 0 0;
  padding: 0;
  list-style: none;
  perspective: 1200px;
}
.process-step {
  position: relative;
  padding: 1.75rem 1.25rem 1.25rem 0;
  border-top: 1px solid var(--color-border-strong);
}
.process-step p { color: var(--color-muted); margin: 0; font-size: 0.98rem; }
.step-number {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(127, 162, 255, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 24px -10px rgba(58, 99, 216, 0.9);
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 300;
}

/* ===== Pricing ===== */
.pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--stack);
  perspective: 1200px;
}
@media (max-width: 820px) {
  .pricing-layout { grid-template-columns: 1fr; gap: var(--space-4); }
}

.price-card {
  position: relative;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, var(--color-surface), #000 75%) padding-box,
    linear-gradient(135deg, var(--color-accent), var(--color-navy) 45%, var(--color-primary-light)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 40px 90px -50px rgba(29, 63, 158, 0.9);
}
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: var(--space-4); }
.price-amount { font-size: clamp(3rem, 7vw, 4.25rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; }
.price-term { color: var(--color-muted); font-size: 0.9rem; letter-spacing: 0.02em; }
.price-cta { margin-top: var(--space-4); width: 100%; text-align: center; }

.benefits { display: grid; gap: var(--space-3); }
.benefit { padding-left: 1.25rem; border-left: 1px solid var(--color-border-strong); }
.benefit h4, .addon h4 { margin: 0 0 0.3rem; font-size: 1rem; }
.addon h4 { font-weight: 400; }
.benefit p { color: var(--color-muted); margin: 0; }

.addons-title { margin-top: var(--space-8); font-weight: 300; font-size: 1.4rem; }
.addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.addon {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: rgba(7, 13, 31, 0.45);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.addon:hover { border-color: var(--color-border-strong); box-shadow: var(--glow); }
.addon-desc { color: var(--color-muted); font-size: 0.9rem; margin: 0; }
.addon-price { margin: auto 0 0; padding-top: var(--space-2); color: var(--color-accent); font-size: 1.5rem; font-weight: 300; letter-spacing: -0.02em; }
.addon-price span { color: var(--color-muted); font-size: 0.82rem; font-weight: 300; letter-spacing: 0.02em; }

.pricing-note { margin-top: var(--space-4); color: var(--color-muted); text-align: center; }

/* ===== Reviews =====
   Hidden until js/main.js has real entries in its REVIEWS list. */
.section-reviews { border-top: 1px solid var(--color-border); }
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-top: var(--stack);
  perspective: 1200px;
}
.review {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: 2rem 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(12, 20, 44, 0.5), rgba(2, 4, 11, 0.35));
  transition: border-color 0.4s, box-shadow 0.4s;
}
.review:hover { border-color: var(--color-border-strong); box-shadow: var(--glow); }
.review-stars { display: flex; gap: 0.3rem; }
.review-stars svg { width: 14px; height: 14px; fill: none; stroke: var(--color-accent); stroke-width: 1; stroke-linejoin: round; }
.review-stars svg.is-filled { fill: var(--color-accent); }
.review-text { flex: 1; margin: 0; }
.review-text p { margin: 0; color: #dbe2f1; font-size: 1.02rem; font-weight: 300; line-height: 1.7; }
.review-author { display: grid; gap: 0.2rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.review-name { font-weight: 400; letter-spacing: 0.01em; }
.review-business { color: var(--color-muted); font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; }
.reviews-cta { margin: var(--stack) 0 0; text-align: center; }

/* Thin underlined text link, used for "Leave a review" */
.text-link {
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(127, 162, 255, 0.35);
  color: var(--color-accent);
  font-size: 0.75rem;
  letter-spacing: 0.26em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s;
}
.text-link:hover,
.text-link:focus-visible { color: #fff; border-bottom-color: #fff; }

/* ===== FAQ ===== */
.faq-list { display: grid; gap: 0.75rem; margin-top: var(--stack); }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: rgba(7, 13, 31, 0.45);
  transition: border-color 0.3s;
}
.faq-item[open] { border-color: var(--color-border-strong); }
.faq-item summary {
  position: relative;
  padding: 1.25rem 3.25rem 1.25rem 1.5rem;
  font-size: 1.02rem;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius); }
/* Plus icon that turns into a minus */
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--color-accent);
  transition: transform 0.4s var(--ease-cinematic);
}
.faq-item summary::after { transform: rotate(90deg); }
.faq-item.is-open summary::after { transform: rotate(0deg); }
.faq-answer { overflow: hidden; }
.faq-answer p { margin: 0; padding: 0 1.5rem 1.4rem; color: var(--color-muted); }

/* Clearly marked copy that still needs your final wording */
.placeholder {
  padding: 0 0.3em;
  border: 1px dashed var(--color-accent);
  border-radius: 4px;
  color: var(--color-accent);
  font-style: italic;
}

/* ===== Contact ===== */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 820px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-4); }
}
.contact-intro p:not(.eyebrow) { color: var(--color-muted); font-size: 1.05rem; }
.contact-methods { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 0.75rem; }
.contact-methods li {
  display: grid;
  gap: 0.25rem;
  padding: 1.1rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: rgba(7, 13, 31, 0.45);
}
.contact-label { color: var(--color-muted); font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; }
.contact-methods a { color: var(--color-text); font-size: 1.3rem; font-weight: 300; letter-spacing: -0.01em; text-decoration: none; }
.contact-methods a:hover { color: var(--color-accent); }

/* ===== Contact form ===== */
.contact-form { display: grid; gap: var(--space-2); }
.field { display: grid; gap: 0.35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
}
.contact-form label { color: var(--color-muted); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; }
.optional { color: var(--color-muted); font-weight: 300; letter-spacing: 0.04em; text-transform: none; opacity: 0.8; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(7, 13, 31, 0.7);
  color: var(--color-text);
  font: inherit;
  font-weight: 300;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form textarea { resize: vertical; }
.contact-form ::placeholder { color: var(--color-muted); opacity: 0.7; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 3px rgba(58, 99, 216, 0.18), 0 0 24px -10px rgba(58, 99, 216, 0.7);
}
.contact-form [aria-invalid="true"] { border-color: #ff7a8a; }
.field-error { margin: 0; min-height: 0; color: #ff9aa6; font-size: 0.875rem; }
.field-error:empty { display: none; }
.contact-form .btn { justify-self: start; }
.form-status { color: var(--color-muted); min-height: 1.6em; margin: 0; }
.form-status.is-success,
.form-status.is-error {
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: rgba(29, 63, 158, 0.18);
  color: var(--color-text);
  box-shadow: 0 0 24px -12px rgba(58, 99, 216, 0.8);
}
.form-status.is-error {
  border-color: rgba(255, 154, 166, 0.45);
  background: rgba(255, 122, 138, 0.06);
  box-shadow: none;
}
.form-status a { color: #fff; text-underline-offset: 3px; }
.contact-form .btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* Spam trap field: off-screen for people, still present for bots */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ===== Footer ===== */
.site-footer { padding-block: var(--space-6); border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.88rem; font-weight: 300; letter-spacing: 0.02em; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.footer-contact { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; }
.footer-contact a { color: var(--color-text); text-decoration: none; }
.footer-contact a:hover { color: var(--color-accent); }
.footer-copy { margin: 0; width: 100%; }
@media (max-width: 600px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ===== Scroll reveals =====
   Hidden states only apply when JS is running (html.js), so the page
   still shows everything if the script fails. */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity 1s var(--ease-cinematic),
    transform 1.3s var(--ease-cinematic),
    filter 1.1s var(--ease-cinematic);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="up"] { transform: translateY(48px); }
.js [data-reveal="blur"] { filter: blur(12px); transform: scale(1.06); }
.js [data-reveal="tilt"] { transform: translateY(80px) rotateX(24deg); transform-origin: 50% 100%; }
.js [data-reveal="zoom"] { filter: blur(8px); transform: scale(0.82) rotateY(-18deg); }
.js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

/* In 3D mode the hero copy starts hidden; js/hero-scene.js fades it in with the scroll */
.hero-3d .hero-content [data-reveal],
.hero-3d .hero-logo { opacity: 0; transform: none; filter: none; transition: none; }
.hero-3d .hero .word-inner { transform: translateY(110%); transition: none; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .letterbox { display: none; }
  .hero-video { display: none; }
  .word-inner { transform: none; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
}