/* ==========================================================================
   Core2CloudX — Interactive 3D Design System
   Brand-native (navy / cyan / light surface) with cinematic depth.

   Scoping rule:
   - `html.c2c` opts a page into the full rebuilt shell (resets + typography).
   - `.c2c-*` component classes are safe to drop onto legacy Tailwind pages
     without the reset, so the two systems can coexist during rollout.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Brand core — electric cyan reading against a deep-space canvas.
     The mid-blues are lifted well above the old print-navy values: on a
     near-black ground a #2b5bb5 fill reads as a dark smudge, not a colour. */
  --ink:        #01040c;
  --navy:       #060d1f;
  --navy-soft:  #101c38;
  --blue:       #3f7fe8;
  --blue-lift:  #6da4ff;
  --cyan:       #22d3ee;
  --cyan-lift:  #5ce8ff;
  --aqua:       #9df2ff;
  --amber:      #ffa155;
  --violet:     #8b7cf8;
  /* Lighter violet closing the headline gradient. It was written inline as
     #b3a6ff, which meant the one colour most people actually notice was the
     only one a theme could not reach. */
  --violet-lift:#b3a6ff;
  /* Ink for text sitting ON an accent fill (selection, skip link, buttons).
     Near-black rather than white: every accent here is a light colour. */
  --on-accent:  #04121f;
  /* Footer meta line — dimmer than --fg-dim, still over 4.5:1 on --bg. */
  --fg-faint:   #7f9bc0;

  /* Deep panel gradients, held whole so a theme overrides one property per
     surface instead of restating every stop. */
  --grad-invert: linear-gradient(145deg, #04234f 0%, #011232 60%, #000d24 100%);
  --grad-glass:  linear-gradient(152deg, #0d1c3a 0%, #08122a 62%, #050d1f 100%);
  --grad-menu:   linear-gradient(165deg, #01102c, #002051 60%, #000c1f);
  --grad-wipe:   linear-gradient(160deg, #001b45, #000d22);

  /* Surfaces — a four-step elevation ramp. Cards are translucent rather than
     opaque so the WebGL stage behind the page stays part of the composition
     instead of being blocked out by every panel. */
  --bg:         #050914;
  --bg-deep:    #01040c;
  --bg-lift:    #0a1226;
  /* Material-3 surface ramp, mirrored from the tailwind.config block that is
     inlined on all 30 Tailwind pages. Seeded with exactly the values those
     pages already carry, so routing them through tokens changes nothing on
     the default palette -- it just makes them reachable by one. */
  --surface-1:       #03060e;
  --surface-2:       #0a1226;
  --surface-3:       #0d162b;
  --surface-4:       #131d35;
  --surface-5:       #1a2540;
  --surface-variant: #16233d;

  --card:       rgba(255,255,255,.045);
  --card-solid: #0c1428;
  --line:       rgba(255,255,255,.13);
  --line-soft:  rgba(255,255,255,.07);

  /* Text — every value below clears 4.5:1 against --bg (#050914).
     --fg-dim measures ~6.5:1, --fg-mid ~9.9:1, --fg ~17:1. */
  --fg:         #eaf1ff;
  --fg-mid:     #a8bad6;
  --fg-dim:     #8296b5;
  --on-dark:    #eaf1ff;
  --on-dark-mid:#a8bad6;
  /* For the rare light band (.c2c-light) that needs dark ink. */
  --on-light:     #050914;
  --on-light-mid: #3d5673;

  /* Type */
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Fluid scale.
     Pulled down from a display scale to a working one. The hero was topping
     out at 106px and section headings at 60px, which is specimen territory:
     Stripe runs about 56px, Linear 64, GitHub's product pages 48. Type that
     large reads as a poster rather than as a company that has something to
     say, and it pushed the actual proposition below the fold on laptops.

     The ratios between steps are kept, so the hierarchy is unchanged - every
     level simply sits lower. */
  --t-mega:  clamp(2.1rem,  5vw,    4.25rem);
  --t-hero:  clamp(1.9rem,  4.2vw,  3.4rem);
  --t-h1:    clamp(1.6rem,  3vw,    2.5rem);
  --t-h2:    clamp(1.35rem, 2.3vw,  1.9rem);
  --t-h3:    clamp(1.1rem,  1.6vw,  1.35rem);
  --t-lead:  clamp(1rem,    1.2vw,  1.125rem);
  --t-body:  1rem;
  --t-sm:    0.875rem;
  --t-xs:    0.75rem;

  /* Rhythm */
  --gut:     clamp(1.25rem, 4vw, 3.5rem);
  --shell:   1280px;
  --shell-wide: 1560px;
  --sec-y:   clamp(4.5rem, 11vh, 9rem);

  /* Depth. On a dark ground a drop shadow is nearly invisible, so elevation
     is carried by a hairline top highlight plus a coloured glow; the black
     shadows still do the work of separating a card from a lighter band. */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 16px 44px rgba(0,0,0,.42);
  --sh-3: 0 8px 24px rgba(0,0,0,.5), 0 40px 96px rgba(0,0,0,.6);
  --sh-glow: 0 18px 54px -16px rgba(34,211,238,.55);
  --edge:   inset 0 1px 0 rgba(255,255,255,.09);

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-io:   cubic-bezier(.65,0,.35,1);

  /* Layer order (stage sits at -1 inside the body's isolation context) */
  --z-nav:    80;
  --z-menu:   90;
  --z-cursor: 200;

  --nav-h: 74px;
}

/* ---------- Vivid --------------------------------------------------------
   Same brand blue, pushed for colour and sharpness. Opted into with
   <html data-palette="vivid">.

   Measured against the reference the owner gave (GitHub's Mona Sans page),
   three things separate it from what we had:

   1. Its field is not near-black. The hero is a saturated indigo pool —
      radial-gradient(#100d8f -> #0d1117) — so colour comes from a few large
      soft washes of ONE hue rather than from many accents. We already had
      exactly that as the stage's fallback, but `.c2c-stage.is-live` set
      `background: none`, which deleted it the instant WebGL painted. The
      colour vanished precisely when the site was working, leaving the flat
      black field that reads as unfinished. It is kept live below, layered
      under the canvas.

   2. Its headline is 148px at weight 900 with line-height 0.83 and negative
      tracking — the type is the hero. Ours topped out at 6.6rem with 1.04
      leading, which is why it reads as a heading on a page rather than as
      the page itself.

   3. Its body copy is pure white. Ours is muted blue-grey, which costs the
      crispness the owner described as sharpness. The lead is lifted here;
      --fg-mid stays as-is for smaller copy, where full white is fatiguing. */
html[data-palette="vivid"] {
  --bg:         #0a1030;
  --bg-deep:    #06091f;
  --bg-lift:    #131c4d;
  --card-solid: #141c48;
  --line:       rgba(255,255,255,.15);
  --line-soft:  rgba(255,255,255,.08);

  /* The field is a lit surface, not a flat black one, so the dimmest text
     has to rise with it: #8296b5 measured 3.04:1 against the brightest point
     of the wash. Lifting it also serves the crispness this palette is for. */
  --fg-mid:     #bccfe9;
  --fg-dim:     #a9bcdc;
  --fg-faint:   #98abcb;

  --surface-1:       #070b22;
  --surface-2:       #0d1436;
  --surface-3:       #121a45;
  --surface-4:       #182154;
  --surface-5:       #1f2a66;
  --surface-variant: #1b2450;
}

/* The colour field, kept once the canvas is live instead of thrown away.
   It sits UNDER the canvas: the stage's own background paints behind its
   child, so the 3D scene still composites over the wash. */
html[data-palette="vivid"] .c2c-stage.is-live {
  background:
    radial-gradient(58% 44% at 76% 6%,   rgba(34,211,238,.30), transparent 62%),
    radial-gradient(56% 46% at 10% 28%,  rgba(63,127,232,.36), transparent 60%),
    radial-gradient(72% 56% at 50% 104%, rgba(124,92,255,.30), transparent 64%),
    var(--bg-deep);
}

/* Lighter veil than the default: the wash is the point, and the default ramp
   was tuned to hold back a scene, not a flat colour field. */
html[data-palette="vivid"] .c2c-stage.is-live::after {
  background: linear-gradient(
    to right,
    rgba(6, 9, 31, .46) 0%,
    rgba(6, 9, 31, .26) 36%,
    rgba(6, 9, 31, .08) 62%,
    rgba(6, 9, 31, 0) 80%
  );
}
@media (max-width: 900px) {
  html[data-palette="vivid"] .c2c-stage.is-live::after {
    background: linear-gradient(
      to bottom,
      rgba(6, 9, 31, .44) 0%,
      rgba(6, 9, 31, .32) 48%,
      rgba(6, 9, 31, .12) 80%,
      rgba(6, 9, 31, .04) 100%
    );
  }
}

/* .c2c-dark re-declares --fg-dim for its band, so the lift above never
   reached anything inside one -- which is most of the stat rows. */
html[data-palette="vivid"] .c2c-dark {
  --fg-mid: #bccfe9;
  --fg-dim: #a9bcdc;
  --line:      rgba(255,255,255,.15);
  --line-soft: rgba(255,255,255,.08);
}

html[data-palette="vivid"] .c2c-mega { line-height: 1.02; letter-spacing: -.03em; }
html[data-palette="vivid"] .c2c-h1   { line-height: 1.12; letter-spacing: -.022em; }
html[data-palette="vivid"] .c2c-lead { color: #dce8ff; }

/* The site is dark by default, so .c2c-dark is now a no-op that only needs to
   re-assert the token set for any band that previously relied on it. Keeping
   the class alive means none of the existing markup has to change. */
.c2c-dark {
  --fg:     var(--on-dark);
  --fg-mid: var(--on-dark-mid);
  --fg-dim: #8296b5;
  --line:      rgba(255,255,255,.13);
  --line-soft: rgba(255,255,255,.07);
  --card:      rgba(255,255,255,.045);
  color: var(--fg);
}

/* The inverse: a light band dropped into the dark page for contrast breaks
   (pricing tables, certificates, anything print-like). */
.c2c-light {
  --fg:      var(--on-light);
  --fg-mid:  var(--on-light-mid);
  --fg-dim:  #566a86;
  --bg:        #eef5fd;
  --card:      #ffffff;
  --card-solid:#ffffff;
  --line:      #ccdcef;
  --line-soft: #e2ecf7;
  --sh-1: 0 1px 2px rgba(4,18,43,.05), 0 4px 14px rgba(4,18,43,.05);
  --sh-2: 0 2px 6px rgba(4,18,43,.06), 0 14px 40px rgba(4,18,43,.09);
  --sh-3: 0 8px 22px rgba(4,18,43,.08), 0 36px 90px rgba(4,18,43,.14);
  --edge: inset 0 1px 0 rgba(255,255,255,.9);
  background: var(--bg);
  color: var(--fg);
}

/* ---------- 2. Reset (opt-in via html.c2c) ------------------------------- */

html.c2c {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;              /* JS eased scrolling owns this */
  scrollbar-color: var(--blue) transparent;
  /* Reveal offsets and parallax push elements sideways before they animate
     in, which would otherwise open a horizontal scrollbar. `clip` contains
     that without turning the root into a scroll container the way `hidden`
     would — which would break every position:sticky pin on the site. */
  overflow-x: clip;
}
html.c2c * { box-sizing: border-box; }
html.c2c body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
/* Element resets are wrapped in :where() so they carry ZERO specificity.
   Without this, `html.c2c a` (0,1,2) outranks `.c2c-btn` (0,1,0) and every
   anchor styled as a button inherits its colour instead of taking the
   component's — which renders navy text on a navy button. */
:where(html.c2c) :where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}
:where(html.c2c) :where(p)  { margin: 0; text-wrap: pretty; }
:where(html.c2c) :where(a)  { color: inherit; text-decoration: none; }
:where(html.c2c) :where(img, svg, canvas) { display: block; max-width: 100%; }
:where(html.c2c) :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(html.c2c) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
html.c2c ::selection { background: var(--cyan); color: var(--on-accent); }
html.c2c:has(.c2c-menu.is-open) body,
html.c2c.is-locked body { overflow: hidden; }

/* Focus ring — visible, brand-coloured, never removed. */
html.c2c :focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. WebGL canvas + atmosphere --------------------------------- */

.c2c-stage {
  position: fixed;
  inset: 0;
  z-index: -1;                 /* body isolates, so this stays behind content */
  pointer-events: none;
  /* Fallback gradient shows if WebGL never initialises. */
  background:
    radial-gradient(78% 58% at 78% 6%,  rgba(34,211,238,.22), transparent 60%),
    radial-gradient(68% 54% at 10% 26%, rgba(63,127,232,.20), transparent 58%),
    radial-gradient(85% 68% at 52% 106%, rgba(139,124,248,.16), transparent 62%),
    var(--bg-deep);
}
.c2c-stage canvas {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
/* Deliberately under full strength: this is a backdrop sitting behind live
   text, and at opacity 1 the scene wins the page instead of supporting it.
   .8 was still loud enough that rings and cubes crossing a headline read as
   part of it. */
.c2c-stage.is-live canvas { opacity: .62; }
/* Once WebGL paints, drop the CSS stand-in so it doesn't double up. */
.c2c-stage.is-live { background: none; }

/* Readability veil.
   Dimming the scene evenly is not enough on its own: the copy sits in a
   predictable place, so the backdrop is pushed furthest down exactly there
   and left at full strength where the layout is empty and the scene is
   supposed to be seen.

   On wide screens the rig is parked right of centre and the text column runs
   down the left, so the veil is a horizontal ramp — heaviest at the left
   edge, gone by roughly three-quarters across. Below 900px the rig recentres
   and sits under everything, so the ramp becomes vertical instead, weighted
   to the top where the headline and lead paragraph are.

   This is a wash over the whole stage, not a panel behind the text: no block
   appears around any paragraph, which is what made the earlier attempt look
   like boxes had been pasted over the scene. */
.c2c-stage.is-live::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(5, 9, 20, .58) 0%,
    rgba(5, 9, 20, .34) 34%,
    rgba(5, 9, 20, .12) 58%,
    rgba(5, 9, 20, 0) 76%
  );
}

@media (max-width: 900px) {
  .c2c-stage.is-live::after {
    background: linear-gradient(
      to bottom,
      rgba(5, 9, 20, .52) 0%,
      rgba(5, 9, 20, .40) 46%,
      rgba(5, 9, 20, .18) 78%,
      rgba(5, 9, 20, .06) 100%
    );
  }
}

/* Film grain — the single cheapest way to make flat gradients read as depth. */
.c2c-grain {
  position: fixed;
  inset: -50%;
  z-index: 2;                  /* over page content, under the nav */
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 7s steps(6) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3%,2%); }
  40% { transform: translate(2%,-3%); }
  60% { transform: translate(-2%,-2%); }
  80% { transform: translate(3%,1%); }
}

