/* Horus Trader — public marketing page (/welcome).
   Night-watch terminal luxury: deep black, layered gold glow, mono details.
   Consumes brand.css tokens; everything here is namespaced .lp- except the
   pricing-card contract classes (price-card, price, per, permo, save) that
   the landing template + tests rely on. */

.lp {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.lp h1, .lp h2, .lp h3 { font-family: var(--font-disp); margin: 0; }
.lp a { color: inherit; text-decoration: none; }

/* ---------------- reveal-on-scroll ---------------- */
.lp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.lp-reveal.in { opacity: 1; transform: none; }
.lp-d1 { transition-delay: .08s; } .lp-d2 { transition-delay: .16s; }
.lp-d3 { transition-delay: .24s; } .lp-d4 { transition-delay: .34s; }

/* ---------------- buttons ---------------- */
.lp-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: var(--font-disp);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    white-space: nowrap;
}
.lp-btn-big { padding: 14px 28px; font-size: 15px; border-radius: 12px; }
.lp-btn-gold {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    color: #16130a;
    box-shadow: 0 6px 24px -8px rgba(232, 180, 84, .55);
}
.lp-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 32px -8px rgba(232, 180, 84, .7); }
.lp-btn-ghost { border-color: var(--border-2); color: var(--fg); background: rgba(255,255,255,.02); }
.lp-btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }

/* ---------------- nav ---------------- */
.lp-nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 28px;
    padding: 14px clamp(18px, 5vw, 56px);
    background: var(--header-bg);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.lp-nav-brand { display: flex; align-items: center; gap: 14px; font-family: var(--font-disp); font-weight: 700; font-size: 23px; letter-spacing: .02em; }
.lp-nav-brand em { font-style: normal; color: var(--gold); }
.lp-nav-brand img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(232, 180, 84, .3)); }
.lp-nav-links { display: flex; gap: 24px; margin-left: auto; }
.lp-nav-links a { color: var(--fg-dim); font-size: 14px; font-weight: 500; transition: color .15s; }
.lp-nav-links a:hover { color: var(--gold-bright); }
.lp-nav-cta { display: flex; gap: 10px; }
@media (max-width: 760px) { .lp-nav-links { display: none; } .lp-nav-cta { margin-left: auto; } }

/* ---------------- hero ---------------- */
.lp-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(64px, 10vh, 130px) clamp(18px, 5vw, 56px) clamp(56px, 8vh, 110px);
}
@media (max-width: 900px) { .lp-hero { grid-template-columns: 1fr; } }

.lp-hero-glow {
    position: absolute; inset: -40% -20% auto -20%; height: 130%;
    background:
        radial-gradient(46% 42% at 68% 22%, rgba(232,180,84,.16), transparent 70%),
        radial-gradient(38% 40% at 18% 8%, rgba(232,180,84,.08), transparent 70%);
    pointer-events: none;
}
.lp-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(232,180,84,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232,180,84,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
    mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
    pointer-events: none;
}

