/* ════════════════════════════════════════════════════════════════════
   NoxBuild · Campaign Landing v2
   Real brand · Real liquid glass · S++ edition
   Violet #5D3FD3 · Indigo #2D125C · Russian #1A0840 · Lavender #B8A8E8
   Prism: rose, cyan, pink, amber · Stardust atmosphere
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Background - deeper than tone 100 with subtle indigo undertone */
  --bg:        #07020F;   /* page - darker than #110528 (tone 100), keeps indigo bias */
  --bg-1:      #110528;   /* tone 100 - elevated section */
  --bg-2:      #1A0840;   /* tone 200 - card bg */
  --bg-3:      #2D125C;   /* tone 300 - lifted accent */

  /* Brand */
  --violet:        #5D3FD3;
  --violet-2:      #7558E0;
  --violet-3:      #3F2090;
  --violet-soft:   rgba(93,63,211,.14);
  --violet-line:   rgba(93,63,211,.32);
  --violet-glow:   rgba(93,63,211,.45);
  --violet-hover:  rgba(93,63,211,.20);   /* Standard hover bg for outline pills */

  /* Unified CTA outline ring scale - every outline pill on the site uses
     these instead of raw rgba(184,168,232,…) literals. Three tiers:
       primary   = filled (no outline)
       secondary = .cta-outline  (resting)
       active    = .cta-outline-strong (hover/active state) */
  --cta-outline:        rgba(184, 168, 232, 0.32);
  --cta-outline-strong: rgba(184, 168, 232, 0.55);
  --cta-outline-soft:   rgba(184, 168, 232, 0.18);   /* very light/inline pills */
  --indigo:        #2D125C;
  --russian:       #1A0840;
  --lavender:      #B8A8E8;

  /* Prism palette (accents) */
  --silver:        #f3f3fb;
  --silver-2:      #d6d6e6;
  --silver-glow:   rgba(243,243,251,.32);
  --prism-rose:    #b8a8e8;
  --prism-cyan:    #7be0e5;
  --prism-pink:    #ff8fd0;
  --prism-ivory:   #fffff0;
  --prism-amber:   #fffff0;   /* alias for backward-compat - resolves to ivory */
  --prism-chartreuse: #D8E04A;          /* PRIMARY ACTION COLOR - replaces
                                           violet for all CTA fills. Violet
                                           remains as decorative/halo only. */
  --chartreuse-2:    #C4CC3A;          /* darker - for gradients */
  --chartreuse-3:    #A8B028;          /* deeper - for hover states */
  --chartreuse-glow: rgba(216, 224, 74, 0.55);
  --chartreuse-soft: rgba(216, 224, 74, 0.18);
  --chartreuse-halo: rgba(216, 224, 74, 0.42);
  --chartreuse-text: #15180A;          /* dark indigo-black - AAA contrast on chartreuse fill */

  /* Lavender alpha scale - pulled from 37 inline rgba(184,168,232,…) literals */
  --lavender-soft:  rgba(184, 168, 232, 0.06);
  --lavender-line:  rgba(184, 168, 232, 0.18);
  --lavender-glow:  rgba(184, 168, 232, 0.32);
  --lavender-bloom: rgba(184, 168, 232, 0.5);

  /* Spec alpha scale - pulled from 60+ inline rgba(255,255,255,…) literals */
  --spec-2:  rgba(255, 255, 255, 0.04);
  --spec-3:  rgba(255, 255, 255, 0.08);
  --spec-4:  rgba(255, 255, 255, 0.18);
  --spec-5:  rgba(255, 255, 255, 0.32);
  --spec-6:  rgba(255, 255, 255, 0.55);

  /* Text */
  --t1: #f5f5f7;
  --t2: rgba(245,245,247,.82);
  --t3: rgba(245,245,247,.55);
  --t4: rgba(245,245,247,.28);

  /* Lines */
  --line:      rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.04);
  --line-hot:  rgba(255,255,255,.18);

  /* iOS liquid glass primitives */
  --glass-bg:           rgba(20,22,26,.42);
  --glass-bg-strong:    rgba(28,30,36,.62);
  --glass-blur:         blur(22px) saturate(180%) brightness(1.04);
  --glass-blur-soft:    blur(14px) saturate(160%);
  --glass-blur-strong:  blur(32px) saturate(200%) brightness(1.05);
  --spec-top:        rgba(255,255,255,.22);
  --spec-side:       rgba(255,255,255,.08);
  --emboss-bottom:   rgba(0,0,0,.32);
  --emboss-side:     rgba(0,0,0,.18);

  --shadow-low:  0 8px 24px -10px rgba(0,0,0,.55);
  --shadow-mid:  0 20px 60px -20px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.32);
  --shadow-high: 0 28px 80px -22px rgba(0,0,0,.7),  0 8px 24px rgba(0,0,0,.4);

  /* Radii */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-card: 20px;
  --r-card-lg: 28px;
  --r-pill: 999px;

  /* Fonts */
  --sans:      'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --sans-body: 'Inter', 'Inter Display', -apple-system, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, "SF Mono", monospace;

  /* Easing */
  --e1:     cubic-bezier(.4, 0, .6, 1);
  --soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Spacing 8-grid */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s7: 56px; --s8: 64px;
  --s10: 80px; --s12: 96px; --s16: 128px;

  --sec-y: clamp(64px, 10vw, 144px);
  --sec-x: clamp(16px, 4vw, 56px);
  --max:   1200px;

  /* (Fluid --t-* scale retired - was never referenced; sections use inline clamp) */
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  font-size: 16px;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--sans-body);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
::selection { background: var(--violet); color: var(--t1); }

/* Focus */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ATMOSPHERE - gradient mesh + stardust + grain
   ════════════════════════════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 40% at 50% 0%,  var(--violet-soft) 0%, transparent 60%),
    radial-gradient(40% 30% at 90% 100%, rgba(45,18,92,.18) 0%, transparent 60%),
    radial-gradient(30% 25% at 10% 60%, rgba(93,63,211,.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

/* Stardust - 8 fixed twinkling particles */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.7),    transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 28%, rgba(184,168,232,.6),    transparent 60%),
    radial-gradient(2px   2px   at 82% 42%, rgba(243,243,251,.55),   transparent 60%),
    radial-gradient(1px   1px   at 92% 88%, rgba(184,168,232,.65),   transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 88%, rgba(255,255,255,.5),    transparent 60%),
    radial-gradient(1px   1px   at 78% 12%, rgba(184,168,232,.6),    transparent 60%),
    radial-gradient(1.5px 1.5px at 56% 72%, rgba(243,243,251,.5),    transparent 60%),
    radial-gradient(1px   1px   at 32% 58%, rgba(255,255,255,.4),    transparent 60%);
  animation: stardust 30s ease-in-out infinite alternate;
  opacity: .65;
  will-change: opacity;
}
@keyframes stardust {
  0%   { opacity: .25; }
  100% { opacity: .8; }
}

body > *, main { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════════
   CUSTOM CURSOR - violet dot + lavender ring with eased follow
   Pointer-events: none. Only renders on hover-capable devices.
   ════════════════════════════════════════════════════════════════════ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
  /* Hide the system cursor on the whole page; show pointer on links */
  body { cursor: none; }
  a, button, summary, label, [role="button"], input, .cta { cursor: none; }
}
.cursor__dot,
.cursor__ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.cursor__dot {
  width: 6px; height: 6px;
  background: var(--silver);
  transform: translate(var(--cx, 50vw), var(--cy, 50vh)) translate(-50%, -50%);
  transition: opacity .2s var(--e1);
}
.cursor__ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--lavender);
  transform: translate(var(--rx, 50vw), var(--ry, 50vh)) translate(-50%, -50%) scale(var(--scale, 1));
  transition: width .25s var(--soft), height .25s var(--soft), border-color .2s var(--e1);
}
/* Hover state on interactive elements - ring grows + violet */
body.cursor-hover .cursor__ring {
  width: 56px; height: 56px;
  border-color: var(--violet);
  box-shadow: 0 0 24px var(--violet-glow);
}
body.cursor-hover .cursor__dot { opacity: 0; }

/* ════════════════════════════════════════════════════════════════════
   PROMO BANNER (top)
   ════════════════════════════════════════════════════════════════════ */
.promo-banner {
  position: relative;
  z-index: 60;
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--russian) 0%, var(--violet-3) 35%, var(--violet) 70%, var(--violet-3) 100%);
  border-bottom: 1px solid rgba(184,168,232,.18);
  height: var(--banner-h, 36px);
  display: flex;
  align-items: center;
}
:root { --banner-h: 36px; }
.promo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: shine 6s linear infinite;
}
@keyframes shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.promo-banner__track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: marquee 32s linear infinite;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  will-change: transform;
}
.promo-banner__track span { display: inline-flex; align-items: center; gap: 12px; }
.promo-banner__track em {
  font-style: normal;
  color: var(--prism-amber);
  font-weight: 700;
}
.promo-banner__track svg { width: 14px; height: 14px; opacity: 0.7; }

/* ════════════════════════════════════════════════════════════════════
   TOPBAR - Apple iOS Dynamic Island floating pill
   FIXED positioning so it doesn't take layout space.
   Hero video starts immediately after the promo banner; the pill floats
   over the top of the hero on scroll position 0 and stays sticky as you
   scroll. No empty divider space.
   ════════════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  /* Sits BELOW the promo banner with 16px breathing gap.
     Banner is 36px default / 34px mobile / 40px ultrawide - see overrides below. */
  top: calc(var(--banner-h, 36px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 24px);
  max-width: 1100px;
  height: 56px;
  border-radius: 999px;
  background: rgba(10, 6, 26, 0.62);
  border: 1px solid rgba(184, 168, 232, 0.16);
  backdrop-filter: blur(28px) saturate(200%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.04);
  box-shadow:
    /* Top gloss arc - Apple Liquid Glass signature */
    inset 0 1.5px 0 rgba(255, 255, 255, 0.20),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.40),
    /* Side highlights for capsule rim */
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset -1px 0 0 rgba(0, 0, 0, 0.18),
    /* Bottom emboss */
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    /* Lift the pill off the page */
    0 12px 32px -10px rgba(0, 0, 0, 0.55),
    /* Subtle violet ambient */
    0 0 0 1px rgba(184, 168, 232, 0.06);
  isolation: isolate;
  transition: background .3s var(--e1), border-color .3s var(--e1);
}
.topbar:hover {
  background: rgba(12, 8, 32, 0.72);
  border-color: rgba(184, 168, 232, 0.24);
}

/* Subtle prism rim around the entire pill - replaces the bottom underline */
.topbar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg,
    rgba(123, 224, 229, 0.32) 0%,
    rgba(184, 168, 232, 0.18) 30%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 143, 208, 0.18) 70%,
    rgba(255, 255, 240, 0.32) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}
.topbar__inner {
  height: 100%;
  margin: 0 auto;
  padding: 0 8px 0 24px;        /* tighter - capsule needs less side padding */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

/* INLINE NAV (desktop only) */
.topbar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
}
.topbar__nav a {
  position: relative;
  font-family: var(--sans-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--t2);
  padding: 6px 2px;
  white-space: nowrap;
  transition: color .2s var(--e1);
}
.topbar__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--prism-cyan), var(--prism-rose), var(--prism-pink));
  transition: width .35s var(--soft);
}
.topbar__nav a:hover { color: var(--silver); }
.topbar__nav a:hover::after { width: 100%; }

/* BURGER (hidden desktop) */
.topbar__burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--t1);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s var(--e1), border-color .2s var(--e1);
}
.topbar__burger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}
.topbar__burger > span {
  position: absolute;
  left: 11px; right: 11px;
  height: 1.5px;
  background: var(--silver);
  border-radius: 1px;
  transition: transform .3s var(--soft), opacity .2s var(--e1), top .3s var(--soft);
}
.topbar__burger > span:nth-child(1) { top: 13px; }
.topbar__burger > span:nth-child(2) { top: 19px; }
.topbar__burger > span:nth-child(3) { top: 25px; }
.topbar__burger[aria-expanded="true"] > span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.topbar__burger[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.topbar__burger[aria-expanded="true"] > span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
.logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.025em;
  color: var(--t1);
  display: inline-flex;
  align-items: baseline;
  transition: opacity .2s var(--e1);
}
.logo:hover { opacity: .85; }
.logo em {
  color: var(--violet);
  font-style: normal;
  font-weight: 800;
  text-shadow: 0 0 12px var(--violet-glow);
}
.topbar__meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans-body);
  font-size: 13px;
  color: var(--t2);
}
/* Slovenská firma badge - ivory text + ivory dot, glass capsule */
.topbar__sk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--prism-ivory);
}
.topbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--prism-ivory);
  box-shadow:
    0 0 0 2px rgba(255, 255, 240, 0.10),
    0 0 10px rgba(255, 255, 240, 0.45);
}

/* Topbar CTA pill - small refract glass with prism rim */
.topbar__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 8px 14px 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--silver);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 4px 14px -4px rgba(0, 0, 0, 0.4);
  transition: background .25s var(--e1), border-color .25s var(--e1), transform .25s var(--spring);
  isolation: isolate;
}
.topbar__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    115deg,
    rgba(123, 224, 229, 0.6) 0%,
    rgba(184, 168, 232, 0.3) 30%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 143, 208, 0.3) 70%,
    rgba(255, 255, 240, 0.6) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}
.topbar__cta:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}
.topbar__cta svg { width: 14px; height: 14px; transition: transform .25s var(--soft); }
.topbar__cta:hover svg { transform: translateX(2px); }
.topbar__cta > * { position: relative; z-index: 1; }

/* ── Hero trust pill - match ivory SK badge styling ── */
.hero__trust-sk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--prism-ivory);
  font-weight: 600;
}

/* ── MOBILE NAV DRAWER ── */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
}
.mobile-nav.is-open { pointer-events: auto; visibility: visible; }
.mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 2, 15, 0.55);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .35s var(--e1);
}
.mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; }
.mobile-nav__panel {
  position: absolute;
  top: 64px;
  left: 16px;
  right: 16px;
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 22px;
  background: rgba(17, 5, 40, 0.82);
  border: 1px solid rgba(184, 168, 232, 0.18);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 24px 60px -20px rgba(0, 0, 0, 0.6);
  transform: translateY(-12px);
  opacity: 0;
  transition: transform .35s var(--soft), opacity .25s var(--e1);
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateY(0); opacity: 1; }
.mobile-nav__panel a {
  display: flex;
  align-items: center;
  padding: 12px 12px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--silver);
  text-decoration: none;
  min-height: 44px;
  transition: background .2s var(--e1);
}
.mobile-nav__panel a:hover,
.mobile-nav__panel a:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.mobile-nav__mail {
  margin-top: 8px;
  border-top: 1px solid rgba(184, 168, 232, 0.10);
  padding-top: 16px !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--lavender) !important;
}
.mobile-nav__sk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--prism-ivory);
}

/* Tablet - hide inline nav + sk badge, show burger.
   Below 980px the 5-item inline nav doesn't fit alongside logo + sk + cta. */
@media (max-width: 980px) {
  .topbar__nav { display: none; }
  .topbar__sk { display: none; }
  .topbar__burger { display: inline-flex; }
  .topbar__inner { grid-template-columns: auto 1fr auto; }
}

@media (max-width: 600px) {
  .topbar__cta { font-size: 12px; padding: 7px 12px 7px 14px; }
}

/* ════════════════════════════════════════════════════════════════════
   LIQUID GLASS - real iOS recipe
   Layer 1: backdrop blur+saturate (the frost)
   Layer 2: ::before - refractive edge highlight (light hits the rim)
   Layer 3: ::after - mouse-tracked specular (hover → light follows cursor)
   Layer 4: multi-axis inset shadows - top spec + bottom emboss + sides
   Layer 5: drop shadow + lavender ambient ring (depth)
   ════════════════════════════════════════════════════════════════════ */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-card);
  backdrop-filter: blur(24px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.05);
  box-shadow:
    /* Top spec - pushed up to read as gloss arc */
    inset 0 1.75px 0 rgba(255, 255, 255, 0.32),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.55),
    /* Side highlights */
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(0, 0, 0, 0.20),
    /* Bottom emboss + sub-pixel deeper line */
    inset 0 -1.25px 0 rgba(0, 0, 0, 0.38),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.55),
    /* Outer drop stack */
    0 1px 1px rgba(0, 0, 0, 0.22),
    0 12px 32px -10px rgba(0, 0, 0, 0.5),
    0 24px 60px -20px rgba(0, 0, 0, 0.55),
    /* Lavender ambient ring - broader */
    0 0 0 1px rgba(184, 168, 232, 0.08);
  transition:
    transform .4s var(--soft),
    border-color .3s var(--e1),
    box-shadow .4s var(--e1),
    background .35s var(--e1);
}

/* Chromatic edge dispersion - the prism rim where light bends through glass.
   Cyan → lavender → white → pink → amber spectrum on the 1px border only. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  background: linear-gradient(
    115deg,
    rgba(123, 224, 229, 0.55) 0%,    /* prism cyan */
    rgba(184, 168, 232, 0.28) 22%,   /* lavender */
    rgba(255, 255, 255, 0.42) 50%,   /* center bright */
    rgba(255, 143, 208, 0.28) 75%,   /* prism pink */
    rgba(255, 255, 240, 0.55) 100%   /* prism amber */
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}

/* Top specular curve - the gloss arc where light catches a curved surface.
   Sits in the upper half, masked to a soft fall-off. Apple Liquid Glass signature. */
.glass > .glass-spec,
.glass::after {
  /* Note: ::after is reserved for mouse-tracked specular below.
     The top spec is added via inset shadow below for performance. */
}

/* Mouse-tracked specular - JS sets --mx / --my, falls back to top-center */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.14) 0%,
    rgba(243, 243, 251, 0.04) 24%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity .35s var(--e1);
}

/* Hover - restrained. Just brighter top edge + specular fade in.
   No translate, no halo. Confidence over flash. */
.glass:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(0, 0, 0, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 12px 32px -10px rgba(0, 0, 0, 0.5),
    0 24px 60px -20px rgba(0, 0, 0, 0.55);
}
.glass:hover::after { opacity: 0.7; }
.glass:active { transform: scale(0.997); transition-duration: .12s; }
.glass > * { position: relative; z-index: 2; }

/* When .glass nests inside .glass, kill double-blur (perf + visual) */
.glass .glass { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ════════════════════════════════════════════════════════════════════
   TYPE PRIMITIVES
   ════════════════════════════════════════════════════════════════════ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet);
}
.eyebrow .num {
  color: var(--prism-rose);
  opacity: 0.7;
}

.display {
  font-family: var(--sans);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--silver);
  text-wrap: balance;
  padding-bottom: 0.08em; /* room for descenders */
}
.display em {
  font-style: normal;
  background: linear-gradient(180deg, var(--silver) 0%, var(--prism-rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.08em; /* gradient-text descender clip fix */
}

.lede {
  margin-top: 22px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--t3);
  max-width: 60ch;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════════
   01 HERO - full-bleed, edge-to-edge video, all-sides vignette
   ════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  /* Full viewport on desktop, accounting for promo (36px) + topbar (64px) */
  min-height: calc(100vh - 100px);
  overflow: hidden;
  background: #020202;
}
.hero__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 50%, #0a0a0c 0%, #050505 70%, #020202 100%);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.06) brightness(0.78);
  transform: translateZ(0);
  z-index: 0;
}