/* One stacking context on <body> is what lets .c2c-stage sit at z-index:-1
   behind every unpositioned element without falling behind the page
   background — and it avoids forcing position/z-index onto body children,
   which would clobber position:fixed on the nav and the full-screen menu. */
html.c2c body { isolation: isolate; }

/* Legacy (Tailwind-styled) pages opt into the 3D stage with .c2c-host on
   <body> instead of html.c2c, so they gain the WebGL backdrop and motion
   layer without inheriting the typographic reset that would fight Tailwind.
   The body has to go transparent for the fixed canvas behind it to show. */
body.c2c-host { isolation: isolate; background-color: transparent !important; }
html:has(> body.c2c-host) { background-color: var(--bg); }

/* ---------- 4. Layout primitives ----------------------------------------- */

.c2c-shell  { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.c2c-shell--wide { max-width: var(--shell-wide); }
.c2c-shell--narrow { max-width: 860px; }

.c2c-sec { position: relative; padding-block: var(--sec-y); }
.c2c-sec--tight { padding-block: clamp(2.5rem, 6vh, 4.5rem); }
.c2c-sec--flush { padding-block: 0; }

/* Full-bleed navy band with its own soft light.
   Deliberately not opaque: the fixed WebGL stage sits behind the whole page,
   so a touch of alpha lets the scene ghost through the band instead of the
   3D simply vanishing between light sections. */
.c2c-band {
  position: relative;
  background: linear-gradient(168deg, rgba(16,28,56,.72) 0%, rgba(10,18,38,.62) 48%, rgba(6,13,31,.76) 100%);
  color: var(--on-dark);
  overflow: clip;
  border-block: 1px solid rgba(255,255,255,.06);
}
/* Lower alpha where the scene should be a visible part of the composition. */
.c2c-band--see {
  background: linear-gradient(168deg, rgba(16,28,56,.34) 0%, rgba(10,18,38,.20) 48%, rgba(6,13,31,.42) 100%);
}
.c2c-band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 82% 12%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(52% 46% at 10% 82%, rgba(124,108,245,.18), transparent 62%);
  pointer-events: none;
}
.c2c-band > * { position: relative; z-index: 1; }

.c2c-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.c2c-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.c2c-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.c2c-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.c2c-grid--split { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }

@media (max-width: 1000px) {
  .c2c-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .c2c-grid--split { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 720px) {
  .c2c-grid--2, .c2c-grid--3, .c2c-grid--4 { grid-template-columns: minmax(0,1fr); }
}

/* ---------- 5. Type ------------------------------------------------------ */

/* line-height must clear 1 on a multi-line display heading: at .92 the glyphs
   of consecutive lines physically overlap, which reads as ghosted text
   sitting behind the line above it. */
.c2c-mega { font-family: var(--font-display); font-weight: 800; font-size: var(--t-mega); line-height: 1.04; letter-spacing: -.04em; }
.c2c-hero-t { font-size: var(--t-hero); }
.c2c-h1 { font-size: var(--t-h1); }
.c2c-h2 { font-size: var(--t-h2); }
.c2c-h3 { font-size: var(--t-h3); letter-spacing: -.02em; }
.c2c-lead { font-size: var(--t-lead); color: var(--fg-mid); line-height: 1.62; max-width: 62ch; }
.c2c-body { color: var(--fg-mid); }
.c2c-small { font-size: var(--t-sm); color: var(--fg-dim); }

.c2c-eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--aqua);
}
.c2c-light .c2c-eyebrow { color: var(--blue); }
.c2c-eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: currentColor; opacity: .55;
}
.c2c-eyebrow--bare::before { display: none; }

.c2c-grad {
  background: linear-gradient(102deg, var(--aqua) 0%, var(--cyan-lift) 48%, var(--violet-lift) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.c2c-light .c2c-grad {
  background: linear-gradient(102deg, var(--blue) 0%, var(--cyan) 52%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Outlined display text. The stroke colour has to carry the whole glyph, so
   it uses a mid-tone rather than the hairline colour — a --line stroke on the
   --bg surface is barely 1.2:1 and reads as missing text. */
.c2c-outline-t {
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(255,255,255,.62);
}
.c2c-light .c2c-outline-t { -webkit-text-stroke-color: var(--fg-dim); }

/* -webkit-text-stroke is unprefixed nowhere; without it `color: transparent`
   would leave nothing at all, so fall back to solid text. */
@supports not (-webkit-text-stroke: 1px #000) {
  .c2c-outline-t, .c2c-num { color: var(--on-dark-mid); }
  .c2c-light .c2c-outline-t, .c2c-light .c2c-num { color: var(--fg-dim); }
}

/* ---------- 6. Buttons --------------------------------------------------- */

.c2c-btn {
  --btn-bg: linear-gradient(118deg, var(--blue) 0%, var(--cyan) 100%);
  --btn-fg: var(--on-accent);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.7em;
  font-family: var(--font-body);
  font-size: var(--t-sm); font-weight: 700; letter-spacing: -.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), color .3s var(--ease);
  box-shadow: 0 10px 30px -12px rgba(34,211,238,.5);
  will-change: transform;
}
/* Liquid fill sweeps up from the base on hover. */
.c2c-btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--cyan-lift), var(--aqua));
  transform: translateY(101%);
  transition: transform .55s var(--ease-out);
}
.c2c-btn:hover { box-shadow: var(--sh-glow); }
.c2c-btn:hover::after { transform: translateY(0); }
.c2c-btn:active { transform: scale(.97); }

