/* ==========================================================================
   Elitra AI Agency — brand system
   Colour and type follow the official brand guideline. Every neutral is a
   transparency of Deep Navy or Soft White; no greys are invented.
   ========================================================================== */

:root {
  /* Brand */
  --purple: #6c63ff;
  --cyan: #00d4ff;
  --navy: #0b0f1a;
  --charcoal: #111827;
  --soft: #f8fafc;

  /* The guideline gradient. The cyan stop sits past 100% on buttons so the
     visible fill stays violet enough to carry white text. */
  --grad: linear-gradient(96deg, var(--purple) 0%, var(--cyan) 100%);
  /* Buttons carry white text, so the cyan stop is pushed well past the right
     edge — a full sweep to #00D4FF would leave the label unreadable. */
  --grad-btn: linear-gradient(96deg, var(--purple) 0%, var(--cyan) 260%);

  /* Neutrals on light */
  --paper: #ffffff;
  --mist: #f8fafc;
  --ink: #0b0f1a;
  --ink-body: rgba(11, 15, 26, 0.68);
  --ink-soft: rgba(11, 15, 26, 0.54);
  --rule: rgba(11, 15, 26, 0.1);
  --rule-strong: rgba(11, 15, 26, 0.16);

  /* Neutrals on dark */
  --snow-body: rgba(248, 250, 252, 0.72);
  --snow-soft: rgba(248, 250, 252, 0.56);
  --rule-dark: rgba(248, 250, 252, 0.12);
  --surface-dark: rgba(248, 250, 252, 0.04);

  /* Depth — navy-tinted, layered, never a flat drop shadow */
  --lift-1: 0 1px 2px rgba(11, 15, 26, 0.05), 0 2px 6px rgba(11, 15, 26, 0.04);
  --lift-2: 0 1px 2px rgba(11, 15, 26, 0.05), 0 8px 24px rgba(11, 15, 26, 0.07),
    0 24px 48px rgba(11, 15, 26, 0.05);
  --lift-3: 0 2px 4px rgba(11, 15, 26, 0.06), 0 16px 40px rgba(11, 15, 26, 0.1),
    0 40px 80px rgba(11, 15, 26, 0.08);
  --glow: 0 12px 32px rgba(108, 99, 255, 0.28);

  /* Radius by role, not one value everywhere */
  --r-field: 8px;
  --r-card: 14px;
  --r-panel: 20px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* A touch of overshoot for small, playful moments — the nav toggle and menu
     reveal — never for anything that carries page-level content. */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast: 180ms;
  --mid: 240ms;

  /* Rhythm */
  --shell: 1200px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 7.5rem);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

/* --------------------------------------------------------------------------
   Fluted glass pane

   One fixed canvas sits behind everything. Light sections paint over it, so it
   is only ever seen through the full-bleed dark bands — the hero, interior page
   heads and the footer. Because it never moves, scrolling reveals different
   parts of one continuous sheet.
   -------------------------------------------------------------------------- */

.glass {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Until the shader paints its first frame, and forever if WebGL is missing. */
  background: var(--navy);
}

/* Bands that let the pane show through. */
.hero,
.pagehead,
.footer {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* Everything else is opaque and covers it. */
.section {
  background: var(--paper);
  position: relative;
  z-index: 1;
}

.section.on-mist {
  background: var(--mist);
}

/* No WebGL: restore the radial fields so the dark bands never read as flat. */
.no-glass .hero,
.no-glass .pagehead,
.no-glass .footer {
  background: var(--navy);
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink-body);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  font-feature-settings: 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
.display,
.logo-word {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

h1,
.h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.25rem);
  letter-spacing: -0.038em;
  line-height: 1.04;
}

h2,
.h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  letter-spacing: -0.032em;
}

h3,
.h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  letter-spacing: -0.022em;
  line-height: 1.25;
}

h4,
.h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

p {
  margin: 0 0 1.15em;
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-body);
  max-width: 60ch;
}

.small {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.meta {
  font-size: 0.875rem;
  color: var(--ink-soft);
  letter-spacing: 0;
}

.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.04em;
}

/* The guideline's headline treatment: the second phrase carries the gradient. */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a {
  color: inherit;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.22em;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

/* Section heads sit left with their support text set beside them — not centred stacks. */
.head {
  display: grid;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

@media (min-width: 900px) {
  .head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  }
}

.head p {
  margin: 0;
}

.grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
}