.hero__noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: .18;
  mix-blend-mode: overlay;
}

/* Full all-sides vignette - survives any aspect ratio */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* corner darkening - radial */
    radial-gradient(ellipse 110% 90% at 50% 50%, transparent 35%, rgba(0,0,0,.6) 88%, rgba(0,0,0,.95) 100%),
    /* top fade so promo+topbar blend */
    linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 14%, transparent 32%, transparent 60%, rgba(0,0,0,.75) 100%),
    /* left edge */
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, transparent 18%, transparent 82%, rgba(0,0,0,.55) 100%),
    /* indigo bottom-left bloom */
    radial-gradient(50% 70% at 25% 100%, rgba(45,18,92,.55) 0%, transparent 60%),
    /* violet right glow */
    radial-gradient(35% 55% at 95% 45%, rgba(93,63,211,.22) 0%, transparent 70%);
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(184,168,232,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,168,232,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 45% at 50% 50%, black 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 60% 45% at 50% 50%, black 20%, transparent 80%);
  pointer-events: none;
}


/* ─── Editorial layout grid
   Desktop: brand vertically centered LEFT, copy+CTA vertically centered RIGHT,
            video breathes through equal-third center.
   Mobile:  brand TOP-RIGHT, copy+CTA BOTTOM-LEFT (diagonal asymmetry).
   ─── */
.hero__layout {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  /* Top padding pushed to clear the floating topbar pill (12 + 56 + 32 breathing) */
  padding: clamp(120px, 12vw, 180px) clamp(40px, 6vw, 96px) clamp(80px, 6vw, 104px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "a   .   b"
    "band band band";
  gap: clamp(32px, 4vw, 64px);
  pointer-events: none;
}
.hero__layout > * { pointer-events: auto; }

.hero__group {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 32px);
  max-width: 100%;
}

/* Group A - brand wordmark, vertically centered LEFT */
.hero__group--a {
  grid-area: a;
  align-self: center;
  justify-self: start;
  align-items: flex-start;
}

/* Group B - sub copy + CTA, vertically centered RIGHT */
.hero__group--b {
  grid-area: b;
  align-self: center;
  justify-self: end;
  align-items: flex-end;
  text-align: right;
  max-width: 42ch;
}

/* Bottom band - trust pill on left, scroll cue on right */
.hero__band {
  grid-area: band;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}


/* Brand wordmark - focal piece on the left side */
.hero__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: clamp(56px, 7.6vw, 128px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  color: var(--silver);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
  padding-bottom: 0.08em;
  margin: 0;
}
.hero__brand .dot {
  color: var(--violet);
  margin-left: 0.04em;
  text-shadow: 0 0 24px var(--violet-glow);
}
.hero__star {
  position: absolute;
  top: -0.15em;
  right: -0.7em;
  width: clamp(16px, 1.6vw, 24px);
  height: clamp(16px, 1.6vw, 24px);
  color: var(--lavender);
  filter: drop-shadow(0 0 10px var(--silver-glow));
  animation: starSpin 16s linear infinite;
}
@keyframes starSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Hero copy - live-site verbatim sub paragraph */
.hero__copy {
  font-family: var(--sans-body);
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: rgba(243, 243, 251, 0.88);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.hero__trust {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 9px 18px;
  background: rgba(20, 22, 26, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t2);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hero__trust .dot { color: var(--violet); }

.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lavender);
}
.hero__scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--lavender), transparent);
  animation: scroll-pulse 2s var(--e1) infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); transform-origin: top; }
  50%      { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ════════════════════════════════════════════════════════════════════
   CTAs
   ════════════════════════════════════════════════════════════════════ */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform .25s var(--spring), background .25s var(--e1), border-color .25s var(--e1), box-shadow .3s var(--e1), color .25s var(--e1);
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}
.cta svg { width: 16px; height: 16px; }
.cta:hover { transform: translateY(-2px); }
.cta:active { transform: translateY(0); }

.cta--primary {
  background: rgba(243,243,251,.96);
  color: #0a0a0a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 0 40px rgba(243,243,251,.28),
    0 8px 24px -8px rgba(0,0,0,.6);
}
.cta--primary:hover {
  background: var(--prism-rose);
  color: var(--bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 0 60px rgba(184,168,232,.5),
    0 12px 32px -8px rgba(184,168,232,.5);
}

.cta--violet {
  background: linear-gradient(180deg, var(--violet) 0%, var(--violet-2) 100%);
  color: var(--silver);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 0 60px var(--violet-glow),
    0 12px 32px -8px rgba(93,63,211,.5);
}
.cta--violet:hover {
  background: linear-gradient(180deg, var(--violet-2) 0%, var(--prism-rose) 100%);
  color: var(--indigo);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 80px rgba(184,168,232,.5),
    0 16px 40px -8px rgba(184,168,232,.5);
}

.cta--ghost {
  background: rgba(20,22,26,.5);
  color: var(--t1);
  border-color: var(--line-hot);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.cta--ghost:hover {
  background: rgba(93,63,211,.18);
  border-color: var(--violet);
  color: var(--silver);
}

/* ─── REFRACT GLASS BUTTON - Apple "Liquid Glass" pristine
       Backdrop blur+saturation + top specular curve + chromatic edge dispersion.
       Real refractive feel: light catches the rim, what's behind softens.
─── */
.refract-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--silver);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  backdrop-filter: blur(22px) saturate(190%) brightness(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.04);
  box-shadow:
    /* Top specular hairline - light catching the rim */
    inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.65),
    /* Side highlights */
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(0, 0, 0, 0.18),
    /* Bottom emboss */
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.32),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.55),
    /* Drop */
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 8px 24px -8px rgba(0, 0, 0, 0.5),
    0 16px 48px -16px rgba(0, 0, 0, 0.55);
  transition: transform .25s var(--spring), background .25s var(--e1), box-shadow .3s var(--e1), border-color .25s var(--e1);
}

/* Top half specular - the curved gloss where light catches glass */
.refract-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 4%;
  right: 4%;
  height: 52%;
  border-radius: 999px 999px 200px 200px / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* Chromatic edge dispersion - prism rim. Pumped: 1.5px width, higher saturation. */
.refract-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    115deg,
    rgba(123, 224, 229, 0.85) 0%,
    rgba(184, 168, 232, 0.40) 22%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 143, 208, 0.40) 75%,
    rgba(255, 255, 240, 0.85) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

.refract-btn > * { position: relative; z-index: 2; }
.refract-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.refract-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.75),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(0, 0, 0, 0.18),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.32),
    0 12px 32px -8px rgba(0, 0, 0, 0.55),
    0 24px 64px -16px rgba(0, 0, 0, 0.6);
}
.refract-btn:active { transform: translateY(0) scale(0.98); transition-duration: .12s; }

@media (prefers-reduced-motion: reduce) {
  .refract-btn { transition: none; }
}

/* When refract-btn is used inside the start-form, take available space */
.start-form .refract-btn {
  flex-shrink: 0;
  height: 56px;
  padding: 0 32px;
  font-size: 17px;
  font-weight: 700;
}

/* ─── LIQUID PRISMATIC BUTTON - proper SVG port of uilayouts button-1
       Original 17-colour palette, original 4 gradient transform states,
       7 stacked SVG layers with mix-blend-mode: difference.
       Animation driven by JS rAF (see script.js).
─── */
.liquid-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.7em;
  min-height: 56px;
  background: #000000;
  border: 2px solid #ffffff;
  border-radius: var(--r-pill); /* pill */
  cursor: pointer;
  font-family: var(--sans);
  text-decoration: none;
  /* When applied to <a> or <button> the face still shows on top */
}

/* Halo - outer glow, blurred. Safari renders blur as a rectangular bounding-box
   bloom unless the wrapper itself has border-radius + GPU layer + isolation.
   This was the "square halo" mobile bug. */
.liquid-btn__halo {
  position: absolute;
  width: 112.81%;
  height: 128.57%;
  top: 8.57%;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  border-radius: var(--r-pill);
  filter: blur(19px);
  opacity: 0.7;
  pointer-events: none;
  isolation: isolate;
}
.liquid-btn__halo-bg {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: #d9d9d9;
  filter: blur(6.5px);
}
.liquid-btn__halo-svg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-pill);
}

/* Inner shadow plate - pulled toward violet, less muddy navy */
.liquid-btn__plate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  width: 92.23%;
  height: 112.85%;
  border-radius: var(--r-pill);
  background: rgba(40, 16, 100, 0.55);
  filter: blur(7.3px);
  pointer-events: none;
}

/* Liquid surface - covers the entire button, OUT of flex flow.
   Was position:relative which made it a flex item competing with the face for width.
   Now absolute + inset:0 so it fills the parent invisibly. Face is the only flex item.
   translateZ(0) forces a GPU layer so Safari respects border-radius + overflow:hidden
   on transformed/blurred children (the second half of the "square halo" bug). */
.liquid-btn__surface {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: var(--r-pill);
  transform: translateZ(0);
  isolation: isolate;
  z-index: 0;
}
.liquid-btn__halo,
.liquid-btn__halo-bg,
.liquid-btn__halo-svg,
.liquid-btn__plate,
.liquid-btn__core-glow,
.liquid-btn__lq,
.liquid-btn__bg-grey,
.liquid-btn__bg-black,
.liquid-btn__border { display: block; }
.liquid-btn__surface > .liquid-btn__bg-grey,
.liquid-btn__surface > .liquid-btn__bg-black {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
}
.liquid-btn__bg-grey { background: #d9d9d9; }
.liquid-btn__bg-black { background: #000000; }

/* Border bloom layers - 5 stacked overlays with white-fade gradient + blur */
.liquid-btn__border {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  border: 3px solid;
  border-image: linear-gradient(to bottom, transparent, #ffffff) 1;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.liquid-btn__border--1 { filter: blur(3px); }
.liquid-btn__border--2 { filter: blur(3px); }
.liquid-btn__border--3 { filter: blur(5px); }
.liquid-btn__border--4 { filter: blur(4px); }
.liquid-btn__border--5 { filter: blur(4px); }

/* Center glow - softened, lighter so prismatic colours read more pure */
.liquid-btn__core-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  width: 70.8%;
  height: 42.85%;
  border-radius: var(--r-pill);
  filter: blur(15px);
  background: rgba(40, 30, 140, 0.45);
  pointer-events: none;
}

/* The visible face - IN-FLOW so it sizes the parent button. Layers sit behind it. */
.liquid-btn__face {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 28px;
  color: #ffffff;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color .25s var(--e1);
  pointer-events: none; /* outer <a>/<button> handles click */
}
.liquid-btn--bundle .liquid-btn__face { width: 100%; }
.liquid-btn__face svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: fill .25s var(--e1), color .25s var(--e1);
}
.liquid-btn:hover .liquid-btn__face { color: #fffff0; }
.liquid-btn:hover .liquid-btn__face svg { fill: #fffff0; color: #fffff0; }

/* The 7 SVG gradient layers - sized + positioned per original component */
.liquid-btn__lq {
  position: absolute;
  pointer-events: none;
}
.liquid-btn__lq svg { display: block; width: 100%; height: 100%; }
.liquid-btn__lq--small { width: 443px; height: 121px; }
.liquid-btn__lq--large { width: 756px; height: 207px; }
.liquid-btn__lq {
  top: 50%;
  left: 50%;
  /* Constant CSS drift - never changes duration on hover (that caused frame skip).
     Hover speed change is driven by JS gradient morph instead. */
  animation: liquidDrift 18s linear infinite;
  will-change: transform;
}

.liquid-btn__lq--1 { transform: translate(-50%, -50%);                    mix-blend-mode: difference; animation-delay: 0s;    }
.liquid-btn__lq--2 { transform: translate(-50%, -50%) rotate(164.971deg); mix-blend-mode: difference; animation-delay: -2.5s; }
.liquid-btn__lq--3 { transform: translate(-53%, -53%) rotate(-11.61deg);  mix-blend-mode: difference; animation-delay: -5s;   }
.liquid-btn__lq--4 { transform: translate(-50%, -57%) rotate(-179.012deg);mix-blend-mode: difference; animation-delay: -7.5s; }
.liquid-btn__lq--5 { transform: translate(-57%, -50%) rotate(-29.722deg); mix-blend-mode: difference; animation-delay: -10s;  }
.liquid-btn__lq--6 { transform: translate(-62%, -24%) rotate(160.227deg); mix-blend-mode: difference; animation-delay: -12.5s;}
.liquid-btn__lq--7 { transform: translate(-67%, -29%) rotate(180deg);     mix-blend-mode: hard-light; animation-delay: -15s;  }

/* Each layer shifts its centre over time - combined with mix-blend-mode: difference,
   the gradient slices visibly morph through the visible button window. */
@keyframes liquidDrift {
  0%   { translate: 0 0; }
  25%  { translate: 8% -4%; }
  50%  { translate: -6% 8%; }
  75%  { translate: 4% -6%; }
  100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-btn__lq { animation: none !important; }
}

/* Sizing variants */
.liquid-btn--hero {
  height: 56px;
  padding-inline: 24px;
}
.liquid-btn--bundle {
  width: 100%;
  height: 64px;
}
.start-form .liquid-btn {
  flex-shrink: 0;
  width: clamp(140px, 18vw, 180px);
  height: 56px;
}

.cta--block { width: 100%; }

/* ════════════════════════════════════════════════════════════════════
   TRUST MARQUEE
   ════════════════════════════════════════════════════════════════════ */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 22px 0;
  border-block: 1px solid var(--line);
  background: rgba(10, 10, 12, 0.5);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee__track span {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--t2);
  text-transform: uppercase;
}
.marquee__track em {
  font-style: normal;
  color: var(--violet);
  font-size: 11px;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ── Marquee LOGOS · official brand marks · uniform 24px height ── */
.marquee__track .ml {
  display: inline-flex;
  align-items: center;
  height: 22px;
  color: rgba(232, 224, 210, 0.88);
  flex-shrink: 0;
  transition: color .35s ease, opacity .35s ease;
  opacity: .9;
}
.marquee__track .ml:hover { color: #E8E0D2; opacity: 1; }
.marquee__track .ml svg {
  display: block;
  height: 100%;
  width: auto;
  overflow: visible;
}

@media (max-width: 768px) {
  .marquee__track .ml { height: 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   SECTIONS
   ════════════════════════════════════════════════════════════════════ */
.section {
  position: relative;
  padding: var(--sec-y) var(--sec-x);
  max-width: var(--max);
  margin: 0 auto;
}

.section__head {
  text-align: center;
  margin: 0 auto clamp(48px, 8vh, 88px);
  max-width: 880px;          /* was 760 - caused 3-line wrap on long headings */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section__head .eyebrow { margin-bottom: 18px; }
.section__head .lede { text-align: center; }

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--soft), transform .8s var(--soft);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .marquee__track, .promo-banner__track { animation: none; }
  .pulse-dot { animation: none; }
  .hero__scroll-line { animation: none; }
  .hero__star { animation: none; }
  .promo-banner::before { animation: none; }
}

/* (Old static 6-card .dim* compare block removed - replaced by interactive
   .cmp* spotlight system below. ~350 lines of dead CSS stripped.) */


/* ════════════════════════════════════════════════════════════════════════
   02 COMPARE · INTERACTIVE SPOTLIGHT
   ────────────────────────────────────────────────────────────────────────
   Pill picker (segmented control) + single dramatic stage panel.
   Click pill → smooth crossfade + slide to that dimension.
   No more grid of static cards.
   ════════════════════════════════════════════════════════════════════════ */

.cmp {
  --cmp-active-index: 0;  /* JS sets 0..5 to slide the picker glow */
  position: relative;
  isolation: isolate;
}

/* ── PILL PICKER (segmented control) · content-width flex row ── */
.cmp__picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  margin: 0 auto 20px;
  width: max-content;
  max-width: 100%;
  border-radius: var(--r-pill);
  background: rgba(17, 5, 40, 0.42);
  border: 1px solid rgba(184, 168, 232, 0.12);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 8px 28px -10px rgba(0, 0, 0, 0.5);
}

/* JS-measured glow indicator - width and x set via custom props.
   top + height match picker padding (5px each side) so glow hugs pill edges. */
.cmp__pill-glow {
  position: absolute;
  top: 5px;
  left: 0;
  width: var(--cmp-glow-w, 80px);
  height: calc(100% - 10px);
  border-radius: var(--r-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 50%),
    linear-gradient(135deg, rgba(93, 63, 211, 0.40) 0%, rgba(184, 168, 232, 0.18) 100%);
  border: 1px solid rgba(184, 168, 232, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 14px -4px rgba(93, 63, 211, 0.42);
  transform: translateX(var(--cmp-glow-x, 6px));
  transition: transform .45s var(--soft), width .45s var(--soft);
  z-index: 0;
  pointer-events: none;
  will-change: transform, width;
}

/* Pill - content-width, no icon, just the label */
.cmp__pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--t3);
  cursor: pointer;
  transition: color .25s var(--e1);
  min-height: 40px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cmp__pill:hover { color: var(--t1); }
.cmp__pill:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.cmp__pill[aria-selected="true"] {
  color: var(--silver);
  font-weight: 600;
}

/* ── STAGE - single dramatic panel, sizes to content ── */
.cmp__stage {
  position: relative;
  max-width: 880px;             /* tighter cap = more compressed */
  margin: 0 auto;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 28%),
    rgba(17, 5, 40, 0.32);
  border: 1px solid rgba(184, 168, 232, 0.12);
  backdrop-filter: blur(32px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 24px 80px -32px rgba(93, 63, 211, 0.32),
    0 4px 12px -2px rgba(0, 0, 0, 0.4);
}

/* Kill ALL hover side-effects on the compare stage - was causing the
   "lighting flip" / card-flip illusion on hover. Stage stays fully static. */
.cmp__stage.glass::after,
.cmp__stage.glass:hover::after { display: none !important; }
.cmp__stage.glass:hover {
  transform: none;
  border-color: rgba(184, 168, 232, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 24px 80px -32px rgba(93, 63, 211, 0.32),
    0 4px 12px -2px rgba(0, 0, 0, 0.4);
}

/* Top edge prism sheen on stage */
.cmp__stage::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(123, 224, 229, 0.55) 20%,
    rgba(184, 168, 232, 0.85) 40%,
    rgba(255, 255, 240, 0.95) 50%,
    rgba(255, 143, 208, 0.85) 60%,
    rgba(184, 168, 232, 0.55) 80%,
    transparent 100%);
  z-index: 5;
  pointer-events: none;
}

/* ── PANEL - single column, sections stacked top→bottom ── */
.cmp__panel {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.cmp__panel[hidden] { display: none; }
.cmp__panel.is-active {
  display: flex;
  animation: cmpPanelIn .55s var(--soft) both;
}
@keyframes cmpPanelIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Per-panel ambient glow - REMOVED for Apple-strict restraint.
   The pill picker glass indicator + NoxBuild prism rim are the only ornaments. */
.cmp__panel-glow { display: none; }

/* HIDE icon, panel num, subtitle - Apple HIG: typography hierarchy carries it.
   The pill the user clicked already tells them which dimension this is. */
.cmp__panel-head { display: none; }
.cmp__panel-sub  { display: none; }

/* TITLE - single carrying header */
.cmp__panel-title {
  padding: 22px 28px 14px;
  font-family: var(--sans);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--silver);
  text-wrap: balance;
  position: relative;
  z-index: 1;
}

/* ALTERNATIVES - Apple iPhone Compare row pattern, tight */
.cmp__alts {
  padding: 0 28px 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.cmp__alt {
  display: grid;
  grid-template-columns: 84px minmax(100px, 1fr) minmax(0, 1.6fr);
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
}
.cmp__alt + .cmp__alt {
  border-top: 1px solid rgba(184, 168, 232, 0.08);
}
.cmp__alt-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--t4);
}
.cmp__alt-val {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--t2);
  line-height: 1.25;
  font-feature-settings: "tnum";
}
.cmp__alt-val em { font-style: normal; opacity: 0.55; font-size: 13px; font-weight: 400; }
.cmp__alt-val--no   { color: var(--t4); text-decoration: line-through; text-decoration-color: rgba(232, 224, 210, 0.18); }
.cmp__alt-val--part { color: var(--t3); font-style: italic; }
.cmp__alt-val--ok   { color: var(--t2); }
.cmp__alt-meta {
  font-size: 13px;
  color: var(--t3);
  line-height: 1.45;
  letter-spacing: -0.005em;
}

/* ═══ NOXBUILD - full-width bottom band, restrained.
       Just prism top-rim + gradient text. No halo, no specular, no badge. ═══ */
.cmp__nox {
  position: relative;
  padding: 22px 28px 24px;
  background: linear-gradient(135deg, rgba(93, 63, 211, 0.22) 0%, rgba(184, 168, 232, 0.06) 100%);
  border-top: 1px solid rgba(184, 168, 232, 0.18);
  isolation: isolate;
}
.cmp__nox-rim {
  /* Removed the prism rim strip - was making the section feel complex.
     The lavender background + border-top is enough to mark "winner". */
  display: none;
}

/* Hidden - too much ornament for Apple-strict mode */
.cmp__nox-spec  { display: none; }
.cmp__nox-badge { display: none; }

.cmp__nox-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--prism-rose);
  opacity: 0.9;
  margin-bottom: 8px;
}
.cmp__nox-value {
  display: block;
  font-family: var(--sans);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.0;
  background: linear-gradient(180deg, var(--silver) 0%, #c2b8ec 55%, var(--prism-rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
.cmp__nox-note {
  display: block;
  font-size: 13.5px;
  color: var(--t2);
  line-height: 1.5;
  margin-top: 10px;
  letter-spacing: -0.005em;
  max-width: 56ch;
}

/* MOTION */
@media (prefers-reduced-motion: reduce) {
  .cmp__nox::before, .cmp__nox-spec { animation: none; }
  .cmp__panel.is-active { animation: none; }
}

/* TABLET - tighten paddings */
@media (max-width: 900px) {
  .cmp__panel-title { padding: 32px 28px 18px; font-size: clamp(26px, 5.5vw, 34px); }
  .cmp__alts { padding: 0 28px 22px; }
  .cmp__alt {
    grid-template-columns: 96px minmax(110px, 1fr) minmax(0, 1.4fr);
    gap: 18px;
    padding: 14px 0;
  }
  .cmp__nox { padding: 28px 28px 32px; }
  .cmp__nox-value { font-size: clamp(30px, 5vw, 40px); }
}

/* PHONE - pill nav stays inside section padding, rounded, scrolls internally */
@media (max-width: 640px) {
  .cmp__picker {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto 18px;
    padding: 5px;
    border-radius: var(--r-pill);    /* stays rounded - no full-bleed strip */
    width: 100%;                     /* fills section width minus padding */
    max-width: 100%;
    /* Hide native scrollbar */
    scrollbar-width: none;
  }
  .cmp__picker::-webkit-scrollbar { display: none; }
  .cmp__pill {
    scroll-snap-align: center;
    padding: 9px 16px;
    font-size: 13px;
    min-height: 40px;            /* iOS HIG minimum tap target */
    flex-shrink: 0;
  }
  .cmp__stage { border-radius: 20px; }
  .cmp__panel-title { padding: 22px 20px 14px; font-size: clamp(22px, 6.4vw, 28px); }
  /* Alternatives - 2-row per alt: [LABEL · VAL] line, meta below indented */
  .cmp__alts { padding: 0 20px 16px; }
  .cmp__alt {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 12px 0;
  }
  .cmp__alt-label { grid-column: 1; grid-row: 1; }
  .cmp__alt-val   { grid-column: 2; grid-row: 1; font-size: 15px; }
  .cmp__alt-meta  { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; padding-left: 92px; }
  .cmp__nox { padding: 20px 20px 24px; }
  .cmp__nox-value { font-size: clamp(24px, 7vw, 32px); }
  .cmp__nox-note { font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   03 AKO TO FUNGUJE - editorial timeline
   No glass cards. Single vertical line, mono timestamps,
   display-grade headlines. Magazine spread feel.
   ════════════════════════════════════════════════════════════════════ */
.section--how { max-width: 980px; }
.section__head--left {
  text-align: left;
  align-items: flex-start;
  margin: 0 0 clamp(48px, 8vh, 88px);
  max-width: 100%;
}
.section__head--left .display { text-align: left; }
.section__head--left .lede { text-align: left; margin: 18px 0 0; }

.timeline {
  position: relative;
  padding: 0 0 0 88px;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vh, 96px);
  list-style: none;
}

/* Vertical gradient line */
.timeline::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--violet) 8%,
    var(--lavender) 50%,
    var(--violet) 92%,
    transparent 100%
  );
  opacity: 0.5;
}

.timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 56px;
  align-items: start;
}

/* Dot on the line */
.timeline__step::before {
  content: "";
  position: absolute;
  left: -82px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--violet);
  box-shadow: 0 0 12px var(--violet-glow);
  transition: transform .4s var(--soft), box-shadow .4s var(--e1), background .3s var(--e1);
}
.timeline__step:hover::before {
  transform: scale(1.3);
  background: var(--violet);
  box-shadow: 0 0 24px var(--violet-glow);
}

/* Final step - anchor visual */
.timeline__step--final::before {
  width: 18px;
  height: 18px;
  left: -85px;
  top: 11px;
  background: var(--violet);
  border-color: var(--lavender);
  box-shadow:
    0 0 0 4px rgba(93, 63, 211, 0.18),
    0 0 28px var(--violet-glow),
    0 0 12px var(--silver);
}

.timeline__time {
  font-family: var(--mono);
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lavender);
  padding-top: 14px;
}
.timeline__step--final .timeline__time {
  color: var(--prism-rose);
  font-weight: 700;
}

.timeline__content h3 {
  font-family: var(--sans);
  font-size: clamp(28px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.06;
  color: var(--silver);
  margin-bottom: 16px;
  padding-bottom: 0.06em;
}
.timeline__step--final .timeline__content h3 {
  background: linear-gradient(180deg, var(--silver) 0%, var(--prism-rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.timeline__content p {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--t3);
  max-width: 56ch;
}

@media (max-width: 720px) {
  /* Timeline mobile - padding 28px is set by unified cleanup block at end of file.
     Dots positioned to align with the vertical line at left: 8px.
     Math: step.left = parent.padding-left = 28px. Dot left = -20px → 28-20 = 8px ✓ */
  .timeline {
    padding-left: 28px;
    gap: 40px;
  }
  .timeline::before { left: 8px; }
  .timeline__step {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .timeline__step::before {
    left: -20px;
    top: 8px;
    width: 10px;
    height: 10px;
  }
  .timeline__step--final::before {
    left: -22px;
    top: 4px;
    width: 14px;
    height: 14px;
  }
  .timeline__time { padding-top: 0; font-size: 11px; }
  .timeline__content h3 { margin-top: 6px; }
}

/* ════════════════════════════════════════════════════════════════════
   04 PRICING - funnel hierarchy
   ════════════════════════════════════════════════════════════════════ */

.tiers {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  padding-top: 14px; /* room for badge */
}
@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .tiers { grid-template-columns: 1fr; gap: 14px; } }

.tier {
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tier__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tier__head h3 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
  margin: 0;
}
.tier__price {
  font-family: var(--sans);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--silver);
  padding-bottom: 0.04em;
  margin: 6px 0 0;
}
.tier__klarna {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--t3);
  margin: 0;
}
.tier__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  color: var(--t2);
  flex-grow: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* CTA always docks at the bottom of the card - keeps row aligned */
.tier > .cta { margin-top: auto; }
.tier__list li {
  position: relative;
  padding-left: 22px;
  line-height: 1.5;
}
.tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 6px;
  border-left: 1.5px solid var(--violet);
  border-bottom: 1.5px solid var(--violet);
  transform: rotate(-45deg);
}

.tier--featured {
  position: relative;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(93,63,211,.22) 0%, transparent 60%),
    var(--glass-bg-strong);
  border: 1px solid rgba(184,168,232,.32);
  /* No translate - keeps row baselines aligned. Prominence via badge + gradient bg + violet CTA. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 var(--emboss-bottom),
    var(--shadow-high),
    0 0 0 1px rgba(184,168,232,.18),
    0 28px 80px -22px rgba(93,63,211,.4);
}
.tier--featured:hover {
  border-color: var(--violet);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    var(--shadow-high),
    0 0 0 1px rgba(184,168,232,.4),
    0 36px 100px -22px rgba(184,168,232,.5);
}
.tier--featured .tier__price {
  background: linear-gradient(180deg, var(--silver) 0%, var(--prism-rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tier__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  background: linear-gradient(180deg, var(--violet) 0%, var(--violet-2) 100%);
  color: var(--silver);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 24px var(--violet-glow),
    0 8px 20px -4px rgba(93,63,211,.5);
  border: 1px solid rgba(184,168,232,.35);
}

/* ─── BUNDLE ANCHOR (climax - sits BELOW the tiers as best-value summary) ─── */
.bundle-anchor {
  margin-top: clamp(40px, 5vw, 56px);
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 320px at 0% 0%, rgba(93, 63, 211, 0.28), transparent 60%),
    radial-gradient(700px 280px at 100% 100%, rgba(184, 168, 232, 0.14), transparent 65%),
    var(--glass-bg-strong);
  border: 1px solid rgba(184, 168, 232, 0.28);
}
.bundle-anchor__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(36px, 5vw, 64px);
  align-items: stretch;
}
@media (max-width: 880px) {
  .bundle-anchor__inner { grid-template-columns: 1fr; gap: 32px; padding: clamp(28px, 5vw, 40px); }
}

/* Lead column - narrative */
.bundle-anchor__lead { display: flex; flex-direction: column; gap: 16px; }
.bundle-anchor__lead .eyebrow .num { color: var(--prism-amber); }
.bundle-anchor__sub {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--t2);
  max-width: 36ch;
  margin: 0;
  text-wrap: pretty;
}
.bundle-anchor__h {
  font-family: var(--sans);
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.06;
  background: linear-gradient(180deg, var(--silver) 0%, var(--prism-rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.08em;
}
.bundle-anchor__list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bundle-anchor__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--t2);
}
.bundle-anchor__list li:first-child { border-top: 1px solid var(--line-hot); }
.bundle-anchor__list li em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--prism-amber);
  white-space: nowrap;
}
.bundle-anchor__list li:first-child em { color: var(--silver); }

/* Offer column - price + CTA */
.bundle-anchor__offer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: rgba(20, 22, 26, 0.45);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  align-self: stretch;
  justify-content: center;
}
.bundle-anchor__price-row { display: flex; flex-direction: column; gap: 6px; }
.bundle-anchor__price-was {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t4);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.32);
}
.bundle-anchor__price {
  font-family: var(--sans);
  font-size: clamp(60px, 8vw, 92px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.02;
  background: linear-gradient(180deg, #ffffff 0%, var(--silver) 50%, var(--prism-rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-top: 4px;
  display: inline-block;
  padding-bottom: 0.08em;
}
.bundle-anchor__save {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--prism-amber);
  margin-top: 8px;
}
.bundle-anchor__klarna {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--t3);
}
/* Tiers intro divider */
.tiers-intro {
  margin: clamp(56px, 6vw, 80px) 0 clamp(28px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: 18px;
}
.tiers-intro__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-hot), transparent);
}
.tiers-intro__label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t3);
  white-space: nowrap;
}

/* Inline addon checkbox inside tier card */
.tier__addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--line-hot);
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t2);
  transition: border-color .25s var(--e1), background .25s var(--e1);
}
.tier__addon:hover { border-color: var(--violet); background: var(--violet-soft); }
.tier__addon input {
  width: 16px; height: 16px;
  accent-color: var(--violet);
  flex-shrink: 0;
}
.tier__addon span { flex: 1; }
.tier__addon em {
  font-style: normal;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--prism-amber);
  text-transform: none;
}
.tier__addon:has(input:checked) {
  border-style: solid;
  border-color: var(--violet);
  background: var(--violet-soft);
  color: var(--silver);
}

/* ════════════════════════════════════════════════════════════════════
   05 TRUST GRID
   ════════════════════════════════════════════════════════════════════ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .trust-grid { grid-template-columns: 1fr; } }

.trust-card {
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trust-card__ico {
  font-size: 22px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(93,63,211,.28), rgba(45,18,92,.4));
  border: 1px solid rgba(184,168,232,.22);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.trust-card h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--silver);
}
.trust-card p { color: var(--t3); font-size: 14.5px; line-height: 1.55; }

/* ════════════════════════════════════════════════════════════════════
   06 FAQ
   ════════════════════════════════════════════════════════════════════ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}
.faq { padding: 4px 8px; }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--silver);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__chev {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-hot);
  border-radius: 50%;
  position: relative;
  transition: transform .4s var(--soft), background .3s var(--e1), border-color .3s var(--e1);
}
.faq__chev::before, .faq__chev::after {
  content: "";
  position: absolute;
  background: var(--lavender);
  transition: opacity .3s var(--e1), background .3s var(--e1);
}
.faq__chev::before { width: 11px; height: 1.5px; }
.faq__chev::after { width: 1.5px; height: 11px; }
.faq[open] .faq__chev {
  background: var(--violet);
  border-color: var(--violet);
  transform: rotate(180deg);
  box-shadow: 0 0 16px var(--violet-glow);
}
.faq[open] .faq__chev::before { background: var(--silver); }
.faq[open] .faq__chev::after { opacity: 0; }
.faq p {
  padding: 0 22px 24px;
  color: var(--t3);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 70ch;
}

/* ════════════════════════════════════════════════════════════════════
   07 FINAL CTA
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   CARD STREAM - kinetic horizontal showcase with scanner effect
   Auto-scroll cards · violet vertical scan line · ASCII scramble on cross.
   ════════════════════════════════════════════════════════════════════ */
.card-stream {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Tight: cards are 250px + ~25px scanner overflow each side. Section was 360-520, now 300-340 */
  height: clamp(300px, 36vh, 340px);
  /* Default vertical rhythm - proper section break above + below */
  margin-top: clamp(24px, 3vw, 48px);
  margin-bottom: clamp(24px, 3vw, 48px);
  overflow: hidden;
  /* BG fades to transparent at top/bottom so it blends seamlessly into neighbours */
  background:
    radial-gradient(60% 100% at 50% 50%, rgba(45, 18, 92, 0.24) 0%, transparent 65%);
  isolation: isolate;
}

/* When a trust-ribbon sits directly above or below the card-stream, give the
   ribbon proper breathing room - no negative margin overlap. */
.trust-ribbon + .card-stream { margin-top: 8px; }
.card-stream + .trust-ribbon { margin-top: 8px; }

.card-stream__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.card-stream__particles,
.card-stream__scanner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: block;
}
.card-stream__particles { height: 250px; z-index: 0; }
.card-stream__scanner   { height: 300px; z-index: 1; }

/* Vertical scanner divider - always visible, energises when scanning */
.card-stream__line {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 280px;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--violet) 30%, var(--lavender) 50%, var(--violet) 70%, transparent);
  transform: translate(-50%, -50%);
  border-radius: var(--r-pill);
  z-index: 2;
  opacity: 0.6;
  box-shadow:
    0 0 8px var(--violet),
    0 0 18px var(--violet-glow),
    0 0 36px rgba(93, 63, 211, 0.32);
  animation: scanPulse 1.5s infinite alternate ease-in-out;
  transition: opacity 0.25s var(--e1), filter 0.25s var(--e1);
}
.card-stream.is-scanning .card-stream__line {
  opacity: 1;
  filter: brightness(1.4);
}

@keyframes scanPulse {
  0%   { transform: translate(-50%, -50%) scaleY(1); }
  100% { transform: translate(-50%, -50%) scaleY(1.04); }
}

/* Edge fades - content fades into bg on left/right */
.card-stream__veil {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  z-index: 4;
  pointer-events: none;
}
.card-stream__veil--l {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.card-stream__veil--r {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}

/* The scrolling rail */
.card-stream__rail {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 250px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 3;
}
.card-stream__track {
  display: flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  will-change: transform;
}
.card-stream__track:active { cursor: grabbing; }

.card-wrapper {
  position: relative;
  width: 400px;
  height: 250px;
  flex-shrink: 0;
}

.card-normal,
.card-ascii {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  overflow: hidden;
  background: transparent;
}

/* Real image side - clipped from the right as scanner crosses */
.card-normal {
  z-index: 2;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  clip-path: inset(0 0 0 var(--clip-right, 0%));
}
.card-normal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  filter: brightness(1.1) contrast(1.1);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}
.card-normal:hover img { filter: brightness(1.25) contrast(1.25); }