.c2c-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22);
}
.c2c-btn--ghost:hover { --btn-fg: var(--on-accent); box-shadow: inset 0 0 0 1.5px transparent, var(--sh-glow); }

.c2c-btn--glass {
  --btn-bg: rgba(255,255,255,.10);
  --btn-fg: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}
.c2c-btn--lg { padding: 1.15em 2.2em; font-size: 1rem; }
.c2c-btn--sm { padding: .7em 1.25em; font-size: var(--t-xs); }

.c2c-btn .c2c-btn__i { transition: transform .45s var(--ease-out); }
.c2c-btn:hover .c2c-btn__i { transform: translateX(4px); }

/* Text link with a wipe underline. */
.c2c-link {
  position: relative;
  font-weight: 700; font-size: var(--t-sm);
  display: inline-flex; align-items: center; gap: .45em;
}
.c2c-link::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.c2c-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 7. Cards ----------------------------------------------------- */

.c2c-card {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--edge), var(--sh-1);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s var(--ease), background .4s var(--ease);
}
.c2c-card:hover {
  background: rgba(255,255,255,.075);
  box-shadow: var(--edge), var(--sh-2);
  border-color: rgba(34,211,238,.34);
}

/* Cursor-tracked sheen; --mx/--my are written by the motion layer. */
.c2c-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(34,211,238,.16), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.c2c-card:hover::before { opacity: 1; }
.c2c-card > * { position: relative; }

.c2c-card--glass {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 24px 60px -28px rgba(0,0,0,.65);
}
.c2c-card--glass:hover { border-color: rgba(255,255,255,.3); }

.c2c-card--flat { box-shadow: none; background: transparent; border-color: var(--line); }

/* A navy card sitting inside a light section. Flipping the whole token set
   (rather than just setting color:#fff inline) is what keeps nested chips,
   links, leads and numerals legible on the dark ground. */
.c2c-invert {
  --fg:     var(--on-dark);
  --fg-mid: var(--on-dark-mid);
  --fg-dim: #9db6d6;
  --line:      rgba(255,255,255,.18);
  --line-soft: rgba(255,255,255,.1);
  --card:      rgba(255,255,255,.07);
  background: var(--grad-invert);
  border-color: transparent;
  color: var(--fg);
}
.c2c-invert .c2c-eyebrow { color: var(--aqua); }
.c2c-invert .c2c-chip {
  background: rgba(255,255,255,.1);
  color: var(--aqua);
  border-color: rgba(255,255,255,.2);
}
.c2c-invert .c2c-num { -webkit-text-stroke-color: rgba(255,255,255,.32); }
.c2c-invert .c2c-link { color: var(--aqua); }

/* Tilt wrapper — perspective lives on the parent so the card keeps crisp text. */
.c2c-tilt { perspective: 1100px; }
.c2c-tilt > * {
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out);
}
.c2c-tilt.is-tilting > * { transition: transform .12s linear; }
.c2c-tilt [data-depth] { transform: translateZ(calc(var(--depth-px, 28px))); }

/* Numbered feature card */
.c2c-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255,255,255,.55);
  transition: -webkit-text-stroke-color .5s var(--ease), color .5s var(--ease);
}
.c2c-card:hover .c2c-num { -webkit-text-stroke-color: transparent; color: var(--aqua); }
.c2c-light .c2c-num { -webkit-text-stroke-color: var(--fg-dim); }
.c2c-light .c2c-card:hover .c2c-num { color: var(--blue); }

/* Stat block */
.c2c-stat__n {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 800; line-height: 1; letter-spacing: -.04em;
}
.c2c-stat__l {
  margin-top: .5rem;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
}

/* Pill / chip */
.c2c-chip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .42em 1em;
  font-size: var(--t-xs); font-weight: 700;
  border-radius: 100px;
  background: rgba(34,211,238,.10);
  color: var(--aqua);
  border: 1px solid rgba(34,211,238,.24);
}
.c2c-light .c2c-chip {
  background: rgba(43,91,181,.09);
  color: var(--blue);
  border-color: rgba(43,91,181,.18);
}

/* ---------- 8. Navigation ------------------------------------------------ */

.c2c-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease), backdrop-filter .45s var(--ease);
}
.c2c-nav__in {
  width: 100%; max-width: var(--shell-wide);
  margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.c2c-nav.is-stuck {
  height: 62px;
  background: rgba(6,12,26,.72);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 14px 40px -20px rgba(0,0,0,.8);
}
/* Auto-hide on scroll down, reveal on scroll up. */
.c2c-nav.is-hidden { transform: translateY(-100%); transition: transform .5s var(--ease-out), background .45s var(--ease); }
.c2c-nav { transform: translateY(0); }

/* ---- Logo -------------------------------------------------------------
   The supplied logo is white line-art drawn for a dark background, so it
   can't simply sit on a light page. Rather than recolour the artwork, we
   give it a navy plate built from the same gradient, radius and shadow
   tokens as the rest of the system — so it reads as a designed badge that
   belongs to the page, not a cropped image dropped on top of it.
   On dark surfaces the plate is unnecessary and the lockup stands alone. */

.c2c-nav__logo { display: inline-flex; align-items: center; gap: .68rem; }

/* Name + tagline beside the nav mark. The mark alone doesn't say who the
   company is, and the strapline only appeared in the footer lockup. Both drop
   away on narrow screens so the bar keeps room for the burger. */
.c2c-nav__wordmark {
  display: flex; flex-direction: column; justify-content: center;
  line-height: 1.06;
}
.c2c-nav__name {
  font-family: var(--font-display);
  font-size: 1.04rem; font-weight: 800; letter-spacing: -.025em;
  color: var(--fg);
  white-space: nowrap;
}
.c2c-nav__tag {
  margin-top: .18em;
  font-family: var(--font-body);
  font-size: .55rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--aqua);
  white-space: nowrap;
}
.c2c-nav.is-stuck .c2c-nav__tag { display: none; }
@media (max-width: 620px) { .c2c-nav__wordmark { display: none; } }

.c2c-logo-plate {
  --plate: 54px;
  position: relative;
  display: grid; place-items: center;
  width: var(--plate); height: var(--plate);
  border-radius: 17px;
  background:
    linear-gradient(152deg, rgba(34,211,238,.18) 0%, rgba(63,127,232,.12) 55%, rgba(139,124,248,.14) 100%),
    var(--grad-glass);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 0 0 1px rgba(34,211,238,.22),
    0 10px 26px -12px rgba(34,211,238,.45);
  overflow: hidden;
  transition: --plate .45s var(--ease), width .45s var(--ease), height .45s var(--ease),
              border-radius .45s var(--ease), box-shadow .45s var(--ease-out),
              transform .45s var(--ease-out);
}
/* Same cyan/violet wash the 3D scene uses, so the plate ties into the stage. */
.c2c-logo-plate::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(72% 60% at 78% 10%, rgba(34,211,238,.34), transparent 62%),
              radial-gradient(64% 56% at 12% 92%, rgba(124,108,245,.28), transparent 64%);
  opacity: .85;
}
/* The mark is portrait. Sizing it inside a square box with object-fit:contain
   guarantees it is letterboxed to fit whatever the plate size is, rather than
   relying on a percentage height resolving against the grid area. */
.c2c-logo-plate img {
  position: relative;
  width: 68%; height: 68%;
  object-fit: contain;
}
.c2c-nav__logo:hover .c2c-logo-plate {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 14px 34px -12px rgba(0,140,190,.8);
}
.c2c-nav.is-stuck .c2c-logo-plate { --plate: 44px; border-radius: 14px; }
.c2c-logo-plate--sm { --plate: 44px; border-radius: 14px; }
.c2c-logo-plate--lg { --plate: 76px; border-radius: 24px; }
.c2c-logo-plate--xl { --plate: 104px; border-radius: 32px; }

/* Full lockup, used where there's room and a dark ground to sit on. */
.c2c-logo-full { display: block; width: 190px; height: auto; }

.c2c-nav__links { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.6rem); }
.c2c-nav__link {
  position: relative;
  padding: .5rem 0;
  font-family: var(--font-display);
  font-size: .85rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--fg-mid);
  transition: color .35s var(--ease);
}
.c2c-nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.c2c-nav__link:hover { color: var(--fg); }
.c2c-nav__link:hover::after,
.c2c-nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.c2c-nav__link[aria-current="page"] { color: var(--aqua); }

.c2c-nav__actions { display: flex; align-items: center; gap: .7rem; }

.c2c-burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}
.c2c-burger span {
  display: block; width: 19px; height: 2px; border-radius: 2px;
  background: var(--fg);
  transition: transform .4s var(--ease-out), opacity .25s var(--ease);
}
.c2c-burger span + span { margin-top: 5px; }
.c2c-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.c2c-burger.is-open span:nth-child(2) { opacity: 0; }
.c2c-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .c2c-nav__links, .c2c-nav__actions .c2c-btn { display: none; }
  .c2c-burger { display: flex; }
}

