/* ==========================================================
   1. ROOT VARIABLES
   ========================================================== */

:root {
    --glass-bg: #070a15;
    --glass-text: #f3f6ff;
    --glass-muted: #abb8d2;
    --glass-line: rgba(208, 220, 255, 0.16);
    --glass-panel: rgba(255, 255, 255, 0.055);
    --glass-accent: #9caaff;

    --glass-purple: #7774f3;
    --glass-blue: #418ad7;

    --glass-radius: 18px;
    --glass-transition: 0.2s ease;
}


/* ==========================================================
   2. GLOBAL STYLES
   ========================================================== */

html {
    color-scheme: dark;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--glass-bg);
    color: var(--glass-text);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}


/* ==========================================================
   3. HEADER AND NAVIGATION
   ========================================================== */

/* site.css owns layout and mobile menu visibility.
   These selectors provide dark-theme colours only. */
.header {
    background: rgba(9, 13, 28, 0.96);
    border-bottom: 1px solid var(--glass-line);
}

.header .brand {
    color: var(--glass-text);
}

.header .brand-mark {
    background: linear-gradient(135deg, #7167ec, #418ad7);
    color: #ffffff;
}

.research-nav-menu nav a,
.research-nav-menu .login {
    color: #d1daef;
}

.research-nav-menu nav a:hover,
.research-nav-menu .login:hover {
    color: #ffffff;
}

.research-nav-menu nav a[aria-current="page"],
.research-nav-menu .login[aria-current="page"] {
    color: #aab6ff;
}

.research-nav-menu .nav-logout {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--glass-line);
    color: #eef2ff;
}

.research-nav-menu .nav-logout:hover {
    background: rgba(255, 255, 255, 0.13);
}

.research-nav-toggle {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--glass-line);
    color: #eef2ff;
}

.research-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.13);
}


/* ==========================================================
   4. GENERAL BUTTONS
   ========================================================== */

.btn {
    background: #6766df;
    color: #ffffff;
}

.btn.ghost {
    border-color: var(--glass-line);
}


/* ==========================================================
   5. FOOTER
   ========================================================== */

.footer {
    background: #080b17;
    border-top: 1px solid var(--glass-line);
}


/* ==========================================================
   6. EXISTING PAGE COMPONENTS
   ========================================================== */

.page-head {
    background: #10152b;
}

.section,
.tinted {
    background: transparent;
}

.card,
.country,
.pricing-card,
.empty {
    background: var(--glass-panel);
    border-color: var(--glass-line);
    color: var(--glass-text);
}

.card p,
.card small,
.country span,
.section-heading p,
.pricing-card p,
.narrow p,
.cta-section p {
    color: var(--glass-muted);
}

.eyebrow.dark,
.text-link,
.card-icon {
    color: #b4bcff;
}

.status {
    background: #22294a;
    color: #d2d7ff;
}


/* ==========================================================
   7. FORMS
   ========================================================== */

.filter select,
.auth-form input {
    background: #141a2c;
    color: #ffffff;
    border-color: var(--glass-line);
}

.auth-form input::placeholder {
    color: #aeb9d2;
}


/* ==========================================================
   8. EXISTING HERO AND PREVIEW
   ========================================================== */

.hero {
    background: linear-gradient(
        135deg,
        #090e21,
        #17234b
    );
}

.preview {
    background: #141b31;
    color: #ffffff;
}

.preview p,
.preview-top,
.preview-bottom,
.bars span {
    color: #b2bfd8;
}


/* ==========================================================
   9. GLASS HERO BACKGROUND
   ========================================================== */

.glass-hero,
.glass-subhero {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 75% 15%,
            rgba(78, 74, 190, 0.32),
            transparent 44%
        ),
        radial-gradient(
            ellipse at 8% 75%,
            rgba(25, 93, 145, 0.18),
            transparent 48%
        ),
        #070a15;
}


/* ==========================================================
   10. HERO LAYOUT
   ========================================================== */

.glass-hero-inner {
    position: relative;

    min-height: calc(100vh - 77px);
    min-height: calc(100svh - 77px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    align-items: center;

    gap: 24px;
    gap: clamp(24px, 5vw, 70px);

    padding: 80px 0 100px;
}


/* ==========================================================
   11. BACKGROUND ORBS
   ========================================================== */

.glass-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(48px);

    pointer-events: none;

    opacity: 0.4;
}

