* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-blue: #0066cc;
    --dark-blue: #003d7a;
    --light-blue: #1e90ff;
    --orange: #ff9500;
    --dark-bg: #0a0e27;
    --light-text: #ffffff;
    --gray-text: #b0b8c8;
    --border-color: #1a2747;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--light-text);
    background-color: var(--dark-bg);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(10, 14, 39, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    padding: 1rem 0;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-section {
    flex-shrink: 0;
}

.nav-logo {
    height: 40px;
    width: auto;
}

/* Every page but the home page carries the logo in the bar rather than in the
   hero. The bar is taller than the home page's 54px as a result - 47.5px of
   logo plus the trimmed 8px padding - so .hero's hard margin-top: 60px no
   longer clears it and is raised to match further down. */
.navbar-with-logo {
    padding: 0.5rem 0;
}

/* Flex so the newlines around the anchor in the markup collapse - as an
   inline box they left the logo a few pixels short of the container edge. */
.navbar-with-logo .logo-section {
    display: flex;
}

.navbar-with-logo .nav-logo {
    display: block;
    height: 47.5px;
    width: auto;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.nav-links a {
    color: var(--light-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--orange);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-toggle::after {
    transform: rotate(-135deg) translateY(2px);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(10, 14, 39, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    list-style: none;
    min-width: 200px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Prevent nested dropdown from showing when parent is hovered */
.dropdown:hover .dropdown-submenu > .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--light-text);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-menu a:hover {
    background-color: rgba(0, 102, 204, 0.1);
    color: var(--orange);
}

.dropdown-menu li:first-child a {
    border-radius: 0.25rem 0.25rem 0 0;
}

.dropdown-menu li:last-child a {
    border-radius: 0 0 0.25rem 0.25rem;
}

/* Nested Dropdown Submenu */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-toggle::after {
    transform: rotate(-45deg) translateY(-2px);
}

.dropdown-submenu:hover > .dropdown-toggle::after {
    transform: rotate(45deg) translateY(2px);
}

/* Hide nested dropdown by default */
.dropdown-submenu > .dropdown-menu {
    display: none !important;
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: 0.5rem;
    z-index: 2000;
    background: rgba(10, 14, 39, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    min-width: 220px;
    list-style: none;
    padding: 0.5rem 0;
}

/* Show nested dropdown on hover.

   The selector carries .dropdown:hover as well, which looks redundant - you
   cannot reach the submenu without hovering its parent - but is what makes
   this work. The rule above that hides the flyout while the parent is open is
   .dropdown:hover .dropdown-submenu > .dropdown-menu, four classes deep and
   !important on opacity, visibility and pointer-events. A plainer
   .dropdown-submenu:hover selector is one class shallower, so it loses, and
   restoring display alone leaves the menu transparent, invisible and
   unclickable. Matching that specificity and answering all four properties is
   what actually opens it. */
.dropdown:hover .dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.dropdown-menu .dropdown-submenu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('login-background.jpg');
    background-size: 105%;
    background-position: center;
    z-index: -2;
    animation: backgroundFlow 15s ease-in-out infinite;
}

@keyframes backgroundFlow {
    0% {
        transform: scale(1) translateX(0) translateY(0);
        background-size: 105%;
    }
    25% {
        transform: scale(1.02) translateX(1%) translateY(1%);
        background-size: 107%;
    }
    50% {
        transform: scale(1.01) translateX(-0.5%) translateY(-1%);
        background-size: 106%;
    }
    75% {
        transform: scale(1.02) translateX(0.5%) translateY(-0.5%);
        background-size: 107%;
    }
    100% {
        transform: scale(1) translateX(0) translateY(0);
        background-size: 105%;
    }
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 14, 39, 0.7) 0%, rgba(0, 61, 122, 0.6) 100%);
    z-index: -1;
}

/* Off the home page the hero is just a title block, so it stops pretending to
   be a hero: no gradient wash, no full viewport of it, and nothing between it
   and the section under it but the page background.

   Keyed off the nav bar because .navbar-with-logo already marks exactly the
   pages this applies to, and nav and hero are siblings - one rule instead of
   a second class swept across seventeen files. */
.navbar-with-logo ~ .hero {
    min-height: 0;
    padding: 3rem 0 0;
    /* The bar is 64.5px here - 47.5 of logo, 16 of padding, 1 of border - not
       the 54px .hero's own margin-top assumes. */
    margin-top: 65px;
}

/* The wash that sat over the photo. With no photo under it, it was the only
   thing making this band a different colour from the content below. */
.navbar-with-logo ~ .hero::before {
    display: none;
}

/* 2.5rem of it, sized to clear a call-to-action that these pages do not have. */
.navbar-with-logo ~ .hero .hero-subtitle {
    margin-bottom: 0;
}

/* Class-based sections set their own top padding; the inline ones are trimmed
   in the markup, where nothing in here can reach them. */
.navbar-with-logo ~ .hero + section {
    padding-top: 40px;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--light-text);
}

/* The veteran-owned badge in the hero's top-right corner on the home page.
   Above the background wash like the content, and clear of it: the content
   is centred in a full-height hero, so the corner is always free. */
.hero-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 130px;
    height: auto;
    z-index: 1;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
}