/* ASCII side - revealed from the left as scanner crosses */
.card-ascii {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--clip-left, 0%)) 0 0);
}
.ascii-content {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 13px;
  color: rgba(220, 210, 255, 0.6);
  overflow: hidden;
  white-space: pre;
  text-align: left;
  vertical-align: top;
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.2) 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.2) 100%);
  animation: cardGlitch 0.1s infinite linear alternate-reverse;
}
@keyframes cardGlitch {
  0%, 16%, 50%, 100% { opacity: 1; }
  15%, 99% { opacity: 0.92; }
  49% { opacity: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
  .card-stream__line, .ascii-content { animation: none; }
}

@media (max-width: 720px) {
  .card-stream { height: 240px; margin-top: 24px; margin-bottom: 24px; }
  .card-wrapper { width: 280px; height: 175px; }
  .card-stream__rail { height: 175px; }
  .card-stream__track { gap: 32px; }
  .card-stream__particles { height: 175px; }
  .card-stream__scanner { height: 220px; }
  .card-stream__line { height: 200px; }
}

/* ════════════════════════════════════════════════════════════════════
   START CARD - liquid glass insert with shader bg
   Cinematic scale, brand prism shader, intimate input field.
   ════════════════════════════════════════════════════════════════════ */
.section--start {
  max-width: var(--max);
  /* Inherits unified --sec-y vertical rhythm. Was 80-180/96-200 - too much
     compared to neighbours. Now matches every other section. */
}

.start-card {
  position: relative;
  border-radius: clamp(20px, 2.4vw, 32px);
  overflow: hidden;
  isolation: isolate;
  /* Tone the inherited .glass primitive down - the shader is the visual */
  background: rgba(7, 2, 15, 0.55);
  border: 1px solid rgba(184, 168, 232, 0.20);
  min-height: clamp(520px, 64vh, 760px);
  display: flex;
  align-items: center;
}

.start-card__shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* Veil - pulls shader back so foreground is readable, brand-tinted vignette */
.start-card__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 0%, transparent 35%, rgba(7, 2, 15, 0.55) 75%, rgba(7, 2, 15, 0.85) 100%),
    linear-gradient(180deg, rgba(7, 2, 15, 0.4) 0%, transparent 30%, transparent 60%, rgba(7, 2, 15, 0.65) 100%),
    radial-gradient(60% 70% at 30% 100%, rgba(45, 18, 92, 0.3) 0%, transparent 60%);
}

.start-card__content {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 6vw, 104px) clamp(36px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(22px, 2.4vw, 32px);
  max-width: 64ch;
  width: 100%;
}

.start-card__h {
  font-family: var(--sans);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: var(--silver);
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.65);
  padding-bottom: 0.08em;
}
.start-card__h em {
  font-style: normal;
  background: linear-gradient(180deg, var(--silver) 0%, var(--prism-rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.08em;
}

.start-card__sub {
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(243, 243, 251, 0.82);
  line-height: 1.55;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  max-width: 56ch;
}

/* Form - input + button row */
.start-form {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 640px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.start-form input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 18px 24px;
  background: rgba(20, 22, 26, 0.72);
  border: 1px solid var(--line-hot);
  border-radius: var(--r-pill);
  color: var(--silver);
  font-family: var(--sans-body);
  font-size: 16.5px;
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color .2s var(--e1), background .2s var(--e1), box-shadow .25s var(--e1);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.start-form input[type="text"]::placeholder {
  color: rgba(243, 243, 251, 0.42);
}
.start-form input[type="text"]:hover {
  border-color: rgba(184, 168, 232, 0.32);
  background: rgba(20, 22, 26, 0.85);
}
.start-form input[type="text"]:focus {
  border-color: var(--violet);
  background: rgba(20, 22, 26, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 4px rgba(93, 63, 211, 0.18),
    0 0 24px rgba(93, 63, 211, 0.25);
}
.start-form input[type="text"]:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 100, 120, 0.45);
}

.start-form__btn {
  flex-shrink: 0;
  padding: 18px 28px;
  font-size: 16px;
}
.start-form__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 540px) {
  .start-form { flex-direction: column; }
  .start-form__btn { width: 100%; }
}

/* Alt link - secondary path */
.start-card__alt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavender);
  opacity: 0.78;
  transition: opacity .2s var(--e1), color .2s var(--e1), gap .25s var(--soft);
}
.start-card__alt:hover { opacity: 1; color: var(--silver); gap: 12px; }
.start-card__alt svg { width: 14px; height: 14px; }

/* Screen-reader-only label */
.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;
}

/* ════════════════════════════════════════════════════════════════════
   FORM MODAL - full-screen overlay with iframe slot
   ════════════════════════════════════════════════════════════════════ */
.form-modal {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--silver);
  overflow: hidden;
}
.form-modal::backdrop {
  background: rgba(5, 1, 10, 0.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.form-modal__inner {
  position: relative;
  width: min(960px, 100vw);
  height: min(800px, 100vh);
  margin: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(20, 22, 26, 0.72);
  border: 1px solid rgba(184, 168, 232, 0.22);
  border-radius: clamp(0px, 2vw, 24px);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 32px 80px -22px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(184, 168, 232, 0.08);
  overflow: hidden;
  animation: modalIn .35s var(--soft);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.form-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 2, 15, 0.4);
}
.form-modal__title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.form-modal__eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet);
}
.form-modal__title {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-modal__close {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-hot);
  border-radius: 50%;
  color: var(--silver);
  transition: background .2s var(--e1), border-color .2s var(--e1), transform .2s var(--spring);
}
.form-modal__close:hover { background: var(--violet-soft); border-color: var(--violet); transform: rotate(90deg); }
.form-modal__close svg { width: 16px; height: 16px; }

.form-modal__body {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  overflow: hidden;
  min-height: 0;
}
.form-modal__body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Placeholder shown until FORM_URL is configured */
.form-modal__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 40px;
  background: linear-gradient(180deg, rgba(7, 2, 15, 0.92), rgba(20, 22, 26, 0.92));
}
.form-modal__placeholder-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--prism-amber);
}
.form-modal__placeholder p {
  max-width: 48ch;
  color: var(--t2);
  font-size: 15px;
  line-height: 1.55;
}
.form-modal__placeholder code {
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(184, 168, 232, 0.14);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--lavender);
}
.form-modal--ready .form-modal__placeholder { display: none; }

.form-modal__foot {
  display: flex;
  justify-content: center;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: rgba(7, 2, 15, 0.4);
}
.form-modal__skip {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavender);
  opacity: 0.78;
  transition: opacity .2s var(--e1), color .2s var(--e1);
}
.form-modal__skip:hover { opacity: 1; color: var(--silver); }

@media (max-width: 720px) {
  .form-modal__inner {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: 0;
  }
  .form-modal__head { padding: 14px 16px; }
  .form-modal__foot { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .form-modal__inner { animation: none; }
  .form-modal__close:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   STICKY CONVERSION BAR (mobile bottom)
   ════════════════════════════════════════════════════════════════════ */
.sticky-cta {
  position: fixed;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  width: calc(100% - 24px);
  max-width: 480px;
  z-index: 80;
  padding: 8px 8px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  background: rgba(10,10,12,.78);
  border: 1px solid rgba(184,168,232,.22);
  border-radius: var(--r-pill);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 16px 40px -12px rgba(0,0,0,.6);
  transition: transform .5s var(--soft);
}
.sticky-cta.is-shown { transform: translateX(-50%) translateY(0); }
.sticky-cta__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.sticky-cta__label strong {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--silver);
  text-transform: none;
}
.sticky-cta .cta { padding: 10px 16px; font-size: 13px; min-height: 40px; }

/* Compact filled button - slim, fits inside the 56px-tall pill */
.sticky-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(184, 168, 232, 0.32);
  background: linear-gradient(135deg, rgba(93, 63, 211, 0.55), rgba(184, 168, 232, 0.22));
  color: var(--silver);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 40px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 4px 12px -2px rgba(93, 63, 211, 0.4);
  transition: transform .25s var(--soft), background .25s var(--e1);
}
.sticky-cta__btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(93, 63, 211, 0.7), rgba(184, 168, 232, 0.32));
}
.sticky-cta__btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@media (min-width: 880px) { .sticky-cta { display: none; } }

/* ════════════════════════════════════════════════════════════════════
   BENTO STATS - animated bars · pulse rings · orbital rings
   ════════════════════════════════════════════════════════════════════ */
.bento {
  padding: var(--s10) var(--sec-x);
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.bento__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  min-height: 540px;
}
@media (max-width: 880px) {
  .bento__grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; }
}

.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: var(--s5);
  border-radius: var(--r-card-lg);
  isolation: isolate;
}
.bento__card--large { grid-row: 1 / 3; min-height: 420px; }
@media (max-width: 880px) {
  .bento__card--large { grid-row: auto; }
  .bento__card { min-height: 280px; padding: var(--s4); }
}

.bento__viz {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Bar chart */
.bento__viz--bars {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s5) var(--s5) 96px;
}
.bento__bars { width: 100%; height: 70%; display: block; }
.bento__bar {
  fill: url(#barGrad);
  transform-origin: bottom;
  transform-box: fill-box;
  animation: barRise 1.4s var(--soft) backwards;
}
.bento__bar:nth-child(1)  { animation-delay: 0.05s; height:  26.4px; y: 193.6; }
.bento__bar:nth-child(2)  { animation-delay: 0.10s; height:  30.8px; y: 189.2; }
.bento__bar:nth-child(3)  { animation-delay: 0.15s; height:  35.2px; y: 184.8; }
.bento__bar:nth-child(4)  { animation-delay: 0.20s; height:  39.6px; y: 180.4; }
.bento__bar:nth-child(5)  { animation-delay: 0.25s; height:  48.4px; y: 171.6; }
.bento__bar:nth-child(6)  { animation-delay: 0.30s; height:  57.2px; y: 162.8; }
.bento__bar:nth-child(7)  { animation-delay: 0.35s; height:  66px;   y: 154; }
.bento__bar:nth-child(8)  { animation-delay: 0.40s; height:  74.8px; y: 145.2; }
.bento__bar:nth-child(9)  { animation-delay: 0.45s; height:  83.6px; y: 136.4; }
.bento__bar:nth-child(10) { animation-delay: 0.50s; height:  92.4px; y: 127.6; }
.bento__bar:nth-child(11) { animation-delay: 0.55s; height: 101.2px; y: 118.8; }
.bento__bar:nth-child(12) { animation-delay: 0.60s; height: 110px;   y: 110; }
.bento__bar:nth-child(13) { animation-delay: 0.65s; height: 118.8px; y: 101.2; }
.bento__bar:nth-child(14) { animation-delay: 0.70s; height: 127.6px; y:  92.4; }
.bento__bar:nth-child(15) { animation-delay: 0.75s; height: 136.4px; y:  83.6; }
.bento__bar:nth-child(16) { animation-delay: 0.80s; height: 145.2px; y:  74.8; }
.bento__bar:nth-child(17) { animation-delay: 0.85s; height: 154px;   y:  66; }
.bento__bar:nth-child(18) { animation-delay: 0.90s; height: 162.8px; y:  57.2; }
.bento__bar:nth-child(19) { animation-delay: 0.95s; height: 171.6px; y:  48.4; }
.bento__bar:nth-child(20) { animation-delay: 1.00s; height: 180.4px; y:  39.6; }
.bento__bar:nth-child(21) { animation-delay: 1.05s; height: 187px;   y:  33; }
.bento__bar:nth-child(22) { animation-delay: 1.10s; height: 193.6px; y:  26.4; }
.bento__bar:nth-child(23) { animation-delay: 1.15s; height: 198px;   y:  22; }
.bento__bar:nth-child(24) { animation-delay: 1.20s; height: 202.4px; y:  17.6; }
.bento__bar:nth-child(25) { animation-delay: 1.25s; height: 209px;   y:  11; }
.bento__bar:nth-child(26) { animation-delay: 1.30s; height: 213.4px; y:   6.6; }
.bento__bar:nth-child(27) { animation-delay: 1.35s; height: 220px;   y:   0; }
@keyframes barRise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.bento__years {
  display: flex;
  justify-content: space-around;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--t3);
  margin-top: var(--s2);
  padding: 0 var(--s3);
}

/* Pulse rings */
.bento__viz--pulse,
.bento__viz--orbit {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
}
.bento__pulse-ring {
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1.5px solid var(--silver-2);
  opacity: 0;
  transform: translate(40%, -40%) scale(.6);
  animation: pulseRing 4.5s ease-out infinite;
  will-change: transform, opacity;
}
.bento__pulse-ring:nth-child(1) { animation-delay: 0s; }
.bento__pulse-ring:nth-child(2) { animation-delay: 1.2s; }
.bento__pulse-ring:nth-child(3) { animation-delay: 2.4s; }
.bento__pulse-ring:nth-child(4) { animation-delay: 3.6s; }
@keyframes pulseRing {
  0%   { opacity: 0;   transform: translate(40%, -40%) scale(.4); border-color: var(--silver); }
  20%  { opacity: .8; }
  100% { opacity: 0;   transform: translate(40%, -40%) scale(3.0); border-color: var(--violet); }
}
.bento__bolt {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  width: 32px; height: 32px;
  color: var(--silver);
  filter: drop-shadow(0 0 14px var(--silver-glow));
  z-index: 1;
}

/* Orbit rings */
.bento__orbit-ring {
  position: absolute;
  top: 0; right: 0;
  border: 1px solid var(--silver-2);
  border-radius: 50%;
  opacity: .3;
  transform: translate(35%, -35%);
  will-change: transform;
}
.bento__orbit-ring:nth-child(1) { width:  90px; height:  90px; animation: orbitSpin 16s linear infinite; }
.bento__orbit-ring:nth-child(2) { width: 150px; height: 150px; opacity: .25; animation: orbitSpin 22s linear infinite reverse; }
.bento__orbit-ring:nth-child(3) { width: 220px; height: 220px; opacity: .18; animation: orbitSpin 28s linear infinite; }
.bento__orbit-ring:nth-child(4) { width: 300px; height: 300px; opacity: .12; }
@keyframes orbitSpin {
  from { transform: translate(35%, -35%) rotate(0deg); }
  to   { transform: translate(35%, -35%) rotate(360deg); }
}
.bento__orbit-dot {
  position: absolute;
  top: 14px; right: 70px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--silver);
  box-shadow: 0 0 12px var(--silver-glow), 0 0 20px var(--violet-glow);
  z-index: 1;
}

/* Caption */
.bento__caption {
  padding-top: var(--s5);
  position: relative;
  z-index: 2;
}
.bento__metric {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(45,18,92,.55);
  padding: 8px 18px;
  border-radius: 12px;
  margin-bottom: var(--s2);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(184,168,232,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 16px -4px rgba(0,0,0,.4);
}
.bento__num {
  font-family: var(--sans);
  font-size: clamp(40px, 5.4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--silver);
}
.bento__unit {
  font-family: var(--sans);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--prism-rose);
  text-shadow: 0 0 14px rgba(184,168,232,.5);
}
.bento__label {
  font-family: var(--sans-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--t1);
  max-width: 32ch;
}
.bento__card--large .bento__label { font-size: 15.5px; max-width: 38ch; }
.bento__link {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--silver);
  color: #1a1a1a;
  border-radius: var(--r-pill);
  z-index: 3;
  transition: transform .25s var(--spring), background .25s var(--e1);
  box-shadow: 0 0 24px rgba(243,243,251,.3), 0 8px 20px -6px rgba(0,0,0,.4);
}
.bento__link:hover { transform: translate(2px, -2px); background: var(--prism-rose); }
.bento__link svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════════
   TRUST CARD ICON SVG (replaces emoji)
   ════════════════════════════════════════════════════════════════════ */
.trust-card__ico svg {
  width: 26px;
  height: 26px;
  color: var(--lavender);
  filter: drop-shadow(0 0 10px rgba(184,168,232,.4));
}

/* ════════════════════════════════════════════════════════════════════════
   TESTIMONIALS - spotlight carousel with peek + auto-rotate
   ────────────────────────────────────────────────────────────────────────
   One card centered + visible. Adjacent cards scaled smaller behind on
   sides. Per-card prism rim hue. Auto-rotate 7s, pause on hover.
   Dots + prev/next + linear progress bar at bottom.
   ════════════════════════════════════════════════════════════════════════ */

.section--testify {
  max-width: var(--max);
  /* Contain the rotated side cards so they never trigger horizontal scroll */
  overflow-x: clip;
}

.testify {
  position: relative;
  isolation: isolate;
}

/* Stage - CSS Grid stacking trick: every card lives in the same grid cell,
   stage auto-sizes to the tallest card. Side cards (is-prev / is-next)
   transform OUT from the center; perspective on stage gives true 3D depth.
   No fixed height = no overflow bugs. */
.testify__stage {
  display: grid;
  grid-template-areas: "stack";
  justify-items: center;
  margin: 0 auto;
  width: 100%;
  perspective: 1400px;
}

.testify__card {
  grid-area: stack;
  width: min(560px, calc(100% - 80px));
  padding: 36px 36px 28px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Default (hidden) state - side cards animate FROM here */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.78);
  filter: blur(2px);
  transition:
    transform .65s var(--soft),
    opacity .55s var(--e1),
    filter .55s var(--e1);
  z-index: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.testify__card.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  pointer-events: auto;
  z-index: 3;
}
.testify__card.is-prev {
  opacity: 0.5;
  transform: translateX(-280px) scale(0.82) rotateY(18deg);
  filter: blur(1.5px);
  z-index: 2;
  pointer-events: none;
}
.testify__card.is-next {
  opacity: 0.5;
  transform: translateX(280px) scale(0.82) rotateY(-18deg);
  filter: blur(1.5px);
  z-index: 2;
  pointer-events: none;
}

/* Per-card prism rim accent (replaces .glass::before for active card) */
.testify__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  padding: 1.25px;
  background: linear-gradient(115deg,
    rgba(123, 224, 229, 0.65) 0%,
    rgba(184, 168, 232, 0.4) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 143, 208, 0.4) 70%,
    rgba(255, 255, 240, 0.65) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .55s var(--e1);
}
.testify__card.is-active .testify__rim { opacity: 1; }
.testify__card[data-hue="cyan"] .testify__rim     { background: linear-gradient(115deg, rgba(123,224,229,.85) 0%, rgba(184,168,232,.4) 50%, rgba(255,255,255,.6) 100%); }
.testify__card[data-hue="rose"] .testify__rim     { background: linear-gradient(115deg, rgba(255,143,208,.7) 0%, rgba(184,168,232,.4) 50%, rgba(255,255,255,.6) 100%); }
.testify__card[data-hue="ivory"] .testify__rim    { background: linear-gradient(115deg, rgba(255,255,240,.85) 0%, rgba(184,168,232,.4) 50%, rgba(123,224,229,.55) 100%); }
.testify__card[data-hue="lavender"] .testify__rim { background: linear-gradient(115deg, rgba(184,168,232,.7) 0%, rgba(123,224,229,.4) 50%, rgba(255,143,208,.55) 100%); }

/* Decorative quote mark */
.testify__quote-mark {
  position: absolute;
  top: 14px;
  left: 30px;
  font-family: var(--sans);
  font-size: 88px;
  line-height: 0.6;
  color: var(--prism-rose);
  opacity: 0.32;
  pointer-events: none;
  z-index: 1;
}

.testify__quote {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--silver);
  text-wrap: pretty;
  flex: 1;
  position: relative;
  z-index: 2;
}

.testify__by {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.testify__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35) 0%, transparent 60%),
    linear-gradient(135deg, var(--violet) 0%, var(--prism-rose) 100%);
  color: var(--silver);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
}
.testify__meta { min-width: 0; }
.testify__name {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--silver);
}
.testify__role {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t4);
  margin-top: 2px;
}
.testify__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--prism-ivory);
}
.testify__stars svg {
  width: 12px;
  height: 12px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 240, 0.5));
}