@media (min-width: 760px) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 640px) and (max-width: 959.98px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Grounds */
.on-mist {
  background: var(--mist);
}

/* A text-colour context, not a background. The dark bands get their surface
   from the glass layer; .magnet paints its own navy panel. */
.on-navy {
  color: var(--snow-body);
}

.on-navy h1,
.on-navy h2,
.on-navy h3,
.on-navy h4 {
  color: var(--soft);
}

.on-navy .meta,
.on-navy .lede {
  color: var(--snow-soft);
}

.on-navy .lede {
  color: var(--snow-body);
}

/* --------------------------------------------------------------------------
   The fold — structural motif taken from the logo's ribbon ends
   -------------------------------------------------------------------------- */

/* A hairline that folds: flat run, 14deg rise, flat run. Used to join sections. */
.fold-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--rule);
}

.on-navy .fold-rule {
  background: var(--rule-dark);
}

/* A short gradient ribbon that marks a live element. Sits flush to an edge. */
.ribbon {
  display: block;
  height: 3px;
  width: 44px;
  border-radius: var(--r-pill);
  background: var(--grad);
}

/* Slanted left edge echoing the mark. Applied to accent bars on cards. */
.fold-edge {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--grad);
  border-radius: var(--r-pill);
  transform: scaleY(0.28);
  transform-origin: top;
  transition: transform var(--mid) var(--ease);
}

/* --------------------------------------------------------------------------
   Buttons — pill shapes per the guideline
   -------------------------------------------------------------------------- */

.btn {
  --btn-py: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: var(--btn-py) 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9688rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease),
    background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
    opacity var(--fast) var(--ease);
}

.btn svg {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--mid) var(--ease);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

.on-navy .btn:focus-visible {
  outline-color: var(--cyan);
}

.btn--primary {
  background-image: var(--grad-btn);
  color: #fff;
  box-shadow: var(--glow);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(108, 99, 255, 0.36);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--secondary {
  background: transparent;
  border-color: rgba(108, 99, 255, 0.42);
  color: var(--ink);
}

.btn--secondary:hover {
  border-color: var(--purple);
  background: rgba(108, 99, 255, 0.06);
}

.on-navy .btn--secondary {
  border-color: var(--rule-dark);
  color: var(--soft);
}

.on-navy .btn--secondary:hover {
  border-color: rgba(0, 212, 255, 0.55);
  background: rgba(0, 212, 255, 0.08);
}

.btn--dark {
  background: var(--navy);
  color: var(--soft);
}

.btn--dark:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
}

.btn--wide {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Quiet inline link with a gradient underline that grows on hover */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: var(--grad);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size var(--mid) var(--ease), color var(--fast) var(--ease);
}

.link:hover {
  background-size: 100% 2px;
}

.link:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 4px;
  border-radius: 2px;
}

.on-navy .link {
  color: var(--soft);
}

.on-navy .link:focus-visible {
  outline-color: var(--cyan);
}

.link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--mid) var(--ease);
}

.link:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--navy);
  color: var(--soft);
  padding: 0.75rem 1.15rem;
  border-radius: var(--r-field);
  text-decoration: none;
  font-weight: 600;
  transition: transform var(--fast) var(--ease);
}

.skip:focus {
  transform: translateY(5rem);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* At the top of every page the band behind the nav is the glass pane, so the
     nav stays transparent and the sheet runs unbroken behind it. It turns solid
     the moment you scroll, because below the fold it sits over light sections
     where light-on-transparent would be unreadable. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--mid) var(--ease), border-color var(--mid) var(--ease);
}

.nav[data-scrolled='true'] {
  background: rgba(11, 15, 26, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--rule-dark);
  box-shadow: 0 10px 30px rgba(11, 15, 26, 0.35);
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  border-radius: var(--r-field);
}

.brand:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 6px;
}

.brand__mark {
  width: 30px;
  height: 30px;
  flex: none;
}

.brand__word {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  color: var(--soft);
  line-height: 1;
}

.brand__sub {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: var(--snow-soft);
  margin-top: 3px;
}

.on-light .brand__word {
  color: var(--ink);
}

.nav__links {
  display: none;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1000px) {
  .nav__links {
    display: flex;
  }
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-field);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--snow-body);
  text-decoration: none;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.nav__link:hover {
  color: var(--soft);
  background: var(--surface-dark);
}

.nav__link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.nav__link[aria-current='page'] {
  color: var(--soft);
}

.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.2rem;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--grad);
}

.nav__cta {
  display: none;
}

@media (min-width: 1000px) {
  .nav__cta {
    display: inline-flex;
  }
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-field);
  background: var(--surface-dark);
  color: var(--soft);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

.nav__toggle:hover {
  border-color: rgba(248, 250, 252, 0.28);
}