.hero-brand {
    font-size: 3.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--light-text);
    /* Explicit: the gradient this replaced painted text with a transparent
       fill, and merely dropping that declaration leaves it in force. */
    -webkit-text-fill-color: var(--light-text);
}

/* Every heading is plain white now. The clipped-gradient treatment they all
   shared is gone: the logo already carries the metallic look, and repeating it
   in text left the words competing with their own decoration. */
.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    max-width: 900px;
    color: var(--light-text);
    /* Explicit rather than simply absent. The clipped-gradient trick this rule
       used to carry paints text with -webkit-text-fill-color: transparent, and
       dropping that declaration only stops setting it - anything that still
       does wins, and the heading renders invisible. */
    -webkit-text-fill-color: var(--light-text);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--light-text);
    max-width: 800px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    padding: 0.85rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
    color: var(--light-text);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--orange);
    border: 2px solid var(--orange);
}

.btn-secondary:hover {
    background: rgba(255, 149, 0, 0.1);
    transform: translateY(-2px);
}

.btn-large {
    padding: 1rem 3rem;
    font-size: 1.1rem;
}

/* Features Section */
.features {
    padding: 5rem 0;
    background: linear-gradient(180deg, var(--dark-bg) 0%, rgba(0, 61, 122, 0.1) 100%);
}

.features h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--light-text);
    /* Explicit: the gradient this replaced painted text with a transparent
       fill, and merely dropping that declaration leaves it in force. */
    -webkit-text-fill-color: var(--light-text);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.feature-card {
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(26, 39, 71, 0.5);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: var(--orange);
    background: rgba(26, 39, 71, 0.8);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 149, 0, 0.2);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--light-blue);
}

.feature-card p {
    color: var(--gray-text);
    line-height: 1.6;
}

/* Video library - thumbnail grid with a lite YouTube embed. The thumbnail
   is a real image and, once a video ID is set, a click swaps it for an
   iframe; nothing about YouTube loads until then. */
.video-grid {
    display: grid;
    /* Capped at 320px, not 1fr: with only a handful of videos, auto-fit
       collapses the unused tracks and 1fr would stretch each remaining
       card - and its thumbnail - to fill the leftover row width. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    justify-content: center;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

.video-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(26, 39, 71, 0.5);
    overflow: hidden;
}

.video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(0, 61, 122, 0.4) 0%, rgba(26, 39, 71, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    width: 100%;
    /* A link out to the video on YouTube. Every card the marketing site
       renders comes from /api/videos, which only ever returns real videos,
       so a rendered thumbnail always has somewhere to go. */
    text-decoration: none;
    cursor: pointer;
}

.video-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-play {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(10, 14, 39, 0.75);
    border: 2px solid var(--orange);
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: background 0.2s ease, transform 0.2s ease;
}

.video-thumb:hover .video-play {
    background: var(--orange);
    color: var(--dark-bg);
    transform: scale(1.08);
}

.video-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.video-card h3 {
    font-size: 1.1rem;
    color: var(--light-text);
    margin-bottom: 0.5rem;
}

.video-card p {
    color: var(--gray-text);
    line-height: 1.5;
    font-size: 0.95rem;
}

.video-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto 2rem;
}

.video-filter label {
    color: var(--gray-text);
    font-size: 0.95rem;
}

.video-filter select {
    padding: 0.6rem 1rem;
    background: rgba(10, 14, 39, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--light-text);
    font-size: 0.95rem;
    cursor: pointer;
}

