/* ============================================================ MLC assistant — landing page · "Calm Tide" light edition Light, airy, curve-driven. Flowing petal/wave background inspired by the app's home screen — no boxy grid. ============================================================ */ :root { --brand: #02ABB4; --brand-deep: #0E7A80; --brand-deeper: #0a5e63; --brand-bright: #19c3c9; --brand-soft: #5fd8d4; --cyan: #38c6e6; --bg: #f1faf9; --bg-2: #eaf6f5; --surface: #ffffff; --panel: rgba(255,255,255,0.72); --border: rgba(14,122,128,0.12); --border-hi: rgba(2,171,180,0.45); --ink: #133a3b; --text: #1c4546; --muted: #5d7a7b; --muted-2: #84a0a0; --glow-teal: 0 24px 60px rgba(2,171,180,0.18); --shadow-sm: 0 4px 16px rgba(15,80,82,0.07); --shadow-md: 0 18px 44px rgba(15,80,82,0.12); --shadow-lg: 0 40px 90px rgba(15,80,82,0.16); --maxw: 1200px; --r: 24px; --font-display: "Quicksand", system-ui, sans-serif; --font-body: "Nunito Sans", system-ui, sans-serif; } * { box-sizing: border-box; } /* overflow-x: clip on the root is the authoritative horizontal-overflow guard: body's overflow-x:hidden is not reliably honoured on the Elementor template, so clip at the actual viewport scroll container. `clip` (not hidden) avoids creating a scroll container and won't break position:sticky. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; font-size: 17px; /* Use clip, not hidden: overflow-x:hidden coerces overflow-y to `auto`, making its own vertical scroll container (a 2nd scrollbar + nested scroll that swallows the first touch on mobile). clip is exempt from that coercion. Root-level guard already lives on html (clip). */ overflow-x: clip; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.07; letter-spacing: -0.015em; margin: 0; color: var(--ink); text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 26px; position: relative; } section { position: relative; z-index: 1; } /* ---- Gradient-clipped headings ---------------------------- */ .grad-head { background: linear-gradient(180deg, var(--ink) 0%, var(--brand-deep) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hl { background: linear-gradient(110deg, var(--brand), var(--cyan) 30%, var(--brand-soft) 55%, var(--brand-deep) 80%, var(--brand)); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hlShimmer 7s ease-in-out infinite; } @keyframes hlShimmer { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* ============================================================ CURVE BACKGROUND (flowing petals + waves, app-inspired) ============================================================ */ .curve-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .curve-bg .petal { position: absolute; display: block; filter: blur(2px); opacity: 0.5; } /* big soft teal petal, top-right (echoes app's rounded columns) */ .curve-bg .p1 { top: -260px; right: -200px; width: 760px; height: 820px; border-radius: 48% 52% 46% 54% / 56% 50% 50% 44%; background: radial-gradient(circle at 38% 34%, rgba(95,216,212,0.55), rgba(2,171,180,0.12) 62%, transparent 78%); } /* lower-left petal */ .curve-bg .p2 { bottom: -320px; left: -240px; width: 720px; height: 760px; border-radius: 54% 46% 58% 42% / 48% 56% 44% 52%; background: radial-gradient(circle at 60% 56%, rgba(56,198,230,0.40), rgba(2,171,180,0.10) 60%, transparent 76%); } /* small accent petal mid-right */ .curve-bg .p3 { top: 44%; right: -160px; width: 420px; height: 460px; border-radius: 58% 42% 45% 55% / 50% 56% 44% 50%; background: radial-gradient(circle at 50% 50%, rgba(95,216,212,0.30), transparent 68%); opacity: 0.4; } /* soft top sheen so the very top reads bright */ .curve-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(255,255,255,0.9), transparent 60%); } /* flowing wave bands — seamless horizontal scroll mimicking ocean swells. width 200% + left:-50% gives slack so the loop never reveals an edge. */ .wave-band { position: absolute; left: -50%; width: 200%; height: auto; display: block; opacity: 0.5; will-change: transform; } .wave-band.w-top { top: 64vh; } .wave-band.w-bot { bottom: -2px; } .wave-front { opacity: 0.6; } .wave-back { opacity: 0.45; } /* each layer drifts at its own pace; translateX returns to a whole period (25%) so the wave tiles seamlessly, with a mid-cycle vertical swell. */ .wave-flow { animation: waveDriftL 16s linear infinite; } .wave-front { animation: waveDriftL 13s linear infinite; } .wave-back { animation: waveDriftR 26s linear infinite; } @keyframes waveDriftL { 0% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-12.5%) translateY(-7px); } 100% { transform: translateX(-25%) translateY(0); } } @keyframes waveDriftR { 0% { transform: translateX(0) translateY(0); } 50% { transform: translateX(12.5%) translateY(-5px); } 100% { transform: translateX(25%) translateY(0); } } /* soft petals bob and drift like distant swells */ .curve-bg .p1 { animation: swellA 17s ease-in-out infinite; } .curve-bg .p2 { animation: swellB 21s ease-in-out infinite; } .curve-bg .p3 { animation: swellA 14s ease-in-out infinite 1.5s; } @keyframes swellA { 0%,100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-18px, 22px) rotate(3deg); } } @keyframes swellB { 0%,100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(22px, -20px) rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { .wave-flow, .wave-front, .wave-back, .curve-bg .p1, .curve-bg .p2, .curve-bg .p3 { animation: none; } } /* ---- Eyebrow pill ----------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-deep); padding: 7px 15px; border-radius: 999px; background: rgba(2,171,180,0.09); border: 1px solid rgba(2,171,180,0.22); white-space: nowrap; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px rgba(2,171,180,0.7); } .section-head { max-width: 640px; margin-bottom: 60px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head h2 { font-size: clamp(30px, 4.2vw, 50px); margin: 20px 0 16px; } .section-head p { font-size: 18px; color: var(--muted); } /* ---- Buttons ---------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; padding: 14px 26px; border-radius: 999px; border: none; cursor: pointer; transition: transform .18s cubic-bezier(.3,.7,.4,1), box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; } .btn-primary { background: linear-gradient(150deg, var(--brand-deep), var(--brand)); color: #fff; font-weight: 700; box-shadow: 0 12px 28px rgba(2,171,180,0.32); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(2,171,180,0.42); } .btn-ghost { background: var(--surface); color: var(--brand-deep); border: 1px solid rgba(2,171,180,0.28); box-shadow: var(--shadow-sm); } .btn-ghost:hover { background: #fff; border-color: var(--border-hi); transform: translateY(-2px); } .btn-secondary { background: rgba(2,171,180,0.12); color: var(--brand-deep); box-shadow: var(--shadow-sm); } .btn-secondary:hover { background: rgba(2,171,180,0.18); transform: translateY(-2px); } /* Moving-border button */ .mb { position: relative; display: inline-flex; padding: 1.5px; border-radius: 999px; overflow: hidden; isolation: isolate; box-shadow: 0 12px 28px rgba(2,171,180,0.22); } .mb::before { content: ""; position: absolute; inset: -60%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 60%, var(--brand-bright) 76%, var(--cyan) 86%, transparent 96%); animation: spin 4.5s linear infinite; } .mb-inner { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(150deg, var(--brand-deep), var(--brand)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; padding: 14px 26px; border-radius: 999px; transition: filter .2s; } .mb:hover .mb-inner { filter: brightness(1.06); } @keyframes spin { to { transform: rotate(360deg); } } /* App store pills */ .stores { display: flex; flex-wrap: wrap; gap: 14px; } .store-btn { display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px 11px 18px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); transition: transform .18s cubic-bezier(.3,.7,.4,1), box-shadow .2s; } .store-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .store-btn svg { width: 25px; height: 25px; flex: none; } .store-btn .st { display: flex; flex-direction: column; line-height: 1.1; } .store-btn .st small { font-size: 11px; opacity: .78; font-family: var(--font-body); } .store-btn .st b { font-family: var(--font-display); font-size: 17px; font-weight: 600; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); background: rgba(241,250,249,0.66); border-bottom: 1px solid transparent; transform: translateY(-105%); transition: transform .4s cubic-bezier(.3,.7,.4,1), border-color .25s, background .25s; } .nav.show { transform: none; box-shadow: var(--shadow-sm); } .nav.scrolled { border-bottom-color: var(--border); background: rgba(241,250,249,0.82); } .nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; } .brand { display: flex; align-items: center; } .brand-logo { height: 46px; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-links a { position: relative; font-weight: 600; font-size: 15px; color: var(--muted); transition: color .15s; white-space: nowrap; } .nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-soft)); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.3,.7,.4,1); } .nav-links a:not(.btn):hover::after { transform: scaleX(1); } .nav-links a:hover { color: var(--brand-deep); } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-cta .btn { padding: 10px 20px; font-size: 14.5px; } .burger { display: none; width: 44px; height: 44px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; cursor: pointer; } .burger svg { width: 22px; height: 22px; stroke: var(--brand-deep); } /* ============================================================ HERO ============================================================ */ .hero { padding: 150px 0 80px; text-align: center; overflow: hidden; } .hero-logo { display: block; margin: 0 auto 24px; height: auto; } .hero .eyebrow { margin-bottom: 26px; } .hero h1 { font-size: clamp(40px, 7vw, 82px); letter-spacing: -0.025em; margin-bottom: 24px; } .hero-sub { font-size: clamp(17px, 2.1vw, 21px); color: var(--muted); max-width: 600px; margin: 0 auto 36px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; } .hero-rating { display: inline-flex; align-items: center; gap: 11px; margin-top: 30px; color: var(--muted); font-size: 14px; } .stars { display: inline-flex; gap: 2px; color: var(--brand); } .stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; } .hero-rating b { color: var(--ink); font-family: var(--font-display); } .hero-rating .ava-row { display: inline-flex; } .hero-rating .ava-row span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -8px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(150deg, var(--brand-deep), var(--brand)); font-family: var(--font-display); } .hero-rating .ava-row span:first-child { margin-left: 0; } /* Hero showcase — phone in a soft curved glow */ /* Do NOT clip .showcase: the floating chips intentionally sit outside its box (left: calc(50% - 280px) etc.). The 760px .showcase-glow that would otherwise bleed past the viewport on mobile is contained by html{overflow-x:clip}. */ .showcase { position: relative; margin-top: 76px; display: grid; place-items: center; } .showcase-glow { position: absolute; width: 760px; height: 440px; top: 24px; border-radius: 50%; filter: blur(70px); background: radial-gradient(ellipse at center, rgba(95,216,212,0.55), rgba(56,198,230,0.20) 48%, transparent 72%); z-index: 0; } .phone-frame { position: relative; z-index: 3; width: 300px; aspect-ratio: 462 / 1000; width: min(320px, 80vw); border-radius: 46px; padding: 11px; background: linear-gradient(165deg, #1c2b2b, #0c1717); box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,0.10); transform: rotateX(8deg); } .phone-frame::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 92px; height: 22px; background: #0c1717; border-radius: 999px; z-index: 4; } /*.phone-frame .screen { width: 100%; height: 100%; border-radius: 35px; overflow: hidden; background: #eaf7f6; }*/ .phone-frame .screen { width: 100%; aspect-ratio: 455 / 1024; border-radius: 35px; overflow: hidden; background: #eaf7f6; } .phone-frame .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* Floating chips */ .chip-float { position: absolute; z-index: 5; display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.9); padding: 11px 16px 11px 12px; border-radius: 16px; box-shadow: var(--shadow-md); font-size: 13.5px; font-weight: 700; font-family: var(--font-display); color: var(--ink); animation: floaty 5.5s ease-in-out infinite; } .chip-float .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: linear-gradient(150deg, var(--brand-deep), var(--brand)); } .chip-float .ic svg { width: 18px; height: 18px; stroke: #fff; } .chip-float > span:last-child { display: flex; flex-direction: column; white-space: nowrap; } .chip-float small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 11px; color: var(--muted); } .chip-a { top: 70px; left: calc(50% - 280px); animation-delay: 0s; } .chip-b { top: 230px; right: calc(50% - 290px); animation-delay: 1.6s; } .chip-c { bottom: 70px; left: calc(50% - 250px); animation-delay: 2.8s; } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ============================================================ TRUST ============================================================ */ .trust { padding: 70px 0 30px; } .trust .label { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 34px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stat { text-align: center; padding: 26px 16px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--border); backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); } .stat b { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; background: linear-gradient(180deg, var(--brand-deep), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; } .stat span { font-size: 13.5px; color: var(--muted); display: block; margin-top: 4px; } /* ============================================================ GLOW CARD base (cursor-follow spotlight) ============================================================ */ .glow-card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); transition: border-color .25s, transform .25s, box-shadow .25s; } .glow-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(2,171,180,0.12), transparent 70%); opacity: 0; transition: opacity .3s; } .glow-card:hover { border-color: var(--border-hi); transform: translateY(-4px); box-shadow: var(--shadow-md); } .glow-card:hover::before { opacity: 1; } /* ============================================================ FEATURES (bento) ============================================================ */ .features { padding: 96px 0; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .fcard { padding: 30px 28px 28px; position: relative} .fcard-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .fcard-head .ic { margin-bottom: 0; } .fcard .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(150deg, var(--brand-deep), var(--brand)); box-shadow: 0 10px 22px rgba(2,171,180,0.28); } .fcard .ic svg { width: 26px; height: 26px; stroke: #fff; } .fcard .ic img { width: 28px; height: 28px; object-fit: contain; display: block; } /* When a custom image icon is uploaded, drop the gradient box and let the image fill the icon area edge to edge. Lucide (svg) icons keep the box. */ .fcard .ic:has(img) { background: none; box-shadow: none; border-radius: 0; } .fcard .ic:has(img) img { width: 100%; height: 100%; object-fit: contain; } .fcard-video { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--brand-deep); transition: color .18s; position: relative; } .fcard-video .pf { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--brand); box-shadow: 0 6px 14px rgba(2,171,180,0.35); transition: transform .18s, box-shadow .18s; } .fcard-video .pf svg { width: 14px; height: 14px; margin-left: 0px; fill: #fff; } .fcard-video:hover { color: var(--brand); } .fcard-video:hover .pf { transform: scale(1.12); box-shadow: 0 8px 18px rgba(2,171,180,0.5); } .fcard-video:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } .fcard h3 { font-size: 20px; margin-bottom: 9px; position: relative; } .fcard p { font-size: 15px; color: var(--muted); position: relative; } .fcard.span2 { grid-column: span 2; } .fcard .eyebrow { position: absolute !important; top: 0; left: 0; width: 100%; display: block; text-align: center; background: transparent; border-radius: 0%; border-top-width: 0; } .fcard.has-pill .fcard-head { margin-top: 20px; } /* ============================================================ AI HIGHLIGHT ============================================================ */ .ai { padding: 40px 0 96px; } .ai-card { position: relative; overflow: hidden; border-radius: 32px; background: linear-gradient(150deg, var(--brand-deep), var(--brand-deeper)); color: #fff; padding: 64px 60px; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 54px; align-items: center; box-shadow: var(--shadow-lg); } /* soft curved sheen inside the card */ .ai-card::after { content: ""; position: absolute; width: 560px; height: 560px; right: -160px; bottom: -260px; border-radius: 46% 54% 55% 45% / 52% 44% 56% 48%; background: rgba(255,255,255,0.08); pointer-events: none; } .ai-beams { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .55; } .ai-beams i { position: absolute; top: -20%; height: 140%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.8), transparent); opacity: .5; animation: beamSlide 7s linear infinite; } .ai-beams i:nth-child(1){ left: 18%; animation-delay: 0s; } .ai-beams i:nth-child(2){ left: 42%; animation-delay: 2.2s; height: 120%; } .ai-beams i:nth-child(3){ left: 67%; animation-delay: 4s; } .ai-beams i:nth-child(4){ left: 85%; animation-delay: 1.2s; height: 110%; } @keyframes beamSlide { 0% { transform: translateY(-12%); opacity: 0; } 30% { opacity: .5; } 70% { opacity: .5; } 100% { transform: translateY(12%); opacity: 0; } } .ai-copy { position: relative; z-index: 2; } .ai-copy h2 { color: #fff; font-size: clamp(30px, 3.6vw, 44px); margin: 20px 0 16px; } .ai-copy .grad-head { background: linear-gradient(180deg, #fff, #c9efee); -webkit-background-clip: text; background-clip: text; color: transparent; } .ai-copy .hl { background: linear-gradient(110deg, var(--brand-soft), #bff2ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .ai-copy p { font-size: 18px; color: rgba(255,255,255,0.9); max-width: 460px; } .ai-copy .eyebrow { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.25); } .ai-copy .eyebrow .dot { background: var(--brand-soft); box-shadow: none; } .ai-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; } .ai-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #fff; } .ai-points .tick { width: 25px; height: 25px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.18); } .ai-points .tick svg { width: 14px; height: 14px; stroke: #fff; } .chat { position: relative; z-index: 2; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); border-radius: 24px; padding: 22px; backdrop-filter: blur(10px); } .bubble { padding: 13px 17px; border-radius: 18px; font-size: 14.5px; margin-bottom: 12px; max-width: 88%; line-height: 1.5; } .from-user { background: #fff; color: var(--ink); font-weight: 600; margin-left: auto; border-bottom-right-radius: 6px; } .from-ai { background: rgba(255,255,255,0.16); color: #fff; border-bottom-left-radius: 6px; } .from-ai b { color: var(--brand-soft); } .from-ai.voice { display: inline-flex; align-items: center; gap: 13px; padding: 12px 17px 12px 13px; } .siri-orb { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #11313a, #0a1c22 70%); overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.35); } .siri-orb .s { position: absolute; border-radius: 50%; filter: blur(5px); mix-blend-mode: screen; opacity: .95; } .siri-orb .s1 { inset: 4px; background: radial-gradient(circle at 35% 35%, #4be0ff, transparent 60%); animation: siriSpin 2.6s linear infinite; } .siri-orb .s2 { inset: 5px; background: radial-gradient(circle at 70% 60%, #ff5ca8, transparent 58%); animation: siriSpin 3.4s linear infinite reverse; } .siri-orb .s3 { inset: 6px; background: radial-gradient(circle at 55% 30%, #6c7bff, transparent 60%); animation: siriSpin 4.6s linear infinite; } .siri-orb .core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 48%, #ffffff 0%, rgba(255,255,255,0.55) 14%, transparent 42%); animation: siriPulse 1.5s ease-in-out infinite; } @keyframes siriSpin { to { transform: rotate(360deg); } } @keyframes siriPulse { 0%,100% { transform: scale(.82); opacity: .65; } 50% { transform: scale(1.08); opacity: 1; } } .siri-wave { display: inline-flex; align-items: center; gap: 3px; height: 26px; } .siri-wave i { width: 3px; height: 30%; border-radius: 3px; background: linear-gradient(180deg, var(--brand-soft), var(--brand)); animation: siriBar 1.1s ease-in-out infinite; } .siri-wave i:nth-child(1){animation-delay:-.9s}.siri-wave i:nth-child(2){animation-delay:-.2s}.siri-wave i:nth-child(3){animation-delay:-.6s}.siri-wave i:nth-child(4){animation-delay:-.1s}.siri-wave i:nth-child(5){animation-delay:-.8s}.siri-wave i:nth-child(6){animation-delay:-.35s}.siri-wave i:nth-child(7){animation-delay:-.7s}.siri-wave i:nth-child(8){animation-delay:-.15s}.siri-wave i:nth-child(9){animation-delay:-.5s}.siri-wave i:nth-child(10){animation-delay:-.95s}.siri-wave i:nth-child(11){animation-delay:-.25s}.siri-wave i:nth-child(12){animation-delay:-.65s} @keyframes siriBar { 0%,100% { height: 18%; opacity: .55; } 50% { height: 100%; opacity: 1; } } .siri-label { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.82); } /* ============================================================ HOW IT WORKS ============================================================ */ .how { padding: 96px 0; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; } .step { padding: 36px 30px 32px; background: var(--surface); } .step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .step-head .num { margin-bottom: 0; } .step .num { font-family: var(--font-display); font-weight: 700; font-size: 18px; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(150deg, var(--brand-deep), var(--brand)); color: #fff; box-shadow: 0 10px 22px rgba(2,171,180,0.26); } .step h3 { font-size: 21px; margin-bottom: 10px; } .step p { color: var(--muted); font-size: 15px; } .step .line { position: absolute; top: 62px; right: -9px; width: 18px; height: 2px; background: linear-gradient(90deg, var(--brand), transparent); z-index: 2; } .step:last-child .line { display: none; } /* ============================================================ TESTIMONIALS ============================================================ */ .testi { padding: 96px 0; } .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .quote { padding: 30px 28px; display: flex; flex-direction: column; gap: 18px; background: var(--surface); } .quote .stars svg { width: 16px; } .quote p { font-size: 15.5px; color: var(--text); line-height: 1.65; flex: 1; position: relative; } .quote .who { display: flex; align-items: center; gap: 13px; position: relative; } .quote .who .ava { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; background: linear-gradient(150deg, var(--brand-deep), var(--brand)); } .quote .who b { display: block; font-family: var(--font-display); font-size: 15px; color: var(--ink); } .quote .who span { font-size: 13px; color: var(--muted); } /* ============================================================ PRICING ============================================================ */ .pricing { padding: 96px 0; } .bill-toggle { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px; margin: 0 auto 50px; box-shadow: var(--shadow-sm); } .bill-toggle button { border: none; background: transparent; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--muted); padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: all .18s; } .bill-toggle button.on { background: linear-gradient(150deg, var(--brand-deep), var(--brand)); color: #fff; } .bill-toggle .save { font-size: 11px; color: var(--brand-deep); font-weight: 700; } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; max-width: 1000px; margin-inline: auto; } .plan { padding: 36px 30px; display: flex; flex-direction: column; background: var(--surface); } .plan.featured { border-color: var(--border-hi); background: linear-gradient(180deg, rgba(2,171,180,0.07), var(--surface)); box-shadow: var(--glow-teal); } .plan .tag { align-self: flex-start; white-space: nowrap; background: linear-gradient(150deg, var(--brand-deep), var(--brand)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .04em; padding: 5px 13px; border-radius: 999px; margin-bottom: 14px; } .plan > .eyebrow { align-self: flex-start; margin-top: 20px; } .plan h3 { font-size: 20px; } .plan .price { display: flex; align-items: baseline; gap: 4px; margin: 14px 0 4px; } .plan .price b { font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--ink); } .plan .price span { color: var(--muted); font-size: 14px; font-weight: 600; } .plan .desc { color: var(--muted); font-size: 14px; min-height: 42px; } .plan ul { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; flex: 1; } .plan li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--text); } .plan li svg { width: 18px; height: 18px; stroke: var(--brand); flex: none; margin-top: 2px; } .plan .btn, .plan .mb { width: 100%; } .plan .mb-inner { width: 100%; justify-content: center; } /* ============================================================ FAQ ============================================================ */ .faq { padding: 96px 0; } .faq-list { max-width: 800px; margin-inline: auto; display: grid; gap: 12px; } .faq-item { overflow: hidden; background: var(--surface); } .faq-item.open { border-color: var(--border-hi); box-shadow: var(--shadow-sm); } .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-family: var(--font-display); font-weight: 600; font-size: 17.5px; color: var(--ink); position: relative; z-index: 1; } .faq-q .pm { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(2,171,180,0.10); border: 1px solid rgba(2,171,180,0.25); transition: transform .25s, background .2s; } .faq-q .pm svg { width: 15px; height: 15px; stroke: var(--brand-deep); } .faq-item.open .pm { transform: rotate(45deg); background: var(--brand); } .faq-item.open .pm svg { stroke: #fff; } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-a p { padding: 0 24px 24px; color: var(--muted); font-size: 15.5px; } /* ============================================================ CTA ============================================================ */ .cta { padding: 30px 0 100px; } .cta-card { position: relative; overflow: hidden; border-radius: 36px; text-align: center; padding: 80px 56px; background: linear-gradient(150deg, var(--brand-deep), var(--brand-deeper)); color: #fff; box-shadow: var(--shadow-lg); } .cta-card::after { content: ""; position: absolute; width: 600px; height: 600px; left: -180px; bottom: -300px; border-radius: 46% 54% 55% 45% / 52% 44% 56% 48%; background: rgba(255,255,255,0.07); pointer-events: none; } .cta-card .ai-beams { opacity: .5; } .cta-card > *:not(.ai-beams) { position: relative; z-index: 2; } .cta-card .eyebrow { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.25); } .cta-card .eyebrow .dot { background: var(--brand-soft); box-shadow: none; } .cta-card .grad-head { background: linear-gradient(180deg, #fff, #c9efee); -webkit-background-clip: text; background-clip: text; color: transparent; } .cta-card .hl { background: linear-gradient(110deg, var(--brand-soft), #bff2ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .cta-card h2 { font-size: clamp(32px, 4.6vw, 56px); margin: 20px auto 16px; max-width: 720px; } .cta-card p { color: rgba(255,255,255,0.9); font-size: 19px; max-width: 540px; margin: 0 auto 34px; } .cta-card .stores { justify-content: center; } .cta-card .store-btn { background: #fff; color: var(--ink); } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--brand-deep); color: rgba(255,255,255,0.85); padding: 28px 0; position: relative; z-index: 1; } .footer .top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.12); } .footer .brand-logo { height: 52px; } .footer .blurb { margin-top: 18px; font-size: 14px; max-width: 290px; color: rgba(255,255,255,0.7); } .fcol h4 { color: #fff; font-size: 13.5px; letter-spacing: .05em; margin-bottom: 16px; font-family: var(--font-display); text-transform: uppercase; } .fcol a { display: block; font-size: 14.5px; padding: 6px 0; color: rgba(255,255,255,0.72); transition: color .15s; } .fcol a:hover { color: var(--brand-soft); } .footer .bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 0; font-size: 13.5px; color: rgba(255,255,255,0.75); } .footer .social { display: flex; gap: 11px; } .footer .social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.08); display: grid; place-items: center; transition: all .18s; } .footer .social a:hover { background: rgba(255,255,255,0.16); } .footer .social svg { width: 18px; height: 18px; stroke: #fff; } /* ============================================================ REVEAL (transform-only — never hides content if frozen) ============================================================ */ .reveal { transform: translateY(28px) scale(.985); transition: transform .8s cubic-bezier(.2,.7,.3,1); transition-delay: var(--rd, 0s); will-change: transform; } .reveal.in { transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { transform: none; transition: none; } .chip-float, .ai-beams i, .mb::before, .siri-orb .s, .siri-orb .core, .siri-wave i { animation: none; } html { scroll-behavior: auto; } } @media print { .reveal { transform: none !important; } } /* ============================================================ MOTION POLISH ============================================================ */ /* scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 120; background: linear-gradient(90deg, var(--brand), var(--brand-soft), var(--cyan)); box-shadow: 0 0 14px rgba(2,171,180,.55); transition: width .12s linear; } /* hero entrance */ .hero-logo { animation: heroDrop .9s cubic-bezier(.2,.7,.3,1) both; } @keyframes heroDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } /* hero video: brain-badge play button over the app mockup, with sonar waves */ .hero-play { position: absolute; z-index: 6; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 10px)); width: 94px; height: 94px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; background: transparent; display: grid; place-items: center; filter: drop-shadow(0 12px 26px rgba(2,171,180,0.4)); transition: transform .22s cubic-bezier(.3,.7,.4,1), filter .22s; } .hero-play img { width: 100%; height: 100%; display: block; border-radius: 50%; position: relative; z-index: 2; transform-origin: center; animation: heartbeat 1.6s ease-in-out infinite; } /* classic "lub-dub" double beat, then a rest */ @keyframes heartbeat { 0% { transform: scale(1); } 12% { transform: scale(1.15); } 24% { transform: scale(1); } 36% { transform: scale(1.1); } 48% { transform: scale(1); } 100% { transform: scale(1); } } .hero-play:hover { transform: translate(-50%, calc(-50% - 10px)) scale(1.07); filter: drop-shadow(0 16px 34px rgba(2,171,180,0.55)); } .hero-play:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; } /* two staggered expanding rings = a prominent sonar pulse */ .hero-play::before, .hero-play::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; border: 3px solid var(--brand); animation: heroWave 2.4s cubic-bezier(.2,.6,.3,1) infinite; } .hero-play::after { animation-delay: 1.2s; } @keyframes heroWave { 0% { transform: scale(1); opacity: .8; } 60% { opacity: .18; } 100% { transform: scale(2.2); opacity: 0; } } /* video lightbox */ .video-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; } .video-modal[hidden] { display: none; } .video-modal-scrim { position: absolute; inset: 0; background: rgba(8,40,42,0.9); animation: modalFade .25s ease both; } /* 9:16 portrait player, up to 720x1280; width is driven so the 16/9-tall frame never exceeds the viewport height (the vh clamp keeps it fully visible). */ .video-modal-inner { position: relative; width: min(720px, 92vw, calc((100vh - 80px) * 9 / 16)); aspect-ratio: 9 / 16; animation: modalPop .3s cubic-bezier(.2,.7,.3,1) both; } .video-frame, .video-frame iframe { width: 100%; height: 100%; border: 0; } .video-frame iframe { border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); } .video-modal-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-md); } .video-modal-close svg { width: 20px; height: 20px; } .video-modal-close:hover { background: var(--bg-2); } body.modal-open { overflow: hidden; } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes modalPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .video-modal-close { top: -46px; right: 0; } } /* feature / icon micro-interactions */ .glow-card .ic { transition: transform .3s cubic-bezier(.3,.7,.4,1), color .25s; } .glow-card:hover .ic { transform: translateY(-3px) scale(1.08) rotate(-4deg); } /* store + cta buttons: shine sweep on hover */ .store-btn { position: relative; overflow: hidden; } .store-btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: transform .7s ease; } .store-btn:hover::after { transform: translateX(130%) skewX(-18deg); } /* gentle drift for the hero showcase */ .showcase.in { animation: showcaseFloat 8s ease-in-out 1s infinite; } @keyframes showcaseFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .hl, .hero-logo, .showcase.in, .store-btn::after, .hero-play::before, .hero-play::after, .hero-play img, .video-modal-scrim, .video-modal-inner { animation: none; } .scroll-progress { display: none; } } /* ============================================================ DRAWER ============================================================ */ .drawer { position: fixed; inset: 0; z-index: 200; display: none; } .drawer.open { display: block; } .drawer .scrim { position: absolute; inset: 0; background: rgba(15,60,62,0.4); backdrop-filter: blur(4px); } .drawer .panel { position: absolute; top: 14px; right: 14px; left: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 22px; box-shadow: var(--shadow-lg); } .drawer .panel a { display: block; padding: 13px 12px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); border-radius: 12px; } .drawer .panel a:hover { background: var(--bg-2); } .drawer .panel .btn { width: 100%; margin-top: 12px; } .drawer .panel .close { position: absolute; top: 18px; right: 18px; background: var(--bg-2); border: 1px solid var(--border); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; } .drawer .panel .close svg { width: 20px; height: 20px; stroke: var(--ink); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .feature-grid, .steps, .testi-grid, .plans { grid-template-columns: repeat(2, 1fr); } .fcard.span2 { grid-column: span 2; } .ai-card { grid-template-columns: 1fr; gap: 38px; padding: 48px 38px; } .step .line { display: none; } .footer .top { grid-template-columns: 1fr 1fr; } .chip-a { left: 8px; } .chip-b { right: 8px; } .chip-c { left: 18px; } } @media (max-width: 680px) { body { font-size: 16px; } .nav-links, .nav-cta .btn-ghost { display: none; } .burger { display: grid; place-items: center; } .hero { padding-top: 120px; } .stats { grid-template-columns: repeat(2, 1fr); } .feature-grid, .steps, .testi-grid, .plans { grid-template-columns: 1fr; } .fcard.span2 { grid-column: span 1; } .footer .top { grid-template-columns: 1fr; gap: 28px; } .ai-card, .cta-card { border-radius: 26px; } .chip-float { display: none; } /* Flatten the phone mockup on mobile — the 3D tilt reads as a skew on small screens */ .showcase { perspective: none; } .phone-frame { transform: none; } } @media (max-width: 420px) { .wrap { padding-inline: 18px; } .ai-card, .cta-card { padding: 40px 22px; } } /* ============================================================ MLC ELEMENTOR COMPONENT HELPERS Utility classes so atomic components compose into the bespoke layouts (card grids, dark cards, checklists, section subs) when placed inside Elementor containers. Decoupled from the ACF front page, which keeps using .ai-card / .cta-card directly. ============================================================ */ /* Card grid — mirrors .feature-grid / .testi-grid / .plans. Put on an Elementor container; its child widget wrappers become the grid cells. */ .mlc-card-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } .mlc-card-grid > * { min-width: 0; } .mlc-card-grid .mlc-card-wide, .mlc-card-grid > .elementor-element:has(.mlc-card-wide) { grid-column: span 2; } @media (max-width: 920px) { .mlc-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mlc-card-grid { grid-template-columns: 1fr; } .mlc-card-grid .mlc-card-wide { grid-column: span 1; } } /* Section sub-heading paragraph — mirrors .section-head p. */ .mlc-sub { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0 auto; } .mlc-sub.center { text-align: center; } /* Trust-bar label. */ .mlc-label { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); font-family: var(--font-display); } /* Checklist (ai-points style) that works on a light background by default. */ .mlc-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; } .mlc-check li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--text); } .mlc-check .tick { width: 25px; height: 25px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(2,171,180,0.14); } .mlc-check .tick svg { width: 14px; height: 14px; stroke: var(--brand-deep); } /* Dark gradient card context — for AI / CTA style blocks built from atomic components. Provides the surface + flips descendant text to white; layout (single column vs 2-up) is handled by the Elementor container itself. */ /* overflow:hidden !important — clips the decorative ::after sheen. Elementor containers default to overflow:visible, which would otherwise let the sheen (bottom:-260px) spill below the page and add phantom scroll space. */ .mlc-dark-card { position: relative; overflow: hidden !important; border-radius: 32px; background: linear-gradient(150deg, var(--brand-deep), var(--brand-deeper)); color: #fff; box-shadow: var(--shadow-lg); } .mlc-dark-card::after { content: ""; position: absolute; width: 560px; height: 560px; right: -160px; bottom: -260px; border-radius: 46% 54% 55% 45% / 52% 44% 56% 48%; background: rgba(255,255,255,0.08); pointer-events: none; z-index: 0; } .mlc-dark-card > * { position: relative; z-index: 1; } .mlc-dark-card .grad-head { background: linear-gradient(180deg, #fff, #c9efee); -webkit-background-clip: text; background-clip: text; color: transparent; } .mlc-dark-card .hl { background: linear-gradient(110deg, var(--brand-soft), #bff2ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .mlc-dark-card .eyebrow { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.25); } .mlc-dark-card .eyebrow .dot { background: var(--brand-soft); box-shadow: none; } .mlc-dark-card .mlc-sub, .mlc-dark-card p { color: rgba(255,255,255,0.9); } .mlc-dark-card .mlc-check li { color: #fff; } .mlc-dark-card .mlc-check .tick { background: rgba(255,255,255,0.18); } .mlc-dark-card .mlc-check .tick svg { stroke: #fff; } .mlc-dark-card .store-btn { background: #fff; color: var(--ink); } /* Fonts — Elementor's default kit ships Roboto via its global-typography variables, which leaks onto native widgets (text editors, headings) on Elementor pages. Remap those variables to the brand fonts and pin them on the native text/heading widgets so every piece of text matches the rest of the UI (Quicksand for display, Nunito Sans for body). */ body[class*="elementor-kit-"] { --e-global-typography-primary-font-family: var(--font-display); --e-global-typography-secondary-font-family: var(--font-display); --e-global-typography-text-font-family: var(--font-body); --e-global-typography-accent-font-family: var(--font-display); } .elementor-widget-text-editor, .elementor-widget-text-editor p { font-family: var(--font-body) !important; } .elementor-widget-heading .elementor-heading-title { font-family: var(--font-display) !important; } /* ============================================================ COMING SOON (Elementor) — the standalone launch splash. Layout (centering, min-height) is handled by the Elementor container with the .soon class; these rules carry the original visual styling. ============================================================ */ .soon { position: relative; z-index: 1; } .soon-inner { width: 100%; max-width: 760px; } .soon .hero-logo { width: 132px !important; height: 132px !important; } .soon .mlc-title { font-size: clamp(34px, 6vw, 58px) !important; line-height: 1.06 !important; letter-spacing: -0.02em; margin: 0; } .soon .lede { font-size: clamp(16px, 2.2vw, 19px); color: var(--muted); max-width: 540px; margin: 0 auto; line-height: 1.6; } .soon-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 600px; } .soon-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--brand-deep); background: rgba(255, 255, 255, 0.72); border: 1px solid var(--border); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); } .soon-pill svg { width: 16px; height: 16px; stroke: var(--brand); } .soon-form { display: flex; gap: 10px; width: 100%; max-width: 440px; } .soon-form input[type="email"] { flex: 1; min-width: 0; padding: 14px 18px; font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; outline: none; transition: border-color 0.18s, box-shadow 0.18s; } .soon-form input[type="email"]::placeholder { color: var(--muted-2); } .soon-form input[type="email"]:focus { border-color: var(--border-hi); box-shadow: 0 0 0 4px rgba(2, 171, 180, 0.12); } .soon-note { font-size: 13px; color: var(--muted-2); max-width: 440px; text-align: center; } .soon-msg { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--brand-deep); min-height: 20px; text-align: center; } .soon-stats { display: flex; flex-wrap: wrap; gap: 30px 44px; justify-content: center; } .soon-stats div { display: flex; flex-direction: column; gap: 2px; } .soon-stats b { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); } .soon-stats span { font-size: 12.5px; color: var(--muted); letter-spacing: 0.01em; } .soon-foot { font-size: 12.5px; color: var(--muted-2); text-align: center; } @media (max-width: 540px) { .soon-form { flex-direction: column; } } /* --- iOS WebKit renderer-crash guard ------------------------------------- Opening the lightbox stacked a full-viewport backdrop-filter scrim and an autoplaying YouTube iframe ON TOP of the page's ~dozen blur / backdrop- filter layers and 18 infinite animations — all still compositing behind the near-opaque scrim. On memory-constrained iPhones that pushed the WebKit content process past its budget and it was killed ("A problem repeatedly occurred"). The scrim hides all of it, so while the modal is open we drop the occluded, invisible GPU work instead of paying for it underneath a video. */ body.modal-open .curve-bg { display: none; } body.modal-open .nav { backdrop-filter: none; -webkit-backdrop-filter: none; } body.modal-open .showcase-glow, body.modal-open .wave-band, body.modal-open .chip-float, body.modal-open .hero-play, body.modal-open .hero-play::before, body.modal-open .hero-play::after, body.modal-open .siri-orb .s, body.modal-open .siri-orb .core, body.modal-open .siri-wave i, body.modal-open .ai-beams i, body.modal-open .mb::before { animation-play-state: paused !important; }