/* NAV - prev / dots / next */
.testify__nav {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.testify__arrow {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(184, 168, 232, 0.20);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  color: var(--silver);
  cursor: pointer;
  transition: background .2s var(--e1), border-color .2s var(--e1), transform .2s var(--soft);
}
.testify__arrow:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--lavender);
  transform: scale(1.06);
}
.testify__arrow svg { width: 16px; height: 16px; }
.testify__dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.testify__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(184, 168, 232, 0.24);
  cursor: pointer;
  padding: 0;
  transition: background .25s var(--e1), width .35s var(--soft);
}
.testify__dot.is-active {
  width: 28px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--prism-cyan), var(--prism-rose));
}

/* PROGRESS BAR - restarts each cycle */
.testify__progress {
  margin: 18px auto 0;
  width: min(360px, 70%);
  height: 2px;
  background: rgba(184, 168, 232, 0.10);
  border-radius: 1px;
  overflow: hidden;
}
.testify__progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--prism-cyan), var(--prism-rose), var(--prism-pink));
  transition: width .15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .testify__card { transition: opacity .25s ease; }
  .testify__progress-bar { transition: none; }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  /* Pull the side cards in closer so they peek but don't overflow on tablets */
  .testify__card.is-prev { transform: translateX(-200px) scale(0.82) rotateY(18deg); }
  .testify__card.is-next { transform: translateX(200px) scale(0.82) rotateY(-18deg); }
}
@media (max-width: 900px) {
  /* Hide the 3D side cards on smaller viewports - only active card visible */
  .testify__card:not(.is-active) { opacity: 0 !important; transform: scale(0.95); }
  .testify__quote-mark { font-size: 64px; left: 22px; top: 10px; }
}
@media (max-width: 640px) {
  .testify__card { padding: 28px 22px 22px; gap: 18px; }
  .testify__quote { font-size: 16px; }
  .testify__nav { margin-top: 20px; gap: 14px; }
  .testify__arrow { width: 38px; height: 38px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SERVIS - Hosting + Care subscription tier cards.
   Shared .svc-* BEM. 3-col grid, optional billing toggle (hosting only),
   featured middle tier (lifted, prism CTA), trial note below.
   ════════════════════════════════════════════════════════════════════════ */

.section--svc { max-width: var(--max); }

/* BILLING TOGGLE (hosting only) */
.svc-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  margin: 0 auto 28px;
  width: max-content;
  max-width: 100%;
  border-radius: var(--r-pill);
  background: rgba(17, 5, 40, 0.42);
  border: 1px solid rgba(184, 168, 232, 0.12);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 28px -10px rgba(0, 0, 0, 0.5);
}
.svc-toggle__btn {
  position: relative;
  z-index: 1;
  padding: 8px 18px;
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--t3);
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
  transition: color .2s var(--e1), background .25s var(--e1);
}
.svc-toggle__btn:hover { color: var(--t1); }
.svc-toggle__btn em {
  font-style: normal;
  margin-left: 6px;
  padding: 2px 7px;
  background: rgba(123, 224, 229, 0.16);
  color: var(--prism-cyan);
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.svc-toggle__btn.is-active {
  color: var(--silver);
  font-weight: 600;
  background: linear-gradient(135deg, rgba(93, 63, 211, 0.4) 0%, rgba(184, 168, 232, 0.18) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 12px -4px rgba(93, 63, 211, 0.4);
}

/* CENTER the toggle within section */
.svc-toggle {
  display: flex;
  margin: 0 auto 28px;
}
.section--svc { text-align: center; }
.section--svc > * { text-align: left; }
.section--svc .section__head { text-align: center; }

/* GRID */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
  padding-top: 12px;
}

/* CARD */
.svc-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  gap: 18px;
  position: relative;
  isolation: isolate;
  transition: transform .25s var(--soft), border-color .25s var(--e1);
}
.svc-card--featured {
  /* All cards align top + bottom - featured stands out via border + shadow,
     not vertical lift (which broke CTA alignment across the row). */
  border-color: rgba(184, 168, 232, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 24px 60px -20px rgba(93, 63, 211, 0.42),
    0 4px 12px -2px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(184, 168, 232, 0.18);
}
.svc-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--violet) 0%, var(--prism-rose) 100%);
  color: var(--silver);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 4px 12px -2px rgba(93, 63, 211, 0.5);
}

/* HEAD */
.svc-card__head { display: flex; flex-direction: column; gap: 4px; }
.svc-card__name {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--silver);
}
.svc-card__sub {
  font-size: 13px;
  color: var(--t3);
  line-height: 1.45;
}

/* PRICE */
.svc-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.svc-card__price strong {
  font-family: var(--sans);
  font-size: clamp(30px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.0;
  background: linear-gradient(180deg, var(--silver) 0%, var(--prism-rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
.svc-card__price em {
  font-style: normal;
  font-size: 13px;
  color: var(--t3);
  font-weight: 500;
}

/* FEATURE LIST */
.svc-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t2);
  line-height: 1.45;
  flex: 1;
}
.svc-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
}
.svc-card__list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lavender);
  flex-shrink: 0;
  margin-top: 8px;
  opacity: 0.7;
}

/* CTA */
.svc-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(184, 168, 232, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: var(--silver);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background .2s var(--e1), border-color .2s var(--e1), transform .25s var(--soft);
  min-height: 44px;
  margin-top: auto;
}
.svc-card__cta:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--lavender);
  transform: translateY(-1px);
}
.svc-card__cta--featured {
  background: linear-gradient(135deg, var(--violet) 0%, var(--prism-rose) 100%);
  border-color: transparent;
  color: var(--silver);
  box-shadow: 0 8px 24px -8px rgba(93, 63, 211, 0.5);
}
.svc-card__cta--featured:hover {
  background: linear-gradient(135deg, #6e4ce0 0%, #c290e0 100%);
  box-shadow: 0 12px 32px -8px rgba(184, 168, 232, 0.5);
  border-color: transparent;
}
.svc-card__cta svg { width: 14px; height: 14px; transition: transform .25s var(--e1); }
.svc-card__cta:hover svg { transform: translateX(2px); }

/* TRIAL NOTE */
.svc-note {
  margin-top: 28px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t4);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .svc-card--featured { grid-column: 1 / -1; transform: none; }
  .svc-card--featured .svc-card__badge { top: -10px; }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; gap: 14px; padding-top: 16px; }
  .svc-card--featured { grid-column: 1; transform: none; margin-top: 6px; }
  .svc-card { padding: 26px 22px; gap: 16px; }
  .svc-card__price strong { font-size: 30px; }
  .svc-toggle { margin-bottom: 22px; }
  .svc-toggle__btn { padding: 8px 16px; font-size: 12.5px; min-height: 40px; }
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER - multi-column, hairline divider, bottom legal strip
   Editorial composition: brand column wide-left, 3 nav columns right,
   single hairline rule above bottom strip. Apple/Linear DNA.
   ════════════════════════════════════════════════════════════════════ */
.footer {
  position: relative;
  z-index: 2;
  margin-top: clamp(64px, 10vw, 120px);
  padding: clamp(56px, 7vw, 96px) clamp(24px, 4vw, 56px) 0;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, transparent 0%, rgba(17, 5, 40, 0.35) 100%);
  color: var(--t2);
  font-family: var(--sans-body);
}

.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  padding-bottom: clamp(48px, 6vw, 72px);
}

/* Brand column */
.footer__brand { display: flex; flex-direction: column; gap: 18px; max-width: 36ch; }
.footer__logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--silver);
  display: inline-flex;
  align-items: baseline;
  align-self: flex-start;
  transition: opacity .2s var(--e1);
}
.footer__logo em {
  color: var(--violet);
  font-style: normal;
  font-weight: 800;
  text-shadow: 0 0 12px var(--violet-glow);
}
.footer__logo:hover { opacity: 0.85; }
.footer__tag {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--t3);
  text-wrap: pretty;
}
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t2);
}
.footer__contact a {
  color: var(--silver);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--e1), color .2s var(--e1);
}
.footer__contact a:hover { color: var(--violet); border-bottom-color: var(--violet); }
.footer__sep { color: var(--t4); }
.footer__sk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--prism-ivory);
}
.footer__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--prism-ivory);
  box-shadow:
    0 0 0 2px rgba(255, 255, 240, 0.10),
    0 0 10px rgba(255, 255, 240, 0.45);
}

/* Nav columns */
.footer__col { display: flex; flex-direction: column; gap: 18px; }
.footer__title {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--prism-rose);
  opacity: 0.7;
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__col li { list-style: none; }
.footer__col a {
  font-size: 14px;
  color: var(--t2);
  display: inline-block;
  position: relative;
  padding: 4px 0;
  transition: color .2s var(--e1), transform .25s var(--soft);
}
.footer__col a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--violet), transparent);
  transition: width .35s var(--soft);
}
.footer__col a:hover {
  color: var(--silver);
  transform: translateX(2px);
}
.footer__col a:hover::before { width: 100%; }

/* Bottom strip - hairline above + balanced two-row content */
.footer__bottom {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.footer__bottom-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  color: var(--t3);
}
.footer__copyright {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.footer__pay {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t4);
}
.footer__pay > span:first-child { color: var(--t3); }
.footer__pay-method {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.02);
  color: var(--t2);
  transition: border-color .2s var(--e1), color .2s var(--e1);
}
.footer__pay-method:hover {
  border-color: var(--lavender-line);
  color: var(--silver);
}

/* Tablet - 4 cols become 2x2 with brand still wide */
@media (max-width: 980px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 48px);
  }
  .footer__brand { grid-column: 1 / -1; max-width: 52ch; }
}

/* Phone - single column stack */
@media (max-width: 640px) {
  .footer { padding: clamp(48px, 10vw, 72px) 20px 0; }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 40px;
  }
  .footer__brand { grid-column: auto; max-width: 100%; }
  .footer__col { gap: 14px; }
  .footer__col ul { gap: 10px; }
  .footer__col a { font-size: 14.5px; padding: 6px 0; min-height: 28px; }
  .footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE - 320px → 4K
   Order: smallest → largest. Mobile-first overrides + desktop boosts.
   ════════════════════════════════════════════════════════════════════ */

/* (380px block moved below - must come AFTER 880px to win specificity) */

/* Phones (≤ 600px) */
@media (max-width: 600px) {
  .hero__bracket { display: none; }
  .hero__trust span:not(.dot) { font-size: 10.5px; }
  .marquee__track span { font-size: 11px; letter-spacing: 0.08em; }
  .marquee__track { gap: 24px; }
  .compare-card { padding: 4px; }
  .step { padding: 26px 22px; min-height: auto; }
  .tier { padding: 26px 22px; }
  .bundle { padding: 36px 22px; }
  .final { padding: clamp(36px, 6vw, 60px) clamp(20px, 4vw, 36px); }
  /* Footer mobile - handled by dedicated footer block above */
}

/* Tablets (601 → 880px) */
@media (max-width: 880px) {
  .bento__card--large { min-height: 320px; }
  .bento__bars { height: 60%; }
  .bento__viz--bars { padding: var(--s4) var(--s4) 80px; }
  .promo-banner__track { gap: 28px; }

  /* Hero - diagonal corner composition */
  .hero__layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      ".  a"
      "b  b"
      "band band";
    padding: clamp(64px, 10vw, 96px) clamp(20px, 5vw, 32px) clamp(28px, 5vw, 40px);
    gap: clamp(28px, 6vw, 56px);
  }
  .hero__group--a {
    grid-area: a;
    align-self: start;
    justify-self: end;
    align-items: flex-end;
    max-width: 100%;
  }
  .hero__group--b {
    grid-area: b;
    align-self: end;
    justify-self: start;
    text-align: left;
    align-items: flex-start;
    max-width: 100%;
  }
  .hero__band {
    grid-area: band;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .hero__brand { font-size: clamp(44px, 14vw, 80px); }
  .hero__copy { font-size: clamp(14px, 3.6vw, 16px); max-width: 36ch; }
  .hero__trust {
    justify-content: center;
    align-self: center;
    font-size: 10.5px;
    gap: 8px;
    padding: 8px 14px;
  }
  .hero__scroll {
    flex-direction: row;
    align-self: center;
    gap: 10px;
  }
  .hero__scroll-line {
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, var(--lavender), transparent);
  }
}

/* Small desktops / large tablets (881 → 1100px) */
@media (max-width: 1100px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .tier--featured { transform: none; }
  .tier--featured:hover { transform: translateY(-3px); }
}

/* Large desktops (≥ 1440px) */
@media (min-width: 1440px) {
  :root { --max: 1280px; }
  .bento__num { font-size: 64px; }
  .display { font-size: clamp(56px, 5.4vw, 88px); }
}

/* Ultrawide (≥ 1920px) - keep content centered, don't let it stretch */
@media (min-width: 1920px) {
  :root { --max: 1340px; --sec-y: 168px; --banner-h: 40px; }
  .hero { min-height: clamp(720px, 92vh, 1080px); }
  .promo-banner__track { font-size: 13px; }
}

/* High-DPI / retina - turn down some heavy effects to save battery */
@media (min-resolution: 2dppx) {
  .glass { backdrop-filter: blur(20px) saturate(180%) brightness(1.04); -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.04); }
}

/* Touch devices - reduce hover-only effects */
@media (hover: none) and (pointer: coarse) {
  .glass:hover { transform: none; }
  .glass:hover::after { opacity: 0; }
  .tier:hover, .step:hover, .trust-card:hover, .bento__card:hover { transform: none; }
  .cta:hover { transform: none; }
  .hero__scroll { display: none; } /* P1 #14 - scroll cue useless on touch */
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE-FIRST CLEANUP - single coherent override block
   Three breakpoints: ≤480 (small phone), ≤768 (phone/tablet), ≥1024 (desktop+).
   Placed LAST so it wins specificity over every earlier @media rule.
   ════════════════════════════════════════════════════════════════════ */

/* ── PHONE & TABLET (≤768px) - the "mobile" baseline ─────────────────── */
@media (max-width: 768px) {

  /* No horizontal overflow anywhere. Common offender: 100vw on iOS Safari
     includes scrollbar width and overflows. */
  html, body { overflow-x: clip; }
  body::before, body::after { width: 100%; }

  /* Section rhythm - tighter vertical, edge-to-edge horizontal */
  :root {
    --sec-y: clamp(56px, 12vw, 96px);
    --sec-x: 20px;
  }
  .section { padding: var(--sec-y) var(--sec-x); }

  /* Typography - display drops from 40px to 30-36px on phone */
  .display { font-size: clamp(30px, 8.4vw, 44px); letter-spacing: -0.03em; }
  .lede { font-size: 15px; line-height: 1.5; margin-top: 16px; }
  .eyebrow { font-size: 10.5px; letter-spacing: 0.18em; }
  .section__head { margin-bottom: clamp(32px, 8vw, 56px); }
  .section__head .eyebrow { margin-bottom: 14px; }

  /* HERO - single-column centered stack on phones (kill diagonal) */
  .hero { min-height: calc(100svh - 96px); }
  .hero__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "a" "b" "band";
    /* Mobile top padding clears the floating topbar pill (banner ~34 + 12 + 56 + 16 breath) */
    padding: clamp(110px, 22vw, 140px) 20px clamp(24px, 5vw, 36px);
    gap: clamp(24px, 5vw, 36px);
    text-align: center;
  }
  .hero__group--a {
    grid-area: a;
    align-self: start;
    justify-self: center;
    align-items: center;
  }
  .hero__group--b {
    grid-area: b;
    align-self: center;
    justify-self: center;
    text-align: center;
    align-items: center;
  }
  .hero__brand { font-size: clamp(40px, 13vw, 72px); }
  .hero__copy { font-size: clamp(15px, 4vw, 18px); max-width: 28ch; margin: 0 auto; }
  .hero__band {
    grid-area: band;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
  }
  .hero__trust {
    align-self: center;
    justify-content: center;
    font-size: 10.5px;
    gap: 8px;
    padding: 8px 14px;
  }

  /* PROMO BANNER + MARQUEE - clearer separation, smaller text on phones */
  :root { --banner-h: 34px; }
  .promo-banner__track { font-size: 11.5px; gap: 24px; }
  .marquee { padding: 14px 0; }
  .marquee__track { gap: 24px; }
  .marquee__track span { font-size: 11px; letter-spacing: 0.08em; }

  /* TOPBAR - compact, CTA pill stays readable */
  .topbar { height: 64px; }
  .topbar__inner { padding: 0 20px; }
  .topbar__sk, .topbar__mail, .topbar__sep { display: none; }
  .topbar__cta { font-size: 12.5px; padding: 8px 14px 8px 16px; min-height: 38px; }
  .logo { font-size: 17px; }

  /* PRICING - already 1-col below 760px, tighten paddings + gap */
  .tiers { grid-template-columns: 1fr; gap: 12px; padding-top: 8px; }
  .tier { padding: 24px 22px; gap: 18px; }
  .tier--featured { transform: none; }
  .tier__head { gap: 4px; }
  .tier__price { font-size: 38px; }
  .tier__features li { font-size: 13.5px; padding: 8px 0; }
  .bundle { padding: 32px 22px; gap: 18px; }
  .bundle__price { font-size: 44px; }

  /* PROCESS TIMELINE - collapse 88px left padding to phone-safe */
  .timeline { padding: 0 0 0 28px; gap: 40px; }
  .timeline::before { left: 8px !important; }
  .step { padding: 22px 20px; min-height: auto; }

  /* TRUST 4-BLOCKS - single column, tighter */
  .trust-grid { gap: 12px; }
  .trust-card { padding: 22px 20px; }

  /* BENTO - single column, compact */
  .bento__grid { gap: 12px; }
  .bento__card { min-height: 240px; padding: 24px 20px; border-radius: 18px; }
  .bento__card--large { min-height: 280px; }
  .bento__num { font-size: 44px; }

  /* COMPARE - already redesigned as cards, tighten outer padding */
  .compare-card { padding: 6px; }

  /* FAQ - proper touch targets (≥44px), tighter padding */
  .faq { padding: 0; }
  .faq summary {
    padding: 18px 16px;
    min-height: 56px;
    font-size: 15px;
    line-height: 1.4;
    align-items: flex-start;
    gap: 14px;
  }
  .faq__chev { flex-shrink: 0; margin-top: 2px; }
  .faq p { padding: 0 16px 18px; font-size: 14.5px; }

  /* FINAL START-CARD - full width, no horizontal overflow */
  .final { padding: 32px 20px; border-radius: 24px; margin: 0 var(--sec-x); width: auto; }
  .start-card { padding: 28px 20px; }

  /* FORM MODAL - full screen on phones, no awkward floating panel */
  .modal__panel {
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    max-width: none;
    border-radius: 0;
    transform: none;
    top: 0;
    left: 0;
  }
  .modal__body { padding: 24px 20px; }
  .modal__head { padding: 20px; }

  /* STICKY CTA - proper z-index, never overlap footer, real touch target */
  /* Sticky CTA mobile - base rules already handle padding + size */
  .sticky-cta { z-index: 90; }

  /* Footer - pad bottom for sticky-CTA breathing room (multi-col CSS owns the rest) */
  .footer { padding-bottom: 96px; }

  /* TOUCH TARGETS - every CTA ≥44px tall on phones */
  .cta, .topbar__cta, .liquid-btn, .refract-btn { min-height: 44px; }

  /* GLASS CARDS - slightly tighter blur for perf on phones */
  .glass { border-radius: 18px; }
}

