/* Theme tokens live in theme.css — the real dashboard's Dracula/Alucard palette (theme.js drives the toggle).
   lan-v1 is the LANDING page: same Flow-Board grid paper, now a FULL-SCREEN, no-scroll hero (one viewport,
   like the app mocks) — topbar, a cinematic aurora stage (dashboard shot + copy), and a compact feature strip
   pinned to the bottom. Umbrella brand accent = PURPLE (dashboard is red, finance is green). The "screenshot"
   is a self-contained fake-data dashboard (public copy of the dash-v2 mock at /landing/demo/, no API/auth),
   embedded as a scaled, non-interactive live iframe — never the protected real /dashboard. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    color: var(--fg); font-family: var(--font-ui); min-height: 100vh;
    background:
      linear-gradient(rgba(49, 51, 65, .30) 1px, transparent 1px),
      linear-gradient(90deg, rgba(49, 51, 65, .30) 1px, transparent 1px),
      radial-gradient(1100px 520px at 85% -10%, rgba(189, 147, 249, 0.08), transparent 60%),
      radial-gradient(900px 450px at 5% -6%, rgba(139, 233, 253, 0.05), transparent 60%),
      var(--bg-deep);
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
    background-attachment: fixed;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--cur-line); border-radius: 8px; }
a { color: var(--purple); }
code { font-family: var(--font-mono); font-size: .9em; background: color-mix(in srgb, var(--purple) 12%, transparent); padding: .05em .35em; border-radius: 5px; }

/* ── Full-screen shell: one viewport, no page scroll ── */
.page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

/* ── Topbar ── */
.topbar {
    flex: 0 0 auto; position: relative; z-index: 20;
    display: flex; align-items: center; gap: 22px; padding: 12px 26px;
    background: var(--header-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--bg-line);
}
.topbar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--purple) 0%, color-mix(in srgb, var(--cyan) 50%, transparent) 45%, transparent 90%);
    pointer-events: none;
}
.brand { font-family: var(--font-mono); font-weight: 700; font-size: .82rem; letter-spacing: .12em; color: var(--comment); white-space: nowrap; }
.brand-v { color: var(--purple); }
.topbar-spacer { flex: 1; }

/* prominent top-right login button (the one thing singled out) */
.login-cta {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
    font-family: var(--font-ui); font-weight: 700; font-size: .8rem; text-decoration: none;
    background: var(--purple); color: #1e2029;
    padding: .5rem 1.15rem; border-radius: 99px;
    box-shadow: 0 2px 14px color-mix(in srgb, var(--purple) 40%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}
.login-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 22px color-mix(in srgb, var(--purple) 55%, transparent); }

/* ── Stage: the aurora "screen" that fills the viewport under the topbar ── */
.stage {
    position: relative; isolation: isolate;
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    margin: clamp(12px, 1.6vw, 22px);
    padding: clamp(24px, 3.2vw, 56px);
    gap: clamp(18px, 2.6vh, 36px);
    overflow: hidden;
}