.nav__toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.nav__toggle:active {
  transform: scale(0.92);
}

@media (min-width: 1000px) {
  .nav__toggle {
    display: none;
  }
}

/* Burger-to-close morph, driven by aria-expanded — the toggle's click handler
   already keeps that attribute in sync, so no extra JS state is needed. */
.nav__toggle-bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--mid) var(--spring), opacity var(--fast) var(--ease);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bar--top {
  transform: translateY(5px) rotate(45deg);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bar--mid {
  opacity: 0;
  transform: scaleX(0);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bar--bottom {
  transform: translateY(-5px) rotate(-45deg);
}

.nav__sheet {
  position: fixed;
  inset: 76px 0 0;
  z-index: 99;
  background: var(--navy);
  padding: 1.5rem var(--gutter) 2.5rem;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  /* Hide only after the fade finishes; show the instant it opens, so the first
     link is focusable straight away rather than one frame later. */
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease),
    visibility 0s linear var(--mid);
}

/* Same brand light + grain used behind every dark band (see .hero), so the
   open menu reads as part of the site rather than a bare overlay. */
.nav__sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 86% 0%, rgba(108, 99, 255, 0.32), transparent 55%),
    radial-gradient(circle at 0% 45%, rgba(0, 212, 255, 0.14), transparent 60%);
}

.nav__sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.nav__sheet[data-open='true'] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease),
    visibility 0s linear 0s;
}

.nav__sheet:focus {
  outline: none;
}

.nav__sheet ul {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
}

.nav__sheet li + li {
  border-top: 1px solid var(--rule-dark);
}

.nav__sheet li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.2rem 0;
  padding: 0.95rem 0.9rem;
  border-radius: var(--r-field);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--snow-body);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease),
    color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

/* Chevron: the row is a destination, not just a label. */
.nav__sheet li a::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  opacity: 0.45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--mid) var(--spring), opacity var(--fast) var(--ease);
}

.nav__sheet li a:hover {
  color: var(--soft);
  background: var(--surface-dark);
}

.nav__sheet li a:hover::after {
  opacity: 0.85;
  transform: translateX(3px);
}

.nav__sheet li a:active {
  background: var(--surface-dark);
}

.nav__sheet li a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Current page: brand-tinted row with the gradient accent bar. */
.nav__sheet li a[aria-current='page'] {
  color: var(--soft);
  background: linear-gradient(90deg, rgba(108, 99, 255, 0.18), rgba(0, 212, 255, 0.04));
}

.nav__sheet li a[aria-current='page']::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--grad);
}

.nav__sheet li a[aria-current='page']::after {
  background: var(--cyan);
  opacity: 1;
}

.nav__sheet[data-open='true'] li a {
  opacity: 1;
  transform: translateY(0);
}

/* Each link steps in a beat after the last, instead of the whole list
   arriving as one flat block. */
.nav__sheet li:nth-child(1) a { transition-delay: 40ms; }
.nav__sheet li:nth-child(2) a { transition-delay: 80ms; }
.nav__sheet li:nth-child(3) a { transition-delay: 120ms; }
.nav__sheet li:nth-child(4) a { transition-delay: 160ms; }
.nav__sheet li:nth-child(5) a { transition-delay: 200ms; }
.nav__sheet li:nth-child(6) a { transition-delay: 240ms; }

.nav__sheet .btn {
  min-height: 56px;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease),
    box-shadow var(--mid) var(--ease);
  transition-delay: 280ms;
}

.nav__sheet .btn::after {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav__sheet[data-open='true'] .btn {
  opacity: 1;
  transform: translateY(0);
}

.nav__sheet[data-open='true'] .btn:active {
  transform: scale(0.98);
  transition-delay: 0s;
}

body[data-nav-open='true'] {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  color: var(--snow-body);
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 6.5rem);
}

/* One soft field of brand light behind the panel, plus a fine grain so the
   navy never reads as flat fill. No decorative blobs. */
/* The shader supplies this colour and depth now. Only restored without WebGL. */
.no-glass .hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto auto;
  width: min(780px, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at 62% 38%, rgba(108, 99, 255, 0.3), transparent 62%),
    radial-gradient(circle at 78% 60%, rgba(0, 212, 255, 0.16), transparent 58%);
  filter: blur(10px);
  pointer-events: none;
}

/* Fine grain over every dark band, shader or not — it's what keeps the
   gradients from banding on 8-bit displays. */
.hero::after,
.pagehead::after,
.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.75rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 1040px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.hero h1 {
  color: var(--soft);
  margin-bottom: 1.5rem;
}

