/* =========================================================== CatchUP landing — design tokens + layout Theme is switched via =========================================================== */ :root { --maxw: 1180px; --radius: 16px; --radius-lg: 24px; --ease: cubic-bezier(.22,.68,.34,1); --section-pad: 110px; } /* ---------- THEME: HYBRID (default) ---------- */ :root, html[data-theme="hybrid"] { --font: 'Onest', system-ui, sans-serif; --font-display: 'Unbounded', 'Onest', system-ui, sans-serif; --weight-head: 700; --bg: #0A0A0F; --bg-alt: #0e0e15; --text: #ffffff; --text-muted: rgba(255,255,255,0.62); --text-dim: rgba(255,255,255,0.40); --card-bg: rgba(255,255,255,0.035); --card-bg-2: rgba(255,255,255,0.05); --card-border: rgba(255,255,255,0.09); --hairline: rgba(255,255,255,0.08); --accent: #2AABEE; --accent-2: #7C3AED; --accent-grad: linear-gradient(100deg, #2AABEE, #7C3AED); --accent-soft: rgba(124,58,237,0.14); --on-accent: #ffffff; --badge-bg: rgba(255,255,255,0.05); --badge-border: rgba(255,255,255,0.12); --nav-cta-bg: transparent; --nav-cta-color: #ffffff; --nav-cta-border: rgba(255,255,255,0.18); --glow-1: rgba(42,171,238,0.20); --glow-2: rgba(124,58,237,0.20); --cta-shadow: 0 18px 50px -14px rgba(124,58,237,0.8); --logo-grad: linear-gradient(135deg, #2AABEE, #7C3AED); /* phone (tg-dark) */ --phone-frame: #000; --chat-bg: #0e1621; --header-bg: #17212b; --bubble-bot: #182533; --task-bg: #1b2735; --screen-text: #eef1f6; --screen-sub: rgba(232,236,243,0.5); --screen-divider: rgba(255,255,255,0.06); --sbtn-bg: rgba(255,255,255,0.06); --sbtn-border: rgba(255,255,255,0.10); --phone-accent: #2AABEE; --phone-dotted: none; --shadow-card: none; } /* ---------- THEME: DARK PREMIUM (A) ---------- */ html[data-theme="dark"] { --font: 'Manrope', system-ui, sans-serif; --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif; --weight-head: 800; --bg: #0A0A0F; --bg-alt: #0e0e15; --text: #ffffff; --text-muted: rgba(255,255,255,0.62); --text-dim: rgba(255,255,255,0.40); --card-bg: rgba(255,255,255,0.035); --card-bg-2: rgba(255,255,255,0.05); --card-border: rgba(255,255,255,0.09); --hairline: rgba(255,255,255,0.08); --accent: #7C3AED; --accent-2: #7C3AED; --accent-grad: #7C3AED; --accent-soft: rgba(124,58,237,0.14); --on-accent: #ffffff; --badge-bg: rgba(124,58,237,0.14); --badge-border: rgba(124,58,237,0.4); --nav-cta-bg: transparent; --nav-cta-color: #ffffff; --nav-cta-border: rgba(255,255,255,0.18); --glow-1: rgba(124,58,237,0.28); --glow-2: rgba(59,130,246,0.16); --cta-shadow: 0 18px 50px -12px rgba(124,58,237,0.85); --logo-grad: #7C3AED; --phone-frame: #000; --chat-bg: #0c0c12; --header-bg: #101018; --bubble-bot: #17171f; --task-bg: #15151d; --screen-text: #eef1f6; --screen-sub: rgba(232,236,243,0.5); --screen-divider: rgba(255,255,255,0.06); --sbtn-bg: rgba(255,255,255,0.06); --sbtn-border: rgba(255,255,255,0.10); --phone-accent: #7C3AED; --phone-dotted: none; --shadow-card: none; } /* ---------- THEME: TELEGRAM NATIVE (C) ---------- */ html[data-theme="native"] { --font: 'Golos Text', system-ui, sans-serif; --font-display: 'Golos Text', system-ui, sans-serif; --weight-head: 700; --bg: #f4f7fb; --bg-alt: #ffffff; --text: #0d2233; --text-muted: rgba(13,34,51,0.62); --text-dim: rgba(13,34,51,0.45); --card-bg: #ffffff; --card-bg-2: #ffffff; --card-border: rgba(13,34,51,0.08); --hairline: rgba(13,34,51,0.08); --accent: #2AABEE; --accent-2: #2AABEE; --accent-grad: #2AABEE; --accent-soft: rgba(42,171,238,0.10); --on-accent: #ffffff; --badge-bg: #ffffff; --badge-border: rgba(42,171,238,0.3); --nav-cta-bg: #2AABEE; --nav-cta-color: #ffffff; --nav-cta-border: transparent; --glow-1: rgba(42,171,238,0.20); --glow-2: rgba(42,171,238,0.10); --cta-shadow: 0 16px 40px -12px rgba(42,171,238,0.6); --logo-grad: #2AABEE; --phone-frame: #1a1a1f; --chat-bg: #cfd9e3; --header-bg: #ffffff; --bubble-bot: #ffffff; --task-bg: #ffffff; --screen-text: #0d1620; --screen-sub: rgba(13,22,32,0.45); --screen-divider: rgba(0,0,0,0.06); --sbtn-bg: rgba(0,0,0,0.035); --sbtn-border: rgba(0,0,0,0.07); --phone-accent: #2AABEE; --phone-dotted: radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px); --shadow-card: 0 1px 2px rgba(0,0,0,0.08); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; } /* full-page film grain — subtle premium texture */ .grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .055; mix-blend-mode: soft-light; background-image: url("grain.svg"); } html[data-theme="native"] .grain { opacity: .4; mix-blend-mode: multiply; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } a { color: inherit; text-decoration: none; } /* ---------- entrance reveal ---------- Content is visible by default (robust everywhere). The from-hidden state is applied only when is present AND motion is allowed, so it never traps content offscreen in non-compositing contexts. */ .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { html.anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } html.anim .reveal.in { opacity: 1; transform: none; } } /* =========================================================== NAV =========================================================== */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; backdrop-filter: blur(14px); background: color-mix(in oklab, var(--bg) 72%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s; } .nav.scrolled { border-bottom-color: var(--hairline); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; } .brand .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--logo-grad); display: grid; place-items: center; font-size: 16px; color: #fff; } html[data-theme="native"] .brand .mark { border-radius: 50%; } .nav-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .nav-links .lnk { display: none; } .nav-cta { padding: 9px 18px; border-radius: 10px; font-weight: 600; color: var(--nav-cta-color); background: var(--nav-cta-bg); border: 1px solid var(--nav-cta-border); white-space: nowrap; } @media (min-width: 760px) { .nav-links .lnk { display: inline; } .nav { padding: 18px 40px; } } /* =========================================================== Shared section heading =========================================================== */ .section { padding: 72px 0; } @media (min-width: 880px) { .section { padding: var(--section-pad) 0; } } .eyebrow { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .eyebrow .eno { font-family: var(--font); font-variant-numeric: tabular-nums; font-weight: 800; color: var(--text-dim); letter-spacing: 0; padding-right: 11px; position: relative; } .eyebrow .eno::after { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 13px; transform: translateY(-50%); background: currentColor; opacity: .45; } .section-title { font-family: var(--font-display); font-size: clamp(30px, 5vw, 46px); font-weight: var(--weight-head); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 16px; max-width: 16ch; text-wrap: balance; } .section-sub { font-size: clamp(16px, 2.2vw, 19px); line-height: 1.55; color: var(--text-muted); max-width: 52ch; margin: 0; text-wrap: pretty; } /* =========================================================== BUTTONS =========================================================== */ .btn-primary { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; justify-content: center; white-space: nowrap; background: var(--accent-grad); color: var(--on-accent); font-family: var(--font); font-weight: 700; font-size: 17px; padding: 17px 30px; border-radius: 14px; border: none; cursor: pointer; box-shadow: var(--cta-shadow), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s var(--ease), box-shadow .3s, filter .3s; } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--cta-shadow), inset 0 1px 0 rgba(255,255,255,.25); filter: brightness(1.06); } .btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-130%); } .btn-primary > * { position: relative; z-index: 2; } .btn-primary svg { width: 20px; height: 20px; } .subnote { font-size: 14px; color: var(--text-dim); font-weight: 500; } /* =========================================================== HERO =========================================================== */ .hero { position: relative; overflow: hidden; padding: 40px 0 64px; } @media (min-width: 880px) { .hero { padding: 60px 0 90px; } } .hero .glow1, .hero .glow2 { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(20px); } .hero .glow1 { top: -180px; right: 4%; width: 560px; height: 560px; background: radial-gradient(circle, var(--glow-1), transparent 65%); } .hero .glow2 { bottom: -240px; left: -160px; width: 520px; height: 520px; background: radial-gradient(circle, var(--glow-2), transparent 65%); } .hero-grid { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 44px; align-items: flex-start; } @media (min-width: 880px) { .hero-grid { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } } .hero-copy { max-width: 600px; } .hero h1 { font-family: var(--font-display); font-size: clamp(35px, 6.6vw, 50px); line-height: 1.06; font-weight: var(--weight-head); letter-spacing: -0.038em; margin: 0 0 22px; } .hero h1 span { display: block; white-space: nowrap; } .hero h1 .accent { color: var(--accent-2); } html[data-theme="hybrid"] .hero h1 .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero p.lead { font-size: clamp(17px, 2.4vw, 19px); line-height: 1.5; color: var(--text-muted); margin: 0 0 32px; max-width: 30em; text-wrap: pretty; } .hero .cta-row { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .badge { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--text-muted); font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 30px; margin-bottom: 24px; } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .badge svg { width: 14px; height: 14px; color: var(--accent); } html[data-theme="native"] .badge { box-shadow: 0 4px 14px -6px rgba(42,171,238,0.4); color: var(--accent); } /* =========================================================== PHONE MOCKUP =========================================================== */ .phone { width: 320px; max-width: 86vw; flex-shrink: 0; align-self: center; border-radius: 44px; padding: 11px; background: var(--phone-frame); position: relative; box-shadow: 0 50px 120px -34px var(--glow-2), 0 30px 80px -40px rgba(0,0,0,0.7); } html[data-theme="native"] .phone { box-shadow: 0 50px 120px -35px rgba(30,50,90,0.35), 0 20px 50px -30px rgba(0,0,0,0.3); } .phone .island { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 95px; height: 26px; background: #000; border-radius: 20px; z-index: 3; } .screen { border-radius: 34px; overflow: hidden; background: var(--chat-bg); height: 600px; display: flex; flex-direction: column; } .sb { background: var(--header-bg); padding-top: 12px; } .sb-row { display: flex; justify-content: space-between; align-items: center; padding: 0 22px 8px; font-size: 13px; font-weight: 700; color: var(--screen-text); } .sb-row .icons { display: flex; gap: 5px; font-size: 11px; opacity: 0.8; } .chat-head { display: flex; align-items: center; gap: 11px; padding: 7px 16px 11px; border-bottom: 1px solid var(--screen-divider); } .chat-head .back { color: var(--phone-accent); font-size: 22px; font-weight: 300; line-height: 1; } .chat-head .av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--phone-accent), color-mix(in oklab, var(--phone-accent) 60%, #000)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px; } .chat-head .nm { color: var(--screen-text); font-weight: 700; font-size: 15px; line-height: 1.2; } .chat-head .st { color: var(--phone-accent); font-size: 12px; font-weight: 500; } .msgs { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; background-image: var(--phone-dotted); background-size: 18px 18px; } .daydiv { align-self: center; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--screen-sub); background: color-mix(in oklab, var(--chat-bg) 70%, #000 6%); padding: 3px 10px; border-radius: 20px; } .bubble { align-self: flex-start; max-width: 88%; background: var(--bubble-bot); border-radius: 4px 16px 16px 16px; padding: 11px 14px; color: var(--screen-text); box-shadow: var(--shadow-card); } .bubble .t { font-size: 14.5px; font-weight: 700; margin-bottom: 3px; } .bubble .s { font-size: 13.5px; color: var(--screen-sub); line-height: 1.45; } .task { align-self: flex-start; width: 90%; background: var(--task-bg); border-radius: 4px 16px 16px 16px; padding: 12px 13px 10px; color: var(--screen-text); box-shadow: var(--shadow-card); border-left: 3px solid var(--phone-accent); } .task .tag { font-size: 11.5px; font-weight: 700; color: var(--phone-accent); margin-bottom: 5px; letter-spacing: 0.02em; } .task .ti { font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; } .task .src { font-size: 12.5px; color: var(--screen-sub); margin-bottom: 11px; } .task .acts { display: flex; gap: 6px; } .task .acts .b { flex: 1; text-align: center; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; background: var(--sbtn-bg); border: 1px solid var(--sbtn-border); color: var(--screen-text); white-space: nowrap; } .task .acts .b.done { flex: 0 0 auto; } .task .acts .b.snooze { flex: 0 0 auto; } .task .acts .b.primary { background: var(--phone-accent); border: none; color: #fff; } .peek { align-self: flex-start; width: 90%; background: var(--task-bg); border-radius: 14px; padding: 11px 13px; color: var(--screen-text); box-shadow: var(--shadow-card); opacity: 0.55; } .peek .tag { font-size: 11.5px; font-weight: 700; color: var(--screen-sub); margin-bottom: 4px; } .peek .ti { font-size: 14.5px; font-weight: 600; } /* =========================================================== PROBLEM — chat fragments that slipped away =========================================================== */ .prob-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 48px; } @media (min-width: 760px) { .prob-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } } .prob-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 18px; } .prob-frag { background: var(--bubble-bot, var(--card-bg-2)); border-radius: 4px 14px 14px 14px; padding: 11px 13px; font-size: 14.5px; line-height: 1.4; color: var(--text); align-self: flex-start; max-width: 92%; box-shadow: var(--shadow-card); } html[data-theme="native"] .prob-frag { background: #eef3f8; } .prob-frag .who { display: block; font-size: 11.5px; font-weight: 700; color: var(--accent); margin-bottom: 3px; } .prob-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-dim); } .prob-status .x { color: #ef5b6e; font-weight: 700; } .prob-card h3 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .prob-card p { font-size: 14.5px; line-height: 1.5; color: var(--text-muted); margin: 0; } /* =========================================================== HOW IT WORKS — 3 steps =========================================================== */ .steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 48px; counter-reset: step; } @media (min-width: 880px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .step { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 30px 26px; } .step .num { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; font-weight: 800; color: var(--on-accent); background: var(--accent-grad); margin-bottom: 20px; } .step h3 { font-size: 21px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; } .step p { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 0; } .step .arrow { display: none; } @media (min-width: 880px) { .step .arrow { display: block; position: absolute; top: 50px; right: -14px; color: var(--text-dim); font-size: 24px; z-index: 2; } .step:last-child .arrow { display: none; } } /* =========================================================== WHAT IT FINDS — example task cards =========================================================== */ .finds-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 48px; } @media (min-width: 620px) { .finds-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .finds-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } .find { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 24px 24px 22px; transition: transform .25s var(--ease), border-color .25s; } .find:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--accent) 45%, var(--card-border)); box-shadow: 0 24px 50px -28px var(--glow-2), 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent); } .prob-card, .step { transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; } .prob-card:hover, .step:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--accent) 30%, var(--card-border)); box-shadow: 0 24px 50px -30px var(--glow-2); } .find-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .find-cat { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); } .find-src { font-size: 13px; color: var(--text-dim); } .find h3 { font-size: 19px; font-weight: 700; margin: 0 0 14px; letter-spacing: -0.01em; line-height: 1.25; } .find-acts { display: flex; gap: 8px; flex-wrap: wrap; } .find-acts .b { font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 10px; background: var(--card-bg-2); border: 1px solid var(--card-border); color: var(--text-muted); white-space: nowrap; } .find-acts .b.primary { background: var(--accent); border: none; color: var(--on-accent); } /* =========================================================== PRICE =========================================================== */ .price-wrap { margin-top: 52px; display: flex; justify-content: center; } .price-card { position: relative; width: 100%; max-width: 520px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 28px; padding: 40px 34px 36px; overflow: hidden; } .price-card .pglow { position: absolute; top: -120px; right: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--glow-2), transparent 65%); filter: blur(10px); pointer-events: none; } .price-card .free { position: relative; z-index: 1; } .price-free-label { font-size: 15px; font-weight: 600; color: var(--text-muted); } .price-big { font-family: var(--font-display); font-size: clamp(38px, 7vw, 54px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin: 6px 0 4px; } .price-then { font-size: 16px; color: var(--text-muted); margin-bottom: 26px; } .price-then b { color: var(--text); font-weight: 700; } .price-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 13px; } .price-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; color: var(--text); line-height: 1.4; } .price-list .ck { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 800; margin-top: 1px; } html[data-theme="hybrid"] .price-list .ck, html[data-theme="dark"] .price-list .ck { color: #fff; background: var(--accent-grad); } .price-card .btn-primary { width: 100%; } .price-card .stars { color: #f5c518; } /* =========================================================== FINAL CTA =========================================================== */ .final { position: relative; overflow: hidden; text-align: center; } .final .glow1 { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 640px; height: 420px; background: radial-gradient(circle, var(--glow-1), transparent 65%); filter: blur(20px); pointer-events: none; } .final-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 16px 0; } .final h2 { font-family: var(--font-display); font-size: clamp(30px, 5.6vw, 50px); font-weight: var(--weight-head); letter-spacing: -0.035em; line-height: 1.08; margin: 0; max-width: 16ch; text-wrap: balance; } .final h2 .accent { color: var(--accent-2); } html[data-theme="hybrid"] .final h2 .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* =========================================================== FOOTER =========================================================== */ .footer { border-top: 1px solid var(--hairline); padding: 36px 0 44px; } .footer-inner { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; justify-content: space-between; } @media (min-width: 620px) { .footer-inner { flex-direction: row; align-items: center; } } .footer .muted { font-size: 14px; color: var(--text-dim); } .footer .flink { font-size: 14.5px; font-weight: 600; color: var(--text-muted); transition: color .2s; } .footer .flink:hover { color: var(--accent); } /* =========================================================== ANIMATIONS — gated behind html.anim (set only when CSS transitions/ animations actually advance) + reduced-motion. End state is the base style, so content is never trapped hidden when animation is off. =========================================================== */ @media (prefers-reduced-motion: no-preference) { /* hero phone — gentle float */ html.anim .phone { animation: cu-float 7s ease-in-out infinite; } /* hero phone — bot messages arrive one by one */ html.anim .phone .daydiv, html.anim .phone .bubble, html.anim .phone .task { opacity: 0; animation: cu-msg .55s var(--ease) forwards; } html.anim .phone .daydiv { animation-delay: .35s; } html.anim .phone .bubble { animation-delay: .6s; } html.anim .phone .task { animation-delay: .9s; } html.anim .phone .peek { opacity: 0; animation: cu-msg-peek .55s var(--ease) .85s forwards; } /* task action chips pop in just after the card */ html.anim .phone .task .acts .b { opacity: 0; animation: cu-msg .4s var(--ease) forwards; } html.anim .phone .task .acts .b:nth-child(1) { animation-delay: 1.2s; } html.anim .phone .task .acts .b:nth-child(2) { animation-delay: 1.3s; } html.anim .phone .task .acts .b:nth-child(3) { animation-delay: 1.4s; } /* hybrid accent — slow gradient drift */ html.anim[data-theme="hybrid"] .hero h1 .accent, html.anim[data-theme="hybrid"] .final h2 .accent { background-size: 220% auto; animation: cu-shimmer 7s linear infinite; } /* hero glow orbs — slow breathing */ html.anim .hero .glow1 { animation: cu-breathe 11s ease-in-out infinite; } html.anim .hero .glow2 { animation: cu-breathe 13s ease-in-out infinite reverse; } /* step number badges — subtle pop as the row reveals */ html.anim .step.in .num { animation: cu-pop .5s var(--ease) both; } } @keyframes cu-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes cu-msg { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes cu-msg-peek{ from { opacity: 0; transform: translateY(10px); } to { opacity: .55; transform: none; } } @keyframes cu-shimmer { to { background-position: 220% center; } } @keyframes cu-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } } @keyframes cu-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } /* =========================================================== 2026 UPGRADE — grid backdrop, aurora, phone stat, marquee, bento =========================================================== */ /* faint fading grid behind hero */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: 62px 62px; -webkit-mask-image: radial-gradient(115% 75% at 72% 8%, #000 0%, transparent 62%); mask-image: radial-gradient(115% 75% at 72% 8%, #000 0%, transparent 62%); opacity: .6; } .hero .glow3 { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(30px); top: 6%; left: 38%; width: 420px; height: 420px; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 30%, transparent), transparent 65%); } /* floating glass stat chip over the phone */ .phone { position: relative; } .phone-stat { position: absolute; z-index: 4; bottom: 104px; left: -42px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: 14px; background: color-mix(in oklab, var(--bg) 70%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--card-border); box-shadow: 0 18px 40px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); } html[data-theme="native"] .phone-stat { background: rgba(255,255,255,.86); box-shadow: 0 18px 40px -22px rgba(30,50,90,.4); } .phone-stat .ps-ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-grad); color: #fff; font-size: 16px; } .phone-stat .ps-n { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: -.02em; } .phone-stat .ps-l { font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin-top: 3px; } .phone-stat .ps-live { width: 7px; height: 7px; border-radius: 50%; background: #2ecc8f; box-shadow: 0 0 0 0 rgba(46,204,143,.6); margin-left: 2px; } @media (prefers-reduced-motion: no-preference) { html.anim .phone-stat .ps-live { animation: cu-ping 1.8s ease-out infinite; } } @media (max-width: 520px) { .phone-stat { left: -8px; bottom: 90px; padding: 8px 12px; } .phone-stat .ps-ic { width: 30px; height: 30px; } } /* ---------- MARQUEE — messages slipping away ---------- */ .marquee-band { padding: 26px 0 6px; position: relative; z-index: 1; } .marquee-label { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; } .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent); mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent); } .marquee + .marquee { margin-top: 12px; } .marquee-track { display: flex; gap: 13px; width: max-content; padding: 4px 6px; } @media (prefers-reduced-motion: no-preference) { html.anim .marquee-track { animation: cu-marq 46s linear infinite; } html.anim .marquee.rev .marquee-track { animation-duration: 54s; animation-direction: reverse; } html.anim .marquee:hover .marquee-track { animation-play-state: paused; } } .mfrag { flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 8px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px 16px 16px 16px; padding: 11px 16px; font-size: 14.5px; color: var(--text-muted); box-shadow: var(--shadow-card); white-space: nowrap; } .mfrag .who { font-size: 11.5px; font-weight: 700; color: var(--accent); opacity: .9; } .mfrag.lost { opacity: .5; } .mfrag.lost .who { color: var(--text-dim); } /* ---------- BENTO — what it finds ---------- */ .finds-bento { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 48px; } @media (min-width: 720px) { .finds-bento { grid-template-columns: repeat(2, 1fr); gap: 18px; } .find-lead { grid-column: span 2; } } @media (min-width: 1000px) { .finds-bento { grid-template-columns: 1.08fr 1fr 1fr; gap: 20px; } .find-lead { grid-column: 1; grid-row: span 2; } } .find-lead { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 55%), var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 26px 24px; display: flex; flex-direction: column; } .find-lead::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 55%, transparent), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .lead-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .lead-head .lh-ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 19px; background: var(--accent-grad); color: #fff; box-shadow: 0 10px 24px -12px var(--glow-2); } .lead-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; } .lead-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; font-weight: 600; } .lead-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .lead-list li { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 9px; font-size: 14.5px; line-height: 1.35; color: var(--text); } .lead-list .d { width: 8px; height: 8px; border-radius: 50%; align-self: center; } .lead-list .d1 { background: #2AABEE; } .lead-list .d2 { background: #7C3AED; } .lead-list .d3 { background: #f5a623; } .lead-list .d4 { background: #2ecc8f; } .lead-list .lc { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .lead-foot { font-size: 12.5px; color: var(--text-dim); padding-top: 16px; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: 8px; } .lead-foot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2ecc8f; } @keyframes cu-marq { to { transform: translateX(-50%); } } @keyframes cu-ping { 0% { box-shadow: 0 0 0 0 rgba(46,204,143,.55); } 70%,100% { box-shadow: 0 0 0 9px rgba(46,204,143,0); } } @keyframes cu-shine { to { transform: translateX(130%); } } @media (prefers-reduced-motion: no-preference) { html.anim .btn-primary:hover::after { animation: cu-shine .75s ease; } }