/* --- 1. GLOBAL VARIABLES & RESET (THEME: PHANTOM VIOLET) --- */
:root {
    /* Background: Deepest Indigo/Black (Not Blue) */
    --bg-dark: #090212; 
    
    /* Card Glass: Purple-tinted darkness */
    --card-bg: rgba(30, 10, 50, 0.5); 
    
    /* Typography */
    --text-white: #FFFFFF;
    --text-gray: #B0A0C0; /* Lavender-Gray */

    /* Accents: Neon Purple & Hot Pink (The Unique Part) */
    --cyan: #D500F9;      /* Replaced 'Cyan' with Neon Magenta */
    --green: #00E676;     /* Bright Toxic Green for Success */
    --violet: #7C4DFF;    /* Deep Violet */
    
    /* Pro Gradient: Purple to Pink */
    --gradient-primary: linear-gradient(135deg, #7C4DFF 0%, #D500F9 100%);
    --gradient-glow: linear-gradient(135deg, rgba(124, 77, 255, 0.3) 0%, rgba(213, 0, 249, 0.3) 100%);
    
    --font-head: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;
}

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

body {
    background-color: var(--bg-dark);
    /* A rich, deep purple fog effect */
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(124, 77, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(213, 0, 249, 0.05) 0%, transparent 50%);
    color: var(--text-white);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* --- 2. NAVBAR --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(10, 14, 39, 0.95);
    border-bottom: 1px solid rgba(0, 245, 255, 0.1);
    position: relative;
    z-index: 1000;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand img {
    height: 40px;
    width: auto;
}

.brand span {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-white);
    text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

/* --- GLASS NAV BUTTONS --- */
.nav-links a {
    background: rgba(124, 77, 255, 0.1);
    border: 1px solid rgba(124, 77, 255, 0.3);
    color: var(--cyan); /* Neon Magenta */
    font-family: var(--font-head);
    font-size: 0.9rem;
    padding: 8px 20px;
    border-radius: 20px; /* Pill shape looks modern */
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

.nav-links a:hover {
    background: var(--cyan);
    color: #000; /* Black text on hover for contrast */
    box-shadow: 0 0 15px rgba(213, 0, 249, 0.4);
    border-color: transparent;
}

/* Hamburger Menu (Hidden on Desktop) */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: var(--cyan);
    transition: 0.3s;
}

/* --- 3. MAIN STAGE --- */
.stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
}

/* --- TURBINE GAUGE (UPDATED REACTOR STYLE) --- */
.turbine-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.bracket {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 8px solid transparent;
    border-left-color: rgba(0, 245, 255, 0.1);
    border-right-color: rgba(0, 245, 255, 0.1);
    transition: all 0.5s ease;
}

.bracket.active {
    border-left-color: var(--cyan);
    border-right-color: var(--cyan);
    filter: drop-shadow(0 0 10px var(--cyan));
}

.spinner {
    position: absolute;
    /* 1. Increased Size */
    width: 88%;
    height: 88%;
    border-radius: 50%;
    
    /* 2. Base Thickness */
    border: 4px solid transparent; 
    
    /* 3. Multi-Color Sectors (Green, Yellow, Orange) */
    border-top-color: var(--green);   /* Safe Zone */
    border-right-color: #FFD700;      /* Yellow Warning Zone */
    border-bottom-color: #FF4500;     /* Orange Danger Zone */
    /* Left remains transparent to show rotation clearly */

    /* 4. Increased Visibility */
    opacity: 1; 
    filter: drop-shadow(0 0 5px var(--green));
}

.spinner.spinning {
    opacity: 1;
    animation: spin 1s linear infinite; /* Faster spin (1s) for high speed feel */
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

.readout {
    z-index: 10;
    text-align: center;
}

.readout .value {
    font-family: var(--font-head);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

.readout .unit {
    color: var(--cyan);
    font-size: 1rem;
    letter-spacing: 3px;
    margin-top: 5px;
    display: block;
}

/* --- 4. BEATBOX --- */
.beatbox {
    display: flex;
    gap: 4px;
    height: 60px;
    align-items: flex-end;
    margin-bottom: 3rem;
    opacity: 0.3;
}

.bar {
    width: 6px;
    background: var(--cyan);
    height: 10%;
    border-radius: 2px 2px 0 0;
    transition: height 0.1s ease;
}

.beatbox.active { opacity: 1; }

.beatbox.active .bar {
    animation: bounce 0.5s infinite ease-in-out alternate;
}

@keyframes bounce {
    0% { height: 10%; background: var(--green); }
    100% { height: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
}

.bar:nth-child(odd) { animation-duration: 0.4s; }
.bar:nth-child(even) { animation-duration: 0.6s; }

/* --- 5. DASHBOARD GRID --- */
.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
}

/* =========================================
   STEP 2: UNIFIED PHANTOM GLASS CARDS
   (Applies to Dashboard, Network, Results, Features)
   ========================================= */

/* 1. THE "SKIN" - Shared Look for ALL Cards */
.card, .net-item, .score-card, .feature-card {
    /* Phantom Violet Glass Background */
    background: var(--card-bg); 
    backdrop-filter: blur(12px); 
    
    /* Purple & Pink Borders */
    border: 1px solid rgba(124, 77, 255, 0.2); 
    border-top: 1px solid rgba(213, 0, 249, 0.3); /* Pink highlight on top */
    
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

/* 2. HOVER EFFECT - The Neon Pulse */
.card:hover, .net-item:hover, .feature-card:hover, .score-card:hover {
    border-color: var(--cyan); /* Turns Neon Magenta */
    box-shadow: 0 0 25px rgba(213, 0, 249, 0.3); /* Purple Glow */
    transform: translateY(-3px);
}
/* --- HOME PAGE IP BADGE --- */
.ip-badge-container {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    
    /* Phantom Glass Style */
    background: rgba(124, 77, 255, 0.1);
    border: 1px solid rgba(124, 77, 255, 0.3);
    padding: 10px 25px;
    border-radius: 50px; /* Pill Shape */
    
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    transition: 0.3s;
}

.ip-badge-container:hover {
    border-color: var(--cyan); /* Neon Magenta */
    box-shadow: 0 0 20px rgba(213, 0, 249, 0.3);
    transform: scale(1.02);
}

.ip-icon {
    font-size: 1.5rem;
}

.ip-info {
    display: flex;
    flex-direction: column;
}

.ip-label {
    font-size: 0.7rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ip-number {
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--text-white);
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(124, 77, 255, 0.5);
}

/* 3. LAYOUT SPECIFICS - How content sits inside */

/* A. Dashboard Cards (Vertical: Title Top, Number Bottom) */
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

/* B. Network Strip (Horizontal: Icon Left, Text Right) */
.net-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding: 15px 20px;
}

/* C. Score Card (Horizontal: Circle Left, Grade Right) */
.score-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    padding: 30px;
    width: 100%;
    max-width: 800px;
    margin-bottom: 3rem;
}

/* D. Feature Card (Vertical: Icon Top, Text Bottom) */
.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
}

/* 4. TEXT STYLING INSIDE CARDS */
.card h3, .net-label {
    color: var(--text-gray);
    font-size: 0.8rem;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card .data, .net-main {
    font-family: var(--font-head);
    color: var(--text-white);
    font-size: 1.5rem;
    /* Cool Purple Text Glow */
    text-shadow: 0 0 10px rgba(124, 77, 255, 0.5); 
}


.card h3 {
    color: var(--text-gray);
    font-size: 0.8rem;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.card .data {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: var(--text-white);
}

/* --- 6. START VIEW & SPEED SHARD --- */

/* LAYOUT VISIBILITY LOGIC */
.start-view-container {
    display: flex; /* Visible by default */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 50vh;
    animation: fadeIn 0.5s ease;
}

/* Hidden State for Dashboard */
.interface-hidden {
    display: none; 
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Visible State for Dashboard (Added by JS) */
/* Class added by JS to show the dashboard */
.interface-visible {
    /* CHANGED: Use Flex instead of Block to center children */
    display: flex !important; 
    flex-direction: column;
    align-items: center;
    width: 100%;
    
    animation: fadeInUp 0.8s forwards;
}

/* --- THE "SPEED SHARD" BUTTON --- */
.btn-shard {
    position: relative;
    background: transparent;
    border: none;
    padding: 20px 60px;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    /* The Skew - Makes it look fast */
    transform: skew(-20deg); 
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

/* The Border Outline */
.btn-shard::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid var(--cyan);
    background: rgba(0, 245, 255, 0.05); /* Faint tint */
    z-index: 1;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.2);
}

/* The Text inside */
.shard-text {
    display: block;
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: var(--cyan);
    font-weight: 700;
    letter-spacing: 2px;
    z-index: 3;
    position: relative;
    /* Un-skew the text so it's readable */
    transform: skew(20deg); 
}

/* HOVER EFFECTS */
.btn-shard:hover {
    transform: skew(-20deg) scale(1.05); /* Grow slightly */
}

.btn-shard:hover::before {
    background: var(--cyan); /* Fill with Neon Cyan */
    box-shadow: 0 0 30px var(--cyan); /* Intense Glow */
    border-color: var(--cyan);
}

.btn-shard:hover .shard-text {
    color: #000; /* Text turns black for contrast */
}

.start-subtext {
    margin-top: 25px;
    color: var(--text-gray);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hidden { display: none !important; }

/* --- 7. NEW CONTROLS (After Test) --- */
.controls-container {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    z-index: 20; 
}

/* --- 8. FEATURES & FOOTER --- */
.features-section {
    padding: 80px 20px;
    background: #060918;
    text-align: center;
}

.section-head h2 {
    font-family: var(--font-head);
    font-size: 2.5rem;
    color: var(--text-white);
    margin-bottom: 10px;
}

.section-head p {
    color: var(--text-gray);
    margin-bottom: 50px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}



.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--cyan);
    box-shadow: 0 10px 30px rgba(0, 245, 255, 0.1);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: block;
}

.feature-card h3 {
    color: var(--text-white);
    margin-bottom: 15px;
    font-family: var(--font-head);
}

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

.main-footer {
    background: #02040a;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 60px 20px 20px;
    margin-top: auto;
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand h4 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: var(--text-white);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-brand p {
    color: var(--text-gray);
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-links h5 {
    color: var(--cyan);
    margin-bottom: 20px;
    font-family: var(--font-head);
    letter-spacing: 1px;
}

.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 10px; }

.footer-links a {
    color: var(--text-gray);
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.2s;
}

.footer-links a:hover { color: var(--cyan); padding-left: 5px; }

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 20px;
    color: #555;
    font-size: 0.8rem;
}

/* Action Buttons */
.btn-primary, .btn-secondary {
    padding: 12px 30px;
    border-radius: 6px;
    font-family: var(--font-head);
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s;
}

.btn-primary {
    background: var(--cyan);
    border: none;
    color: var(--bg-dark);
    font-weight: bold;
}

.btn-primary:hover {
    box-shadow: 0 0 15px var(--cyan);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--text-gray);
    color: var(--text-white);
}

.btn-secondary:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

/* --- MOBILE RESPONSIVE MEDIA QUERIES (FINAL CORRECTED) --- */
@media (max-width: 768px) {
    
    /* 1. GLOBAL LAYOUT FIXES */
    html, body {
        overflow-x: hidden !important;
        width: 100%;
        position: relative;
    }

    /* 2. NAVBAR: Fix the Overlapping Buttons */
    .navbar {
        padding: 10px 15px !important;
        height: 60px; /* Force fixed height */
        align-items: center;
        justify-content: space-between;
        position: relative; /* Essential for dropdown */
    }

    .brand {
        flex: 1; /* Allow logo to take available space */
        min-width: 0; /* Allow shrinking */
        z-index: 1002;
    }

    .brand img {
        height: 24px !important;
        width: auto;
    }

    .brand span {
        font-size: 0.9rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* THE FIX: Force hide nav links until menu is clicked */
    .nav-links {
        display: none; /* Hide by default */
        position: absolute;
        top: 60px; /* Push exactly below the navbar */
        left: 0;
        width: 100%;
        background: rgba(10, 14, 39, 0.98);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px solid var(--cyan);
        backdrop-filter: blur(10px);
        z-index: 999;
    }

    /* Only show when JavaScript adds the 'active' class */
    .nav-links.active {
        display: flex !important;
    }

    .nav-links a {
        margin: 10px 0;
        width: 80%;
        text-align: center;
        display: block; /* Ensure they act as buttons */
    }

    .hamburger {
        display: flex !important;
        z-index: 1003;
    }

    /* 3. TEXT FIX: "Why Use SpeedCheckNow?" */
    .section-head h2 {
        font-size: 1.8rem !important; /* Smaller size */
        line-height: 1.3;
        overflow-wrap: break-word; /* Force break if word is too long */
        word-wrap: break-word;
        hyphens: auto;
        padding: 0 10px;
        max-width: 100%;
    }

    /* If the word is STILL too long, use Viewport Width scaling */
    .section-head h2 {
        font-size: clamp(1.2rem, 6vw, 1.8rem) !important;
    }

    /* 4. DASHBOARD & GAUGE FIX */
    .dashboard {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .turbine-wrapper {
        width: 240px !important;
        height: 240px !important;
        max-width: 80vw; /* Ensure it fits on narrow screens */
        margin: 0 auto 20px auto;
    }

    .btn-shard {
    padding: 15px 40px; /* Slightly smaller on phones */
    }
    .shard-text {
        font-size: 1.2rem;
    }

    /* 5. NETWORK STRIP (Results Page) */
    .network-info-strip {
        grid-template-columns: 1fr !important;
        padding: 10px;
    }

    /* Mobile Fix for Intro Animation */
    .intro-sequence {
        transform: scale(0.65); /* Shrink it to fit mobile screens */
        width: 100%;
    }
    
}

/* --- EXTRA SMALL SCREENS (Galaxy S8 / SE) --- */
@media (max-width: 375px) {
    .brand span {
        font-size: 0.8rem !important; /* Tiny logo text */
    }
    .readout .value {
        font-size: 2rem !important;
    }
}

/* =========================================
   FULL-SCREEN CINEMATIC INTRO (Corrected Drag Physics)
   ========================================= */

/* 1. The Stage */
.intro-sequence {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    display: flex;
    align-items: center; justify-content: center;
    overflow: hidden;
    z-index: 100;
}

/* 2. The Car Wrapper (The Leader) */
.car-wrapper {
    position: absolute;
    width: 300px; height: 120px;
    z-index: 20;
    /* Center Origin */
    left: 50%; margin-left: -150px; 
    
    animation: carSequence 8s ease-in-out forwards;
}

.cyber-car {
    width: 100%; height: 100%;
    filter: drop-shadow(0 0 15px var(--cyan));
    animation: rumble 0.1s infinite;
}

/* 3. The Rope */
.rope-wrapper {
    position: absolute;
    width: 150px; height: 40px; /* Longer rope to ensure gap */
    z-index: 15;
    /* Center Origin */
    left: 50%; margin-left: -75px; 
    opacity: 0;
    
    animation: ropeSequence 8s linear forwards;
}

/* 4. The Button (The Trailer) */
.button-wrapper {
    position: absolute;
    z-index: 10;
    /* Center Origin */
    left: 50%; 
    width: auto;
    
    /* Important: We use transform to position it, 
       so we don't set margin-left here */
    
    animation: buttonSequence 8s ease-in-out forwards;
}

.btn-shard { padding: 30px 80px; }
.shard-text { font-size: 2.5rem; }

.button-wrapper .start-subtext {
    font-size: 1rem; margin-top: 35px;
    opacity: 0;
    animation: textFadeIn 1s ease forwards;
    animation-delay: 7.5s; 
    text-align: center;
}

/* =========================================
   THE KEYFRAMES (Strict Sync)
   ========================================= */

/* Total Time: 8s 
   Pass 1: 0% -> 30%
   Reset: 30% -> 31%
   Pass 2 (Tow): 35% -> 55% (Car and Board move SAME distance)
   Stop/Drop: 55% -> 65%
   Exit: 65% -> 100%
*/

@keyframes carSequence {
    /* --- PASS 1: SOLO FLYBY --- */
    0% { transform: translateX(-120vw) skew(-20deg); }
    15% { transform: translateX(0) skew(-10deg); } 
    30% { transform: translateX(120vw) skew(0deg); opacity: 1; }
    
    /* --- RESET --- */
    30.1% { transform: translateX(-120vw); opacity: 0; } 
    30.2% { opacity: 1; } 

    /* --- PASS 2: TOWING ENTRY (LEADER) --- */
    /* Start: Far Left */
    35% { transform: translateX(-80vw); } 
    
    /* Stop: Far Right (+350px) 
       This creates space for the rope + board behind it */
    55% { transform: translateX(350px); } 
    
    /* Wait */
    65% { transform: translateX(350px); }
    
    /* Exit */
    70% { transform: translateX(330px) skew(5deg); } /* Rev */
    100% { transform: translateX(150vw) skew(-20deg); } /* Zoom */
}

@keyframes buttonSequence {
    /* Hidden Pass 1 */
    0% { transform: translateX(-200vw); }
    30% { transform: translateX(-200vw); }
    
    /* --- PASS 2: TOWING ENTRY (TRAILER) --- */
    /* Start: Car Position (-80vw) MINUS Gap (350px) 
       This forces the Board to be BEHIND the car */
    35% { transform: translateX(calc(-80vw - 350px)); }
    
    /* Stop: Car Position (350px) MINUS Gap (350px) = 0 (Center)
       They travel the exact same distance now. */
    55% { transform: translateX(-50%); } 
    
    /* Stay */
    65% { transform: translateX(-50%); } 
    100% { transform: translateX(-50%); } 
}

@keyframes ropeSequence {
    /* Hidden Pass 1 */
    0% { opacity: 0; transform: translateX(-200vw); }
    
    /* --- PASS 2: TOWING ENTRY (CONNECTOR) --- */
    /* Start: Midway between Car and Board */
    35% { opacity: 0; transform: translateX(calc(-80vw - 175px)); }
    35.1% { opacity: 1; transform: translateX(calc(-80vw - 175px)); }
    
    /* Stop: Midway between Car (350) and Board (0) = 175px */
    55% { transform: translateX(175px); opacity: 1; } 
    
    /* Snap */
    65% { transform: translateX(175px); opacity: 0; } 
    100% { opacity: 0; }
}

@keyframes rumble {
    0% { transform: translateY(0); }
    50% { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

@keyframes textFadeIn { to { opacity: 0.7; } }

/* Smoke FX */
.smoke-particle {
    position: absolute;
    bottom: 10px; left: 40px;
    width: 20px; height: 20px;
    background: var(--violet);
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0;
    animation: smoke puffs 0.5s infinite;
}
.p2 { left: 240px; animation-delay: 0.2s; }

@keyframes puffs {
    0% { opacity: 0.8; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(4) translateY(-40px); }
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .car-wrapper { transform: scale(0.5); margin-left: -150px; }
    /* Adjusted stop point for mobile width */
    .button-wrapper { transform: scale(0.7) translateX(-50%); } 
}

/* ----------------------------------------- RESULTS PAGE STYLES -------------------------------------------- */





/* --- RESULTS PAGE STYLES --- */

.results-stage {
    justify-content: flex-start;
    padding-top: 40px;
    padding-bottom: 60px; /* Space for footer */
}

/* --- NEW: PRO IDENTITY STRIP (Updated) --- */
.network-info-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* CHANGED: Now 4 columns */
    gap: 15px;
    background: transparent;
    width: 100%;
    max-width: 1100px; /* CHANGED: Wider to fit 4 items */
    margin-bottom: 2rem;
}

.net-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden; /* Contains long text */
}

.net-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--cyan);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.net-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 245, 255, 0.1);
    border: 1px solid rgba(0, 245, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--cyan);
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(0, 245, 255, 0.1);
}