/* Full-screen menu */
.c2c-menu {
  position: fixed; inset: 0;
  z-index: var(--z-menu);
  display: grid; place-items: center;
  background: var(--grad-menu);
  color: var(--on-dark);
  clip-path: circle(0% at calc(100% - 46px) 42px);
  transition: clip-path .8s var(--ease-out);
  pointer-events: none;
}
.c2c-menu.is-open { clip-path: circle(150% at calc(100% - 46px) 42px); pointer-events: auto; }
.c2c-menu__list { display: flex; flex-direction: column; gap: .35rem; text-align: center; }
.c2c-menu__item {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 3.1rem);
  font-weight: 800; letter-spacing: -.04em;
  line-height: 1.14;
  opacity: 0; transform: translateY(26px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s var(--ease);
}
.c2c-menu.is-open .c2c-menu__item { opacity: 1; transform: none; }
.c2c-menu__item:hover { color: var(--cyan-lift); }

/* ---------- 9. Hero ------------------------------------------------------ */

.c2c-hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: var(--nav-h);
  overflow: clip;
}
/* The 3D scene lives behind the whole page, so where it passes under the
   headline it has to be quietened or the type becomes unreadable. This scrim
   fades the page colour across the text column and lets the scene stay legible
   on the right, where it isn't competing with anything. */
.c2c-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    var(--bg) 0%, var(--bg) 26%,
    color-mix(in srgb, var(--bg) 86%, transparent) 46%,
    color-mix(in srgb, var(--bg) 42%, transparent) 62%,
    transparent 78%);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .c2c-hero::before {
    background: linear-gradient(100deg, var(--bg) 0%, var(--bg) 30%, rgba(5,9,20,.75) 52%, rgba(5,9,20,0) 78%);
  }
}
.c2c-hero__in { width: 100%; position: relative; z-index: 1; }

/* Keep hero copy clear of the scene's busiest region on wide screens without
   squeezing the display type into extra lines. */
@media (min-width: 1100px) {
  .c2c-hero__in > h1 { max-width: 74%; }
  .c2c-hero__in > p  { max-width: 52ch; }
}

.c2c-scroll-cue {
  position: absolute; left: 50%; bottom: 2.2rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-dim);
}
.c2c-scroll-cue__rail {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--line), transparent);
  position: relative; overflow: hidden;
}
.c2c-scroll-cue__rail::after {
  content: ""; position: absolute; inset-inline: 0; top: -46px;
  height: 46px; background: linear-gradient(to bottom, transparent, var(--cyan));
  animation: cueRun 2.1s var(--ease-io) infinite;
}
@keyframes cueRun { to { transform: translateY(92px); } }

/* ---------- 10. Pinned scroll scenes ------------------------------------- */

/* A pin section is N screens tall; its inner sticks for the full run so the
   3D scene and copy can be driven by --p (0→1) as the user scrolls through. */
.c2c-pin { position: relative; height: calc(100svh * var(--screens, 2)); }
.c2c-pin--2 { --screens: 2; }
.c2c-pin--3 { --screens: 3; }
.c2c-pin--4 { --screens: 4; }
.c2c-pin--5 { --screens: 5; }
.c2c-pin--6 { --screens: 6; }
.c2c-pin__stick {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center;
  overflow: clip;
}
/* Steps cross-fade based on the active index the motion layer sets. */
.c2c-step {
  position: absolute; inset: 0;
  /* The gutter lives here, not on the shell. An absolutely positioned box
     resolves inset against its containing block's PADDING box, so `inset: 0`
     steps straight over the shell's padding-inline and every pinned step was
     running flush to the window edge while the rest of the page kept its
     margin.

     Restating the padding on the step alone is not enough either: where the
     shell still carried its own, the two stacked and the step sat at twice
     the gutter. The shell's padding is zeroed inside a pin just below, which
     leaves exactly one source of the gutter no matter where the containing
     block resolves to. */
  padding-inline: var(--gut);
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transform: translateY(34px) scale(.985);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), visibility 0s .7s;
  pointer-events: none;
}
.c2c-step.is-active {
  opacity: 1; visibility: visible;
  transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), visibility 0s;
  pointer-events: auto;
}

/* When a step's content is taller than the viewport the sticky frame would
   clip it, so the motion layer measures on load and unpins instead: the
   steps stack and read as ordinary sections. Nothing is ever hidden. */
.c2c-pin.is-unpinned { height: auto; }
.c2c-pin.is-unpinned .c2c-pin__stick {
  position: static; height: auto; display: block; overflow: visible;
}
.c2c-pin.is-unpinned .c2c-pin__stick > .c2c-shell { height: auto; }
.c2c-pin.is-unpinned .c2c-step {
  position: relative; inset: auto;
  opacity: 1; visibility: visible; transform: none;
  pointer-events: auto;
  padding-block: clamp(2.5rem, 7vh, 4.5rem);
}
.c2c-pin.is-unpinned .c2c-rail { display: none; }

/* Step progress rail — sits in the gutter, clear of the content column. */
.c2c-rail {
  position: absolute; right: .75rem; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .8rem;
  z-index: 3;
}
/* Only show the rail when there's gutter to spare beside the content. */
@media (max-width: 1180px) { .c2c-rail { display: none; } }
/* Single source of the gutter inside a pin — see .c2c-step above. */
.c2c-pin__stick > .c2c-shell { padding-inline: 0; }

@media (min-width: 1181px) {
  .c2c-pin__stick .c2c-step { padding-right: calc(var(--gut) + 1.5rem); }
}
.c2c-rail__dot {
  width: 3px; height: 30px; border-radius: 3px;
  background: currentColor; opacity: .18;
  transition: opacity .45s var(--ease), height .45s var(--ease-out);
}
.c2c-rail__dot.is-on { opacity: 1; height: 48px; }

/* ---------- 11. Reveals -------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .9s var(--ease-out) var(--rd, 0s),
    transform .9s var(--ease-out) var(--rd, 0s),
    clip-path .9s var(--ease-out) var(--rd, 0s);
  will-change: transform, opacity;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-42px); }
[data-reveal="right"] { transform: translateX(42px); }
[data-reveal="scale"] { transform: scale(.93); }
[data-reveal="mask"]  { transform: none; clip-path: inset(0 100% 0 0); }
[data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* On narrow screens a sideways entrance reads as a layout glitch and needs
   off-canvas room it doesn't have; come up from below instead. */
@media (max-width: 720px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(30px); }
}

/* Split-text: each word rises and fades into place on its own delay.
   Deliberately NOT clipped by a per-word overflow mask. A mask has to be
   taller than the line to spare descenders, which makes consecutive lines'
   masks overlap — and a word animating on line 2 then paints into line 1's
   row. The same clipping also broke gradient headings and left slivers of
   un-revealed words showing. A short rise plus a fade reads almost identically
   and cannot clip anything. */
.c2c-line { display: block; }
.c2c-wordmask { display: inline-block; }
.c2c-word {
  display: inline-block;
  transform: translateY(.36em);
  opacity: 0;
  transition:
    transform .85s var(--ease-out) var(--wd, 0s),
    opacity .7s var(--ease-out) var(--wd, 0s);
  will-change: transform, opacity;
}
.is-in .c2c-word, .c2c-split.is-in .c2c-word { transform: none; opacity: 1; }

/* Once the split words own the gradient, the element they came out of must
   stop painting its own. background-clip:text resolves against the
   untransformed inline boxes, so while the words are offset by
   translateY(.36em) the ancestor renders a second copy of the glyphs one
   line higher -- which on a multi-line heading reads as a stray underline
   under the line above. The words carry .c2c-grad themselves, so nothing is
   lost by muting the ancestor. */
.c2c-grad.c2c-grad-host {
  background: none;
  /* currentColor here is still `transparent` from .c2c-grad, so any text that
     didn't get split (stray punctuation, a nbsp) would vanish. Fall back to
     real ink instead. */
  -webkit-text-fill-color: var(--fg);
}

/* Parallax — the motion layer writes --py in px. */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ---------- 12. Marquee -------------------------------------------------- */

.c2c-marquee {
  position: relative;
  display: flex; overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.c2c-marquee__row {
  display: flex; flex-shrink: 0; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
  min-width: 100%;
  animation: marqueeRun var(--mq-dur, 42s) linear infinite;
}
.c2c-marquee[data-dir="rev"] .c2c-marquee__row { animation-direction: reverse; }
.c2c-marquee:hover .c2c-marquee__row { animation-play-state: paused; }
@keyframes marqueeRun { to { transform: translateX(-100%); } }

.c2c-marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  font-weight: 800; letter-spacing: -.035em;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
}
/* On the dark canvas the accent can run bright; the deeper teal is kept for
   the light band, where pure cyan would only reach 2.2:1. */
.c2c-marquee__sep { color: var(--cyan-lift); font-size: .55em; }
.c2c-light .c2c-marquee__sep { color: #0d6f85; }

/* ---------- 12b. 3D scene annotations ------------------------------------
   Callouts pinned to points on the WebGL scene. Most visitors won't read a
   quantum computer from its silhouette alone, so the parts get named and the
   flow through them is spelled out. Positions are written each frame by the
   engine projecting the 3D anchors to screen space. */

.c2c-anno-layer {
  /* Single knob for how present the scene labels are. */
  --anno-op: .68;
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease-out) .5s;
}
/* Only shown once the scene is actually rendering — a callout pointing at an
   empty gradient is worse than no callout. */
.c2c-anno-layer.is-on { opacity: var(--anno-op); }