/* ── SMALL PHONE (≤480px) - fine-tune the narrow end ─────────────────── */
@media (max-width: 480px) {
  :root { --sec-x: 16px; }
  .display { font-size: clamp(28px, 8.6vw, 36px); }
  .hero__brand { font-size: clamp(36px, 13vw, 56px); }
  .hero__copy { font-size: 15px; max-width: 26ch; }
  .promo-banner__track { gap: 18px; }
  .promo-banner__track span { gap: 8px; }
  .marquee__track { gap: 18px; }
  .topbar__cta span { display: none; } /* arrow-only on tiny phones */
  .topbar__cta { padding: 8px 12px; min-width: 38px; justify-content: center; }
  .tier { padding: 22px 18px; }
  .bundle { padding: 28px 18px; }
  .step { padding: 20px 16px; }
  .trust-card { padding: 20px 16px; }
  .bento__card { padding: 22px 18px; }
  .final { padding: 28px 18px; }
  .start-card { padding: 24px 18px; }

  /* Sticky CTA - hide the mono prefix line at <480px so offer fits */
  .sticky-cta__label > span:not(strong) { display: none; }
  .sticky-cta__label strong { font-size: 13px; }

  /* Compare picker - single-line label safety on tiny phones */
  .cmp__pill { padding: 9px 14px; font-size: 12.5px; }
}

/* ── EXTRA-SMALL PHONE (≤360px iPhone SE 1st gen) ── */
@media (max-width: 360px) {
  .sticky-cta__label strong { font-size: 13px; }
  .sticky-cta__btn { padding: 9px 12px; font-size: 12.5px; }
  .sticky-cta__btn span { display: none; } /* arrow-only at extreme narrow */
  .sticky-cta__btn svg { width: 16px; height: 16px; }
  .hero__brand { font-size: 38px; }
  .display { font-size: 26px; letter-spacing: -0.025em; }
}

/* ════════════════════════════════════════════════════════════
   HIDE HOSTING + CARE upsell sections (kept in DOM for future)
   ════════════════════════════════════════════════════════════ */
#hosting,
#care { display: none !important; }


/* ════════════════════════════════════════════════════════════
   POWERED BY · simple static strip under €650 bundle
   No effects. No glass. No animation. Just brand marks inline.
   All three logos optically balanced at ~28px cap height.
   ════════════════════════════════════════════════════════════ */
.powered-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
  margin: 28px 0 0;
  padding: 0;
}
.powered-by__label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 224, 210, 0.42);
  margin-right: 4px;
}
.powered-by__brand {
  display: inline-flex;
  align-items: center;
  color: rgba(232, 224, 210, 0.92);
  white-space: nowrap;
  height: 28px;
}
.powered-by__brand svg { display: block; height: 100%; width: auto; }

/* Stripe - true wordmark, balanced cap height */
.powered-by__brand--stripe svg { height: 26px; }

/* Klarna - wordmark + brand pink dot */
.powered-by__brand--klarna svg { height: 24px; }

/* Apple Pay - Apple mark + Pay text, slightly bigger so visually equal */
.powered-by__brand--apple svg { height: 28px; }

.powered-by__sep {
  color: rgba(149, 128, 232, 0.32);
  font-size: 14px;
  user-select: none;
  line-height: 1;
}
@media (max-width: 480px) {
  .powered-by { gap: 10px 12px; margin-top: 22px; }
  .powered-by__brand { height: 22px; }
  .powered-by__brand--stripe svg { height: 20px; }
  .powered-by__brand--klarna svg { height: 19px; }
  .powered-by__brand--apple svg { height: 22px; }
  .powered-by__label { font-size: 10px; letter-spacing: 0.14em; }
}


/* ════════════════════════════════════════════════════════════
   PAYMENT TRUST · Stripe + cards rolling marquee + secure badges
   Brand: monochrome ivory on near-black for editorial restraint
   ════════════════════════════════════════════════════════════ */
.paytrust {
  --pt-fg: rgba(232, 224, 210, 0.78);   /* ivory @ 78% */
  --pt-fg-strong: #E8E0D2;
  --pt-rim: rgba(149, 128, 232, 0.18);
  position: relative;
  padding: 56px var(--sec-x) 64px;
  overflow-x: clip;
  contain: layout paint;
}

.paytrust__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.paytrust__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.paytrust__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pt-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}
.paytrust__eyebrow svg {
  width: 14px;
  height: 14px;
  color: var(--nox-violet, #5D3FD3);
  flex-shrink: 0;
}
.paytrust__eyebrow strong {
  color: var(--pt-fg-strong);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  font-family: "Inter Display", "Inter", sans-serif;
  font-size: 13px;
}

.paytrust__sub {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 224, 210, 0.42);
  margin: 0;
}

/* ── Rolling rail ──────────────────────────────────────────── */
.paytrust__rail {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid rgba(149, 128, 232, 0.14);
  border-bottom: 1px solid rgba(149, 128, 232, 0.14);
  background: linear-gradient(
    180deg,
    rgba(26, 8, 64, 0) 0%,
    rgba(26, 8, 64, 0.18) 50%,
    rgba(26, 8, 64, 0) 100%
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.paytrust__track {
  display: flex;
  align-items: center;
  gap: 36px;
  width: max-content;
  animation: paytrust-roll 38s linear infinite;
  will-change: transform;
}

@keyframes paytrust-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.paytrust__rail:hover .paytrust__track { animation-play-state: paused; }

.paytrust__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  color: var(--pt-fg);
  flex-shrink: 0;
  transition: color 0.4s ease, opacity 0.4s ease;
  opacity: 0.78;
}
.paytrust__brand:hover { color: var(--pt-fg-strong); opacity: 1; }

.paytrust__brand svg { height: 100%; width: auto; }

.paytrust__brand--stripe svg { height: 22px; }
.paytrust__brand--visa svg { height: 16px; }
.paytrust__brand--mc svg { height: 30px; }

.paytrust__brand--amex span,
.paytrust__brand--klarna span,
.paytrust__brand--apple span,
.paytrust__brand--gpay span {
  font-family: "Inter Display", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.paytrust__brand--amex span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  border: 1px solid currentColor;
  padding: 5px 9px;
  border-radius: 4px;
}

.paytrust__brand--klarna span {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-style: italic;
}
.paytrust__brand--klarna sub {
  display: inline-block;
  margin-left: 1px;
  vertical-align: baseline;
  color: #ff8fd0;
}

.paytrust__brand--apple {
  gap: 4px;
}
.paytrust__brand--apple svg { width: 16px; height: 16px; }
.paytrust__brand--apple span { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }

.paytrust__brand--gpay span strong {
  color: var(--pt-fg-strong);
  font-weight: 800;
  font-size: 16px;
  margin-right: 1px;
}
.paytrust__brand--gpay span { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; }

.paytrust__sep {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8px;
  color: rgba(149, 128, 232, 0.45);
  font-style: normal;
  flex-shrink: 0;
}

/* edge veils - extra fade overlay for depth */
.paytrust__veil {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.paytrust__veil--l {
  left: 0;
  background: linear-gradient(90deg, var(--bg, #07020F) 0%, transparent 100%);
}
.paytrust__veil--r {
  right: 0;
  background: linear-gradient(270deg, var(--bg, #07020F) 0%, transparent 100%);
}

/* ── Trust badges row ──────────────────────────────────────── */
.paytrust__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
}

.paytrust__badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: rgba(26, 8, 64, 0.42);
  border: 1px solid rgba(149, 128, 232, 0.18);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pt-fg);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.paytrust__badges svg {
  width: 13px;
  height: 13px;
  color: rgba(149, 128, 232, 0.85);
  flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .paytrust { padding: 44px var(--sec-x) 52px; }
  .paytrust__inner { gap: 22px; }
  .paytrust__track { gap: 28px; animation-duration: 32s; }
  .paytrust__brand { height: 24px; }
  .paytrust__brand--stripe svg { height: 18px; }
  .paytrust__brand--visa svg { height: 14px; }
  .paytrust__brand--mc svg { height: 26px; }
  .paytrust__veil { width: 56px; }
  .paytrust__badges { gap: 8px 10px; }
  .paytrust__badges li { padding: 6px 11px; font-size: 10px; gap: 6px; }
}

@media (max-width: 480px) {
  .paytrust { padding: 36px var(--sec-x) 44px; }
  .paytrust__track { gap: 22px; animation-duration: 28s; }
  .paytrust__rail { padding: 14px 0; }
  .paytrust__eyebrow { font-size: 11px; }
  .paytrust__sub { font-size: 10px; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  .paytrust__track { animation: none; transform: none; }
  .paytrust__rail { mask-image: none; -webkit-mask-image: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   PERF + SHIMMER POLISH (final layer)
   ────────────────────────────────────────────────────────────────────────
   1) content-visibility: auto on heavy below-fold sections - browser skips
      offscreen rendering, tied to a 600px intrinsic size hint to avoid
      layout shift. ~30-50% faster initial paint on long pages.
   2) One-shot scroll-into-view shimmer - diagonal gradient sweep across
      glass cards as they enter the viewport. Plays once via .reveal.is-visible.
   3) GPU compositor hints only where animations actually run.
   ════════════════════════════════════════════════════════════════════════ */

/* PERF: skip rendering offscreen sections.
   Does NOT apply to hero, marquee (intersection edge cases) or footer. */
.section,
.card-stream,
.bento {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* SHIMMER: subtle one-shot diagonal sweep when a glass card enters viewport.
   Triggered by the existing .reveal.is-visible class (set by IntersectionObserver
   in script.js). Plays once, then sits idle. No infinite animation. */
@keyframes glassShimmer {
  0%   { opacity: 0; transform: translateX(-110%) rotate(8deg); }
  60%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(110%) rotate(8deg); }
}

.reveal.is-visible .glass::before,
.reveal.is-visible .tier::before,
.reveal.is-visible .svc-card::before,
.reveal.is-visible .bento__card::before {
  /* Optional: layer a one-shot sheen on top of existing prism rim ::before.
     We DON'T duplicate ::before since most glass cards already use it for the
     prism rim. Instead, the .reveal.is-visible class triggers a CSS animation
     on the existing element. The ::before stays for prism rim purposes. */
}

/* For elements that don't already have a ::before claimed,
   add a one-shot sheen overlay via a dedicated class .shine. Used opt-in. */
.shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.reveal.is-visible.shine::after,
.reveal.is-visible .shine::after {
  animation: glassShimmer 1.4s var(--soft) 0.2s 1 forwards;
}

@media (prefers-reduced-motion: reduce) {
  .shine::after,
  .reveal.is-visible .shine::after { animation: none; opacity: 0; }
}

/* GPU compositor hints - only on elements that actually animate */
.liquid-btn__halo, .liquid-btn__lq, .start-card__shader,
.cmp__pill-glow, .marquee__track, .promo-banner__track {
  will-change: transform;
}

/* ════════════════════════════════════════════════════════════════════
   TYPOGRAPHY - SK orphan-prevention
   Slovak typography rule: short prepositions, numbers + units, and
   parenthetical phrases must never split across line breaks.
   ──────────────────────────────────────────────────────────────────
   `text-wrap: balance` - browser balances line lengths in headings
   `text-wrap: pretty`  - browser prevents orphan-word last lines
   `.nowrap`            - utility for inline phrases
   ════════════════════════════════════════════════════════════════════ */
.display,
.section__head h2,
.timeline__content h3,
.cmp__panel-title,
.svc-card__name,
.tier h3,
.bundle-anchor__h,
.start-card__h,
.faq summary {
  text-wrap: balance;
}

p, li, .lede, .cmp__panel-sub, .cmp__nox-note, .svc-note,
.cmp__alt-meta, .timeline__content p, .tier__list li,
.bundle-anchor__list li, .svc-card__list li {
  text-wrap: pretty;        /* prevents single-word last line */
}

/* Inline utility - wrap with this for SK number+unit pairs / parens */
.nowrap {
  white-space: nowrap;
  display: inline-block;
}


/* ════════════════════════════════════════════════════════════════════
   LIQUID-BTN · MOBILE PILL-CLIP HARDENING
   ──────────────────────────────────────────────────────────────────
   Problem: on mobile Safari/Chrome the layered halo/plate/border bleed
   outside the pill as visible RECTANGLES because:
     1. filter: blur() expands the element's bounding box BEFORE the
        parent's border-radius/overflow:hidden clips it (known iOS bug)
     2. border-image: linear-gradient() ... 1  COMPLETELY overrides
        border-radius per CSS spec - borders draw as rectangles even
        though border-radius is declared
     3. Stacked GPU layers (translateZ) sometimes ignore parent clip
   Fix: kill the outer halo + plate on small screens (decorative, adds
   no value at 360-414px width) and replace border-image with a simple
   gradient-ring that DOES respect border-radius via mask-composite.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. Outer halo - disable. The bloom is a desktop luxury;
        on mobile it manifests as a square-pasted ghost. */
  .liquid-btn__halo,
  .liquid-btn__halo-bg,
  .liquid-btn__halo-svg {
    display: none !important;
  }

  /* 2. Plate (inner blurred violet shadow) - also a square-bleed source.
        Replace with a tight inset glow that lives INSIDE the surface. */
  .liquid-btn__plate {
    display: none !important;
  }

  /* 3. The visible button gets a tighter, fully-clipped look */
  .liquid-btn {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.18),
      0 6px 22px rgba(93, 63, 211, 0.28);
  }

  /* 4. Borders - kill the rectangular border-image, replace with a
        gradient ring that respects border-radius using mask-composite. */
  .liquid-btn__border {
    border: none !important;
    border-image: none !important;
    background: linear-gradient(to bottom, transparent 30%, rgba(255, 255, 255, 0.55) 100%);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
            mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    padding: 2px;
    border-radius: var(--r-pill);
    mix-blend-mode: overlay;
    pointer-events: none;
  }
  /* Reduce mobile blur to keep the ring inside the pill */
  .liquid-btn__border--1,
  .liquid-btn__border--2 { filter: blur(1.5px); }
  .liquid-btn__border--3 { filter: blur(2.5px); }
  .liquid-btn__border--4,
  .liquid-btn__border--5 { filter: blur(2px); }

  /* 5. Surface clip - belt-and-braces clip-path to force pill clipping
        even when the browser ignores border-radius+overflow:hidden on
        a transformed/blurred descendant chain. */
  .liquid-btn__surface {
    clip-path: inset(0 round var(--r-pill));
    -webkit-clip-path: inset(0 round var(--r-pill));
  }

  /* 6. Core glow - tighten so it stays well inside the pill. */
  .liquid-btn__core-glow {
    filter: blur(10px);
    width: 60%;
    height: 36%;
  }

  /* 7. Refract-btn (Spustiť start-card CTA) - same iOS rounded-clip hardening */
  .refract-btn {
    clip-path: inset(0 round var(--r-pill));
    -webkit-clip-path: inset(0 round var(--r-pill));
  }
}

/* Tiny-phone tightening - make sure even the smallest screens stay clean */
@media (max-width: 480px) {
  .liquid-btn { min-height: 52px; }
  .liquid-btn__core-glow { filter: blur(8px); }
}


/* ════════════════════════════════════════════════════════════════════
   GLOBAL · KILL ALL SCROLL SNAP / CONTENT-VIS JUMPS
   ──────────────────────────────────────────────────────────────────
   Standard landing-page scroll behaviour everywhere. No content-visibility
   placeholders, no scroll-snap-type on any container. Phones especially
   were lurching by ~600-1800px when section placeholders swapped to real
   heights. Same applies on tablet/desktop for consistency.
   ════════════════════════════════════════════════════════════════════ */
.section,
.card-stream,
.bento {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
  contain: none !important;
}
html { scroll-snap-type: none !important; }


/* ════════════════════════════════════════════════════════════════════
   MOBILE TOPBAR · logo left · CTA + circular burger right
   ──────────────────────────────────────────────────────────────────
   Logo on left, then a CTA pill with text, then a circular burger on
   the far right. Pill capsule narrows to viewport width.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .topbar {
    height: 56px;
    width: calc(100vw - 24px);
    max-width: 520px;
    left: 50%;
    transform: translateX(-50%);
  }

  .topbar__inner {
    grid-template-columns: auto 1fr auto;
    padding: 0 8px 0 18px;
    gap: 8px;
  }

  .topbar .logo {
    grid-column: 1;
    justify-self: start;
    font-size: 16px;
  }

  .topbar__nav { display: none; }

  .topbar__meta {
    grid-column: 3;
    justify-self: end;
    align-items: center;
    gap: 8px;
  }

  /* CTA - full button with text, sits left of the burger */
  .topbar__cta {
    font-size: 12.5px;
    padding: 8px 14px;
    min-height: 40px;
    border-radius: 999px;
  }
  .topbar__cta span { display: inline; }
  .topbar__cta svg { width: 14px; height: 14px; }

  /* Circular burger - perfect 40px circle on the right */
  .topbar__burger,
  .topbar__burger--circle {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
  }
  .topbar__burger > span {
    left: 11px; right: 11px;
    height: 1.6px;
  }
  .topbar__burger > span:nth-child(1) { top: 13px; }
  .topbar__burger > span:nth-child(2) { top: 19px; }
  .topbar__burger > span:nth-child(3) { top: 25px; }
}

/* Tiny phone - keep CTA visible with text, just trim a bit */
@media (max-width: 420px) {
  .topbar { width: calc(100vw - 16px); }
  .topbar__inner { padding: 0 6px 0 14px; gap: 6px; }
  .topbar__cta { padding: 7px 12px; font-size: 12px; min-height: 38px; }
  .topbar__cta span { display: inline; }   /* keep the text */
  .topbar__burger { width: 38px; height: 38px; }
  .topbar .logo { font-size: 15px; }
}


/* ════════════════════════════════════════════════════════════════════
   INTER-SECTION CTAS · 4 escalating moments, 4 distinct treatments
   ──────────────────────────────────────────────────────────────────
   1. .cta-strip      - soft pricing pill        (after Bento)
   2. .commit-cta     - full glass urgency       (after Process)
   3. .proof-cta      - counter + button         (after Trust)
   4. .contact-cta    - soft email block         (after FAQ)
   ════════════════════════════════════════════════════════════════════ */


/* ─── 1. CTA-STRIP · pricing teaser pill (soft, prismatic on hover) ─── */
.cta-strip {
  display: flex;
  justify-content: center;
  padding: 32px var(--sec-x);
}
.cta-strip__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 18px;
  border-radius: var(--r-pill);
  background: rgba(26, 8, 64, 0.55);
  border: 1px solid rgba(184, 168, 232, 0.22);
  backdrop-filter: blur(18px) saturate(190%);
  -webkit-backdrop-filter: blur(18px) saturate(190%);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--t2);
  text-decoration: none;
  transition: border-color .35s var(--e1), background .35s var(--e1), color .35s var(--e1), transform .35s var(--soft), box-shadow .35s var(--e1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 6px 22px -8px rgba(93, 63, 211, 0.32);
}
/* prismatic rim on hover */
.cta-strip__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  background: linear-gradient(115deg,
    rgba(123, 224, 229, 0.65) 0%,
    rgba(184, 168, 232, 0.32) 22%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 143, 208, 0.32) 75%,
    rgba(255, 255, 240, 0.65) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--e1);
}
.cta-strip__link:hover {
  border-color: rgba(184, 168, 232, 0.4);
  background: rgba(40, 16, 100, 0.48);
  color: var(--silver);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 14px 36px -10px rgba(93, 63, 211, 0.55);
}
.cta-strip__link:hover::before { opacity: 1; }
.cta-strip__eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 168, 232, 0.78);
  padding-right: 14px;
  border-right: 1px solid rgba(184, 168, 232, 0.22);
}
.cta-strip__copy { letter-spacing: -0.005em; }
.cta-strip__copy strong { color: var(--silver); font-weight: 700; }
.cta-strip__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--violet);
  color: var(--silver);
  transition: transform .4s var(--soft), box-shadow .4s var(--e1);
  box-shadow: 0 4px 14px -2px rgba(93, 63, 211, 0.6);
  overflow: hidden;
}
.cta-strip__arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 60%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s var(--e1);
}
.cta-strip__arrow svg { width: 13px; height: 13px; position: relative; z-index: 1; }
.cta-strip__link:hover .cta-strip__arrow {
  transform: translateX(4px);
  box-shadow: 0 8px 22px -2px rgba(93, 63, 211, 0.85);
}
.cta-strip__link:hover .cta-strip__arrow::after { opacity: 1; }