/* the drifting aurora + framed panel, clipped to its rounded box (fills the whole stage) */
.hero-bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    border: 1px solid var(--bg-line); border-radius: 24px;
    background:
        radial-gradient(120% 130% at 50% -20%, color-mix(in srgb, var(--purple) 12%, transparent), transparent 55%),
        color-mix(in srgb, var(--bg-deep) 60%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 30px 80px -40px var(--shadow-color);
}
.aurora { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.a1 { width: 540px; height: 540px; top: -160px; left: -90px;
      background: radial-gradient(circle, var(--purple), transparent 68%); animation: drift1 26s ease-in-out infinite alternate; }
.a2 { width: 480px; height: 480px; bottom: -180px; right: -70px; opacity: .42;
      background: radial-gradient(circle, var(--cyan), transparent 68%); animation: drift2 30s ease-in-out infinite alternate; }
.a3 { width: 400px; height: 400px; top: 8%; right: 34%; opacity: .32;
      background: radial-gradient(circle, var(--pink), transparent 68%); animation: drift3 34s ease-in-out infinite alternate; }
.hero-glow { position: absolute; inset: 0;
    background: radial-gradient(70% 50% at 50% -8%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 70%); }
.hero-vignette { position: absolute; inset: 0;
    background: radial-gradient(130% 100% at 50% 40%, transparent 52%, color-mix(in srgb, #000 26%, transparent)); }
@keyframes drift1 { to { transform: translate(70px, 50px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-60px, -40px) scale(1.1); } }
@keyframes drift3 { to { transform: translate(40px, -50px) scale(1.2); } }

/* ── Hero: copy + product shot, centred in the stage ── */
.hero {
    position: relative; z-index: 1;
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: clamp(28px, 4vw, 64px);
}
.hero-copy { position: relative; z-index: 1; flex: 1 1 360px; min-width: 300px; max-width: 560px; }
.hero-copy > * { animation: heroUp .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-title { animation-delay: .08s; }
.lede { animation-delay: .16s; }
.trust { animation-delay: .24s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.eyebrow {
    font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--purple); margin-bottom: 18px;
    display: inline-flex; align-items: center;
}
.eb-dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 9px; background: var(--purple);
    box-shadow: 0 0 10px var(--purple); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.hero-title {
    font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -.03em;
    margin: 0 0 22px; font-weight: 700; text-wrap: balance;
}
.grad { color: var(--purple); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .grad {
        background: linear-gradient(100deg, var(--purple), var(--cyan), var(--pink), var(--purple));
        background-size: 220% 100%;
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
        animation: gradShift 9s linear infinite;
    }
}
@keyframes gradShift { to { background-position: 200% 50%; } }

.lede {
    font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.58;
    color: color-mix(in srgb, var(--fg) 82%, var(--comment)); max-width: 48ch; margin: 0 0 8px;
}
.trust { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.trust span {
    font-family: var(--font-mono); font-size: .64rem; letter-spacing: .05em; color: var(--comment);
    border: 1px solid var(--bg-line); background: var(--control-bg); padding: .42rem .8rem; border-radius: 99px;
}

/* ── Screenshot frame (real dash-v2 mock, scaled + non-interactive) ── */
/* the screenshot is a static picture — no link, no hover affordance */
.shot {
    display: block; margin: 0;
    border: 1px solid var(--bg-line); border-radius: 14px; overflow: hidden;
    background: var(--bg-card); box-shadow: 0 12px 34px var(--shadow-color);
}
.shot-chrome {
    display: flex; align-items: center; gap: 7px; padding: 9px 13px;
    border-bottom: 1px solid var(--bg-line); background: var(--control-bg);
}
.shot-chrome .dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.r { background: var(--red); } .dot.y { background: var(--yellow); } .dot.g { background: var(--green); }
.shot-url { margin-left: 8px; font-family: var(--font-mono); font-size: .66rem; color: var(--comment); }
/* clip box: --bg-deep so any sub-pixel seam reads as the mock's own background, never a gap */
.shot-view { position: relative; overflow: hidden; background: var(--bg-deep); }
.shot-view iframe { position: absolute; top: 0; left: 0; width: 1600px; height: 1000px; border: 0; transform-origin: top left; pointer-events: none; }

/* hero shot: grand, floating, tilted "hero product" showcase (box + iframe scale share ratio 1.6) */
.shot-hero {
    position: relative; z-index: 1; flex: 0 0 auto; width: 600px; max-width: 100%;
    transform: perspective(1500px) rotateY(-8deg) rotateX(3deg);
    box-shadow: 0 45px 90px -30px color-mix(in srgb, var(--purple) 55%, transparent),
                0 20px 50px -20px var(--shadow-color);
    animation: heroFloat 7s ease-in-out infinite, heroFadeIn 1s ease .12s both;
}
.shot-hero .shot-view { height: 375px; }
.shot-hero .shot-view iframe { transform: scale(0.375); }
@keyframes heroFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Feature strip: the 5 features, condensed, pinned to the bottom of the stage ── */
.feature-strip {
    position: relative; z-index: 1; flex: 0 0 auto;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1vw, 16px);
}
.fstrip-item {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 16px; border-radius: 12px;
    background: color-mix(in srgb, var(--bg-card) 68%, transparent);
    border: 1px solid var(--bg-line);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 18px -8px var(--shadow-color);
}
.fs-num { font-family: var(--font-mono); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); }
.fs-name { font-size: .85rem; font-weight: 700; letter-spacing: -.01em; }
.fs-desc { font-size: .72rem; color: var(--comment); line-height: 1.35; }

/* purple-on-purple contrast: dark text on light Dracula lavender pill */
:root[data-theme="alucard"] .login-cta { color: #fff8ec; }

/* calmer stage + aurora in light mode (Alucard's accents are darker) */
:root[data-theme="alucard"] .hero-bg { background:
    radial-gradient(120% 130% at 50% -20%, color-mix(in srgb, var(--purple) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-card) 55%, transparent); }
:root[data-theme="alucard"] .aurora { opacity: .26; }
:root[data-theme="alucard"] .hero-vignette { background:
    radial-gradient(130% 100% at 50% 40%, transparent 60%, color-mix(in srgb, var(--cur-line) 12%, transparent)); }

/* ── Shorter viewports (laptops ~768px tall): trim paddings + shot so it still fits one screen ── */
@media (max-height: 780px) {
    .stage { padding: clamp(16px, 2.2vw, 34px); gap: 16px; }
    .hero { gap: clamp(24px, 3vw, 44px); }
    .hero-title { font-size: clamp(2rem, 4.2vw, 3.3rem); margin-bottom: 16px; }
    .lede { margin-bottom: 4px; }
    .trust { margin-top: 18px; }
    .shot-hero { width: 520px; }
    .shot-hero .shot-view { height: 325px; }
    .shot-hero .shot-view iframe { transform: scale(0.325); }
    .fstrip-item { padding: 11px 14px; }
}

/* ── Narrow screens: give up single-viewport, let it scroll, stack the hero ── */
@media (max-width: 760px) {
    .page { height: auto; min-height: 100dvh; overflow: visible; }
    .stage { margin: 12px; padding: 30px 20px; gap: 26px; overflow: visible; }
    .hero { flex-direction: column; align-items: flex-start; gap: 30px; }
    .hero-title { font-size: clamp(2rem, 9vw, 2.8rem); }
    .shot-hero { transform: none; width: min(100%, 320px); animation: heroFadeIn 1s ease .12s both; }
    .shot-hero .shot-view { height: 200px; }
    .shot-hero .shot-view iframe { transform: scale(0.2); }
    .feature-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .stage { margin: 8px; padding: 24px 16px; }
    .hero-copy { min-width: 0; }
    .feature-strip { grid-template-columns: 1fr; width: 100%; }
}

/* respect reduced-motion: hold the drift / float / shimmer / entrance still */
@media (prefers-reduced-motion: reduce) {
    .aurora, .grad, .eb-dot, .hero-copy > *, .shot-hero { animation: none !important; }
    .grad { background-position: 0 50%; }
}

/* ── Keep the Flow-Board grid paper in light mode too (beats theme.css's cream !important) ── */
html:root[data-theme="alucard"] body {
    background:
        linear-gradient(rgba(108, 102, 75, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108, 102, 75, .16) 1px, transparent 1px),
        radial-gradient(1100px 520px at 85% -10%, color-mix(in srgb, var(--purple) 8%, transparent), transparent 60%),
        radial-gradient(900px 450px at 5% -6%, color-mix(in srgb, var(--cyan) 5%, transparent), transparent 60%),
        var(--bg-deep) !important;
    background-size: 42px 42px, 42px 42px, auto, auto, auto !important;
    background-attachment: fixed !important;
}