/* ============================================================
   custom.css — Lumavero IA 7.4
   Styles for the burger and mobile menus, the local design
   system, and the bespoke components behind the informational
   one-pager (hero mockup, info box, step blocks, feature cards,
   risk panel and call-to-action). Theme tokens are inherited
   from f3c1aadf.css.
   ============================================================ */

/* ---------- Local design tokens (matched to the template palette) ---------- */
:root {
    --pv-navy: #0b1f3a;
    --pv-navy-2: #0c4a6e;
    --pv-blue: #2563eb;
    --pv-blue-bright: #3b82f6;
    --pv-sky: #eaf2ff;
    --pv-sky-2: #f4f8ff;
    --pv-ink: #16233b;
    --pv-muted: #5b6b85;
    --pv-line: rgba(15, 42, 84, .10);
    --pv-white: #ffffff;
    --pv-bg: #f7f9fc;
    --pv-radius: 18px;
    --pv-radius-sm: 12px;
    --pv-shadow: 0 18px 40px rgba(11, 31, 58, .08);
    --pv-shadow-sm: 0 8px 22px rgba(11, 31, 58, .06);
    --pv-maxw: 1160px;
}

/* ---------- Burger icon (the button element itself is styled by .wnri0p0ehdnl) ---------- */
.hamburger { padding: 0; }

.hamburger__box {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}

.hamburger__line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
}

.hamburger__line:nth-child(1) { top: 0; }
.hamburger__line:nth-child(2) { top: 6px; }
.hamburger__line:nth-child(3) { top: 12px; }

.hamburger.active .hamburger__line:nth-child(1) { top: 6px; transform: rotate(45deg); }
.hamburger.active .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger.active .hamburger__line:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---------- Mobile dropdown panel ---------- */
.mobile-menu__wrap {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 110;
    background: #ffffff;
    border-top: 1px solid rgba(11, 31, 58, 0.08);
    box-shadow: 0 16px 32px rgba(11, 31, 58, 0.12);
}

.mobile-menu__wrap.active { display: block; }
body.menu-open { overflow: hidden; }

/* Opaque sticky header — stops content showing through above dark panels */
.d6zvbip9 {
    background: #ffffff;
}

@media (min-width: 1024px) {
    .mobile-menu__wrap { display: none !important; }
}

/* ============================================================
   Core layout building blocks
   ============================================================ */
.pv-section { padding: 4.5rem 0; }
.pv-section--tight { padding: 3.25rem 0; }
.pv-section--bg { background: var(--pv-bg); }

.pv-container {
    max-width: var(--pv-maxw);
    width: 100%;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.pv-head { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.pv-head--left { margin-left: 0; text-align: left; }

.pv-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pv-blue);
    background: var(--pv-sky);
    border: 1px solid rgba(37, 99, 235, .16);
    padding: .4rem .85rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.pv-h2 {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--pv-navy-2);
    margin: 0 0 1rem;
}

.pv-h3 {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pv-ink);
    margin: 0 0 .5rem;
}

.pv-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--pv-muted);
    margin: 0;
}

.pv-prose p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--pv-muted);
    margin: 0 0 1rem;
}
.pv-prose p:last-child { margin-bottom: 0; }

.pv-brand-blue { color: var(--pv-blue); }

/* ---------- Button styles ---------- */
.pv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--pv-blue-bright), var(--pv-blue));
    border: none;
    border-radius: 999px;
    padding: .9rem 1.7rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.pv-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37, 99, 235, .34); filter: brightness(1.03); }
.pv-btn--lg { padding: 1rem 2.1rem; font-size: 1.05rem; }
.pv-btn--light {
    background: #fff;
    color: var(--pv-blue);
    box-shadow: 0 12px 26px rgba(11, 31, 58, .18);
}

/* ============================================================
   Hero section
   ============================================================ */
.pv-hero {
    position: relative;
    background:
        radial-gradient(1100px 520px at 82% -8%, var(--pv-sky) 0%, rgba(234, 242, 255, 0) 62%),
        linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    overflow: hidden;
    padding: 7rem 0 3.5rem;
}

.pv-hero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.pv-hero__text { width: 100%; max-width: 620px; }

.pv-hero__label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pv-navy-2);
    background: #fff;
    border: 1px solid var(--pv-line);
    padding: .45rem .9rem;
    border-radius: 999px;
    box-shadow: var(--pv-shadow-sm);
    margin-bottom: 1.25rem;
}