.hero .lede {
  font-size: clamp(1.0625rem, 1.45vw, 1.1875rem);
  color: var(--snow-body);
  margin-bottom: 2.25rem;
  max-width: 46ch;
}

.tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.75rem;
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-pill);
  background: var(--surface-dark);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--snow-body);
  letter-spacing: 0.01em;
}

.tagline .ribbon {
  width: 26px;
  height: 2px;
}

.hero__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-dark);
}

.stat__n {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--soft);
  line-height: 1.15;
}

.stat__l {
  display: block;
  font-size: 0.8125rem;
  color: var(--snow-soft);
  line-height: 1.45;
  max-width: 22ch;
  padding-right: 0.5rem;
}

/* --------------------------------------------------------------------------
   Hero operations panel — the one animated moment on the page
   -------------------------------------------------------------------------- */

.ops {
  position: relative;
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(11, 15, 26, 0.92));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(108, 99, 255, 0.08);
  overflow: hidden;
}

.ops__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--rule-dark);
  background: rgba(248, 250, 252, 0.02);
}

.ops__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--soft);
  letter-spacing: -0.005em;
}

.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.5);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.45);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(0, 212, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0);
  }
}

.ops__clock {
  font-size: 0.75rem;
  color: var(--snow-soft);
  font-variant-numeric: tabular-nums;
}

.ops__lanes {
  display: grid;
}

.lane {
  padding: 1.15rem 1.15rem 1.25rem;
  border-bottom: 1px solid var(--rule-dark);
  opacity: 0;
  transform: translateY(6px);
  animation: lane-in 520ms var(--ease) forwards;
}

.lane:last-child {
  border-bottom: 0;
}

.lane:nth-child(1) {
  animation-delay: 200ms;
}
.lane:nth-child(2) {
  animation-delay: 420ms;
}
.lane:nth-child(3) {
  animation-delay: 640ms;
}

@keyframes lane-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lane__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.lane__icon {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(108, 99, 255, 0.16);
  color: var(--cyan);
}

.lane__icon svg {
  width: 14px;
  height: 14px;
}

.lane__name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--soft);
}

.lane__time {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--snow-soft);
  font-variant-numeric: tabular-nums;
}

/* Chat lane */
.bubble {
  max-width: 88%;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  font-size: 0.8125rem;
  line-height: 1.55;
  margin-bottom: 0.4rem;
}

.bubble--in {
  background: rgba(248, 250, 252, 0.06);
  color: var(--snow-body);
  border-bottom-left-radius: 4px;
}

.bubble--out {
  margin-left: auto;
  background: rgba(108, 99, 255, 0.2);
  border: 1px solid rgba(108, 99, 255, 0.3);
  color: var(--soft);
  border-bottom-right-radius: 4px;
}

.bubble--typing {
  min-height: 1em;
}

.caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  vertical-align: -0.12em;
  margin-left: 1px;
  background: var(--cyan);
  animation: blink 1s steps(2) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Workflow lane */
.flow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.flow__step {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--rule-dark);
  background: rgba(248, 250, 252, 0.03);
  font-size: 0.6875rem;
  color: var(--snow-soft);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color var(--mid) var(--ease), color var(--mid) var(--ease),
    background-color var(--mid) var(--ease);
}

.flow__step[data-state='done'] {
  border-color: rgba(0, 212, 255, 0.4);
  background: rgba(0, 212, 255, 0.09);
  color: var(--cyan);
}

.flow__link {
  width: 12px;
  height: 1px;
  flex: none;
  background: var(--rule-dark);
  transition: background-color var(--mid) var(--ease);
}

.flow__link[data-state='done'] {
  background: var(--cyan);
}

/* CRM lane */
.record {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule-dark);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.03);
  font-size: 0.8125rem;
}

.record__field {
  color: var(--snow-soft);
  font-size: 0.75rem;
}

.record__value {
  color: var(--soft);
  font-weight: 500;
}

.chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: var(--cyan);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}

.chip[data-state='shown'] {
  opacity: 1;
  transform: scale(1);
}

.ops__foot {
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--rule-dark);
  background: rgba(248, 250, 252, 0.02);
  font-size: 0.75rem;
  color: var(--snow-soft);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--lift-1);
  overflow: hidden;
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease),
    border-color var(--mid) var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift-2);
  border-color: rgba(108, 99, 255, 0.28);
}

.card:hover .fold-edge {
  transform: scaleY(1);
}

.card h3 {
  margin-bottom: 0.6rem;
}

.card p {
  color: var(--ink-body);
  font-size: 0.9688rem;
  margin-bottom: 1.25rem;
}

.card .link {
  margin-top: auto;
  align-self: flex-start;
}

.card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(108, 99, 255, 0.16), rgba(0, 212, 255, 0.14));
  border: 1px solid rgba(108, 99, 255, 0.26);
  color: var(--purple);
  margin-bottom: 1.35rem;
}

.card__icon svg {
  width: 22px;
  height: 22px;
}

.card--dark {
  background: var(--charcoal);
  border-color: var(--rule-dark);
  color: var(--snow-body);
}

.card--dark h3,
.card--dark h4 {
  color: var(--soft);
}

.card--dark p {
  color: var(--snow-body);
}

/* Card list of included items */
.ticks {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.ticks li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-body);
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.44em;
  width: 15px;
  height: 9px;
  border-left: 2px solid var(--purple);
  border-bottom: 2px solid var(--purple);
  transform: rotate(-45deg) scale(0.78);
  transform-origin: center;
}

.card--dark .ticks li,
.on-navy .ticks li {
  color: var(--snow-body);
}

.card--dark .ticks li::before,
.on-navy .ticks li::before {
  border-color: var(--cyan);
}

/* --------------------------------------------------------------------------
   Why Elitra — asymmetric, not four identical tiles
   -------------------------------------------------------------------------- */

.why {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 900px) {
  .why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.why__item {
  position: relative;
  padding-left: 1.6rem;
  border-left: 1px solid var(--rule);
}

.why__item::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--grad);
  transform: scaleY(0.22);
  transform-origin: top;
  transition: transform var(--mid) var(--ease);
}

.why__item:hover::before,
.why__item:focus-within::before {
  transform: scaleY(1);
}

.why__item h3 {
  margin-bottom: 0.5rem;
}

.why__item p {
  font-size: 0.9688rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   How it works — the ribbon folding through four steps.
   Numbering is used here because this content genuinely is a sequence.
   -------------------------------------------------------------------------- */

.steps {
  position: relative;
  display: grid;
  gap: 0;
  counter-reset: step;
}

@media (min-width: 980px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  counter-increment: step;
  padding: 3.25rem 0 2rem;
}

@media (min-width: 980px) {
  .step {
    padding: 3.5rem 1.75rem 0 0;
  }
}

/* the spine */
.step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2.5rem;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}

@media (min-width: 980px) {
  .step::before {
    left: 0;
    right: 0;
    top: 1.03rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  /* Each step draws the run to the next node, so the last one draws nothing. */
  .step:last-child::before {
    display: none;
  }
}

.step__node {
  position: absolute;
  top: 0.35rem;
  left: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transform: translateX(-16px);
  transition: border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease),
    color var(--mid) var(--ease);
}

@media (min-width: 980px) {
  .step__node {
    transform: none;
  }
}

.step__node::after {
  content: counter(step);
}

.step:hover .step__node,
.step:focus-within .step__node {
  border-color: var(--purple);
  color: var(--purple);
  box-shadow: 0 0 0 5px rgba(108, 99, 255, 0.1);
}

.on-mist .step__node {
  background: var(--mist);
}

.step h3 {
  margin-bottom: 0.55rem;
  padding-left: 1.35rem;
}

@media (min-width: 980px) {
  .step h3 {
    padding-left: 0;
  }
}

.step p {
  font-size: 0.9375rem;
  margin: 0 0 0.75rem;
  padding-left: 1.35rem;
  max-width: 34ch;
}

@media (min-width: 980px) {
  .step p {
    padding-left: 0;
  }
}

.step__when {
  display: block;
  margin-top: auto;
  padding-top: 0.5rem;
  padding-left: 1.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--purple);
}

@media (min-width: 980px) {
  .step__when {
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Case study cards
   -------------------------------------------------------------------------- */

.case {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: var(--lift-1);
  text-decoration: none;
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease),
    border-color var(--mid) var(--ease);
}

.case:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift-2);
  border-color: rgba(108, 99, 255, 0.28);
}

.case:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

.case__sector {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--purple);
}

.case h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.375rem);
}

.case__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  margin-top: auto;
}

.metric__n {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.metric__l {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  max-width: 18ch;
  line-height: 1.4;
}

.on-navy .metric__n {
  color: var(--soft);
}

.on-navy .metric__l {
  color: var(--snow-soft);
}

/* --------------------------------------------------------------------------
   Testimonial slider
   -------------------------------------------------------------------------- */

.slider {
  position: relative;
}

.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 900px) {
  .slider__track {
    grid-auto-columns: calc(50% - clamp(0.5rem, 1.2vw, 0.875rem));
  }
}

