:root {
    --bg: #0b0d10;
    --panel: #12151a;
    --muted: #9aa4b2;
    --text: #e8ecf1;
    --brand: #61dafb;
    --brand-2: #a6ff4d;
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0
}

body {
    font-family: Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(180deg, rgba(18,21,26,.95), rgba(18,21,26,.85));
    border-bottom: 1px solid #1e232b;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem
}

.logo {
    font-weight: 800;
    text-decoration: none;
    color: var(--text);
    letter-spacing: .2px
}

.nav-toggle {
    display: none;
    font-size: 1.35rem;
    background: none;
    border: none;
    color: var(--text)
}

.site-nav {
    margin-left: auto;
    display: flex;
    gap: .5rem;
    align-items: center
}

.nav-link {
    text-decoration: none;
    color: var(--muted);
    padding: .4rem .7rem;
    border-radius: .6rem
}

    .nav-link:hover, .nav-link.active {
        color: var(--text);
        background: #1a1f27
    }

.hero {
    padding: 3.5rem 0 2rem;
    background: radial-gradient(80rem 20rem at 50% -5%, rgba(166,255,77,.08), transparent 60%),radial-gradient(60rem 20rem at 20% -10%, rgba(97,218,251,.06), transparent 60%),var(--panel);
    border-bottom: 1px solid #1e232b
}

.hero__title {
    font-size: clamp(2rem,5vw,3rem);
    margin: 0 0 .5rem;
    font-weight: 800
}

.hero__subtitle {
    margin: 0 0 1.25rem;
    color: var(--muted)
}

.hero__media {
    margin: 1rem 0 1.25rem
}

.hero__video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    object-fit: contain; /* show full poster/video, no cropping */
    object-position: center top; /* keep top text safe */
    border-radius: 1rem;
    border: 1px solid #1f2630;
}
.inline-form {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap
}

    .inline-form input {
        flex: 1;
        min-width: 220px;
        padding: .75rem .9rem;
        border-radius: .6rem;
        border: 1px solid #263043;
        background: #0d1116;
        color: var(--text)
    }

.btn {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #0b0d10;
    border: none;
    font-weight: 700;
    padding: .8rem 1rem;
    border-radius: .65rem;
    cursor: pointer
}

    .btn:hover {
        filter: brightness(1.05)
    }

.form-msg {
    margin: .25rem 0 0;
    min-height: 1.25rem;
    color: var(--brand)
}

.highlights {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3,1fr);
    padding: 2rem 0
}

.card {
    background: #0f1319;
    border: 1px solid #1e2530;
    border-radius: 1rem;
    padding: 1rem 1.1rem
}

    .card h3 {
        margin-top: .2rem
    }

.content {
    padding: 2rem 0
}

.notice {
    border: 1px dashed #2a3444;
    padding: 1rem;
    border-radius: .8rem;
    background: #0c1117;
    color: var(--muted);
    margin: 1rem 0 2rem
}

.feature-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3,1fr);
    margin: 1rem 0 2rem
}

.feature img {
    width: 100%;
    border: 1px solid #1e2530;
    border-radius: .8rem;
    background: #0c1117
}

.divider {
    border: 0;
    border-top: 1px solid #1e232b;
    margin: 2rem 0
}

.stacked-form {
    display: grid;
    gap: .6rem;
    max-width: 680px
}

    .stacked-form input, .stacked-form textarea {
        width: 100%;
        padding: .8rem .9rem;
        border-radius: .6rem;
        border: 1px solid #263043;
        background: #0d1116;
        color: var(--text)
    }

.site-footer {
    border-top: 1px solid #1e232b;
    margin-top: 2rem;
    padding: 1.25rem 0;
    background: #0f1319
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem
}

    .footer-grid a {
        color: var(--muted);
        text-decoration: none
    }

        .footer-grid a:hover {
            color: var(--text)
        }

.sr-only {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px)
}
/* Responsive */
@media (max-width:900px) {
    .feature-grid {
        grid-template-columns: 1fr 1fr
    }

    .highlights {
        grid-template-columns: 1fr
    }
}

@media (max-width:720px) {
    .site-nav {
        display: none
    }

    .nav-toggle {
        display: block;
        margin-left: auto
    }

    .feature-grid {
        grid-template-columns: 1fr
    }
}

/* Minimal header for landing page */
.site-header--minimal {
    justify-content: space-between
}

/* Early landing page hero tweaks */
.hero--early {
    padding: 4rem 0 2.25rem;
    background: radial-gradient(80rem 20rem at 50% -5%, rgba(166,255,77,.08), transparent 60%),radial-gradient(60rem 20rem at 20% -10%, rgba(97,218,251,.06), transparent 60%),var(--panel)
}

.early-form {
    margin-top: .5rem
}

.micro-note {
    margin-top: .75rem;
    color: var(--muted);
    font-size: .95rem
}

/* Selling points section */
.selling-points {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3,1fr);
    padding: 2rem 0
}

.reassurance {
    padding-bottom: 1.5rem;
    text-align: center
}

.muted {
    color: var(--muted)
}

@media (max-width:900px) {
    .selling-points {
        grid-template-columns: 1fr
    }
}
.form-msg {
    margin-top: .5rem;
    font-size: .95rem;
}

    .form-msg.is-success {
        color: #11a36a;
    }

    .form-msg.is-error {
        color: #c0392b;
    }
/* PDF download block — tiny, won’t disturb existing styles */
.download {
    padding: 24px 0;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.download__title {
    margin: 0 0 12px;
    font-size: 1.25rem;
}

.pdf-link {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    border: 1px dashed rgba(0,0,0,0.2);
    padding: 12px 14px;
    border-radius: 10px;
}

    .pdf-link:hover {
        background: rgba(0,0,0,0.03);
    }

.pdf-badge {
    width: 44px;
    height: 56px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: #e9eef7;
    color: #1c2a4a;
}
.hero__video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000; /* hides any tiny gaps */
}
.early-form {
    margin-top: 18px;
}

.download {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio */
}

    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }