/* FluxShare landing — modern, clean, LocalSend-inspired. Light by default. Animated + mouse-parallax blobs. Glassmorphism on panels. */ /* Register --mx and --my as numbers so calc() substitution is reliable and animation of these properties works where supported. */ @property --mx { syntax: ''; inherits: true; initial-value: 0; } @property --my { syntax: ''; inherits: true; initial-value: 0; } /* Smooth cross-page transitions (Chrome/Edge/Safari 18+). Treats multi-page navigation like an SPA — the browser fades between old and new docs. */ @view-transition { navigation: auto; } :root { --bg: #F7F6F3; --bg-2: #EFEDE7; /* Stronger glass: higher opacity, visible tint, reflective borders */ --surface: rgba(255, 253, 248, 0.35); --surface-2: rgba(255, 253, 248, 0.22); --surface-border: rgba(255, 255, 255, 0.85); --surface-border-soft: rgba(255, 255, 255, 0.55); --surface-border-hover: rgba(255, 255, 255, 0.95); --glass-highlight: rgba(255, 255, 255, 0.80); --glass-gloss: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%); --text-1: #1A1A1A; --text-2: rgba(26, 26, 26, 0.66); --text-3: rgba(26, 26, 26, 0.42); --accent: #6889A8; --accent-2: #4E6F90; --accent-glow: rgba(104, 137, 168, 0.50); --warm: #C4A882; --warm-2: #8A7560; --warm-glow: rgba(196, 168, 130, 0.45); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255,255,255,0.6); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.7); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255,255,255,0.7); --blur-md: 24px; --blur-lg: 36px; --radius-lg: 26px; --radius-md: 14px; --radius-sm: 10px; --container: 1180px; } /* Dark theme — activated via [data-theme="dark"] on . Default is light. Theme is toggled by the nav button and persisted to localStorage. OS prefers-color-scheme is intentionally ignored. */ :root[data-theme="dark"] { --bg: #0B0C10; --bg-2: #111217; --surface: rgba(255, 255, 255, 0.06); --surface-2: rgba(255, 255, 255, 0.03); --surface-border: rgba(255, 255, 255, 0.14); --surface-border-soft: rgba(255, 255, 255, 0.08); --surface-border-hover: rgba(255, 255, 255, 0.24); --glass-highlight: rgba(255, 255, 255, 0.12); --glass-gloss: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 55%); --text-1: rgba(255, 255, 255, 0.96); --text-2: rgba(255, 255, 255, 0.62); --text-3: rgba(255, 255, 255, 0.38); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255,255,255,0.08); --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.10); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.10); } :root[data-theme="dark"] .device-bar span { background: rgba(255,255,255,0.14); } :root[data-theme="dark"] .btn-primary { background: #fff; color: #0D0E12; } :root[data-theme="dark"] .btn-primary:hover { background: var(--accent); color: #fff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text-1); background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; } /* Page-wide grain. Only meaningfully active in dark mode where gradient banding is visible. Light mode gets no grain — light backgrounds don't band perceptibly. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; } :root[data-theme="dark"] body::before { opacity: 0.40; } /* Ensure actual page content sits above the grain layer. */ body > * { position: relative; z-index: 1; } /* --- Animated blobs (heka.design inspired). Morphing border-radius + slow organic drift + mix-blend-mode color mixing. */ .bg-blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; isolation: isolate; } /* Wrapper — mouse parallax lives here so it composes with the blob's own animation. */ .blob-wrap { position: absolute; inset: 0; pointer-events: none; will-change: transform; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); } /* Each wrapper has its own parallax strength so blobs move at different speeds. */ .w1 { transform: translate(calc(var(--mx, 0) * 36px), calc(var(--my, 0) * 28px)); } .w2 { transform: translate(calc(var(--mx, 0) * -44px), calc(var(--my, 0) * 38px)); } .w3 { transform: translate(calc(var(--mx, 0) * 52px), calc(var(--my, 0) * -32px)); } .w4 { transform: translate(calc(var(--mx, 0) * -30px), calc(var(--my, 0) * -24px)); } .w5 { transform: translate(calc(var(--mx, 0) * 40px), calc(var(--my, 0) * 44px)); } .bg-blobs .blob { position: absolute; filter: blur(100px); will-change: transform, border-radius; opacity: 0.50; } :root[data-theme="dark"] .bg-blobs .blob { filter: blur(120px); opacity: 0.75; } /* Noise dither — fine grain. Breaks up banding in mid-alpha zones. Uses `soft-light` which is the most effective blend mode for dithering gradient banding without noticeably darkening or lightening the page. */ .bg-blobs::before, .bg-blobs::after { content: ''; position: absolute; inset: 0; pointer-events: none; } /* Light mode: no blob-container noise (light backgrounds don't band perceptibly). Dark mode: fine + coarse grain to dither gradient banding. */ .bg-blobs::after { opacity: 0; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,"); background-size: 180px 180px; } .bg-blobs::before { opacity: 0; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,"); background-size: 320px 320px; } :root[data-theme="dark"] .bg-blobs::after { opacity: 0.38; } :root[data-theme="dark"] .bg-blobs::before { opacity: 0.22; } /* Multi-stop gradients with smooth easing — eliminates banding. Each stop tapers alpha gradually so the browser has plenty of interpolation segments to render a smooth falloff. */ /* Gradients use `in oklab` for perceptually smooth alpha interpolation — eliminates the sRGB banding that shows as concentric rings on dark bgs. */ .blob-1 { width: 560px; height: 560px; left: -140px; top: -160px; background: radial-gradient(circle at 40% 40% in oklab, rgba(104, 137, 168, 0.85) 0%, rgba(104, 137, 168, 0.70) 18%, rgba(104, 137, 168, 0.50) 36%, rgba(104, 137, 168, 0.30) 55%, rgba(104, 137, 168, 0.15) 72%, rgba(104, 137, 168, 0.05) 88%, rgba(104, 137, 168, 0.00) 100%); border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%; animation: morph-a 10s ease-in-out infinite, drift-a 14s ease-in-out infinite; } .blob-2 { width: 660px; height: 660px; right: -220px; top: 60px; background: radial-gradient(circle at 60% 50% in oklab, rgba(196, 168, 130, 0.80) 0%, rgba(196, 168, 130, 0.65) 18%, rgba(196, 168, 130, 0.45) 36%, rgba(196, 168, 130, 0.25) 55%, rgba(196, 168, 130, 0.12) 72%, rgba(196, 168, 130, 0.04) 88%, rgba(196, 168, 130, 0.00) 100%); border-radius: 45% 55% 40% 60% / 50% 45% 60% 50%; animation: morph-b 12s ease-in-out infinite, drift-b 16s ease-in-out infinite; } .blob-3 { width: 520px; height: 520px; left: 35%; top: 780px; background: radial-gradient(circle at 50% 50% in oklab, rgba(168, 184, 204, 0.75) 0%, rgba(168, 184, 204, 0.60) 18%, rgba(168, 184, 204, 0.42) 36%, rgba(168, 184, 204, 0.24) 55%, rgba(168, 184, 204, 0.10) 72%, rgba(168, 184, 204, 0.03) 88%, rgba(168, 184, 204, 0.00) 100%); border-radius: 55% 45% 35% 65% / 40% 55% 45% 60%; animation: morph-c 11s ease-in-out infinite, drift-c 15s ease-in-out infinite; opacity: 0.50; } .blob-4 { width: 460px; height: 460px; right: 8%; top: 1500px; background: radial-gradient(circle at 50% 50% in oklab, rgba(212, 190, 156, 0.70) 0%, rgba(212, 190, 156, 0.56) 18%, rgba(212, 190, 156, 0.40) 36%, rgba(212, 190, 156, 0.22) 55%, rgba(212, 190, 156, 0.10) 72%, rgba(212, 190, 156, 0.03) 88%, rgba(212, 190, 156, 0.00) 100%); border-radius: 40% 60% 60% 40% / 55% 50% 50% 45%; animation: morph-d 13s ease-in-out infinite, drift-d 18s ease-in-out infinite; opacity: 0.45; } .blob-5 { width: 520px; height: 520px; left: 12%; top: 2200px; background: radial-gradient(circle at 50% 50% in oklab, rgba(104, 137, 168, 0.70) 0%, rgba(104, 137, 168, 0.56) 18%, rgba(104, 137, 168, 0.40) 36%, rgba(104, 137, 168, 0.22) 55%, rgba(104, 137, 168, 0.10) 72%, rgba(104, 137, 168, 0.03) 88%, rgba(104, 137, 168, 0.00) 100%); border-radius: 50% 50% 40% 60% / 45% 55% 45% 55%; animation: morph-a 14s ease-in-out infinite reverse, drift-b 17s ease-in-out infinite; opacity: 0.45; } /* Border-radius morphing — the signature heka.design look. */ @keyframes morph-a { 0%, 100% { border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%; } 25% { border-radius: 40% 60% 45% 55% / 65% 40% 60% 35%; } 50% { border-radius: 55% 45% 65% 35% / 40% 55% 45% 60%; } 75% { border-radius: 45% 55% 35% 65% / 60% 45% 55% 40%; } } @keyframes morph-b { 0%, 100% { border-radius: 45% 55% 40% 60% / 50% 45% 60% 50%; } 33% { border-radius: 60% 40% 55% 45% / 40% 60% 45% 55%; } 66% { border-radius: 40% 60% 50% 50% / 55% 40% 55% 60%; } } @keyframes morph-c { 0%, 100% { border-radius: 55% 45% 35% 65% / 40% 55% 45% 60%; } 50% { border-radius: 35% 65% 55% 45% / 60% 40% 60% 45%; } } @keyframes morph-d { 0%, 100% { border-radius: 40% 60% 60% 40% / 55% 50% 50% 45%; } 50% { border-radius: 60% 40% 40% 60% / 45% 55% 50% 55%; } } /* Organic drift — bigger range + rotation so motion reads clearly even with heavy blur. */ @keyframes drift-a { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 33% { transform: translate(120px, 60px) rotate(60deg) scale(1.10); } 66% { transform: translate(-80px, 100px) rotate(160deg) scale(0.95); } } @keyframes drift-b { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 33% { transform: translate(-140px, 80px) rotate(-70deg) scale(1.08); } 66% { transform: translate(90px, 120px) rotate(-180deg) scale(0.92); } } @keyframes drift-c { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(100px, -100px) rotate(140deg) scale(1.12); } } @keyframes drift-d { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(-110px, -80px) rotate(-110deg) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .bg-blobs .blob { animation: none !important; } } /* --- Layout --- */ a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--accent-2); } .container { max-width: var(--container); margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* --- Nav --- */ .nav { position: sticky; top: 12px; z-index: 50; margin: 12px auto 0; max-width: var(--container); padding: 0 24px; } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 10px 16px; background: var(--surface); backdrop-filter: blur(var(--blur-lg)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%); border: 1px solid var(--surface-border); border-radius: 100px; box-shadow: var(--shadow-md); position: relative; } .nav-inner::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-gloss); pointer-events: none; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-1); font-size: 15.5px; letter-spacing: -0.005em; } .brand img { width: 28px; height: 28px; border-radius: 8px; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { padding: 7px 14px; color: var(--text-2); font-size: 14px; font-weight: 500; border-radius: 100px; transition: background 0.15s ease, color 0.15s ease; } .nav-links a:hover { background: var(--surface-border); color: var(--text-1); } .nav-links .btn-nav { background: var(--text-1); color: var(--bg); padding: 8px 16px; margin-left: 6px; } .nav-links .btn-nav:hover { background: var(--accent); color: #fff; } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--surface); border: 1px solid var(--surface-border); color: var(--text-1); cursor: pointer; margin-left: 4px; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; font-family: inherit; } .theme-toggle:hover { transform: translateY(-1px); border-color: var(--surface-border-hover); } .theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (max-width: 640px) { .nav-links a.nav-hide-sm { display: none; } } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer; transition: transform 0.18s cubic-bezier(.2,.8,.2,1), background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease; white-space: nowrap; font-family: inherit; } .btn-primary { background: var(--text-1); color: var(--bg); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .btn-primary:hover { transform: translateY(-2px); background: var(--accent); color: #fff; box-shadow: 0 12px 32px var(--accent-glow); } .btn-secondary { background: var(--surface); backdrop-filter: blur(var(--blur-md)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%); border: 1px solid var(--surface-border); color: var(--text-1); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .btn-secondary::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-gloss); pointer-events: none; } .btn-secondary:hover { background: var(--surface); transform: translateY(-2px); border-color: var(--surface-border-hover); color: var(--text-1); box-shadow: var(--shadow-md); } .btn .chip { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.18); color: inherit; } /* --- Hero --- */ .hero { padding: 80px 0 40px; text-align: center; position: relative; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--surface-border); border-radius: 100px; font-size: 13px; color: var(--text-2); margin-bottom: 28px; box-shadow: var(--shadow-sm); } .hero-badge .dot { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--warm)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; } .hero h1 { font-size: clamp(48px, 8vw, 92px); line-height: 1.02; margin: 0 0 24px; font-weight: 700; letter-spacing: -0.035em; color: var(--text-1); } .hero h1 .accent { background: linear-gradient(135deg, var(--accent) 0%, var(--warm) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero p.lead { max-width: 640px; margin: 0 auto 36px; font-size: clamp(17px, 1.8vw, 20px); color: var(--text-2); line-height: 1.5; } .hero-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } /* When home page detects a not-yet-shipping platform, the primary CTA enters this dimmed state. */ .btn-primary.btn-soon { background: var(--surface); backdrop-filter: blur(var(--blur-md)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%); color: var(--text-2); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); } .btn-primary.btn-soon:hover { background: var(--surface); color: var(--text-1); border-color: var(--surface-border-hover); box-shadow: var(--shadow-md); } .hero-sub { margin-top: 18px; color: var(--text-3); font-size: 13.5px; letter-spacing: 0; } /* --- Hero device mockups (LocalSend side-by-side style) --- */ .devices { margin: 60px auto 80px; max-width: 1040px; display: flex; justify-content: center; align-items: flex-end; gap: 28px; padding: 0 24px; } .device { position: relative; border-radius: 22px; padding: 6px; background: var(--surface); backdrop-filter: blur(var(--blur-lg)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%); border: 1px solid var(--surface-border); overflow: hidden; box-shadow: 0 2px 6px rgba(15, 15, 20, 0.05), 0 18px 40px rgba(15, 15, 20, 0.10), 0 50px 80px -20px rgba(15, 15, 20, 0.18); transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), box-shadow 0.4s ease; } :root[data-theme="dark"] .device { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 40px rgba(0, 0, 0, 0.4), 0 50px 90px -20px rgba(0, 0, 0, 0.6); } .device img { border-radius: 16px; } .device-mobile { padding: 5px; border-radius: 34px; } .device-mobile img { border-radius: 28px; } .device-desktop { flex: 1 1 620px; max-width: 720px; aspect-ratio: 886 / 644; } .device-mobile { flex: 0 0 220px; aspect-ratio: 9 / 19.5; border-radius: 32px; } .device img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .device-desktop, .device-mobile, .devices:hover .device-desktop, .devices:hover .device-mobile { transform: none; } } .device-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--surface-border); background: rgba(255, 255, 255, 0.04); } .device-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,0.14); } .device-body { padding: 22px 24px; display: grid; gap: 14px; } .row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--surface-border); border-radius: 12px; } .row .blob-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--warm)); flex-shrink: 0; } .row .lines { flex: 1; display: grid; gap: 6px; } .row .line { height: 8px; border-radius: 4px; background: var(--surface-border); } .row .line.short { width: 50%; } .row .line.med { width: 75%; } .device-mobile .device-body { padding: 16px; gap: 10px; } .device-mobile .row { padding: 10px; border-radius: 10px; } .device-mobile .row .blob-icon { width: 28px; height: 28px; border-radius: 8px; } @media (max-width: 780px) { .devices { gap: 16px; flex-wrap: wrap; } .device-desktop { flex: 1 1 100%; } .device-mobile { flex: 0 0 160px; } } /* --- Sections --- */ section { padding: 80px 0; position: relative; } .section-head { text-align: center; max-width: 680px; margin: 0 auto 56px; } .section-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .section-head h2 { font-size: clamp(32px, 5vw, 52px); margin: 0 0 16px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-1); line-height: 1.05; } .section-head p { margin: 0; color: var(--text-2); font-size: 17.5px; line-height: 1.55; } /* --- Feature cards --- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .card { padding: 32px 28px; background: var(--surface); backdrop-filter: blur(var(--blur-lg)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-gloss); pointer-events: none; } .card > * { position: relative; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--surface-border-hover); } .card-icon { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-glow) 0%, var(--warm-glow) 100%); border: 1px solid var(--surface-border); margin-bottom: 20px; } .card-icon svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-1); } .card p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; } /* --- How it works --- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; position: relative; } .step { padding: 32px 28px; background: var(--surface); backdrop-filter: blur(var(--blur-lg)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); position: relative; overflow: hidden; box-shadow: var(--shadow-md); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .step::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-gloss); pointer-events: none; } .step > * { position: relative; } .step:hover { transform: translateY(-4px); border-color: var(--surface-border-hover); box-shadow: var(--shadow-lg); } .step-num { font-size: 56px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--accent) 0%, var(--warm) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 14px; letter-spacing: -0.04em; } .step h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--text-1); letter-spacing: -0.01em; } .step p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; } /* --- Privacy callout --- */ .privacy-callout { margin: 20px auto 0; padding: 56px 40px; max-width: 820px; text-align: center; background: var(--surface); backdrop-filter: blur(var(--blur-lg)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .privacy-callout::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-gloss); pointer-events: none; } .privacy-callout::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 200px at 50% 0%, var(--accent-glow), transparent 70%); opacity: 0.5; pointer-events: none; } .privacy-callout > * { position: relative; } .privacy-callout h3 { margin: 0 0 14px; font-size: clamp(26px, 3.5vw, 36px); font-weight: 700; letter-spacing: -0.02em; color: var(--text-1); } .privacy-callout p { margin: 0 0 28px; color: var(--text-2); font-size: 17px; max-width: 560px; margin-left: auto; margin-right: auto; margin-bottom: 28px; } /* --- Footer --- */ footer { margin-top: 60px; padding: 40px 0 48px; border-top: 1px solid var(--surface-border); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; color: var(--text-3); font-size: 14px; } .footer-links { display: flex; gap: 20px; flex-wrap: wrap; } .footer-links a { color: var(--text-2); } /* --- Privacy page --- */ .policy { max-width: 780px; margin: 60px auto; padding: 56px 48px; background: var(--surface); backdrop-filter: blur(var(--blur-lg)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .policy::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-gloss); pointer-events: none; } .policy > * { position: relative; } .policy h1 { font-size: 44px; margin: 0 0 10px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-1); } .policy .meta { color: var(--text-3); font-size: 14px; margin-bottom: 36px; } .policy h2 { font-size: 21px; margin: 36px 0 12px; font-weight: 600; color: var(--text-1); letter-spacing: -0.015em; } .policy p, .policy li { color: var(--text-2); font-size: 15.5px; line-height: 1.68; } .policy ul { padding-left: 22px; } .policy code { padding: 2px 7px; border-radius: 6px; background: var(--surface); border: 1px solid var(--surface-border); font-size: 13.5px; font-family: 'Cascadia Code', 'Consolas', ui-monospace, monospace; color: var(--text-1); } .policy .back-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 44px; color: var(--text-2); font-size: 14.5px; font-weight: 500; } .policy .back-link:hover { color: var(--text-1); } /* --- Reveal --- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .card:hover, .btn:hover, .step:hover { transform: none; } } /* --- Download page --- */ .download-page { padding: 56px 0 80px; } .download-hero { text-align: center; max-width: 720px; margin: 0 auto 56px; } .download-hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.05; margin: 18px 0 18px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-1); } .download-hero h1 .accent { background: linear-gradient(135deg, var(--accent) 0%, var(--warm) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .download-hero p.lead { font-size: clamp(16px, 1.5vw, 18px); color: var(--text-2); line-height: 1.55; margin: 0 auto; max-width: 560px; } .download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; max-width: 920px; margin: 0 auto; } .download-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--surface); backdrop-filter: blur(var(--blur-md)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text-1); position: relative; overflow: hidden; transition: transform 0.2s cubic-bezier(.2,.8,.2,1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .download-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-gloss); pointer-events: none; } .download-card > * { position: relative; } .download-card--ready:hover { transform: translateY(-3px); border-color: var(--surface-border-hover); box-shadow: var(--shadow-md); } .download-card--soon { cursor: not-allowed; opacity: 0.78; } .download-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .download-icon { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, rgba(196, 168, 130, 0.22), rgba(104, 137, 168, 0.18)); display: flex; align-items: center; justify-content: center; color: var(--text-1); } .download-icon svg { width: 16px; height: 16px; } .download-status { font-size: 9px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; } .status-ready { background: rgba(80, 170, 120, 0.16); color: #3d8a5a; } :root[data-theme="dark"] .status-ready { background: rgba(120, 220, 160, 0.18); color: #8fe0ab; } .status-soon { background: rgba(0, 0, 0, 0.08); color: var(--text-3); } :root[data-theme="dark"] .status-soon { background: rgba(255, 255, 255, 0.10); color: var(--text-3); } .download-card h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-1); } .download-card .download-meta { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.35; } .download-action { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-1); padding: 7px 11px; border-radius: 8px; background: rgba(0, 0, 0, 0.04); align-self: flex-start; } :root[data-theme="dark"] .download-action { background: rgba(255, 255, 255, 0.06); } .download-card--soon .download-action { color: var(--text-3); background: transparent; padding-left: 0; font-weight: 500; font-style: italic; } .download-card--ready .download-action { background: var(--text-1); color: var(--bg); } .download-foot { text-align: center; margin-top: 56px; color: var(--text-2); font-size: 14.5px; } .download-foot p { margin: 0 0 20px; } .download-foot a { color: var(--text-1); font-weight: 600; } .download-foot .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14.5px; font-weight: 500; } .download-foot .back-link:hover { color: var(--text-1); } /* --- Small screens --- */ @media (max-width: 720px) { .hero { padding: 56px 0 32px; } .hero h1 { letter-spacing: -0.025em; } .policy { padding: 36px 24px; margin: 28px 16px; } section { padding: 56px 0; } .features, .steps { grid-template-columns: 1fr; } .privacy-callout { padding: 40px 24px; } .footer-inner { justify-content: center; text-align: center; } .devices { margin: 40px auto 56px; } .download-grid { grid-template-columns: 1fr; } /* Compact, modern pill buttons on mobile — tighter padding, fuller rounding, smaller icons. */ .hero-cta { gap: 8px; } .hero-cta .btn { padding: 11px 18px; font-size: 14px; border-radius: 100px; gap: 8px; } .hero-cta .btn svg { width: 15px; height: 15px; } .hero-cta .btn-secondary svg { width: 12px; height: 12px; } /* Download-page cards get a lighter, shorter treatment too. */ .download-card { padding: 14px; border-radius: 14px; } .download-icon { width: 28px; height: 28px; border-radius: 8px; } .download-icon svg { width: 14px; height: 14px; } .download-card h3 { font-size: 15.5px; } .download-action { padding: 6px 10px; font-size: 12px; } .download-grid { gap: 10px; grid-template-columns: repeat(2, 1fr); } } /* Very narrow phones — stack primary + secondary so each can breathe. */ @media (max-width: 380px) { .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { justify-content: center; } }