.net-data {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Crucial for long ISP names */
    width: 100%;
}

.net-label {
    font-size: 0.7rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    font-weight: 600;
}

.net-main {
    font-family: var(--font-head);
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds "..." if ISP name is too long */
    max-width: 100%;
}

.net-sub {
    font-family: var(--font-mono);
    color: var(--cyan);
    font-size: 0.85rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
}

/* Score Card */


.grade-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--cyan);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-head);
    font-size: 3rem;
    font-weight: bold;
    color: var(--cyan);
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
    flex-shrink: 0;
}

.grade-text h2 {
    font-family: var(--font-head);
    color: var(--text-white);
    margin-bottom: 8px;
    font-size: 1.5rem;
}

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

/* Result Dashboard Tweaks */
.results-dashboard {
    margin-bottom: 3rem;
    max-width: 800px;
}

.result-card .data {
    font-size: 2rem;
    margin: 10px 0;
}

.cyan { color: var(--cyan); }
.green { color: #00E676; text-shadow: 0 0 10px rgba(0, 230, 118, 0.4); }
.white { color: white; }

/* Progress Bars */
.bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    width: 0%;
    transition: width 1s ease-out;
}

.cyan-bg { background: var(--cyan); }
.green-bg { background: #00E676; box-shadow: 0 0 10px rgba(0, 230, 118, 0.4); }
.white-bg { background: white; }

/* --- CAPABILITIES SECTION (Neon Progress Fill) --- */
.capabilities-section {
    width: 100%;
    max-width: 800px;
    margin-bottom: 2rem;
}

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

.badges-grid {
    display: grid;
    /* Auto-fit creates a responsive grid automatically */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    gap: 15px;
    width: 100%;
}

.badge {
    position: relative; /* Essential for the fill positioning */
    background: rgba(255, 255, 255, 0.05); /* Empty part color */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; /* Capsule shape */
    height: 50px;
    overflow: hidden; /* Clips the fill bar */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.badge:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.3);
}

