/* ================================================================ Renewal - flowty-style dark, image-led landing Loaded last. Flips the page to a single dark theme and adds the cinematic video hero + scroll-scrub sequence. ================================================================ */ /* ---------------- Dark theme lock ---------------- One class on re-points every semantic token to a dark value, so existing components (cards, steps, footer, chips) turn dark without touching their rules. */ body.theme-dark { --bg-page: var(--ink-900); --bg-card: #12171F; --bg-card-hover: #171D26; --surface: #12171F; --surface-2: #1B2029; --fg-primary: #FFFFFF; --fg-secondary: rgba(255, 255, 255, 0.82); --fg-body: rgba(255, 255, 255, 0.64); --fg-caption: rgba(255, 255, 255, 0.46); --border-subtle: rgba(255, 255, 255, 0.08); --border-normal: rgba(255, 255, 255, 0.14); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.55); --shadow-4: 0 28px 70px rgba(0, 0, 0, 0.6); position: relative; isolation: isolate; background: linear-gradient(180deg, #090D13 0%, #0B1017 36%, #0A0E14 100%); color: var(--fg-primary); } section[id] { scroll-margin-top: calc(var(--header-height) + var(--space-6)); } /* Flowty-style depth layer: soft light fields under all sections. */ body.theme-dark::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(42% 34% at 72% 10%, rgba(74, 139, 214, 0.12), transparent 74%), radial-gradient(36% 30% at 18% 36%, rgba(178, 129, 73, 0.08), transparent 72%), radial-gradient(48% 38% at 84% 82%, rgba(36, 57, 82, 0.36), transparent 76%); } body.theme-dark::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.46; background: linear-gradient(115deg, transparent 0 22%, rgba(255, 255, 255, 0.032) 22.2%, transparent 22.5% 44%, rgba(255, 255, 255, 0.024) 44.2%, transparent 44.5%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 86px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 96px); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%); } body.theme-dark main { position: relative; overflow: clip; } body.theme-dark main::before { content: ''; position: absolute; inset: 90vh 0 0; z-index: -1; pointer-events: none; background: radial-gradient(54% 18% at 50% 3%, rgba(255, 255, 255, 0.08), transparent 72%), radial-gradient(36% 16% at 22% 29%, rgba(222, 178, 117, 0.08), transparent 78%), radial-gradient(42% 20% at 82% 58%, rgba(76, 148, 226, 0.10), transparent 76%); } /* Ghost buttons need lift against dark surfaces. */ body.theme-dark .btn-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; } body.theme-dark .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); } /* Header turns to smoked glass instead of white when scrolled. */ body.theme-dark .site-header.is-scrolled { background: rgba(10, 14, 20, 0.72); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); } body.theme-dark .mobile-nav { background: rgba(10, 14, 20, 0.96); } .mobile-lang-switcher { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--border-subtle); } body.theme-dark .lang-switcher { background: rgba(255, 255, 255, 0.06); } body.theme-dark .lang-switcher-btn.is-active { background: var(--neon); color: var(--ink-900); } body.theme-dark .header-cta { background: var(--neon); color: var(--ink-900); } body.theme-dark .header-cta:hover { background: var(--neon-deep); } /* Section that used --ink-900 explicitly (stats, CTA, social-proof) sits one step lighter so it separates from the page base. */ body.theme-dark .section-dark, body.theme-dark .social-proof, body.theme-dark .download-cta { background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 42%), rgba(13, 18, 25, 0.78); } /* Carousel arrows: keep readable dark glyph on light pill. */ body.theme-dark .phone-screen { background: #0D1219; } .header-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; } .floating-dock { position: fixed; left: 50%; bottom: 22px; z-index: 120; display: none; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-pill); background: rgba(206, 206, 215, 0.86); color: var(--ink-900); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); transform: translateX(-50%); pointer-events: auto; } .floating-dock a { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; height: 46px; padding-inline: var(--space-4); border-radius: var(--radius-pill); font-size: var(--fs-body-small); font-weight: var(--fw-bold); white-space: nowrap; transition: background var(--dur-fast), transform var(--dur-fast); } .floating-dock a:hover { background: rgba(10, 14, 20, 0.08); transform: translateY(-1px); } .floating-dock .floating-dock__cta { min-width: 116px; background: var(--ink-900); color: var(--neon); } .floating-dock a.is-active { background: rgba(10, 14, 20, 0.12); } /* ================================================================ HERO - full-bleed fixed image ================================================================ */ .hero-cinema { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .hero-cinema__media { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; } .hero-cinema__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: brightness(0.9) contrast(1.04) saturate(0.98); } /* Legibility scrim: dark at the bottom where the copy lives. */ .hero-cinema__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 14, 20, 0.76) 0%, rgba(10, 14, 20, 0.46) 34%, rgba(10, 14, 20, 0.04) 72%), linear-gradient(180deg, rgba(10, 14, 20, 0.50) 0%, rgba(10, 14, 20, 0.02) 30%), linear-gradient(0deg, rgba(10, 14, 20, 0.92) 6%, rgba(10, 14, 20, 0.58) 34%, rgba(10, 14, 20, 0.10) 72%); } .hero-cinema .container { width: 100%; padding-bottom: clamp(48px, 9vh, 104px); padding-top: calc(var(--header-height) + var(--space-8)); } .hero-cinema__inner { max-width: 760px; } .hero-cinema__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: rgba(204, 255, 0, 0.12); border: 1px solid rgba(204, 255, 0, 0.30); color: var(--neon); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: -0.01em; margin-bottom: var(--space-6); } .hero-cinema__eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon-glow-strong); } .hero-cinema__title { font-size: var(--fs-display-hero); font-weight: var(--fw-extrabold); line-height: 1.04; letter-spacing: -0.04em; color: #fff; margin-bottom: var(--space-5); text-shadow: 0 2px 30px rgba(10, 14, 20, 0.7); } .hero-cinema__title em { font-style: italic; color: var(--neon); text-shadow: 0 0 40px var(--neon-glow), 0 2px 24px rgba(10, 14, 20, 0.55); } .hero-cinema__body { font-size: var(--fs-body-large); line-height: var(--lh-body-large); color: rgba(255, 255, 255, 0.86); max-width: 46ch; margin-bottom: var(--space-8); text-shadow: 0 1px 16px rgba(10, 14, 20, 0.8); white-space: pre-line; } .hero-cinema__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* ================================================================ SCROLL-SCRUB - sticky sequence driven by ffmpeg frames ================================================================ */ .scrub { position: relative; /* tall track: each vh of scroll advances the sequence */ height: 380vh; background: var(--ink-900); } .scrub--static { height: auto; } .scrub__sticky { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: grid; place-items: center; } .scrub--static .scrub__sticky { position: relative; } .scrub__canvas, .scrub__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .scrub__image { object-position: center; } .scrub__vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,14,20,0.75) 0%, rgba(10,14,20,0) 22%), linear-gradient(0deg, rgba(10,14,20,0.85) 0%, rgba(10,14,20,0) 34%); } .scrub__caption { position: relative; z-index: 2; align-self: end; width: 100%; max-width: var(--max-width); margin-inline: auto; padding: 0 var(--gutter) clamp(56px, 10vh, 120px); } .scrub__step { max-width: 540px; opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-standard), transform 0.5s var(--ease-standard); position: absolute; bottom: clamp(56px, 10vh, 120px); } .scrub__step.is-active { opacity: 1; transform: translateY(0); } .scrub--static .scrub__step { position: relative; bottom: auto; opacity: 1; transform: none; } .scrub__index { font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--neon); letter-spacing: 0.14em; display: block; margin-bottom: var(--space-3); } .scrub__step h3 { font-size: var(--fs-heading-large); font-weight: var(--fw-extrabold); color: #fff; letter-spacing: -0.03em; line-height: 1.16; margin-bottom: var(--space-3); } .scrub__step p { font-size: var(--fs-body-large); color: rgba(255, 255, 255, 0.72); line-height: var(--lh-body-large); max-width: 42ch; } /* progress rail on the right of the sticky stage */ .scrub__rail { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: 10px; } .scrub__dot { width: 6px; height: 22px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.18); transition: background var(--dur-base), height var(--dur-base); } .scrub__dot.is-active { background: var(--neon); height: 34px; box-shadow: 0 0 10px var(--neon-glow); } /* loading shimmer while frames preload */ .scrub__loader { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink-900); z-index: 3; transition: opacity 0.5s ease; } .scrub__loader.is-hidden { opacity: 0; pointer-events: none; } .scrub__loader span { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.16em; color: rgba(255,255,255,0.5); } .social-proof { border-block: 1px solid var(--border-subtle); } .social-proof-card { overflow: hidden; padding-block: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: rgba(255, 255, 255, 0.035); } .social-proof-grid { gap: 0; } .social-proof-item { padding: var(--space-8) var(--space-5); border-bottom: 1px solid var(--border-subtle); } /* .social-proof-item:last-child { border-bottom: 0; } */ .social-proof-item strong { font-size: clamp(32px, 5vw, 58px); line-height: 1; } .stats-updated-at { margin: 0; padding: 0 var(--space-5) var(--space-4); color: rgba(255, 255, 255, 0.44); font-size: var(--fs-caption); text-align: right; } .country-activity-section { padding-block: var(--space-12); background: #0D1219; } .country-map-panel { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); overflow: hidden; background: rgba(255, 255, 255, 0.035); } .country-map-header { display: grid; gap: var(--space-3); } .country-map-header span { display: block; margin-bottom: var(--space-2); color: var(--neon); font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; } .country-map-header h2 { margin: 0; color: #fff; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: 0; } .country-map-header p { margin: 0; color: rgba(255, 255, 255, 0.46); font-size: var(--fs-caption); } .country-rank__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.56); font-size: var(--fs-caption); font-weight: var(--fw-bold); } .country-rank__list { display: grid; gap: var(--space-2); padding-top: var(--space-2); } .country-rank__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4); min-height: 54px; padding: var(--space-3) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .country-rank__country { min-width: 0; color: rgba(255, 255, 255, 0.88); font-size: var(--fs-body); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .country-rank__value { font-family: var(--font-mono); color: rgba(255, 255, 255, 0.88); font-size: var(--fs-body); } .country-rank__bar { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.12); } .country-rank__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--neon), rgba(204, 255, 0, 0.58)); box-shadow: 0 0 18px var(--neon-glow); } /* ================================================================ FEATURE / APP-INFO cards ================================================================ */ .appcards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-12); } .appcard { position: relative; overflow: hidden; padding: var(--space-8); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .appcard:hover { transform: translateY(-6px); border-color: rgba(204, 255, 0, 0.4); box-shadow: var(--shadow-3); } .appcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 100% 0%, rgba(66,176,255,0.08), transparent 60%); opacity: 0; transition: opacity var(--dur-base); } .appcard:hover::after { opacity: 1; } .appcard__icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; margin-bottom: var(--space-6); background: rgba(204, 255, 0, 0.10); border: 1px solid rgba(204, 255, 0, 0.24); } .appcard__icon svg { width: 26px; height: 26px; stroke: var(--neon); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } .appcard h3 { font-size: var(--fs-subtitle); font-weight: var(--fw-bold); color: #fff; letter-spacing: -0.02em; margin-bottom: var(--space-3); } .appcard p { font-size: var(--fs-body); color: rgba(255,255,255,0.66); line-height: var(--lh-body); } .appcard__metric { margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--neon); letter-spacing: 0.04em; } .appcard:nth-child(2) { background: radial-gradient(100% 80% at 100% 0%, rgba(204, 255, 0, 0.10), transparent 62%), #101821; } .appcard:nth-child(3) { background: linear-gradient(135deg, rgba(66, 176, 255, 0.11), transparent 58%), #11161E; } /* section title block used by new sections */ .section-head { max-width: 720px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head h2 { font-size: var(--fs-display-large); font-weight: var(--fw-extrabold); line-height: var(--lh-display-large); color: #fff; letter-spacing: -0.03em; } .section-head p { margin-top: var(--space-4); font-size: var(--fs-body-large); color: rgba(255,255,255,0.66); line-height: var(--lh-body-large); max-width: 54ch; } .section-kicker { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon); margin-bottom: var(--space-4); } .journey { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-12); } .journey-step { display: grid; grid-template-columns: 54px 1fr; gap: var(--space-5); align-items: start; padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: rgba(255, 255, 255, 0.035); } .journey-step > span { font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--neon); letter-spacing: 0.08em; } .journey-step h3 { margin-bottom: var(--space-2); color: #fff; font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: -0.02em; } .journey-step p { max-width: 58ch; color: rgba(255, 255, 255, 0.66); font-size: var(--fs-body); line-height: var(--lh-body); } .journey-shot { overflow: hidden; min-height: 420px; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: radial-gradient(90% 70% at 50% 0%, rgba(204, 255, 0, 0.12), transparent 60%), #0D1219; } .journey-shot img { width: min(360px, 82%); margin: var(--space-8) auto 0; border-radius: 32px 32px 0 0; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); } .preview-stage { overflow: hidden; border-block: 1px solid var(--border-subtle); background: #0D1219; } .preview-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; } .preview-copy h2, .metric-board__copy h2 { font-size: var(--fs-display-large); font-weight: var(--fw-extrabold); line-height: var(--lh-display-large); color: #fff; letter-spacing: -0.03em; white-space: pre-line; } .preview-copy > p, .metric-board__copy p { margin-top: var(--space-5); max-width: 48ch; color: rgba(255, 255, 255, 0.66); font-size: var(--fs-body-large); line-height: var(--lh-body-large); } .preview-stage .phone-showcase { margin-top: 0; } .preview-stage .showcase-tabs { justify-content: flex-start; margin-top: var(--space-8); } .preview-stage .showcase-tab { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); } .preview-stage .showcase-tab.is-active { background: var(--neon); color: var(--ink-900); border-color: transparent; box-shadow: none; } .preview-stage .showcase-info { margin-top: var(--space-8); text-align: left; } .preview-stage .showcase-info p { color: rgba(255, 255, 255, 0.66); } .preview-stage .phone-frame { max-width: min(360px, 78vw); box-shadow: 0 46px 120px rgba(0, 0, 0, 0.48); } .metric-board-section { background: radial-gradient(70% 60% at 88% 0%, rgba(66, 176, 255, 0.10), transparent 70%), var(--ink-900); } .metric-board { display: grid; grid-template-columns: 1fr; gap: var(--space-10); padding: var(--space-8); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: rgba(255, 255, 255, 0.035); } .metric-board .stats-grid { margin-top: 0; } .metric-board .stat-card { text-align: left; background: rgba(255, 255, 255, 0.045); } .metric-board .stat-card strong { font-family: var(--font-mono); font-size: clamp(34px, 4vw, 56px); } .reviews-section { background: rgba(13, 18, 25, 0.72); } .review-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-12); } .review-grid .testimonial-card { width: auto; flex: none; } .testimonial-card--featured p { font-size: clamp(19px, 2.2vw, 28px); line-height: 1.45; color: rgba(255, 255, 255, 0.88); } .download-cta { padding-block: var(--space-24); text-align: left; } .download-cta .container { max-width: var(--max-width); } .download-panel { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; padding: var(--space-8); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: radial-gradient(90% 80% at 100% 0%, rgba(204, 255, 0, 0.14), transparent 62%), rgba(255, 255, 255, 0.05); } .download-panel h2 { max-width: 660px; } .download-panel p { max-width: 54ch; } .download-panel__visual { display: grid; place-items: center; } .download-panel__visual img { width: min(220px, 52vw); border-radius: 46px; box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45); } /* ================================================================ Responsive ================================================================ */ @media (min-width: 768px) { .floating-dock { display: inline-flex; } .social-proof-item { border-bottom: 0; border-right: 1px solid var(--border-subtle); } .social-proof-item:last-child { border-right: 0; } .country-map-panel { grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr); align-items: start; padding: var(--space-8); } .country-map-header { position: sticky; top: 96px; } .country-map-header p { max-width: 220px; } .appcards { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .scrub__step p { font-size: var(--fs-subtitle); } .journey { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr); grid-template-rows: repeat(3, auto); } .journey-shot { grid-column: 2; grid-row: 1 / 4; } .preview-layout { grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.8fr); gap: var(--space-16); } .metric-board { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); padding: var(--space-10); } .review-grid { grid-template-columns: 1.18fr 0.82fr; } .testimonial-card--featured { grid-row: span 2; } .download-panel { grid-template-columns: minmax(0, 1fr) 260px; padding: var(--space-12); } } @media (min-width: 1120px) { .appcards { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .hero-cinema__title { font-size: clamp(56px, 6vw, 88px); } } /* Small screens: sequence stays vertical, rail hidden, captions readable */ @media (max-width: 767px) { .hero-cinema { min-height: 100svh; min-height: 100dvh; align-items: flex-end; } .hero-cinema .container { padding-top: calc(var(--header-height) + var(--space-4)); padding-bottom: max(20px, env(safe-area-inset-bottom)); } .hero-cinema__media img { object-position: 50% center; } .hero-cinema__scrim { background: linear-gradient(180deg, rgba(10, 14, 20, 0.46) 0%, rgba(10, 14, 20, 0.10) 34%), linear-gradient(0deg, rgba(10, 14, 20, 0.90) 9%, rgba(10, 14, 20, 0.58) 42%, rgba(10, 14, 20, 0.08) 78%); } .hero-cinema__body { font-size: var(--fs-body); margin-bottom: var(--space-5); } .hero-cinema__actions .btn { width: 100%; } .scrub:not(.scrub--static) { height: 340vh; } .scrub__rail { display: none; } .scrub__canvas { object-position: center; } .preview-stage .showcase-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: var(--space-2); } .carousel-arrow { width: 42px; height: 42px; } .carousel-arrow.prev { left: -18px; } .carousel-arrow.next { right: -18px; } .footer-bottom { padding-bottom: var(--space-12); } } /* ================================================================ Reduced motion - scrub collapses to a static poster + list ================================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scrub { height: auto; } .scrub__sticky { position: relative; height: auto; min-height: 60vh; } .scrub__step { position: relative; opacity: 1; transform: none; bottom: auto; margin-bottom: var(--space-6); } .scrub__caption { padding-block: var(--space-16); } } /* ================================================================ 2026-07 redesign — feature stories, quieter neon, store badges ================================================================ */ /* --- Neon diet: numbers read white, neon reserved for accents --- */ body.theme-dark .social-proof-item strong { color: #fff; text-shadow: none; } .hero-cinema__title em { text-shadow: 0 2px 24px rgba(10, 14, 20, 0.55); } .section-head--center h2 { white-space: pre-line; } /* --- Store badges: official two-line style --- */ .store-badge { height: 62px; padding: 0 var(--space-5); gap: 11px; border-radius: 12px; background: #000; border: 1px solid rgba(255, 255, 255, 0.22); } .store-badge:hover { background: #0b0e13; border-color: rgba(255, 255, 255, 0.4); box-shadow: none; transform: translateY(-2px); } .store-badge svg { width: 26px; height: 26px; flex-shrink: 0; } .store-badge__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.18; } .store-badge__text small { font-size: 10.5px; font-weight: var(--fw-medium); letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.78); } .store-badge__text strong { font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: #fff; } /* --- Feature stories: alternating copy / device layout --- */ .feature-stories { padding-block: var(--space-16); } .feature-story { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; padding-block: var(--space-16); } .feature-story__kicker { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon); margin-bottom: var(--space-4); } .feature-story__copy h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: var(--fw-extrabold); line-height: 1.16; letter-spacing: -0.03em; color: #fff; white-space: pre-line; margin-bottom: var(--space-5); } .feature-story__copy p { font-size: var(--fs-body-large); line-height: var(--lh-body-large); color: rgba(255, 255, 255, 0.66); max-width: 46ch; } .feature-story__copy p strong { color: #fff; font-weight: var(--fw-semibold); } .feature-story__visual { position: relative; width: min(320px, 72vw); margin-inline: auto; } .device-frame { border-radius: 46px; padding: 10px; background: #10151D; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); } .device-frame img { width: 100%; display: block; border-radius: 36px; } /* Floating data chips anchored to the device */ .feature-chip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 10px 16px; border-radius: 14px; background: rgba(16, 21, 29, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; } .feature-chip small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.52); } .feature-chip strong { font-family: var(--font-mono); font-size: 18px; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: #fff; font-variant-numeric: tabular-nums; } .feature-chip strong.is-accent { color: var(--neon); } .feature-chip--tr { top: 11%; right: -14%; } .feature-chip--bl { bottom: 17%; left: -16%; } .feature-chip--tl { top: 13%; left: -16%; } .feature-chip--br { bottom: 19%; right: -14%; } @media (max-width: 479px) { .feature-chip--tr, .feature-chip--br { right: -6%; } .feature-chip--tl, .feature-chip--bl { left: -6%; } .feature-chip--tr, .feature-chip--tl { top: 18%; } } @media (min-width: 900px) { .feature-story { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-20); padding-block: var(--space-20); } .feature-story--flip .feature-story__copy { order: 2; } .feature-story--flip .feature-story__visual { order: 1; } } /* --- "And more" grid: quiet icon list, no card chrome --- */ .more-section { background: rgba(13, 18, 25, 0.72); border-block: 1px solid var(--border-subtle); } .more-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10) var(--space-8); margin-top: var(--space-12); } .more-item__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); display: grid; place-items: center; margin-bottom: var(--space-4); } .more-item__icon svg { width: 22px; height: 22px; stroke: var(--neon); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; } .more-item h3 { font-size: var(--fs-subtitle); font-weight: var(--fw-bold); color: #fff; letter-spacing: -0.02em; margin-bottom: var(--space-2); } .more-item p { font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(255, 255, 255, 0.6); max-width: 34ch; } @media (min-width: 640px) { .more-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .more-grid { grid-template-columns: repeat(3, 1fr); } } /* --- Reviews: real quotes with a highlighted phrase --- */ .testimonial-card p strong { color: #fff; font-weight: var(--fw-bold); } /* --- Blueprint lane: scroll-driven wireframe behind the page --- */ #lane-blueprint { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* Footer needs its own surface so the canvas doesn't bleed through the links. */ .site-footer { background: rgba(13, 18, 25, 0.9); }