.video-filter select:focus {
    outline: none;
    border-color: var(--light-blue);
}

.video-empty {
    text-align: center;
    color: var(--gray-text);
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* One section per topic: a heading, then that topic's grid of cards. */
.video-group {
    max-width: 1000px;
    margin: 0 auto 3.5rem;
}

.video-group:last-child {
    margin-bottom: 0;
}

/* Under a heading the cards read as a list, so they start at the left edge
   rather than floating in the middle when a topic has only one or two. */
.video-group .video-grid {
    justify-content: start;
}

.video-group-title {
    color: var(--light-text);
    font-size: 1.4rem;
    margin: 0 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

/* How It Works Section */
.how-it-works {
    padding: 5rem 0;
    background: linear-gradient(180deg, rgba(0, 61, 122, 0.1) 0%, var(--dark-bg) 100%);
}

.how-it-works h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--light-text);
    /* Explicit: the gradient this replaced painted text with a transparent
       fill, and merely dropping that declaration leaves it in force. */
    -webkit-text-fill-color: var(--light-text);
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    position: relative;
}

.step {
    text-align: center;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
    border-radius: 50%;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.step h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: var(--light-blue);
}

.step p {
    color: var(--gray-text);
    line-height: 1.6;
}

/* Stats Section */
.stats {
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(255, 149, 0, 0.1) 100%);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.stats .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.stat h3 {
    font-size: 2.5rem;
    color: var(--orange);
    margin-bottom: 0.5rem;
}

.stat p {
    color: var(--gray-text);
    font-size: 1.1rem;
}

/* CTA Section */
.cta-section {
    padding: 5rem 0;
    text-align: center;
    background: linear-gradient(135deg, var(--dark-blue) 0%, rgba(0, 61, 122, 0.5) 100%);
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--light-text);
    /* Explicit: the gradient this replaced painted text with a transparent
       fill, and merely dropping that declaration leaves it in force. */
    -webkit-text-fill-color: var(--light-text);
}

.cta-section p {
    font-size: 1.2rem;
    color: var(--gray-text);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Footer */
.footer {
    background: rgba(10, 14, 39, 0.95);
    border-top: 1px solid var(--border-color);
    padding: 3rem 0;
    color: var(--gray-text);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h4 {
    color: var(--light-text);
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section a {
    color: var(--gray-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--orange);
}

.footer-section p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
}

.footer-bottom a {
    color: var(--gray-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: var(--orange);
}

/* Demo Tier Page */
.demo-tier-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg) 0%, rgba(0, 61, 122, 0.1) 100%);
}

.demo-step {
    display: none;
    animation: fadeIn 0.5s ease-in;
}

.demo-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.step-number-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
    border-radius: 50%;
    font-size: 2.5rem;
    font-weight: bold;
    flex-shrink: 0;
    color: var(--light-text);
}

.step-header h2 {
    font-size: 2rem;
    color: var(--light-text);
    /* Explicit: the gradient this replaced painted text with a transparent
       fill, and merely dropping that declaration leaves it in force. */
    -webkit-text-fill-color: var(--light-text);
}

/* Provider Selection */
.provider-selection {
    margin-top: 2rem;
}

.provider-intro {
    font-size: 1.1rem;
    color: var(--gray-text);
    margin-bottom: 2rem;
}

.provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.provider-card {
    background: rgba(26, 39, 71, 0.6);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.provider-card:hover {
    border-color: var(--orange);
    background: rgba(26, 39, 71, 0.9);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 149, 0, 0.2);
}

.provider-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.provider-card h3 {
    color: var(--light-blue);
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
}

