/* ==========================================================================
   Web-agency template: dark chrome & glass, 3D on scroll.
   Colours arrive as CSS variables from site.json → theme (see partials/head.html):
     --bg, --surface, --text, --muted, --accent (+ -rgb variants, --accent-ink)
   3D:  html.fx3d is set by site.js when effects.scroll_3d is on and the visitor
        does not prefer reduced motion. Without it every element sits flat, so the
        page is complete with JS off. site.js writes per element:
          --e  0→1 as the element enters the screen (eased)
          --x  0→1 as it leaves through the top
          --s  0→1 progress through a pinned section
        --fx (site.json effects.intensity) scales every angle and distance.
   Rules: only transform/opacity animate; no blur/backdrop-filter (phones).
   ========================================================================== */

@font-face { font-family: 'Unbounded'; font-weight: 200 900; font-display: swap; src: url('../fonts/unbounded-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-weight: 200 900; font-display: swap; src: url('../fonts/unbounded-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --f-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --line: rgb(var(--text-rgb) / 0.1);
  --line-strong: rgb(var(--text-rgb) / 0.2);
  --glass: linear-gradient(180deg, rgb(var(--text-rgb) / 0.075), rgb(var(--text-rgb) / 0.02));
  --glass-strong: linear-gradient(180deg, rgb(var(--text-rgb) / 0.12), rgb(var(--text-rgb) / 0.04));
  --chrome: linear-gradient(180deg, #FFFFFF 0%, var(--text) 30%, #8A909C 50%, #D9DDE4 68%, #FFFFFF 86%, var(--accent) 100%);
  --chrome-flat: linear-gradient(135deg, #FFFFFF 0%, #C9CED6 35%, #7E8491 55%, #EEF1F5 75%, var(--accent) 100%);
  --radius: 24px;
  --radius-sm: 14px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --section: clamp(80px, 11vw, 150px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 30px 80px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(var(--text-rgb) / 0.06);
  --glow: 0 0 0 1px rgb(var(--accent-rgb) / 0.35), 0 20px 60px -20px rgb(var(--accent-rgb) / 0.45);
  --header-h: 78px;
  --fx: 1;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--bg); color-scheme: dark; }
body {
  font: 400 17px/1.7 var(--f-body);
  color: var(--text);
  background: transparent;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* ambient light behind everything (cheap: gradients only) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 80% 10%, rgb(var(--accent-rgb) / 0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 70%, rgb(var(--accent-rgb) / 0.06), transparent 70%),
    var(--bg);
}
/* 3D-tilted surfaces can project wider than the screen; clip sideways so phones never zoom out (clip keeps position: sticky working) */
main, .footer { overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
h3, h4 { font-weight: 500; letter-spacing: -0.02em; }
p { text-wrap: pretty; }

/* chrome text: headings get the logo's polished-metal look */
.chrome, .section-head h2, .page-hero h1, .hero h1, .about h2, .faq h2, .contact h2, .message h1, .split h2, .facts strong, .proof strong, .plan__price, .step__num {
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section); }
/* Jump targets: land with the heading just under the menu bar, not at the top of the empty padding band.
   (html scroll-padding = header + 16px; this pulls the stop point down by the section padding, minus 8px.)
   Works for the browser's own #anchor jumps too, so it holds even where scripts are restricted. */
.section[id] { scroll-margin-top: calc(8px - var(--section)); }
.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; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; transition: transform .2s var(--ease); }
.skip:focus { transform: translateY(76px); }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 12px/1 var(--f-body); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }

.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--muted); max-width: 58ch; }
mark, .highlight { background: none; color: var(--text); -webkit-text-fill-color: var(--text); text-shadow: 0 0 28px rgb(var(--accent-rgb) / .55); }

