/* ========================================================================== (R)EVOLUTION — Ram · Landing Page Design system: near-black base (60), bold accent-wash sections (30), red brand accent (10) — 60-30-10 rule. See color-systems skill. Body/secondary text is kept solid white throughout (never dimmed to gray) for contrast against the black+red palette — explicit client requirement. ========================================================================== */ :root { /* --- Brand palette: black + red, matching the red/white transformation banners already used in Ram's own result-card graphics --- */ --accent: #d81f35; --accent-bright: #ff3b4e; --accent-dark: #8c1220; --accent-ink: #fff5f5; /* --- Ink / neutral scale (true near-black, not warm-tinted) --- */ --ink-950: #0a0a0a; --ink-900: #121212; --ink-800: #1c1c1c; --ink-700: #2b2b2b; --ink-500: rgba(255,255,255,0.9); --ink-300: #ffffff; --ink-100: #f5f0f0; --border-dark: rgba(255,255,255,0.09); --border-light: rgba(20,10,20,0.09); --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow-md: 0 10px 30px rgba(0,0,0,0.35); --shadow-glow: 0 8px 30px rgba(216,31,53,0.35); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 26px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 44px; --space-7: 76px; --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif; --max-w: 1180px; --ease: cubic-bezier(.22,.61,.36,1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x:CLIP (not hidden) clips any stray horizontal overflow without turning into a scroll container. `overflow-x: hidden` on the root is a well-known iOS Safari bug trigger: it makes fixed-position descendants (the sticky "דבר איתי" CTA and the UserWay widget) resolve against the html content box instead of the viewport, so they float mid-page while scrolling. `clip` clips the same overflow but does NOT establish a scroll container or a containing block for fixed elements, so position:fixed stays pinned to the viewport on iOS. (The old sticky .site-header this comment used to worry about no longer exists.) */ html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--font); background: var(--ink-950); color: var(--ink-100); line-height: 1.65; direction: rtl; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } .wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-4); } .accent-text { color: var(--accent-bright); } .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-bright); text-transform: uppercase; margin-bottom: var(--space-2); } h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; } h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 0; margin-bottom: var(--space-2); } h3 { font-size: clamp(20px, 2.5vw, 26px); } p { max-width: 65ch; } .eyebrow, .hero-sub, .lead-form-head p, .mini-cta-text, .final-cta-head p, .proof-stat-sub, .testimonials-sub { text-wrap: balance; } /* Skip link */ .skip-link { position: absolute; right: -999px; top: 0; z-index: 1000; background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 0 0 0 12px; } .skip-link:focus { right: 0; } :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------------------------------- Buttons ---------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: var(--radius-pill); font-weight: 700; font-size: 16px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); white-space: nowrap; } .btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-glow); animation: btn-accent-pulse 2.6s ease-in-out infinite; } .btn-accent:hover { background: var(--accent-bright); transform: translateY(-2px); animation: none; } @keyframes btn-accent-pulse { 0%, 100% { box-shadow: 0 8px 30px rgba(216,31,53,0.35); } 50% { box-shadow: 0 8px 34px rgba(216,31,53,0.6); } } .btn-ghost { background: transparent; color: var(--ink-100); border: 1px solid var(--border-dark); } .btn-ghost:hover { background: rgba(255,255,255,0.06); } .btn-lg { padding: 17px 34px; font-size: 17px; } .btn-sm { padding: 10px 18px; font-size: 14px; } .btn-block { width: 100%; } .btn:active { transform: scale(0.98); } /* ---------------------------------- Header ---------------------------------- */ .site-header { position: sticky; top: 0; z-index: 500; background: rgba(10,10,10,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-dark); } .header-row { display: flex; align-items: center; justify-content: center; padding-block: 10px; } .header-banner { font-size: 14px; font-weight: 700; color: var(--ink-100); max-width: 46ch; text-align: center; } .brand-logo { height: 34px; width: auto; } /* ---------------------------------- Hero ---------------------------------- */ .hero { position: relative; padding-block: var(--space-7) var(--space-6); background: radial-gradient(60% 50% at 15% 10%, rgba(216,31,53,0.20), transparent 60%), var(--ink-950); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: center; } .hero-banner { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--accent-bright); background: rgba(255,59,78,0.12); border: 1px solid rgba(255,59,78,0.35); border-radius: var(--radius-pill); padding: 8px 16px; margin-bottom: var(--space-3); } .hero-banner-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); flex-shrink: 0; } .hero-title { font-size: clamp(34px, 5.2vw, 58px); margin-block: 0 var(--space-3); } .hero-sub { font-size: clamp(17px, 2vw, 20px); color: var(--ink-300); max-width: 48ch; margin-bottom: var(--space-5); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); } .hero-trust { font-size: 13px; color: var(--ink-500); letter-spacing: 0.02em; } .hero-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 3/4; position: relative; } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.55), transparent 45%); } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; animation: hero-float 6s ease-in-out infinite; } @keyframes hero-float { 0%, 100% { transform: translateY(0) scale(1.02); } 50% { transform: translateY(-10px) scale(1.02); } } /* ---- Video hero: intro video → headline (guarantee) → sub → CTA ---- */ .hero--video { padding-block: var(--space-6); } .hero-v { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); } .hero-guarantee-sub { display: block; max-width: 46ch; margin-inline: auto; font-size: clamp(14px, 1.8vw, 18px); font-weight: 600; line-height: 1.5; color: var(--accent-bright); } /* intro video */ .hero-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md), 0 0 0 1px var(--border-dark); background: #000; } .hero-video-el { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-video-unmute { position: absolute; inset-block-end: 14px; inset-inline-end: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); background: rgba(216,31,53,0.92); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 6px 20px rgba(0,0,0,0.4); backdrop-filter: blur(4px); animation: btn-accent-pulse 2.2s ease-in-out infinite; transition: background .2s var(--ease), transform .2s var(--ease); } .hero-video-unmute:hover { background: var(--accent-bright); transform: translateY(-1px); } .hero-video-unmute-icon { font-size: 17px; line-height: 1; } .hero-video.is-unmuted .hero-video-unmute { display: none; } /* headline block */ .hero-copy-v { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .hero-copy-v .hero-title { max-width: 20ch; margin: 0; } .hero-copy-v .hero-sub { margin: 0; max-width: 42ch; color: #fff; } /* first CTA — high contrast so it never gets swallowed by the red/black */ .hero-actions-v { width: 100%; display: flex; justify-content: center; } .btn-hero-cta { background: linear-gradient(135deg, #ff5563, var(--accent) 70%); color: #fff; font-size: clamp(16px, 2.1vw, 20px); font-weight: 900; padding: 20px 34px; border-radius: var(--radius-pill); border: 2px solid rgba(255,255,255,0.88); white-space: normal; line-height: 1.25; text-align: center; max-width: 100%; animation: hero-cta-pulse 2.2s ease-in-out infinite; } .btn-hero-cta:hover { filter: brightness(1.08); transform: translateY(-2px); animation: none; } @keyframes hero-cta-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.12), 0 12px 30px rgba(216,31,53,0.5); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0.22), 0 14px 40px rgba(216,31,53,0.78); } } /* full-width form field (goal / what have you tried) */ .field--full { width: 100%; } .lead-form .field--full { margin-bottom: var(--space-3); } @media (max-width: 560px) { .hero-video-unmute { inset-block-end: 10px; inset-inline-end: 10px; padding: 8px 13px; font-size: 13px; } .btn-hero-cta { width: 100%; padding: 18px 20px; } } /* hero scarcity line under the first CTA */ .hero-scarcity { max-width: 54ch; margin-inline: auto; font-size: 14px; font-weight: 600; line-height: 1.55; color: #fff; background: rgba(216,31,53,0.10); border: 1px solid rgba(255,59,78,0.30); border-radius: var(--radius-md); padding: 10px 16px; } .hero-scarcity strong { color: var(--accent-bright); } /* CTA "sold-out" state — add class .is-full to the button to flip its colour */ .btn-hero-cta.is-full { background: #3a3a3a; color: #cfcfcf; border-color: rgba(255,255,255,0.22); box-shadow: none; animation: none; cursor: not-allowed; pointer-events: none; } /* ---- Stat band (front-loaded proof) ---- */ .stat-band { background: var(--ink-900); border-block: 1px solid var(--border-dark); padding-block: var(--space-5); } .stat-band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); text-align: center; } .stat { display: flex; flex-direction: column; gap: 8px; align-items: center; } /* entrance: each card sweeps up out of a blur when the band scrolls in (JS only) */ html.js .stat { opacity: 0; transform: translateY(28px) scale(0.92); filter: blur(9px); transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease); will-change: transform, opacity, filter; } .stat-band.is-live .stat { opacity: 1; transform: none; filter: blur(0); } .stat-band.is-live .stat:nth-child(1) { transition-delay: .05s; } .stat-band.is-live .stat:nth-child(2) { transition-delay: .22s; } .stat-band.is-live .stat:nth-child(3) { transition-delay: .39s; } .stat-num { position: relative; display: inline-block; font-size: clamp(32px, 5.4vw, 52px); font-weight: 900; color: var(--accent-bright); line-height: 1; text-shadow: 0 0 18px rgba(255,59,78,0.35); font-variant-numeric: tabular-nums; /* digits keep a steady width while rolling */ transition: text-shadow .3s var(--ease); } /* accent underline that sweeps out from the centre the instant the roll lands */ .stat-num::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -12px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent-bright), transparent); box-shadow: 0 0 14px rgba(255,59,78,0.65); transform: scaleX(0); transform-origin: center; transition: transform .55s var(--ease); } .stat-num.is-counting { text-shadow: 0 0 28px rgba(255,59,78,0.7); } .stat-num.is-counted { animation: stat-pop 0.5s var(--ease); } .stat-num.is-counted::after { transform: scaleX(1); } @keyframes stat-pop { 0% { transform: scale(1); } 35% { transform: scale(1.2); text-shadow: 0 0 36px rgba(255,59,78,0.9); } 100% { transform: scale(1); } } .stat-label { font-size: 14px; font-weight: 600; color: #fff; } @media (max-width: 560px) { .stat-band-grid { grid-template-columns: 1fr; gap: var(--space-3); } } @media (prefers-reduced-motion: reduce) { .stat { opacity: 1; transform: none; filter: none; transition: none; } .stat-num.is-counted { animation: none; } .stat-num::after { display: none; } } /* ---- Guarantee badge box ---- */ .guarantee-box-section { padding-block: var(--space-6); } .guarantee-box { max-width: 820px; margin-inline: auto; display: flex; align-items: center; gap: var(--space-4); background: linear-gradient(180deg, rgba(216,31,53,0.12), rgba(216,31,53,0.03)); border: 2px solid var(--accent); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-glow); } .guarantee-badge { flex-shrink: 0; width: 110px; height: 110px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, var(--accent-bright), var(--accent) 72%); color: #fff; font-weight: 900; font-size: 30px; line-height: 1; border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 8px 24px rgba(216,31,53,0.5); } .guarantee-badge small { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; margin-top: 3px; } .guarantee-box-copy h2 { font-size: clamp(22px, 3vw, 32px); margin-bottom: var(--space-1); } .guarantee-box-copy p { color: #fff; margin: 0; } .guarantee-box-copy strong { color: var(--accent-bright); } @media (max-width: 640px) { .guarantee-box { flex-direction: column; text-align: center; gap: var(--space-3); padding: var(--space-4); } .guarantee-box-copy p { margin-inline: auto; } } /* who-am-i promo photos — two shots side by side */ .who-media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .who-media-photo { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); /* aspect matches the images' native 9:16, so both show in full, uncropped */ object-fit: cover; object-position: center top; aspect-ratio: 9 / 16; } /* ---- Cookie consent ---- */ .cookie-consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 600; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); background: rgba(18,18,18,0.97); border-top: 1px solid var(--border-dark); backdrop-filter: blur(8px); padding: var(--space-3) var(--space-4); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); } .cookie-consent[hidden] { display: none; } .cookie-consent-text { font-size: 14px; color: #fff; max-width: 60ch; margin: 0; } .cookie-consent-text a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; } .cookie-consent-actions { display: flex; gap: var(--space-2); flex-shrink: 0; } @media (max-width: 640px) { .cookie-consent { flex-direction: column; text-align: center; gap: var(--space-2); } } /* ---------------------------------- Lead forms ---------------------------------- */ .cta-form-section { padding-block: var(--space-6); background: var(--ink-900); } .cta-form-section--compact { padding-block: var(--space-5); background: var(--ink-950); } .lead-form { max-width: 640px; margin-inline: auto; position: relative; background: linear-gradient(var(--ink-800), var(--ink-800)) padding-box, linear-gradient(135deg, var(--accent-bright), var(--accent) 60%, var(--accent-dark)) border-box; border: 2px solid transparent; border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-glow); animation: lead-form-pulse 3s ease-in-out infinite; } @keyframes lead-form-pulse { 0%, 100% { box-shadow: 0 8px 30px rgba(216,31,53,0.3); } 50% { box-shadow: 0 12px 42px rgba(216,31,53,0.55); } } .lead-form--compact { max-width: 720px; padding: var(--space-4); } .lead-form-head { text-align: center; margin-bottom: var(--space-3); } .lead-form-head h2 { font-size: clamp(25px, 3.6vw, 32px); font-weight: 900; margin-bottom: var(--space-1); } .lead-form-head p { color: var(--ink-300); margin-inline: auto; font-size: 16px; } /* Fields sit side by side (name / phone), the submit button is always its own full-width row below them — matches the reference form Ram's mentor pointed to, rather than squeezing the button into the same row. */ .lead-form-fields { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); } @media (min-width: 560px) { .lead-form-fields { flex-direction: row; } .lead-form-fields .field { flex: 1; } } /* Field labels stay in the DOM for screen readers, but the pill design below (borrowed from a reference site Ram's mentor liked) communicates the field's purpose through its placeholder only. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .field { display: flex; flex-direction: column; gap: 6px; text-align: right; } .field label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .field input { font: inherit; font-size: 17px; padding: 16px 22px; border-radius: var(--radius-pill); border: none; background: #fff; color: var(--ink-950); text-align: center; transition: box-shadow .2s var(--ease); } .field input::placeholder { color: #8b8790; } .field input:focus { box-shadow: 0 0 0 3px rgba(255,59,78,0.45); outline: none; } .field input.is-invalid { box-shadow: 0 0 0 3px rgba(229,86,107,0.55); } .field-error { font-size: 12px; color: #ff8296; min-height: 14px; text-align: center; } .lead-form-note { text-align: center; font-size: 13px; color: var(--ink-500); margin-top: var(--space-3); } .lead-form-success { text-align: center; margin-top: var(--space-3); padding: 12px; border-radius: var(--radius-sm); background: rgba(46,204,113,0.12); color: #7bdba0; font-weight: 600; } /* "Moment of honesty" qualifier blurb, shown above each lead form — disqualifies low-intent readers and builds trust through directness before asking for contact details. */ .form-honesty { max-width: 560px; margin-inline: auto; margin-bottom: var(--space-3); text-align: center; font-size: 14px; line-height: 1.6; color: var(--ink-500); } .form-honesty mark { background: rgba(255,59,78,0.22); color: var(--accent-bright); font-weight: 700; padding: 1px 6px; border-radius: 4px; } /* Gradient submit button (distinct from the flat .btn-accent used elsewhere) + social-proof strip directly under it, so trust signals sit right at the point of decision. */ .btn-gradient { background: linear-gradient(135deg, var(--accent-bright), var(--accent)); color: #fff; } .btn-gradient:hover { filter: brightness(1.1); transform: translateY(-2px); } .form-proof { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: var(--space-3); } .form-proof-stars { color: #ffc93c; font-size: 13px; letter-spacing: 1px; } .form-proof-text { font-size: 13px; font-weight: 700; color: var(--ink-100); } .form-proof-avatars { display: flex; align-items: center; } .form-proof-avatars img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink-800); object-fit: cover; object-position: top center; margin-inline-start: -8px; } .form-proof-avatars img:first-child { margin-inline-start: 0; } /* ---------------------------------- Belief break ---------------------------------- */ .belief-break { padding-block: var(--space-6); text-align: center; } .belief-break h2 { max-width: 30ch; margin-inline: auto; } .belief-list { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; margin-top: var(--space-2); } .belief-list li { display: flex; align-items: center; gap: 10px; font-size: clamp(17px, 2vw, 20px); color: var(--ink-300); } .x-icon { color: #e5566b; font-weight: 800; } /* Qualify / disqualify block — borrowed technique: naming who this ISN'T for filters low-intent readers and makes the "who it IS for" half land harder right after. */ .fit-check { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-5); max-width: 760px; margin-inline: auto; text-align: right; } .fit-check-col { padding: var(--space-4); border-radius: var(--radius-md); } .fit-check-col--no { background: rgba(229,86,107,0.08); border: 1px solid rgba(229,86,107,0.25); } .fit-check-col--yes { background: rgba(46,204,113,0.08); border: 1px solid rgba(46,204,113,0.25); } .fit-check-col h3 { font-size: 16px; margin-bottom: var(--space-2); } .fit-check-col ul { display: flex; flex-direction: column; gap: 8px; } .fit-check-col li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; color: var(--ink-300); } .check-icon { color: #5fd88a; font-weight: 800; } @media (max-width: 640px) { .fit-check { grid-template-columns: 1fr; } } /* ---------------------------------- Proof stat ---------------------------------- */ .proof-stat { padding-block: var(--space-5); } .proof-stat-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: center; } .proof-stat-copy h2 { margin-top: 0; } .proof-stat-sub { color: var(--ink-300); margin-bottom: var(--space-4); } .proof-stat-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 3/4; } .proof-stat-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* ---------------------------------- Pain ---------------------------------- */ .pain { position: relative; padding-block: var(--space-7); background: linear-gradient(155deg, var(--ink-950) 10%, var(--accent-dark) 145%); color: var(--ink-100); overflow: hidden; } .pain::before { content: ""; position: absolute; inset: -15% -12% auto auto; width: min(60vw, 620px); aspect-ratio: 1.1/1; background: url("../assets/optimized/icons/mark-watermark.png") no-repeat center / contain; opacity: 0.08; transform: rotate(-14deg); pointer-events: none; } .pain-wrap { max-width: 760px; margin-inline: auto; position: relative; } .pain-lead { font-size: clamp(17px, 2vw, 19px); font-weight: 700; color: var(--ink-100); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-dark); } .pain-text { font-size: clamp(18px, 2.2vw, 21px); color: var(--ink-300); } .mini-cta { margin-top: var(--space-5); text-align: center; background: var(--ink-800); border: 1px solid var(--border-dark); border-inline-start: 4px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-md); } .mini-cta-text { font-weight: 700; font-size: 18px; margin-bottom: var(--space-3); color: var(--ink-100); } /* ---------------------------------- Process ---------------------------------- */ .process { padding-block: var(--space-7); background: var(--ink-900); } .steps-wrap { max-width: 720px; margin-inline: auto; position: relative; } .steps-snake { position: absolute; inset-block: 0; inset-inline-start: 0; width: 40px; height: 100%; overflow: visible; z-index: 1; pointer-events: none; } .steps-snake-path { fill: none; stroke: var(--accent-bright); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 7 9; opacity: 0.55; animation: steps-snake-flow 1.2s linear infinite; } @keyframes steps-snake-flow { to { stroke-dashoffset: -32; } } .steps-snake-arrowhead { fill: var(--accent-bright); filter: drop-shadow(0 0 5px rgba(255,59,78,0.85)); } .steps { position: relative; z-index: 2; } .step { display: flex; gap: var(--space-3); align-items: flex-start; padding-block: var(--space-3); border-bottom: 1px solid var(--border-dark); position: relative; } .step:last-child { border-bottom: none; } .step-num { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; position: relative; z-index: 2; box-shadow: 0 0 0 6px var(--ink-900); } .step-content strong { display: block; font-size: 17px; margin-bottom: 3px; } .step-content span { color: var(--ink-300); font-size: 15px; } /* ---------------------------------- App showcase ---------------------------------- */ .app-showcase { padding-block: var(--space-7); text-align: center; } .app-showcase-inner { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); /* To add a screenshot/mockup later: convert to a 2-col grid (mirror .who-grid / .proof-stat-grid), add an .app-showcase-media sibling for the image, and drop the centered/align-items overrides back to left-aligned copy. */ } .app-showcase h2 { max-width: 22ch; } .app-showcase-lead { font-size: clamp(17px, 2vw, 20px); font-weight: 700; color: var(--ink-100); max-width: 52ch; } .app-showcase p:not(.app-showcase-lead) { color: var(--ink-300); max-width: 60ch; } .app-showcase-cta { margin-top: var(--space-2); } /* ---------------------------------- Testimonials ---------------------------------- */ .testimonials-sub { color: var(--ink-300); margin-inline: auto; margin-bottom: var(--space-3); } .screenshot-item, .ba-item { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-dark); cursor: zoom-in; position: relative; transition: transform .2s var(--ease); } .screenshot-item:hover, .ba-item:hover { transform: translateY(-4px); } /* WhatsApp screenshots come in whatever aspect ratio the phone captured — contain (not cover) on a solid card background so nothing is ever cropped out of the readable text. */ .screenshot-item { aspect-ratio: 9/16; background: var(--ink-800); } .screenshot-item img { width: 100%; height: 100%; object-fit: contain; } /* The new before/after cards are all uniform 9:16, so cover-fit here loses nothing — every card is already that exact ratio. */ .ba-item { aspect-ratio: 9/16; } .ba-item img { width: 100%; height: 100%; object-fit: cover; } /* The coach's own transformation card — featured first, with a border and caption badge to set it apart from the client results around it. */ .ba-item--ram { border: 2px solid var(--accent-bright); } .ba-item-badge { position: absolute; inset-inline: 0; bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,0.9) 30%, transparent); color: #fff; font-weight: 800; font-size: 14px; line-height: 1.4; text-align: center; padding: 40px 8px 12px; white-space: normal; word-break: break-word; box-sizing: border-box; } /* ---------------------------------- Before / after ---------------------------------- Was missing padding-block entirely — harmless while this section sat deep in the page, but it now sits right under the sticky header, so its heading needs the same top clearance every other section gets. */ .before-after { padding-block: var(--space-7); text-align: center; } .before-after h2 { max-width: 34ch; margin-inline: auto; } /* ---------------------------------- Carousel (manual, 3-up) ---------------------------------- Used for before/after, video testimonials, and WhatsApp screenshots. Deliberately no autoplay: the visitor advances it themselves, so a clip they were mid-watching never gets skipped out from under them. */ .carousel { position: relative; display: flex; align-items: center; gap: var(--space-2); } .carousel-track { display: flex; flex: 1; min-width: 0; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: var(--space-1); } .carousel-track::-webkit-scrollbar { display: none; } .carousel-track > * { /* 100% of the track itself, not a vw-based guess against the full viewport — the track is narrower than the viewport because of the two flanking arrow buttons, so sizing against vw made the first card wider than the track's own visible area and clipped its edge (and any overlaid caption text) on load. */ flex: 0 0 auto; width: 100%; scroll-snap-align: start; } @media (min-width: 560px) { .carousel-track > * { width: calc((100% - var(--space-3)) / 2); } } @media (min-width: 900px) { .carousel-track > * { width: calc((100% - 2 * var(--space-3)) / 3); } } .carousel-btn { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--ink-800); border: 1px solid var(--border-dark); color: var(--ink-100); font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background .2s var(--ease), transform .2s var(--ease); } .carousel-btn:hover { background: var(--accent); transform: scale(1.06); } /* ---------------------------------- Video testimonials ---------------------------------- */ .video-testimonials { padding-block: var(--space-7); background: var(--ink-900); text-align: center; } .video-testimonials h2 { max-width: 20ch; margin-inline: auto; margin-bottom: var(--space-3); } .video-card { position: relative; z-index: 0; /* establishes its own stacking context so child z-index (e.g. the scrim) can't escape it */ aspect-ratio: 9/16; border-radius: var(--radius-md); overflow: hidden; background-color: var(--ink-800); background-size: cover; background-position: center; border: 1px solid var(--border-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); } .video-card::before { /* scrim so the play icon/label stay legible over the poster photo; negative z-index keeps it behind the real