/* ─── 2. COMMIT-CTA · full glass urgency banner ─────────────────────── */
.commit-cta {
  padding: 64px var(--sec-x) 56px;
}
.commit-cta__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
  padding: clamp(36px, 4vw, 56px) clamp(32px, 4vw, 56px);
  border-radius: var(--r-card-lg);
  background:
    radial-gradient(700px 240px at 0% 0%, rgba(93, 63, 211, 0.22), transparent 60%),
    radial-gradient(540px 200px at 100% 100%, rgba(184, 168, 232, 0.12), transparent 65%),
    var(--glass-bg);
}
/* .glass already provides prism-rim ::before + mouse-spec ::after + insets */
.commit-cta__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 168, 232, 0.75);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.commit-cta__eyebrow .num { color: var(--violet); font-style: normal; }
.commit-cta__h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--silver);
  margin: 0 0 10px;
  text-wrap: balance;
}
.commit-cta__h em {
  font-style: normal;
  background: linear-gradient(90deg, var(--prism-rose), var(--prism-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.commit-cta__sub {
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--t3);
  margin: 0;
  max-width: 48ch;
}
.commit-cta__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--violet) 0%, #6d4be8 100%);
  color: var(--silver);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform .35s var(--soft), box-shadow .4s var(--e1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 10px 30px -8px rgba(93, 63, 211, 0.65);
}
/* Sliding shimmer overlay on hover */
.commit-cta__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0.18) 55%,
    transparent 100%);
  transform: translateX(-120%);
  transition: transform .8s var(--soft);
  z-index: 0;
}
.commit-cta__btn > * { position: relative; z-index: 1; }
.commit-cta__btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 18px 42px -8px rgba(93, 63, 211, 0.9);
}
.commit-cta__btn:hover::before { transform: translateX(120%); }
.commit-cta__btn:active { transform: translateY(0) scale(0.99); transition-duration: .12s; }
.commit-cta__btn svg { width: 16px; height: 16px; transition: transform .4s var(--soft); }
.commit-cta__btn:hover svg { transform: translateX(3px); }


/* ─── 3. PROOF-CTA · counter + button (social proof) ────────────────── */
.proof-cta {
  padding: 56px var(--sec-x);
}
.proof-cta__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(32px, 3.5vw, 44px) clamp(28px, 4vw, 48px);
  border-radius: var(--r-card-lg);
}
.proof-cta__counter {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.proof-cta__num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(54px, 6vw, 76px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  background: linear-gradient(180deg, var(--silver) 0%, var(--prism-rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.proof-cta__num em {
  font-style: normal;
  background: linear-gradient(180deg, var(--prism-rose), var(--prism-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.proof-cta__label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
  line-height: 1.55;
}
.proof-cta__divider {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(184, 168, 232, 0.32), transparent);
}
.proof-cta__action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.proof-cta__copy {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--t2);
  margin: 0;
  letter-spacing: -0.005em;
  max-width: 32ch;
}
.proof-cta__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  background: rgba(26, 8, 64, 0.55);
  border: 1px solid rgba(184, 168, 232, 0.42);
  color: var(--silver);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .35s var(--e1), background .35s var(--e1), transform .35s var(--soft), box-shadow .4s var(--e1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}
/* Lavender border bloom on hover via radial gradient bg layer */
.proof-cta__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 180% at 50% 100%, rgba(149, 128, 232, 0.4), transparent 65%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .4s var(--e1);
  z-index: 0;
}
.proof-cta__btn > * { position: relative; z-index: 1; }
.proof-cta__btn:hover {
  border-color: var(--silver);
  background: rgba(40, 16, 100, 0.62);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 12px 32px -8px rgba(149, 128, 232, 0.45);
}
.proof-cta__btn:hover::before { opacity: 1; }
.proof-cta__btn:active { transform: translateY(0); transition-duration: .12s; }
.proof-cta__btn svg { width: 14px; height: 14px; transition: transform .35s var(--soft); }
.proof-cta__btn:hover svg { transform: translateX(4px); }


/* ─── 4. CONTACT-CTA · soft email block (final) ─────────────────────── */
.contact-cta {
  padding: 72px var(--sec-x) 56px;
}
.contact-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(40px, 4vw, 60px) clamp(28px, 4vw, 56px);
  border-radius: var(--r-card-lg);
}
.contact-cta__inner::after {
  /* Override .glass mouse-spec ::after since it's centered visual; we want
     a static lavender top glow. .glass ::after uses opacity:0 by default and
     opacity:1 on hover; we use that pattern but with a centered radial. */
  background: radial-gradient(520px 260px at 50% 0%, rgba(93, 63, 211, 0.22), transparent 60%);
  opacity: 1;
}
.contact-cta__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 168, 232, 0.68);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.contact-cta__eyebrow .num { color: var(--violet); font-style: normal; }
.contact-cta__h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--silver);
  margin: 0;
  text-wrap: balance;
  position: relative;
  z-index: 1;
}
.contact-cta__h em {
  font-style: normal;
  color: var(--t2);
  font-weight: 500;
}
.contact-cta__sub {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--t3);
  margin: 0;
  max-width: 50ch;
  position: relative;
  z-index: 1;
}
.contact-cta__sub strong { color: var(--silver); font-weight: 600; }
.contact-cta__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  margin-top: 14px;
  border: 1px solid rgba(184, 168, 232, 0.36);
  border-radius: var(--r-pill);
  background: rgba(26, 8, 64, 0.55);
  color: var(--silver);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .35s var(--e1), background .35s var(--e1), transform .35s var(--soft), box-shadow .4s var(--e1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32);
}
/* Prismatic rim bloom on hover */
.contact-cta__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  background: linear-gradient(115deg,
    rgba(123, 224, 229, 0.55) 0%,
    rgba(184, 168, 232, 0.30) 22%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 143, 208, 0.30) 75%,
    rgba(255, 255, 240, 0.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--e1);
  z-index: 0;
}
.contact-cta__btn > * { position: relative; z-index: 2; }
.contact-cta__btn:hover {
  border-color: rgba(184, 168, 232, 0.6);
  background: rgba(40, 16, 100, 0.65);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 12px 30px -10px rgba(93, 63, 211, 0.55);
}
.contact-cta__btn:hover::before { opacity: 1; }
.contact-cta__btn:active { transform: translateY(0); transition-duration: .12s; }
.contact-cta__btn svg { width: 16px; height: 16px; color: var(--violet); flex-shrink: 0; transition: color .35s var(--e1); }
.contact-cta__btn:hover svg { color: var(--prism-cyan); }
.contact-cta__email { font-weight: 600; }
.contact-cta__arrow {
  font-family: var(--sans);
  color: rgba(184, 168, 232, 0.62);
  transition: transform .35s var(--soft), color .35s var(--e1);
}
.contact-cta__btn:hover .contact-cta__arrow { transform: translateX(4px); color: var(--silver); }


/* Mobile responsive for all 4 CTAs */
@media (max-width: 768px) {
  .cta-strip__link { padding: 11px 16px 11px 14px; gap: 10px; font-size: 13px; }
  .cta-strip__eyebrow { padding-right: 10px; font-size: 10px; letter-spacing: 0.14em; }
  .cta-strip__copy { font-size: 12.5px; }

  .commit-cta { padding: 40px var(--sec-x) 32px; }
  .commit-cta__inner { grid-template-columns: 1fr; gap: 22px; text-align: left; }
  .commit-cta__btn { justify-self: start; }

  .proof-cta { padding: 36px var(--sec-x); }
  .proof-cta__inner { flex-direction: column; align-items: stretch; gap: 22px; text-align: center; }
  .proof-cta__counter { flex-direction: column; align-items: center; gap: 8px; }
  .proof-cta__divider { display: none; }
  .proof-cta__action { flex-direction: column; gap: 16px; }
  .proof-cta__copy { text-align: center; max-width: none; }

  .contact-cta { padding: 48px var(--sec-x) 36px; }
}


/* ════════════════════════════════════════════════════════════════════
   COMPARE · HYPER-IMPROVE - symmetric, centered, stat-tile rework
   ──────────────────────────────────────────────────────────────────
   1. Title centered
   2. Alts → 3 symmetric vertical stat tiles side-by-side (centered)
   3. NOXBUILD answer block → fully centered with chartreuse top accent
   4. Subtle dividers between tiles, hover bloom on each
   ════════════════════════════════════════════════════════════════════ */

/* ── Active panel · soft ambient + one-shot shimmer when becoming active */
.cmp__panel.is-active {
  position: relative;
}
.cmp__panel.is-active::after {
  content: "";
  position: absolute;
  inset: -1px 0 -1px 0;
  border-radius: inherit;
  background: radial-gradient(640px 220px at 50% 100%, rgba(149, 128, 232, 0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: cmpFadeIn .55s var(--soft) forwards;
}
@keyframes cmpFadeIn { to { opacity: 1; } }

/* ── PANEL TITLE - centered ─────────────────────────────────────── */
.cmp__panel-title {
  padding: 30px 28px 8px;
  text-align: center;
}

/* ── ALTS - 3 symmetric stat tiles centered, with dividers ──────── */
.cmp__alts {
  padding: 22px 28px 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}
.cmp__alt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 10px;
  padding: 18px 14px;
  border-radius: 14px;
  transition: background .35s var(--e1);
}
/* Subtle vertical divider between tiles */
.cmp__alt + .cmp__alt {
  border-top: none;
}
.cmp__alt + .cmp__alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(184, 168, 232, 0.18), transparent);
  pointer-events: none;
}
/* Hover bloom on each tile */
.cmp__alt:hover {
  background: linear-gradient(180deg, rgba(184, 168, 232, 0.05), transparent 80%);
}
.cmp__alt:hover .cmp__alt-label { color: var(--prism-rose); }
.cmp__alt-label {
  display: block;
  transition: color .35s var(--e1);
}
.cmp__alt-val {
  display: block;
  font-size: 22px;
  text-align: center;
}
.cmp__alt-val em { display: inline; }
.cmp__alt-meta {
  display: block;
  text-align: center;
  max-width: 22ch;
  margin: 0 auto;
  font-size: 12.5px;
}

/* ── NOXBUILD answer · fully CENTERED with chartreuse top accent ── */
.cmp__nox {
  position: relative;
  padding: 32px 28px 32px;
  text-align: center;
  background:
    radial-gradient(80% 200% at 50% 0%, rgba(216, 224, 74, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(93, 63, 211, 0.22) 0%, rgba(184, 168, 232, 0.04) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Chartreuse top accent - short horizontal gradient bar centered above label */
.cmp__nox::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--prism-chartreuse) 30%,
    var(--prism-chartreuse) 70%,
    transparent 100%);
  box-shadow: 0 0 14px var(--chartreuse-glow);
  z-index: 1;
}

/* Chartreuse "→" arrow - under the note, centered */
.cmp__nox::after {
  display: none;
}

/* Re-color the NOXBUILD label - replace prism-rose with chartreuse
   accent so it visually marks "this is the winning answer" */
.cmp__nox-label {
  color: var(--prism-chartreuse);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 0 18px var(--chartreuse-glow);
}

/* Chartreuse dot marker - pulsing glow, sits before "NoxBuild" */
.cmp__nox-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  font-size: 0;            /* hide the literal "●" - we draw our own */
  background: var(--prism-chartreuse);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(216, 224, 74, 0.16),
    0 0 14px var(--chartreuse-glow);
  animation: cmpDotPulse 2.4s ease-in-out infinite;
}
@keyframes cmpDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(216, 224, 74, 0.14), 0 0 12px var(--chartreuse-glow); }
  50%      { box-shadow: 0 0 0 5px rgba(216, 224, 74, 0.06), 0 0 22px var(--chartreuse-glow); }
}
@media (prefers-reduced-motion: reduce) {
  .cmp__nox-mark { animation: none; }
}

/* Big value text - keep the silver→lavender→rose gradient, but tip the
   final stop slightly toward chartreuse so the "answer" feels alive. */