.lp-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 18px;
}
.lp-hero h1 {
    font-size: clamp(38px, 5.4vw, 62px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
}
.lp-gold-grad {
    background: linear-gradient(92deg, var(--gold-bright) 10%, var(--gold) 55%, #b07d18 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lp-sub { max-width: 46ch; color: var(--fg-dim); font-size: 17px; margin: 22px 0 0; }
.lp-sub strong { color: var(--fg); }
.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.lp-trust { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 22px; }

/* hero terminal mock */
.lp-term {
    background: linear-gradient(180deg, var(--bg-card), var(--bg-panel));
    border: 1px solid var(--border-2);
    border-radius: 16px;
    box-shadow: var(--card-shadow), 0 30px 80px -30px rgba(0,0,0,.85);
    overflow: hidden;
    transform: rotate(1.2deg);
}
@media (max-width: 900px) { .lp-term { transform: none; max-width: 480px; margin: 0 auto; } }
.lp-term-head {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.lp-term-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); }
.lp-term-dot:first-child { background: rgba(232,180,84,.75); }
.lp-term-title { margin-left: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-dim); letter-spacing: .06em; }
.lp-spark { display: block; width: 100%; height: auto; }
.lp-spark-line {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: lp-draw 2.6s ease-out .5s forwards;
}
.lp-spark-fill { opacity: 0; animation: lp-fade 1.2s ease-out 2.2s forwards; }
@keyframes lp-draw { to { stroke-dashoffset: 0; } }
@keyframes lp-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .lp-spark-line { stroke-dashoffset: 0; animation: none; }
    .lp-spark-fill { opacity: 1; animation: none; }
}
.lp-term-rows { padding: 8px 18px 16px; }
.lp-term-rows > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 12.5px;
}
.lp-term-rows > div:first-child { border-top: 0; }
.lp-term-rows span { color: var(--faint); }
.lp-term-rows b { font-weight: 500; color: var(--fg); }
.lp-green { color: var(--green) !important; }
.lp-red { color: var(--red) !important; }
.lp-gold-text { color: var(--gold-bright) !important; }

/* ---------------- sections ---------------- */
.lp-section {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(56px, 9vh, 110px) clamp(18px, 5vw, 56px);
}
.lp-section h2 {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    max-width: 24em;
}
.lp-section-sub { color: var(--fg-dim); margin: 14px 0 0; max-width: 52ch; }
.lp-section-alt {
    max-width: none;
    background: linear-gradient(180deg, transparent, rgba(232,180,84,.03) 18%, rgba(232,180,84,.03) 82%, transparent);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.lp-section-alt > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.lp-section-alt > .lp-eyebrow { margin-bottom: 18px; }
.lp-br { display: none; }
@media (min-width: 700px) { .lp-br { display: block; } }

/* ---------------- features ---------------- */
.lp-feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 44px;
}
.lp-feat {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 20px 20px;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.lp-feat:hover {
    transform: translateY(-4px);
    border-color: rgba(232,180,84,.45);
    box-shadow: 0 18px 44px -22px rgba(232,180,84,.25);
}
.lp-feat-no {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gold);
    letter-spacing: .2em;
}
.lp-feat h3 { font-size: 16.5px; font-weight: 600; margin: 10px 0 8px; }
.lp-feat p { margin: 0; color: var(--fg-dim); font-size: 14px; }

/* ---------------- steps ---------------- */
.lp-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin: 44px auto 0;
    padding: 0;
}
.lp-step {
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px 22px;
}
.lp-step-no {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-family: var(--font-disp); font-weight: 800; font-size: 19px;
    color: #16130a;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    box-shadow: 0 6px 20px -6px rgba(232,180,84,.5);
}
.lp-step h3 { font-size: 17px; font-weight: 600; margin: 16px 0 8px; }
.lp-step p { margin: 0; color: var(--fg-dim); font-size: 14px; }

/* ---------------- pricing ---------------- */
.lp-free-band {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
    margin-top: 44px;
    padding: 26px 28px;
    border-radius: 16px;
    border: 1px solid rgba(232,180,84,.5);
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(232,180,84,.14), transparent 55%),
        var(--bg-card);
    box-shadow: 0 24px 60px -30px rgba(232,180,84,.35);
}
.lp-free-band h3 { font-size: 20px; font-weight: 700; }
.lp-free-band p { margin: 6px 0 0; color: var(--fg-dim); max-width: 52ch; }

.lp-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 18px;
    margin-top: 22px;
}
.price-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 22px 22px;
    text-align: center;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.price-card:hover { transform: translateY(-5px); border-color: var(--border-2); }