.section-head { display: grid; gap: 20px 48px; margin-bottom: clamp(44px, 6vw, 80px); }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.9rem); max-width: 18ch; padding-bottom: .06em; }
@media (min-width: 960px) {
  .section-head--split { grid-template-columns: 1.3fr 1fr; align-items: end; }
  .section-head--split .eyebrow { grid-column: 1 / -1; }
}

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 14px 28px; border-radius: 999px; border: 1px solid transparent;
  font: 700 15.5px/1.1 var(--f-body); letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .icon--arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--accent, .btn--primary { background: var(--chrome-flat); color: #0A0B0E; box-shadow: 0 10px 30px -12px rgb(var(--accent-rgb) / .6), inset 0 1px 0 rgb(255 255 255 / .8); }
.btn--accent:hover, .btn--primary:hover { box-shadow: 0 18px 44px -12px rgb(var(--accent-rgb) / .8), inset 0 1px 0 rgb(255 255 255 / .8); }
.btn--ghost { background: rgb(var(--text-rgb) / .04); color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: rgb(var(--accent-rgb) / .7); background: rgb(var(--accent-rgb) / .08); }
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: 14.5px; }
.btn--block { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.link-arrow .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover .icon { transform: translate(3px, -3px); }

/* ---------- header ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .35s ease, box-shadow .35s ease; }
.header.is-scrolled { background: rgb(var(--bg-rgb) / .88); box-shadow: 0 1px 0 var(--line); }
.header__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 34px; width: auto; }
.logo__text { font: 700 24px/1 var(--f-display); letter-spacing: -0.02em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a { position: relative; font-weight: 600; font-size: 14.5px; color: var(--muted); text-decoration: none; padding-block: 8px; transition: color .2s ease; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover, .nav a:focus-visible { color: var(--text); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.header__cta { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgb(var(--text-rgb) / .04); cursor: pointer; place-items: center; align-content: center; }
.menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease); }
.menu-btn span + span { margin-top: 6px; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.mobile-nav { position: fixed; inset: var(--header-h) 0 0; z-index: 49; background: var(--bg); padding: 32px var(--gutter) 40px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s; }
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav > a:not(.btn) { font: 600 clamp(26px, 7.5vw, 42px)/1.2 var(--f-display); letter-spacing: -0.03em; text-decoration: none; padding-block: 10px; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: 28px; }
.mobile-nav__meta { margin-top: auto; padding-top: 28px; display: grid; gap: 6px; color: var(--muted); font-weight: 600; }
.mobile-nav__meta a { text-decoration: none; font-size: 16px; }
body.menu-open { overflow: hidden; }
@media (max-width: 1060px) { .nav, .header__cta { display: none; } .menu-btn { display: grid; } }

/* ---------- WebGL scene (scene.js) ---------- */
.scene { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.scene.is-ready { opacity: var(--scene-o, 1); transition: opacity .25s linear; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-content: center; padding-block: calc(var(--header-h) + 32px) 40px; overflow: clip; }
.hero__inner { position: relative; text-align: center; display: grid; justify-items: center; }
.hero .eyebrow { margin-bottom: 22px; }
.hero h1 { font-size: clamp(1.7rem, 3.9vw, 3.5rem); max-width: 22ch; line-height: 1.1; padding-bottom: .08em; }
.hero .lead { margin: 22px auto 0; text-align: center; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.scroll-hint { margin: clamp(36px, 6vh, 64px) auto 0; display: grid; justify-items: center; gap: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.scroll-hint i { width: 1px; height: 40px; background: linear-gradient(var(--accent), transparent); transform-origin: top; animation: hint 2.2s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; perspective: 1200px; }
.proof > div { padding: 26px 26px 24px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .08), 0 0 0 1px var(--line); }
.proof strong { display: block; font: 600 clamp(26px, 3vw, 40px)/1.05 var(--f-display); letter-spacing: -0.03em; padding-bottom: .06em; }
.proof span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
@media (max-width: 640px) { .proof { grid-template-columns: 1fr; } .hero .eyebrow::before { display: none; } }

/* ---------- device mockups ---------- */
.browser { position: relative; border-radius: 14px; background: #101116; box-shadow: var(--shadow); overflow: hidden; }
.browser::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(var(--text-rgb) / .1), inset 0 1px 0 rgb(var(--text-rgb) / .14); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding-inline: 14px; background: #15161C; border-bottom: 1px solid rgb(var(--text-rgb) / .07); }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--text-rgb) / .16); }
.browser__bar i:first-child { background: var(--p, var(--accent)); }
.browser__url { margin-left: 14px; flex: 1; max-width: 260px; height: 20px; border-radius: 999px; background: rgb(var(--text-rgb) / .06); font: 600 11px/20px var(--f-body); color: var(--muted); padding-inline: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.phone { position: absolute; left: 0; bottom: 0; width: 30%; border-radius: 26px; padding: 6px; background: linear-gradient(145deg, #3a3d46, #0c0d10 40%, #2a2c33); box-shadow: var(--shadow); }
.phone img { border-radius: 20px; width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }

/* ---------- marquee (tilted band) ---------- */
.marquee-wrap { perspective: 900px; padding-block: 48px; overflow: clip; }
.marquee { transform: rotateX(calc(18deg * var(--fx))) rotateZ(-2.5deg) scale(1.08); background: var(--glass-strong); border-block: 1px solid var(--line-strong); padding-block: 22px; overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee ul { display: flex; list-style: none; padding: 0; }
.marquee li { display: flex; align-items: center; gap: 34px; padding-right: 34px; font: 500 clamp(22px, 3vw, 42px)/1.1 var(--f-display); letter-spacing: -0.02em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgb(var(--text-rgb) / .55); }
.marquee li:nth-child(odd) { color: var(--text); -webkit-text-stroke: 0; }
.marquee li::after { content: ''; width: .3em; height: .3em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- work: pinned 3D deck ---------- */
.work3d__track { position: relative; }
.work3d__stage { display: grid; gap: 72px; }
.work3d__card { position: relative; display: block; text-decoration: none; }
.work3d__media { position: relative; padding: 0 8% 8% 0; }
.work3d__media .phone { left: auto; right: 0; width: 22%; transform: rotate(4deg); }
.work3d__caption { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 22px; }
.work3d__caption h3 { font-size: clamp(22px, 2.4vw, 32px); }
.work-card__meta { margin-top: 8px; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.work-card__go { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: background-color .25s ease, color .25s ease, transform .35s var(--ease), border-color .25s ease; }
.work-card__go .icon { width: 20px; height: 20px; }
.work3d__card:hover .work-card__go, .work-card:hover .work-card__go { background: var(--text); color: var(--bg); border-color: var(--text); transform: rotate(-45deg); }
.work3d__card p, .work-card p { margin-top: 10px; color: var(--muted); max-width: 60ch; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; list-style: none; padding: 0; }
.tags li { font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgb(var(--text-rgb) / .05); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.work3d__cta { display: grid; place-content: center; gap: 18px; text-align: center; min-height: 380px; padding: 48px 32px; border-radius: var(--radius); background: radial-gradient(ellipse at 50% 0%, rgb(var(--accent-rgb) / .18), transparent 70%), var(--glass); box-shadow: inset 0 0 0 1px var(--line-strong); }
.work3d__cta h3 { font-size: clamp(24px, 3vw, 40px); max-width: 16ch; margin-inline: auto; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.work3d__cta p { color: var(--muted); max-width: 44ch; margin-inline: auto; }
.work3d__cta .btn { justify-self: center; }
.work3d__progress { display: none; }

@media (min-width: 900px) {
  .fx3d .work3d__track { height: calc(var(--n, 3) * 120vh + 40vh); overflow: clip; }   /* longer: each card rests at the front (see site.js HOLD) */
  /* flat stacking (no preserve-3d): cards are ordered by z-index from site.js, so hit-testing follows what you see */
  .fx3d .work3d__stage { position: sticky; top: 0; height: 100vh; display: block; perspective: 1600px; }
  .fx3d .work3d__card {
    --t: calc(var(--i) - var(--deck, 0));   /* --deck = deck position from site.js, with resting points */
    position: absolute; left: 50%; top: calc(50% + var(--header-h) / 2); width: min(860px, 62vw, calc((100vh - var(--header-h) - 250px) * 1.42));   /* always fits under the menu */
    transform:
      translate(-50%, -50%)
      translate3d(calc(var(--side, 1) * var(--t) * 17vw * var(--fx)), calc(var(--t) * -6vh), calc(var(--t) * -1100px * var(--fx)))
      rotateY(calc(var(--side, 1) * var(--t) * -18deg * var(--fx)))
      rotateX(calc(var(--t) * 6deg * var(--fx)));
    opacity: min(clamp(0, calc(1 + var(--t) * 2.4), 1), clamp(0, calc(1.7 - var(--t) * 0.6), 1));
    pointer-events: none;
    will-change: transform, opacity;
  }
  .fx3d .work3d__card:nth-child(even) { --side: -1; }
  .fx3d .work3d__card.is-active { pointer-events: auto; }
  .fx3d .work3d__caption, .fx3d .work3d__card > p, .fx3d .work3d__card .tags { opacity: clamp(0, calc(1 - var(--t) * var(--t) * 8), 1); }
  .fx3d .work3d__progress { display: block; position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); width: 180px; height: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden; }
  .fx3d .work3d__progress i { display: block; height: 100%; background: var(--chrome-flat); transform-origin: left; transform: scaleX(var(--s, 0)); }
  .fx3d .work3d .section-head { margin-bottom: 0; }
}

/* case-study / niche page reuse a flat card */
.work-grid { display: grid; gap: 48px 32px; }
@media (min-width: 860px) { .work-grid { grid-template-columns: 1fr 1fr; } }
.work-card { position: relative; display: block; text-decoration: none; }
.work-card__media { position: relative; padding: 0 7% 7% 0; }
.work-card .phone { left: auto; right: 0; width: 22%; transform: rotate(4deg); }
.work-card__body { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; }
.work-card h3 { font-size: clamp(22px, 2.2vw, 30px); }

/* ---------- services (bento with tilt + glare) ---------- */
.bento { display: grid; gap: 16px; perspective: 1400px; }
@media (min-width: 700px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1061px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento > :nth-child(6n + 1), .bento > :nth-child(6n + 6) { grid-column: span 2; }
}
.tile { position: relative; height: 100%; min-height: 270px; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .08), 0 0 0 1px var(--line); overflow: hidden; }
.tile::after, .plan::after, .niche-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgb(var(--accent-rgb) / .18), transparent 45%); opacity: var(--glare, 0); transition: opacity .3s ease; }
.tile__icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 30px -8px rgb(var(--accent-rgb) / .5); color: var(--accent); }
.tile__icon .icon { width: 24px; height: 24px; }
.tile__num { position: absolute; top: 28px; right: 30px; font: 500 13px/1 var(--f-display); color: var(--muted); }
.tile h3 { font-size: clamp(18px, 1.6vw, 22px); margin-top: auto; padding-top: 44px; }
.tile p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.bento > :nth-child(6n + 1) .tile, .bento > :nth-child(6n + 6) .tile { background: radial-gradient(ellipse at 100% 0%, rgb(var(--accent-rgb) / .2), transparent 60%), var(--glass-strong); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .14), 0 0 0 1px var(--line-strong); }

/* ---------- compare ---------- */
.compare { border-radius: var(--radius); overflow: hidden; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.compare__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid var(--line); }
.compare__row:last-child { border-bottom: 0; }
.compare__row > * { min-width: 0; padding: 22px 24px; display: flex; gap: 12px; align-items: center; }
.compare__row > :first-child { font-weight: 700; }
.compare__head > * { font: 500 15px/1.2 var(--f-display); letter-spacing: -0.01em; }
.compare__us { font-weight: 700; background: rgb(var(--accent-rgb) / .07); box-shadow: inset 1px 0 0 rgb(var(--accent-rgb) / .3), inset -1px 0 0 rgb(var(--accent-rgb) / .3); }
.compare__them { color: var(--muted); }
.compare__us .icon { color: var(--accent); width: 20px; height: 20px; }
.compare__them .icon { width: 18px; height: 18px; opacity: .5; }
@media (max-width: 720px) {
  .compare__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compare__row > :first-child { grid-column: 1 / -1; padding: 18px 18px 6px; }
  .compare__row > * { padding: 12px 16px; font-size: 14.5px; }
  .compare__head > :first-child { display: none; }
}

/* ---------- process ---------- */
.steps { display: grid; gap: 16px; list-style: none; padding: 0; perspective: 1200px; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1061px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 30px 26px 28px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .08), 0 0 0 1px var(--line); }
.step__num { font: 600 clamp(52px, 5.4vw, 76px)/.95 var(--f-display); letter-spacing: -0.05em; padding-bottom: .05em; }
.step h3 { font-size: 19px; margin-top: 26px; }
.step p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.chip { display: inline-block; margin-top: 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; color: var(--accent); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .35); }

/* ---------- pricing ---------- */
.plans { display: grid; gap: 16px; align-items: stretch; perspective: 1400px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(28px, 3vw, 38px); border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .08), 0 0 0 1px var(--line); }
.plan--featured { background: radial-gradient(ellipse at 50% -10%, rgb(var(--accent-rgb) / .22), transparent 60%), var(--glass-strong); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .18), var(--glow); }
.plan__badge { position: absolute; top: -13px; left: 28px; background: var(--chrome-flat); color: #0A0B0E; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.plan h3 { font-size: 21px; }
.plan__price { margin-top: 22px; font: 600 clamp(28px, 2.7vw, 38px)/1.05 var(--f-display); letter-spacing: -0.04em; padding-bottom: .06em; }
.plan__price small { display: block; margin-top: 8px; font: 600 13.5px/1.3 var(--f-body); letter-spacing: 0; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.plan__monthly { margin-top: 10px; font-weight: 800; color: var(--accent); }
.plan__text { margin-top: 18px; color: var(--muted); font-size: 15.5px; }
.plan ul { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 12px; font-size: 15px; }
.plan li { display: flex; gap: 12px; }
.plan li .icon { width: 19px; height: 19px; margin-top: 3px; color: var(--accent); }
.plan .btn { margin-top: auto; }
.note { margin-top: 28px; font-size: 13.5px; color: var(--muted); max-width: 80ch; }

/* ---------- niches ---------- */
.niche-grid { display: grid; gap: 12px; perspective: 1200px; }
@media (min-width: 640px) { .niche-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1061px) { .niche-grid { grid-template-columns: repeat(4, 1fr); } }
.niche-link { position: relative; display: flex; flex-direction: column; gap: 44px; height: 100%; padding: 26px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .08), 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .3s ease; }
.niche-link__top { display: flex; justify-content: space-between; align-items: center; color: var(--accent); }
.niche-link .icon { width: 28px; height: 28px; }
.niche-link .icon--arrow { width: 22px; height: 22px; color: var(--muted); transition: transform .35s var(--ease), color .2s ease; }
.niche-link strong { font: 500 19px/1.25 var(--f-display); letter-spacing: -0.02em; }
.niche-link:hover { box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .12), var(--glow); }
.niche-link:hover .icon--arrow { transform: rotate(-45deg); color: var(--text); }

/* ---------- testimonials ---------- */
.quotes { display: grid; gap: 16px; }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
.quote { padding: 32px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.quote blockquote { font: 500 19px/1.5 var(--f-body); }
.quote figcaption { margin-top: 20px; font-size: 14.5px; color: var(--muted); }
.quote figcaption strong { color: var(--text); display: block; }

/* ---------- about ---------- */
.about { display: grid; gap: 40px; }
@media (min-width: 960px) { .about { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } }
.about h2 { font-size: clamp(2rem, 4.4vw, 3.9rem); margin-top: 20px; padding-bottom: .06em; }
.prose-lg p { font-size: clamp(17px, 1.4vw, 19px); color: var(--muted); }
.prose-lg p + p { margin-top: 18px; }
.checks { list-style: none; padding: 0; margin-top: 32px; display: grid; gap: 12px; }
.checks li { display: flex; gap: 14px; font-weight: 700; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.checks .icon { width: 21px; height: 21px; color: var(--accent); margin-top: 2px; }

/* ---------- faq ---------- */
.faq { display: grid; gap: 40px; }
@media (min-width: 960px) { .faq { grid-template-columns: .8fr 1.2fr; gap: 80px; } .faq__head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } }
.faq h2 { font-size: clamp(2rem, 4.4vw, 3.9rem); margin-top: 20px; padding-bottom: .06em; }
.faq__list { display: grid; gap: 10px; }
.faq details { border-radius: var(--radius-sm); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s ease; }
.faq details[open] { box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .35); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 24px; cursor: pointer; font: 500 clamp(15.5px, 1.3vw, 18px)/1.4 var(--f-display); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform .35s var(--ease), background-color .25s ease; }
.plus::before, .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] .plus { transform: rotate(45deg); background: var(--text); color: var(--bg); }
.faq details p { padding: 0 64px 24px 24px; color: var(--muted); }

/* ---------- contact ---------- */
.contact { overflow: clip; }
.contact::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 70% 60%, rgb(var(--accent-rgb) / .12), transparent 70%); }
.contact__grid { display: grid; gap: 48px; }
@media (min-width: 1000px) { .contact__grid { grid-template-columns: 1fr 1.05fr; gap: 72px; } }
.contact h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); margin-block: 20px 24px; padding-bottom: .06em; }
.direct { margin-top: 40px; display: grid; gap: 6px; }
.direct a { font: 500 clamp(19px, 2.1vw, 27px)/1.4 var(--f-display); letter-spacing: -0.02em; text-decoration: none; width: fit-content; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 1px; transition: background-size .35s var(--ease); }
.direct a:hover { background-size: 100% 1px; }
.direct p { margin-top: 18px; color: var(--muted); font-size: 14.5px; }

