/* ============================================================
CAPITAL X — DESIGN SYSTEM v4
"Luxury with a pulse."
------------------------------------------------------------
· Champagne gold = the brand. Always.
· --accent-rgb is driven live by the WebGL chapter, so the
whole page shifts hue as the visitor descends: gold →
crimson → emerald → teal → amethyst → gold.
· Five typefaces, each with one job.
· Every section gets its own card language.
============================================================ */
:root {
/* ---- Luminance ladder ---- */
--ink-900: #06070a;
--ink-880: #080a0e;
--ink-850: #0a0d12;
--ink-800: #0e1218;
--ink-750: #121722;
--ink-700: #161c28;
--ink-650: #1c2430;
/* ---- Brand gold ---- */
--gold: #c8a96a;
--gold-hi: #f4e5c1;
--gold-lo: #8a7040;
--grad-gold: linear-gradient(100deg,#8a7040 0%,#c8a96a 22%,#f4e5c1 48%,#c8a96a 72%,#9d7f47 100%);
/* ---- Live chapter accent (set by scene.js) ---- */
--accent-rgb: 232, 196, 101;
--accent: rgb(var(--accent-rgb));
--accent-12: rgba(var(--accent-rgb), .12);
--accent-20: rgba(var(--accent-rgb), .20);
--accent-35: rgba(var(--accent-rgb), .35);
--accent-60: rgba(var(--accent-rgb), .60);
/* ---- Hairlines ---- */
--hair: rgba(240, 232, 210, .11);
--hair-soft: rgba(240, 232, 210, .06);
/* ---- Data tokens (numbers & charts only) ---- */
--up: #4cd787;
--down: #e8695c;
/* ---- Ink ---- */
--text: #f4f1e8;
--text-2: #adaa9e;
--text-3: #706d64;
/* ============================================================
TYPE — TWO INTERCHANGEABLE SETS
------------------------------------------------------------
To switch: comment out one block, uncomment the other, and
swap the matching in index.html (both URLs are kept
there, one commented). Nothing else needs to change.
Full comparison: 02-היסטוריית-שינויים-וגרסאות.md
============================================================ */
/* ---- SET B · "מדוד" (active) ------------------------------
Chosen after measuring the font binaries. Noto Serif Hebrew is
variable on BOTH weight and width, so headlines can be a
genuinely condensed black serif. Bona Nova carries a real
Hebrew italic. Karantina is the only condensed Hebrew there is. */
--f-display: "Noto Serif Hebrew", Georgia, serif;
--f-poster: "Karantina", "Noto Serif Hebrew", serif;
--f-elegant: "Bona Nova", "Noto Serif Hebrew", serif;
--f-body: "IBM Plex Sans Hebrew", "Segoe UI", sans-serif;
--f-ui: "IBM Plex Sans Hebrew", sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, monospace;
/* ---- The reading face -------------------------------------
For passages meant to be read at length rather than scanned.
A sans is the right tool for a label or a chip; set a whole
paragraph in one and it reads as an interface, not as writing.
Bona Nova is the most sharply cut Hebrew serif here — heavy
stroke contrast, and in Hebrew that contrast runs along the
HORIZONTALS (blunt reed pen, the opposite of Latin), so a line
of it catches light across its whole width like a printed page.
Its italic is already the emphasis face, which makes body and
pull-quote one family in roman and italic — the oldest
editorial pairing there is. */
--f-read: "Bona Nova", "Noto Serif Hebrew", Georgia, serif;
/* ---- SET A · "הגרסה הקודמת" (cache v20–v29) ---------------
What was on screen before the font swap. Softer, rounder,
less editorial. Note: Bellefair renders Hebrew at only 0.66 of
Latin cap-height, so its emphasised words sit small next to
Latin — that measurement is why it was replaced.
--f-display: "Frank Ruhl Libre", Georgia, serif;
--f-poster: "Frank Ruhl Libre", Georgia, serif;
--f-elegant: "Bellefair", "Frank Ruhl Libre", serif;
--f-body: "Heebo", "Segoe UI", sans-serif;
--f-ui: "Assistant", "Heebo", sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, monospace;
*/
/* ---- Geometry ---- */
--r-lg: 20px; --r-md: 14px; --r-sm: 9px;
--container: 1680px;
/* ---- Motion ---- */
--move: cubic-bezier(.22,.61,.24,1);
--fade: cubic-bezier(0,0,.32,1);
--spring: cubic-bezier(.34,1.56,.44,1);
--t1: 220ms; --t2: 340ms; --t3: 560ms;
}
/* ============================================================
BASE
============================================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-x: clip;
}
body {
font-synthesis: none;
font-family: var(--f-body);
background: var(--ink-900);
color: var(--text);
line-height: 1.6;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
font-feature-settings: "tnum" 1, "lnum" 1;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.mono,.num {
font-family: var(--f-mono);
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1,"lnum" 1;
}
.num-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.container { width: min(var(--container), 92%); margin-inline: auto; }
.container-narrow { width: min(1360px, 92%); }
.section { padding: clamp(76px, 9vw, 132px) 0; position: relative; z-index: 1; }
.section-tight { padding: clamp(56px, 6.5vw, 92px) 0; }
/* grid children must be allowed to shrink */
.bento-card,.track-card,.price-card,.cover-card,
.step,.fork-col,.bar-row,.report-cell { min-width: 0; overflow-wrap: anywhere; }
/* ============================================================
BACKDROP LAYERS
============================================================ */
#bgCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body.no-webgl {
background:
radial-gradient(900px 640px at 78% 6%, rgba(200,169,106,.10), transparent 62%),
radial-gradient(760px 620px at 12% 42%, rgba(45,190,140,.06), transparent 58%),
var(--ink-900);
}
.scene-scrim {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(90deg,transparent 0%,rgba(6,7,10,.42) 13%,rgba(6,7,10,.72) 27%,
rgba(6,7,10,.72) 73%,rgba(6,7,10,.42) 87%,transparent 100%);
}
/* the phone was a flat black wall — a solid .70 veil buried the living
scene everywhere. Same reading-column idea as desktop instead: darker
where the text runs, and the animated background breathing at the
edges, exactly like the wide screen. */
@media (max-width: 900px) {
.scene-scrim {
background:
linear-gradient(90deg, rgba(6,7,10,.16) 0%, rgba(6,7,10,.55) 20%,
rgba(6,7,10,.55) 80%, rgba(6,7,10,.16) 100%);
}
}
#guilloche { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .11; mix-blend-mode: screen; }
#guilloche path { fill: none; stroke: var(--accent); stroke-width: .35; transition: stroke var(--t3) var(--fade); }
body.has-cursor .cx-cur { opacity: 0; transition: opacity .3s var(--fade); }
body.cursor-live .cx-cur { opacity: 1; }
.grain {
position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .03;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation: grain 8s steps(8) infinite;
}
@keyframes grain {
0%,100%{background-position:0 0} 20%{background-position:-30px 18px}
40%{background-position:22px -26px} 60%{background-position:-16px 30px} 80%{background-position:28px 12px}
}
main, footer { position: relative; z-index: 1; }
/* ============================================================
CURSOR — a jeweller's loupe
============================================================ */
body.has-cursor, body.has-cursor * { cursor: none !important; }
.cx-cur {
position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
transform: translate(-50%,-50%); will-change: transform;
}
/* the precise centre point */
.cx-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--gold-hi);
box-shadow: 0 0 8px rgba(var(--accent-rgb),.9);
}
/* the ring: a thin arc that rotates, plus a chapter-tinted halo */
.cx-ring {
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
border: 1px solid rgba(var(--accent-rgb), .5);
transition: width var(--t2) var(--spring), height var(--t2) var(--spring),
background var(--t2) var(--fade), border-color var(--t2) var(--fade);
backdrop-filter: invert(.06) brightness(1.05);
}
.cx-ring::before {
content: ""; position: absolute; inset: -5px; border-radius: 50%;
border: 1px solid transparent;
border-top-color: rgba(var(--accent-rgb), .85);
border-inline-end-color: rgba(var(--accent-rgb), .35);
animation: curSpin 3.4s linear infinite;
}
@keyframes curSpin { to { transform: rotate(360deg) } }
.cx-ring.on-link { width: 62px; height: 62px; background: rgba(var(--accent-rgb), .10); border-color: rgba(var(--accent-rgb), .8); }
.cx-ring.on-text { width: 86px; height: 86px; background: rgba(var(--accent-rgb), .06); border-color: rgba(var(--accent-rgb), .3); }
.cx-ring.has-label {
width: 88px; height: 88px;
background: rgba(var(--accent-rgb), .95); border-color: transparent;
}
.cx-ring.has-label::before { opacity: 0; }
.cx-label {
font-family: var(--f-ui); font-size: 10px; font-weight: 800;
color: #12100b; letter-spacing: .04em; opacity: 0; white-space: nowrap;
transition: opacity var(--t1);
}
.cx-ring.has-label .cx-label { opacity: 1; }
/* letters lift and glow under the cursor */
.ch-hot {
color: var(--gold-hi) !important;
-webkit-text-fill-color: var(--gold-hi) !important;
text-shadow: 0 0 18px rgba(var(--accent-rgb), .85), 0 0 40px rgba(var(--accent-rgb), .4);
transform: translateY(-5px) scale(1.16);
}
.ch { transition: transform 420ms var(--spring), text-shadow 420ms var(--fade), color 420ms var(--fade); }
/* ============================================================
PROGRESS RAIL
============================================================ */
.rail {
position: fixed; top: 50%; inset-inline-start: 26px; z-index: 60;
transform: translateY(-50%);
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.rail-track { width: 1px; height: 200px; background: var(--hair-soft); position: relative; }
.rail-track span {
position: absolute; inset: 0;
background: linear-gradient(180deg, var(--accent), var(--gold-hi));
transform-origin: top; transform: scaleY(0);
box-shadow: 0 0 14px rgba(var(--accent-rgb), .55);
}
.rail-chapter {
writing-mode: vertical-rl; font-family: var(--f-ui);
font-size: 10px; letter-spacing: .04em; font-weight: 700;
color: var(--accent); transition: color var(--t3) var(--fade);
}
.rail-index { font-family: var(--f-mono); font-size: 10px; color: var(--text-3); letter-spacing: .1em; }
@media (max-width: 1150px) { .rail { display: none; } }
/* ============================================================
TYPOGRAPHY
============================================================ */
/* Hebrew collapses under negative tracking and opens up under positive —
the opposite of Latin. Descenders (ך ם ן ף ץ) also need real leading,
so display line-height never goes below 1.15. */
h1,h2,h3,h4 {
font-family: var(--f-display);
font-weight: 800;
font-variation-settings: "wght" 800, "wdth" 78;
line-height: 1.12;
letter-spacing: -.018em;
}
/* ---- EMPHASIS SYSTEM ----
An emphasised word changes typeface, grows, and catches light.
Bolding it white is not emphasis; it is just heavier text. */
/* the flourish keyword — a genuine Hebrew italic, which is rare */
.em-serif {
font-family: var(--f-elegant);
font-weight: 700; font-style: normal;
font-size: 1.22em;
letter-spacing: -.008em;
line-height: 1.02;
display: inline-block;
padding-inline: .06em;
}
/* Outlined counter-word for statement sections. --fillp (0..1) is
driven by scroll in motion.js: the accent colour pours into the
outline from the top, like a vessel filling, and drains back if
the visitor scrolls up. Static outline when JS is absent. */
/* The waterline's horizontal drift. A registered property so the drift
can be a CSS animation while the vertical position stays bound to
--fillp — animating background-position directly would overwrite the
scroll-driven fill height every frame. Browsers without @property
simply show the wave standing still. */
@property --wx { syntax: ""; inherits: false; initial-value: 0px; }
/* The liquid pours from the TOP — Netanel's explicit direction — and its
underside is a real drawn wave: two SVG tiles (built in js/motion.js
in the live accent colour — url() cannot read a CSS variable) hanging
from the waterline, crests and curling lips pointing DOWN. Each tile
is a full silhouette — swell, curl over a transparent tube, a white
foam line — because gradients can only make bands, and bands are
exactly what the client rejected: "that is not a wave". Sizes are in
em so the wave keeps its proportion at every font size. */
.em-out {
color: transparent;
-webkit-text-stroke: 1.9px rgba(var(--accent-rgb), .78);
background:
var(--wave-front, linear-gradient(transparent, transparent)),
var(--wave-back, linear-gradient(transparent, transparent)),
/* .97 at the bottom matches the front wave tile exactly — a different
alpha there draws a visible line where the water meets the wave */
linear-gradient(180deg, rgba(var(--accent-rgb), .8), rgba(var(--accent-rgb), .97));
background-repeat: repeat-x, repeat-x, no-repeat;
/* the min() collapses the wave tiles to nothing while the pour has not
started — otherwise a waveband floats under the letters' heads
before there is any water for it to hang from */
background-size:
calc(.9em * min(1, var(--fillp, 0) * 18)) .45em,
calc(1.15em * min(1, var(--fillp, 0) * 18)) .55em,
100% calc(var(--fillp, 0) * 100%);
/* waterline sits at fillp of the height; the em corrections pin each
tile's TOP just above it (background-position percentages resolve
against leftover space, not the box). The back wave hangs a touch
lower so its crests peek out beneath the front one. */
background-position:
var(--wx, 0px) calc(var(--fillp, 0) * 100% + var(--fillp, 0) * .45em - .06em),
calc(var(--wx, 0px) * -1.2778) calc(var(--fillp, 0) * 100% + var(--fillp, 0) * .55em - .02em),
top;
-webkit-background-clip: text; background-clip: text;
/* the surface travels: front rolls the way the curls face, the back
layer counter-drifts. -.9em is exactly one front tile and -1.2778
turns it into exactly one back tile, so the loop never seams. */
animation: emWave 10s linear infinite;
transition: -webkit-text-stroke-color var(--t3) var(--fade);
}
@keyframes emWave { from { --wx: 0em; } to { --wx: -.9em; } }
.em-huge { display: block; }
/* A lit gold word: gradient fill with the glow carried by text-shadow.
`filter: drop-shadow` would be clipped by the split-text masks and
leave a visible rectangle around the word. */
/* The lit word carries the sentence, so it carries weight: a black
upright serif, not a hairline italic. The italic read as elegant at
poster size and as frail everywhere else — and gradient fills make
thin strokes look thinner still, because there is not enough stroke
for the colour to happen on. */
.em-lit {
font-family: var(--f-elegant);
font-style: normal; font-weight: 700;
font-size: 1.3em; line-height: 1.04;
letter-spacing: -.01em;
display: inline-block; padding-inline: .07em;
background: linear-gradient(102deg, #a8853f 0%, #e7cd91 30%, #fff3d6 50%, #e7cd91 70%, #96763a 100%);
background-size: 240% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
text-shadow: 0 0 26px rgba(244,229,193,.34), 0 0 60px rgba(var(--accent-rgb),.22);
animation: shimmer 6s ease-in-out infinite;
}
/* the glow needs room to breathe outside the reveal mask */
.w:has(.em-lit) { overflow: visible; }
.em-lit .w, .w > .em-lit { overflow: visible; }
/* inline bold inside running text — gold, spaced, underlined by a hairline */
.hero-sub b, .story-step p b, .section-sub b, .bento-card p b, .cover-card p b {
position: relative;
font-weight: 700; color: var(--gold-hi);
font-size: 1.06em; letter-spacing: .005em;
text-shadow: 0 0 20px rgba(var(--accent-rgb), .3);
}
.hero-sub b::after, .story-step p b::after {
content: ""; position: absolute; inset-inline: 0; bottom: -.14em; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.75), transparent);
}
.grad-gold {
background: var(--grad-gold); background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.grad-accent {
background: linear-gradient(100deg, var(--accent) 0%, var(--gold-hi) 48%, var(--accent) 100%);
background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.shimmer { animation: shimmer 7s ease-in-out infinite; }
@keyframes shimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .16em; margin-bottom: -.16em; }
/* once the intro has landed the masks are released (see app.js) — an
edge letter's hover glow must spill freely, not shear off at the
word's box like a wall */
.masks-free .w { overflow: visible; }
.wi,.ch { display: inline-block; will-change: transform,opacity; }
/* A split host has handed its decorative classes down to the generated
word/char spans, so it must stop painting: it still wraps the very same
glyphs, and its gradient and glow would draw the word a second time.
Invisible while the children sit still — a ghost copy beside them the
moment the children are transformed, which is what the reveal does.
Doubled attribute for specificity; sizing is deliberately left alone so
nothing on the page changes size. */
[data-cx-carried][data-cx-carried] {
background: none;
text-shadow: none;
animation: none;
-webkit-text-stroke: 0;
}
/* Hebrew has no uppercase, so tracking is the only "elegance" lever
available for a small label like this. */
.eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--f-ui);
font-size: 12px; font-weight: 600; letter-spacing: .03em;
color: var(--accent); margin-bottom: 20px;
transition: color var(--t3) var(--fade);
}
.eyebrow::before {
content: ""; width: 36px; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent));
}
.eyebrow::after {
content: ""; width: 5px; height: 5px; border-radius: 50%;
background: var(--accent); box-shadow: 0 0 10px var(--accent);
animation: eyedot 3.2s ease-in-out infinite;
}
@keyframes eyedot {
0%, 100% { box-shadow: 0 0 8px var(--accent); }
50% { box-shadow: 0 0 16px var(--accent), 0 0 30px rgba(var(--accent-rgb),.5); }
}
.section-title {
font-size: clamp(2.6rem, 6.4vw, 5.2rem);
font-variation-settings: "wght" 850, "wdth" 72;
line-height: 1.08; letter-spacing: -.022em;
margin-bottom: 22px; text-wrap: balance;
}
.section-sub {
color: #cfcaba;
font-family: var(--f-read);
font-size: clamp(1.25rem, 2vw, 1.8rem);
line-height: 1.55;
max-width: min(980px, 96%); margin-bottom: 56px;
}
.section-sub b, .statement .sub b { color: var(--gold-hi); font-weight: 700; }
.statement { padding: clamp(72px,11vw,160px) 0; text-align: center; position: relative; z-index: 1; }
.statement .container.statement-wide { width: min(96%, 1760px); }
.statement .eyebrow { justify-content: center; margin-bottom: 26px; }
/* The statement carries the same black serif as the hero poster — the
condensed Karantina read as thin next to it, and thin is the one thing
a statement must never be. */
.statement h2 {
font-family: var(--f-display);
font-variation-settings: "wght" 900, "wdth" 70;
font-weight: 900;
font-size: clamp(3.2rem, 12.5vw, 12rem);
line-height: 1.02; letter-spacing: -.028em; text-wrap: balance;
}
.statement .sub {
margin-top: 30px; color: #d3cec0;
font-family: var(--f-read);
font-size: clamp(1.3rem, 2.3vw, 2.05rem);
line-height: 1.55;
max-width: min(960px, 94%); margin-inline: auto;
}
/* ============================================================
BUTTONS — layered metal, not flat fills
============================================================ */
/* Type fills the button. A large pill with small text in the middle
reads as unfinished, so the label is sized to the control. */
.btn {
position: relative; isolation: isolate; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 18px 30px; border-radius: 999px;
font-family: var(--f-ui); font-weight: 800;
font-size: 1.12rem; line-height: 1.05;
letter-spacing: -.01em; border: 1px solid transparent; white-space: nowrap;
transition: transform var(--t2) var(--move), box-shadow var(--t2) var(--fade),
color var(--t2) var(--fade), border-color var(--t2) var(--fade);
}
.btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.btn-lg { padding: 21px 34px; font-size: clamp(1.14rem, 1.5vw, 1.34rem); }
.btn-block { width: 100%; padding-inline: 16px; font-size: clamp(1.06rem, 3.1vw, 1.22rem); }
/* sweeping specular highlight, on hover only — restrained, not a disco */
.btn::after {
content: ""; position: absolute; top: -60%; bottom: -60%; width: 42%;
inset-inline-end: 130%; z-index: 2; pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
transform: skewX(-16deg);
transition: inset-inline-end 780ms var(--move);
}
.btn:hover::after { inset-inline-end: -70%; }
/* ---- The gold button is jewellery, not upholstery -------------
The metal is layered rose-gold into bronze, ringed twice — a lit
champagne rim outside, a machined bevel inside — with a halo that
breathes and a blade of light that crosses the WHOLE face, slowly,
forever. The blade is a translated element, not a background
trick: percentage background-position only shows a 300%-wide
image inside a narrow window of its travel, which is why the old
sheen only ever flashed at one end. A transform crossing from
-150% to +150% of the blade's own width has no such window — the
full sweep is geometry. */
.btn-gold {
background:
radial-gradient(130% 190% at 30% -50%, rgba(255,246,214,.95), transparent 46%),
radial-gradient(120% 170% at 78% 130%, rgba(122,64,36,.55), transparent 52%),
linear-gradient(150deg,#f9ecc4 0%,#eccf94 20%,#cfa763 42%,#a37c42 62%,#7d5c2e 82%,#caa568 100%);
color: #150f06;
border: 1px solid #f8e7b6;
text-shadow: 0 1px 0 rgba(255,246,214,.5);
box-shadow:
0 0 0 1px rgba(88,64,26,.95),
0 0 0 4px rgba(212,180,110,.22),
0 0 26px 1px rgba(226,196,126,.52),
0 14px 34px -12px rgba(0,0,0,.85),
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -3px 8px rgba(58,38,10,.55);
animation: goldbreathe 4.6s ease-in-out infinite;
}
/* the machined inner ring — what separates a control from a sticker */
.btn-gold::before {
content: ""; position: absolute; inset: 3px; border-radius: inherit;
border: 1px solid rgba(255,250,235,.5);
border-bottom-color: rgba(74,50,16,.45);
pointer-events: none;
}
/* the blade */
.btn-gold::after {
content: ""; position: absolute; top: -8%; bottom: -8%;
inset-inline-start: 0; width: 56%;
background: linear-gradient(100deg,
transparent 8%,
rgba(255,250,236,.20) 32%,
rgba(255,255,255,.9) 50%,
rgba(255,250,236,.20) 68%,
transparent 92%);
transform: translateX(-160%);
animation: goldblade 5.2s cubic-bezier(.6,.08,.34,.94) infinite;
pointer-events: none;
}
@keyframes goldblade {
0% { transform: translateX(-160%); }
58% { transform: translateX(340%); }
100% { transform: translateX(340%); }
}
@keyframes goldbreathe {
0%, 100% { box-shadow:
0 0 0 1px rgba(88,64,26,.95),
0 0 0 4px rgba(212,180,110,.22),
0 0 26px 1px rgba(226,196,126,.52),
0 14px 34px -12px rgba(0,0,0,.85),
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -3px 8px rgba(58,38,10,.55); }
50% { box-shadow:
0 0 0 1px rgba(88,64,26,.95),
0 0 0 5px rgba(226,196,126,.38),
0 0 46px 8px rgba(240,212,146,.7),
0 14px 34px -12px rgba(0,0,0,.85),
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -3px 8px rgba(58,38,10,.55); }
}
.btn-gold:hover {
transform: translateY(-2px);
filter: brightness(1.08) saturate(1.05);
}
.btn-gold:active { transform: translateY(0) scale(.985); }
.btn-line {
color: #f5efdf;
background: linear-gradient(160deg, rgba(var(--accent-rgb),.12), rgba(255,255,255,.02) 55%, rgba(var(--accent-rgb),.08));
border: 1px solid rgba(var(--accent-rgb), .62);
backdrop-filter: blur(10px);
box-shadow:
0 0 0 1px rgba(6,7,10,.8),
0 0 0 3px rgba(var(--accent-rgb), .13),
0 0 20px -2px rgba(var(--accent-rgb), .4),
inset 0 1px 0 rgba(255,255,255,.14),
inset 0 0 24px rgba(var(--accent-rgb), .12);
}
.btn-line::before {
content: ""; position: absolute; inset: 3px; border-radius: inherit;
border: 1px solid rgba(var(--accent-rgb), .22);
pointer-events: none;
}
/* the same blade, quieter, on its own clock so the pair never flash
in unison */
.btn-line::after {
content: ""; position: absolute; top: -8%; bottom: -8%;
inset-inline-start: 0; width: 56%;
background: linear-gradient(100deg,
transparent 8%,
rgba(var(--accent-rgb),.14) 32%,
rgba(255,248,230,.55) 50%,
rgba(var(--accent-rgb),.14) 68%,
transparent 92%);
transform: translateX(-160%);
animation: goldblade 6.4s cubic-bezier(.6,.08,.34,.94) 1.8s infinite;
pointer-events: none;
}
.btn-line:hover {
transform: translateY(-2px);
border-color: rgba(var(--accent-rgb),.55);
color: #fff;
box-shadow: 0 12px 30px -14px rgba(var(--accent-rgb),.7);
}
.btn-line:hover::before { opacity: 1; }
.btn-line:active { transform: translateY(0) scale(.985); }
/* click ripple */
.btn .ripple {
position: absolute; border-radius: 50%; pointer-events: none; z-index: 3;
background: radial-gradient(circle, rgba(255,255,255,.5), transparent 68%);
transform: translate(-50%,-50%) scale(0); animation: ripple 620ms var(--fade) forwards;
}
@keyframes ripple { to { transform: translate(-50%,-50%) scale(1); opacity: 0 } }
/* ============================================================
NAV
============================================================ */
.skip-link {
position: fixed; top: -80px; inset-inline-end: 16px; z-index: 300;
background: var(--gold); color: #17130a; font-weight: 800;
padding: 13px 22px; border-radius: 10px; transition: top var(--t2);
}
.skip-link:focus { top: 14px; }
.nav { position: fixed; top: 0; inset-inline: 0; z-index: 100; transition: background var(--t3) var(--fade); }
.nav.scrolled {
background: rgba(6,7,10,.70);
backdrop-filter: blur(22px) saturate(1.35);
-webkit-backdrop-filter: blur(22px) saturate(1.35);
border-bottom: 1px solid var(--hair-soft);
}
/* The bar uses the whole row on every screen: brand at one end, CTA
at the other, and the links spread themselves across the middle
instead of huddling beside the button and leaving the rest black. */
.nav-inner {
width: min(1880px, 96%);
margin-inline: auto; display: flex; align-items: center;
gap: clamp(14px, 1.6vw, 30px);
padding: 15px 0;
}
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-logo {
width: 42px; height: 42px; object-fit: cover; border-radius: 11px;
border: 1px solid rgba(var(--accent-rgb),.35);
transition: border-color var(--t3) var(--fade), box-shadow var(--t2);
}
.nav-brand:hover .nav-logo { box-shadow: 0 0 18px rgba(var(--accent-rgb),.4); }
/* on a phone the brand is the whole top row's anchor — let it read */
@media (max-width: 900px) {
.nav-logo { width: 50px; height: 50px; border-radius: 13px; }
.nav-name { font-size: 1.2rem; }
}
.nav-name { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.1rem, 1.15vw, 1.35rem); letter-spacing: .06em; }
.nav-name b { font-family: var(--f-elegant); font-weight: 400; color: var(--accent); transition: color var(--t3); }
.nav-links {
display: flex;
flex: 1 1 auto;
justify-content: space-evenly;
margin-inline: clamp(12px, 2.4vw, 56px); /* breathing room off the brand and the CTA */
}
.nav-links a {
position: relative; font-family: var(--f-ui);
font-size: clamp(.94rem, 1.08vw, 1.26rem); font-weight: 600; color: var(--text-2);
padding: 9px clamp(10px, 1vw, 20px); border-radius: 999px;
transition: color var(--t1) var(--fade);
}
.nav-links a::after {
content: ""; position: absolute; inset-inline: 14px; bottom: 4px; height: 1px;
background: var(--accent); transform: scaleX(0); transform-origin: inline-end;
transition: transform var(--t2) var(--move);
}
.nav-links a:hover { color: var(--gold-hi); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: inline-start; }
.nav-cta { font-size: .89rem; padding: 12px 24px; }
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.nav-burger span { width: 24px; height: 1.5px; background: var(--text); transition: var(--t2) var(--move); }
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu {
display: none; flex-direction: column;
background: rgba(6,7,10,.97); backdrop-filter: blur(22px);
border-top: 1px solid var(--hair-soft); padding: 16px 5vw 26px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 14px 0; font-size: 1.05rem; font-weight: 600; border-bottom: 1px solid var(--hair-soft); }
.mobile-menu .btn { margin-top: 18px; }
@media (max-width:1000px){ .nav-links,.nav-cta{display:none} .nav-burger{display:flex;margin-inline-start:auto} }
/* ============================================================
HERO
============================================================ */
.hero {
position: relative; min-height: 100svh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
/* 104px bottom: the trust row now sits above the scroll cue's zone,
so the cue's line never pierces the words */
text-align: center; padding: 96px 5vw 104px; z-index: 1;
}
/* ---- THE FILM ------------------------------------------------
Lives at the very back of the hero's stacking context, under the
scrim, so every overlay that protects the text also grades the
footage. The gilding is done here rather than baked into the
encode: a gold cast in soft-light, and a vignette that hands the
frame's edges back to the page's own black. */
.hero-media {
position: absolute; inset: 0; z-index: -2;
overflow: hidden; pointer-events: none;
}
.hero-media video {
width: 100%; height: 100%; object-fit: cover;
/* no filter here on purpose: a CSS filter re-runs on every decoded
frame for the life of the loop. The whole grade is baked into the
encode instead, so compositing the film costs one plain blit. */
}
.hero-media::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6,7,10,.62), rgba(6,7,10,.18) 30%, rgba(6,7,10,.22) 62%, rgba(6,7,10,.96)),
radial-gradient(120% 90% at 50% 50%, transparent 34%, rgba(6,7,10,.66) 100%),
linear-gradient(115deg, rgba(200,169,106,.20), transparent 45%, rgba(200,169,106,.15));
}
/* the gold cast rides a second layer so it can blend instead of paint */
.hero-media::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(160deg, rgba(212,180,110,.5), rgba(138,112,64,.2) 50%, rgba(212,180,110,.42));
mix-blend-mode: soft-light;
}
.hero::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(56% 44% at 50% 46%, rgba(6,7,10,.86), rgba(6,7,10,.5) 56%, transparent 78%),
linear-gradient(180deg, rgba(6,7,10,.7), transparent 26%, transparent 74%, rgba(6,7,10,.92));
}
/* Bigger, and quiet. The breathing halo read as a glowing picture
frame around the logo — Netanel flagged it — so the light here is
a soft static presence and the logo itself is the object. */
.hero-logo {
width: clamp(126px, 14vw, 192px); border-radius: 28px; margin: 0 auto 16px;
border: 1px solid rgba(var(--accent-rgb),.32);
box-shadow:
0 0 0 1px rgba(6,7,10,.8),
0 0 18px rgba(var(--accent-rgb),.14),
0 24px 60px -24px #000;
}
/* The headline is a poster lockup: every line is fitted by js/app.js
so all three share the same start and end edge, whatever the
screen. The clamp here is only the pre-fit paint and the no-js
fallback. */
.hero h1 {
font-size: clamp(2.5rem, 7.6vw, 6rem);
font-variation-settings: "wght" 900, "wdth" 68; /* condensed black serif */
line-height: 1.05; letter-spacing: -.026em; margin-bottom: 18px;
width: min(1720px, 96%); /* the red-line margins: nearly the full stage */
margin-inline: auto;
}
.hero h1 .line { display: block; white-space: nowrap; }
/* The white line is not white — it is ivory with a top light, the way
engraved lettering catches a lamp. STATIC on purpose: a pulsing
text-shadow at this size reads as a rendering glitch at the glyph
edges, not as atmosphere. The moving light on this page belongs to
the gold line, the buttons and the film — the headline holds still. */
.hero h1 .line:not(.em-lit) {
color: #f4f1e8; /* the no-js / pre-split paint */
filter:
drop-shadow(0 3px 18px rgba(4,5,8,.9))
drop-shadow(0 0 34px rgba(244,241,232,.16));
}
/* The gradient must sit on the generated char spans, not on the line:
-webkit-text-fill-color inherits into the children but a clipping
background does not, and the headline would render invisible. The
gradient is vertical, so per-char application is seamless. */
.hero h1 .line:not(.em-lit) .ch {
background: linear-gradient(180deg, #ffffff 0%, #f6f2e6 46%, #cfc8b4 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* the deck under the poster: as wide as the headline, framed by two
hairlines of gold so it reads as part of the lockup */
.hero-sub {
color: #d3cec0;
font-family: var(--f-read);
font-size: clamp(1.1rem, 1.75vw, 1.5rem);
line-height: 1.58;
width: min(1400px, 94%); max-width: none;
margin: 0 auto 26px;
padding-block: 12px;
background:
linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.55) 18%, rgba(var(--accent-rgb),.55) 82%, transparent) top / 100% 1px no-repeat,
linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.3) 30%, rgba(var(--accent-rgb),.3) 70%, transparent) bottom / 100% 1px no-repeat;
text-shadow: 0 1px 14px rgba(4,5,8,.85);
}
.hero-sub b { color: var(--gold-hi); font-weight: 700; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.hero-creds {
display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap;
font-family: var(--f-ui); font-size: .84rem; color: var(--text-3);
}
.hero-creds span { display: inline-flex; align-items: center; gap: 8px; }
.hero-creds i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); font-style: normal; }
.scroll-cue {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
font-family: var(--f-ui); font-size: 11px; letter-spacing: .04em; color: var(--text-3);
}
.scroll-cue i { width: 1px; height: 34px; background: linear-gradient(var(--accent),transparent); animation: cue 2.4s var(--fade) infinite; }
@keyframes cue {
0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top}
46%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom}
}
/* ============================================================
MARQUEE — GSAP-driven, never restarts on scroll
============================================================ */
.marquee {
overflow: hidden; padding: 20px 0; position: relative; z-index: 1;
border-block: 1px solid var(--hair-soft);
background: linear-gradient(180deg, rgba(var(--accent-rgb),.035), transparent);
mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
-webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track { display: flex; align-items: center; gap: 34px; white-space: nowrap; width: max-content; will-change: transform; }
.marquee-track span {
font-family: var(--f-display); font-weight: 800;
font-size: clamp(1.1rem,2.1vw,1.7rem);
color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb),.4);
transition: -webkit-text-stroke-color var(--t3) var(--fade);
}
.marquee-track span.solid {
color: var(--accent); -webkit-text-stroke: 0;
transition: color var(--t3) var(--fade);
}
.marquee-track i { color: var(--gold-lo); font-style: normal; font-size: .8rem; }
/* ============================================================
STORY · THE ROAD
------------------------------------------------------------
A winding route with five stops, flown over by a camera.
The section is tall; one sticky viewport holds the screen while
js/road.js drives a single scalar u (0..1) from scroll position:
the camera transform, each stop's nearness, the road's lit
length and the panel presences are all derived from that one
number, so nothing can fall out of sync with anything else.
Sticky — not a GSAP pin. A pin with a percentage `end` measures
against the trigger height that the pin spacer just grew, and
compounds on every refresh.
============================================================ */
.road {
position: relative;
z-index: 1;
height: 560svh; /* recomputed by js from the stop count */
}
.road-viewport {
position: sticky;
top: 0;
height: 100svh;
overflow: hidden;
display: grid;
place-items: center;
}
/* ---- THE WORLD ------------------------------------------------
A fixed 1000 x 1980 stage. The camera translates and scales it
from its top-left corner, so world coordinates stay stable and
the maths in road.js is a plain focus-point conversion. */
.road-world {
position: absolute;
top: 0; left: 0;
width: 1000px; height: 1980px;
transform-origin: 0 0;
will-change: transform, filter;
direction: ltr; /* the world is drawn LTR; the page is RTL */
}
.road-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.road-halo { stroke: rgba(var(--accent-rgb), .34); stroke-width: 92; stroke-linecap: round; opacity: .6; }
.road-edge { stroke: rgba(var(--accent-rgb), .55); stroke-width: 60; stroke-linecap: round; }
.road-face { stroke: url(#rgAsphalt); stroke-width: 54; stroke-linecap: round; }
.road-centre {
stroke: rgba(244, 229, 193, .30); stroke-width: 2.6;
stroke-dasharray: 12 30; stroke-linecap: round;
animation: roadflow 2.4s linear infinite;
}
@keyframes roadflow { to { stroke-dashoffset: -42; } }
/* price-scale ticks along the verges — the road reads as an axis */
.road-ticks line { stroke: rgba(var(--accent-rgb), .34); stroke-width: 1.6; stroke-linecap: round; }
.road-ticks line.maj { stroke: rgba(244, 229, 193, .5); stroke-width: 2.4; }
/* the lit part of the route: everything already travelled */
.road-prog {
stroke: url(#rgProg); stroke-width: 7; stroke-linecap: round;
filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .75));
}
/* the signal running ahead of the camera */
.road-comet { position: absolute; top: 0; left: 0; width: 0; height: 0; will-change: transform; }
/* the tail: road.js rotates the comet along the path's direction, so
the streak always trails the head like a real signal in motion */
.road-comet::before {
content: ""; position: absolute;
right: 4px; top: -1.5px;
width: 54px; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .9));
filter: blur(.4px);
}
.road-comet i {
position: absolute; left: -9px; top: -9px;
width: 18px; height: 18px; border-radius: 50%;
background: radial-gradient(circle, #fff8e6 0%, rgb(var(--accent-rgb)) 42%, transparent 72%);
box-shadow: 0 0 26px 6px rgba(var(--accent-rgb), .6);
animation: cometpulse 1.9s cubic-bezier(0,0,.32,1) infinite;
}
@keyframes cometpulse { 0%,100% { transform: scale(1); opacity: .95 } 50% { transform: scale(1.32); opacity: .65 } }
/* ---- THE STOPS -------------------------------------------------
--k is nearness to the camera, 0..1, written every frame by
road.js. Everything about a stop is a function of it, so a stop
that is behind you dims and softens by exactly as much as it is
behind you — no state classes that can get stuck. */
.road-nodes { position: absolute; inset: 0; }
.rnode {
--k: 0;
position: absolute;
left: var(--nx); top: var(--ny);
width: 236px; height: 236px; margin: -118px 0 0 -118px;
display: grid; place-items: center;
opacity: calc(.28 + .72 * var(--k));
filter: blur(calc((1 - var(--k)) * 2.1px));
transform: scale(calc(.68 + .32 * var(--k)));
}
.rnode-halo {
position: absolute; inset: -42%;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--accent-rgb), calc(.30 * var(--k))) 0%, transparent 66%);
}
/* ---- the measuring dial: bezel ticks, the journey arc, and five
station dots with THIS one lit — "you are here", at any zoom ---- */
.rnode-dial { position: absolute; inset: 0; opacity: calc(.4 + .6 * var(--k)); }
.rnode-dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dial-ticks line { stroke: rgba(var(--accent-rgb), calc(.13 + .3 * var(--k))); stroke-width: 1.1; stroke-linecap: round; }
.dial-ticks line.maj { stroke: rgba(244,229,193, calc(.24 + .44 * var(--k))); stroke-width: 1.7; }
.dial-track { fill: none; stroke: rgba(var(--accent-rgb), .14); stroke-width: 1; }
.dial-arc {
fill: none; stroke: var(--gold-hi); stroke-width: 2.6; stroke-linecap: round;
opacity: calc(.35 + .65 * var(--k));
filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .75));
}
.sd { fill: rgba(var(--accent-rgb), .3); }
.sd-past { fill: rgba(var(--accent-rgb), .85); }
.sd-here {
fill: var(--gold-hi);
filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .95));
transform-box: fill-box; transform-origin: center;
animation: sdpulse 2.2s ease-in-out infinite;
}
@keyframes sdpulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.35) } }
.rnode-ring { position: absolute; inset: 15%; animation: rspin 26s linear infinite; }
.rnode-ring svg { width: 100%; height: 100%; display: block; }
.rnode-ring circle { fill: none; stroke: rgba(var(--accent-rgb), calc(.12 + .5 * var(--k, 0))); stroke-width: 1.4; stroke-dasharray: 3 13; }
@keyframes rspin { to { transform: rotate(360deg) } }
.rnode-core {
position: relative;
width: 126px; height: 126px;
display: grid; place-items: center;
clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
background: linear-gradient(160deg, rgba(var(--accent-rgb), calc(.12 + .26 * var(--k))), rgba(8,10,14,.96) 62%);
box-shadow: 0 0 0 1.5px rgba(var(--accent-rgb), calc(.35 + .35 * var(--k))),
0 0 52px rgba(var(--accent-rgb), calc(.38 * var(--k)));
transition: transform var(--t3) var(--move);
}
.rnode.is-here .rnode-core { transform: scale(1.05); }
/* ---- the scene inside the core ---- */
.rnode-face { width: 100%; height: 100%; display: grid; place-items: center; perspective: 340px; }
.rnode-face svg { width: 74px; height: 74px; overflow: visible; }
.rnode-face .art {
stroke: var(--accent); fill: none;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* the soft 3D float every station face shares (the candle chart keeps
its own, stronger tilt below) — staggered so no two stations bob in
sync when both are on screen in the wide shots */
@keyframes rn-tilt-soft {
0%,100% { transform: rotateY(-9deg) rotateX(5deg) }
50% { transform: rotateY(9deg) rotateX(-3deg) }
}
.rnode-mclock .rnode-face svg { animation: rn-tilt-soft 9s ease-in-out infinite; }
.rnode-mstreams .rnode-face svg { animation: rn-tilt-soft 8s ease-in-out infinite .6s; }
.rnode-mfilter .rnode-face svg { animation: rn-tilt-soft 8.6s ease-in-out infinite 1.2s; }
.rnode-mhex .rnode-face svg { animation: rn-tilt-soft 8.2s ease-in-out infinite 1.8s; }
/* 01 · a real watch face — metal bezel, lit dial, weighted hands */
.art-clock .a-bezel { fill: none; stroke-width: 2.4; }
.art-clock .a-face2 { stroke: rgba(var(--accent-rgb), .4); stroke-width: .8; }
.art-clock .a-min-track { fill: none; stroke: rgba(var(--accent-rgb), .5); stroke-width: 1.5; }
.art-clock .a-hr-track { fill: none; stroke: var(--gold-hi); stroke-width: 2.2; }
.art-clock .a-hand {
stroke: var(--gold-hi);
filter: drop-shadow(0 1px 1.3px rgba(0,0,0,.65));
transform-box: view-box; transform-origin: 50% 50%;
}
.art-clock .a-hand-h { stroke-width: 2.6; animation: rn-hand 36s linear infinite; }
.art-clock .a-hand-m { stroke-width: 1.7; animation: rn-hand 6s linear infinite; }
@keyframes rn-hand { to { transform: rotate(360deg) } }
.art-clock .a-pin { fill: var(--gold-hi); stroke: rgba(0,0,0,.5); stroke-width: .6; }
.art-clock .a-glass { fill: rgba(255,255,255,.05); stroke: none; }
/* 02 · the japanese candles — the panic candle grows as you watch,
and the whole chart floats in real 3D */
.rnode-mcandle .rnode-face svg { animation: rn-tilt 7s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes rn-tilt {
0%,100% { transform: rotateY(-13deg) rotateX(4deg) }
50% { transform: rotateY(13deg) rotateX(-3deg) }
}
.art-candle .a-base { stroke: rgba(var(--accent-rgb), .4); }
.art-candle .a-wick { stroke: #dfd9c8; stroke-width: 1.4; }
.art-candle .a-up { fill: rgba(76,215,135,.30); stroke: var(--up); }
.art-candle .a-dn { fill: rgba(232,105,92,.32); stroke: var(--down); }
.art-candle .a-shade { fill: rgba(0,0,0,.38); stroke: none; }
.art-candle .a-c2 {
transform-box: view-box; transform-origin: 50% 17.7%;
animation: rn-panic 4.6s cubic-bezier(.6,0,.35,1) infinite;
}
@keyframes rn-panic {
0%, 12% { transform: scaleY(.42) }
55%, 86% { transform: scaleY(1) }
100% { transform: scaleY(.42) }
}
/* 03 · the drowning bell — 99 unread, toasts streaming past */
.art-alerts .a-toast {
fill: rgba(var(--accent-rgb), .1); stroke: rgba(var(--accent-rgb), .45); stroke-width: 1;
animation: rn-toast 3.4s ease-in-out infinite;
}
.art-alerts .a-t2 { animation-delay: .85s }
.art-alerts .a-t3 { animation-delay: 1.7s }
.art-alerts .a-t4 { animation-delay: 2.55s }
@keyframes rn-toast {
0% { opacity: 0; transform: translateX(6px) }
16% { opacity: 1 }
70% { opacity: 1 }
100% { opacity: 0; transform: translateX(-6px) }
}
.art-alerts .a-bellg {
transform-box: view-box; transform-origin: 50% 18%;
animation: rn-swing 2.6s ease-in-out infinite;
}
@keyframes rn-swing { 0%,100% { transform: rotate(-7deg) } 50% { transform: rotate(7deg) } }
.art-alerts .a-bellbody { fill: rgba(var(--accent-rgb), .12); stroke: var(--gold-hi); stroke-width: 1.7; }
.art-alerts .a-belltop, .art-alerts .a-bellclap { stroke: var(--gold-hi); stroke-width: 1.7; }
.art-alerts .a-badge {
fill: var(--gold-hi); stroke: rgba(6,7,10,.85); stroke-width: 1;
transform-box: fill-box; transform-origin: center;
animation: rn-badge 2.6s ease-in-out infinite;
filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .7));
}
@keyframes rn-badge { 0%,100% { transform: scale(1) } 10% { transform: scale(1.22) } 22% { transform: scale(1) } }
.art-alerts .a-badgetxt {
fill: #17130a; stroke: none;
font: 700 4.4px var(--f-mono); text-anchor: middle;
}
/* 04 · the writing desk — noise falls in, a golden pen writes the
one line, right to left. Every element must be readable ALONE:
the message-lines, the candles, the chart, the pen. */
.art-write .a-in { animation: rn-noisefall 4.2s ease-in infinite; }
.art-write .a-in2 { animation-delay: 1.3s; }
.art-write .a-in3 { animation-delay: 2.6s; }
@keyframes rn-noisefall {
0% { opacity: 0; transform: translateY(-3px) }
14% { opacity: .95; transform: translateY(0) }
52% { opacity: .95; transform: translateY(4px) }
74%,100%{ opacity: 0; transform: translateY(9px) }
}
.art-write .a-msg { stroke: rgba(240,232,210,.6); stroke-width: 1.5; }
.art-write .a-cwick { stroke: rgba(var(--accent-rgb), .8); stroke-width: 1.2; }
.art-write .a-cbody { fill: rgba(var(--accent-rgb), .3); stroke: rgba(var(--accent-rgb), .85); stroke-width: 1.1; }
.art-write .a-zig { stroke: rgba(var(--accent-rgb), .8); stroke-width: 1.4; }
.art-write .a-guide {
stroke: rgba(var(--accent-rgb), .35); stroke-width: 1.1;
stroke-dasharray: 2.4 3;
animation: rn-guideflow 1.5s linear infinite;
}
@keyframes rn-guideflow { to { stroke-dashoffset: -10.8 } }
/* the line being written — drawn right-to-left, exactly as the pen
travels, then held; both fade together and begin again */
.art-write .a-one {
stroke: var(--gold-hi); stroke-width: 3.2; stroke-linecap: round;
stroke-dasharray: 1; stroke-dashoffset: 1;
animation: rn-write-line 4.2s cubic-bezier(.3,0,.5,1) infinite;
filter: drop-shadow(0 0 7px rgba(var(--accent-rgb), .95));
}
@keyframes rn-write-line {
0%,10% { stroke-dashoffset: 1; opacity: 1 }
72% { stroke-dashoffset: 0; opacity: 1 }
92% { stroke-dashoffset: 0; opacity: 1 }
100% { stroke-dashoffset: 0; opacity: 0 }
}
/* the pen rides the line's tip: starts at the right end, finishes at
the left, leaning like a hand mid-sentence */
.art-write .a-pen {
transform-box: view-box; transform-origin: 0 0;
transform: translate(40px, 40px) rotate(-32deg);
animation: rn-write-pen 4.2s cubic-bezier(.3,0,.5,1) infinite;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
@keyframes rn-write-pen {
0%,10% { transform: translate(40px, 40px) rotate(-32deg); opacity: 1 }
30% { transform: translate(30.4px, 40px) rotate(-29deg) }
50% { transform: translate(20.8px, 40px) rotate(-34deg) }
72% { transform: translate(8px, 40px) rotate(-32deg); opacity: 1 }
92% { transform: translate(8px, 40px) rotate(-32deg); opacity: 1 }
100% { transform: translate(8px, 40px) rotate(-32deg); opacity: 0 }
}
.art-write .a-nib { fill: var(--gold-hi); stroke: rgba(0,0,0,.45); stroke-width: .5; }
.art-write .a-slit { stroke: rgba(6,7,10,.8); stroke-width: .6; }
.art-write .a-hole { fill: rgba(6,7,10,.8); stroke: none; }
.art-write .a-barrel { fill: rgba(var(--accent-rgb), .9); stroke: rgba(0,0,0,.4); stroke-width: .5; }
/* 05 · the answer, mirroring station 3: ONE golden setup arrives */
.art-phone .a-ph { fill: rgba(8,10,14,.6); stroke: var(--gold-hi); stroke-width: 1.6; }
.art-phone .a-notch { stroke: rgba(var(--accent-rgb), .6); stroke-width: 1.4; }
.art-phone .a-msg { animation: rn-msg 3.6s cubic-bezier(.2,.8,.3,1) infinite; }
@keyframes rn-msg {
0% { opacity: 0; transform: translateY(5px) }
14% { opacity: 1; transform: translateY(0) }
82% { opacity: 1 }
100% { opacity: 0 }
}
.art-phone .a-card {
fill: rgba(var(--accent-rgb), .14); stroke: var(--gold-hi); stroke-width: 1.3;
filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .45));
}
.art-phone .a-chart {
stroke: var(--up); stroke-width: 1.8;
stroke-dasharray: 1; stroke-dashoffset: 1;
animation: rn-chartdraw 3.6s ease-out infinite;
}
@keyframes rn-chartdraw { 0%,20% { stroke-dashoffset: 1 } 55%,100% { stroke-dashoffset: 0 } }
.art-phone .a-l1, .art-phone .a-l2 { stroke: rgba(240,232,210,.4); stroke-width: 1.1; }
.art-phone .a-badge1 {
fill: var(--gold-hi); stroke: rgba(6,7,10,.85); stroke-width: 1;
transform-box: fill-box; transform-origin: center;
animation: rn-badge 3.6s ease-in-out infinite;
filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .7));
}
.art-phone .a-badgetxt1 {
fill: #17130a; stroke: none;
font: 700 4.4px var(--f-mono); text-anchor: middle;
}
/* ---- labels around the medallion ---- */
.rnode-num {
position: absolute; top: -8px; right: -2px;
font-family: var(--f-mono); font-size: 28px; font-weight: 700;
color: var(--gold-hi); letter-spacing: .02em;
text-shadow: 0 0 14px rgba(var(--accent-rgb), .85), 0 2px 10px rgba(4,5,8,.9);
opacity: var(--tag, 0); /* only in the overview shots */
}
.rnode-tag {
position: absolute; bottom: -28px; left: 50%;
transform: translateX(-50%);
white-space: nowrap; direction: rtl;
font-family: var(--f-ui); font-size: 34px; font-weight: 800;
letter-spacing: .02em; color: var(--gold-hi);
text-shadow: 0 0 18px rgba(var(--accent-rgb), .5), 0 2px 14px rgba(6,7,10,.95);
opacity: var(--tag, 0); /* only in the overview shots */
}
/* the in-station answer to "where am I" — appears as the camera lands */
.rnode-stat {
position: absolute; top: 101%; left: 50%;
transform: translate(-50%, calc((1 - var(--k)) * 8px));
display: flex; align-items: baseline; gap: 8px;
white-space: nowrap; direction: rtl;
font-family: var(--f-ui);
opacity: clamp(0, calc((var(--k) - .72) / .24), 1);
}
.rnode-stat b {
font-size: 27px; font-weight: 800; color: var(--gold-hi);
letter-spacing: .02em;
text-shadow: 0 0 18px rgba(var(--accent-rgb), .8), 0 2px 14px rgba(4,5,8,.9);
}
.rnode-stat i {
font-style: normal; font-size: 17px; font-weight: 600; color: #cfc9b8;
text-shadow: 0 1px 10px rgba(4,5,8,.9);
}
/* a stop already visited keeps its light but stops shouting */
.rnode.is-past .rnode-core {
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5), 0 0 26px rgba(var(--accent-rgb), .16);
}
/* ---- SCREEN-SPACE LAYERS --------------------------------------- */
/* the two wide shots share the stops' axis: route left, words right.
The words own their half for real — Netanel: the road should read
from afar, but the text zone must be FULL, not a caption. */
.road-intro, .road-outro {
position: absolute; z-index: 3;
top: 50%; right: 4.5vw;
transform: translateY(-50%);
width: min(62vw, 1180px);
text-align: start;
pointer-events: none;
}
/* --fit is written by road.js: measured against the viewport so the
headline AND its subtitle always fit on screen together — no word
of these two captions may ever be pushed past the frame. */
.road-intro h2, .road-outro h2 {
font-size: calc(clamp(3.7rem, 9vw, 8.4rem) * var(--fit, 1));
font-variation-settings: "wght" 860, "wdth" 72;
line-height: 1.05; letter-spacing: -.024em; text-wrap: balance;
}
.road-intro-sub, .road-outro p {
margin-top: calc(26px * var(--fit, 1)); color: #d3cec0;
font-family: var(--f-read);
font-size: calc(clamp(1.5rem, 2.6vw, 2.4rem) * var(--fit, 1));
line-height: 1.5;
}
.road-intro .eyebrow { font-size: calc(clamp(.95rem, 1.25vw, 1.15rem) * var(--fit, 1)); }
.road-panels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* The panel is the frame's subject, not a caption in the corner of it:
the route takes the left edge and this takes everything else. */
.road-panel {
--p: 0;
position: absolute;
top: 50%; right: 4.5vw;
transform: translateY(-50%);
width: min(58vw, 880px);
text-align: start;
}
.road-panel header {
display: flex; align-items: center; gap: 14px;
margin-bottom: 22px;
}
.rp-num {
font-family: var(--f-mono);
font-size: clamp(.9rem, 1.1vw, 1.05rem); font-weight: 700;
color: #17130a; background: var(--grad-gold);
padding: 5px 13px; border-radius: 999px; letter-spacing: .04em;
}
.rp-stamp {
font-family: var(--f-ui);
font-size: calc(clamp(1rem, 1.5vw, 1.34rem) * var(--fit, 1)); font-weight: 800;
letter-spacing: .02em; color: var(--accent);
text-shadow: 0 0 22px rgba(var(--accent-rgb), .45);
}
.rp-stamp::before {
content: ""; display: inline-block; vertical-align: middle;
width: 40px; height: 1px; margin-inline-end: 14px;
background: linear-gradient(90deg, transparent, var(--accent));
}
.rp-title {
font-size: calc(clamp(2.3rem, 5.7vw, 5.4rem) * var(--fit, 1));
font-variation-settings: "wght" 860, "wdth" 74;
line-height: 1.07; letter-spacing: -.024em;
margin-bottom: calc(26px * var(--fit, 1)); text-wrap: balance;
}
.rp-body {
font-family: var(--f-read);
font-weight: 400;
color: #b3ad9e;
font-size: calc(clamp(1.26rem, 2.22vw, 2rem) * var(--fit, 1));
line-height: 1.6; /* serif Hebrew body; 1.7 is an Arabic import */
letter-spacing: -.006em;
max-width: 34ch; /* per line — the paragraph itself is wide */
max-width: 60ch;
}
/* ---- Reading light ----
The passage is broken into sentences and lit one at a time as the
visitor scrolls through the stop, so the eye is walked along the
copy instead of being handed a paragraph. Every sentence stays
legible when unlit — this raises one, it does not hide the rest —
and the whole thing is driven by scroll position, so it works on a
phone with no pointer anywhere near it. */
.rp-sentence {
transition: color var(--t2) var(--fade), text-shadow var(--t2) var(--fade);
}
.rp-sentence.is-lit {
color: #f7ecd2;
text-shadow: 0 0 24px rgba(var(--accent-rgb), .5), 0 0 64px rgba(var(--accent-rgb), .16);
}
/* the sentence already read keeps a little more light than one not
yet reached, so the passage reads as a trail rather than a spotlight */
.rp-sentence.is-past { color: #ccc5b3; }
.rp-mark {
position: relative;
margin-top: calc(30px * var(--fit, 1)); padding-inline-start: 20px;
font-family: var(--f-elegant); font-style: normal; font-weight: 700;
font-size: calc(clamp(1.3rem, 2.6vw, 2.3rem) * var(--fit, 1));
line-height: 1.34; color: #efe6cd;
max-width: 46ch;
}
.rp-mark::before {
content: ""; position: absolute;
inset-inline-start: 0; top: .16em; bottom: .16em; width: 2px;
background: linear-gradient(180deg, var(--accent), transparent);
}
.rp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.rp-chips li {
font-family: var(--f-ui); font-size: clamp(.82rem, 1vw, .95rem); font-weight: 600;
padding: 8px 17px; border-radius: 999px;
color: var(--text);
border: 1px solid rgba(var(--accent-rgb), .3);
background: rgba(var(--accent-rgb), .06);
}
.road-panel .btn { margin-top: 30px; }
/* only the panel actually on screen may be clicked */
.road-panel.is-live { pointer-events: auto; }
.road-hud {
position: absolute; z-index: 4;
bottom: 26px; left: 50%;
transform: translateX(-50%);
display: flex; align-items: center; gap: 12px;
font-family: var(--f-mono); font-size: 12px; color: var(--text-3);
opacity: 0; direction: ltr;
}
.rh-now { color: var(--gold-hi); }
.rh-bar { display: block; width: min(240px, 40vw); height: 2px; background: var(--hair); border-radius: 2px; overflow: hidden; }
.rh-bar i { display: block; height: 100%; width: 0%; background: var(--grad-gold); box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }
/* ---- BEFORE JS TAKES OVER --------------------------------------
Static, readable, stacked. The camera layer only appears once
road.js has measured the viewport and set .is-live, so a broken
or blocked script leaves the story legible instead of blank. */
.road:not(.is-live) { height: auto; }
.road:not(.is-live) .road-viewport {
position: static; height: auto; overflow: visible;
padding: clamp(60px, 9vw, 120px) 0; gap: clamp(60px, 9vw, 110px);
}
.road:not(.is-live) .road-world,
.road:not(.is-live) .road-hud { display: none; }
.road:not(.is-live) .road-panels { position: static; display: grid; gap: clamp(56px, 8vw, 100px); }
.road:not(.is-live) .road-panel {
position: static; transform: none;
width: min(760px, 90%); margin-inline: auto;
--p: 1; pointer-events: auto;
}
.road:not(.is-live) .road-intro,
.road:not(.is-live) .road-outro { position: static; margin-inline: auto; pointer-events: auto; }
@media (max-width: 900px) {
/* The route owns the top of the frame and the words own the rest —
between them they use the whole screen, with no dead band. */
.road-panel, .road-intro, .road-outro {
top: auto; bottom: 3vh; right: 0; left: 0;
transform: none;
width: min(93%, 620px); margin-inline: auto;
}
/* the wide shots: a third of the phone screen, not a caption strip */
.road-intro, .road-outro { bottom: 6vh; width: min(94%, 660px); }
/* one scrim between the world (z 0) and every text layer (z 3), so the
words have a floor without the route being cropped away */
/* A floor for the words, not a blackout: the gradient never reaches
full opacity, so the aurora, the particles and the grid floor keep
moving behind the text on a phone exactly as they do beside it on
a desktop. Readability comes from the reading column being dimmed,
not erased. */
.road.is-live .road-viewport::after {
content: ""; position: absolute; z-index: 2; inset: 22% 0 0;
background: linear-gradient(180deg,
transparent,
rgba(6,7,10,.55) 26%,
rgba(6,7,10,.74) 48%,
rgba(6,7,10,.80) 100%);
pointer-events: none;
}
/* with a live background behind them, the letters carry their own
separation instead of borrowing it from a black card */
.rp-body, .rp-mark { text-shadow: 0 1px 14px rgba(4,5,8,.85); }
.rp-title { text-shadow: 0 2px 18px rgba(4,5,8,.9); }
/* Every one of these multiplies by --fit, exactly as the desktop
rules do. Without that the panel could never grow into the space
it was given, and the phone kept the same small type however much
room was left under it. */
.road-panel header { gap: 10px; margin-bottom: calc(14px * var(--fit, 1)); }
.rp-num { font-size: calc(.95rem * var(--fit, 1)); padding: 4px 11px; }
.rp-stamp { font-size: calc(clamp(1.16rem, 5.6vw, 1.6rem) * var(--fit, 1)); }
.rp-stamp::before { width: 24px; margin-inline-end: 9px; }
.rp-title { font-size: calc(clamp(2.2rem, 10vw, 3.4rem) * var(--fit, 1));
margin-bottom: calc(15px * var(--fit, 1)); }
.rp-body { font-size: calc(clamp(1.3rem, 6.1vw, 1.85rem) * var(--fit, 1));
line-height: 1.52; max-width: none; }
.rp-mark { font-size: calc(clamp(1.32rem, 6.2vw, 1.85rem) * var(--fit, 1));
margin-top: calc(16px * var(--fit, 1)); max-width: none; }
.rp-chips { margin-top: calc(16px * var(--fit, 1)); }
.road-panel .btn { margin-top: calc(18px * var(--fit, 1)); }
/* the phone rules must carry the same --fit as the desktop rules,
or the fit mechanism silently applies to desktop only */
.road-intro h2, .road-outro h2 { font-size: calc(clamp(3.1rem, 14.5vw, 4.6rem) * var(--fit, 1)); }
.road-intro-sub, .road-outro p { font-size: calc(clamp(1.5rem, 7.2vw, 2.05rem) * var(--fit, 1)); margin-top: calc(16px * var(--fit, 1)); }
.rnode { width: 208px; height: 208px; margin: -104px 0 0 -104px; }
.rnode-core { width: 112px; height: 112px; }
.rnode-face svg { width: 64px; height: 64px; }
/* the tags are unreadable at the phone's wide-shot scale, and the
panel already carries the stamp — the dial dots and the in-station
counter do the "where am I" work on a phone */
.rnode-tag, .rnode-num { display: none; }
.rnode-stat b { font-size: 24px; }
.rnode-stat i { font-size: 15px; }
.road-hud { bottom: auto; top: 12px; }
}
/* The road's reading scrim ends where the section ends — and on a
phone the NEXT section opened at full scene brightness, so the
boundary photographed as a hard band across the screen. The dark
floor now bleeds into the statement below and dissolves over a
third of a screen instead of dying on a line. */
@media (max-width: 900px) {
.road + .statement::before {
content: ""; position: absolute; z-index: -1;
inset-inline: 0; top: 0; height: 36vh;
background: linear-gradient(180deg, rgba(6, 7, 10, .78), rgba(6, 7, 10, .4) 55%, transparent);
pointer-events: none;
}
}
/* a short viewport cannot hold headline, paragraph and pull-quote at
once — the quote is the line that can go */
@media (max-width: 900px) and (max-height: 700px) {
.road-panel .rp-mark, .road-panel .rp-chips { display: none; }
.road-panel .btn { margin-top: 14px; }
.rp-title { font-size: calc(clamp(1.7rem, 7.4vw, 2.3rem) * var(--fit, 1)); margin-bottom: 11px; }
.rp-body { font-size: calc(clamp(1.08rem, 4.8vw, 1.32rem) * var(--fit, 1)); }
}
@media (prefers-reduced-motion: reduce) {
.road-centre, .road-comet i, .rnode-ring { animation: none; }
.rnode-dial *, .rnode-face svg, .rnode-face svg * { animation: none; }
.btn-gold, .btn-gold::after, .btn-line::after, .eyebrow::after,
.ico-clock .hand-m, .ico-clock .hand-h, .ico-chart .ln, .ico-chart .tip,
.ico-rows path, .ico-tools .zig, .ico-shield .chk, .ico-star, .ico-bars path { animation: none; }
}
/* ---- ICONS THAT WORK FOR A LIVING --------------------------------
Each bento icon performs its own job in miniature: the clock keeps
time, the chart draws itself, the report writes its rows. Slow,
quiet loops — the movement should be noticed second, not first. */
.ico-clock .hand-m, .ico-clock .hand-h {
transform-origin: 12px 12px;
animation: handspin 5s linear infinite;
}
.ico-clock .hand-h { animation-duration: 30s; }
@keyframes handspin { to { transform: rotate(360deg); } }
.ico-chart .ln {
stroke-dasharray: 1; stroke-dashoffset: 1;
animation: linedraw 6.4s ease-in-out infinite;
}
.ico-chart .tip { opacity: 0; animation: tipshow 6.4s ease-in-out infinite; }
@keyframes linedraw {
0% { stroke-dashoffset: 1; } 32% { stroke-dashoffset: 0; }
78% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 1; }
}
@keyframes tipshow {
0%, 26% { opacity: 0; } 38%, 78% { opacity: 1; } 92%, 100% { opacity: 0; }
}
.ico-rows .r1, .ico-rows .r2, .ico-rows .r3 {
stroke-dasharray: 1; stroke-dashoffset: 1;
animation: linedraw 7s ease-in-out infinite;
}
.ico-rows .r2 { animation-delay: .5s; }
.ico-rows .r3 { animation-delay: 1s; }
.ico-tools .zig { stroke-dasharray: 1; stroke-dashoffset: 1; animation: linedraw 6s ease-in-out infinite 1s; }
.ico-shield .chk { stroke-dasharray: 1; stroke-dashoffset: 1; animation: linedraw 5.6s ease-in-out infinite .6s; }
.ico-star { animation: starbreathe 4.8s ease-in-out infinite; transform-origin: 12px 12px; }
@keyframes starbreathe {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(var(--accent-rgb), 0)); }
50% { transform: scale(1.08); filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .7)); }
}
.ico-bars path { transform-box: fill-box; transform-origin: bottom; animation: bargrow 5.4s ease-in-out infinite; }
.ico-bars .b2 { animation-delay: .25s; }
.ico-bars .b3 { animation-delay: .5s; }
.ico-bars .b4 { animation-delay: .75s; }
@keyframes bargrow {
0%, 8% { transform: scaleY(.12); } 34%, 82% { transform: scaleY(1); } 96%, 100% { transform: scaleY(.12); }
}
/* ============================================================
CARD LANGUAGE A — BENTO (value section)
glass tiles, gradient hairline, corner light
============================================================ */
.bento { display: grid; gap: 14px; grid-template-columns: repeat(12,1fr); }
.bento-card {
position: relative; overflow: hidden; grid-column: span 3;
border-radius: var(--r-lg); padding: 30px 26px;
background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
backdrop-filter: blur(6px);
transition: transform var(--t3) var(--move), box-shadow var(--t3) var(--fade);
will-change: transform;
}
/* gradient hairline via mask */
.bento-card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
background: linear-gradient(160deg, rgba(var(--accent-rgb),.5), var(--hair-soft) 42%, rgba(var(--accent-rgb),.22));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
transition: background var(--t3) var(--fade);
}
.bento-card::after {
content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
background: radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(var(--accent-rgb),.13), transparent 62%);
opacity: 0; transition: opacity var(--t3) var(--fade);
}
.bento-card:hover { box-shadow: 0 26px 54px -22px #000, 0 0 44px -20px rgba(var(--accent-rgb),.5); }
.bento-card:hover::after { opacity: 1; }
.bento-wide { grid-column: span 6; }
@media (max-width:1000px){ .bento-card{grid-column:span 6} }
@media (max-width:640px){ .bento-card,.bento-wide{grid-column:span 12} }
.bento-ico {
width: 46px; height: 46px; border-radius: 13px; margin-bottom: 17px;
display: grid; place-items: center; color: var(--accent);
border: 1px solid rgba(var(--accent-rgb),.3);
background: linear-gradient(150deg, rgba(var(--accent-rgb),.16), transparent);
transition: color var(--t3) var(--fade), border-color var(--t3) var(--fade), transform var(--t2) var(--spring);
}
.bento-card:hover .bento-ico { transform: translateY(-3px) rotate(-6deg); }
.bento-ico svg { width: 22px; height: 22px; }
.bento-card h3 { font-family: var(--f-body); font-weight: 800; font-size: clamp(1.1rem, .4rem + .85vw, 1.5rem); margin-bottom: 10px; }
.bento-card p { color: var(--text-2); font-size: clamp(.95rem, .35rem + .7vw, 1.2rem); }
.bento-figure {
font-family: var(--f-mono); font-weight: 700;
font-size: clamp(2.5rem,5.4vw,4.2rem); line-height: 1; letter-spacing: -.045em;
margin-bottom: 8px;
background: linear-gradient(120deg, var(--gold-hi), var(--accent));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bento-figure small {
font-size: .26em; color: var(--text-3); font-family: var(--f-ui);
font-weight: 600; margin-inline-start: .6em; -webkit-text-fill-color: var(--text-3);
}
/* ============================================================
CARD LANGUAGE B — COVERAGE
top light-bar, big outlined index, no fill
============================================================ */
.cover-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit,minmax(min(250px,100%),1fr)); }
.cover-card {
position: relative; overflow: hidden;
border-radius: 4px 4px var(--r-lg) var(--r-lg);
padding: 34px 26px 28px;
background: linear-gradient(180deg, rgba(var(--accent-rgb),.055), transparent 46%), var(--ink-850);
border: 1px solid var(--hair-soft); border-top: none;
transition: transform var(--t3) var(--move), background var(--t3) var(--fade);
}
.cover-card::before {
content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
transform: scaleX(.4); transform-origin: center;
transition: transform var(--t3) var(--move), background var(--t3) var(--fade);
}
.cover-card:hover::before { transform: scaleX(1); }
.cover-card:hover { background: linear-gradient(180deg, rgba(var(--accent-rgb),.1), transparent 46%), var(--ink-800); }
.cover-num {
background: linear-gradient(100deg, var(--accent) 30%, var(--gold-hi) 50%, var(--accent) 70%);
background-size: 260% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 7s ease-in-out infinite;
position: absolute; top: 14px; inset-inline-end: 20px;
font-family: var(--f-mono); font-size: 2.8rem; font-weight: 700; line-height: 1;
color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb),.34);
transition: -webkit-text-stroke-color var(--t3) var(--fade);
}
.cover-card h3 { font-family: var(--f-body); font-weight: 800; font-size: clamp(1.1rem, .4rem + .9vw, 1.55rem); margin-bottom: 12px; color: var(--gold-hi); }
.cover-card p { color: var(--text-2); font-size: clamp(.95rem, .35rem + .7vw, 1.2rem); margin-bottom: 18px; }
.cover-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
font-family: var(--f-ui); font-size: .73rem; font-weight: 700;
padding: 5px 11px; border-radius: 999px;
border: 1px solid rgba(var(--accent-rgb),.22); color: var(--text-2);
transition: border-color var(--t3) var(--fade), color var(--t2), background var(--t2);
}
.cover-card:hover .tag { border-color: rgba(var(--accent-rgb),.42); background: rgba(var(--accent-rgb),.06); }
/* ============================================================
CARD LANGUAGE C — TRACKS
tall, solid, crowned with a light bar; VIP is lit
============================================================ */
.tracks-grid {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fit,minmax(min(255px,100%),1fr));
align-items: stretch; margin-bottom: 72px; perspective: 1600px;
}
.track-card {
position: relative; display: flex; flex-direction: column;
background: var(--ink-800); border: 1px solid var(--hair-soft);
border-radius: var(--r-lg); padding: 34px 28px; overflow: hidden;
transition: border-color var(--t3) var(--fade), background var(--t3) var(--fade), box-shadow var(--t3);
will-change: transform;
}
.track-card::before {
content: ""; position: absolute; top: 0; inset-inline: 22%; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: .5; transition: opacity var(--t2), inset-inline var(--t3) var(--move);
}
.track-card:hover { border-color: rgba(var(--accent-rgb),.35); background: var(--ink-750); box-shadow: 0 30px 60px -30px #000; }
.track-card:hover::before { opacity: 1; inset-inline: 6%; }
.track-card-vip {
border-color: rgba(var(--accent-rgb),.34);
background: linear-gradient(180deg, rgba(var(--accent-rgb),.09), transparent 38%), var(--ink-800);
}
.track-card-vip::before { opacity: 1; inset-inline: 8%; height: 2px; }
.track-badge {
position: absolute; top: 16px; inset-inline-end: 20px;
font-family: var(--f-ui); font-size: .72rem; font-weight: 700; letter-spacing: .02em;
padding: 5px 13px; border-radius: 999px;
background: var(--grad-gold); color: #17130a;
}
.track-card h3 { font-size: clamp(1.6rem, 1rem + .9vw, 2.15rem); font-variation-settings: "wght" 850, "wdth" 80; letter-spacing: -.012em; }
.track-q {
font-family: var(--f-elegant); font-size: 1.06rem; font-style: normal;
color: var(--accent); margin: 8px 0 22px;
transition: color var(--t3) var(--fade);
}
.track-list { display: grid; gap: 11px; margin-bottom: 26px; flex: 1; }
.track-list li { position: relative; padding-inline-start: 24px; color: var(--text-2); font-size: clamp(.95rem, .5rem + .6vw, 1.2rem); }
/* what IS included gets a real ✓ — bright green on Netanel's call:
maximum contrast against the red ✕, the universal yes/no pair.
(Green/red = semantic data tokens, consistent with the site rule.) */
.track-list li::before {
content: "✓"; position: absolute; inset-inline-start: 0; top: .06em;
font-size: .82em; font-weight: 900; color: var(--up);
text-shadow: 0 0 12px rgba(76, 215, 135, .55);
transition: color var(--t3) var(--fade), text-shadow var(--t2) var(--fade),
transform var(--t2) var(--spring);
}
.track-card:hover .track-list li::before,
.track-card.is-active .track-list li::before {
color: #7dedac;
text-shadow: 0 0 16px rgba(76, 215, 135, .95);
transform: scale(1.18);
}
.track-list b { color: var(--text); font-weight: 700; }
/* ---- who-it's-for line + the honest ✗ items ---- */
.track-fit {
font-family: var(--f-ui); font-size: .88rem; font-weight: 600;
color: var(--gold-hi); margin: -14px 0 18px;
padding-inline-start: 2px;
}
.track-list li.cross { color: #8d8674; }
.track-list li.cross::before {
content: "✕"; top: .1em;
color: rgba(232,105,92,.75); text-shadow: none;
font-size: .78em; font-weight: 800;
}
.track-card:hover .track-list li.cross::before,
.track-card.is-active .track-list li.cross::before {
color: rgba(232,105,92,1);
text-shadow: 0 0 10px rgba(232,105,92,.5);
transform: scale(1.12);
}
/* ---- the "full detail" opener ---- */
.track-more {
font-family: var(--f-ui); font-size: .9rem; font-weight: 700;
color: var(--accent); text-align: start;
padding: 10px 2px; margin-bottom: 12px;
border-bottom: 1px dashed rgba(var(--accent-rgb),.4);
transition: var(--t2) var(--fade);
}
.track-more::after { content: " ⌄"; font-size: .82em; }
.track-more:hover { color: var(--gold-hi); border-bottom-color: var(--gold-hi); letter-spacing: .01em; }
.track-more.is-open::after { content: " ⌃"; }
/* ============================================================
TRACK DEEP-DIVES — the full answer, one panel at a time
============================================================ */
.track-deep {
position: relative;
margin: -28px 0 72px;
background:
radial-gradient(120% 80% at 85% 0%, rgba(var(--accent-rgb),.14), transparent 55%),
radial-gradient(90% 70% at 8% 105%, rgba(var(--accent-rgb),.07), transparent 55%),
linear-gradient(178deg, #14141c, #0a0a10 65%, #0e0d12);
border: 1px solid rgba(var(--accent-rgb),.36);
border-radius: 24px;
padding: clamp(26px, 3.4vw, 52px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 0 0 1px rgba(4,5,8,.9),
0 34px 80px -30px rgba(0,0,0,.9),
0 0 54px -16px rgba(var(--accent-rgb),.3);
animation: tdIn 480ms var(--move);
}
.track-deep::before { /* the crowned hairline, like the modal */
content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.85), #f4e5c1, rgba(var(--accent-rgb),.85), transparent);
}
@keyframes tdIn { from { opacity: 0; transform: translateY(22px); } }
.td-close {
position: absolute; top: 16px; left: 16px;
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center;
border: 1px solid rgba(var(--accent-rgb),.3); color: var(--text-2);
transition: var(--t2) var(--fade); z-index: 2;
}
.td-close:hover { border-color: var(--down); color: var(--down); transform: rotate(90deg); }
.td-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 22px; flex-wrap: wrap;
padding-bottom: 22px; margin-bottom: 26px;
border-bottom: 1px solid rgba(var(--accent-rgb),.2);
}
.td-name {
font-size: clamp(1.7rem, 2.6vw, 2.4rem);
font-variation-settings: "wght" 860, "wdth" 76;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.td-tag {
font-family: var(--f-mono); font-size: .82rem; font-weight: 700;
color: #17130a; background: var(--grad-gold);
padding: 5px 14px; border-radius: 999px; letter-spacing: .03em;
white-space: nowrap;
}
.td-line {
font-family: var(--f-read); font-size: clamp(1.05rem, 1.4vw, 1.3rem);
color: #d9d4c6; margin-top: 8px; max-width: 640px;
}
.td-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 46px); }
.td-col h4 {
font-family: var(--f-ui); font-size: .95rem; font-weight: 800;
letter-spacing: .14em; color: var(--accent);
margin: 26px 0 12px;
}
.td-col h4:first-child { margin-top: 0; }
.td-col h4::after {
content: ""; display: inline-block; vertical-align: middle;
width: 38px; height: 1px; margin-inline-start: 12px;
background: linear-gradient(90deg, var(--accent), transparent);
}
.td-list { display: grid; gap: 10px; }
.td-list li {
position: relative; padding-inline-start: 26px;
font-family: var(--f-ui); font-size: clamp(.95rem, 1.05vw, 1.06rem);
line-height: 1.6; color: var(--text-2);
}
.td-list li b { color: var(--gold-hi); }
.td-list li::before {
content: "✓"; position: absolute; inset-inline-start: 0; top: .06em;
font-size: .82em; font-weight: 900; color: var(--up);
text-shadow: 0 0 12px rgba(76, 215, 135, .55);
}
.td-not { color: #b08a86 !important; }
.td-not::after { background: linear-gradient(90deg, rgba(232,105,92,.7), transparent) !important; }
.td-crosses li { color: #8d8674; }
.td-crosses li::before { content: "✕"; color: rgba(232,105,92,.8); text-shadow: none; }
/* the deep-panel marks share the cards' little life on hover */
.td-list li::before { transition: transform var(--t2) var(--spring), text-shadow var(--t2) var(--fade); }
.td-list li:hover::before { transform: scale(1.18); text-shadow: 0 0 16px rgba(76, 215, 135, .9); }
.td-all {
margin-top: 22px; padding: 16px 20px;
font-family: var(--f-read); font-size: 1.12rem; color: var(--gold-hi);
border-inline-start: 3px solid var(--accent);
background: linear-gradient(90deg, rgba(var(--accent-rgb),.12), transparent 70%);
border-radius: 6px 12px 12px 6px;
}
.td-all b { font-weight: 800; }
.td-foot {
margin-top: 26px; padding-top: 18px;
border-top: 1px solid rgba(var(--accent-rgb),.16);
font-family: var(--f-ui); font-size: .82rem; color: var(--text-3);
text-align: center;
}
.td-foot a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
/* the VIP toolkit tier table */
.td-table {
width: 100%; border-collapse: collapse; margin: 6px 0 14px;
font-family: var(--f-ui); font-size: .88rem;
}
.td-table th, .td-table td {
padding: 10px 8px; text-align: center;
border-bottom: 1px solid rgba(var(--accent-rgb),.14);
}
.td-table tbody th { text-align: start; font-weight: 600; color: var(--text-2); line-height: 1.45; }
.td-table thead th { font-weight: 800; color: var(--accent); font-size: .8rem; letter-spacing: .06em; }
.td-table thead th:last-child { color: var(--gold-hi); }
.td-table td { color: var(--text-3); }
.td-table td.yes { color: var(--accent); font-weight: 900; text-shadow: 0 0 12px rgba(var(--accent-rgb),.5); }
.td-note {
margin: 14px 0; padding: 14px 18px;
font-family: var(--f-ui); font-size: .86rem; line-height: 1.6; color: var(--text-2);
border: 1px dashed rgba(var(--accent-rgb),.35); border-radius: 12px;
background: rgba(var(--accent-rgb),.04);
}
/* ---- "how to choose" ---- */
.track-choose {
margin: 0 0 72px;
padding: clamp(26px, 3vw, 44px);
background:
radial-gradient(110% 80% at 12% 0%, rgba(var(--accent-rgb),.12), transparent 55%),
linear-gradient(178deg, #131319, #0a0a0f);
border: 1px solid rgba(var(--accent-rgb),.3);
border-radius: 22px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px -28px rgba(0,0,0,.85);
}
.choose-title {
font-size: clamp(1.5rem, 2.3vw, 2.1rem);
font-variation-settings: "wght" 840, "wdth" 78;
margin-bottom: 22px;
}
.choose-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 3vw, 44px); }
.choose-col h4 {
font-family: var(--f-ui); font-size: .92rem; font-weight: 800;
letter-spacing: .12em; color: var(--accent); margin-bottom: 14px;
}
.choose-list { display: grid; gap: 10px; }
.choose-list li {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 11px 15px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(var(--accent-rgb),.14); border-radius: 12px;
font-family: var(--f-ui); font-size: .92rem; color: var(--text-2); line-height: 1.5;
}
.choose-list b {
font-family: var(--f-mono); font-size: .82rem; font-weight: 700; white-space: nowrap;
color: var(--accent); padding: 4px 12px; border-radius: 999px;
border: 1px solid rgba(var(--accent-rgb),.4);
}
.choose-list b.v { color: #17130a; background: var(--grad-gold); border-color: transparent; }
.choose-note {
margin-top: 16px; font-family: var(--f-read); font-size: .98rem;
color: #c9c3b2; line-height: 1.6;
}
@media (max-width: 900px) {
.choose-cols { grid-template-columns: 1fr; }
.td-table { font-size: .8rem; }
}
@media (max-width: 900px) {
.td-cols { grid-template-columns: 1fr; }
.td-head { flex-direction: column; }
.td-head .btn { width: 100%; }
.track-deep { margin-top: -34px; }
}
/* ---- the 24/7 assembly ---- */
.c247-wrap { display: inline-flex; direction: ltr; }
.c247-wrap b {
display: inline-block; font-weight: inherit;
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
will-change: transform, opacity;
filter: drop-shadow(0 0 34px rgba(var(--accent-rgb),.3));
}
.c247-chips {
display: flex; justify-content: center; flex-wrap: wrap;
gap: 10px; margin-top: 30px;
}
.c247-chips span {
font-family: var(--f-ui); font-size: .86rem; font-weight: 700;
color: var(--text-2); padding: 8px 18px; border-radius: 999px;
border: 1px solid rgba(var(--accent-rgb),.3);
background: rgba(var(--accent-rgb),.05);
}
.track-price {
font-family: var(--f-mono); font-size: 1.42rem; font-weight: 700;
margin-bottom: 18px; letter-spacing: -.025em; color: var(--gold-hi);
}
.track-price small { font-family: var(--f-ui); font-size: .5em; color: var(--text-3); font-weight: 500; }
/* ============================================================
COMPARISON TABLE
============================================================ */
.compare-title { text-align: center; font-size: clamp(1.4rem,2.5vw,2.2rem); margin-bottom: 28px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--hair-soft); border-radius: var(--r-lg); background: var(--ink-850); }
.table-scroll:focus-visible { outline: 2px solid var(--accent); }
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: clamp(.9rem, .5rem + .55vw, 1.1rem); }
.compare-table th,.compare-table td { padding: clamp(14px,1.1vw,20px) clamp(16px,1.3vw,24px); text-align: center; border-bottom: 1px solid var(--hair-soft); }
.compare-table thead th {
background: var(--ink-750); font-family: var(--f-ui); font-weight: 800; font-size: .92rem;
position: sticky; top: 0;
}
.compare-table thead .col-vip { color: var(--accent); transition: color var(--t3); }
.compare-table tbody th { text-align: start; font-weight: 500; color: var(--text-2); font-family: var(--f-body); }
.compare-table td { color: var(--text-3); }
.compare-table td.yes { color: var(--up); font-weight: 700; }
.compare-table td.num { color: var(--text); font-weight: 700; }
.compare-table tbody tr:hover td,.compare-table tbody tr:hover th { background: rgba(var(--accent-rgb),.05); }
/* ============================================================
PRICING
============================================================ */
.billing-toggle {
display: inline-flex; gap: 3px; padding: 4px; flex-wrap: wrap;
background: var(--ink-800); border: 1px solid var(--hair-soft); border-radius: 999px; margin-bottom: 46px;
}
.bt-opt {
font-family: var(--f-ui); padding: 11px 24px; border-radius: 999px;
font-weight: 700; font-size: .93rem; color: var(--text-2);
display: inline-flex; align-items: center; gap: 9px;
transition: background var(--t2) var(--fade), color var(--t2) var(--fade);
}
.bt-opt:hover { color: var(--gold-hi); }
.bt-opt.active { background: var(--grad-gold); color: #17130a; }
.bt-opt:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.bt-save { font-family: var(--f-mono); font-size: .69rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(76,215,135,.14); color: var(--up); }
.bt-opt.active .bt-save { background: rgba(0,0,0,.18); color: #0d3a24; }
.pricing-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit,minmax(min(248px,100%),1fr)); align-items: stretch; }
.price-card {
position: relative; display: flex; flex-direction: column; overflow: hidden;
background: var(--ink-800); border: 1px solid var(--hair-soft);
border-radius: var(--r-lg); padding: 34px 28px;
transition: border-color var(--t3) var(--fade), background var(--t3) var(--fade), box-shadow var(--t3);
}
.price-card:hover { border-color: rgba(var(--accent-rgb),.35); background: var(--ink-750); box-shadow: 0 28px 56px -28px #000; }
.price-card-vip {
border-color: rgba(var(--accent-rgb),.38);
background: linear-gradient(180deg, rgba(var(--accent-rgb),.09), transparent 40%), var(--ink-800);
}
.price-card h3 { font-size: clamp(1.35rem, .85rem + .7vw, 1.7rem); }
.price-tag { color: var(--text-2); font-size: .85rem; margin: 6px 0 22px; min-height: 2.5em; }
.price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price-anchor { color: var(--text-3); text-decoration: line-through; font-family: var(--f-mono); font-size: 1rem; }
.price-cur { font-size: 1.1rem; color: var(--text-3); }
.price-num {
font-family: var(--f-mono); font-weight: 700;
font-size: clamp(2.6rem,4vw,3.4rem); line-height: 1; letter-spacing: -.05em;
background: linear-gradient(120deg, #fff, var(--gold-hi) 60%, var(--accent));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.price-per { color: var(--text-3); font-size: .85rem; font-family: var(--f-ui); }
.price-usd { color: var(--text-3); font-size: .83rem; margin-top: 9px; }
.price-bill { color: var(--text-2); font-size: .8rem; margin-top: 4px; min-height: 2.3em; }
.price-save {
margin-top: 12px; align-self: flex-start; font-family: var(--f-ui);
font-size: .77rem; font-weight: 700;
background: rgba(76,215,135,.1); color: var(--up);
border: 1px solid rgba(76,215,135,.24); padding: 4px 12px; border-radius: 999px;
}
.price-card ul { margin: 22px 0 26px; display: grid; gap: 9px; flex: 1; }
.price-card ul li { position: relative; padding-inline-start: 22px; color: var(--text-2); font-size: clamp(.95rem, .5rem + .6vw, 1.15rem); }
.price-card ul li::before {
content: ""; position: absolute; inset-inline-start: 0; top: .74em;
width: 8px; height: 1px; background: var(--accent); transition: background var(--t3) var(--fade);
}
.pricing-note { text-align: center; color: var(--text-3); font-size: .83rem; margin-top: 34px; }
/* ============================================================
PROOF
============================================================ */
.proof-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--ink-800); border: 1px solid var(--hair-soft); border-radius: 999px; margin-bottom: 32px; }
.proof-tab {
font-family: var(--f-ui); padding: 12px 26px; border-radius: 999px;
font-weight: 700; font-size: .93rem; color: var(--text-2);
transition: background var(--t2) var(--fade), color var(--t2) var(--fade);
}
.proof-tab:hover { color: var(--gold-hi); }
.proof-tab.active { background: var(--grad-gold); color: #17130a; }
.proof-tab:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.proof-gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill,minmax(min(224px,100%),1fr)); margin-bottom: 24px; }
.proof-item {
border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; padding: 0;
border: 1px solid var(--hair-soft); background: var(--ink-800);
transition: border-color var(--t3) var(--fade), transform var(--t3) var(--move);
}
.proof-item:hover { border-color: rgba(var(--accent-rgb),.45); transform: translateY(-4px); }
.proof-item img { width: 100%; height: 236px; object-fit: cover; object-position: top; }
.proof-item figcaption { padding: 12px 15px; font-size: .83rem; color: var(--text-2); border-top: 1px solid var(--hair-soft); text-align: start; }
.proof-empty {
border: 1px dashed rgba(var(--accent-rgb),.3); border-radius: var(--r-md);
min-height: 214px; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; color: var(--text-3); font-size: .86rem; text-align: center; padding: 24px;
transition: border-color var(--t3) var(--fade);
}
.proof-empty svg { width: 30px; height: 30px; color: var(--accent); opacity: .6; }
/* readable, not fine print — the client asked for it clear and legible */
.proof-disclaimer {
color: var(--text-2);
font-family: var(--f-read);
font-size: clamp(1.02rem, 1.3vw, 1.2rem);
line-height: 1.6;
margin-bottom: 44px;
}
/* ============================================================
PROOF — 3D CAROUSEL
The centre card stands out of the screen; neighbours recede in
perspective either side. One luxe glowing frame language for all
three galleries.
============================================================ */
.proof-lead {
font-family: var(--f-read);
color: #cfcaba;
font-size: clamp(1.1rem, 1.6vw, 1.5rem);
margin: -26px 0 34px;
max-width: min(880px, 96%);
}
.proof-stage.car {
position: relative;
/* --stage-h is the single source of truth: the image cap below is
derived from it, so NO screenshot — however tall — can ever spill
out of the stage and sit on the section's own text */
--stage-h: clamp(380px, 40vw, 620px);
height: var(--stage-h);
perspective: 1400px;
margin-bottom: 46px;
/* the browser may pan vertically; horizontal drags belong to the
carousel — without this a phone swipe is swallowed by page scroll */
touch-action: pan-y;
}
.car-rail { position: absolute; inset: 0; transform-style: preserve-3d; }
.car-card {
position: absolute; top: 50%; left: 50%;
width: min(64%, 560px);
margin: 0; cursor: pointer;
transition: transform .6s var(--move), opacity .5s var(--fade);
will-change: transform, opacity;
outline: none;
}
.car-frame {
position: relative;
/* Full card width so the message text stays LARGE and readable —
shrinking a tall screenshot to fit made the writing illegible
(Netanel's complaint). A tall image is instead CLIPPED at the
frame's bottom; .car-tall adds a fade and a "read it all" hint,
and the click opens the full-quality original in the lightbox. */
width: 100%;
max-height: calc(var(--stage-h, 520px) - 72px);
border-radius: var(--r-lg);
overflow: hidden;
background: var(--ink-850);
border: 1px solid rgba(var(--accent-rgb), .34);
box-shadow:
0 0 0 1px rgba(6,7,10,.85),
0 24px 60px -24px rgba(0,0,0,.9),
0 0 30px -6px rgba(var(--accent-rgb), .25);
transition: box-shadow .5s var(--fade), border-color .5s var(--fade);
}
.car-frame img { display: block; width: 100%; height: auto; }
/* a clipped (tall) screenshot: the cut is honest — a fade into the
frame and an invitation to read the whole thing full-size */
.car-tall .car-frame::before {
content: "";
position: absolute; inset-inline: 0; bottom: 0; height: 96px;
background: linear-gradient(180deg, transparent, rgba(10,11,15,.94));
pointer-events: none;
}
.car-tall .car-frame::after {
content: "ההודעה המלאה — בלחיצה";
position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
white-space: nowrap;
font-family: var(--f-ui); font-size: .82rem; font-weight: 700;
color: var(--gold-hi);
background: rgba(10,11,15,.78);
border: 1px solid rgba(var(--accent-rgb), .5);
border-radius: 999px; padding: 7px 16px;
pointer-events: none;
opacity: 0; transition: opacity .45s var(--fade);
}
.car-card.is-front.car-tall .car-frame::after { opacity: 1; }
/* the front card earns the full jewel frame */
.car-card.is-front .car-frame {
border-color: rgba(var(--accent-rgb), .75);
box-shadow:
0 0 0 1px rgba(6,7,10,.85),
0 0 0 4px rgba(var(--accent-rgb), .16),
0 0 44px -4px rgba(var(--accent-rgb), .55),
0 30px 80px -28px rgba(0,0,0,.95);
}
.car-card figcaption {
margin-top: 12px; text-align: center;
font-family: var(--f-ui); font-size: clamp(.85rem, 1vw, 1rem);
color: var(--text-2);
opacity: 0; transition: opacity .45s var(--fade);
}
.car-card.is-front figcaption { opacity: 1; color: var(--gold-hi); }
.car-frame-empty {
width: auto; /* the fit-content rule is for images */
aspect-ratio: 16 / 10;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px; padding: 24px; text-align: center;
color: var(--text-3);
font-family: var(--f-ui); font-size: clamp(.9rem, 1.05vw, 1.05rem);
}
.car-frame-empty svg { width: 44px; height: 44px; opacity: .6; }
.car-nav { position: absolute; inset: 0; pointer-events: none; }
.car-btn {
pointer-events: auto;
position: absolute; top: 50%; transform: translateY(-50%);
width: 52px; height: 52px; border-radius: 50%;
font-size: 1.7rem; line-height: 1; color: var(--gold-hi);
background: rgba(10, 12, 17, .72);
border: 1px solid rgba(var(--accent-rgb), .45);
backdrop-filter: blur(8px);
box-shadow: 0 0 18px -4px rgba(var(--accent-rgb), .5);
transition: box-shadow var(--t2) var(--fade), border-color var(--t2), transform var(--t1);
z-index: 30;
}
.car-btn:hover { border-color: rgba(var(--accent-rgb), .85); box-shadow: 0 0 26px -2px rgba(var(--accent-rgb), .7); }
.car-btn:active { transform: translateY(-50%) scale(.92); }
/* Netanel's direction rule: the LEFT button slides the carousel left,
the RIGHT button slides it right. PHYSICAL sides on purpose — the
buttons carry dir="ltr" to stop the chevrons bidi-mirroring, which
would make inline-start/end resolve against each button's own LTR
and land them on the wrong sides. */
.car-next { left: clamp(4px, 2vw, 28px); }
.car-prev { right: clamp(4px, 2vw, 28px); }
@media (max-width: 900px) {
/* portrait screenshots deserve real height on a phone; the same
--stage-h variable keeps the image cap in sync automatically */
.proof-stage.car { --stage-h: clamp(360px, 116vw, 560px); height: var(--stage-h); }
/* wider card on a phone = larger, readable message text */
.car-card { width: min(88%, 440px); }
.car-btn { width: 44px; height: 44px; }
}
/* ============================================================
FULL-SCREEN TABLE VIEWER
============================================================ */
.table-expand {
display: none; /* the desktop table needs no help */
margin: 0 auto 18px;
}
@media (max-width: 900px) {
.table-expand { display: inline-flex; }
}
.table-viewer[hidden] { display: none; } /* author display beats the hidden attr */
.table-viewer {
position: fixed; inset: 0; z-index: 260;
background: rgba(4, 5, 8, .96);
display: grid; place-items: center;
}
.table-viewer-stage { position: relative; touch-action: none; }
/* landscape: native vertical scroll at reading size */
.table-viewer-stage:not(.is-portrait) { max-height: calc(100vh - 24px); overflow-y: auto; }
.table-viewer-stage.is-portrait { overflow: visible; }
.table-viewer-stage .table-clone {
min-width: 720px;
font-size: 1rem;
background: var(--ink-850);
border: 1px solid rgba(var(--accent-rgb), .4);
border-radius: var(--r-md);
box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1), 0 0 60px -10px rgba(var(--accent-rgb), .4);
}
.table-viewer-close {
position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline-start: 16px;
z-index: 2;
width: 46px; height: 46px; border-radius: 50%;
font-size: 1.25rem; color: var(--gold-hi);
background: rgba(10, 12, 17, .8);
border: 1px solid rgba(var(--accent-rgb), .5);
}
.table-viewer-hint {
position: absolute; bottom: max(16px, env(safe-area-inset-bottom));
inset-inline: 0; text-align: center;
font-family: var(--f-ui); font-size: .82rem; color: var(--text-3);
}
.report { max-width: min(1080px, 100%); margin-inline: auto; background: var(--ink-850); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; }
.report-head {
padding: 14px 22px; font-size: .77rem; color: var(--accent);
border-bottom: 1px solid var(--hair-soft); background: var(--ink-750); letter-spacing: .06em;
transition: color var(--t3) var(--fade);
}
.report-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.report-cell { padding: 26px 12px; text-align: center; border-inline-start: 1px solid var(--hair-soft); }
.report-cell:first-child { border-inline-start: none; }
.report-cell b { display: block; font-family: var(--f-mono); font-weight: 700; font-size: clamp(1.5rem,1.9vw,2.6rem); letter-spacing: -.035em; }
.report-cell span { font-family: var(--f-ui); font-size: .75rem; color: var(--text-3); }
.v-up { color: var(--up); }
.v-gold { color: var(--gold-hi); }
.report-note { padding: 14px 22px 18px; font-size: .75rem; color: var(--text-3); }
/* ============================================================
FAQ
============================================================ */
.faq-list { display: grid; gap: 9px; }
.faq-item {
background: var(--ink-850); border: 1px solid var(--hair-soft);
border-radius: var(--r-md); overflow: hidden;
transition: border-color var(--t3) var(--fade), background var(--t3) var(--fade);
}
.faq-item:hover { border-color: rgba(var(--accent-rgb),.24); }
.faq-item[open] { border-color: rgba(var(--accent-rgb),.36); background: var(--ink-800); }
.faq-item summary {
padding: 19px 24px; cursor: pointer; list-style: none;
font-family: var(--f-body); font-weight: 700; font-size: 1rem;
display: flex; justify-content: space-between; align-items: center; gap: 14px;
transition: color var(--t1) var(--fade);
}
.faq-item summary:hover { color: var(--gold-hi); }
.faq-item:nth-child(2).in { transition-delay: 45ms; }
.faq-item:nth-child(3).in { transition-delay: 90ms; }
.faq-item:nth-child(4).in { transition-delay: 135ms; }
.faq-item:nth-child(5).in { transition-delay: 180ms; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: ""; flex-shrink: 0; width: 10px; height: 10px;
border-inline-end: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
transform: rotate(45deg) translateY(-2px);
transition: transform var(--t2) var(--move), border-color var(--t3) var(--fade);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-body { padding: 0 clamp(24px,1.8vw,34px) clamp(22px,1.6vw,30px); color: var(--text-2); font-size: clamp(.98rem, .6rem + .5vw, 1.2rem); }
.faq-body b { color: var(--text); }
/* ============================================================
CARD LANGUAGE D — STEPS
numbered, transparent, joined by a hairline
============================================================ */
.steps-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit,minmax(min(230px,100%),1fr)); }
.step {
position: relative; padding: 34px 28px;
border-inline-start: 1px solid var(--hair-soft);
transition: background var(--t3) var(--fade);
}
.step:first-child { border-inline-start: none; }
.step::before {
content: ""; position: absolute; top: 0; inset-inline-start: -1px; width: 1px; height: 0;
background: var(--accent); transition: height var(--t3) var(--move);
}
.step:hover { background: rgba(var(--accent-rgb),.035); }
.step:hover::before { height: 100%; }
.step-num {
font-family: var(--f-mono); font-size: 2rem; font-weight: 700; line-height: 1; margin-bottom: 16px;
color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb),.5);
transition: -webkit-text-stroke-color var(--t3) var(--fade);
}
.step h3 { font-family: var(--f-body); font-weight: 800; font-size: 1.06rem; margin-bottom: 8px; }
.step p { color: var(--text-2); font-size: .91rem; }
@media (max-width:760px){ .step{border-inline-start:none;border-top:1px solid var(--hair-soft)} .step:first-child{border-top:none} }
/* ============================================================
FORK
============================================================ */
.fork-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.fork-col { border-radius: var(--r-lg); padding: 36px 30px; border: 1px solid var(--hair-soft); }
.fork-stay { background: var(--ink-880); color: var(--text-3); }
.fork-join {
position: relative; overflow: hidden;
background: linear-gradient(180deg, rgba(var(--accent-rgb),.09), transparent 46%), var(--ink-800);
border-color: rgba(var(--accent-rgb),.36);
}
.fork-join::before {
content: ""; position: absolute; top: 0; inset-inline: 10%; height: 2px;
background: linear-gradient(90deg,transparent,var(--accent),transparent);
}
.fork-col h3 { font-size: clamp(1.35rem, .85rem + .75vw, 1.8rem); margin-bottom: 20px; }
.fork-stay h3 { color: var(--text-2); }
.fork-join h3 { color: var(--gold-hi); }
.fork-col ul { display: grid; gap: 13px; }
.fork-col li { position: relative; padding-inline-start: 26px; font-size: clamp(.98rem, .55rem + .6vw, 1.25rem); }
.fork-stay li::before { content: "✕"; position: absolute; inset-inline-start: 0; color: var(--down); opacity: .65; font-size: .84em; }
.fork-join li { color: var(--text-2); }
.fork-join li::before {
content: ""; position: absolute; inset-inline-start: 0; top: .72em;
width: 13px; height: 1px; background: var(--accent);
}
.fork-join .btn { margin-top: 24px; }
/* ============================================================
FINAL CTA
============================================================ */
.final-cta { text-align: center; border-top: 1px solid var(--hair-soft); }
.final-logo { width: 96px; border-radius: 22px; margin: 0 auto 28px; border: 1px solid rgba(var(--accent-rgb),.35); }
.final-cta h2 { font-size: clamp(2.5rem,5.8vw,6rem); font-variation-settings: "wght" 880, "wdth" 70; line-height: 1.05; letter-spacing: -.026em; margin-bottom: 20px; text-wrap: balance; }
.final-cta > .container > p { color: var(--text-2); margin-bottom: 32px; font-size: 1.06rem; }
.final-small { font-family: var(--f-ui); font-size: .83rem !important; color: var(--text-3) !important; margin: 22px 0 0 !important; }
/* ============================================================
FOOTER
============================================================ */
.footer { border-top: 1px solid var(--hair-soft); background: var(--ink-880); padding: 60px 0 30px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1.5fr 1fr 1fr; margin-bottom: 42px; }
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr} }
.footer-logo { width: 56px; border-radius: 13px; margin-bottom: 15px; border: 1px solid rgba(var(--accent-rgb),.3); }
.footer-brand p { color: var(--text-2); font-size: clamp(.95rem, .6rem + .5vw, 1.15rem); max-width: 52ch; }
.footer-col h4 { font-family: var(--f-ui); font-size: .8rem; letter-spacing: .04em; text-transform: none; color: var(--text-3); margin-bottom: 15px; font-weight: 800; }
.footer-col a { display: block; color: var(--text-2); font-size: clamp(.95rem, .6rem + .5vw, 1.15rem); padding: 5px 0; transition: color var(--t1); }
.footer-col a:hover { color: var(--gold-hi); }
.footer-col a[aria-disabled="true"] { color: var(--text-3); cursor: default; }
.disclaimer { border: 1px solid var(--hair-soft); border-radius: var(--r-md); padding: 24px 26px; margin-bottom: 28px; background: var(--ink-900); }
.disclaimer h3 { font-family: var(--f-ui); font-weight: 800; font-size: .9rem; color: var(--text-2); margin-bottom: 10px; }
.disclaimer p { color: var(--text-3); font-size: .78rem; line-height: 1.75; margin-bottom: 10px; }
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer b { color: var(--text-2); }
.footer-bottom { border-top: 1px solid var(--hair-soft); padding-top: 22px; color: var(--text-3); font-size: .8rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
/* ============================================================
MODAL
============================================================ */
/* The join modal is the moment money changes hands — it must look like
the most expensive room in the house, not a settings dialog. */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 4vw; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,3,5,.9); backdrop-filter: blur(16px) saturate(.8); }
.modal-panel {
position: relative; width: min(620px,100%); max-height: 92svh; overflow-y: auto;
background:
radial-gradient(120% 70% at 50% -20%, rgba(var(--accent-rgb),.16), transparent 55%),
radial-gradient(90% 60% at 8% 108%, rgba(var(--accent-rgb),.08), transparent 55%),
linear-gradient(180deg, #0f1118, #07090e 58%, #0b0d13);
border: 1px solid rgba(var(--accent-rgb),.38);
border-radius: 26px; padding: 46px 40px 40px;
box-shadow:
0 0 0 1px rgba(4,5,8,.9),
0 0 0 5px rgba(var(--accent-rgb),.07),
0 40px 110px -30px rgba(0,0,0,.95),
0 0 70px -18px rgba(var(--accent-rgb),.35);
animation: modalIn 480ms var(--move);
}
/* a lit hairline crowns the panel — the same jewel cue as the buttons */
.modal-panel::before {
content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.85), #f4e5c1, rgba(var(--accent-rgb),.85), transparent);
}
@keyframes modalIn { from{opacity:0;transform:translateY(30px) scale(.965)} }
/* X on the physical LEFT, "back" on the right — they must never share a corner */
.modal-close {
position: absolute; top: 20px; left: 20px;
width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid rgba(var(--accent-rgb),.28); color: var(--text-2);
background: rgba(255,255,255,.02);
transition: var(--t2) var(--fade);
}
.modal-close:hover { border-color: var(--down); color: var(--down); transform: rotate(90deg); }
.m-back {
position: absolute; top: 26px; right: 24px;
font-family: var(--f-ui); font-weight: 700; color: var(--text-3); font-size: .88rem;
padding: 6px 12px; border-radius: 999px; border: 1px solid transparent;
transition: var(--t2) var(--fade);
}
.m-back:hover { color: var(--gold-hi); border-color: rgba(var(--accent-rgb),.4); }
.m-eyebrow {
font-family: var(--f-mono); font-size: .72rem; font-weight: 500;
letter-spacing: .32em; color: var(--accent); margin-bottom: 12px;
}
.m-title {
font-size: clamp(1.9rem, 3vw, 2.35rem);
font-variation-settings: "wght" 860, "wdth" 74;
line-height: 1.12; margin-bottom: 10px;
text-shadow: 0 0 34px rgba(var(--accent-rgb),.28);
}
/* a breathing pool of gold light lives on the panel — never a flat void */
.modal-panel::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
pointer-events: none;
background:
radial-gradient(56% 26% at 80% 3%, rgba(var(--accent-rgb),.16), transparent 70%),
radial-gradient(40% 20% at 14% 100%, rgba(var(--accent-rgb),.1), transparent 70%);
animation: panelBreath 5.6s ease-in-out infinite;
}
@keyframes panelBreath { 50% { opacity: .5; } }
.modal-sub { color: var(--text-2); font-family: var(--f-ui); font-size: .95rem; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-stepchip {
font-family: var(--f-mono); font-size: .72rem; font-weight: 700;
color: #17130a; background: var(--grad-gold);
padding: 4px 11px; border-radius: 999px; letter-spacing: .06em;
}
/* ---- track cards: engraved plaques, not list items ----
No flat grey anywhere: every card is deep lacquered ink with a gold
breath along its lit edge — these are the last buttons a customer
touches before paying, and they must feel like it. */
.m-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 26px; }
.m-track {
position: relative; text-align: start; padding: 20px 22px 18px;
background:
radial-gradient(130% 110% at 88% 0%, rgba(var(--accent-rgb),.24), transparent 55%),
radial-gradient(90% 90% at 10% 110%, rgba(var(--accent-rgb),.08), transparent 55%),
linear-gradient(172deg, #1b1a20, #0c0b10 70%, #12100f);
border: 1px solid rgba(var(--accent-rgb),.38); border-radius: 17px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px -16px rgba(0,0,0,.85);
display: flex; flex-direction: column; gap: 5px;
transition: var(--t2) var(--fade);
overflow: hidden;
}
.m-track::after { /* selection seal, stamped in the corner */
content: "✓"; position: absolute; top: 11px; left: 13px;
width: 23px; height: 23px; border-radius: 50%;
display: grid; place-items: center;
font-size: .74rem; font-weight: 900; color: #17130a;
background: var(--grad-gold);
box-shadow: 0 0 14px -2px rgba(var(--accent-rgb),.8);
opacity: 0; transform: scale(.5); transition: var(--t2) var(--spring);
}
.m-track b { font-family: var(--f-display); font-size: 1.32rem; letter-spacing: .02em; color: #f3efe2; transition: var(--t2) var(--fade); }
.m-track span { font-family: var(--f-ui); font-size: .84rem; color: #98917e; }
.m-track:hover {
border-color: rgba(var(--accent-rgb),.62); transform: translateY(-3px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 36px -18px rgba(0,0,0,.9), 0 0 26px -10px rgba(var(--accent-rgb),.5);
}
.m-track.selected {
border-color: var(--accent);
background:
radial-gradient(130% 120% at 88% 0%, rgba(var(--accent-rgb),.3), transparent 55%),
linear-gradient(172deg, #1c1a1a, #0d0c10 70%, #12100f);
box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px rgba(var(--accent-rgb),.4), 0 0 32px -8px rgba(var(--accent-rgb),.55);
}
.m-track.selected b {
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.m-track:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
/* ---- period rows: the price is the jewel ---- */
.m-periods { display: grid; gap: 13px; margin-bottom: 28px; }
.m-period {
position: relative;
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 19px 22px; text-align: start; flex-wrap: wrap;
background:
radial-gradient(120% 130% at 12% 0%, rgba(var(--accent-rgb),.2), transparent 52%),
radial-gradient(80% 100% at 92% 110%, rgba(var(--accent-rgb),.07), transparent 55%),
linear-gradient(172deg, #1a191f, #0c0b10 70%, #11100e);
border: 1px solid rgba(var(--accent-rgb),.36);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px -16px rgba(0,0,0,.85);
border-radius: 17px; transition: var(--t2) var(--fade);
}
.m-period:hover {
border-color: rgba(var(--accent-rgb),.6); transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 32px -18px rgba(0,0,0,.9), 0 0 24px -10px rgba(var(--accent-rgb),.45);
}
.m-period.selected {
border-color: var(--accent);
background:
radial-gradient(120% 140% at 12% 0%, rgba(var(--accent-rgb),.26), transparent 55%),
linear-gradient(172deg, #1c1a18, #0d0c10 70%, #11100e);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(var(--accent-rgb),.4), 0 0 30px -8px rgba(var(--accent-rgb),.55);
}
.m-period:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.mp-name { font-family: var(--f-display); font-variation-settings: "wght" 780, "wdth" 80; font-size: 1.22rem; color: #f3efe2; }
.mp-price {
font-family: var(--f-mono); font-weight: 700; font-size: 1.18rem;
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 0 14px rgba(var(--accent-rgb),.35));
}
.mp-save { font-family: var(--f-mono); font-size: .74rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: rgba(76,215,135,.16); border: 1px solid rgba(76,215,135,.35); color: #6fe8a3; }
.mp-note { width: 100%; font-family: var(--f-ui); font-size: .8rem; color: #90897a; }
/* waiting-state stays GOLD — dimmed lacquer, never grey */
#mNext[disabled] { opacity: .58; cursor: not-allowed; filter: brightness(.52) sepia(.25); }
/* ---- payment methods ---- */
.m-pay-list { display: grid; gap: 12px; }
.m-pay {
display: flex; align-items: center; gap: 16px; padding: 17px 19px; width: 100%;
background:
radial-gradient(120% 130% at 88% 0%, rgba(var(--accent-rgb),.15), transparent 52%),
linear-gradient(172deg, #19181e, #0c0b10 70%, #100f0e);
border: 1px solid rgba(var(--accent-rgb),.3);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px -15px rgba(0,0,0,.85);
border-radius: 17px; text-align: start; color: inherit; transition: var(--t2) var(--fade);
}
a.m-pay:hover { border-color: var(--accent); transform: translateX(-4px); box-shadow: 0 0 24px -10px rgba(var(--accent-rgb),.5); }
.m-pay:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.mp-ico { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--f-ui); font-weight: 800; font-size: .7rem; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -8px rgba(0,0,0,.8); }
.mp-body { flex: 1; }
.mp-title { font-family: var(--f-ui); font-weight: 700; font-size: .98rem; }
.mp-desc { font-family: var(--f-ui); font-size: .78rem; color: var(--text-3); }
.mp-soon { font-family: var(--f-ui); font-size: .68rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--hair-soft); color: var(--text-3); flex-shrink: 0; }
.m-pay.disabled { opacity: .42; cursor: not-allowed; }
.ico-bit{background:linear-gradient(135deg,#00b3e6,#0077b3)}
.ico-paybox{background:linear-gradient(135deg,#2563eb,#7c3aed)}
.ico-paypal{background:linear-gradient(135deg,#003087,#009cde)}
.ico-card{background:linear-gradient(135deg,#4b5563,#1f2937)}
.ico-wallet{background:linear-gradient(135deg,#18181b,#3f3f46);border:1px solid #52525b}
.m-divider { display: flex; align-items: center; gap: 14px; color: var(--text-3); font-family: var(--f-ui); font-size: .82rem; margin: 28px 0 20px; }
.m-divider::before,.m-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--hair)); }
.m-divider::after { background: linear-gradient(90deg, var(--hair), transparent); }
/* ---- the WhatsApp CTA: one tap, chat opens, message ready ---- */
.wa-cta {
position: relative; display: flex; align-items: center; gap: 18px;
width: 100%; padding: 18px 22px; border-radius: 18px;
color: #eafff1; text-decoration: none; overflow: hidden;
background:
radial-gradient(120% 160% at 85% -30%, rgba(37,211,102,.32), transparent 55%),
linear-gradient(170deg, #0d3524, #071f15 60%, #0a2b1c);
border: 1px solid rgba(37,211,102,.55);
box-shadow:
0 0 0 1px rgba(3,10,6,.9),
inset 0 1px 0 rgba(255,255,255,.09),
0 18px 44px -18px rgba(0,0,0,.85),
0 0 38px -10px rgba(37,211,102,.45);
transition: var(--t2) var(--fade);
cursor: pointer;
}
.wa-cta::before { /* the slow light blade, same as the gold buttons */
content: ""; position: absolute; inset: -40% auto; width: 34%;
transform: skewX(-18deg) translateX(-260%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
animation: waBlade 4.6s ease-in-out infinite;
}
@keyframes waBlade { 55%,100% { transform: skewX(-18deg) translateX(460%); } }
.wa-cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(3,10,6,.9), inset 0 1px 0 rgba(255,255,255,.12), 0 22px 52px -18px rgba(0,0,0,.9), 0 0 52px -8px rgba(37,211,102,.6); }
/* The 3D badge: a lacquered squircle with a real light story — top gloss,
deep under-shadow, rim light — floating gently. Pure CSS, so it stays
razor sharp at any size and costs the page nothing. */
/* A real 3D object, like the reference renders: a lacquered squircle
with a THICK extruded side (the stacked hard shadows), window-light
gloss on the shoulder, rim light, and a grounded ellipse of shadow
underneath — floating and tilting as one body. */
.wa-ico {
position: relative;
width: 74px; height: 74px; flex-shrink: 0; border-radius: 25px;
display: grid; place-items: center;
background:
radial-gradient(135% 135% at 32% 16%, #63f7a0 0%, #25d366 44%, #0c9445 100%);
box-shadow:
/* skin */
inset 0 3px 5px rgba(255,255,255,.6),
inset 0 -8px 16px rgba(0,58,24,.65),
inset 3px 0 5px rgba(255,255,255,.16),
/* the extruded body — each step is a slice of the side wall */
-2px 3px 0 #0fa04d,
-4px 6px 0 #0c8a41,
-6px 9px 0 #0a7437,
-8px 12px 0 #085e2c,
/* air */
-14px 26px 30px -12px rgba(0,0,0,.75),
0 0 44px -8px rgba(37,211,102,.8);
transform: rotate(-9deg);
animation: waFloat 4.2s ease-in-out infinite;
}
@keyframes waFloat {
50% { transform: rotate(-5deg) translateY(-5px); }
}
.wa-ico::before { /* the window-light gloss on the shoulder */
content: ""; position: absolute; top: 6%; left: 11%; right: 32%; height: 36%;
border-radius: 50% 50% 60% 60% / 70% 70% 40% 40%;
background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0));
pointer-events: none;
}
.wa-ico::after { /* grounded shadow, breathing with the float */
content: ""; position: absolute; bottom: -18px; left: 2%; width: 96%; height: 14px;
border-radius: 50%;
background: radial-gradient(50% 50% at 50% 50%, rgba(0,10,4,.6), transparent 72%);
filter: blur(2px);
animation: waShadow 4.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes waShadow { 50% { transform: scale(.82); opacity: .55; } }
.wa-ico svg {
width: 40px; height: 40px; fill: #ffffff;
filter: drop-shadow(0 3px 4px rgba(0,45,18,.6)) drop-shadow(0 0 7px rgba(255,255,255,.3));
}
.wa-body { display: flex; flex-direction: column; gap: 4px; }
.wa-body b { font-family: var(--f-ui); font-weight: 800; font-size: 1.24rem; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,25,10,.6); }
.wa-body i { font-style: normal; font-family: var(--f-ui); font-size: .84rem; color: rgba(214,244,226,.78); }
.wa-cta.wa-locked { opacity: .45; filter: saturate(.35); cursor: not-allowed; }
.wa-cta.wa-nudge { animation: waNudge .38s var(--fade); }
@keyframes waNudge { 25%{transform:translateX(-7px)} 60%{transform:translateX(6px)} }
/* ---- the terms gate ---- */
.m-check {
display: flex; align-items: center; gap: 11px;
margin-top: 14px; padding: 4px 2px;
font-family: var(--f-ui); font-size: .86rem; color: var(--text-2);
cursor: pointer; user-select: none;
}
.m-check input { position: absolute; opacity: 0; pointer-events: none; }
.m-check .m-box {
width: 21px; height: 21px; flex-shrink: 0; border-radius: 6px;
border: 1px solid rgba(var(--accent-rgb),.5); background: var(--ink-900);
display: grid; place-items: center; transition: var(--t2) var(--fade);
}
.m-check .m-box::after {
content: "✓"; font-size: .74rem; font-weight: 900; color: #17130a;
opacity: 0; transform: scale(.4); transition: var(--t2) var(--spring);
}
.m-check input:checked + .m-box { background: var(--grad-gold); border-color: var(--accent); box-shadow: 0 0 14px -3px rgba(var(--accent-rgb),.6); }
.m-check input:checked + .m-box::after { opacity: 1; transform: scale(1); }
.m-check input:focus-visible + .m-box { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.m-check a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.m-check a:hover { color: var(--accent); }
.m-check.m-check-hot { animation: checkHot 1s var(--fade); border-radius: 10px; }
@keyframes checkHot { 0%,60% { background: rgba(var(--accent-rgb),.14); } }
/* ============================================================
FOUNDER — the man behind it, standing IN the scene
============================================================ */
/* Tall on purpose: the extra height is the scroll runway for the
sticky figure — reading room first, one slow 360° at the end. */
.founder { position: relative; }
.founder-wrap {
display: grid;
grid-template-columns: minmax(300px, 430px) 1fr; /* figure right (RTL start), story left */
gap: clamp(36px, 5vw, 84px);
align-items: start;
}
.founder-visual {
position: sticky; top: 11vh;
will-change: transform, opacity;
z-index: 2;
}
.founder .r360 {
position: relative;
aspect-ratio: 304 / 432;
touch-action: pan-y; /* phone scrolling must survive the drag toy */
user-select: none; -webkit-user-select: none;
cursor: grab;
opacity: 0; transition: opacity .8s var(--fade);
filter: drop-shadow(0 30px 44px rgba(0,0,0,.66));
}
.founder .r360.is-dragging { cursor: grabbing; }
.founder .r360[data-ready] { opacity: 1; }
.founder .r360 canvas { display: block; width: 100%; height: 100%; }
/* the chapter-coloured aura breathing behind him — he belongs to the
scene, not to a grey box */
.founder-aura {
position: absolute; inset: -12% -18% 0;
background: radial-gradient(52% 46% at 50% 38%, rgba(var(--accent-rgb),.24), transparent 70%);
filter: blur(6px);
animation: founderAura 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes founderAura { 50% { opacity: .55; } }
.founder-floor {
position: absolute; bottom: -3%; left: 12%; right: 12%; height: 26px;
border-radius: 50%;
background: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb),.3), transparent 72%);
filter: blur(6px);
pointer-events: none;
}
.founder-badge {
margin-top: 18px; text-align: center;
}
.founder-badge b {
display: block;
font-family: var(--f-display); font-variation-settings: "wght" 830, "wdth" 76;
font-size: 1.55rem;
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.founder-badge span {
display: block; margin-top: 4px;
font-family: var(--f-ui); font-size: .88rem; letter-spacing: .06em; color: var(--text-2);
}
/* the story fills its column — Netanel: the left side sat empty while
the type stayed small. Bigger everything, and reveals with presence. */
.founder-story { max-width: 900px; }
.founder-lead {
font-size: clamp(2.05rem, 3.9vw, 3.45rem);
font-variation-settings: "wght" 840, "wdth" 76;
line-height: 1.2; margin: 14px 0 40px;
text-wrap: balance;
}
.founder-block { margin-bottom: 38px; }
/* founder text arrives like a curtain lifting: rise + defocus-in,
staggered by the observer as each block enters */
.founder [data-reveal] {
transform: translateY(34px);
filter: blur(6px);
transition: opacity .85s var(--fade), transform .85s var(--move), filter .85s var(--fade);
}
.founder [data-reveal].in { filter: blur(0); }
.founder-block h3 {
font-family: var(--f-ui); font-size: 1.05rem; font-weight: 800;
letter-spacing: .16em; color: var(--accent);
margin-bottom: 12px;
text-shadow: 0 0 20px rgba(var(--accent-rgb),.35);
}
.founder-block h3::after {
content: ""; display: inline-block; vertical-align: middle;
width: 44px; height: 1px; margin-inline-start: 14px;
background: linear-gradient(90deg, var(--accent), transparent);
}
.founder-block p {
font-family: var(--f-read);
font-size: clamp(1.16rem, 1.55vw, 1.42rem);
line-height: 1.74; color: #ddd8ca;
margin-bottom: 14px;
}
.founder-block strong { color: var(--gold-hi); font-weight: 700; }
.founder-pull {
font-family: var(--f-display);
font-variation-settings: "wght" 780, "wdth" 74;
font-size: clamp(1.85rem, 3vw, 2.7rem);
line-height: 1.3;
margin: 38px 0;
padding: 22px 28px;
border-inline-start: 3px solid var(--accent);
background: linear-gradient(90deg, rgba(var(--accent-rgb),.1), transparent 70%);
border-radius: 6px 14px 14px 6px;
background-clip: padding-box;
color: var(--gold-hi);
text-shadow: 0 0 30px rgba(var(--accent-rgb),.3);
}
.founder-stats {
display: grid; grid-template-columns: 1fr 1fr;
gap: 16px; margin: 40px 0;
}
.founder-stats > div {
position: relative; overflow: hidden;
padding: 24px 26px;
background:
radial-gradient(120% 120% at 88% 0%, rgba(var(--accent-rgb),.2), transparent 55%),
linear-gradient(172deg, #1a1820, #0c0b10);
border: 1px solid rgba(var(--accent-rgb),.34);
border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 26px -16px rgba(0,0,0,.85);
transition: var(--t2) var(--fade);
}
.founder-stats > div:hover {
border-color: rgba(var(--accent-rgb),.6); transform: translateY(-3px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 30px -8px rgba(var(--accent-rgb),.5);
}
/* the mirror-blade: a travelling reflection every card carries, on
EVERY device — it must be unmissable on a phone too, so it runs as a
constant slow sweep (view-timeline proved invisible at rest) */
.founder-stats > div::after {
content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 40%;
transform: skewX(-18deg) translateX(-320%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), rgba(var(--accent-rgb),.38), transparent);
animation: statSheenLoop 4.4s ease-in-out infinite;
pointer-events: none;
}
/* stagger so the four blades never move in lockstep */
.founder-stats > div:nth-child(2)::after { animation-delay: 1.1s; }
.founder-stats > div:nth-child(3)::after { animation-delay: 2.2s; }
.founder-stats > div:nth-child(4)::after { animation-delay: 3.3s; }
/* the window-light gloss along the top — the "polished lacquer" cue */
.founder-stats > div::before {
content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 46%;
border-radius: 14px 14px 60% 60% / 14px 14px 100% 100%;
background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0));
pointer-events: none;
}
@keyframes statSheenLoop { 55%, 100% { transform: skewX(-18deg) translateX(430%); } }
.founder-stats b {
display: block; font-family: var(--f-mono); font-weight: 700;
font-size: 1.5rem; margin-bottom: 6px;
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 0 16px rgba(var(--accent-rgb),.35));
}
.founder-stats span { font-family: var(--f-ui); font-size: .95rem; color: var(--text-2); line-height: 1.55; }
.founder-cta p {
font-family: var(--f-read); font-size: clamp(1.12rem, 1.4vw, 1.3rem); color: #ddd8ca;
margin-bottom: 18px; max-width: 640px;
}
@media (max-width: 900px) {
.founder-wrap { grid-template-columns: 1fr; gap: 26px; }
/* on a phone the figure opens the section, centred, and the story
flows beneath — sticky would sit on top of the text */
.founder-visual { position: relative; top: 0; width: min(74%, 330px); margin: 0 auto; }
.founder-stats { grid-template-columns: 1fr 1fr; }
.founder-lead { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
}
@media (prefers-reduced-motion: reduce) {
.founder-visual { position: static; transform: none !important; opacity: 1 !important; }
.founder-aura { animation: none; }
}
/* ============================================================
LIGHTBOX
============================================================ */
/* Scrollable, not letterboxed: a tall screenshot keeps its full reading
width and the visitor scrolls through it — squeezing it into one
screen height is exactly what made the text unreadable. */
.lightbox { position: fixed; inset: 0; z-index: 220; background: rgba(3,4,6,.95); backdrop-filter: blur(14px); overflow-y: auto; padding: 5vh 4vw; text-align: center; }
.lightbox[hidden] { display: none; }
.lightbox img { display: block; margin: 0 auto; width: min(94vw, 860px); max-width: 94vw; height: auto; border-radius: 12px; border: 1px solid var(--hair); }
.lightbox-close { position: fixed; }
.lightbox-close { position: absolute; top: 22px; inset-inline-start: 22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair-soft); color: var(--text-2); }
.lightbox-close:hover { border-color: var(--down); color: var(--down); }
/* ============================================================
TOUCH "HOVER" — on phones the card at the centre of the screen
lights up as you scroll, mirroring the desktop pointer state.
============================================================ */
.bento-card.is-active {
box-shadow: 0 26px 54px -22px #000, 0 0 46px -18px rgba(var(--accent-rgb),.55);
}
.bento-card.is-active::after { opacity: 1; --mx: 50%; --my: 0%; }
.bento-card.is-active .bento-ico { transform: translateY(-3px) rotate(-6deg); }
.cover-card.is-active {
background: linear-gradient(180deg, rgba(var(--accent-rgb),.12), transparent 46%), var(--ink-800);
}
.cover-card.is-active::before { transform: scaleX(1); }
.cover-card.is-active .tag { border-color: rgba(var(--accent-rgb),.45); background: rgba(var(--accent-rgb),.07); }
.track-card.is-active,
.price-card.is-active {
border-color: rgba(var(--accent-rgb),.45);
background: var(--ink-750);
box-shadow: 0 30px 60px -30px #000, 0 0 40px -20px rgba(var(--accent-rgb),.4);
}
.track-card.is-active::before { opacity: 1; inset-inline: 6%; }
.track-card.is-active .track-list li::before { width: 13px; }
.step.is-active { background: rgba(var(--accent-rgb),.05); }
.step.is-active::before { height: 100%; }
/* ============================================================
REVEALS
============================================================ */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 680ms var(--fade), transform 680ms var(--move); }
[data-reveal].in { opacity: 1; transform: none; }
[data-hero] { opacity: 0; transform: translateY(20px); }
.skewable { will-change: transform; }
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
[data-reveal],[data-hero] { opacity:1!important; transform:none!important; }
.grain,.scroll-cue { display: none; }
body.has-cursor,body.has-cursor * { cursor: auto !important; }
.cx-cur { display: none; }
/* the scroll-poured statement words arrive already full — an empty
outline forever is a contrast failure, not a calm effect */
[data-fill] { --fillp: 1; }
}
html.acc-motion [data-fill] { --fillp: 1 !important; }
/* ============================================================
SMALL SCREENS
============================================================ */
@media (max-width:640px){
.hero { padding-top: 108px; }
.hero-ctas .btn { width: 100%; white-space: normal; }
.m-tracks { grid-template-columns: 1fr; }
.report-grid { grid-template-columns: 1fr 1fr; }
.report-cell:nth-child(3){border-inline-start:none}
.report-cell{border-top:1px solid var(--hair-soft)}
.report-cell:nth-child(-n+2){border-top:none}
.bar-row { grid-template-columns: 66px 1fr; }
.footer-bottom { justify-content: center; }
body.has-cursor,body.has-cursor * { cursor: auto !important; }
.cx-cur { display: none; }
}
/* ============================================================
INFOGRAPHIC — bars
============================================================ */
.chart-panel {
background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
border: 1px solid var(--hair-soft); border-radius: var(--r-lg); padding: 34px 32px;
backdrop-filter: blur(6px);
}
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.chart-head h3 { font-family: var(--f-body); font-weight: 800; font-size: 1.04rem; }
.chart-head span { font-family: var(--f-ui); font-size: .79rem; color: var(--text-3); }
.bars { display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 16px; }
.bar-name { font-family: var(--f-ui); font-size: .87rem; font-weight: 700; color: var(--text-2); }
.bar-row.is-vip .bar-name { color: var(--accent); transition: color var(--t3); }
.bar-track { height: 30px; border-radius: 7px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); overflow: hidden; }
.bar {
height: 100%; width: 0; border-radius: 6px; min-width: 54px;
background: linear-gradient(90deg, rgba(var(--accent-rgb),.3), var(--accent));
display: flex; align-items: center; justify-content: flex-end; padding-inline: 11px;
transition: width 1.5s var(--move), background var(--t3) var(--fade);
}
.bar.is-vip { background: var(--grad-gold); }
.bar-val { font-family: var(--f-mono); font-size: .79rem; font-weight: 700; color: #17130a; }
.bars-note { margin-top: 20px; color: var(--text-3); font-size: .83rem; }
/* ============================================================
COUNCIL ROUND (v97) — trust lines, sticky CTA, session clock,
product shots, and the proof-tab fix for phones
============================================================ */
/* the three proof tabs broke to three ragged lines at 390px; on a
phone they become a full-width three-column segmented control,
each label allowed exactly two tidy lines — no word ever cut */
@media (max-width: 700px) {
.proof-tabs {
display: grid; grid-template-columns: 1fr 1fr 1fr;
width: 100%; border-radius: 18px; gap: 4px;
}
.proof-tab {
padding: 11px 6px; border-radius: 13px;
font-size: .8rem; line-height: 1.3; white-space: normal;
display: grid; place-items: center; min-height: 58px;
}
}
/* trust line under the pricing grid — the cheapest lever there is */
.pricing-trust {
text-align: center; margin-top: 30px;
font-family: var(--f-ui); font-size: 1.02rem; color: var(--gold-hi);
}
.pricing-trust b { font-weight: 700; letter-spacing: .01em; }
/* trust line inside the payment step */
.m-trust {
margin-top: 18px; text-align: center;
font-family: var(--f-ui); font-size: .84rem; color: var(--text-2);
}
/* ---- sticky join pill (phones) ----
a compact corner pill, not a bar: it must never cover the copy it
is trying to sell. The accessibility button owns the left corner,
this owns the right. */
.sticky-cta {
position: fixed; z-index: 90;
right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
display: none;
transform: translateY(160%);
transition: transform var(--t3) var(--move);
}
.sticky-cta .btn {
padding: 12px 20px; font-size: .93rem; white-space: nowrap;
border-radius: 999px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
@media (max-width: 900px) {
.sticky-cta { display: block; }
.sticky-cta.is-on { transform: translateY(0); }
}
/* ---- the one golden payment door (Grow checkout) ---- */
.m-pay-main {
border-color: rgba(var(--accent-rgb), .45) !important;
background: linear-gradient(160deg, rgba(var(--accent-rgb), .1), rgba(255,255,255,.02)) !important;
position: relative;
transition: border-color var(--t2) var(--fade), opacity var(--t2) var(--fade),
filter var(--t2) var(--fade), transform var(--t2) var(--move);
}
.m-pay-main:not(.pay-locked):hover {
border-color: var(--gold-hi) !important;
transform: translateY(-2px);
}
.m-pay-main .mp-go {
margin-inline-start: auto; align-self: center;
font-size: 1.3rem; color: var(--gold-hi); direction: ltr;
}
/* locked until the terms box is ticked — the site's own gate, on top
of the consent checkbox the payment page itself shows */
.m-pay-main.pay-locked {
opacity: .48; filter: saturate(.5);
cursor: not-allowed;
}
/* the coverage section's closing line — the "and then it just works" */
.cover-close {
margin: 40px auto 0; max-width: 900px; text-align: center;
font-family: var(--f-read); font-size: clamp(1.12rem, 1.8vw, 1.5rem);
line-height: 1.6; color: #cfc9b8;
}
.cover-close b { color: var(--gold-hi); font-weight: 700; }
/* ============================================================
THE TOOLKIT — three holographic rigs
------------------------------------------------------------
Each module is a real 3D scene: a receding floor grid, a glow,
two orbital rings, drifting motes, the device, a projected
hologram panel and the platform mark — eight layers at eight
depths inside one perspective box. Leaning the module moves
them at different rates, so the depth is genuine.
Loops run only while .is-in, so off-screen rigs cost nothing.
============================================================ */
.tools-wrap { max-width: 1280px; margin-inline: auto; }
.tools-picker {
display: grid; gap: 22px;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
perspective: 1500px;
}
/* ---- the module shell ---- */
.tool-card {
--tk: 200, 169, 106;
--rx: 0deg; --ry: 0deg; --mx: 50%; --my: 40%;
position: relative; isolation: isolate; overflow: hidden;
display: grid; gap: 16px; justify-items: center; text-align: center;
padding: 24px 22px 24px; border-radius: 24px;
background:
radial-gradient(85% 65% at var(--mx) var(--my), rgba(var(--tk), .16), transparent 68%),
linear-gradient(168deg, rgba(255,255,255,.06), rgba(255,255,255,.01) 62%),
var(--ink-880);
border: 1px solid rgba(var(--tk), .26);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 54px -34px #000;
transform-style: preserve-3d;
opacity: 0; transform: translateY(40px) rotateX(11deg);
transition: opacity .68s var(--fade) calc(var(--i, 0) * .12s),
transform .8s var(--move) calc(var(--i, 0) * .12s),
border-color var(--t2) var(--fade), box-shadow var(--t3) var(--fade);
}
.tool-card.is-in { opacity: 1; transform: none; }
.tk-sheen {
position: absolute; inset: -40%; pointer-events: none; z-index: 5;
background: linear-gradient(115deg, transparent 43%, rgba(255,255,255,.06) 50%, transparent 57%);
transform: translateX(-60%);
}
.tool-card.is-in .tk-sheen { animation: tkSheen 8s ease-in-out infinite; }
@keyframes tkSheen { 0%, 64% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.tk-frame { position: absolute; inset: 12px; pointer-events: none; z-index: 4; }
.tk-frame::before, .tk-frame::after {
content: ""; position: absolute; width: 26px; height: 26px;
border: 2px solid rgba(var(--tk), .55); border-radius: 5px;
transition: border-color var(--t2) var(--fade), inset var(--t2) var(--move);
}
.tk-frame::before { top: 0; inset-inline-start: 0; border-inline-end: 0; border-bottom: 0; }
.tk-frame::after { bottom: 0; inset-inline-end: 0; border-inline-start: 0; border-top: 0; }
.tk-num {
position: absolute; top: 18px; inset-inline-end: 20px; z-index: 6;
font-size: .84rem; font-weight: 700; letter-spacing: .06em;
color: rgba(var(--tk), .85);
}
/* ============================================================
THE SCENE
============================================================ */
.tk-stage {
position: relative; z-index: 1;
width: 100%; max-width: 280px; aspect-ratio: 1 / 1;
transform-style: preserve-3d;
transform: rotateX(var(--rx)) rotateY(var(--ry));
transition: transform .4s var(--move);
}
.tk-stage > * { position: absolute; inset: 0; }
/* the floor, receding away from the viewer */
.tk-floor {
top: 58%; bottom: -18%; inset-inline: -30%;
background:
repeating-linear-gradient(90deg, rgba(var(--tk), .5) 0 1px, transparent 1px 34px),
repeating-linear-gradient(0deg, rgba(var(--tk), .42) 0 1px, transparent 1px 26px);
transform: rotateX(74deg) translateZ(-70px);
transform-origin: 50% 0;
-webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
mask-image: linear-gradient(to bottom, #000, transparent 78%);
opacity: .62;
}
.tool-card.is-in .tk-floor { animation: tkFloor 9s linear infinite; }
@keyframes tkFloor { to { background-position: 0 26px, 0 26px; } }
.tk-glow {
inset: 14% 12%; border-radius: 50%;
background: radial-gradient(circle, rgba(var(--tk), .4), transparent 66%);
filter: blur(20px);
transform: translateZ(-52px);
}
.tool-card.is-in .tk-glow { animation: tkBreath 5.5s ease-in-out infinite; }
@keyframes tkBreath { 0%, 100% { opacity: .7; transform: translateZ(-52px) scale(1); }
50% { opacity: 1; transform: translateZ(-52px) scale(1.07); } }
/* two rings orbiting the device */
.tk-orbit {
inset: 6%; border-radius: 50%;
border: 1.5px solid rgba(var(--tk), .34);
border-top-color: rgba(var(--tk), .85);
}
.tk-o1 { transform: rotateX(72deg) translateZ(-16px); }
.tk-o2 { inset: 17%; border-style: dashed; transform: rotateX(66deg) rotateY(16deg) translateZ(4px); }
.tool-card.is-in .tk-o1 { animation: tkO1 15s linear infinite; }
.tool-card.is-in .tk-o2 { animation: tkO2 21s linear infinite reverse; }
@keyframes tkO1 { to { transform: rotateX(72deg) rotateZ(360deg) translateZ(-16px); } }
@keyframes tkO2 { to { transform: rotateX(66deg) rotateY(16deg) rotateZ(360deg) translateZ(4px); } }
/* motes drifting between the planes */
.tk-motes i {
position: absolute; width: 4px; height: 4px; border-radius: 50%;
background: rgba(var(--tk), .9);
box-shadow: 0 0 8px rgba(var(--tk), .9);
top: calc(14% + var(--n) * 11%);
inset-inline-start: calc(8% + var(--n) * 12%);
transform: translateZ(calc(-30px + var(--n) * 18px));
opacity: .55;
}
.tool-card.is-in .tk-motes i {
animation: tkMote calc(5s + var(--n) * 1.1s) ease-in-out infinite;
animation-delay: calc(var(--n) * -.7s);
}
@keyframes tkMote {
0%, 100% { transform: translateZ(calc(-30px + var(--n) * 18px)) translateY(0); opacity: .35; }
50% { transform: translateZ(calc(-30px + var(--n) * 18px)) translateY(-16px); opacity: 1; }
}
/* the device itself */
.tk-art {
display: grid; place-items: center;
transform: translateZ(26px) translateY(-7%);
filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
.tk-art svg { width: 78%; height: 78%; overflow: visible; }
/* a hologram scan sweeping the device */
.tk-scan {
inset: 14% 16%; transform: translateZ(34px); pointer-events: none;
background: linear-gradient(180deg, transparent 44%, rgba(var(--tk), .5) 50%, transparent 56%);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
opacity: 0;
}
.tool-card.is-in .tk-scan { animation: tkScan 4.6s ease-in-out infinite; }
@keyframes tkScan {
0% { transform: translateZ(34px) translateY(-46%); opacity: 0; }
12% { opacity: .9; }
60% { transform: translateZ(34px) translateY(46%); opacity: .9; }
72%, 100%{ transform: translateZ(34px) translateY(46%); opacity: 0; }
}
/* ---- the projected panel, one plane closer ---- */
.tk-holo {
inset: auto 4% 1% auto; width: 57%; height: auto;
display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px;
transform: translateZ(62px);
background: rgba(6, 9, 14, .82);
border: 1px solid rgba(var(--tk), .55);
box-shadow: 0 14px 34px rgba(0,0,0,.6), 0 0 26px -8px rgba(var(--tk), .6);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
font-family: var(--f-mono); text-align: start; direction: ltr;
}
.tool-card.is-in .tk-holo { animation: tkHolo 6s ease-in-out infinite; }
@keyframes tkHolo {
0%, 100% { transform: translateZ(62px) translateY(0); }
50% { transform: translateZ(62px) translateY(-7px); }
}
.tk-holo .th-row {
display: flex; align-items: center; gap: 6px;
font-size: .56rem; letter-spacing: .08em; color: rgba(var(--tk), 1);
}
.tk-holo .th-row b { font-weight: 700; }
.tk-holo .th-t { font-style: normal; margin-inline-start: auto; color: var(--text-3); font-size: .52rem; }
.tk-holo .th-dot {
width: 6px; height: 6px; border-radius: 50%; background: #e8695c;
box-shadow: 0 0 8px #e8695c;
}
.tool-card.is-in .tk-holo .th-dot { animation: tkPulse 1.6s ease-in-out infinite; }
.tk-holo .th-line { display: block; height: 4px; border-radius: 3px; background: rgba(240,232,210,.24); }
.tk-holo .th-l1 { width: 100%; }
.tk-holo .th-l2 { width: 68%; }
.tk-holo .th-pill {
align-self: start; padding: 3px 9px; border-radius: 999px; font-size: .55rem;
color: #7dedac; background: rgba(76,215,135,.16); border: 1px solid rgba(76,215,135,.5);
}
.tk-holo .th-pill b { color: #7dedac; }
.tk-holo .th-long { color: #7dedac; }
.tk-holo .th-chart { width: 100%; height: auto; }
.tk-holo .th-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tool-card.is-in .tk-holo .th-draw { animation: tkDraw 5s ease-out infinite; }
.tool-card.is-in .tk-holo .th-node { animation: tkPulse 2s ease-in-out infinite; }
.tk-holo .th-tags { display: flex; gap: 5px; }
.tk-holo .th-tags i {
font-style: normal; font-size: .5rem; letter-spacing: .05em;
padding: 2px 7px; border-radius: 5px; color: var(--text-2);
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
.tk-holo .th-rr { display: flex; align-items: center; gap: 6px; font-size: .52rem; color: var(--text-3); }
.tk-holo .th-rr i { font-style: normal; }
.tk-holo .th-bar {
flex: 1; height: 5px; border-radius: 3px; overflow: hidden;
background: rgba(232,105,92,.35);
}
.tk-holo .th-bar em { display: block; height: 100%; width: 0; background: #4cd787; }
.tool-card.is-in .tk-holo .th-bar em { animation: tkRR 5s ease-out infinite; }
@keyframes tkRR { 0%, 18% { width: 0; } 55%, 90% { width: 78%; } 100% { width: 0; } }
/* the platform mark, closest of all */
.tk-mark {
inset: auto auto 4% 0; width: max-content; height: max-content;
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 13px 6px 9px; border-radius: 999px;
transform: translateZ(86px);
font-family: var(--f-ui); font-size: .75rem; font-weight: 700;
background: rgba(6,7,10,.86); backdrop-filter: blur(8px);
box-shadow: 0 10px 26px rgba(0,0,0,.6);
}
.tk-mark svg { width: 15px; height: 15px; }
.tk-mark-wa { border: 1px solid rgba(37,211,102,.55); color: #4fe08a; }
.tk-mark-wa svg { fill: #25D366; }
.tk-mark-tg { border: 1px solid rgba(41,169,235,.55); color: #6cc7f5; }
.tk-mark-tg svg { fill: #29A9EB; }
.tk-mark-tv { border: 1px solid rgba(90,140,255,.55); color: #8fb0ff; }
.tk-mark-tv svg { fill: #5A8CFF; }
/* ---- a module hosting a live WebGL figure ----
The canvas replaces the drawn device, the CSS orbit rings and the
projected panel (the 3D scene brings its own), keeping the floor,
the glow, the motes and the platform mark. */
.bot-canvas {
position: absolute; inset: 0; display: block; pointer-events: none;
transform: translateZ(44px);
border-radius: 18px;
box-shadow: inset 0 0 0 1px rgba(var(--tk), .2);
}
.tool-card.has-bot .tk-art, .tool-card.has-bot .tk-orbit,
.tool-card.has-bot .tk-holo, .tool-card.has-bot .tk-scan,
.tool-card.has-bot .tk-floor, .tool-card.has-bot .tk-glow,
.tool-card.has-bot .tk-motes { display: none; }
/* per-tool colour */
.tool-card-whatsapp { --tk: 37, 211, 102; }
.tool-card-telegram { --tk: 41, 169, 235; }
.tool-card-patterns { --tk: 90, 140, 255; }
/* ---- the words under the scene ---- */
.tk-body { display: grid; gap: 6px; position: relative; z-index: 2; }
.tk-body b {
font-family: var(--f-ui); font-weight: 700;
font-size: clamp(1.1rem, 1.3vw, 1.28rem); color: var(--text); letter-spacing: -.01em;
}
.tk-body i { font-style: normal; font-family: var(--f-ui); font-size: .85rem; color: var(--text-3); line-height: 1.45; }
.tk-cta {
position: relative; z-index: 2;
display: inline-flex; align-items: center; gap: 10px;
padding: 11px 24px; border-radius: 999px;
font-family: var(--f-ui); font-size: .9rem; font-weight: 700; color: var(--gold-hi);
border: 1px solid rgba(var(--accent-rgb), .45);
background: rgba(var(--accent-rgb), .1);
transition: background var(--t2) var(--fade), color var(--t2) var(--fade),
border-color var(--t2) var(--fade), box-shadow var(--t2) var(--fade);
}
.tk-cta-ico { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); }
.tk-cta-ico svg { width: 10px; height: 10px; fill: #17130a; margin-inline-start: 1.5px; }
@media (hover: hover) {
.tool-card.is-in:hover {
border-color: rgba(var(--tk), .6);
box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 44px 76px -36px #000,
0 0 66px -16px rgba(var(--tk), .55);
}
.tool-card.is-in:hover .tk-frame::before,
.tool-card.is-in:hover .tk-frame::after { border-color: var(--gold-hi); }
.tool-card.is-in:hover .tk-cta {
background: var(--grad-gold); color: #17130a; border-color: transparent;
box-shadow: 0 10px 26px -12px rgba(var(--accent-rgb), .8);
}
.tool-card.is-in:hover .tk-cta-ico { background: rgba(0,0,0,.22); }
}
.tool-card:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.tool-card.is-on {
border-color: rgba(var(--tk), .72);
background:
radial-gradient(90% 70% at 50% 0%, rgba(var(--tk), .28), transparent 66%),
linear-gradient(168deg, rgba(255,255,255,.09), rgba(255,255,255,.015) 62%),
var(--ink-800);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 36px 70px -32px #000,
0 0 72px -18px rgba(var(--tk), .62);
}
.tool-card.is-on .tk-frame::before, .tool-card.is-on .tk-frame::after {
inset: -6px auto auto -6px; border-color: var(--gold-hi);
}
.tool-card.is-on .tk-frame::after { inset: auto -6px -6px auto; }
.tool-card.is-on .tk-num { color: var(--gold-hi); }
.tool-card.is-on .tk-cta { background: var(--grad-gold); color: #17130a; border-color: transparent; }
.tool-card.is-on .tk-cta-ico { background: rgba(0,0,0,.22); }
.tool-card.is-on::after {
content: ""; position: absolute; bottom: -12px; left: 50%;
width: 22px; height: 22px; transform: translateX(-50%) rotate(45deg);
background: var(--ink-800);
border-inline-start: 1px solid rgba(var(--tk), .55);
border-top: 1px solid rgba(var(--tk), .55);
z-index: 7;
}
.tools-hint { text-align: center; margin-top: 26px; font-family: var(--f-ui); font-size: .95rem; color: var(--text-3); }
/* ============================================================
THE DEVICES AT WORK
============================================================ */
.tk-live { }
.tool-card.is-in .tk-live { animation: tkPulse 2s ease-in-out infinite; }
@keyframes tkPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes tkDraw { 0%, 8% { stroke-dashoffset: 1; } 38%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
/* 01 · WhatsApp — messages landing one after another */
.tool-card.is-in .wa-b { animation: waIn 5s ease-out infinite; }
.wa-b2 { animation-delay: .8s !important; }
.wa-b3 { animation-delay: 1.6s !important; }
@keyframes waIn {
0% { opacity: 0; transform: translateX(14px); }
10%, 82% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateX(-8px); }
}
.wa-spark { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tool-card.is-in .wa-spark { animation: tkDraw 5s ease-out infinite .8s; }
/* 02 · Telegram — the robot blinks and looks around */
.tool-card.is-in .tg-eyes { animation: tgBlink 5.2s ease-in-out infinite; transform-box: view-box; transform-origin: 50% 44%; }
@keyframes tgBlink {
0%, 40%, 46%, 100% { transform: scaleY(1); }
43% { transform: scaleY(.12); }
}
.tool-card.is-in .tg-shine { animation: tgLook 6s ease-in-out infinite; }
@keyframes tgLook {
0%, 100% { transform: translate(0, 0); }
35% { transform: translate(5px, 1px); }
70% { transform: translate(-4px, 2px); }
}
/* 03 · Patterns — the structure draws itself, then the break */
.pt-l { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tool-card.is-in .pt-l { animation: tkDraw 5.4s ease-out infinite .3s; }
.pt-l2 { animation-delay: .7s !important; }
.pt-brk { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tool-card.is-in .pt-brk { animation: ptBreak 5.4s ease-out infinite; }
@keyframes ptBreak { 0%, 46% { stroke-dashoffset: 1; } 62%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.pt-hit { opacity: 0; transform-box: fill-box; transform-origin: center; }
.tool-card.is-in .pt-hit { animation: ptHit 5.4s ease-out infinite; }
@keyframes ptHit {
0%, 56% { opacity: 0; transform: scale(.4); }
68% { opacity: 1; transform: scale(1.4); }
90% { opacity: .95; transform: scale(1); }
100% { opacity: 0; transform: scale(.5); }
}
/* ============================================================
THE PANEL
============================================================ */
.tool-stage { margin-top: 36px; scroll-margin-top: 86px; }
.tool-stage.is-in .ts-inner { animation: tsIn .62s var(--move) both; }
@keyframes tsIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.ts-inner {
position: relative; overflow: hidden;
display: grid; gap: clamp(22px, 2.6vw, 34px);
padding: clamp(18px, 2.2vw, 30px);
background:
radial-gradient(70% 90% at 100% 0%, rgba(var(--accent-rgb), .1), transparent 58%),
radial-gradient(60% 80% at 0% 100%, rgba(var(--accent-rgb), .06), transparent 60%),
var(--ink-800);
border: 1px solid rgba(var(--accent-rgb), .32); border-radius: 26px;
box-shadow: 0 48px 96px -52px #000;
}
/* a faint engineering grid under the whole panel */
.ts-inner::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
background:
repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .07) 0 1px, transparent 1px 46px),
repeating-linear-gradient(0deg, rgba(var(--accent-rgb), .07) 0 1px, transparent 1px 46px);
-webkit-mask-image: radial-gradient(80% 70% at 70% 0%, #000, transparent 72%);
mask-image: radial-gradient(80% 70% at 70% 0%, #000, transparent 72%);
}
.ts-inner > * { position: relative; z-index: 1; }
.ts-head {
display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: clamp(20px, 2.6vw, 38px); align-items: start;
}
@media (max-width: 900px) { .ts-head { grid-template-columns: 1fr; } }
.ts-screen {
border: 1px solid rgba(var(--tk, var(--accent-rgb)), .38); border-radius: 16px;
overflow: hidden; background: #06070a;
box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 50px -28px #000;
}
.ts-bezel {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 15px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
border-bottom: 1px solid rgba(var(--accent-rgb), .22);
}
.ts-leds { display: inline-flex; gap: 6px; }
.ts-leds i { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--accent-rgb), .35); }
.ts-leds i:first-child {
background: rgb(var(--tk, 76, 215, 135));
box-shadow: 0 0 8px rgba(var(--tk, 76, 215, 135), .8);
}
.ts-bezel-tag { font-family: var(--f-mono); font-size: .7rem; color: var(--text-3); direction: rtl; }
.ts-media {
position: relative; aspect-ratio: 16 / 9; overflow: hidden;
background: linear-gradient(170deg, #10131b, #090b10);
display: grid; place-items: center;
}
.ts-media iframe, .ts-media video { width: 100%; height: 100%; display: block; border: 0; }
.ts-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; display: block; cursor: pointer; background: none; }
.ts-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t3) var(--move); }
.ts-shade { position: absolute; inset: 0; background: radial-gradient(58% 58% at 50% 44%, rgba(0,0,0,.08), rgba(4,5,8,.58)); }
.ts-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 80px; height: 80px; border-radius: 50%;
display: grid; place-items: center; background: var(--grad-gold);
box-shadow: 0 14px 36px rgba(0,0,0,.6);
transition: transform var(--t2) var(--spring);
}
.ts-play svg { width: 29px; height: 29px; fill: #17130a; margin-inline-start: 4px; position: relative; z-index: 1; }
.ts-ripple { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(var(--accent-rgb), .6); animation: tsRipple 2.6s ease-out infinite; }
@keyframes tsRipple { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.65); opacity: 0; } }
.ts-facade:hover .ts-play { transform: translate(-50%, -50%) scale(1.09); }
.ts-facade:hover img { transform: scale(1.045); }
.ts-facade:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: -3px; }
.ts-intro { align-self: center; }
.tool-stage.is-in .ts-intro > * { animation: tsUp .55s var(--move) both; }
.tool-stage.is-in .ts-intro h3 { animation-delay: .06s; }
.tool-stage.is-in .ts-intro .ts-tag { animation-delay: .12s; }
.tool-stage.is-in .ts-intro .ts-lead { animation-delay: .18s; }
.tool-stage.is-in .ts-intro .ts-stats { animation: none; }
.tool-stage.is-in .ts-intro .ts-yt { animation-delay: .55s; }
@keyframes tsUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
.ts-intro h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.18; margin-bottom: 6px; }
.ts-tag {
font-family: var(--f-ui); font-size: .93rem; font-weight: 600;
color: rgb(var(--tk, var(--accent-rgb))); margin-bottom: 16px;
}
.ts-lead { font-family: var(--f-read); font-size: clamp(1.02rem, 1.2vw, 1.16rem); line-height: 1.68; color: #c9c3b3; }
.ts-lead b { color: var(--gold-hi); font-weight: 700; }
.ts-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
@media (max-width: 520px) { .ts-stats { grid-template-columns: 1fr; } }
.ts-stat {
position: relative; overflow: hidden;
padding: 14px 12px; border-radius: 14px; text-align: center;
background: linear-gradient(165deg, rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), .03));
border: 1px solid rgba(var(--accent-rgb), .26);
}
.ts-stat::after {
content: ""; position: absolute; inset-inline: 12%; bottom: 0; height: 2px;
background: var(--grad-gold); transform: scaleX(0); transform-origin: right;
animation: tsBar .8s var(--move) both; animation-delay: calc(var(--d, .2s) + .2s);
}
@keyframes tsBar { to { transform: scaleX(1); } }
.tool-stage.is-in .ts-stat { animation: tsUp .5s var(--move) both; animation-delay: var(--d, .2s); }
.ts-stat b {
display: block; font-size: clamp(1.3rem, 2vw, 1.68rem); line-height: 1.1;
background: var(--grad-gold); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; direction: ltr;
}
.ts-stat span { display: block; margin-top: 6px; font-family: var(--f-ui); font-size: .76rem; line-height: 1.4; color: var(--text-3); }
.ts-yt { display: inline-block; margin-top: 20px; font-family: var(--f-ui); font-size: .88rem; color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb), .4); padding-bottom: 2px; }
.ts-yt:hover { color: var(--gold-hi); border-color: var(--gold-hi); }
.ts-blocks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ts-block {
position: relative; overflow: hidden;
display: flex; gap: 13px; align-items: flex-start;
padding: 17px 18px; border-radius: 16px;
background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
border: 1px solid var(--hair-soft);
transition: border-color var(--t2) var(--fade), transform var(--t2) var(--move), box-shadow var(--t2) var(--fade);
}
.ts-block::before {
content: ""; position: absolute; inset-inline-start: 0; top: 14%; bottom: 14%; width: 2px;
background: var(--grad-gold); opacity: 0; transition: opacity var(--t2) var(--fade);
}
.tool-stage.is-in .ts-block { animation: tsUp .5s var(--move) both; animation-delay: var(--d, .1s); }
.ts-block:hover {
border-color: rgba(var(--accent-rgb), .45); transform: translateY(-3px);
box-shadow: 0 20px 40px -28px #000;
}
.ts-block:hover::before { opacity: 1; }
.tb-ico {
flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px;
display: grid; place-items: center; font-size: 1.18rem;
background: radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .07));
border: 1px solid rgba(var(--accent-rgb), .32);
box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.ts-block b { display: block; margin-bottom: 5px; font-family: var(--f-ui); font-size: 1rem; font-weight: 700; color: var(--text); }
.ts-block p { font-family: var(--f-ui); font-size: .89rem; line-height: 1.55; color: var(--text-2); }
.ts-block p b { color: var(--gold-hi); display: inline; margin: 0; font-size: 1em; }
.ts-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-chips span {
font-family: var(--f-mono); font-size: .74rem; padding: 7px 13px; border-radius: 999px; direction: ltr;
color: var(--text-2); background: rgba(255,255,255,.035); border: 1px solid var(--hair-soft);
transition: border-color var(--t2) var(--fade), color var(--t2) var(--fade), transform var(--t2) var(--move);
}
.ts-chips span:hover {
border-color: rgba(var(--tk, var(--accent-rgb)), .55);
color: rgb(var(--tk, var(--accent-rgb))); transform: translateY(-2px);
}
.ts-shots { display: flex; flex-wrap: wrap; gap: 10px; }
.ts-shot {
width: 104px; height: 66px; padding: 0; overflow: hidden; cursor: zoom-in;
border: 1px solid var(--hair); border-radius: 10px;
transition: border-color var(--t2) var(--fade), transform var(--t2) var(--move);
}
.ts-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-shot:hover { border-color: var(--accent); transform: translateY(-2px); }
.ts-shot:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.ts-foot { border-top: 1px solid var(--hair-soft); padding-top: 20px; }
.ts-close { font-family: var(--f-read); font-size: clamp(1.05rem, 1.35vw, 1.28rem); line-height: 1.55; color: var(--gold-hi); text-align: center; }
.ts-note { margin-top: 12px; text-align: center; font-family: var(--f-ui); font-size: .76rem; line-height: 1.5; color: var(--text-3); }
.tool-soon { display: grid; justify-items: center; gap: 13px; text-align: center; padding: 20px; }
.tool-soon .tp-play {
width: 64px; height: 64px; border-radius: 50%;
border: 1.5px solid rgba(var(--accent-rgb), .55);
display: grid; place-items: center; background: rgba(var(--accent-rgb), .07);
box-shadow: 0 0 36px rgba(var(--accent-rgb), .2);
}
.tool-soon .tp-play svg { width: 21px; height: 21px; fill: var(--gold-hi); margin-inline-start: 3px; }
.tool-soon span:last-child { font-family: var(--f-ui); font-size: .88rem; color: var(--text-2); }
/* smaller screens: the rig keeps its depth, but the projected panel
and the platform mark stop sharing the same corner */
@media (max-width: 620px) {
.tk-stage { max-width: 250px; }
.tk-holo { inset: auto 0 13% auto; width: 72%; }
.tk-mark { inset: auto auto -3% 0; font-size: .72rem; }
.tk-art { transform: translateZ(26px) translateY(-12%) !important; }
}
/* nothing may be left invisible or restless for these visitors */
@media (prefers-reduced-motion: reduce) {
.tool-card { opacity: 1 !important; transform: none !important; }
.tool-card *, .ts-ripple { animation: none !important; }
.wa-b, .tk-holo, .pt-hit { opacity: 1 !important; }
.wa-spark, .pt-l, .pt-brk, .th-draw { stroke-dashoffset: 0 !important; }
.tk-scan { opacity: 0 !important; }
.ts-stat::after { transform: scaleX(1) !important; }
.tk-holo .th-bar em { width: 78% !important; }
}
html.acc-motion .tool-card { opacity: 1 !important; transform: none !important; }
html.acc-motion .tool-card *, html.acc-motion .ts-ripple { animation: none !important; }
html.acc-motion .wa-b, html.acc-motion .tk-holo, html.acc-motion .pt-hit { opacity: 1 !important; }
html.acc-motion .wa-spark, html.acc-motion .pt-l,
html.acc-motion .pt-brk, html.acc-motion .th-draw { stroke-dashoffset: 0 !important; }
html.acc-motion .tk-scan { opacity: 0 !important; }
html.acc-motion .ts-stat::after { transform: scaleX(1) !important; }
html.acc-motion .tk-holo .th-bar em { width: 78% !important; }