:root {
    --bf-bg: #07111f;
    --bf-card: #0d1b2d;
    --bf-card-soft: #12243b;
    --bf-text: #f7f9fc;
    --bf-muted: #aab8ca;
    --bf-accent: #4da3ff;
    --bf-accent-light: #8bc5ff;
    --bf-border: rgba(255,255,255,.10);
    --bf-success: #5ed39a;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at top,
            #15365b 0%,
            #07111f 45%,
            #040a12 100%
        );

    color: var(--bf-text);
}

button,
input {
    font: inherit;
}

#brainfocus-app {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px 18px;
}

.bf-card {
    width: 100%;
    max-width: 780px;

    background:
        linear-gradient(
            180deg,
            rgba(18,36,59,.98),
            rgba(8,20,35,.98)
        );

    border: 1px solid var(--bf-border);

    border-radius: 28px;

    padding: 46px;

    box-shadow:
        0 30px 90px rgba(0,0,0,.40);
}

.bf-brand {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .20em;

    color: var(--bf-accent-light);

    margin-bottom: 38px;
}

.bf-eyebrow {
    color: var(--bf-accent-light);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .12em;
}

h1 {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.08;

    margin:
        15px 0
        22px;
}

h2 {
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.18;
}

h3 {
    margin-top: 0;
}

.bf-intro {
    color: var(--bf-muted);

    font-size: 18px;
    line-height: 1.65;
}

.bf-note,
.bf-privacy {
    color: var(--bf-muted);

    font-size: 14px;
    line-height: 1.5;
}

.bf-dimensions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin: 25px 0;
}

.bf-dimensions span {
    padding: 9px 13px;

    border: 1px solid var(--bf-border);

    border-radius: 999px;

    color: #dce8f5;

    font-size: 13px;
}

.bf-button {
    width: 100%;

    border: 0;
    border-radius: 14px;

    padding: 17px 22px;

    margin-top: 22px;

    cursor: pointer;

    font-weight: 800;
    font-size: 16px;

    color: #04111f;

    background:
        linear-gradient(
            135deg,
            var(--bf-accent-light),
            var(--bf-accent)
        );

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.bf-button:hover {
    transform: translateY(-1px);
}

.bf-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.bf-button-secondary {
    color: var(--bf-text);
    background: var(--bf-card-soft);
}

.hidden {
    display: none !important;
}

.bf-progress-header {
    display: flex;
    justify-content: space-between;

    color: var(--bf-muted);

    font-size: 13px;

    margin-bottom: 10px;
}

.bf-progress {
    width: 100%;
    height: 7px;

    background: rgba(255,255,255,.08);

    border-radius: 999px;

    overflow: hidden;

    margin-bottom: 38px;
}

.bf-progress-bar {
    height: 100%;
    width: 0%;

    background:
        linear-gradient(
            90deg,
            var(--bf-accent),
            var(--bf-accent-light)
        );

    transition: width .3s ease;
}

.bf-choice {
    width: 100%;

    display: block;

    text-align: left;

    margin: 10px 0;

    padding: 17px 18px;

    border-radius: 14px;

    border: 1px solid var(--bf-border);

    background: rgba(255,255,255,.035);

    color: var(--bf-text);

    cursor: pointer;

    transition:
        background .15s ease,
        border .15s ease,
        transform .15s ease;
}

.bf-choice:hover {
    background: rgba(77,163,255,.12);

    border-color: rgba(77,163,255,.50);

    transform: translateX(3px);
}

.bf-result-box {
    padding: 22px;

    margin: 25px 0;

    background: rgba(77,163,255,.08);

    border:
        1px solid
        rgba(77,163,255,.20);

    border-radius: 16px;
}

.bf-score {
    margin: 18px 0;
}

.bf-score-header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 7px;

    font-size: 14px;
}

.bf-score-track {
    height: 8px;

    border-radius: 999px;

    background: rgba(255,255,255,.08);

    overflow: hidden;
}

.bf-score-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--bf-accent),
            var(--bf-accent-light)
        );

    border-radius: 999px;
}

.bf-audio-card {
    padding: 20px;

    margin: 14px 0;

    border: 1px solid var(--bf-border);

    border-radius: 17px;

    background: rgba(255,255,255,.035);
}

.bf-audio-card h3 {
    margin-bottom: 8px;
}

.bf-audio-meta {
    color: var(--bf-muted);

    font-size: 13px;
}

.bf-audio-price {
    font-weight: 800;

    color: var(--bf-accent-light);
}

label {
    display: block;

    margin:
        25px 0
        8px;

    font-weight: 700;
}

input[type="email"] {
    width: 100%;

    padding: 17px;

    border-radius: 13px;

    border: 1px solid var(--bf-border);

    background: rgba(255,255,255,.06);

    color: var(--bf-text);

    outline: none;
}

input[type="email"]:focus {
    border-color: var(--bf-accent);
}

.bf-selected-audio {
    padding: 15px;

    border-left:
        3px solid
        var(--bf-accent);

    background:
        rgba(77,163,255,.07);
}

.bf-success {
    width: 70px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(94,211,154,.14);

    color: var(--bf-success);

    font-size: 34px;

    margin-bottom: 25px;
}

.bf-loader {
    width: 48px;
    height: 48px;

    border:
        4px solid
        rgba(255,255,255,.12);

    border-top-color:
        var(--bf-accent);

    border-radius: 50%;

    animation:
        bf-spin .8s linear infinite;

    margin-bottom: 25px;
}

@keyframes bf-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 650px) {

    .bf-card {
        padding: 28px 20px;

        border-radius: 20px;
    }

    .bf-brand {
        margin-bottom: 28px;
    }

}