.c2c-anno {
  position: absolute; top: 0; left: 0;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0);
  will-change: transform;
}
.c2c-anno__in {
  position: relative;
  transform: translate(0, -50%);
  padding-left: 62px;
  white-space: nowrap;
}
/* Anchor dot with a soft pulse, plus the leader line out to the text. */
.c2c-anno__dot {
  position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(34,211,238,.5);
  animation: annoPulse 2.4s var(--ease-out) infinite;
}
@keyframes annoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,211,238,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(34,211,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}
.c2c-anno__line {
  position: absolute; left: 0; top: 50%;
  width: 50px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), rgba(34,211,238,.18));
}
.c2c-anno__t {
  display: block;
  font-family: var(--font-mono);
  font-size: .58rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan-lift);
  text-shadow: 0 1px 6px rgba(5,9,20,.95), 0 0 2px rgba(5,9,20,.9);
}
.c2c-anno__d {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem; line-height: 1.35;
  color: var(--fg-dim);
  margin-top: .2rem;
  text-shadow: 0 1px 6px rgba(5,9,20,.95), 0 0 2px rgba(5,9,20,.9);
}
/* Mirror the callout when the anchor sits on the right of the viewport. */
.c2c-anno.is-flipped .c2c-anno__in {
  transform: translate(-100%, -50%);
  padding-left: 0; padding-right: 62px;
  text-align: right;
}
.c2c-anno.is-flipped .c2c-anno__dot { left: auto; right: 0; margin: -3.5px -3.5px 0 0; }
.c2c-anno.is-flipped .c2c-anno__line {
  left: auto; right: 0;
  background: linear-gradient(270deg, var(--cyan), rgba(34,211,238,.18));
}
.c2c-anno { transition: opacity .45s var(--ease); }
.c2c-anno.is-hidden { opacity: 0; }

/* Too cramped to be readable on a phone; the static legend covers it. */
@media (max-width: 900px) { .c2c-anno-layer { display: none; } }
@media (prefers-reduced-motion: reduce) { .c2c-anno__dot { animation: none; } }

/* Static legend — carries the same information without depending on WebGL. */
.c2c-legend {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  font-size: var(--t-xs);
}
.c2c-legend li { display: flex; align-items: baseline; gap: .5rem; }
.c2c-legend b {
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan-lift);
}
.c2c-legend span { color: var(--fg-dim); }

/* ---------- 13. Custom cursor -------------------------------------------- */

.c2c-cursor, .c2c-cursor-ring {
  position: fixed; top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
/* The dot and ring are mixed for the dark canvas, which is now the default
   surface. They used to be navy-on-pale; against #050914 that rendered a
   near-black dot on a near-black page while `cursor: none` had already hidden
   the real pointer -- so there was effectively no cursor at all. The glow is
   what actually makes it findable over the busy WebGL stage. */
.c2c-cursor {
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--aqua);
  box-shadow: 0 0 10px 2px rgba(157,242,255,.65);
}
.c2c-cursor-ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: 0 0 12px -2px rgba(34,211,238,.5), inset 0 0 8px -4px rgba(34,211,238,.6);
  transition: opacity .3s var(--ease), width .35s var(--ease-out), height .35s var(--ease-out),
              margin .35s var(--ease-out), border-color .35s var(--ease), background .35s var(--ease);
}
/* Light bands invert it back to dark ink. */
.c2c-has-cursor.is-light-zone .c2c-cursor {
  background: var(--navy); box-shadow: 0 0 8px 1px rgba(4,18,43,.35);
}
.c2c-has-cursor.is-light-zone .c2c-cursor-ring {
  border-color: rgba(4,18,43,.45); box-shadow: none;
}
.c2c-has-cursor .c2c-cursor,
.c2c-has-cursor .c2c-cursor-ring { opacity: 1; }
.c2c-has-cursor.is-hovering .c2c-cursor-ring {
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-color: transparent;
  background: rgba(34,211,238,.18);
}
.c2c-has-cursor.is-hovering .c2c-cursor { opacity: 0; }
.c2c-has-cursor.is-dark-zone .c2c-cursor { background: var(--aqua); }
.c2c-has-cursor.is-dark-zone .c2c-cursor-ring { border-color: rgba(255,255,255,.55); }
/* Only hide the native cursor once ours is confirmed live on a fine pointer. */
.c2c-has-cursor, .c2c-has-cursor a, .c2c-has-cursor button { cursor: none; }

/* ---------- 14. Footer --------------------------------------------------- */

.c2c-footer {
  position: relative;
  background: linear-gradient(180deg, rgba(10,18,38,.9), var(--bg-deep));
  color: var(--on-dark);
  overflow: clip;
  border-top: 1px solid rgba(255,255,255,.08);
}
.c2c-footer__top { padding-block: clamp(3.5rem, 8vh, 6rem) clamp(2rem, 5vh, 3.5rem); }
.c2c-footer__grid {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
}
@media (max-width: 900px) { .c2c-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .c2c-footer__grid { grid-template-columns: minmax(0,1fr); } }
.c2c-footer__h {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--aqua); margin-bottom: 1rem;
}
.c2c-footer__l {
  display: block; padding: .32rem 0;
  font-size: var(--t-sm); color: var(--on-dark-mid);
  transition: color .3s var(--ease), transform .35s var(--ease-out);
}
.c2c-footer__l:hover { color: #fff; transform: translateX(5px); }
.c2c-footer__bar {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: var(--t-xs); color: var(--fg-faint);
}
.c2c-soc { display: flex; gap: .7rem; }
.c2c-soc a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07);
  transition: background .35s var(--ease), transform .35s var(--ease-out);
}
.c2c-soc a:hover { transform: translateY(-3px); }
.c2c-soc svg { width: 16px; height: 16px; fill: #fff; }


/* ---------- 15. Page transition ------------------------------------------ */

.c2c-wipe {
  position: fixed; inset: 0;
  z-index: 150;
  background: var(--grad-wipe);
  transform: scaleY(0); transform-origin: bottom;
  pointer-events: none;
}
.c2c-wipe.is-out { transform: scaleY(1); transform-origin: bottom; transition: transform .6s var(--ease-io); }
.c2c-wipe.is-in  { transform: scaleY(0); transform-origin: top;    transition: transform .7s var(--ease-io); }

/* Top scroll progress bar */
.c2c-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 100%;
  z-index: calc(var(--z-nav) + 1);
  transform: scaleX(var(--sp, 0)); transform-origin: left;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--violet));
}

/* ---------- 15b. Forms --------------------------------------------------- */

.c2c-form { display: grid; gap: 1.1rem; }
.c2c-field { display: flex; flex-direction: column; gap: .45rem; }
.c2c-field--wide { grid-column: 1 / -1; }
.c2c-form--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 640px) { .c2c-form--2 { grid-template-columns: minmax(0,1fr); } }

.c2c-label {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-dim);
}
/* Brand amber is only 2.4:1 on the light surface; this deeper burnt tone
   keeps the accent readable for the required marker. */