.form-card { position: relative; border-radius: var(--radius); padding: clamp(24px, 3.4vw, 40px); background: linear-gradient(180deg, #13141A, #0B0C10); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .12), 0 0 0 1px var(--line-strong), 0 50px 100px -40px rgb(0 0 0 / .9); }
.form-card h3 { font-size: 22px; }
.form-card > p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.form { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 560px) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; color: var(--muted); }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: rgb(var(--text-rgb) / .04); color: var(--text); transition: border-color .2s ease, box-shadow .2s ease;
}
.field ::placeholder { color: rgb(var(--text-rgb) / .35); }
.field textarea { min-height: 110px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23aab' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field select option { background: #111217; color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgb(var(--accent-rgb) / .8); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .15); }
.field [aria-invalid="true"] { border-color: #FF7A7A; }
.field__error { display: block; color: #FF8C8C; font-size: 13px; font-weight: 700; margin-top: 5px; }
.field__error:empty { display: none; }
.consent, .field label.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); flex: none; }
.consent a { font-weight: 700; color: var(--text); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-size: 14px; font-weight: 700; margin-top: 10px; }
.form__status:empty { display: none; }
.form__status.is-error { color: #FF8C8C; }
.form__note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.form-done { display: none; text-align: center; padding: 48px 8px; }
.form-done .icon { width: 64px; height: 64px; margin: 0 auto 20px; color: var(--accent); }
.form-done h3 { font-size: 24px; }
.form-done p { margin-top: 10px; color: var(--muted); }
.form-card.is-done .form, .form-card.is-done > h3, .form-card.is-done > p { display: none; }
.form-card.is-done .form-done { display: block; }

/* ---------- footer ---------- */
.footer { position: relative; padding-top: clamp(64px, 8vw, 96px); color: var(--muted); border-top: 1px solid var(--line); overflow: clip; }
.footer__grid { display: grid; gap: 40px; padding-bottom: 48px; }
@media (min-width: 860px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer .logo img { height: 30px; }
.footer__blurb { margin-top: 18px; max-width: 34ch; font-size: 15px; }
.footer h4 { font: 600 11.5px/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--text); margin-bottom: 18px; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.footer a { text-decoration: none; transition: color .2s ease; }
.footer a:hover { color: var(--text); }
.footer__big { perspective: 900px; padding-block: 8px 24px; }
.footer__big img { width: 100%; max-width: 1100px; margin-inline: auto; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px 32px; font-size: 13.5px; border-top: 1px solid var(--line); }

/* ---------- dock (sticky CTA) ---------- */
.dock { position: fixed; z-index: 40; right: 24px; bottom: 24px; display: flex; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s; }
.dock.is-visible { opacity: 1; visibility: visible; transform: none; }
.dock__call { display: none; }
@media (max-width: 700px) {
  .dock { left: 12px; right: 12px; bottom: 12px; padding: 7px; background: rgb(18 19 24 / .96); border-radius: 999px; box-shadow: 0 0 0 1px var(--line-strong), 0 20px 50px -10px rgb(0 0 0 / .8); }
  .dock .btn { flex: 1; min-height: 48px; padding-inline: 14px; font-size: 15px; }
  .dock__call { display: inline-flex; }
}

/* ---------- consent ---------- */
.consent-bar { position: fixed; z-index: 60; left: 16px; bottom: 16px; max-width: 420px; padding: 22px; border-radius: var(--radius); background: #111217; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow); font-size: 14px; color: var(--muted); }
.consent-bar[hidden] { display: none; }
.consent-bar p a { font-weight: 700; color: var(--text); }
.consent-bar__actions { display: flex; gap: 8px; margin-top: 16px; }
.consent-bar .btn { flex: 1; min-height: 44px; font-size: 14px; padding: 10px 14px; }

/* ---------- sub pages ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 8px; opacity: .4; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.page-hero { position: relative; padding-block: calc(var(--header-h) + clamp(40px, 6vw, 80px)) clamp(40px, 6vw, 72px); }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 4.4rem); line-height: 1.04; margin-block: 24px; max-width: 18ch; padding-bottom: .06em; }
.page-hero .lead { margin-top: 8px; }
.page-hero .hero__actions { justify-content: flex-start; }
.page-hero__icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; margin-top: 28px; color: var(--accent); background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 40px -8px rgb(var(--accent-rgb) / .6); }
.page-hero__icon .icon { width: 30px; height: 30px; }

.meta-table { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 40px; border-radius: var(--radius-sm); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
@media (min-width: 760px) { .meta-table { grid-template-columns: repeat(4, 1fr); } }
.meta-table div { padding: 18px 20px; box-shadow: inset -1px -1px 0 var(--line); }
.meta-table dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
.meta-table dd { margin-top: 6px; font-weight: 700; }

.case-cover { position: relative; padding: 0 0 8% 0; }
.case-cover .phone { left: auto; right: 4%; width: 18%; transform: rotate(3deg); }
.case-stage { perspective: 1600px; }

.split { display: grid; gap: 32px; }
@media (min-width: 960px) { .split { grid-template-columns: .8fr 1.2fr; gap: 80px; } }
.split h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); margin-top: 20px; padding-bottom: .06em; }
.split .big { font: 400 clamp(20px, 2vw, 27px)/1.5 var(--f-body); letter-spacing: -0.01em; }

.solutions { display: grid; gap: 16px; list-style: none; padding: 0; perspective: 1400px; }
@media (min-width: 760px) { .solutions { grid-template-columns: 1fr 1fr; } }
.solutions li { padding: clamp(24px, 3vw, 34px); border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .08), 0 0 0 1px var(--line); }
.solutions span { font: 500 14px/1 var(--f-display); color: var(--accent); }
.solutions h3 { font-size: 20px; margin-top: 18px; }
.solutions p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }

.facts { display: grid; gap: 12px; perspective: 1200px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts div { padding: 28px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.facts strong { display: block; font: 600 clamp(44px, 5.4vw, 76px)/.95 var(--f-display); letter-spacing: -0.05em; padding-bottom: .05em; }
.facts span { display: block; margin-top: 12px; color: var(--muted); font-weight: 600; }

.gallery { display: grid; gap: 24px; perspective: 1600px; }
@media (min-width: 860px) { .gallery { grid-template-columns: 1fr 1fr; } }

.pager { display: grid; gap: 12px; }
@media (min-width: 760px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { display: block; padding: 28px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .3s ease; }
.pager a:hover { box-shadow: inset 0 0 0 1px var(--line), var(--glow); }
.pager small { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
.pager strong { display: block; margin-top: 12px; font: 500 22px/1.2 var(--f-display); letter-spacing: -0.02em; }
.pager a:last-child { text-align: right; }

.pains { display: grid; gap: 16px; list-style: none; padding: 0; perspective: 1400px; }
@media (min-width: 860px) { .pains { grid-template-columns: repeat(3, 1fr); } }
.pains li { padding: 28px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .08), 0 0 0 1px var(--line); }
.pains h3 { font-size: 19px; }
.pains p { margin-top: 10px; color: var(--muted); }
.includes { list-style: none; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .includes { grid-template-columns: 1fr 1fr; } }
.includes li { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
.includes .icon { width: 21px; height: 21px; color: var(--accent); margin-top: 2px; }

.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(18px, 1.7vw, 22px); margin-top: 48px; }
.prose p, .prose ul { margin-top: 14px; color: rgb(var(--text-rgb) / .78); }
.prose a { font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose dl { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 14px 32px; margin-top: 24px; padding: 28px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.prose dt { font-weight: 700; }
.prose dd { margin: 0; color: rgb(var(--text-rgb) / .78); }
.updated { color: var(--muted); font-size: 14.5px; margin-top: 8px; }

.message { min-height: 80vh; display: grid; align-content: center; padding-block: calc(var(--header-h) + 60px) 80px; }
.message h1 { font-size: clamp(2.4rem, 7vw, 6rem); line-height: 1; max-width: 13ch; margin-top: 20px; padding-bottom: .06em; }
.message p { margin-block: 24px 36px; }

.bg-surface { background: linear-gradient(180deg, transparent, rgb(var(--text-rgb) / .025) 20%, rgb(var(--text-rgb) / .025) 80%, transparent); }

/* ==========================================================================
   3D ON SCROLL (only with html.fx3d)
   ========================================================================== */
.fx3d [data-3d] { will-change: transform, opacity; }

/* rise: comes up out of the depth, tipped back, and straightens */
.fx3d [data-3d="rise"] {
  transform: translate3d(0, calc((1 - var(--e, 1)) * 110px * var(--fx)), calc((1 - var(--e, 1)) * -260px * var(--fx))) rotateX(calc((1 - var(--e, 1)) * 32deg * var(--fx)));
  opacity: calc(var(--e, 1) * 1.25 - .25);
  transform-origin: 50% 100%;
}
/* flip: hinged at the top edge, swings down into place */
.fx3d [data-3d="flip"] {
  transform: rotateX(calc((1 - var(--e, 1)) * -75deg * var(--fx))) translateZ(calc((1 - var(--e, 1)) * -120px));
  opacity: calc(var(--e, 1) * 1.4 - .4);
  transform-origin: 50% 0%;
}
/* swing: turns in from the side (alternates left/right) */
.fx3d [data-3d="swing"] {
  transform: translate3d(calc((1 - var(--e, 1)) * var(--dir, 1) * 80px * var(--fx)), 0, calc((1 - var(--e, 1)) * -300px * var(--fx))) rotateY(calc((1 - var(--e, 1)) * var(--dir, 1) * -38deg * var(--fx)));
  opacity: calc(var(--e, 1) * 1.3 - .3);
}
.fx3d [data-3d="swing"]:nth-child(even) { --dir: -1; }
/* plane: a big surface lying back like a table top that stands up */
.fx3d [data-3d="plane"] {
  transform: perspective(1400px) rotateX(calc((1 - var(--e, 1)) * 48deg * var(--fx))) scale(calc(.86 + var(--e, 1) * .14));
  transform-origin: 50% 0%;
  opacity: calc(var(--e, 1) * 1.2 - .2);
}
/* text: small lift for headings and paragraphs */
.fx3d [data-3d="text"] {
  transform: translate3d(0, calc((1 - var(--e, 1)) * 40px), 0);
  opacity: var(--e, 1);
}
/* hero: pushes back into the screen and tilts away as you scroll past */
.fx3d [data-3d="hero"] {
  transform: translate3d(0, calc(var(--x, 0) * 14vh), calc(var(--x, 0) * -560px * var(--fx))) rotateX(calc(var(--x, 0) * 36deg * var(--fx)));
  opacity: calc(1 - var(--x, 0) * 1.4);
  transform-origin: 50% 100%;
}
/* footer logo lies down flat and rises as the page ends */
.fx3d .footer__big img[data-3d] {
  transform: rotateX(calc((1 - var(--e, 1)) * 72deg * var(--fx))) translateY(calc((1 - var(--e, 1)) * 60px));
  transform-origin: 50% 100%;
  opacity: calc(.15 + var(--e, 1) * .85);
}

/* ---------- hero fly-through (pinned; site.js writes --s = 0→1 over .fly__track) ----------
   0.00–0.05  the logo waits, scroll hint visible
   0.00–0.60  the letters come at you and split apart; the camera passes between U and D
   0.30–0.60  a flash of light as you pass through
   0.45–0.75  the headline, text and buttons arrive from the depth
   0.75–1.00  everything holds, then the page scrolls on */
.fly__stage { display: grid; justify-items: center; }
.fly__logo { position: relative; width: min(860px, 92vw); margin-bottom: clamp(8px, 2vw, 22px); }
.fly__l { display: none; }
.fly__hint { order: 3; }

.fx3d .hero.fly { display: block; min-height: 0; padding: 0; overflow: visible; }
.fx3d .fly__track { height: 360vh; height: 360svh; }
.fx3d .fly__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: block; perspective: 900px; overflow: clip; }
.fx3d .fly__stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 48%, rgb(255 255 255 / .9), rgb(var(--accent-rgb) / .35) 40%, transparent 72%);
  opacity: calc(min(clamp(0, (var(--s, 0) - .26) * 4.5, 1), clamp(0, (.66 - var(--s, 0)) * 4.5, 1)) * .5);
}
.fx3d .fly__logo { position: absolute; left: 50%; top: 50%; width: min(1000px, 94vw); margin: 0; translate: -50% -50%; transform-style: preserve-3d; }
.fx3d .fly__sizer { visibility: hidden; }
.fx3d .fly__l {
  --k: clamp(0, calc((var(--s, 0) - var(--d)) / .56), 1);
  --ke: calc(var(--k) * var(--k) * (3 - 2 * var(--k)));   /* smoothstep: no jolt at start or end */
  --kk: calc(var(--ke) * (.35 + .65 * var(--ke)));          /* accelerate into the camera */
  display: block; position: absolute; inset: 0;
  transform:
    translate3d(calc(var(--dir) * var(--kk) * 20vw * var(--fx)), calc(var(--kk) * -3vh), calc(var(--kk) * 860px))
    rotateY(calc(var(--dir) * var(--kk) * -32deg * var(--fx)));
  opacity: calc(1 - clamp(0, (var(--k) - .66) * 2.9, 1));
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.fx3d .fly__l img { width: 100%; }
/* the letter is cut out on .fly__clip; effects such as glow go on .fly__l so they are not cut off at the slice edge */
.fx3d .fly__clip { display: block; position: absolute; inset: 0; }
.fx3d .fly__l:nth-of-type(1) { --dir: -1.4; --d: .05; }
.fx3d .fly__l:nth-of-type(1) .fly__clip { clip-path: polygon(-30% -40%, 25.6% -40%, 25.6% 140%, -30% 140%); }
.fx3d .fly__l:nth-of-type(2) { --dir: -.6;  --d: 0; }
.fx3d .fly__l:nth-of-type(2) .fly__clip { clip-path: polygon(25.6% -40%, 48.6% -40%, 48.6% 140%, 25.6% 140%); }
.fx3d .fly__l:nth-of-type(3) { --dir: .6;   --d: 0; }
.fx3d .fly__l:nth-of-type(3) .fly__clip { clip-path: polygon(48.6% -40%, 70.6% -40%, 70.6% 140%, 48.6% 140%); }
.fx3d .fly__l:nth-of-type(4) { --dir: 1.4;  --d: .05; }
.fx3d .fly__l:nth-of-type(4) .fly__clip { clip-path: polygon(70.6% -40%, 130% -40%, 130% 140%, 70.6% 140%); }
.fx3d .fly__content {
  --c0: clamp(0, calc((var(--s, 0) - .44) / .34), 1);
  --c: calc(var(--c0) * var(--c0) * (3 - 2 * var(--c0)));
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  padding-top: var(--header-h);
  opacity: var(--c);
  transform: translateZ(calc((1 - var(--c)) * -520px));
}
.fx3d .fly__track:not(.is-done) .fly__content { pointer-events: none; }
.fx3d .fly__hint { position: absolute; left: 50%; bottom: 28px; margin: 0; translate: -50% 0; opacity: clamp(0, calc(1 - var(--s, 0) * 6), 1); }

/* pointer tilt (desktop only; site.js sets --rx / --ry / --gx / --gy / --glare) */
[data-tilt] { transition: transform .6s var(--ease); }
.fx3d [data-tilt] { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); }
.fx3d [data-tilt].is-tilting { transition: transform .15s linear; }

/* ---------- reduced motion + touch ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee__track { animation: none; }
}
@media (hover: none) {
  .btn:hover { transform: none; }
  .work3d__card:hover .work-card__go, .work-card:hover .work-card__go { transform: none; }
}

@media print {
  .header, .dock, .consent-bar, .marquee-wrap, .scene, .contact .form-card { display: none !important; }
  body, html { background: #fff; color: #000; }
  .chrome, h1, h2 { -webkit-text-fill-color: #000; color: #000; background: none; }
}


/* ==========================================================================
   LIGHT MODE  (site.json → theme.mode: "light")
   Bright pearl ground lit by drifting coloured light, frosted-glass surfaces,
   light rays in the opening, frosted-glass logo. Same layout and motion as dark.
   Frosting (backdrop-filter) only on mouse devices; phones get more opaque glass.
   ========================================================================== */
html[data-mode="light"] {
  color-scheme: light;
  --l1: 138 140 255;   /* lilac light */
  --l2: 57 198 214;    /* aqua light  */
  --l3: 255 176 138;   /* peach light */
  --l4: 255 143 184;   /* rose light  */
  --line: rgb(var(--text-rgb) / 0.08);
  --line-strong: rgb(var(--text-rgb) / 0.16);
  --glass: linear-gradient(145deg, rgb(255 255 255 / 0.74), rgb(255 255 255 / 0.36));
  --glass-strong: linear-gradient(145deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.55));
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.6), 0 22px 50px -28px rgb(70 74 160 / 0.32);
  --chrome: linear-gradient(180deg, #1C1E38 0%, #2E3272 42%, #5A54DC 72%, #2FA8CC 100%);
  --chrome-flat: linear-gradient(115deg, #5A54DC 0%, #7D6CF4 38%, #3AA8D2 78%, #4FC6C9 100%);
  --shadow: 0 30px 70px -30px rgb(60 66 150 / 0.38), 0 0 0 1px rgb(255 255 255 / 0.7);
  --glow: 0 0 0 1px rgb(var(--accent-rgb) / 0.28), 0 26px 60px -26px rgb(var(--accent-rgb) / 0.55);
}

/* the light itself: a pearl ground with four soft coloured lights, plus a layer that drifts slowly */
html[data-mode="light"] body::before {
  background:
    radial-gradient(ellipse 55% 45% at 85% 8%, rgb(var(--l1) / 0.42), transparent 70%),
    radial-gradient(ellipse 50% 40% at 8% 35%, rgb(var(--l2) / 0.32), transparent 70%),
    radial-gradient(ellipse 45% 40% at 70% 75%, rgb(var(--l3) / 0.34), transparent 70%),
    radial-gradient(ellipse 40% 35% at 20% 95%, rgb(var(--l4) / 0.26), transparent 70%),
    linear-gradient(180deg, #F6F7FC, var(--bg));
}
html[data-mode="light"] body::after {
  content: ''; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / 0.85), transparent 22%),
    radial-gradient(circle at 70% 60%, rgb(var(--l1) / 0.22), transparent 28%),
    radial-gradient(circle at 40% 80%, rgb(var(--l2) / 0.18), transparent 26%);
  animation: lm-drift 38s ease-in-out infinite alternate;
}
@keyframes lm-drift { 0% { transform: translate3d(-4%, -3%, 0) rotate(0deg); } 100% { transform: translate3d(5%, 4%, 0) rotate(8deg); } }