.price-card--best {
    border-color: rgba(232,180,84,.65);
    background: linear-gradient(180deg, rgba(232,180,84,.07), transparent 40%), var(--bg-card);
    box-shadow: 0 24px 60px -28px rgba(232,180,84,.4);
}
.price-card--best:hover { border-color: var(--gold); }
.price-card--life { border-style: double; border-width: 3px; border-color: rgba(232,180,84,.35); }
.price-flag {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    padding: 3px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    color: #16130a;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    white-space: nowrap;
}
.price-flag--life { background: var(--bg-panel); color: var(--gold-bright); border: 1px solid rgba(232,180,84,.5); }
.price-card h3 { font-size: 16px; font-weight: 600; color: var(--fg-dim); }
.price {
    font-family: var(--font-disp);
    font-size: 40px; font-weight: 800;
    margin-top: 10px;
    letter-spacing: -0.02em;
}
.price .cur { font-size: 22px; vertical-align: 14px; margin-right: 2px; color: var(--gold); }
.price .unit { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-left: 7px; letter-spacing: .12em; }
.per { font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim); margin-top: 4px; }
.permo { font-size: 13.5px; color: var(--fg); margin-top: 14px; }
.save {
    display: inline-block;
    margin: 8px auto 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(63,185,80,.14);
    color: var(--green);
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
}
.price-card .lp-btn { margin-top: 20px; }
.pricing-fallback { grid-column: 1 / -1; color: var(--fg-dim); }
.pricing-fallback a { color: var(--gold-bright); text-decoration: underline; }
.lp-price-note { margin-top: 26px; font-family: var(--font-mono); font-size: 12px; color: var(--faint); text-align: center; }

/* ---------------- CTA band ---------------- */
.lp-cta-band {
    position: relative;
    text-align: center;
    padding: clamp(64px, 10vh, 120px) clamp(18px, 5vw, 56px);
    border-top: 1px solid var(--border);
    overflow: hidden;
}
.lp-cta-glow {
    position: absolute; inset: auto -20% -70% -20%; height: 150%;
    background: radial-gradient(50% 50% at 50% 100%, rgba(232,180,84,.18), transparent 70%);
    pointer-events: none;
}
.lp-cta-band h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; }
.lp-cta-band p { color: var(--fg-dim); margin: 14px 0 30px; font-size: 16.5px; }

/* ---------------- legal pages (/terms) ---------------- */
.lp-legal {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(48px, 8vh, 90px) clamp(18px, 5vw, 56px) clamp(56px, 9vh, 110px);
}
.lp-legal h1 {
    font-size: clamp(32px, 4.4vw, 46px);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.lp-legal-updated { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin: 10px 0 0; }
.lp-legal-summary {
    margin-top: 34px;
    padding: 24px 26px;
    border-radius: 16px;
    border: 1px solid rgba(232,180,84,.5);
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(232,180,84,.12), transparent 55%),
        var(--bg-card);
}
.lp-legal-summary h2 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.lp-legal-summary p { color: var(--fg-dim); font-size: 14px; margin: 12px 0 0; }
.lp-legal section { margin-top: 40px; }
.lp-legal section h2 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.lp-legal p, .lp-legal li { color: var(--fg-dim); font-size: 15px; }
.lp-legal section p { margin: 14px 0 0; }
.lp-legal ul { margin: 14px 0 0; padding-left: 22px; }
.lp-legal li { margin-top: 8px; }
.lp-legal strong { color: var(--fg); }
.lp-legal a { color: var(--gold-bright); text-decoration: underline; }
.lp-legal-footnote {
    margin-top: 44px;
    padding: 18px 22px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    font-size: 14px;
}

/* ---------------- footer ---------------- */
.lp-footer {
    border-top: 1px solid var(--border);
    padding: 40px clamp(18px, 5vw, 56px) 48px;
    text-align: center;
}
.lp-footer-brand {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-disp); font-weight: 700; font-size: 15px;
}
.lp-footer-brand img { border-radius: 50%; }
.lp-disclaimer { max-width: 66ch; margin: 18px auto 0; color: var(--faint); font-size: 12.5px; }
.lp-copy-line { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.lp-copy-line a { color: var(--fg-dim); }
.lp-copy-line a:hover { color: var(--gold-bright); }