.provider-card p {
    color: var(--gray-text);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.btn-sm {
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
}

/* Account Connection */
.connection-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.connection-info {
    background: rgba(26, 39, 71, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem;
}

.provider-details {
    margin-bottom: 2rem;
}

.provider-details h3 {
    color: var(--light-blue);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.provider-details p {
    color: var(--gray-text);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.provider-details h4 {
    color: var(--light-text);
    margin-bottom: 1rem;
}

.steps-list {
    list-style: none;
    margin-bottom: 2rem;
}

.steps-list li {
    color: var(--gray-text);
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.6;
}

.steps-list li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--orange);
    font-weight: bold;
}

.scan-actions {
    text-align: center;
}

.scan-note {
    color: var(--gray-text);
    font-size: 0.95rem;
    margin-top: 1rem;
}

/* Scan Progress */
.scan-progress {
    text-align: center;
    padding: 3rem;
    background: rgba(26, 39, 71, 0.6);
    border-radius: 12px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(176, 184, 200, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-blue), var(--light-blue), var(--orange));
    width: 0%;
    transition: width 0.3s ease;
}

.scan-status {
    font-size: 1.2rem;
    color: var(--light-blue);
    margin-bottom: 1rem;
    font-weight: 500;
}

.scan-time {
    color: var(--gray-text);
    font-size: 0.95rem;
}

/* Results */
.results-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.results-summary {
    background: rgba(26, 39, 71, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem;
}

.results-summary h3 {
    font-size: 1.5rem;
    color: var(--light-blue);
    margin-bottom: 0.5rem;
}

.result-company {
    color: var(--orange);
    font-weight: 600;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.savings-card {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.1) 0%, rgba(30, 144, 255, 0.1) 100%);
    border: 2px solid var(--orange);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.savings-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.amount {
    font-size: 3rem;
    font-weight: bold;
    color: var(--orange);
}

.savings-amount p {
    font-size: 1.2rem;
    color: var(--gray-text);
}

.savings-desc {
    color: var(--light-text);
    font-weight: 600;
}

.findings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.finding-item {
    background: rgba(10, 14, 39, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}

.finding-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.finding-item h4 {
    color: var(--light-blue);
    margin-bottom: 0.75rem;
}

.finding-item p {
    color: var(--gray-text);
    line-height: 1.6;
    font-size: 0.95rem;
}

.finding-item strong {
    color: var(--orange);
    display: block;
    margin-top: 0.5rem;
}

.next-steps {
    background: rgba(26, 39, 71, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
}

.next-steps h3 {
    color: var(--light-blue);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.next-steps ol {
    list-style-position: inside;
    margin-bottom: 2rem;
}

.next-steps li {
    color: var(--gray-text);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.next-steps strong {
    color: var(--light-text);
}

/* Demo Page */
.demo-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg) 0%, rgba(0, 61, 122, 0.1) 100%);
}

.demo-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.demo-form-wrapper {
    background: rgba(26, 39, 71, 0.6);
    backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.demo-form-wrapper h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--light-text);
    /* Explicit: the gradient this replaced painted text with a transparent
       fill, and merely dropping that declaration leaves it in force. */
    -webkit-text-fill-color: var(--light-text);
}

.demo-intro {
    color: var(--gray-text);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.demo-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--light-text);
    font-size: 0.95rem;
}

.form-group input,
.form-group select {
    padding: 0.75rem;
    background: rgba(10, 14, 39, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--light-text);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--light-blue);
    background: rgba(30, 144, 255, 0.1);
}

.form-group input::placeholder {
    color: rgba(176, 184, 200, 0.5);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--gray-text);
    font-weight: 500;
}

.checkbox-label input {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-disclaimer {
    text-align: center;
    color: var(--gray-text);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.demo-benefits {
    background: rgba(26, 39, 71, 0.4);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.demo-benefits h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--light-blue);
}

.benefits-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.benefits-list li {
    display: flex;
    gap: 1rem;
}

.benefit-icon {
    color: var(--orange);
    font-size: 1.5rem;
    font-weight: bold;
    flex-shrink: 0;
}

.benefits-list h4 {
    color: var(--light-text);
    margin-bottom: 0.3rem;
}

.benefits-list p {
    color: var(--gray-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Trust Section */
.trust-section {
    padding: 4rem 0;
    text-align: center;
    background: linear-gradient(135deg, rgba(0, 61, 122, 0.1) 0%, var(--dark-bg) 100%);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.trust-section h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--light-text);
    /* Explicit: the gradient this replaced painted text with a transparent
       fill, and merely dropping that declaration leaves it in force. */
    -webkit-text-fill-color: var(--light-text);
}

.trust-section > .container > p {
    color: var(--gray-text);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.trust-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

/* FAQ Section */
.faq-section {
    padding: 4rem 0;
}

.faq-section h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--light-text);
    /* Explicit: the gradient this replaced painted text with a transparent
       fill, and merely dropping that declaration leaves it in force. */
    -webkit-text-fill-color: var(--light-text);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.faq-item {
    padding: 1.5rem;
    background: rgba(26, 39, 71, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.faq-item:hover {
    background: rgba(26, 39, 71, 0.8);
    border-color: var(--orange);
}

.faq-item h4 {
    color: var(--light-blue);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.faq-item p {
    color: var(--gray-text);
    line-height: 1.6;
}

/* Pricing Page */
.pricing-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg) 0%, rgba(0, 61, 122, 0.1) 100%);
}

.billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.toggle-label {
    color: var(--gray-text);
    font-weight: 500;
}

.save-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    color: var(--light-text);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-left: 0.5rem;
    font-weight: 600;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: 0.4s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--orange);
}