.orb-one {
    width: 210px;
    height: 210px;

    right: 6%;
    top: 12%;

    background: #6355dd;
}

.orb-two {
    width: 180px;
    height: 180px;

    left: 12%;
    bottom: 10%;

    background: #1b74b6;
}


/* ==========================================================
   12. HERO CONTENT
   ========================================================== */

.glass-intro,
.glass-preview {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.glass-kicker {
    display: inline-block;

    color: #aab6ff;

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

    letter-spacing: 0.18em;
}


/* ==========================================================
   13. HERO HEADINGS
   ========================================================== */

.glass-intro h1,
.glass-subhero h1 {
    font-size: 48px;
    font-size: clamp(42px, 5.2vw, 76px);

    line-height: 1.09;

    letter-spacing: -0.055em;

    margin: 22px 0;

    color: #ffffff;
}

.glass-intro h1 span,
.glass-subhero h1 span {
    background: linear-gradient(
        95deg,
        #b9c3ff,
        #7bc7ec
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* ==========================================================
   14. HERO DESCRIPTION
   ========================================================== */

.glass-intro > p,
.glass-subhero p {
    max-width: 580px;

    color: #b6c3da;

    font-size: 16px;

    line-height: 1.85;
}


/* ==========================================================
   15. HERO ACTIONS
   ========================================================== */

.glass-actions {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin: 30px 0 18px;
}


/* ==========================================================
   16. GLASS BUTTONS
   ========================================================== */

.glass-button {
    display: inline-flex;

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

    min-width: 132px;

    padding: 13px 22px;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.glass-button:hover {
    transform: translateY(-2px);
}

.glass-button.primary {
    background: linear-gradient(
        125deg,
        #7774f3,
        #555cce
    );

    color: #ffffff;

    box-shadow:
        0 12px 35px rgba(85, 92, 206, 0.21);
}

.glass-button.secondary {
    border:
        1px solid rgba(165, 179, 223, 0.33);

    background:
        rgba(255, 255, 255, 0.045);

    color: #eef2ff;

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.glass-button:focus-visible,
.glass-explore:focus-visible {
    outline: 2px solid #b9c3ff;
    outline-offset: 4px;
}


/* ==========================================================
   17. EXPLORE LINK
   ========================================================== */

.glass-explore {
    display: inline-block;

    color: #b7c9ff;

    font-weight: 650;
    font-size: 14px;

    padding: 7px 0;

    text-decoration: none;
}

.glass-explore:hover {
    text-decoration: underline;
}


/* ==========================================================
   18. DISCLAIMER
   ========================================================== */

.glass-intro .glass-disclaimer {
    margin-top: 30px;

    font-size: 12px;

    color: #8999b5;

    line-height: 1.65;
}


/* ==========================================================
   19. SHARED GLASS CARD EFFECTS
   ========================================================== */

.glass-preview,
.glass-feature,
.glass-pricing,
.glass-contact,
.glass-steps > div {
    background: rgba(255, 255, 255, 0.06);

    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.10),
        rgba(255, 255, 255, 0.035)
    );

    border: 1px solid var(--glass-line);

    box-shadow:
        0 22px 70px rgba(0, 0, 0, 0.27);

    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}


/* ==========================================================
   20. RESEARCH PREVIEW CARD
   ========================================================== */

.glass-preview {
    border-radius: 26px;

    padding: 26px;
}

.glass-preview-top {
    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 10px;

    letter-spacing: 0.1em;

    color: #b7c6e4;
}

.glass-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #81e5c7;
}

.glass-preview-tag {
    margin-left: auto;

    padding: 5px 8px;

    border:
        1px solid var(--glass-line);

    border-radius: 8px;
}

.glass-preview-heading {
    font-size: 24px;
    font-size: clamp(22px, 2.5vw, 30px);

    font-weight: 750;

    letter-spacing: -0.03em;

    margin: 30px 0 24px;
}


/* ==========================================================
   21. RESEARCH STATISTICS GRID
   ========================================================== */

.glass-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.glass-stat-grid > div {
    display: flex;

    flex-direction: column;

    gap: 7px;

    min-width: 0;
    min-height: 126px;

    padding: 18px 15px;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.035);

    border:
        1px solid rgba(255, 255, 255, 0.08);
}

.glass-stat-grid small {
    font-size: 10px;

    color: #9caeff;
}

.glass-stat-grid strong {
    font-size: 17px;

    color: #ffffff;
}

.glass-stat-grid span,
.glass-preview-bottom {
    font-size: 12px;

    color: #9eacc8;
}

.glass-preview-bottom {
    margin-top: 20px;
}


/* ==========================================================
   22. EXPLORE PAGE HERO
   ========================================================== */

.glass-subhero {
    padding: 95px 0 80px;
}

.glass-narrow {
    max-width: 780px;
}

.glass-subhero h1 {
    font-size: 46px;
    font-size: clamp(42px, 5vw, 66px);
}


/* ==========================================================
   23. CONTENT SECTIONS
   ========================================================== */

.glass-section {
    padding: 78px 0;
}

.glass-alt {
    background: linear-gradient(
        145deg,
        #101629,
        #0b0f1e
    );
}

.glass-section-heading {
    max-width: 700px;

    margin-bottom: 28px;
}

.glass-section-heading h2,
.glass-bottom h2 {
    font-size: 32px;
    font-size: clamp(28px, 3.5vw, 43px);

    line-height: 1.2;

    letter-spacing: -0.035em;

    margin: 12px 0;

    color: #ffffff;
}

.glass-section-heading p {
    color: var(--glass-muted);
}


/* ==========================================================
   24. FEATURE GRID
   ========================================================== */

.glass-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 15px;
}