.c2c-label .req { color: #a8460f; }
.c2c-label .req { color: var(--amber); }

.c2c-input, .c2c-select, .c2c-textarea {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit; font-size: var(--t-sm);
  color: var(--fg);
  background: rgba(255,255,255,.055);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  appearance: none;
}
.c2c-textarea { min-height: 8.5rem; resize: vertical; }
.c2c-select {
  /* Chevron drawn inline so the control needs no icon font. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%238296b5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.c2c-input::placeholder, .c2c-textarea::placeholder { color: var(--fg-dim); opacity: .75; }
.c2c-input:focus, .c2c-select:focus, .c2c-textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(34,211,238,.22);
}
.c2c-light .c2c-input, .c2c-light .c2c-select, .c2c-light .c2c-textarea {
  background: #fff;
  border-color: var(--line);
  color: var(--fg);
}

/* Segmented choice, used for the contact page's enquiry-type switch. */
.c2c-seg { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
.c2c-seg__btn {
  padding: .85rem 1rem;
  font-size: var(--t-sm); font-weight: 700;
  text-align: center;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--fg-mid);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.c2c-seg__btn[aria-pressed="true"] {
  border-color: var(--cyan);
  color: var(--aqua);
  background: rgba(34,211,238,.12);
}

.c2c-note { font-size: var(--t-xs); color: var(--fg-dim); }
.c2c-hidden { display: none !important; }

/* ---------- 16. Utilities ------------------------------------------------ */

.c2c-center { text-align: center; }
.c2c-center .c2c-lead { margin-inline: auto; }
.c2c-stack  { display: flex; flex-direction: column; }
.c2c-row    { display: flex; flex-wrap: wrap; align-items: center; }
.c2c-gap-xs { gap: .5rem; }  .c2c-gap-sm { gap: .85rem; }
.c2c-gap    { gap: 1.4rem; } .c2c-gap-lg { gap: 2.4rem; }
.c2c-mt-sm  { margin-top: .8rem; }  .c2c-mt { margin-top: 1.5rem; }
.c2c-mt-lg  { margin-top: 2.6rem; } .c2c-mt-xl { margin-top: clamp(3rem,6vw,5rem); }
.c2c-mb     { margin-bottom: 1.5rem; } .c2c-mb-lg { margin-bottom: 2.6rem; }
.c2c-hairline { height: 1px; background: var(--line); border: 0; margin: 0; }
.c2c-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.c2c-skip {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%,-120%);
  z-index: calc(var(--z-cursor) + 1);
  padding: .7rem 1.3rem; border-radius: 0 0 10px 10px;
  background: var(--cyan); color: var(--on-accent); font-size: var(--t-sm); font-weight: 700;
  transition: transform .3s var(--ease-out);
}
.c2c-skip:focus { transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .c2c-hide-sm { display: none !important; }
}

/* ---------- 17. Reduced motion / no-JS ----------------------------------- */

/* Without JS the reveal classes never fire, so content must be visible. */
html.c2c.no-js [data-reveal],
html.c2c.no-js .c2c-step { opacity: 1; transform: none; visibility: visible; clip-path: none; position: relative; }
html.c2c.no-js .c2c-word { transform: none; opacity: 1; }
html.c2c.no-js .c2c-pin { height: auto; }
html.c2c.no-js .c2c-pin__stick { position: relative; height: auto; display: block; }
html.c2c.no-js .c2c-step { inset: auto; padding-block: 3rem; }

@media (prefers-reduced-motion: reduce) {
  html.c2c { scroll-behavior: auto; }
  html.c2c *,
  html.c2c *::before,
  html.c2c *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .c2c-word { transform: none !important; opacity: 1 !important; }
  .c2c-grain { display: none; }
  .c2c-marquee__row { animation: none; }
  /* Unpin: stacked, readable, no scroll-driven state. */
  .c2c-pin { height: auto !important; }
  .c2c-pin__stick { position: relative; height: auto; display: block; }
  .c2c-step {
    position: relative; inset: auto;
    opacity: 1 !important; visibility: visible !important;
    transform: none !important;
    padding-block: 2.5rem;
  }
  .c2c-rail, .c2c-scroll-cue { display: none; }
}

/* ---------- 17. Tailwind interop ----------------------------------------
   Twenty-one pages predate this design system and still load Tailwind from
   the CDN. Their `tailwind.config` tokens were remapped to a Material-3 dark
   scheme, but stock utilities (bg-white, text-slate-600, border-blue-100 …)
   are generated by Tailwind itself and can't be reached that way — they kept
   painting light panels and near-black ink onto the deep-space canvas, which
   is what made those pages read as a different site.

   Re-pointing the stock utilities that actually appear is far less invasive
   than rewriting thousands of class strings, and it keeps the two systems
   agreeing on one palette. Scoped to body.c2c-host so it can never reach a
   page that isn't running Tailwind; the two-class selector also outranks
   Tailwind's single-class utilities, so no !important is needed.

   Tinted surfaces become translucent washes of their own hue rather than
   opaque blocks, so the WebGL stage still shows through as it does behind
   the native .c2c-card.

   The certificate / poster / Instagram generators are safe here: each draws
   its artwork into a <canvas> or an isolated popup document, so the only
   markup this touches on those pages is the surrounding control chrome. */

/* Material-3 surface utilities.
   These come from each page's inlined tailwind.config rather than from stock
   Tailwind, so the palette could never reach them: a themed page would have
   kept near-black panels floating on a blue field. Mapping them here means
   one palette definition drives the native pages and the Tailwind ones alike,
   instead of 30 inline configs needing the same edit. */
body.c2c-host .bg-surface                  { background-color: var(--bg); }
body.c2c-host .bg-surface-dim,
body.c2c-host .bg-surface-container-lowest { background-color: var(--surface-1); }
body.c2c-host .bg-surface-container-low    { background-color: var(--surface-2); }
body.c2c-host .bg-surface-container        { background-color: var(--surface-3); }
body.c2c-host .bg-surface-container-high   { background-color: var(--surface-4); }
body.c2c-host .bg-surface-container-highest{ background-color: var(--surface-5); }
body.c2c-host .bg-surface-variant          { background-color: var(--surface-variant); }
body.c2c-host .text-on-surface             { color: var(--fg); }
body.c2c-host .text-on-surface-variant     { color: var(--fg-mid); }

/* Neutral surfaces — the elevation ramp from §1. */
body.c2c-host .bg-white      { background-color: var(--card-solid); }

/* Opacity-modified whites.
   Tailwind compiles `bg-white/70` into its own class — `.bg-white\/70` — which
   the `.bg-white` rule above never matches. So while the text utilities on
   these pages were remapped for a dark canvas, the sticky navs kept painting a
   near-white panel underneath them: light ink on a light bar, measured at
   1.97:1 on the catalog nav where 4.5:1 is the floor. It affected the header
   of fifteen pages, checkout and every product page among them.

   The two bands are not the same kind of surface, so they are not treated the
   same. At .7 and above the utility is page chrome — a nav or header meant to
   read as its own plane — and becomes a translucent dark bar the blur can
   still work against. At .5-.6 it is an inset panel that was lighter than its
   parent, so it becomes a faint light wash, which is what "lighter than the
   surface behind it" means once the surface is dark.

   The low-opacity whites (bg-white/5 … /25) are already dark-canvas washes
   written for this design, and the black scrims are overlays. Both are left
   exactly as they are. */
body.c2c-host .bg-white\/70,
body.c2c-host .bg-white\/75,
body.c2c-host .bg-white\/80,
body.c2c-host .bg-white\/90,
body.c2c-host .bg-white\/95 { background-color: rgba(6, 13, 31, .72); }

body.c2c-host .bg-white\/50,
body.c2c-host .bg-white\/60 { background-color: rgba(255, 255, 255, .06); }

/* White ink on the primary accent.
   In this theme `primary` is #6da4ff — a light blue chosen to sit ON the dark
   canvas, not to be a surface under white text. Thirteen buttons and badges
   across six pages pair `bg-primary` with `text-white`, which measures 2.5:1;
   Material's own pairing for that surface is `on-primary` (#04121f), which
   clears 9:1. Restoring the pairing here fixes every one of them without
   touching thirteen class strings, and covers text nested inside the accent
   block as well as text on it.

   The group-hover form is listed separately because Tailwind emits it as its
   own class (`.group-hover\:text-white`), which the plain selectors miss. */
body.c2c-host .bg-primary.text-white,
body.c2c-host .bg-primary .text-white,
body.c2c-host .group:hover .group-hover\:bg-primary,
body.c2c-host .group:hover .group-hover\:bg-primary .group-hover\:text-white { color: #04121f; }

/* Gradients that carry white ink across a light stop.
   The "Book Demo" button on nine pages, and the icon plates on the catalog
   cards, run cyan-500 (#06b6d4) against blue-600 (#2563eb) under white text.
   The blue end passes and the cyan end does not — 2.43:1 — so the label fades
   out across its own button rather than failing outright, which is how it
   survived a check that sampled only one colour.

   Recolouring the ink cannot fix this: white fails at the cyan end, near-black
   fails at the blue end (3.66:1). The ramp itself is the problem, so the cyan
   stop is deepened to cyan-700 and the blue to blue-700. White then clears
   5.3:1 at the worst point, and the button keeps the look it was drawn with.

   The fix re-points Tailwind's own `--tw-gradient-from` for the three light
   stops that actually fail, rather than overriding `background-image` for
   each from/to pair. `--tw-gradient-stops` still resolves through this
   variable, so one declaration per colour covers every direction utility and
   every partner stop — including the catalog's icon plates, which pair the
   same light stops with -700 ends.

   Both ends are declared: the catalog uses `from-blue-600 to-cyan-500` as
   well as the reverse, so fixing only the `from` stop leaves the same colour
   failing when it happens to sit at the other end of the ramp.

   orange-600 is here for a different reason than the rest. Against a white
   icon it passes the 3:1 graphics bar, but the plate also carries a small
   uppercase label, and text needs 4.5:1 — which neither white nor white/80
   reaches on #ea580c. It is deepened to orange-700 so the label clears the
   text bar rather than the icon one.

   pink-500, violet-600 and slate-600 already clear both bars and keep their
   own values, so the card palette does not flatten out. */
body.c2c-host .from-cyan-500    { --tw-gradient-from: #0e7490 var(--tw-gradient-from-position); }
body.c2c-host .from-emerald-500 { --tw-gradient-from: #047857 var(--tw-gradient-from-position); }
body.c2c-host .from-sky-500     { --tw-gradient-from: #0369a1 var(--tw-gradient-from-position); }
body.c2c-host .from-orange-600  { --tw-gradient-from: #c2410c var(--tw-gradient-from-position); }

body.c2c-host .to-cyan-500      { --tw-gradient-to: #0e7490 var(--tw-gradient-to-position); }
body.c2c-host .to-emerald-500   { --tw-gradient-to: #047857 var(--tw-gradient-to-position); }
body.c2c-host .to-sky-500       { --tw-gradient-to: #0369a1 var(--tw-gradient-to-position); }
body.c2c-host .to-orange-600    { --tw-gradient-to: #c2410c var(--tw-gradient-to-position); }

body.c2c-host .bg-slate-50,
body.c2c-host .bg-gray-50,
body.c2c-host .bg-zinc-50    { background-color: #0a1226; }
body.c2c-host .bg-slate-100,
body.c2c-host .bg-gray-100,
body.c2c-host .bg-zinc-100   { background-color: #0d162b; }
body.c2c-host .bg-slate-200,
body.c2c-host .bg-gray-200   { background-color: #16203a; }

/* Neutral ink */
body.c2c-host .text-slate-800, body.c2c-host .text-gray-800 { color: #dbe6f7; }
body.c2c-host .text-slate-700, body.c2c-host .text-gray-700 { color: #cbd9ee; }
body.c2c-host .text-slate-600, body.c2c-host .text-gray-600 { color: var(--fg-mid); }
body.c2c-host .text-slate-500, body.c2c-host .text-gray-500 { color: #93a7c4; }
body.c2c-host .text-slate-900, body.c2c-host .text-gray-900,
body.c2c-host .text-black                                   { color: var(--fg); }

/* Neutral hairlines */
body.c2c-host .border-slate-100, body.c2c-host .border-gray-100 { border-color: rgba(255,255,255,.09); }
body.c2c-host .border-slate-200, body.c2c-host .border-gray-200 { border-color: rgba(255,255,255,.13); }
body.c2c-host .border-slate-300, body.c2c-host .border-gray-300 { border-color: rgba(255,255,255,.18); }
body.c2c-host .divide-slate-50 > * + *,
body.c2c-host .divide-slate-100 > * + * { border-color: rgba(255,255,255,.09); }

/* Tinted surfaces */
body.c2c-host .bg-blue-50  { background-color: rgba(63,127,232,.10); }
body.c2c-host .bg-blue-100 { background-color: rgba(63,127,232,.16); }
body.c2c-host .bg-blue-200 { background-color: rgba(63,127,232,.22); }
body.c2c-host .bg-indigo-50  { background-color: rgba(129,140,248,.10); }
body.c2c-host .bg-indigo-100 { background-color: rgba(129,140,248,.16); }
body.c2c-host .bg-indigo-200 { background-color: rgba(129,140,248,.22); }
body.c2c-host .bg-sky-50  { background-color: rgba(56,189,248,.10); }
body.c2c-host .bg-sky-100 { background-color: rgba(56,189,248,.16); }
body.c2c-host .bg-sky-200 { background-color: rgba(56,189,248,.22); }
body.c2c-host .bg-cyan-50  { background-color: rgba(34,211,238,.10); }
body.c2c-host .bg-cyan-100 { background-color: rgba(34,211,238,.16); }
body.c2c-host .bg-cyan-200 { background-color: rgba(34,211,238,.22); }
body.c2c-host .bg-teal-50  { background-color: rgba(45,212,191,.10); }
body.c2c-host .bg-teal-100 { background-color: rgba(45,212,191,.16); }
body.c2c-host .bg-teal-200 { background-color: rgba(45,212,191,.22); }
body.c2c-host .bg-emerald-50  { background-color: rgba(52,211,153,.10); }
body.c2c-host .bg-emerald-100 { background-color: rgba(52,211,153,.16); }
body.c2c-host .bg-emerald-200 { background-color: rgba(52,211,153,.22); }
body.c2c-host .bg-green-50  { background-color: rgba(74,222,128,.10); }
body.c2c-host .bg-green-100 { background-color: rgba(74,222,128,.16); }
body.c2c-host .bg-green-200 { background-color: rgba(74,222,128,.22); }
body.c2c-host .bg-amber-50  { background-color: rgba(255,161,85,.10); }
body.c2c-host .bg-amber-100 { background-color: rgba(255,161,85,.16); }
body.c2c-host .bg-amber-200 { background-color: rgba(255,161,85,.22); }
body.c2c-host .bg-yellow-50  { background-color: rgba(250,204,21,.10); }
body.c2c-host .bg-yellow-100 { background-color: rgba(250,204,21,.16); }
body.c2c-host .bg-yellow-200 { background-color: rgba(250,204,21,.22); }
body.c2c-host .bg-orange-50  { background-color: rgba(251,146,60,.10); }
body.c2c-host .bg-orange-100 { background-color: rgba(251,146,60,.16); }
body.c2c-host .bg-orange-200 { background-color: rgba(251,146,60,.22); }
body.c2c-host .bg-red-50  { background-color: rgba(251,113,133,.10); }
body.c2c-host .bg-red-100 { background-color: rgba(251,113,133,.16); }
body.c2c-host .bg-red-200 { background-color: rgba(251,113,133,.22); }
body.c2c-host .bg-rose-50  { background-color: rgba(251,113,133,.10); }
body.c2c-host .bg-rose-100 { background-color: rgba(251,113,133,.16); }
body.c2c-host .bg-rose-200 { background-color: rgba(251,113,133,.22); }
body.c2c-host .bg-purple-50  { background-color: rgba(192,132,252,.10); }
body.c2c-host .bg-purple-100 { background-color: rgba(192,132,252,.16); }
body.c2c-host .bg-purple-200 { background-color: rgba(192,132,252,.22); }
body.c2c-host .bg-violet-50  { background-color: rgba(139,124,248,.10); }
body.c2c-host .bg-violet-100 { background-color: rgba(139,124,248,.16); }
body.c2c-host .bg-violet-200 { background-color: rgba(139,124,248,.22); }
body.c2c-host .bg-fuchsia-50  { background-color: rgba(232,121,249,.10); }
body.c2c-host .bg-fuchsia-100 { background-color: rgba(232,121,249,.16); }
body.c2c-host .bg-fuchsia-200 { background-color: rgba(232,121,249,.22); }
body.c2c-host .bg-pink-50  { background-color: rgba(244,114,182,.10); }
body.c2c-host .bg-pink-100 { background-color: rgba(244,114,182,.16); }
body.c2c-host .bg-pink-200 { background-color: rgba(244,114,182,.22); }

/* Tinted ink */
body.c2c-host .text-blue-700, body.c2c-host .text-blue-800 { color: #6da4ff; }
body.c2c-host .text-blue-900, body.c2c-host .text-blue-950 { color: #cfe0ff; }
body.c2c-host .text-indigo-700, body.c2c-host .text-indigo-800 { color: #a5b4fc; }
body.c2c-host .text-indigo-900, body.c2c-host .text-indigo-950 { color: #c7d2fe; }
body.c2c-host .text-sky-700, body.c2c-host .text-sky-800 { color: #7dd3fc; }
body.c2c-host .text-sky-900, body.c2c-host .text-sky-950 { color: #bae6fd; }
body.c2c-host .text-cyan-700, body.c2c-host .text-cyan-800 { color: #22d3ee; }
body.c2c-host .text-cyan-900, body.c2c-host .text-cyan-950 { color: #a5f3fc; }
body.c2c-host .text-teal-700, body.c2c-host .text-teal-800 { color: #5eead4; }
body.c2c-host .text-teal-900, body.c2c-host .text-teal-950 { color: #99f6e4; }
body.c2c-host .text-emerald-700, body.c2c-host .text-emerald-800 { color: #34d399; }
body.c2c-host .text-emerald-900, body.c2c-host .text-emerald-950 { color: #a7f3d0; }
body.c2c-host .text-green-700, body.c2c-host .text-green-800 { color: #86efac; }
body.c2c-host .text-green-900, body.c2c-host .text-green-950 { color: #bbf7d0; }
body.c2c-host .text-amber-700, body.c2c-host .text-amber-800 { color: #ffa155; }
body.c2c-host .text-amber-900, body.c2c-host .text-amber-950 { color: #fed7aa; }
body.c2c-host .text-yellow-700, body.c2c-host .text-yellow-800 { color: #fde047; }
body.c2c-host .text-yellow-900, body.c2c-host .text-yellow-950 { color: #fef08a; }
body.c2c-host .text-orange-700, body.c2c-host .text-orange-800 { color: #fdba74; }
body.c2c-host .text-orange-900, body.c2c-host .text-orange-950 { color: #fed7aa; }
body.c2c-host .text-red-700, body.c2c-host .text-red-800 { color: #fb7185; }
body.c2c-host .text-red-900, body.c2c-host .text-red-950 { color: #fecdd3; }
body.c2c-host .text-rose-700, body.c2c-host .text-rose-800 { color: #fda4af; }
body.c2c-host .text-rose-900, body.c2c-host .text-rose-950 { color: #fecdd3; }
body.c2c-host .text-purple-700, body.c2c-host .text-purple-800 { color: #c4b5fd; }
body.c2c-host .text-purple-900, body.c2c-host .text-purple-950 { color: #e9d5ff; }
body.c2c-host .text-violet-700, body.c2c-host .text-violet-800 { color: #b6a9ff; }
body.c2c-host .text-violet-900, body.c2c-host .text-violet-950 { color: #ddd6fe; }
body.c2c-host .text-fuchsia-700, body.c2c-host .text-fuchsia-800 { color: #f0abfc; }
body.c2c-host .text-fuchsia-900, body.c2c-host .text-fuchsia-950 { color: #f5d0fe; }
body.c2c-host .text-pink-700, body.c2c-host .text-pink-800 { color: #f9a8d4; }
body.c2c-host .text-pink-900, body.c2c-host .text-pink-950 { color: #fbcfe8; }


/* Mid-tone inks (500/600). On a white page these are body-copy weight;
   on the dark canvas they need the same lift as the darker tiers. */
body.c2c-host .text-blue-500, body.c2c-host .text-blue-600 { color: #6da4ff; }
body.c2c-host .text-indigo-500, body.c2c-host .text-indigo-600 { color: #a5b4fc; }
body.c2c-host .text-sky-500, body.c2c-host .text-sky-600 { color: #7dd3fc; }
body.c2c-host .text-cyan-500, body.c2c-host .text-cyan-600 { color: #22d3ee; }
body.c2c-host .text-teal-500, body.c2c-host .text-teal-600 { color: #5eead4; }
body.c2c-host .text-emerald-500, body.c2c-host .text-emerald-600 { color: #34d399; }
body.c2c-host .text-green-500, body.c2c-host .text-green-600 { color: #86efac; }
body.c2c-host .text-amber-500, body.c2c-host .text-amber-600 { color: #ffa155; }
body.c2c-host .text-yellow-500, body.c2c-host .text-yellow-600 { color: #fde047; }
body.c2c-host .text-orange-500, body.c2c-host .text-orange-600 { color: #fdba74; }
body.c2c-host .text-red-500, body.c2c-host .text-red-600 { color: #fb7185; }
body.c2c-host .text-rose-500, body.c2c-host .text-rose-600 { color: #fda4af; }
body.c2c-host .text-purple-500, body.c2c-host .text-purple-600 { color: #c4b5fd; }
body.c2c-host .text-violet-500, body.c2c-host .text-violet-600 { color: #b6a9ff; }
body.c2c-host .text-fuchsia-500, body.c2c-host .text-fuchsia-600 { color: #f0abfc; }
body.c2c-host .text-pink-500, body.c2c-host .text-pink-600 { color: #f9a8d4; }

/* Tinted hairlines */
body.c2c-host .border-blue-100 { border-color: rgba(63,127,232,.24); }
body.c2c-host .border-blue-200 { border-color: rgba(63,127,232,.30); }
body.c2c-host .border-blue-300 { border-color: rgba(63,127,232,.38); }
body.c2c-host .border-indigo-100 { border-color: rgba(129,140,248,.24); }
body.c2c-host .border-indigo-200 { border-color: rgba(129,140,248,.30); }
body.c2c-host .border-indigo-300 { border-color: rgba(129,140,248,.38); }
body.c2c-host .border-sky-100 { border-color: rgba(56,189,248,.24); }
body.c2c-host .border-sky-200 { border-color: rgba(56,189,248,.30); }
body.c2c-host .border-sky-300 { border-color: rgba(56,189,248,.38); }
body.c2c-host .border-cyan-100 { border-color: rgba(34,211,238,.24); }
body.c2c-host .border-cyan-200 { border-color: rgba(34,211,238,.30); }
body.c2c-host .border-cyan-300 { border-color: rgba(34,211,238,.38); }
body.c2c-host .border-teal-100 { border-color: rgba(45,212,191,.24); }
body.c2c-host .border-teal-200 { border-color: rgba(45,212,191,.30); }
body.c2c-host .border-teal-300 { border-color: rgba(45,212,191,.38); }
body.c2c-host .border-emerald-100 { border-color: rgba(52,211,153,.24); }
body.c2c-host .border-emerald-200 { border-color: rgba(52,211,153,.30); }
body.c2c-host .border-emerald-300 { border-color: rgba(52,211,153,.38); }
body.c2c-host .border-green-100 { border-color: rgba(74,222,128,.24); }
body.c2c-host .border-green-200 { border-color: rgba(74,222,128,.30); }
body.c2c-host .border-green-300 { border-color: rgba(74,222,128,.38); }
body.c2c-host .border-amber-100 { border-color: rgba(255,161,85,.24); }
body.c2c-host .border-amber-200 { border-color: rgba(255,161,85,.30); }
body.c2c-host .border-amber-300 { border-color: rgba(255,161,85,.38); }
body.c2c-host .border-yellow-100 { border-color: rgba(250,204,21,.24); }
body.c2c-host .border-yellow-200 { border-color: rgba(250,204,21,.30); }
body.c2c-host .border-yellow-300 { border-color: rgba(250,204,21,.38); }
body.c2c-host .border-orange-100 { border-color: rgba(251,146,60,.24); }
body.c2c-host .border-orange-200 { border-color: rgba(251,146,60,.30); }
body.c2c-host .border-orange-300 { border-color: rgba(251,146,60,.38); }
body.c2c-host .border-red-100 { border-color: rgba(251,113,133,.24); }
body.c2c-host .border-red-200 { border-color: rgba(251,113,133,.30); }
body.c2c-host .border-red-300 { border-color: rgba(251,113,133,.38); }
body.c2c-host .border-rose-100 { border-color: rgba(251,113,133,.24); }
body.c2c-host .border-rose-200 { border-color: rgba(251,113,133,.30); }
body.c2c-host .border-rose-300 { border-color: rgba(251,113,133,.38); }
body.c2c-host .border-purple-100 { border-color: rgba(192,132,252,.24); }
body.c2c-host .border-purple-200 { border-color: rgba(192,132,252,.30); }
body.c2c-host .border-purple-300 { border-color: rgba(192,132,252,.38); }
body.c2c-host .border-violet-100 { border-color: rgba(139,124,248,.24); }
body.c2c-host .border-violet-200 { border-color: rgba(139,124,248,.30); }
body.c2c-host .border-violet-300 { border-color: rgba(139,124,248,.38); }
body.c2c-host .border-fuchsia-100 { border-color: rgba(232,121,249,.24); }
body.c2c-host .border-fuchsia-200 { border-color: rgba(232,121,249,.30); }
body.c2c-host .border-fuchsia-300 { border-color: rgba(232,121,249,.38); }
body.c2c-host .border-pink-100 { border-color: rgba(244,114,182,.24); }
body.c2c-host .border-pink-200 { border-color: rgba(244,114,182,.30); }
body.c2c-host .border-pink-300 { border-color: rgba(244,114,182,.38); }

/* Hover inks that pointed at near-black blues. */
body.c2c-host .hover\:text-blue-900:hover,
body.c2c-host .hover\:text-blue-800:hover,
body.c2c-host .hover\:text-blue-700:hover { color: var(--cyan-lift); }

body.c2c-host .ring-blue-100 { --tw-ring-color: rgba(63,127,232,.24); }
body.c2c-host .ring-blue-200 { --tw-ring-color: rgba(63,127,232,.32); }

/* Shadows read as a grey haze on a dark ground; deepen them so elevation
   still separates a panel from the canvas behind it. */
body.c2c-host .shadow-sm  { box-shadow: 0 1px 2px rgba(0,0,0,.45); }
body.c2c-host .shadow,
body.c2c-host .shadow-md  { box-shadow: 0 4px 14px rgba(0,0,0,.5); }
body.c2c-host .shadow-lg  { box-shadow: 0 12px 34px rgba(0,0,0,.55); }
body.c2c-host .shadow-xl,
body.c2c-host .shadow-2xl { box-shadow: 0 26px 70px rgba(0,0,0,.62); }


/* CTA and avatar gradients. `primary` flipped to a light blue for the dark
   scheme, which left the white text these elements all carry sitting on a
   2.5:1 light end. The stops are re-cut to a mid-to-deep blue so white clears
   5:1 across the whole sweep while the fill still separates from the canvas.
   Progress bars and image scrims using from-primary carry no text and keep
   the brighter ramp. */
body.c2c-host .bg-gradient-to-br.from-primary.to-primary-container {
  background-image: linear-gradient(to bottom right, #2f6ad0, #1b3a72);
}
body.c2c-host .bg-gradient-to-r.from-primary.to-primary-container {
  background-image: linear-gradient(to right, #2f6ad0, #1b3a72);
}
body.c2c-host .bg-gradient-to-br.from-primary.via-primary-container.to-cyan-700 {
  background-image: linear-gradient(to bottom right, #2f6ad0, #1b3a72 55%, #0e7490);
}

/* ---------- 18. FAQ accordion -------------------------------------------
   <details> gives us open/close, keyboard support and in-page find for free,
   so the FAQ needs styling rather than JavaScript. The default marker is
   replaced with our own chevron: the native one sits outside the padding box
   and can't be positioned consistently across browsers. */
.c2c-card > summary.c2c-h3 {
  cursor: pointer;
  list-style: none;
  padding-right: 2rem;
  position: relative;
  transition: color .3s var(--ease);
  /* .c2c-h3 only carries size; the weight comes from the h3 element rule,
     which a <summary> never matches -- so it has to be restated here. */
  font-family: var(--font-display);
  font-weight: 700;
}
.c2c-card > summary.c2c-h3::-webkit-details-marker { display: none; }
.c2c-card > summary.c2c-h3::after {
  content: "";
  position: absolute; right: .25rem; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg);
  transition: transform .35s var(--ease-out);
}
details[open] > summary.c2c-h3::after { transform: rotate(-135deg); margin-top: -2px; }
.c2c-card > summary.c2c-h3:hover { color: var(--aqua); }
.c2c-card > summary.c2c-h3:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Cards in the FAQ grid size to their content, so an open answer pushes the
   card down rather than being clipped by the tilt wrapper. */
details.c2c-card { align-self: start; }

/* ---------- Vivid: accent inks on a lit field ----------------------------
   Every tinted pill on the Tailwind pages is the same hue as its own wash --
   `bg-emerald-100` maps to emerald at 16% and `text-emerald-800` to emerald
   at full strength. On the near-black page the gap between them was enough.
   With the vivid field lit behind the translucent wash the two close up, and
   six badges across catalog, checkout and the product pages dropped under
   4.5:1. The ink moves to the lighter step of the same hue, which restores
   the gap without touching the hue itself.

   `.text-primary` is here for the same reason: #6da4ff was chosen against
   #050914 and has nowhere near the same headroom on #0a1030. */
html[data-palette="vivid"] body.c2c-host .text-cyan-500,
html[data-palette="vivid"] body.c2c-host .text-cyan-600,
html[data-palette="vivid"] body.c2c-host .text-cyan-700,
html[data-palette="vivid"] body.c2c-host .text-cyan-800      { color: #a5f3fc; }
html[data-palette="vivid"] body.c2c-host .text-emerald-500,
html[data-palette="vivid"] body.c2c-host .text-emerald-600,
html[data-palette="vivid"] body.c2c-host .text-emerald-700,
html[data-palette="vivid"] body.c2c-host .text-emerald-800   { color: #a7f3d0; }
html[data-palette="vivid"] body.c2c-host .text-blue-600,
html[data-palette="vivid"] body.c2c-host .text-blue-700,
html[data-palette="vivid"] body.c2c-host .text-blue-800      { color: #bfdbfe; }
html[data-palette="vivid"] body.c2c-host .text-sky-600,
html[data-palette="vivid"] body.c2c-host .text-sky-700       { color: #bae6fd; }
html[data-palette="vivid"] body.c2c-host .text-amber-600,
html[data-palette="vivid"] body.c2c-host .text-amber-700     { color: #fde68a; }
html[data-palette="vivid"] body.c2c-host .text-violet-600,
html[data-palette="vivid"] body.c2c-host .text-violet-700    { color: #ddd6fe; }
html[data-palette="vivid"] body.c2c-host .text-rose-600,
html[data-palette="vivid"] body.c2c-host .text-rose-700      { color: #fecdd3; }

html[data-palette="vivid"] body.c2c-host .text-primary            { color: #a8c8ff; }
html[data-palette="vivid"] body.c2c-host .text-tertiary-fixed-dim { color: #9df2ff; }
html[data-palette="vivid"] body.c2c-host .text-secondary          { color: #cfdce6; }

/* The one chip the ink lift could not rescue. `bg-tertiary-fixed/30` is a 30%
   wash of a near-white cyan, so on a lit field it composites to a pale panel
   no cyan ink can sit on. Thinning the wash puts the chip back on the page's
   own darkness instead of on its own tint. */
html[data-palette="vivid"] body.c2c-host [class*="bg-tertiary-fixed/"] {
  background-color: rgba(157, 242, 255, .12);
}