input:checked + .slider:before {
    transform: translateX(30px);
}

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

.pricing-card {
    background: rgba(26, 39, 71, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 600px;
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: var(--orange);
    box-shadow: 0 10px 40px rgba(255, 149, 0, 0.15);
    background: rgba(26, 39, 71, 0.8);
}

.pricing-card.featured {
    border: 2px solid var(--orange);
    background: rgba(26, 39, 71, 0.9);
    transform: scale(1);
    min-height: auto;
}

.popular-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    color: var(--light-text);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.tier-header h2 {
    font-size: 1.8rem;
    color: var(--light-blue);
    margin-bottom: 0.5rem;
}

.tier-subtitle {
    color: var(--gray-text);
    font-size: 0.95rem;
}

.pricing {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.price {
    font-size: 3rem;
    font-weight: bold;
    color: var(--orange);
}

.period {
    color: var(--gray-text);
    font-size: 1rem;
}

.tier-description {
    color: var(--gray-text);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.marketplace-links {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.marketplace-title {
    color: var(--gray-text);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.marketplace-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.marketplace-btn {
    flex: 1;
    min-width: 80px;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    font-weight: 600;
}

.marketplace-btn:hover {
    transform: translateY(-2px);
}

.marketplace-btn.aws {
    color: #FF9900;
    border-color: #FF9900;
}

.marketplace-btn.aws:hover {
    background: rgba(255, 153, 0, 0.1);
}

.marketplace-btn.azure {
    color: #0078D4;
    border-color: #0078D4;
}

.marketplace-btn.azure:hover {
    background: rgba(0, 120, 212, 0.1);
}

.marketplace-btn.gcp {
    color: #4285F4;
    border-color: #4285F4;
}

.marketplace-btn.gcp:hover {
    background: rgba(66, 133, 244, 0.1);
}

.features-list {
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    color: var(--light-text);
    border-bottom: 1px solid rgba(176, 184, 200, 0.05);
    font-size: 0.9rem;
}

.feature:last-child {
    border-bottom: none;
}

.feature.disabled {
    color: var(--gray-text);
    opacity: 0.6;
}

.check {
    color: var(--orange);
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.x {
    color: #666;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Comparison Section */
.comparison-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(0, 61, 122, 0.1) 0%, var(--dark-bg) 100%);
    border-top: 1px solid var(--border-color);
}

.comparison-section h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--light-text);
    /* Explicit: the gradient this replaced painted text with a transparent
       fill, and merely dropping that declaration leaves it in force. */
    -webkit-text-fill-color: var(--light-text);
}

.comparison-table-wrapper {
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(26, 39, 71, 0.4);
    border-radius: 8px;
    overflow: hidden;
}

.comparison-table thead {
    background: rgba(26, 39, 71, 0.8);
}

.comparison-table th {
    padding: 1.5rem;
    text-align: left;
    color: var(--light-blue);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--light-text);
}

.comparison-table tbody tr:hover {
    background: rgba(30, 144, 255, 0.05);
}

.comparison-table td strong {
    color: var(--light-blue);
}

/* Responsive */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card.featured {
        transform: scale(1);
    }

    .demo-container {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .demo-form-wrapper {
        padding: 1.5rem;
    }

    .demo-benefits {
        padding: 1.5rem;
    }
}

/* About page - portrait beside a long read. The portrait sticks while the
   prose scrolls past it, which is the whole reason it sits in its own column
   rather than as a block above the text. */
.about-layout {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
}

.about-portrait {
    flex: 0 0 260px;
    margin: 0;
    position: sticky;
    top: 90px;
}

.about-portrait img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.about-portrait figcaption {
    margin-top: 1rem;
    color: var(--gray-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.about-portrait figcaption strong {
    display: block;
    color: var(--light-text);
    font-size: 1.05rem;
}

/* min-width releases the auto minimum, so a long unbroken string in the prose
   cannot widen this column and squeeze the portrait. */
.about-prose {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--gray-text);
    line-height: 1.8;
}

.about-prose p {
    margin-bottom: 1.5rem;
}

.about-prose p:last-child {
    margin-bottom: 0;
}

/* FAQ / detection catalog */
.faq-intro,
.faq-toc,
.faq-body {
    max-width: 1000px;
    margin: 0 auto;
}

.faq-intro {
    color: var(--gray-text);
    line-height: 1.7;
    font-size: 1.1rem;
}

.faq-intro p {
    margin-bottom: 1rem;
}

.faq-intro strong {
    color: var(--light-text);
}

.faq-toc {
    margin: 3rem auto;
    padding: 1.75rem 2rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.faq-toc h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-text);
    margin-bottom: 1rem;
}

/* Two columns of seventeen so the list does not run the height of a screen
   on its own. */
.faq-toc ol {
    columns: 2;
    column-gap: 2.5rem;
    margin: 0;
    padding-left: 1.25rem;
    color: var(--gray-text);
}

.faq-toc li {
    margin-bottom: 0.4rem;
    break-inside: avoid;
}

.faq-toc a {
    color: var(--gray-text);
    text-decoration: none;
}

.faq-toc a:hover {
    color: var(--orange);
}

/* Sub-items under a top-level TOC entry, e.g. reference-guide.html's
   First-time login / Scans / Settings / Appendix subsections. */
.faq-toc li ul {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.9em;
}

.faq-toc li ul li {
    margin-bottom: 0.3rem;
}

/* Reference guide - contents as a collapsible left column instead of a
   centered box, so it can stay in view while a long section scrolls. */
.ref-layout {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.ref-sidebar {
    flex: 0 0 260px;
    width: 260px;
    box-sizing: border-box;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
}

.ref-sidebar[hidden] {
    display: none;
}

.ref-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ref-sidebar-head h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-text);
    margin: 0;
}

.ref-sidebar-close {
    background: none;
    border: none;
    color: var(--gray-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}

.ref-sidebar-close:hover {
    color: var(--orange);
}

.ref-sidebar ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    color: var(--gray-text);
}

.ref-sidebar li {
    position: relative;
    margin-bottom: 0.5rem;
    padding-left: 1.1rem;
}

/* A stemless arrowhead instead of a numbered or bulleted marker. */
.ref-sidebar li::before {
    content: '\203A';
    position: absolute;
    left: 0;
    color: var(--gray-text);
}

.ref-sidebar a {
    color: var(--gray-text);
    text-decoration: none;
}

.ref-sidebar a:hover {
    color: var(--orange);
}

.ref-sidebar li ul {
    margin: 0.35rem 0 0;
    padding-left: 0;
    font-size: 0.9em;
}

.ref-sidebar li ul li {
    margin-bottom: 0.3rem;
    padding-left: 1rem;
}

/* Entries with sub-items: collapsed until their title is clicked. The
   marker itself is the expand/collapse indicator, rotating to point down. */
.ref-toc-parent > a {
    cursor: pointer;
}

.ref-toc-parent::before {
    transition: transform 0.15s ease;
}

.ref-toc-parent.ref-expanded::before {
    transform: rotate(90deg);
}

.ref-toc-parent > ul {
    display: none;
}

.ref-toc-parent.ref-expanded > ul {
    display: block;
}

/* Reopens the sidebar once it's been closed. Hidden by default - JS clears
   the [hidden] attribute only after the sidebar is actually collapsed. */
.ref-sidebar-open {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--gray-text);
    padding: 0.6rem 1.1rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.ref-sidebar-open:hover {
    color: var(--orange);
    border-color: var(--orange);
}

.ref-sidebar-open[hidden] {
    display: none;
}

.ref-content {
    flex: 1 1 0;
    min-width: 0;
}

.ref-content .faq-body {
    max-width: none;
    margin: 0;
}

.faq-cat {
    margin-bottom: 3.5rem;
    /* Anchor targets clear the fixed nav bar. */
    scroll-margin-top: 85px;
}

.faq-cat h2 {
    font-size: 1.6rem;
    color: var(--light-text);
    margin-bottom: 1.25rem;
}

.faq-cat p {
    color: var(--gray-text);
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* Nested h3-level anchors inside a faq-cat, for reference-guide subsections. */
.faq-subcat {
    margin-top: 2rem;
    scroll-margin-top: 85px;
}

.faq-subcat h3 {
    font-size: 1.15rem;
    color: var(--light-text);
    margin-bottom: 0.5rem;
}

.faq-pending {
    color: var(--gray-text);
    font-style: italic;
    opacity: 0.75;
}

/* Four columns of prose do not fit a phone, and squeezing them makes every
   cell a column of single words. Scrolls in its own box instead. */
.faq-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.faq-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.faq-table th,
.faq-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-color);
}