.cmp__nox-value {
  background: linear-gradient(180deg,
    var(--silver) 0%,
    #c2b8ec 50%,
    var(--prism-rose) 85%,
    rgba(216, 224, 74, 0.78) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* On hover of the entire winning row, the chartreuse accent line glows brighter */
.cmp__nox:hover::before {
  box-shadow: 0 0 24px var(--chartreuse-glow), 0 0 40px rgba(216, 224, 74, 0.3);
}

/* ── Slight refinements on alt-val typography ── */
.cmp__alt-val {
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Mobile · stack tiles vertically (single column), keep centered */
@media (max-width: 720px) {
  .cmp__alts {
    grid-template-columns: 1fr;
    padding: 18px 22px 22px;
  }
  .cmp__alt {
    padding: 16px 12px;
  }
  /* Vertical dividers become horizontal between stacked tiles */
  .cmp__alt + .cmp__alt::before {
    left: 18%;
    right: 18%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 168, 232, 0.18), transparent);
  }
  .cmp__alt-val { font-size: 20px; }

  .cmp__panel-title { padding: 26px 22px 6px; }

  .cmp__nox {
    padding: 28px 22px 28px;
  }
  .cmp__nox::before {
    top: 12px;
    width: 48px;
    height: 2px;
  }
}


/* ════════════════════════════════════════════════════════════════════
   CTA TIER SYSTEM · sitewide unification with deliberate hierarchy
   ──────────────────────────────────────────────────────────────────
   Three deliberate tiers - internal consistency, between-tier contrast.
   Tier 1 = primary fill (Populárny, Hero rainbow, Bundle rainbow, Spustiť)
   Tier 2 = lavender outline + glass bg (most CTAs - .cta--ghost, secondary)
   Tier 3 = light inline pill (topbar, sticky, micro CTAs)
   The CONTRAST sits BETWEEN tiers (fill vs outline vs inline scale).
   The UNIFICATION sits WITHIN each tier (same outline alpha, same hover bg,
   same halo intensity).
   ════════════════════════════════════════════════════════════════════ */

/* ── TIER 1 · CHARTREUSE-FILLED PRIMARY ACTIONS ─────────────────────
   Sitewide rewrite: every previously-violet solid CTA becomes chartreuse
   with dark indigo-black text. Violet stays for halos + decorative only. */

/* Populárny tier card (was solid violet) */
.cta--violet {
  background: linear-gradient(180deg, var(--prism-chartreuse) 0%, var(--chartreuse-2) 100%) !important;
  color: var(--chartreuse-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 0 60px var(--chartreuse-halo),
    0 12px 32px -8px var(--chartreuse-halo) !important;
}
.cta--violet:hover {
  background: linear-gradient(180deg, var(--chartreuse-2) 0%, var(--chartreuse-3) 100%) !important;
  color: var(--chartreuse-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 0 80px var(--chartreuse-halo),
    0 16px 40px -8px var(--chartreuse-halo) !important;
}

/* Commit-CTA "Spustiť za 5 minút" (was violet gradient) */
.commit-cta__btn {
  background: linear-gradient(135deg, var(--prism-chartreuse) 0%, var(--chartreuse-2) 100%) !important;
  color: var(--chartreuse-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 10px 30px -8px var(--chartreuse-halo) !important;
}
.commit-cta__btn:hover {
  background: linear-gradient(135deg, var(--chartreuse-2) 0%, var(--chartreuse-3) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 18px 42px -8px var(--chartreuse-halo) !important;
}
.commit-cta__btn svg { color: var(--chartreuse-text); }

/* Topbar CTA "Objednať" - promote to chartreuse-filled action button */
.topbar__cta {
  background: var(--prism-chartreuse) !important;
  color: var(--chartreuse-text) !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 14px -4px var(--chartreuse-halo) !important;
}
.topbar__cta:hover {
  background: var(--chartreuse-2) !important;
  color: var(--chartreuse-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 22px -4px var(--chartreuse-halo) !important;
}
.topbar__cta svg { color: var(--chartreuse-text); }

/* Sticky-CTA bottom bar - same chartreuse promotion */
.sticky-cta__btn {
  background: var(--prism-chartreuse) !important;
  color: var(--chartreuse-text) !important;
  border-color: transparent !important;
}
.sticky-cta__btn:hover {
  background: var(--chartreuse-2) !important;
  color: var(--chartreuse-text) !important;
}
.sticky-cta__btn svg { color: var(--chartreuse-text); }

/* Outline pills get a chartreuse hover instead of violet (lighter, friendlier) */
.cta--ghost:hover,
.proof-cta__btn:hover,
.contact-cta__btn:hover,
.cta-strip__link:hover {
  background: rgba(216, 224, 74, 0.12) !important;
  border-color: var(--prism-chartreuse) !important;
  color: var(--prism-chartreuse) !important;
}


/* ════════════════════════════════════════════════════════════════════
   PALETTE FUSION · 5-color unified system
   ──────────────────────────────────────────────────────────────────
   Locked palette across the project:
     1. Violet/Indigo  - brand surface + halos (decorative only)
     2. Lavender       - borders, dividers, text accents
     3. Cyan #7be0e5   - analog complementary (kept in prism rims)
     4. Ivory #fffff0  - highlights + neutral
     5. Chartreuse     - primary action + GO accent
   PINK and ROSE are now DROPPED from new applications - kept only on
   the Klarna brand dot (which is an external brand identifier).
   ════════════════════════════════════════════════════════════════════ */

/* Drop pink + rose from the .glass prism rim - keep cyan→lavender→ivory→chartreuse */
.glass::before {
  background: linear-gradient(115deg,
    rgba(123, 224, 229, 0.55) 0%,    /* prism cyan */
    rgba(184, 168, 232, 0.30) 25%,   /* lavender */
    rgba(255, 255, 240, 0.55) 55%,   /* ivory bright */
    rgba(216, 224, 74, 0.32) 78%,    /* chartreuse hint */
    rgba(255, 255, 240, 0.45) 100%   /* ivory tail */
  ) !important;
}

/* Compare NoxBuild value gradient - silver→lavender→ivory→chartreuse-tip */
.cmp__nox-value {
  background: linear-gradient(180deg,
    var(--silver) 0%,
    #c2b8ec 45%,
    var(--prism-ivory) 80%,
    rgba(216, 224, 74, 0.85) 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Proof-CTA counter - ivory→chartreuse */
.proof-cta__num {
  background: linear-gradient(180deg,
    var(--silver) 0%,
    var(--prism-ivory) 60%,
    rgba(216, 224, 74, 0.85) 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Bundle-anchor heading - ivory→chartreuse */
.bundle-anchor__h {
  background: linear-gradient(180deg,
    var(--silver) 0%,
    var(--prism-ivory) 60%,
    rgba(216, 224, 74, 0.65) 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Hero brand wordmark italic */
.hero__brand em {
  background: linear-gradient(180deg,
    var(--silver),
    var(--prism-ivory) 70%,
    rgba(216, 224, 74, 0.5) 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Commit-CTA heading "72 hodín" - chartreuse-tinted */
.commit-cta__h em {
  background: linear-gradient(90deg,
    var(--prism-chartreuse),
    rgba(216, 224, 74, 0.85)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Contact-CTA italic - soft chartreuse tint */
.contact-cta__h em {
  color: rgba(216, 224, 74, 0.85) !important;
}

/* All section-headline `<em>` highlights - silver→ivory→chartreuse */
.display em,
.section__head h2 em {
  background: linear-gradient(180deg,
    var(--silver) 0%,
    var(--prism-ivory) 50%,
    rgba(216, 224, 74, 0.70) 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Start-card "svojej firmy" italic - SAME prismatic chromatic flow as the
   liquid-btn (Hero / Bundle CTAs). Animated linear gradient using the
   uilayouts palette (electric blues + soft lavenders + whites) with a
   visible CHARTREUSE highlight stop, drifting across the text like the
   button's SVG-layered flow. */
.start-card__h em {
  background: linear-gradient(115deg,
    #4743EF 0%,        /* violet-blue */
    #7D7BF4 10%,       /* soft lavender */
    #B6BAF6 22%,       /* soft lavender lighter */
    #FFFFFF 32%,       /* white spec */
    #D8E04A 42%,       /* chartreuse highlight */
    #FFFFFF 52%,       /* white spec */
    #B8A8E8 64%,       /* lavender */
    #7558E0 76%,       /* violet-2 */
    #1E10C5 88%,       /* electric blue */
    #4743EF 100%       /* violet-blue (loop) */
  ) !important;
  background-size: 320% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: svojejFirmyFlow 14s ease-in-out infinite !important;
  filter:
    drop-shadow(0 0 24px rgba(216, 224, 74, 0.30))
    drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55)) !important;
  text-shadow: none !important;
}

@keyframes svojejFirmyFlow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .start-card__h em {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}

/* Same hardening on the rest of the start-card heading so the whole
   line reads consistently against the alchemy bg. */
.start-card__h {
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.65),
    0 3px 22px rgba(0, 0, 0, 0.55) !important;
}
.start-card__sub {
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.75),
    0 2px 14px rgba(0, 0, 0, 0.55);
}

/* ── TIER 2 · Lavender outline + glass bg ──
   .cta--ghost (Štart/Komplet/E-shop tiers), .proof-cta__btn,
   .contact-cta__btn - all unified to same outline alpha + hover bg */
.cta--ghost,
.proof-cta__btn,
.contact-cta__btn,
.docs-pagination__link {
  border-color: var(--cta-outline) !important;
}
.cta--ghost:hover,
.proof-cta__btn:hover,
.contact-cta__btn:hover {
  border-color: var(--cta-outline-strong) !important;
  background: var(--violet-hover) !important;
}

/* ── TIER 3 · Light inline pills ──
   .cta-strip__link, .topbar__cta, .sticky-cta__btn - softer outline */
.cta-strip__link {
  border-color: var(--cta-outline-soft) !important;
}
.cta-strip__link:hover {
  border-color: var(--cta-outline) !important;
  background: var(--violet-hover) !important;
}

/* ── Sticky-CTA hover unification ── */
.sticky-cta__btn:hover {
  background: var(--violet-hover);
}

/* ── Hover halo intensity - all violet-glowing CTAs get same shadow scale */
.cta--violet:hover,
.commit-cta__btn:hover,
.cta-strip__link:hover,
.proof-cta__btn:hover,
.contact-cta__btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 12px 30px -8px var(--violet-glow);
}


/* ════════════════════════════════════════════════════════════════════
   CHARTREUSE · UNIFIED ACCENT ACROSS ALL CTAs
   ──────────────────────────────────────────────────────────────────
   Promotes the chartreuse pulsing-dot marker (.cmp__nox-mark) from the
   compare component to a reusable site-wide pattern via .accent-dot.
   Applied to every CTA's eyebrow line so the page reads as a single
   chartreuse trust language.
   ════════════════════════════════════════════════════════════════════ */
.accent-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  font-size: 0;
  background: var(--prism-chartreuse);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    0 0 0 2px rgba(216, 224, 74, 0.18),
    0 0 10px var(--chartreuse-glow);
  animation: cmpDotPulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .accent-dot { animation: none; } }


/* ─── 1. CTA-STRIP · chartreuse-tinted eyebrow ────────────────────── */
.cta-strip__eyebrow {
  /* keep the existing styling but add chartreuse hint via tiny ::before dot */
  position: relative;
}
.cta-strip__link::after {
  /* subtle chartreuse glow at bottom-edge on hover */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 60%, rgba(216, 224, 74, 0.10));
  opacity: 0;
  transition: opacity .35s var(--e1);
  pointer-events: none;
  z-index: 0;
}
.cta-strip__link:hover::after { opacity: 1; }


/* ─── 2. COMMIT-CTA · chartreuse marker on eyebrow ────────────────── */
.commit-cta__eyebrow {
  /* the .num span is the ↳ glyph; we use the existing pattern but recolor */
}
.commit-cta__eyebrow .num {
  color: var(--prism-chartreuse) !important;
  text-shadow: 0 0 12px var(--chartreuse-glow);
}


/* ─── 3. PROOF-CTA · chartreuse "+" in counter + chartreuse top accent */
.proof-cta__num em {
  background: linear-gradient(180deg, var(--prism-chartreuse), rgba(216, 224, 74, 0.7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px var(--chartreuse-glow);
}
.proof-cta__inner {
  position: relative;
}
.proof-cta__inner > .accent-strip {
  /* optional decorative top chartreuse bar - toggle via markup if desired */
}
/* Add a top chartreuse hairline marker to the .glass card */
.proof-cta__inner::before {
  /* This conflicts with .glass::before (prism rim). Skip - already covered by glass. */
}


/* ─── 4. CONTACT-CTA · chartreuse marker on eyebrow ───────────────── */
.contact-cta__eyebrow .num {
  color: var(--prism-chartreuse) !important;
  text-shadow: 0 0 12px var(--chartreuse-glow);
}


/* ════════════════════════════════════════════════════════════════════
   TRUST RIBBON · slim horizontal divider between sections with
   4 chartreuse-bulleted trust signals. Sits between sections as a
   visual + semantic break. Two instances per page (different angles).
   ════════════════════════════════════════════════════════════════════ */
.trust-ribbon {
  padding: 22px var(--sec-x);
  display: flex;
  justify-content: center;
}
.trust-ribbon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  max-width: 1100px;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  background: rgba(7, 2, 15, 0.45);
  border: 1px solid rgba(184, 168, 232, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.trust-ribbon__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t2);
  white-space: nowrap;
}
.trust-ribbon__item .accent-dot {
  width: 7px;
  height: 7px;
  box-shadow:
    0 0 0 2px rgba(216, 224, 74, 0.14),
    0 0 8px var(--chartreuse-glow);
  animation: none;            /* static dots inside ribbons - less visual noise */
}
.trust-ribbon__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(184, 168, 232, 0.35);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .trust-ribbon { padding: 18px var(--sec-x); }
  .trust-ribbon__inner {
    gap: 10px 18px;
    padding: 14px 20px;
    border-radius: var(--r-card);
  }
  .trust-ribbon__item { font-size: 10.5px; letter-spacing: 0.12em; }
  .trust-ribbon__sep { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   COMPARE PILL PICKER · MOBILE FIX
   ──────────────────────────────────────────────────────────────────
   Three pills (Cena & čas / Servis / Vlastníctvo) were overflowing the
   capsule because of horizontal scroll-snap and oversized padding. With
   only 3 options the cleanest fix is: equal-width grid, no scroll, no
   snap. Pills become identical-width segments that fill the capsule.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cmp__picker {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible !important;
    scroll-snap-type: none !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 2px;
    padding: 4px;
  }
  .cmp__pill {
    scroll-snap-align: none !important;
    flex-shrink: 1;
    padding: 9px 6px;
    font-size: 12.5px;
    min-height: 40px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}


/* ════════════════════════════════════════════════════════════════════
   LIQUID GLASS · DEPTH + EDGE POLISH PASS (Apple iOS 26 Liquid Glass)
   ──────────────────────────────────────────────────────────────────
   Layers added to .glass - all static CSS, zero animation cost:
   1. Stronger top-spec hairline (the gloss arc)
   2. Brighter prismatic rim with more saturated cyan→ivory→chartreuse
   3. Side-edge ambient (subtle warmth on right edge, cool on left)
   4. Deeper bottom emboss for surface "into the page" feel
   5. Wider lavender ambient ring (depth in the air around the card)
   ════════════════════════════════════════════════════════════════════ */
.glass {
  box-shadow:
    inset 0 1.75px 0 rgba(255, 255, 255, 0.42),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.65),
    inset 1px 0 0 rgba(123, 224, 229, 0.10),
    inset -1px 0 0 rgba(216, 224, 74, 0.10),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.45),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.65),
    0 1px 1px rgba(0, 0, 0, 0.22),
    0 14px 36px -12px rgba(0, 0, 0, 0.55),
    0 28px 70px -22px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(184, 168, 232, 0.10),
    0 0 32px -8px rgba(184, 168, 232, 0.18) !important;
}

/* Stronger prismatic rim - cyan → lavender → white → chartreuse → ivory */
.glass::before {
  background: linear-gradient(115deg,
    rgba(123, 224, 229, 0.65) 0%,
    rgba(184, 168, 232, 0.32) 22%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(216, 224, 74, 0.32) 72%,
    rgba(255, 255, 240, 0.55) 100%
  ) !important;
  opacity: 1 !important;
  padding: 1.5px !important;
}

/* Mouse-tracked specular - slightly brighter highlight follows cursor */
.glass::after {
  background: radial-gradient(
    480px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.18) 0%,
    rgba(243, 243, 251, 0.06) 24%,
    transparent 50%
  ) !important;
}

/* Hover lift - barely there per brand: brighter top spec + deeper drop */
.glass:hover {
  border-color: rgba(184, 168, 232, 0.20);
  box-shadow:
    inset 0 1.75px 0 rgba(255, 255, 255, 0.55),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.78),
    inset 1px 0 0 rgba(123, 224, 229, 0.14),
    inset -1px 0 0 rgba(216, 224, 74, 0.14),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.45),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.65),
    0 1px 1px rgba(0, 0, 0, 0.22),
    0 18px 44px -12px rgba(0, 0, 0, 0.6),
    0 32px 80px -22px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(184, 168, 232, 0.16),
    0 0 40px -8px rgba(184, 168, 232, 0.24) !important;
}
.glass:hover::after { opacity: 1; }

/* These cards stay still on hover - keeps editorial composition stable */
.cmp__stage.glass:hover,
.start-card.glass:hover,
.bundle-anchor.glass:hover {
  transform: none;
}


/* ════════════════════════════════════════════════════════════════════
   SHIMMER · diagonal sweep across chartreuse-fill buttons on hover
   .commit-cta__btn already has its own. Adding to .cta--violet,
   .topbar__cta, .sticky-cta__btn so every chartreuse fill reads live.
   ════════════════════════════════════════════════════════════════════ */
.cta--violet,
.topbar__cta,
.sticky-cta__btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Use ::before for shimmer so the existing prismatic-rim ::after on
   .topbar__cta is preserved. Other buttons get ::before too for parity. */
.cta--violet::before,
.topbar__cta::before,
.sticky-cta__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0.18) 55%,
    transparent 100%);
  transform: translateX(-120%);
  transition: transform .8s var(--soft);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.cta--violet:hover::before,
.topbar__cta:hover::before,
.sticky-cta__btn:hover::before {
  transform: translateX(120%);
}
.cta--violet > *,
.topbar__cta > *,
.sticky-cta__btn > * {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cta--violet::before,
  .topbar__cta::before,
  .sticky-cta__btn::before,
  .commit-cta__btn::before { transition: none; transform: none; }
}


/* ════════════════════════════════════════════════════════════════════
   TRUST-RIBBON · iOS Liquid Glass polish - same rim + insets as .glass
   ════════════════════════════════════════════════════════════════════ */
.trust-ribbon__inner {
  position: relative;
  isolation: isolate;
  background: rgba(7, 2, 15, 0.55);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 1px 1px rgba(0, 0, 0, 0.22),
    0 12px 32px -10px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(184, 168, 232, 0.10),
    0 0 28px -8px rgba(184, 168, 232, 0.20);
}
.trust-ribbon__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  background: linear-gradient(115deg,
    rgba(123, 224, 229, 0.55) 0%,
    rgba(184, 168, 232, 0.28) 25%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(216, 224, 74, 0.28) 72%,
    rgba(255, 255, 240, 0.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}


/* ════════════════════════════════════════════════════════════════════
   OUTLINE PILL POLISH · brighter inner ring on hover for crisp edges
   ════════════════════════════════════════════════════════════════════ */
.cta--ghost,
.proof-cta__btn,
.contact-cta__btn,
.cta-strip__link,
.docs-pagination__link {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}
.cta--ghost:hover,
.proof-cta__btn:hover,
.contact-cta__btn:hover,
.cta-strip__link:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 12px 32px -10px var(--chartreuse-halo);
}


/* ════════════════════════════════════════════════════════════════════
   PERF · GPU compositor hints - only where animations actually run
   ════════════════════════════════════════════════════════════════════ */
.cta--violet,
.commit-cta__btn,
.topbar__cta,
.sticky-cta__btn,
.refract-btn { will-change: auto; }
.cta--violet:hover,
.commit-cta__btn:hover,
.topbar__cta:hover,
.sticky-cta__btn:hover,
.refract-btn:hover { will-change: transform; }


/* ════════════════════════════════════════════════════════════════════
   E-SHOP · custom-quote tier polish (price+, free-quote pill)
   ════════════════════════════════════════════════════════════════════ */
.tier__price-plus {
  font-style: normal;
  font-size: 0.55em;
  font-weight: 600;
  vertical-align: top;
  letter-spacing: -0.02em;
  margin-left: 2px;
  color: var(--prism-chartreuse);
  text-shadow: 0 0 18px var(--chartreuse-glow);
}
.tier--custom .tier__klarna {
  font-style: italic;
  color: var(--t3);
  font-size: 12.5px;
}
.tier__addon--quote {
  background: rgba(216, 224, 74, 0.06);
  border-color: rgba(216, 224, 74, 0.18) !important;
}
.tier__addon--quote em {
  color: var(--prism-chartreuse);
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 11px;
}


/* ════════════════════════════════════════════════════════════════════
   POWERED-BY · Visa + Mastercard sizing (bigger logos)
   ════════════════════════════════════════════════════════════════════ */
.powered-by { gap: 16px 22px; }
.powered-by__brand--stripe svg { height: 32px; }
.powered-by__brand--visa svg { height: 24px; }
.powered-by__brand--mc svg { height: 32px; }
.powered-by__brand--klarna svg { height: 26px; }
.powered-by__brand--apple svg { height: 28px; }
@media (max-width: 480px) {
  .powered-by__brand--stripe svg { height: 24px; }
  .powered-by__brand--visa svg { height: 18px; }
  .powered-by__brand--mc svg { height: 24px; }
  .powered-by__brand--klarna svg { height: 20px; }
  .powered-by__brand--apple svg { height: 22px; }
}


/* ════════════════════════════════════════════════════════════════════
   CONTACT FORM SECTION · real form at the bottom of the page
   ════════════════════════════════════════════════════════════════════ */
.contact-form-section {
  padding: 72px var(--sec-x) 56px;
}
.contact-form-section__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  padding: clamp(36px, 4vw, 56px);
  border-radius: var(--r-card-lg);
}
.contact-form-section__lead .display {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 12px 0 14px;
  line-height: 1.06;
}
.contact-form-section__lead .lede {
  font-size: 15px;
  color: var(--t2);
  max-width: 38ch;
  text-wrap: pretty;
}
.contact-form-section__benefits {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-form-section__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t2);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form__field { display: flex; flex-direction: column; gap: 6px; }
.contact-form__field--full { grid-column: 1 / -1; }
.contact-form__field label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
}
.contact-form__optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--t4);
  margin-left: 4px;
}
.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--cta-outline-soft);
  background: rgba(7, 2, 15, 0.55);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--silver);
  letter-spacing: -0.005em;
  transition: border-color .25s var(--e1), background .25s var(--e1), box-shadow .25s var(--e1);
  resize: vertical;
}
.contact-form__field textarea {
  min-height: 110px;
  font-family: inherit;
  line-height: 1.5;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color: var(--t4); }
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--prism-chartreuse);
  background: rgba(26, 8, 64, 0.42);
  box-shadow: 0 0 0 3px rgba(216, 224, 74, 0.18);
}

.contact-form__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.contact-form__submit {
  width: 100%;
  justify-content: center;
}
.contact-form__note {
  font-size: 13px;
  color: var(--t3);
  text-align: center;
  margin: 0;
}
.contact-form__note a {
  color: var(--prism-chartreuse);
  text-decoration: underline;
  text-decoration-color: rgba(216, 224, 74, 0.45);
  text-underline-offset: 3px;
}
.contact-form__success {
  grid-column: 1 / -1;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--prism-chartreuse);
  background: rgba(216, 224, 74, 0.10);
  color: var(--prism-chartreuse);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
}

@media (max-width: 860px) {
  .contact-form-section__inner { grid-template-columns: 1fr; gap: 32px; }
  .contact-form { grid-template-columns: 1fr; }
}