.quote {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-card);
  background: rgba(248, 250, 252, 0.035);
}

.quote blockquote {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--soft);
}

.quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
}

/* Solid gradient fill so the initials read on both the navy and light grounds. */
.avatar {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--purple), var(--cyan) 210%);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
}

.quote__who {
  font-size: 0.875rem;
  line-height: 1.45;
}

.quote__who strong {
  display: block;
  color: var(--soft);
  font-weight: 600;
}

.quote__who span {
  color: var(--snow-soft);
}

.quote__result {
  margin-left: auto;
  text-align: right;
  font-size: 0.8125rem;
  color: var(--cyan);
  font-weight: 600;
  white-space: nowrap;
}

/* The same quote card on a white or mist ground. */
.quote--light {
  background: var(--paper);
  border-color: var(--rule);
  box-shadow: var(--lift-1);
}

.on-mist .quote--light {
  background: var(--mist);
}

.quote--light blockquote {
  color: var(--ink);
}

.quote--light figcaption {
  border-top-color: var(--rule);
}

.quote--light .quote__who strong {
  color: var(--ink);
}

.quote--light .quote__who span {
  color: var(--ink-soft);
}

.quote--light .quote__result {
  color: var(--purple);
}

/* Metrics inside a dark card */
.card--dark .metric__n {
  color: var(--soft);
}

.card--dark .metric__l {
  color: var(--snow-soft);
}

.card--dark .case__metrics {
  border-top-color: var(--rule-dark);
}

.slider__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.slider__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule-dark);
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
    opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.slider__btn:hover:not(:disabled) {
  border-color: rgba(0, 212, 255, 0.5);
  background: rgba(0, 212, 255, 0.08);
}

.slider__btn:active:not(:disabled) {
  transform: translateY(1px);
}

.slider__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.slider__btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.slider__btn svg {
  width: 17px;
  height: 17px;
}

.slider__dots {
  display: flex;
  gap: 0.4rem;
  margin-left: 0.5rem;
}

.dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(248, 250, 252, 0.24);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.dot[aria-current='true'] {
  background: var(--cyan);
  transform: scale(1.25);
}

.dot:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.15rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--lift-1);
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}

.tier:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-2);
}

/* The recommended tier is taller, darker and carries the ribbon — it reads as
   the pick structurally, not just by colouring a border. */
.tier--pick {
  background: var(--navy);
  border-color: transparent;
  box-shadow: var(--lift-3);
  color: var(--snow-body);
}

@media (min-width: 960px) {
  .tier--pick {
    margin-block: -1.25rem;
    padding-block: calc(clamp(1.6rem, 2.6vw, 2.15rem) + 1.25rem);
  }
}

.tier--pick h3 {
  color: var(--soft);
}

.tier--pick .tier__price,
.tier--pick .tier__note {
  color: var(--soft);
}

.tier--pick .tier__for,
.tier--pick .tier__cycle {
  color: var(--snow-soft);
}

.tier--pick .ticks li {
  color: var(--snow-body);
}

.tier--pick .ticks li::before {
  border-color: var(--cyan);
}

.tier__flag {
  position: absolute;
  top: 0;
  left: clamp(1.6rem, 2.6vw, 2.15rem);
  transform: translateY(-50%);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--grad-btn);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Reserve two lines so the price sits on the same baseline in all three tiers. */
.tier__for {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: 1.35rem;
  min-height: 3.2em;
}

.tier__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 0;
  min-height: 1.1em;
}

.tier__cycle {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.tier__note {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0.85rem 0 1.6rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}

.tier--pick .tier__note {
  border-top-color: var(--rule-dark);
}

.tier .btn {
  margin-top: auto;
}

.tier h3 {
  margin-bottom: 0.35rem;
}

/* --------------------------------------------------------------------------
   Lead magnet
   -------------------------------------------------------------------------- */

.magnet {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: var(--r-panel);
  background: var(--navy);
  color: var(--snow-body);
  position: relative;
  overflow: hidden;
}

.magnet::before {
  content: '';
  position: absolute;
  inset: auto -10% -60% auto;
  width: 460px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(108, 99, 255, 0.28), transparent 65%);
  pointer-events: none;
}