/* Layer 1: The Neon Fill Bar (Behind text) */
.badge-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* JS updates this */
    z-index: 1; 
    transition: width 1s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth fill animation */
}

/* Layer 2: The Text (On top) */
.badge-text {
    position: relative;
    z-index: 2; /* Sits on top of the fill */
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8); /* Ensures text is readable over the bright fill */
}

/* Action Buttons */
.actions {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 800px;
}

/* --- MOBILE RESPONSIVE RESULTS (FIXED) --- */
@media (max-width: 768px) {
    /* Stack Network Cards Vertically */
    .network-info-strip {
        grid-template-columns: 1fr !important; /* Force Single column */
        gap: 10px;
        padding: 0 10px;
    }

    .net-item {
        width: 100%;
        border-right: none !important; /* Remove right border */
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Add separator */
        margin-bottom: 5px;
    }

    .net-item:last-child {
        border-bottom: none;
    }
    
    .score-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .grade-text h2 {
        font-size: 1.3rem;
    }

    .actions {
        flex-direction: column; 
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .btn-primary, .btn-secondary {
        width: 100%; 
    }
    
    .badges-grid {
    /* Grid handles alignment automatically, so we just need padding */
    padding: 0; 
    grid-template-columns: 1fr 1fr; /* 2 columns on mobile looks best */
}
}
/* --- TABLET RESPONSIVE (Add this before the mobile query) --- */
@media (max-width: 1024px) {
    .network-info-strip {
        grid-template-columns: 1fr 1fr; /* 2 columns (2x2 grid) */
    }
}


/* ------------------------------------------------------ HISTORY PAGE STYLES ----------------------------------------------- */





/* --- HISTORY PAGE STYLES --- */

.history-stage {
    justify-content: flex-start;
    padding-top: 30px;
    padding-bottom: 60px;
}

.history-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.stat-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 245, 255, 0.2);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.stat-box h4 {
    color: var(--text-gray);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.stat-box span {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: var(--cyan);
}

/* Control Bar */
.control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Fix for mobile */
    gap: 15px;
}