.faq-table thead th {
    color: var(--light-text);
    font-weight: 600;
    background: rgba(0, 102, 204, 0.08);
    white-space: nowrap;
}

.faq-table tbody td {
    color: var(--gray-text);
    line-height: 1.5;
}

.faq-table tbody td:first-child {
    color: var(--light-text);
}

.faq-table tbody tr:last-child td {
    border-bottom: none;
}

.faq-table code,
.faq-cat code {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.9em;
}

.faq-note {
    margin-top: 1.25rem;
}

.faq-note strong {
    color: var(--light-text);
}

.faq-note a {
    color: var(--orange);
}

.faq-list {
    color: var(--gray-text);
    line-height: 1.7;
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.faq-list li {
    margin-bottom: 0.6rem;
}

.faq-list strong {
    color: var(--light-text);
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        gap: 1.5rem;
        /* Six items on one nowrap row ran off the right of a phone screen -
           true before the logo was added, and the logo landed past the edge
           on top of it. Wrapping keeps both on screen. min-width releases the
           auto minimum that stops a flex item shrinking below its content. */
        flex-wrap: wrap;
        min-width: 0;
    }

    /* The links wrap to two or three rows at this width; a full-size logo
       beside them would add another. Still shorter than the wrapped links, so
       it does not set the bar's height here. */
    .navbar-with-logo .nav-logo {
        height: 35px;
    }

    /* Smaller on a phone, where a 130px badge would crowd the hero's logo. */
    .hero-badge {
        width: 80px;
        top: 0.75rem;
        right: 0.75rem;
    }

    /* One column, and nothing left to stick to. */
    .about-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .about-portrait {
        position: static;
        flex: 0 0 auto;
        max-width: 200px;
    }

    /* Sidebar and content stack; the sidebar has nothing left to stick to
       and would otherwise pin an awkward chunk of the page while the reader
       scrolls past it. */
    .ref-layout {
        flex-direction: column;
        gap: 1.5rem;
    }

    .ref-sidebar {
        position: static;
        flex: 0 0 auto;
        width: 100%;
        max-height: none;
    }

    /* Two columns of seventeen items is unreadable at this width. */
    .faq-toc {
        padding: 1.25rem 1.5rem;
    }

    .faq-toc ol {
        columns: 1;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 300px;
    }

    .features h2,
    .how-it-works h2,
    .cta-section h2 {
        font-size: 2rem;
    }

    .features-grid,
    .steps {
        grid-template-columns: 1fr;
    }

    .stats .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .nav-links {
        gap: 1rem;
        font-size: 0.9rem;
    }

    .hero-content h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .stats .container {
        grid-template-columns: 1fr;
    }
}