@media (min-width: 900px) {
  .magnet {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.magnet > * {
  position: relative;
}

.magnet h2 {
  color: var(--soft);
  margin-bottom: 0.85rem;
}

.magnet .lede {
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.field > label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.on-navy .field > label,
.magnet .field > label {
  color: var(--soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-field);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9688rem;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-soft);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.16);
}

.on-navy .field input,
.on-navy .field select,
.on-navy .field textarea,
.magnet .field input {
  background: rgba(248, 250, 252, 0.05);
  border-color: var(--rule-dark);
  color: var(--soft);
}

.on-navy .field input::placeholder,
.magnet .field input::placeholder,
.on-navy .field textarea::placeholder {
  color: var(--snow-soft);
}

.on-navy .field input:focus,
.on-navy .field select:focus,
.on-navy .field textarea:focus,
.magnet .field input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.18);
}

.field__hint {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.on-navy .field__hint,
.magnet .field__hint {
  color: var(--snow-soft);
}

.field__error {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #d92d20;
  min-height: 0;
}

.on-navy .field__error,
.magnet .field__error {
  color: #ffa39e;
}

.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: #d92d20;
}

.form__status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-field);
  font-size: 0.9375rem;
  border: 1px solid transparent;
}

.form__status[data-tone='ok'] {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.35);
  color: var(--ink);
}

.on-navy .form__status[data-tone='ok'],
.magnet .form__status[data-tone='ok'] {
  color: var(--soft);
}

.form__status[data-tone='bad'] {
  background: rgba(217, 45, 32, 0.08);
  border-color: rgba(217, 45, 32, 0.3);
  color: #b42318;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Contact strip
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

@media (min-width: 940px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}

.channel {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}

.on-navy .channel {
  border-color: var(--rule-dark);
}

.channel:last-of-type {
  border-bottom: 0;
}

.channel__icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(108, 99, 255, 0.1);
  border: 1px solid rgba(108, 99, 255, 0.2);
  color: var(--purple);
  transition: transform var(--fast) var(--ease);
}

.on-navy .channel__icon {
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.09);
  border-color: rgba(0, 212, 255, 0.24);
}

a.channel:hover .channel__icon {
  transform: translateY(-2px);
}

.channel__icon svg {
  width: 18px;
  height: 18px;
}

.channel strong {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9688rem;
}

.on-navy .channel strong {
  color: var(--soft);
}

.channel span {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.on-navy .channel span {
  color: var(--snow-soft);
}

/* --------------------------------------------------------------------------
   Booking teaser card

   Ported from a React/shadcn "bento card" calendar. Rebuilt in plain CSS with
   brand tokens instead of indigo, and it shows no invented availability — only
   the real current month with today marked. Cal.com holds the actual slots.
   -------------------------------------------------------------------------- */

.booking-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--paper);
  box-shadow: var(--lift-1);
  text-decoration: none;
  color: inherit;
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease),
    border-color var(--mid) var(--ease);
}

.booking-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift-2);
  border-color: rgba(108, 99, 255, 0.3);
}

.booking-card:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

/* The gradient wash that fades in on hover. */
.booking-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to top left, rgba(108, 99, 255, 0.16), transparent 60%);
  transition: opacity var(--mid) var(--ease);
}

.booking-card:hover::before {
  opacity: 1;
}

/* Corner arrow, tucked away until hover. */
.booking-card__go {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-btn);
  color: #fff;
  opacity: 0;
  transform: translateY(8px) rotate(6deg);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}

.booking-card:hover .booking-card__go,
.booking-card:focus-visible .booking-card__go {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

.booking-card__go svg {
  width: 20px;
  height: 20px;
}

.booking-card__body {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.5rem;
}

.booking-card h3 {
  margin-bottom: 0.5rem;
}

.booking-card__body > div > p {
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* The month panel — inset shadow gives it the raised-glass edge. */
.minical {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--mist);
  padding: 0.5rem;
}

.minical__inner {
  border-radius: 12px;
  border: 1px solid rgba(11, 15, 26, 0.05);
  padding: 0.9rem;
  box-shadow: inset 0 2px 1.5px rgba(165, 174, 184, 0.32);
}

.minical__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  margin-bottom: 0.9rem;
  font-size: 0.8125rem;
}

.minical__month {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: var(--ink);
}

.minical__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rule-strong);
}

.minical__note {
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.minical__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

/* Cells size to the track rather than a fixed width — at 30px each the row
   overflowed the panel and clipped Saturday. */
.minical__cell {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.minical__cell--head {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-radius: 0;
}

/* Today, and only today. No invented availability. */
.minical__cell--today {
  background: var(--grad-btn);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
}

.minical__cell--past {
  color: rgba(11, 15, 26, 0.28);
}

@media (min-width: 900px) {
  .booking-card__body {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
}

/* Calendar embed slot */
/* Sized for the Cal.com embed, which needs roughly 760px before its slot list
   starts clipping. A plain iframe can't self-resize, so the height is fixed. */
.calendar {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--mist);
  overflow: hidden;
  min-height: 780px;
}

.calendar iframe {
  width: 100%;
  height: 780px;
  border: 0;
  display: block;
  background: var(--paper);
}

@media (max-width: 640px) {
  .calendar,
  .calendar iframe {
    min-height: 900px;
    height: 900px;
  }
}

.calendar__fallback {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: left;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  color: var(--snow-body);
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 820px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.9fr));
  }
}