/* frosted glass on every card-like surface */
html[data-mode="light"] :is(.tile, .plan, .step, .proof > div, .compare, .niche-link, .faq details, .checks li, .quote,
  .solutions li, .facts div, .pains li, .includes li, .meta-table, .prose dl, .pager a, .work3d__cta) {
  box-shadow: var(--glass-edge);
}
html[data-mode="light"] .plan--featured { background: linear-gradient(160deg, rgb(255 255 255 / 0.95), rgb(var(--l1) / 0.22) 60%, rgb(var(--l2) / 0.2)); box-shadow: var(--glass-edge), var(--glow); }
html[data-mode="light"] .bento > :nth-child(6n + 1) .tile, html[data-mode="light"] .bento > :nth-child(6n + 6) .tile {
  background: linear-gradient(150deg, rgb(255 255 255 / 0.92), rgb(var(--l1) / 0.24) 55%, rgb(var(--l2) / 0.22));
}
html[data-mode="light"] .faq details[open] { box-shadow: var(--glass-edge), 0 0 0 1px rgb(var(--accent-rgb) / 0.3); }
html[data-mode="light"] .tile__icon, html[data-mode="light"] .page-hero__icon {
  background: linear-gradient(145deg, #fff, rgb(var(--l1) / 0.25)); box-shadow: var(--glass-edge), 0 0 30px -6px rgb(var(--l2) / 0.6);
}
@media (hover: hover) and (pointer: fine) {
  html[data-mode="light"] :is(.tile, .plan, .step, .proof > div, .compare, .niche-link, .faq details, .checks li, .quote,
    .solutions li, .facts div, .pains li, .includes li, .meta-table, .pager a, .work3d__cta, .form-card, .marquee) {
    -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  }
  html[data-mode="light"] .header.is-scrolled { -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); background: rgb(var(--bg-rgb) / 0.62); }
}
html[data-mode="light"] .header.is-scrolled { background: rgb(var(--bg-rgb) / 0.9); box-shadow: 0 1px 0 rgb(255 255 255 / 0.8), 0 10px 30px -20px rgb(60 66 150 / 0.3); }
html[data-mode="light"] .bg-surface { background: linear-gradient(180deg, transparent, rgb(255 255 255 / 0.4) 20%, rgb(255 255 255 / 0.4) 80%, transparent); }