/* ------------------------------------------------------------------ */
/* Zoom-reveal intro (homepage only)                                   */
/*                                                                    */
/* The console's dynamic zoom reveal, adapted for the marketing site:  */
/* WELCOME slams in through zoom blur, the camera punches through it,  */
/* the logo lands with a flash, shock ring and screen shake, the       */
/* tableau holds ~2s, and the whole thing flies out of the screen      */
/* revealing the homepage beneath. Gated by html.play-intro, which is  */
/* set before first paint; without it none of this exists.             */
/* ------------------------------------------------------------------ */

.intro-overlay { display: none; }

html.play-intro .intro-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  /* Above the navbar (1000) and its dropdowns (2000): the intro owns the
     whole screen until it flies out. */
  z-index: 3000;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
}

html.play-intro .intro-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 60%, #1b2735 0%, #10161f 60%, #090d12 100%);
  animation: intro-bg-exit 4.9s linear forwards;
  will-change: opacity;
}

@keyframes intro-bg-exit {
  0%, 85% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

html.play-intro .intro-shake {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: intro-exit-zoom 4.9s linear both;
  will-change: transform, opacity;
}

@keyframes intro-exit-zoom {
  0%, 85% {
    transform: scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4);
  }
  96% { opacity: 1; }
  100% { transform: scale(14); opacity: 0; }
}