.footer h4 {
  color: var(--soft);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: 0;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.footer a:not(.brand):not(.btn) {
  color: var(--snow-body);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--fast) var(--ease);
}

.footer a:not(.brand):not(.btn):hover {
  color: var(--cyan);
}

.footer a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 3px;
}

.footer__blurb {
  font-size: 0.9375rem;
  color: var(--snow-soft);
  max-width: 34ch;
  margin: 1.15rem 0 1.5rem;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.8125rem;
  color: var(--snow-soft);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.socials {
  display: flex;
  gap: 0.5rem;
}

.social {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule-dark);
  color: var(--snow-body);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

.social:hover {
  color: var(--cyan);
  border-color: rgba(0, 212, 255, 0.45);
  transform: translateY(-2px);
}

.social svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   Page header for interior pages
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  color: var(--snow-body);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}

.no-glass .pagehead::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: min(620px, 70vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(108, 99, 255, 0.24), transparent 62%);
  pointer-events: none;
}

.pagehead > * {
  position: relative;
  z-index: 1;
}

.footer > * {
  position: relative;
  z-index: 1;
}

.pagehead h1 {
  color: var(--soft);
  max-width: 18ch;
  margin-bottom: 1.25rem;
}

.pagehead .lede {
  color: var(--snow-body);
}

.crumbs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--snow-soft);
  margin-bottom: 1.5rem;
}

.crumbs a {
  color: var(--snow-soft);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--cyan);
}

/* --------------------------------------------------------------------------
   Long-form prose (legal, articles, checklist)
   -------------------------------------------------------------------------- */

.prose {
  max-width: 72ch;
}

.prose h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
}

.prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  color: var(--ink-body);
  font-size: 1.0313rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
  margin: 0 0 1.15em;
  display: grid;
  gap: 0.5rem;
}

.prose li::marker {
  color: var(--purple);
}

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(108, 99, 255, 0.5);
  text-decoration-thickness: 1.5px;
}

.prose a:hover {
  text-decoration-color: var(--purple);
}

.prose blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 2px solid var(--purple);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: var(--ink);
}

.toc {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 1.35rem 1.5rem;
  background: var(--mist);
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.toc a {
  font-size: 0.9375rem;
  color: var(--ink-body);
  text-decoration: none;
}

.toc a:hover {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}

.faq summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--purple);
  border-bottom: 2px solid var(--purple);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--mid) var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.faq details p {
  padding-bottom: 1.35rem;
  margin: 0;
  font-size: 0.9688rem;
}

/* --------------------------------------------------------------------------
   Comparison table
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}

table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

th,
td {
  padding: 0.9rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}

thead th {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: var(--ink);
  background: var(--mist);
  white-space: nowrap;
}

tbody th {
  font-weight: 500;
  color: var(--ink-body);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

td svg {
  width: 16px;
  height: 16px;
  color: var(--purple);
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.post {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}

@media (min-width: 780px) {
  .post {
    flex-direction: row;
    align-items: baseline;
    gap: 2.5rem;
  }
}

.post__date {
  flex: none;
  width: 9rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.post__body {
  flex: 1;
}

.post h3 {
  margin-bottom: 0.4rem;
  transition: color var(--fast) var(--ease);
}

.post:hover h3 {
  color: var(--purple);
}

.post:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 4px;
  border-radius: 6px;
}

.post p {
  font-size: 0.9375rem;
  margin: 0;
  max-width: 58ch;
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(108, 99, 255, 0.28);
  background: rgba(108, 99, 255, 0.07);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--purple);
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stack-sm > * + * {
  margin-top: 0.75rem;
}

.mt-lg {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.center-narrow {
  max-width: 46rem;
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .lane {
    opacity: 1;
    transform: none;
  }

  .caret {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Print — the readiness checklist is designed to be saved as a PDF
   -------------------------------------------------------------------------- */

@media print {
  .nav,
  .footer,
  .skip,
  .glass,
  .no-print {
    display: none !important;
  }

  .hero::after,
  .pagehead::after,
  .footer::after {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .section {
    padding-block: 0;
  }

  a {
    text-decoration: none;
  }
}