/* buttons: light passing through coloured glass */
html[data-mode="light"] :is(.btn--accent, .btn--primary) {
  color: #fff; text-shadow: 0 1px 2px rgb(30 30 90 / 0.25);
  box-shadow: 0 12px 30px -12px rgb(var(--accent-rgb) / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.45);
}
html[data-mode="light"] .btn--ghost { background: rgb(255 255 255 / 0.55); border-color: rgb(255 255 255 / 0.9); box-shadow: 0 8px 24px -14px rgb(60 66 150 / 0.4); }
html[data-mode="light"] .btn--ghost:hover { border-color: rgb(var(--accent-rgb) / 0.5); background: rgb(255 255 255 / 0.8); }
html[data-mode="light"] .plan__badge { color: #fff; }
html[data-mode="light"] .menu-btn { background: rgb(255 255 255 / 0.6); border-color: rgb(255 255 255 / 0.9); }

/* menus, form, dock, banners */
html[data-mode="light"] .mobile-nav { background: radial-gradient(ellipse 80% 50% at 90% 100%, rgb(var(--l1) / 0.22), transparent 70%), linear-gradient(170deg, #F8F8FD, #ECEFFA); }
html[data-mode="light"] .form-card { background: var(--glass-strong); box-shadow: var(--glass-edge), 0 40px 80px -40px rgb(60 66 150 / 0.45); }
html[data-mode="light"] :is(.field input, .field select, .field textarea) { background: rgb(255 255 255 / 0.75); border-color: rgb(var(--text-rgb) / 0.14); }
html[data-mode="light"] .field select option { background: #fff; color: var(--text); }
html[data-mode="light"] :is(.field__error, .form__status.is-error) { color: #C62F2F; }
html[data-mode="light"] .field [aria-invalid="true"] { border-color: #D64545; }
@media (max-width: 700px) { html[data-mode="light"] .dock { background: rgb(255 255 255 / 0.94); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.9), 0 20px 50px -14px rgb(60 66 150 / 0.45); } }
html[data-mode="light"] .consent-bar { background: #fff; }

/* device mockups: light browser frame, silver phone */
html[data-mode="light"] .browser { background: #fff; }
html[data-mode="light"] .browser__bar { background: rgb(255 255 255 / 0.92); border-bottom-color: rgb(var(--text-rgb) / 0.06); }
html[data-mode="light"] .browser::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9); }
html[data-mode="light"] .phone { background: linear-gradient(145deg, #F1F3F9, #C3C9D8 42%, #F6F7FB 70%, #B9C0D2); }

/* the chrome logo becomes frosted glass: white letters held by soft shadow and coloured light */
/* small logos (header, footer): graphite chrome so they read on the light ground */
html[data-mode="light"] .logo img { filter: brightness(0.38) contrast(1.3) drop-shadow(0 1px 0 rgb(255 255 255 / 0.9)); }
html[data-mode="light"] :is(.fly__sizer, .footer__big img) {
  filter: drop-shadow(0 1px 1px rgb(28 30 70 / 0.55)) drop-shadow(0 10px 22px rgb(70 74 170 / 0.35));
}
html[data-mode="light"] .fly__l { filter: drop-shadow(0 1px 1px rgb(28 30 70 / 0.55)) drop-shadow(0 18px 40px rgb(90 84 220 / 0.38)) drop-shadow(0 0 30px rgb(var(--l2) / 0.45)); }
@media (hover: none) { html[data-mode="light"] .fly__l { filter: drop-shadow(0 1px 1px rgb(28 30 70 / 0.55)) drop-shadow(0 12px 26px rgb(90 84 220 / 0.35)); } }

/* opening: light rays falling through the scene, and a coloured flash as you fly through */
html[data-mode="light"] .fly__stage::before {
  content: ''; position: absolute; inset: -10% -20%; pointer-events: none;
  background: repeating-linear-gradient(104deg, transparent 0 7%, rgb(255 255 255 / 0.55) 9%, transparent 12% 19%, rgb(var(--l1) / 0.18) 21%, transparent 24%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 75%);
  animation: lm-rays 18s ease-in-out infinite alternate;
}
@keyframes lm-rays { 0% { transform: translateX(-3%) skewX(-2deg); opacity: .75; } 100% { transform: translateX(3%) skewX(2deg); opacity: 1; } }
html[data-mode="light"] .fx3d .fly__stage::after {
  background: radial-gradient(ellipse 60% 50% at 50% 48%, rgb(255 255 255 / 1), rgb(var(--l1) / 0.55) 35%, rgb(var(--l2) / 0.35) 55%, transparent 75%);
}
html[data-mode="light"] .marquee li::after { box-shadow: 0 0 18px rgb(var(--l2) / 0.9); }

@media (prefers-reduced-motion: reduce) {
  html[data-mode="light"] body::after, html[data-mode="light"] .fly__stage::before { animation: none; }
}
@media print { html[data-mode="light"] body::after, html[data-mode="light"] .fly__stage::before { display: none; } }

/* ==========================================================================
   GOLD MODE  (site.json → theme.mode: "gold")  — premium: black, white, gold, light.
   Builds on the dark design. Gold replaces chrome on headings and buttons,
   warm light falls through the page (glows, rays, gold dust), and the pricing
   and about sections turn into bright ivory pages for contrast.
   ========================================================================== */
html[data-mode="gold"] {
  color-scheme: dark;
  --gold-hi: #FFF3D6;
  --gold: #D9B26A;
  --gold-deep: #9A7130;
  --chrome: linear-gradient(180deg, #FFF8EA 0%, #F3E1B8 32%, #C59A50 54%, #F6E2B0 72%, #FFFBF1 88%, #D9B26A 100%);
  --chrome-flat: linear-gradient(120deg, #FFF3D6 0%, #E7C885 30%, #A97C36 52%, #F1D89C 74%, #D9B26A 100%);
  --glass: linear-gradient(180deg, rgb(255 236 200 / 0.07), rgb(255 236 200 / 0.02));
  --glass-strong: linear-gradient(180deg, rgb(255 236 200 / 0.12), rgb(255 236 200 / 0.04));
  --glow: 0 0 0 1px rgb(217 178 106 / 0.45), 0 22px 60px -22px rgb(217 178 106 / 0.5);
}

/* warm light: golden glows, a slow drifting light and fine gold dust */
html[data-mode="gold"] body::before {
  background:
    radial-gradient(ellipse 60% 45% at 82% 6%, rgb(255 200 120 / 0.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 8% 62%, rgb(217 178 106 / 0.10), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgb(255 214 150 / 0.08), transparent 70%),
    var(--bg);
}
html[data-mode="gold"] body::after {
  content: ''; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle at 70% 20%, rgb(255 222 160 / 0.10), transparent 24%),
    radial-gradient(circle at 25% 75%, rgb(255 205 130 / 0.07), transparent 26%),
    radial-gradient(rgb(255 226 170 / 0.55) 0.6px, transparent 1.2px) 0 0 / 140px 140px,
    radial-gradient(rgb(255 236 200 / 0.35) 0.5px, transparent 1px) 70px 50px / 190px 190px;
  animation: gm-drift 46s ease-in-out infinite alternate;
}
@keyframes gm-drift { 0% { transform: translate3d(-3%, -2%, 0); } 100% { transform: translate3d(3%, 3%, 0); } }

/* gold details */
html[data-mode="gold"] .header.is-scrolled { background: rgb(6 5 4 / 0.97); box-shadow: 0 1px 0 rgb(217 178 106 / 0.22); }
html[data-mode="gold"] .eyebrow { color: var(--gold); }
html[data-mode="gold"] .eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold)); }
html[data-mode="gold"] mark, html[data-mode="gold"] .highlight { color: var(--gold-hi); -webkit-text-fill-color: var(--gold-hi); text-shadow: 0 0 30px rgb(255 200 120 / 0.55); }
html[data-mode="gold"] :is(.btn--accent, .btn--primary) { color: #1A1409; box-shadow: 0 12px 34px -12px rgb(217 178 106 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.85); }
html[data-mode="gold"] .btn--ghost:hover { border-color: rgb(217 178 106 / 0.8); background: rgb(217 178 106 / 0.08); }
html[data-mode="gold"] .plan__badge { color: #1A1409; }
html[data-mode="gold"] .nav a::after, html[data-mode="gold"] .work3d__progress i { background: var(--chrome-flat); }
html[data-mode="gold"] .marquee { border-block-color: rgb(217 178 106 / 0.35); }
html[data-mode="gold"] .tile__icon, html[data-mode="gold"] .page-hero__icon { color: var(--gold); box-shadow: inset 0 0 0 1px rgb(217 178 106 / 0.35), 0 0 34px -8px rgb(217 178 106 / 0.55); }
html[data-mode="gold"] .phone { background: linear-gradient(145deg, #3A3122, #0E0B06 40%, #2C2518); }
html[data-mode="gold"] .form-card { box-shadow: inset 0 1px 0 rgb(255 236 200 / 0.14), 0 0 0 1px rgb(217 178 106 / 0.3), 0 50px 100px -40px rgb(0 0 0 / 0.9); }

/* opening: golden light rays fall across the logo; passing through the letters is a burst of warm light */
html[data-mode="gold"] .fly__stage::before {
  content: ''; position: absolute; inset: -10% -20%; pointer-events: none;
  background: repeating-linear-gradient(102deg, transparent 0 8%, rgb(255 214 150 / 0.10) 10%, transparent 13% 21%, rgb(255 236 200 / 0.06) 23%, transparent 26%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 65% at 50% 0%, #000 10%, transparent 75%);
  animation: gm-rays 20s ease-in-out infinite alternate;
}
@keyframes gm-rays { 0% { transform: translateX(-3%) skewX(-2deg); opacity: .7; } 100% { transform: translateX(3%) skewX(2deg); opacity: 1; } }
html[data-mode="gold"] .fx3d .fly__stage::after {
  background: radial-gradient(ellipse 60% 50% at 50% 48%, rgb(255 250 235 / 0.95), rgb(255 205 130 / 0.5) 38%, rgb(217 178 106 / 0.18) 58%, transparent 75%);
}

/* white: the pricing and about sections become ivory pages (all colours are tokens, so they re-theme in place) */
html[data-mode="gold"] :is(.section--pricing, .section--about) {
  --text: #17130C; --text-rgb: 23 19 12; --muted: #675E4D;
  --accent: #9A7130; --accent-rgb: 154 113 48;
  --line: rgb(23 19 12 / 0.1); --line-strong: rgb(23 19 12 / 0.2);
  --glass: linear-gradient(180deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.55));
  --glass-strong: linear-gradient(180deg, #FFFFFF, rgb(255 252 244 / 0.9));
  --chrome: linear-gradient(180deg, #1B150B 0%, #3B2D15 45%, #8E6726 78%, #B48638 100%);
  --glow: 0 0 0 1px rgb(154 113 48 / 0.35), 0 24px 60px -24px rgb(154 113 48 / 0.45);
  color: var(--text);
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgb(255 226 170 / 0.55), transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 100%, rgb(240 214 160 / 0.45), transparent 70%),
    linear-gradient(180deg, #FBF7EF, #F2EADB);
  box-shadow: inset 0 1px 0 rgb(217 178 106 / 0.6), inset 0 -1px 0 rgb(217 178 106 / 0.6);
}
html[data-mode="gold"] :is(.section--pricing, .section--about) ::selection { background: #17130C; color: #FFF3D6; }
html[data-mode="gold"] :is(.section--pricing, .section--about) :is(.plan, .checks li) {
  box-shadow: 0 0 0 1px rgb(217 178 106 / 0.35), 0 24px 50px -30px rgb(110 80 30 / 0.35);
}
html[data-mode="gold"] .section--pricing .plan--featured {
  --text: #F6F1E7; --text-rgb: 246 241 231; --muted: #CFC4AE; --accent: #D9B26A; --accent-rgb: 217 178 106;
  --chrome: linear-gradient(180deg, #FFF8EA 0%, #F3E1B8 32%, #C59A50 54%, #F6E2B0 72%, #FFFBF1 88%, #D9B26A 100%);
  color: var(--text);
  background: radial-gradient(ellipse at 50% -10%, rgb(255 210 140 / 0.28), transparent 60%), linear-gradient(170deg, #17130C, #0B0906);
  box-shadow: 0 0 0 1px rgb(217 178 106 / 0.6), 0 40px 80px -30px rgb(60 40 10 / 0.6);
}
html[data-mode="gold"] .section--pricing .plan--featured .plan__price small { -webkit-text-fill-color: var(--muted); }
html[data-mode="gold"] .section--pricing .btn--ghost { background: rgb(255 255 255 / 0.7); border-color: rgb(154 113 48 / 0.45); color: #17130C; }
html[data-mode="gold"] .section--pricing .btn--ghost:hover { background: #fff; border-color: #9A7130; }
html[data-mode="gold"] .section--pricing .note { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html[data-mode="gold"] body::after, html[data-mode="gold"] .fly__stage::before { animation: none; }
}
@media print { html[data-mode="gold"] body::after, html[data-mode="gold"] .fly__stage::before { display: none; } }

/* ==========================================================================
   SAPPHIRE VARIANT  (theme.mode "gold" + theme.variant "sapphire")
   The gold design with a FEW blue accents only: a couple of sapphire lights,
   thin blue lines, blue streaks in the opening rays and a soft blue ring.
   Everything else (black ground, gold glass, ivory pages) stays gold.
   ========================================================================== */
html[data-variant="sapphire"] {
  --sap: #5B8CFF;
  --sap-rgb: 91 140 255;
}

/* two small sapphire lights in the black ground, next to the gold ones */
html[data-variant="sapphire"] body::before {
  background:
    radial-gradient(ellipse 60% 45% at 82% 6%, rgb(255 200 120 / 0.14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 8% 62%, rgb(217 178 106 / 0.09), transparent 70%),
    radial-gradient(ellipse 22% 18% at 92% 30%, rgb(var(--sap-rgb) / 0.13), transparent 70%),
    radial-gradient(ellipse 20% 16% at 6% 92%, rgb(var(--sap-rgb) / 0.10), transparent 70%),
    var(--bg);
}
/* gold dust with the odd blue spark */
html[data-variant="sapphire"] body::after {
  background:
    radial-gradient(circle at 70% 20%, rgb(255 222 160 / 0.09), transparent 24%),
    radial-gradient(rgb(255 226 170 / 0.55) 0.6px, transparent 1.2px) 0 0 / 140px 140px,
    radial-gradient(rgb(160 190 255 / 0.6) 0.6px, transparent 1.2px) 70px 50px / 380px 380px;
}

/* thin blue lines */
html[data-variant="sapphire"] .eyebrow::before { background: linear-gradient(90deg, var(--sap), var(--gold)); }
html[data-variant="sapphire"] .nav a::after { background: linear-gradient(90deg, var(--sap), var(--gold)); }
html[data-variant="sapphire"] .header.is-scrolled { box-shadow: 0 1px 0 rgb(var(--sap-rgb) / 0.28); }
html[data-variant="sapphire"] .work3d__progress i { background: linear-gradient(90deg, var(--sap), var(--gold)); }
html[data-variant="sapphire"] .step::after { content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--sap-rgb) / 0.7), transparent); }
html[data-variant="sapphire"] .marquee li::after { box-shadow: 0 0 16px rgb(var(--sap-rgb) / 0.9); }
html[data-variant="sapphire"] .faq details[open] { box-shadow: inset 0 0 0 1px rgb(var(--sap-rgb) / 0.4); }
html[data-variant="sapphire"] .footer { border-top-color: rgb(var(--sap-rgb) / 0.25); }

/* small blue light on a few details */
html[data-variant="sapphire"] :is(.tile__icon, .page-hero__icon) { box-shadow: inset 0 0 0 1px rgb(217 178 106 / 0.4), 0 0 30px -8px rgb(var(--sap-rgb) / 0.6); }
html[data-variant="sapphire"] .bento > :nth-child(6n + 1) .tile { background: radial-gradient(ellipse at 100% 0%, rgb(var(--sap-rgb) / 0.14), transparent 55%), var(--glass-strong); }
html[data-variant="sapphire"] :is(.niche-link, .pager a):hover { box-shadow: inset 0 1px 0 rgb(255 236 200 / 0.12), 0 0 0 1px rgb(var(--sap-rgb) / 0.5), 0 22px 60px -22px rgb(var(--sap-rgb) / 0.45); }

/* opening: mostly gold rays with a couple of blue streaks; the flash gets a thin blue rim */
html[data-variant="sapphire"] .fly__stage::before {
  background: repeating-linear-gradient(102deg, transparent 0 8%, rgb(255 214 150 / 0.10) 10%, transparent 13% 21%, rgb(120 160 255 / 0.07) 23%, transparent 26%);
}
html[data-variant="sapphire"] .fx3d .fly__stage::after {
  background: radial-gradient(ellipse 60% 50% at 50% 48%, rgb(255 250 235 / 0.95), rgb(255 205 130 / 0.45) 36%, rgb(var(--sap-rgb) / 0.22) 56%, transparent 75%);
}

/* ivory pages: unchanged gold, with one thin blue line at the bottom edge */
html[data-variant="sapphire"] :is(.section--pricing, .section--about) {
  box-shadow: inset 0 1px 0 rgb(217 178 106 / 0.6), inset 0 -1px 0 rgb(var(--sap-rgb) / 0.45);
}

/* ---------- pricing: extras list ---------- */
.extras { margin-top: 28px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .08), 0 0 0 1px var(--line); }
.extras__title { font-size: 20px; margin-bottom: 14px; }
.extras__list { display: grid; gap: 0 48px; }
@media (min-width: 900px) { .extras__list { grid-template-columns: 1fr 1fr; } }
.extras__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.extras__row dt { font-weight: 700; font-size: 15.5px; }
.extras__row dt span { display: block; font-weight: 500; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.extras__row dd { margin: 0; font-weight: 800; font-size: 15px; white-space: nowrap; color: var(--accent); font-variant-numeric: tabular-nums; }
html[data-mode="gold"] :is(.section--pricing) .extras { box-shadow: 0 0 0 1px rgb(217 178 106 / 0.35), 0 24px 50px -30px rgb(110 80 30 / 0.3); }
html[data-mode="light"] .extras { box-shadow: var(--glass-edge); }
@media (max-width: 560px) { .extras__row { flex-direction: column; gap: 4px; } .extras__row dd { white-space: normal; } }

/* ---------- currency switcher (pricing.currencies) ---------- */
html[data-currency] .cur { display: none; }
html[data-currency="EUR"] .cur[data-cur="EUR"], html[data-currency="USD"] .cur[data-cur="USD"], html[data-currency="GBP"] .cur[data-cur="GBP"], html[data-currency="HUF"] .cur[data-cur="HUF"] { display: inline; }
.currency { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.currency button {
  min-width: 44px; min-height: 30px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--muted);
  font: 700 11.5px/1 var(--f-body); letter-spacing: .08em; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.currency button:hover { color: var(--text); border-color: var(--accent); }
.currency button[aria-pressed="true"] { background: var(--chrome-flat); color: #0E0C09; border-color: transparent; }
html[data-mode="light"] .currency button[aria-pressed="true"] { color: #fff; }
.currency__hint { font-size: 13px; color: var(--muted); margin-right: 6px; }

/* pricing: the fixed-quote promise and the single care-plan line */
.promise { display: flex; align-items: center; gap: 12px; margin: -20px 0 30px; padding: 14px 20px; width: fit-content; max-width: 100%; border-radius: 999px; font-weight: 700; font-size: 15.5px; background: var(--glass); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .45), 0 0 30px -12px rgb(var(--accent-rgb) / .6); }
.promise .icon { width: 22px; height: 22px; color: var(--accent); flex: none; }
@media (max-width: 640px) { .promise { border-radius: var(--radius-sm); align-items: flex-start; } }
.care { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 22px; padding: 20px 26px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .08), 0 0 0 1px var(--line); }
.care__label { font-weight: 800; }
.care__price { color: var(--accent); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.care__text { color: var(--muted); font-size: 15px; }

/* ==========================================================================
   DIAMOND VARIANT  (theme.mode "light" + theme.variant "diamond")
   A bright, icy version: white-blue ice ground, diamond-blue light,
   clear crystal glass, silver-white sparkles and an ice-blue logo.
   ========================================================================== */
html[data-variant="diamond"] {
  --l1: 120 175 255;   /* diamond blue  */
  --l2: 150 225 255;   /* ice cyan      */
  --l3: 205 220 255;   /* silver blue   */
  --l4: 185 200 255;   /* pale periwinkle */
  --chrome: linear-gradient(180deg, #0B1A3A 0%, #17377A 42%, #2E78E6 74%, #67B4FF 100%);
  --chrome-flat: linear-gradient(115deg, #2E78E6 0%, #5FA4FF 40%, #A9D8FF 62%, #4C8EF0 100%);
  --glass: linear-gradient(145deg, rgb(255 255 255 / 0.78), rgb(235 244 255 / 0.4));
  --glass-strong: linear-gradient(145deg, rgb(255 255 255 / 0.92), rgb(232 243 255 / 0.6));
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / 1), 0 0 0 1px rgb(200 222 255 / 0.7), 0 22px 50px -28px rgb(40 90 190 / 0.32);
  --glow: 0 0 0 1px rgb(var(--accent-rgb) / 0.3), 0 26px 60px -26px rgb(var(--accent-rgb) / 0.55);
}
html[data-variant="diamond"] body::before {
  background:
    radial-gradient(ellipse 55% 45% at 85% 6%, rgb(var(--l1) / 0.36), transparent 70%),
    radial-gradient(ellipse 50% 40% at 6% 38%, rgb(var(--l2) / 0.34), transparent 70%),
    radial-gradient(ellipse 45% 40% at 70% 78%, rgb(var(--l3) / 0.5), transparent 70%),
    radial-gradient(ellipse 40% 35% at 18% 96%, rgb(var(--l4) / 0.3), transparent 70%),
    linear-gradient(180deg, #F7FAFE, var(--bg));
}
/* diamond sparkle: tiny four-point glints scattered over the drifting light */
html[data-variant="diamond"] body::after {
  background:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / 0.9), transparent 22%),
    radial-gradient(circle at 70% 60%, rgb(var(--l1) / 0.2), transparent 28%),
    radial-gradient(rgb(255 255 255 / 1) 0.8px, transparent 1.6px) 0 0 / 120px 120px,
    radial-gradient(rgb(110 170 255 / 0.75) 0.7px, transparent 1.4px) 60px 40px / 170px 170px;
}
html[data-variant="diamond"] .plan--featured { background: linear-gradient(160deg, rgb(255 255 255 / 0.96), rgb(var(--l1) / 0.24) 60%, rgb(var(--l2) / 0.26)); }
html[data-variant="diamond"] .bento > :nth-child(6n + 1) .tile, html[data-variant="diamond"] .bento > :nth-child(6n + 6) .tile {
  background: linear-gradient(150deg, rgb(255 255 255 / 0.94), rgb(var(--l1) / 0.22) 55%, rgb(var(--l2) / 0.24));
}
html[data-variant="diamond"] :is(.tile__icon, .page-hero__icon) { background: linear-gradient(145deg, #fff, rgb(var(--l2) / 0.35)); box-shadow: var(--glass-edge), 0 0 30px -6px rgb(var(--l1) / 0.7); }
html[data-variant="diamond"] .mobile-nav { background: radial-gradient(ellipse 80% 50% at 90% 100%, rgb(var(--l1) / 0.22), transparent 70%), linear-gradient(170deg, #F9FBFE, #EAF2FC); }
html[data-variant="diamond"] .phone { background: linear-gradient(145deg, #F4F8FF, #C2D3EE 42%, #F7FAFF 70%, #B4C6E6); }
html[data-variant="diamond"] .marquee li::after { background: var(--accent); box-shadow: 0 0 18px rgb(var(--l2) / 0.95); }
/* the ice-blue logo keeps its colour (the light mode's graphite filter is for the white logo) */
html[data-variant="diamond"] .logo img { filter: brightness(0.55) saturate(1.8) contrast(1.2) drop-shadow(0 1px 0 rgb(255 255 255 / 0.9)) drop-shadow(0 6px 14px rgb(40 90 190 / 0.25)); }
html[data-variant="diamond"] :is(.fly__sizer, .footer__big img) { filter: drop-shadow(0 12px 26px rgb(40 90 190 / 0.3)); }
html[data-variant="diamond"] .fly__l { filter: drop-shadow(0 18px 40px rgb(46 120 230 / 0.35)) drop-shadow(0 0 26px rgb(var(--l2) / 0.6)); }
@media (hover: none) { html[data-variant="diamond"] .fly__l { filter: drop-shadow(0 12px 26px rgb(46 120 230 / 0.32)); } }
html[data-variant="diamond"] .fly__stage::before {
  background: repeating-linear-gradient(104deg, transparent 0 7%, rgb(255 255 255 / 0.65) 9%, transparent 12% 19%, rgb(var(--l2) / 0.25) 21%, transparent 24%);
}
html[data-variant="diamond"] .fx3d .fly__stage::after {
  background: radial-gradient(ellipse 60% 50% at 50% 48%, rgb(255 255 255 / 1), rgb(var(--l2) / 0.6) 34%, rgb(var(--l1) / 0.35) 55%, transparent 75%);
}

/* ==========================================================================
   DIVINE VARIANT  (theme.mode "gold" + theme.variant "divine")
   Gold + diamond blue + divine light: heavenly light falling from above
   (slow god rays), a radiant white-gold halo behind the logo, diamond-blue
   glints and lines, and a pale crystal ring. Gold stays the metal.
   ========================================================================== */
html[data-variant="divine"] {
  --dia: #9CD0FF;
  --dia-rgb: 156 208 255;
}

/* ground: deep black with a bright white-gold glow pouring in from the top centre */
html[data-variant="divine"] body::before {
  background:
    radial-gradient(ellipse 55% 42% at 50% -8%, rgb(255 246 222 / 0.30), rgb(255 214 150 / 0.10) 45%, transparent 75%),
    radial-gradient(ellipse 24% 18% at 88% 34%, rgb(var(--dia-rgb) / 0.13), transparent 70%),
    radial-gradient(ellipse 22% 18% at 8% 72%, rgb(var(--dia-rgb) / 0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 40%, rgb(217 178 106 / 0.08), transparent 70%),
    var(--bg);
}
/* gold dust with diamond glints */
html[data-variant="divine"] body::after {
  background:
    radial-gradient(rgb(255 236 200 / 0.6) 0.6px, transparent 1.2px) 0 0 / 140px 140px,
    radial-gradient(rgb(200 230 255 / 0.85) 0.7px, transparent 1.4px) 70px 50px / 260px 260px,
    radial-gradient(rgb(255 255 255 / 0.9) 0.9px, transparent 1.6px) 30px 110px / 420px 420px;
}
/* divine rays: light beams fanning down from above the page, swaying very slowly */
html[data-variant="divine"]::before {
  content: ''; position: fixed; left: -30vw; right: -30vw; top: -20vh; height: 120vh; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 168deg at 50% 0%,
    rgb(255 244 220 / 0) 0deg 2.5deg, rgb(255 244 220 / 0.09) 3.5deg, rgb(255 244 220 / 0) 4.5deg 7deg,
    rgb(210 232 255 / 0.05) 7.8deg, rgb(255 244 220 / 0) 8.6deg 11deg);
  -webkit-mask-image: radial-gradient(ellipse 38% 58% at 50% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 38% 58% at 50% 0%, #000 10%, transparent 70%);
  transform-origin: 50% 0%;
  animation: dv-sway 30s ease-in-out infinite alternate;
}
@keyframes dv-sway { 0% { transform: rotate(-2.5deg); opacity: .8; } 100% { transform: rotate(2.5deg); opacity: 1; } }
@media (hover: none) { html[data-variant="divine"]::before { opacity: .7; animation: none; } }

/* diamond-blue lines and glints */
html[data-variant="divine"] .eyebrow::before { background: linear-gradient(90deg, var(--dia), var(--gold)); }
html[data-variant="divine"] .nav a::after { background: linear-gradient(90deg, var(--dia), #fff, var(--gold)); }
html[data-variant="divine"] .header.is-scrolled { box-shadow: 0 1px 0 rgb(var(--dia-rgb) / 0.3); }
html[data-variant="divine"] .work3d__progress i { background: linear-gradient(90deg, var(--dia), #fff, var(--gold)); }
html[data-variant="divine"] .step::after { content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--dia-rgb) / 0.8), transparent); }
html[data-variant="divine"] .marquee li::after { background: #fff; box-shadow: 0 0 14px rgb(var(--dia-rgb) / 1), 0 0 28px rgb(255 220 160 / 0.6); }
html[data-variant="divine"] .faq details[open] { box-shadow: inset 0 0 0 1px rgb(var(--dia-rgb) / 0.45); }
html[data-variant="divine"] .chip { color: #CFE6FF; box-shadow: inset 0 0 0 1px rgb(var(--dia-rgb) / 0.45); }
html[data-variant="divine"] :is(.tile__icon, .page-hero__icon) { box-shadow: inset 0 0 0 1px rgb(217 178 106 / 0.45), 0 0 34px -6px rgb(var(--dia-rgb) / 0.65); }
html[data-variant="divine"] :is(.tile, .step, .niche-link, .faq details, .solutions li, .pains li) { box-shadow: inset 0 1px 0 rgb(255 248 230 / 0.16), 0 0 0 1px rgb(255 236 200 / 0.08), 0 24px 50px -30px rgb(0 0 0 / 0.8); }
html[data-variant="divine"] .bento > :nth-child(6n + 1) .tile { background: radial-gradient(ellipse at 50% -20%, rgb(255 244 220 / 0.18), transparent 60%), radial-gradient(ellipse at 100% 0%, rgb(var(--dia-rgb) / 0.12), transparent 55%), var(--glass-strong); }
html[data-variant="divine"] :is(.niche-link, .pager a):hover { box-shadow: inset 0 1px 0 rgb(255 248 230 / 0.2), 0 0 0 1px rgb(var(--dia-rgb) / 0.55), 0 22px 60px -22px rgb(var(--dia-rgb) / 0.5); }
html[data-variant="divine"] :is(.btn--accent, .btn--primary) { box-shadow: 0 0 0 1px rgb(255 250 235 / 0.4), 0 12px 36px -10px rgb(255 214 150 / 0.75), 0 0 30px -8px rgb(var(--dia-rgb) / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.9); }

/* opening: a radiant halo behind the logo, golden and diamond rays, a white-gold burst as you pass */
html[data-variant="divine"] .fly__stage::before {
  background:
    radial-gradient(circle at 50% 50%, rgb(255 250 236 / 0.22) 0 14%, rgb(255 220 160 / 0.10) 26%, transparent 46%),
    repeating-linear-gradient(102deg, transparent 0 8%, rgb(255 236 200 / 0.12) 10%, transparent 13% 21%, rgb(var(--dia-rgb) / 0.08) 23%, transparent 26%);
  -webkit-mask-image: none; mask-image: none;
}
html[data-variant="divine"] .fx3d .fly__stage::after {
  background: radial-gradient(ellipse 62% 52% at 50% 48%, rgb(255 255 250 / 1), rgb(255 236 200 / 0.6) 30%, rgb(var(--dia-rgb) / 0.3) 52%, transparent 76%);
}
/* the hero logo looks exactly like the gold premium one; the light dims a little behind it so it reads the same */
html[data-variant="divine"] .fly__logo::before {
  content: ''; position: absolute; inset: -30% -12%; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(6 5 4 / 0.82), rgb(6 5 4 / 0.5) 45%, transparent 72%);
  opacity: clamp(0, calc(1 - var(--s, 0) * 5), 1);
}

/* ivory pages lit from above, with a thin diamond line */
html[data-variant="divine"] :is(.section--pricing, .section--about) {
  background:
    radial-gradient(ellipse 60% 55% at 50% -10%, rgb(255 255 255 / 0.95), transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 0%, rgb(255 226 170 / 0.45), transparent 70%),
    radial-gradient(ellipse 50% 50% at 8% 100%, rgb(var(--dia-rgb) / 0.3), transparent 70%),
    linear-gradient(180deg, #FCFAF4, #F1ECE0);
  box-shadow: inset 0 1px 0 rgb(217 178 106 / 0.6), inset 0 -1px 0 rgb(var(--dia-rgb) / 0.6);
}
html[data-variant="divine"] .section--pricing .plan--featured { box-shadow: 0 0 0 1px rgb(217 178 106 / 0.6), 0 0 40px -10px rgb(var(--dia-rgb) / 0.45), 0 40px 80px -30px rgb(60 40 10 / 0.6); }
html[data-variant="divine"] .currency button[aria-pressed="true"] { box-shadow: 0 0 18px -4px rgb(var(--dia-rgb) / 0.7); }

@media (prefers-reduced-motion: reduce) { html[data-variant="divine"]::before { animation: none; } }
@media print { html[data-variant="divine"]::before { display: none; } }

/* ==========================================================================
   DIVINE LIGHT  (site.json effects.divine_light: true)
   Driven by the fly-through progress --s (0 → 1, smoothed in site.js):
     0.00–0.15  a pillar of light descends onto the logo (a faint one is there from the start)
     0.03–0.26  a bright band sweeps through the letters, left to right
     0.12–0.60  a halo forms in the gap and expands past the camera, its rays slowly turning
   Only transform and opacity change, so it stays smooth on phones.
   ========================================================================== */
.fly__divine, .fly__shine { display: none; }
.fx3d .fly__divine { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  --b: clamp(0, calc((var(--s, 0) - .01) / .14), 1);
  --f: calc(1 - clamp(0, calc((var(--s, 0) - .22) / .14), 1));
  --h: clamp(0, calc((var(--s, 0) - .12) / .48), 1);
}
.dl-beam {
  position: absolute; left: 50%; top: -5%; width: min(36vw, 420px); height: 62%;
  background: linear-gradient(180deg, rgb(255 250 235 / .1) 0%, rgb(255 244 215 / .45) 60%, rgb(255 255 250 / .75) 100%);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 30%, transparent 75%);
  transform-origin: 50% 0; mix-blend-mode: screen;
  transform: translateX(-50%) scaleY(calc(.35 + var(--b) * .65)) scaleX(calc(.7 + var(--b) * .5));
  opacity: calc((.28 + var(--b) * .62) * var(--f));
}
.dl-halo {
  position: absolute; left: 50%; top: 50%; width: min(46vmin, 420px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, transparent 55%, rgb(255 250 235 / .95) 58.5%, rgb(255 222 160 / .55) 60.5%, rgb(156 208 255 / .7) 62.5%, transparent 66%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(calc(.15 + var(--h) * var(--h) * 5.5));
  opacity: calc(min(var(--h) * 5, 1) * (1 - var(--h)));
}
.dl-halo--2 { width: min(30vmin, 280px); transform: translate(-50%, -50%) scale(calc(.1 + var(--h) * var(--h) * 9)); opacity: calc(min(var(--h) * 6, 1) * (1 - var(--h)) * .7); }
.dl-rays {
  position: absolute; left: 50%; top: 50%; width: min(120vmin, 1100px); aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 244 220 / .22) 0deg 1.6deg, transparent 1.6deg 9deg, rgb(200 228 255 / .14) 9deg 10deg, transparent 10deg 15deg);
  -webkit-mask-image: radial-gradient(circle, transparent 12%, #000 22%, transparent 62%); mask-image: radial-gradient(circle, transparent 12%, #000 22%, transparent 62%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) rotate(calc(var(--s, 0) * 140deg)) scale(calc(.4 + var(--h) * 2.2));
  opacity: calc(min(var(--h) * 4, 1) * (1 - var(--h)) * .9);
}
/* the sweep: a light band masked to the letter shapes, travelling across the whole logo */
.fx3d .fly__shine {
  display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;   /* mask image: style attribute in index.html */
  --w: clamp(0, calc((var(--s, 0) - .03) / .23), 1);
}
.fly__shine i {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%;
  background: linear-gradient(100deg, transparent 0%, rgb(255 246 220 / .55) 35%, rgb(255 255 255 / 1) 50%, rgb(200 228 255 / .7) 62%, transparent 100%);
  transform: translateX(calc(-120% + var(--w) * 520%)) skewX(-14deg);
  opacity: calc(min(var(--w) * 8, 1) * (1 - clamp(0, (var(--w) - .92) * 12, 1)));
}

/* ==========================================================================
   PHONE PERFORMANCE (touch devices only; desktop unchanged)
   Measured on a 4×-throttled phone during the logo fly-through. The costly parts
   were screen-blended light layers, the masked light sweep (re-painted every
   frame) and the always-moving background layer. Phones get simpler but
   identical-looking versions, each on its own GPU layer.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  .fx3d .fly__stage { contain: layout paint; }
  .dl-beam, .dl-halo, .dl-rays { mix-blend-mode: normal; will-change: transform, opacity; }
  .dl-rays { width: min(110vmin, 520px); }
  .fx3d .fly__shine { display: none; }
  .fx3d .fly__content { will-change: transform, opacity; }
  html[data-mode] body::after { animation: none; }
  .fx3d .fly__stage::before, .fx3d .fly__stage::after { will-change: opacity; }
}