.section-title {
    font-family: var(--font-head);
    font-size: 1.2rem;
    color: var(--text-white);
}

.control-actions {
    display: flex;
    gap: 10px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--text-gray);
    color: var(--text-white);
    transition: 0.2s;
}

.btn-sm:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.btn-danger {
    border-color: #ff3333;
    color: #ff3333;
}

.btn-danger:hover {
    background: #ff3333;
    color: white;
}

/* --- UPDATED TABLE STYLING (With Scroll) --- */
.table-responsive {
    width: 100%;
    /* 1. Define scroll height */
    max-height: 500px; 
    overflow-y: auto; /* Vertical Scroll */
    overflow-x: auto; /* Horizontal Scroll (if needed) */
    
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Custom Scrollbar Colors (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: var(--cyan) rgba(255, 255, 255, 0.05);
}

/* Custom Scrollbar (Chrome/Edge/Safari) */
.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: var(--cyan);
    border-radius: 4px;
}

.history-table {
    width: 100%;
    border-collapse: separate; /* Required for sticky header */
    border-spacing: 0;
    background: rgba(10, 14, 39, 0.8);
}

.history-table th, .history-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sticky Header Logic */
.history-table th {
    position: sticky;
    top: 0;
    z-index: 2; /* Keeps header above rows */
    background: #0e122b; /* Solid background to hide scrolling text */
    
    color: var(--cyan);
    font-family: var(--font-head);
    font-size: 0.85rem;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.history-table td {
    color: var(--text-white);
    font-size: 0.95rem;
}

/* Grade Badge */
.grade-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8rem;
    min-width: 35px;
    text-align: center;
}

