/* ============================================================================
   Marketing landing page — evolved-cinematic styling.
   Scoped under .mkt so it never leaks into the app. Builds on theme.css tokens.
   ========================================================================== */

/* The app pins html/body to height:100% (it scrolls inside an inner container).
   The marketing page scrolls the document itself, so let it grow to content. */
html:has(.mkt), body:has(.mkt) { height: auto; min-height: 100%; }

.mkt {
    --ink: #0c0d10;
    --ink-soft: #15171c;
    --paper: #f6f5f2;
    --paper-2: #ffffff;
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
.mkt * { box-sizing: border-box; }

/* ---- typographic scale (independent of app text-* so it reads big) ---- */
.mkt-h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 0.98; letter-spacing: -0.025em; font-weight: 800; margin: 0; }
.mkt-h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.02; letter-spacing: -0.022em; font-weight: 800; margin: 0; }
.mkt-h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.1; letter-spacing: -0.015em; font-weight: 700; margin: 0; }
.mkt-lead { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.5; font-weight: 400; }
.mkt-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.mkt-kicker { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.55; }
.mkt-wrap { width: min(1180px, 92vw); margin: 0 auto; }
.mkt-narrow { width: min(820px, 92vw); margin: 0 auto; }

/* gradient animated headline text */
.mkt-grad {
    background: linear-gradient(108deg, #4cc3ff, #37ffbc 38%, #ffd23f 72%, #ff9e3d);
    background-size: 280% 280%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: mkt-grad 9s ease-in-out infinite;
}
@keyframes mkt-grad { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---- blades ---- */
.mkt-blade { position: relative; padding: clamp(64px, 9vw, 130px) 0; }
.mkt-blade[id] { scroll-margin-top: 72px; }
.mkt-blade.dark { background: var(--ink); color: #eef0f4; }
.mkt-blade.darker { background: #07080a; color: #eef0f4; }
.mkt-blade.light { background: var(--paper); }
.mkt-blade.white { background: var(--paper-2); }
.mkt-blade.dark .mkt-muted, .mkt-blade.darker .mkt-muted { color: #aab2c0; }
.mkt-muted { color: #5a5f6a; }

/* soft accent glows */
.mkt-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; pointer-events: none; z-index: 0; }

/* ---- reveal ---- */
.mkt-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.mkt-reveal.in { opacity: 1; transform: none; }

/* ---- buttons (marketing-specific, glossy) ---- */
.mkt-cta { display: inline-flex; align-items: center; gap: 0.5em; border: 0; cursor: pointer; font-weight: 700; font-size: 1rem; padding: 0.85em 1.5em; border-radius: 999px; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.mkt-cta:active { transform: translateY(1px) scale(0.99); }
.mkt-cta-yellow { background: linear-gradient(180deg, #ffd84d, #ffc40f); color: #1a1400; box-shadow: 0 10px 26px -10px rgba(255,200,30,0.8); }
.mkt-cta-yellow:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(255,200,30,0.95); }
.mkt-cta-light { background: #fff; color: #0c0d10; box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5); }
.mkt-cta-light:hover { transform: translateY(-2px); }
.mkt-cta-ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; opacity: 0.85; }
.mkt-cta-ghost:hover { opacity: 1; transform: translateY(-2px); }

/* ---- browser frame for screenshots ---- */
.mkt-browser { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 40px 80px -30px rgba(8,12,24,0.55), 0 8px 22px -12px rgba(8,12,24,0.35); }
.mkt-browser-bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: #f1f1ef; border-bottom: 1px solid rgba(0,0,0,0.06); }
.mkt-dot { width: 11px; height: 11px; border-radius: 50%; }
.mkt-browser-url { margin-left: 10px; flex: 1 1; height: 19px; border-radius: 6px; background: #e3e3df; max-width: 320px; display: flex; align-items: center; padding: 0 10px; font-size: 11px; color: #8a8a86; }
.mkt-browser img { width: 100%; display: block; }
.mkt-browser.dark { border-color: rgba(255,255,255,0.1); }
.mkt-browser.dark .mkt-browser-bar { background: #1a1c22; border-bottom-color: rgba(255,255,255,0.06); }
.mkt-browser.dark .mkt-browser-url { background: #2a2d35; color: #9aa0ad; }

/* phone frame */
.mkt-phone { border-radius: 34px; padding: 8px; background: #111317; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.08); }
.mkt-phone img { width: 100%; display: block; border-radius: 26px; }

/* floating motion for hero collage */
.mkt-float { animation: mkt-float 7s ease-in-out infinite; }
.mkt-float.slow { animation-duration: 10s; }
.mkt-float.delay { animation-delay: -3s; }
@keyframes mkt-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* feature tile */
.mkt-tile { background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.06); border-radius: 18px; padding: 22px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; height: 100%; }
.mkt-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(8,12,24,0.4); }
.mkt-blade.dark .mkt-tile, .mkt-blade.darker .mkt-tile { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.mkt-blade.dark .mkt-tile:hover, .mkt-blade.darker .mkt-tile:hover { background: rgba(255,255,255,0.07); }

/* stat */
.mkt-stat-num { font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }

/* sticky header */
.mkt-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background 0.3s ease, box-shadow 0.3s ease, -webkit-backdrop-filter 0.3s ease; transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease; }
.mkt-header.solid { background: rgba(246,245,242,0.82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.mkt-navlink { color: inherit; text-decoration: none; opacity: 0.75; font-weight: 600; font-size: 0.95rem; transition: opacity 0.15s ease; }
.mkt-navlink:hover { opacity: 1; }

/* marquee */
.mkt-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mkt-marquee-track { display: inline-flex; gap: 14px; white-space: nowrap; animation: mkt-marquee 30s linear infinite; }
@keyframes mkt-marquee { to { transform: translateX(-50%); } }
.mkt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); font-weight: 600; font-size: 0.92rem; }

/* hero */
.mkt-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; padding: 120px 0 0; }
/* overscanned so it can be parallaxed without revealing edges */
.mkt-hero-video { position: absolute; top: -25%; left: 0; width: 100%; height: 150%; object-fit: cover; z-index: 0; will-change: transform; }
.mkt-hero-veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 50% 10%, rgba(8,10,20,0.35), rgba(6,8,16,0.82) 70%), linear-gradient(180deg, rgba(6,8,16,0.5), rgba(6,8,16,0.2) 35%, rgba(6,8,16,0.95)); }
.mkt-hero-inner { position: relative; z-index: 2; }

.mkt-badge-soft { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 0.85rem; font-weight: 600; }

/* hero collage */
.mkt-collage { position: relative; z-index: 2; width: min(1100px, 94vw); margin: clamp(28px, 4vw, 56px) auto -8vw; }
.mkt-collage-main { position: relative; z-index: 3; }
.mkt-collage-side { position: absolute; width: 30%; z-index: 2; opacity: 0.96; }
.mkt-collage-side.left { left: -7%; bottom: 8%; }
.mkt-collage-side.right { right: -7%; bottom: 16%; }

/* score/feature accent dot row */
.mkt-acc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

@media (max-width: 760px) {
    .mkt-collage-side { display: none; }
    .mkt-hero { min-height: 92vh; }
    .mkt-header-nav { display: none !important; }
}