.glass-feature {
    min-width: 0;

    border-radius: 18px;

    padding: 24px 19px;
}

.glass-feature-icon {
    font-size: 12px;

    color: #aebaff;

    font-weight: 800;
}

.glass-feature h3,
.glass-steps h3 {
    font-size: 18px;

    margin: 20px 0 8px;

    color: #ffffff;
}

.glass-feature p,
.glass-steps p,
.glass-pricing p {
    font-size: 14px;

    color: var(--glass-muted);

    line-height: 1.7;
}


/* ==========================================================
   25. HOW IT WORKS
   ========================================================== */

.glass-steps {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.glass-steps > div {
    min-width: 0;

    border-radius: 18px;

    padding: 23px 18px;
}

.glass-steps b {
    color: #abb8ff;
}


/* ==========================================================
   26. PRICING SECTION
   ========================================================== */

.glass-pricing {
    padding: 30px;

    border-radius: 22px;
}

.glass-pricing-top {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    flex-wrap: wrap;
}

.glass-pricing-top span {
    font-size: 11px;

    color: #b8c4ff;

    border:
        1px solid var(--glass-line);

    padding: 6px 9px;

    border-radius: 30px;
}

.glass-price {
    font-size: 27px;
    font-size: clamp(23px, 3vw, 32px);

    font-weight: 750;

    margin: 22px 0 10px;

    color: #ffffff;
}

.glass-pricing small {
    display: block;

    margin-top: 15px;

    color: #97a6c0;
}


/* ==========================================================
   27. CONTACT SECTION
   ========================================================== */

.glass-contact {
    display: grid;

    gap: 10px;

    padding: 28px;

    border-radius: 18px;
}

.glass-contact span {
    font-size: 12px;

    color: #a7b5d0;

    letter-spacing: 0.1em;
}

.glass-contact strong {
    font-size: 27px;

    color: #ffffff;
}


/* ==========================================================
   28. BOTTOM CALL TO ACTION
   ========================================================== */

.glass-bottom {
    text-align: center;

    padding: 65px 0 90px;
}

.glass-bottom .glass-actions {
    justify-content: center;
}


/* ==========================================================
   29. TABLET RESPONSIVENESS
   ========================================================== */

@media screen and (max-width: 980px) {

    .glass-hero-inner {
        grid-template-columns: minmax(0, 1fr);

        min-height: auto;

        padding: 70px 0;
    }

    .glass-preview {
        max-width: 680px;
    }

    .glass-feature-grid,
    .glass-steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================
   30. MOBILE RESPONSIVENESS
   ========================================================== */

@media screen and (max-width: 560px) {

    .glass-hero-inner {
        padding: 56px 0 65px;
    }

    .glass-intro h1 {
        font-size: 38px;
        font-size: clamp(38px, 10vw, 54px);
    }

    .glass-preview {
        padding: 18px;

        border-radius: 20px;
    }

    .glass-stat-grid > div {
        min-height: 110px;

        padding: 14px 12px;
    }

    .glass-stat-grid strong {
        font-size: 14px;
    }

    .glass-section {
        padding: 52px 0;
    }

    .glass-feature-grid,
    .glass-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .glass-feature,
    .glass-steps > div {
        padding: 20px;
    }

    .glass-subhero {
        padding: 60px 0;
    }

    .glass-actions .glass-button {
        flex: 1;
    }

    .glass-pricing {
        padding: 22px;
    }

    /* Mobile menu layout is managed by site.css. */
}


/* ==========================================================
   31. SMALL MOBILE SCREENS
   ========================================================== */

@media screen and (max-width: 380px) {

    .glass-intro h1 {
        font-size: 34px;
    }

    .glass-preview {
        padding: 15px;
    }

    .glass-stat-grid {
        gap: 8px;
    }

    .glass-stat-grid > div {
        padding: 12px 10px;
    }

    .glass-stat-grid strong {
        font-size: 13px;
    }

    .glass-button {
        min-width: 0;
        padding: 12px 14px;
    }

    .glass-contact strong {
        font-size: 22px;
    }
}


/* ==========================================================
   32. REDUCED MOTION ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .glass-button {
        transition: none;
    }

    .glass-button:hover {
        transform: none;
    }
}


/* ==========================================================
   33. SHARED COMPONENT CONTRAST AND MOBILE REFINEMENTS
   ========================================================== */

/* Keep native controls legible on the dark background. */
.filter select,
.auth-form input {
    color-scheme: dark;
}

.filter select:focus-visible,
.auth-form input:focus-visible,
.glass-button:focus-visible,
.research-nav-toggle:focus-visible,
.research-nav-menu a:focus-visible,
.research-nav-menu button:focus-visible {
    outline: 2px solid #b9c3ff;
    outline-offset: 3px;
}

/* site.css defines alert text for light pages; dark forms need contrast. */
.auth-form [role="alert"] {
    color: #ffb5bd;
}

@media screen and (max-width: 800px) {
    /* Match the breakpoint used by site.css/navigation.js. */
    .research-nav-menu {
        background: #11182d;
        border-color: var(--glass-line);
    }

    .research-nav-menu nav a {
        color: #d8e3f7;
    }

    .research-nav-menu nav a[aria-current="page"] {
        background: rgba(116, 147, 255, 0.13);
        color: #b9caff;
    }
}

@media screen and (max-width: 560px) {
    .glass-hero-inner {
        padding: 44px 0 52px;
    }

    .glass-intro h1,
    .glass-subhero h1 {
        font-size: clamp(30px, 9vw, 42px);
        line-height: 1.12;
    }

    .glass-intro > p,
    .glass-subhero p {
        font-size: 13px;
        line-height: 1.7;
    }

    .glass-kicker {
        font-size: 10px;
        letter-spacing: 0.12em;
    }

    .glass-actions {
        gap: 9px;
        margin: 22px 0 14px;
    }

    .glass-actions .glass-button {
        min-width: 0;
        padding: 11px 13px;
        font-size: 12px;
    }

    .glass-preview-heading {
        margin: 19px 0 16px;
        font-size: 20px;
    }

    .glass-stat-grid {
        gap: 9px;
    }

    .glass-stat-grid > div {
        min-height: 94px;
        padding: 12px 10px;
        border-radius: 12px;
    }

    .glass-stat-grid small {
        font-size: 9px;
    }

    .glass-stat-grid strong {
        font-size: 13px;
    }

    .glass-stat-grid span,
    .glass-preview-bottom {
        font-size: 10px;
    }

    .glass-section {
        padding: 43px 0;
    }

    .glass-section-heading h2,
    .glass-bottom h2 {
        font-size: clamp(24px, 7vw, 32px);
    }

    .glass-feature,
    .glass-steps > div {
        padding: 16px;
        border-radius: 15px;
    }

    .glass-feature h3,
    .glass-steps h3 {
        margin: 12px 0 6px;
        font-size: 16px;
    }

    .glass-feature p,
    .glass-steps p,
    .glass-pricing p {
        font-size: 12px;
        line-height: 1.65;
    }

    .glass-subhero {
        padding: 48px 0;
    }

    .glass-pricing,
    .glass-contact {
        padding: 18px;
    }

    .glass-bottom {
        padding: 45px 0 60px;
    }
}