.grade-A { background: rgba(57, 255, 20, 0.2); color: var(--green); border: 1px solid var(--green); }
.grade-B { background: rgba(255, 255, 0, 0.2); color: #ffff00; border: 1px solid #ffff00; }
.grade-C { background: rgba(255, 165, 0, 0.2); color: orange; border: 1px solid orange; }
.grade-F { background: rgba(255, 51, 51, 0.2); color: #ff3333; border: 1px solid #ff3333; }

/* Empty State */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    margin-top: 20px;
}

.empty-icon { font-size: 4rem; margin-bottom: 10px; opacity: 0.5; }
.hidden { display: none !important; }

/* --- RESPONSIVE: CARD VIEW (OPTION B) --- */
@media (max-width: 768px) {
    .stats-row { grid-template-columns: 1fr; } /* Stack stats vertically */
    
    .history-table thead { display: none; } /* Hide headers */
    
    .history-table, .history-table tbody, .history-table tr, .history-table td {
        display: block;
        width: 100%;
    }
    
    .history-table tr {
        margin-bottom: 15px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 10px;
    }
    
    .history-table td {
        padding: 8px 10px;
        border-bottom: 1px solid rgba(255,255,255,0.05); /* Separator lines inside cards */
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
    }
    
    .history-table td:last-child {
        border-bottom: none;
    }
    
    /* Add labels before data using CSS content */
    .history-table td::before {
        content: attr(data-label);
        color: var(--text-gray);
        font-size: 0.8rem;
        text-transform: uppercase;
        font-weight: 600;
    }
}









/* -------------------------------------------- PRIVACY PAGE STYLES ---------------------------------------------- */




.privacy-stage {
    padding-top: 60px;
    padding-bottom: 60px;
}

.privacy-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-title {
    font-family: var(--font-head);
    font-size: 2.5rem;
    color: var(--cyan);
    margin-bottom: 10px;
}

.last-updated {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
}

.policy-content section {
    margin-bottom: 40px;
}

.policy-content h2 {
    color: var(--text-white);
    font-family: var(--font-head);
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.policy-content p {
    color: var(--text-gray);
    line-height: 1.8;
    margin-bottom: 15px;
}

.policy-content ul {
    list-style: disc;
    margin-left: 20px;
    color: var(--text-gray);
    line-height: 1.8;
}

.policy-content li {
    margin-bottom: 10px;
}

.policy-content strong {
    color: var(--text-white);
}

.policy-content code {
    background: rgba(0, 245, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--cyan);
    font-family: monospace;
}




/* ------------------------------------------------------ GLOSSARY PAGE STYLES --------------------------------------------------- */





.glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Custom Tweaks for Glossary Cards */
/* Custom Tweaks for Glossary Cards */
.glossary-card {
    /* Layout Overrides (Left align instead of Center) */
    text-align: left !important; 
    align-items: flex-start !important;
    
    /* Vertical Sizing */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Pushes content to the top */
    height: 100%; /* Forces card to stretch to match the tallest neighbor */
    min-height: 300px; /* Ensures they don't look squashed with less text */
}
.glossary-card h3 {
    color: var(--cyan);
    font-size: 1.1rem;
    margin: 15px 0 10px 0;
}

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

.gl-icon {
    font-size: 2rem;
    background: rgba(124, 77, 255, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(124, 77, 255, 0.3);
}

/* Make strong tags pop */
.glossary-card strong {
    color: var(--text-white);
}

@media (max-width: 768px) {
    .glossary-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
}