.pv-hero__title {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(2.1rem, 5.4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: var(--pv-navy);
    margin: 0 0 1.25rem;
}

.pv-hero__text p {
    font-size: 1.06rem;
    line-height: 1.72;
    color: var(--pv-muted);
    margin: 0 0 1rem;
    max-width: 560px;
}

.pv-hero__actions { margin-top: 1.75rem; }

.pv-hero__visual { width: 100%; max-width: 560px; }

@media (min-width: 1024px) {
    .pv-hero { padding: 8rem 0 4.5rem; }
    .pv-hero__grid {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }
    .pv-hero__text { flex: 0 0 45%; max-width: 45%; }
    .pv-hero__visual { flex: 0 0 55%; max-width: 55%; }
}

/* ---------- Hero mockup: laptop and phone showing neutral market data ---------- */
.pv-mock { position: relative; }

.pv-laptop {
    position: relative;
    background: #fff;
    border: 1px solid var(--pv-line);
    border-radius: 16px;
    box-shadow: var(--pv-shadow);
    padding: 14px 14px 0;
}
.pv-laptop__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 12px;
}
.pv-laptop__bar i {
    width: 9px; height: 9px; border-radius: 50%;
    background: #d7e0ee; display: block;
}
.pv-laptop__bar i:first-child { background: #ffc9c9; }
.pv-laptop__bar i:nth-child(2) { background: #ffe0b3; }
.pv-laptop__bar i:nth-child(3) { background: #c6f0d5; }

.pv-screen {
    background: linear-gradient(180deg, #fbfdff, #f2f7ff);
    border: 1px solid var(--pv-line);
    border-radius: 12px 12px 0 0;
    padding: 16px;
}
.pv-screen__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.pv-screen__title { font-size: .82rem; font-weight: 700; color: var(--pv-navy-2); }
.pv-tag {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pv-blue);
    background: var(--pv-sky);
    border-radius: 999px;
    padding: .25rem .6rem;
}
.pv-chart {
    width: 100%;
    height: 120px;
    display: block;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(59, 130, 246, .07), rgba(59, 130, 246, 0));
}
.pv-rows { margin-top: 14px; display: grid; gap: 8px; }
.pv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--pv-line);
    border-radius: 10px;
    padding: 9px 12px;
}
.pv-row__name { font-size: .8rem; font-weight: 700; color: var(--pv-ink); }
.pv-row__meta { font-size: .7rem; color: var(--pv-muted); }
.pv-spark { width: 54px; height: 18px; display: block; }

.pv-laptop__base {
    height: 12px;
    background: linear-gradient(180deg, #eef2f8, #dfe6f0);
    border-radius: 0 0 12px 12px;
    margin: 0 -6px;
    position: relative;
}
.pv-laptop__base::after {
    content: "";
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%);
    width: 90px; height: 5px;
    background: #cdd7e5;
    border-radius: 0 0 8px 8px;
}

.pv-phone {
    position: absolute;
    right: -6px;
    bottom: -26px;
    width: 118px;
    background: #0b1f3a;
    border-radius: 18px;
    padding: 7px;
    box-shadow: 0 20px 40px rgba(11, 31, 58, .28);
}
.pv-phone__screen {
    background: linear-gradient(180deg, #ffffff, #eef4ff);
    border-radius: 12px;
    padding: 10px 9px;
    display: grid;
    gap: 7px;
}
.pv-phone__line { height: 7px; border-radius: 4px; background: #dbe6f6; }
.pv-phone__line.short { width: 60%; }
.pv-phone__chip { height: 34px; border-radius: 8px; background: var(--pv-sky); border: 1px solid rgba(37, 99, 235, .14); }

@media (max-width: 480px) {
    .pv-phone { width: 96px; right: 0; bottom: -18px; }
    .pv-chart { height: 96px; }
}

/* ============================================================
   Highlight / info box
   ============================================================ */
.pv-infobox {
    margin-top: 2rem;
    background: linear-gradient(135deg, var(--pv-sky), #ffffff);
    border: 1px solid rgba(37, 99, 235, .16);
    border-left: 5px solid var(--pv-blue);
    border-radius: var(--pv-radius);
    padding: 1.5rem 1.6rem;
    box-shadow: var(--pv-shadow-sm);
}
.pv-infobox__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pv-blue);
    margin: 0 0 .6rem;
}
.pv-infobox p { font-size: 1.02rem; line-height: 1.7; color: var(--pv-navy-2); margin: 0; font-weight: 500; }

/* ============================================================
   Two-column text block (What it is / Who it is for / AI)
   ============================================================ */
.pv-split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .pv-split { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }

/* ============================================================
   Step blocks (How it works / How to get started)
   ============================================================ */
.pv-steps {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
}
@media (min-width: 640px) { .pv-steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
    .pv-steps--4 { grid-template-columns: repeat(4, 1fr); }
    .pv-steps--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) and (max-width: 1023px) { .pv-steps--3 { grid-template-columns: repeat(2, 1fr); } }

.pv-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-radius);
    padding: 1.6rem 1.4rem;
    box-shadow: var(--pv-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.pv-step:hover { transform: translateY(-4px); box-shadow: var(--pv-shadow); }
.pv-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--pv-blue-bright), var(--pv-blue));
    margin-bottom: 1rem;
}
.pv-step p { font-size: .95rem; line-height: 1.65; color: var(--pv-muted); margin: 0; }