html.play-intro .intro-word {
  position: absolute;
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 34px rgba(255, 149, 0, 0.55);
  animation:
    intro-word-in 0.42s cubic-bezier(0.19, 1, 0.22, 1) 0.05s both,
    intro-word-through 0.18s cubic-bezier(0.7, 0, 0.84, 0) 1.0s forwards;
  will-change: transform, opacity, filter;
}

@keyframes intro-word-in {
  0%   { transform: scale(3.4); opacity: 0; filter: blur(22px); }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

@keyframes intro-word-through {
  0%   { transform: scale(1); opacity: 1; filter: blur(0); }
  100% { transform: scale(9); opacity: 0; filter: blur(14px); }
}

html.play-intro .intro-brand {
  position: relative;
  animation: intro-impact-shake 0.3s linear 1.58s both;
  will-change: transform;
}

@keyframes intro-impact-shake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-7px, 4px); }
  40%  { transform: translate(6px, -5px); }
  60%  { transform: translate(-4px, -3px); }
  80%  { transform: translate(3px, 2px); }
  100% { transform: translate(0, 0); }
}

html.play-intro .intro-logo {
  width: clamp(220px, 42vw, 460px);
  height: auto;
  filter: drop-shadow(0 0 34px rgba(255, 149, 0, 0.5))
          drop-shadow(0 0 90px rgba(0, 102, 204, 0.45));
  animation: intro-logo-slam 0.46s cubic-bezier(0.34, 1.56, 0.64, 1) 1.14s both;
  will-change: transform, opacity;
}

@keyframes intro-logo-slam {
  0%   { transform: scale(5); opacity: 0; }
  45%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

html.play-intro .intro-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 62%);
  opacity: 0;
  animation: intro-flash-pop 0.5s ease-out 1.52s both;
  will-change: opacity;
}

@keyframes intro-flash-pop {
  0%   { opacity: 0; }
  18%  { opacity: 0.85; }
  100% { opacity: 0; }
}

html.play-intro .intro-brand::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%) scale(0.35);
  border: 2px solid rgba(255, 200, 130, 0.85);
  border-radius: 50%;
  opacity: 0;
  /* forwards, not both: a backwards fill would show the ring faintly
     all through the WELCOME beat, before the slam it belongs to. */
  animation: intro-shock-ring 0.65s cubic-bezier(0.22, 1, 0.36, 1) 1.55s forwards;
  will-change: transform, opacity;
}

@keyframes intro-shock-ring {
  0%   { transform: translate(-50%, -50%) scale(0.35); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* The beats start only when the page is ready to show them. Everything is
   paused at t=0 - a clean dark backdrop - until the script adds intro-go
   after the logo has decoded. Without this, first-load jank (image decode,
   hero paint) can swallow the WELCOME beat entirely: animation timelines
   advance on the wall clock even while frames drop. */
html.play-intro .intro-bg,
html.play-intro .intro-shake,
html.play-intro .intro-word,
html.play-intro .intro-brand,
html.play-intro .intro-logo,
html.play-intro .intro-flash,
html.play-intro .intro-brand::after {
  animation-play-state: paused;
}

html.play-intro.intro-go .intro-bg,
html.play-intro.intro-go .intro-shake,
html.play-intro.intro-go .intro-word,
html.play-intro.intro-go .intro-brand,
html.play-intro.intro-go .intro-logo,
html.play-intro.intro-go .intro-flash,
html.play-intro.intro-go .intro-brand::after {
  animation-play-state: running;
}

/* Back to top - injected by script.js on every page (no per-page markup),
   shown once the visitor has scrolled past the hero. Sits well under the
   navbar (1000) and its dropdowns (2000) since it never overlaps them. */
.back-to-top {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: var(--orange);
    color: var(--dark-bg);
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease;
    z-index: 900;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background: var(--light-blue);
}

@media (max-width: 480px) {
    .back-to-top {
        right: 1.25rem;
        bottom: 1.25rem;
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.15rem;
    }
}