/* ---------- Flow diagram (Data → AI → Information → User) ---------- */
.pv-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-radius);
    box-shadow: var(--pv-shadow-sm);
}
.pv-flow__node {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--pv-sky-2);
    border: 1px solid rgba(37, 99, 235, .14);
    color: var(--pv-navy-2);
    font-weight: 700;
    font-size: .9rem;
    padding: .7rem 1rem;
    border-radius: 999px;
}
.pv-flow__node svg { flex: none; color: var(--pv-blue); }
.pv-flow__arrow { color: var(--pv-blue); opacity: .55; font-weight: 800; font-size: 1.1rem; }
@media (max-width: 639px) {
    .pv-flow { flex-direction: column; }
    .pv-flow__arrow { transform: rotate(90deg); }
}

/* ============================================================
   Feature cards (Key features)
   ============================================================ */
.pv-cards {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
}
@media (min-width: 640px) { .pv-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pv-cards--4 { grid-template-columns: repeat(4, 1fr); } }

.pv-card {
    background: #fff;
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-radius);
    padding: 1.7rem 1.5rem;
    box-shadow: var(--pv-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pv-card:hover { transform: translateY(-5px); box-shadow: var(--pv-shadow); border-color: rgba(37, 99, 235, .28); }
.pv-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 14px;
    color: var(--pv-blue);
    background: var(--pv-sky);
    border: 1px solid rgba(37, 99, 235, .14);
    margin-bottom: 1.1rem;
}
.pv-card p { font-size: .95rem; line-height: 1.68; color: var(--pv-muted); margin: 0; }

/* ============================================================
   Security and risk panel
   ============================================================ */
.pv-risk {
    background: linear-gradient(135deg, #0b1f3a, #123a63);
    color: #e8f0fb;
    border-radius: 24px;
    padding: 2.5rem 2rem;
    box-shadow: var(--pv-shadow);
}
.pv-risk .pv-h2, .pv-risk .pv-h3 { color: #fff; }
.pv-risk p { color: rgba(232, 240, 251, .82); font-size: 1rem; line-height: 1.75; margin: 0 0 1rem; }
.pv-risk p:last-child { margin-bottom: 0; }
.pv-risk__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #ffd9a0;
    background: rgba(255, 176, 66, .14);
    border: 1px solid rgba(255, 176, 66, .3);
    padding: .4rem .85rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

/* ============================================================
   Closing call-to-action
   ============================================================ */
.pv-cta {
    text-align: center;
    background:
        radial-gradient(700px 320px at 50% -20%, rgba(59, 130, 246, .22), rgba(59, 130, 246, 0) 70%),
        linear-gradient(135deg, #0b1f3a, #14375f);
    border-radius: 26px;
    padding: 3.25rem 1.75rem;
    box-shadow: var(--pv-shadow);
    color: #fff;
}
.pv-cta .pv-h2 { color: #fff; }
.pv-cta p { color: rgba(232, 240, 251, .84); font-size: 1.05rem; line-height: 1.7; max-width: 620px; margin: 0 auto 1.75rem; }
.pv-disclaimer {
    margin-top: 1.5rem;
    font-size: .82rem;
    line-height: 1.6;
    color: rgba(232, 240, 251, .62);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Footer risk disclaimer
   ============================================================ */
.pv-risk-warning {
    max-width: var(--pv-maxw);
    margin: 0 auto;
    padding: 1.75rem 1.25rem;
    font-size: .84rem;
    line-height: 1.7;
    color: var(--pv-muted);
    border-top: 1px solid rgba(11, 31, 58, .1);
}
.pv-risk-warning p { margin: 0 0 .75rem; }
.pv-risk-warning p:last-child { margin-bottom: 0; }
.pv-risk-warning strong { color: var(--pv-navy-2); font-weight: 700; }

/* ============================================================
   Shared icon list (used across the AI and audience sections)
   ============================================================ */
.pv-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .85rem; }
.pv-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .98rem; line-height: 1.6; color: var(--pv-muted); }
.pv-list li svg { flex: none; margin-top: 2px; color: var(--pv-blue); }

/* ============================================================
   Shared sub-page (About) helpers
   ============================================================ */
.pv-page-hero { padding: 7rem 0 2.5rem; background: linear-gradient(180deg, #fff, #f4f8ff); }
.pv-page-hero .pv-h1 {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--pv-navy);
    margin: 0 0 1rem;
}

/* ---------- Narrow viewports ---------- */
@media (max-width: 480px) {
    .pv-section { padding: 3.25rem 0; }
    .pv-hero { padding: 6rem 0 2.5rem; }
    .pv-risk { padding: 2rem 1.4rem; }
    .pv-cta { padding: 2.5rem 1.25rem; }
}