/* BUNDLED CSS - GENERATED BY BUNDLE_CSS.PS1 - DO NOT EDIT DIRECTLY */

/* --- Start: variables.css --- */
:root {
    /* Color Palette - Modern Premium Dark/Light UI Support */
    --color-primary: #081F62;
    /* Deep Navy */
    --color-primary-hover: #051747;

    /* Surface Colors (Light Mode) */
    --color-bg: #FEFEFE;
    --color-surface: #ffffff;
    --color-border: #E7E9F0;

    /* Text Colors */
    --color-text-main: #051747;
    --color-text-muted: #535F80;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-12: 3rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
}

/* Dark mode intentionally NOT auto-enabled via prefers-color-scheme: nearly
   every page on the site hardcodes light-mode background colors (only a
   couple of rules use var(--color-surface)/var(--color-bg)), while ~20 text
   rules use var(--color-text-main)/var(--color-text-muted) - so a visitor
   with OS/browser dark mode on got those variables flipped to near-white
   while the backgrounds stayed hardcoded light, making that text invisible.
   Forcing light mode everywhere (rather than auditing every hardcoded color
   across ~20+ pages to build a real dark theme) is what actually fixes the
   contrast bug reliably. */

/* --- End: variables.css --- */

/* --- Start: reset.css --- */
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    background-color: var(--color-bg);
    color: var(--color-text-main);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- End: reset.css --- */

/* --- Start: typography.css --- */
body {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin-bottom: var(--spacing-4);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

p {
    margin-bottom: var(--spacing-4);
    color: var(--color-text-muted);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- End: typography.css --- */

/* --- Start: layout.css --- */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    max-width: 1200px;
    /* Max width for large screens */
}

/* Page Layout */
.page-content {
    min-height: calc(100vh - 80px);
    /* Assuming navbar is ~80px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* .navbar is position:fixed (see STICKY NAVBAR block below), so it no longer
       takes up space in normal flow — add its rendered height here to stop
       page content rendering underneath it. */
    padding-top: calc(var(--spacing-12) + 50px);
    padding-bottom: var(--spacing-12);
}

/* Admin navbar kept its original taller full-width shape, so it still needs the old compensation */
.admin-navbar~.page-content {
    padding-top: calc(var(--spacing-12) + 88px);
}

.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

/* --- End: layout.css --- */

/* --- Start: utilities.css --- */
.text-center {
    text-align: center;
}

.text-primary {
    color: var(--color-primary);
}

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

.badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-3);
    background-color: rgba(8, 31, 98, 0.1);
    /* Primary with opacity */
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--spacing-6);
}

.bg-layer {
    background-color: var(--color-bg);
}

.bg-surface {
    background-color: var(--color-surface);
}

/* Add more utility classes as needed: margins, paddings, displays */
.mt-4 {
    margin-top: var(--spacing-4);
}

.mb-4 {
    margin-bottom: var(--spacing-4);
}

/* --- End: utilities.css --- */

/* Components */
/* --- Start: components/button.css --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2) var(--spacing-6);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text-main);
}

.btn-outline:hover {
    background-color: var(--color-surface);
    border-color: var(--color-text-muted);
}

/* --- End: components/button.css --- */

/* --- Start: components/navbar.css --- */
.navbar {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
    padding: var(--spacing-4) 0;
    box-shadow: var(--shadow-sm);
}

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

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.05em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.nav-link {
    color: var(--color-text-muted);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-text-main);
}

/* --- End: components/navbar.css --- */

/* --- Start: components/auth-forms.css --- */
/* Authentication Form Components */

.auth-page-layout {
    display: flex;
    /* "safe center" centers when there's room, but falls back to flex-start
       (respecting padding-top below) instead of overflowing upward when the
       form is taller than the viewport — plain "center" would let a tall
       form push back up underneath the fixed navbar on short screens. */
    justify-content: safe center;
    align-items: center;
    min-height: calc(100vh - 80px);
    /* minus nav height */
    /* navbar is position:fixed, so reserve space for it here instead */
    padding-top: 104px;
}

.auth-form-box {
    width: 100%;
    max-width: 440px;
    background-color: var(--color-surface);
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}

.auth-title {
    margin-bottom: var(--spacing-2);
    font-size: 1.8rem;
}

.auth-subtitle {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Guest Login */
.guest-login-box {
    background: linear-gradient(135deg, rgba(8, 31, 98, 0.05), rgba(8, 31, 98, 0.02));
    border: 1.5px dashed rgba(8, 31, 98, 0.25);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    text-align: center;
}

.btn-guest-login {
    width: 100%;
    background: var(--color-surface);
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.95rem;
    font-family: inherit;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-guest-login:hover {
    background: var(--color-primary);
    color: #ffffff;
}

.btn-guest-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.guest-login-note {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0.6rem 0 0;
    line-height: 1.5;
}

/* Form Styles */
.form-group {
    margin-bottom: var(--spacing-4);
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--spacing-2);
    color: var(--color-text-main);
}

.form-control {
    padding: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    transition: all var(--transition-fast);
    outline: none;
    font-size: 1rem;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(8, 31, 98, 0.1);
}

/* Show/hide toggle injected next to every password field by
   initPasswordToggles() (js/auth.js) - lets a student see what they typed
   before submitting, instead of guessing whether a typo is why login fails. */
.password-field-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}

.password-field-wrap input.has-password-toggle {
    flex: 1;
    min-width: 0;
    padding-right: 42px;
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px;
    margin: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border-radius: var(--radius-md);
}

.password-toggle-btn:hover {
    color: var(--color-text-main);
}

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

.forgot-link {
    font-size: 0.85rem;
    font-weight: 500;
}

.auth-submit {
    width: 100%;
    margin-top: var(--spacing-2);
    padding: var(--spacing-3);
    font-size: 1rem;
    font-weight: 600;
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: var(--spacing-6) 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--color-border);
}

.auth-divider span {
    padding: 0 var(--spacing-3);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

/* SSO Buttons */
.sso-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}

.sso-btn {
    width: 100%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.9rem;
    padding: var(--spacing-2) var(--spacing-3);
}

.sso-btn:hover {
    background-color: var(--color-bg);
    border-color: var(--color-text-muted);
}

.sso-icon {
    width: 18px;
    height: 18px;
    margin-right: var(--spacing-2);
}

.x-icon {
    /* For X.com icon since it has no background color from SVG repo */
    color: var(--color-text-main);
}

.auth-footer {
    font-size: 0.9rem;
}

.auth-footer p {
    margin-bottom: 0;
}

.auth-footer a {
    font-weight: 600;
}

/* Helpers */
.auth-message {
    margin-top: var(--spacing-4);
    font-size: 0.875rem;
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    text-align: center;
}

.auth-message.error {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.auth-message.success {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.hide {
    display: none;
}

/* --- End: components/auth-forms.css --- */

/* Premium Landing Page Custom Styles */
/* --- Start: landing.css --- */
/* IELTSSimulator Premium Landing Page Styles */

/* ----------------------------------------------------
   1. CORE VARIABLES, DESIGN TOKENS & KEYFRAMES
   ---------------------------------------------------- */
:root {
    /* Main Theme Palette (Premium SaaS Slate + Vibrant Gradients) */
    --color-primary: #081F62;
    --color-primary-hover: #051747;
    --color-primary-glow: rgba(8, 31, 98, 0.15);

    --color-secondary: #535F80;
    --color-secondary-hover: #434d69;
    --color-secondary-glow: rgba(83, 95, 128, 0.15);

    --color-text-main: #051747;
    --color-text-muted: #535F80;
    --color-bg: #FEFEFE;

    /* Luxury Glassmorphism Utilities */
    --color-glass-bg: rgba(255, 255, 255, 0.45);
    --color-glass-border: rgba(255, 255, 255, 0.6);
    --color-glass-card-border: rgba(231, 233, 240, 0.8);
    --color-glass-glow-border: rgba(8, 31, 98, 0.2);

    /* Shadow tokens */
    --shadow-premium: 0 10px 40px -10px rgba(5, 23, 71, 0.03), 0 0 1px 0 rgba(5, 23, 71, 0.05);
    --shadow-premium-hover: 0 25px 50px -12px rgba(5, 23, 71, 0.08), 0 0 0 1px rgba(8, 31, 98, 0.05);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --shadow-glow: 0 15px 30px -8px rgba(8, 31, 98, 0.35), 0 0 15px 2px rgba(83, 95, 128, 0.15);

    /* Sleek Gradients */
    --grad-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --grad-text: linear-gradient(135deg, var(--color-text-main) 30%, var(--color-primary) 100%);
    --grad-badge: linear-gradient(90deg, rgba(8, 31, 98, 0.06) 0%, rgba(83, 95, 128, 0.06) 100%);
    --grad-badge-border: linear-gradient(90deg, rgba(8, 31, 98, 0.25) 0%, rgba(83, 95, 128, 0.25) 100%);
    --grad-glow: radial-gradient(circle, rgba(8, 31, 98, 0.12) 0%, rgba(83, 95, 128, 0.12) 50%, transparent 100%);
}

/* Base resets & typography for landing */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    background-image:
        radial-gradient(at 0% 0%, rgba(8, 31, 98, 0.05) 0px, transparent 40%),
        radial-gradient(at 100% 0%, rgba(83, 95, 128, 0.05) 0px, transparent 40%),
        radial-gradient(at 50% 50%, rgba(8, 31, 98, 0.03) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(83, 95, 128, 0.04) 0px, transparent 40%);
    background-attachment: fixed;
    font-family: 'Inter', sans-serif;
    color: var(--color-text-main);
    overflow-x: hidden;
    position: relative;
    letter-spacing: -0.01em;
}

/* ----------------------------------------------------
   2. DYNAMIC AMBIENT LIGHTS & FLOATING ELEMENTS
   ---------------------------------------------------- */
.glow-blob-1,
.glow-blob-2,
.glow-blob-3 {
    position: absolute;
    border-radius: 50%;
    z-index: -2;
    pointer-events: none;
    opacity: 0.8;
}

.glow-blob-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(8, 31, 98, 0.08) 0%, transparent 70%);
    top: -200px;
    left: -150px;
    filter: blur(120px);
    animation: floatBlob1 25s infinite alternate ease-in-out;
}

.glow-blob-2 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(83, 95, 128, 0.07) 0%, transparent 70%);
    top: 250px;
    right: -250px;
    filter: blur(130px);
    animation: floatBlob2 30s infinite alternate-reverse ease-in-out;
}

.glow-blob-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(8, 31, 98, 0.05) 0%, transparent 70%);
    top: 700px;
    left: 20%;
    filter: blur(110px);
    animation: floatBlob1 28s infinite alternate ease-in-out 3s;
}

@keyframes floatBlob1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(40px, 60px) scale(1.1);
    }

    100% {
        transform: translate(-20px, 30px) scale(0.95);
    }
}

@keyframes floatBlob2 {
    0% {
        transform: translate(0, 0) scale(1.05);
    }

    50% {
        transform: translate(-60px, -40px) scale(0.9);
    }

    100% {
        transform: translate(30px, 50px) scale(1.15);
    }
}

/* Subtle Floating Background IELTS Modules */
.floating-bg-item {
    position: absolute;
    background: rgba(8, 31, 98, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(8, 31, 98, 0.18);
    box-shadow: 0 8px 24px 0 rgba(8, 31, 98, 0.08);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 9999px;
    z-index: 3;
    cursor: default;
    user-select: none;
    opacity: 0.85;
    transition: opacity 0.5s ease, background 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
}

.floating-bg-item:hover {
    opacity: 1;
    background: rgba(8, 31, 98, 0.18);
    border-color: rgba(8, 31, 98, 0.4);
    box-shadow: 0 8px 28px 0 rgba(8, 31, 98, 0.3);
    transform: scale(1.06);
}

.bg-item-listening {
    top: 22%;
    left: -140px;
    animation: floatSin 14s infinite ease-in-out;
}

.bg-item-reading {
    top: 60%;
    left: -140px;
    animation: floatSin 18s infinite ease-in-out 1.5s;
}

.bg-item-writing {
    top: 22%;
    right: -140px;
    animation: floatSin 16s infinite ease-in-out 3s;
}

.bg-item-speaking {
    top: 60%;
    right: -140px;
    animation: floatSin 20s infinite ease-in-out 0.5s;
}

@keyframes floatSin {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(1.5deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* ----------------------------------------------------
   3. STICKY NAVBAR (GLASSMORPHISM WITH SATURATION)
   ---------------------------------------------------- */
.navbar {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1180px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(231, 233, 240, 0.8);
    border-radius: 9999px;
    box-shadow: 0 10px 30px -10px rgba(5, 23, 71, 0.14);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0.5rem 0;
}

.navbar.scrolled {
    top: 10px;
    padding: 0.4rem 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px -10px rgba(5, 23, 71, 0.2);
}

/* Admin panel keeps its original full-width flush navbar — excluded from the pill header theme */
.admin-navbar,
.admin-navbar.scrolled {
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    border: none;
    border-radius: 0;
    padding: 1.25rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05), 0 10px 28px -18px rgba(15, 23, 42, 0.25);
}

.admin-navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ef4444 0%, #f97316 35%, #ef4444 70%, #b91c1c 100%);
}

.admin-navbar .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.32rem;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.admin-navbar .logo::before {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 11px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #f87171 0%, #ef4444 45%, #b91c1c 100%);
    box-shadow: 0 8px 18px -6px rgba(239, 68, 68, 0.55);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    -webkit-mask-size: 58%;
    mask-size: 58%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.admin-navbar .nav-links {
    gap: 0.35rem;
}

.admin-navbar .nav-link {
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #475569;
    transition: color 0.25s ease, background 0.25s ease;
}

.admin-navbar .nav-link:hover {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
}

.admin-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #ffffff !important;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none !important;
    margin-left: 0.75rem;
    box-shadow: 0 8px 18px -6px rgba(239, 68, 68, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.admin-help-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -6px rgba(239, 68, 68, 0.55);
}

.admin-navbar .mobile-menu-btn {
    border-color: rgba(239, 68, 68, 0.25);
    color: #b91c1c;
}

.admin-navbar .mobile-menu-btn:hover {
    background: rgba(239, 68, 68, 0.08);
}

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

.logo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.logo:hover {
    transform: scale(1.01);
}

.logo span {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.25rem;
}

.nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    font-weight: 500;
    transition: color 0.25s ease;
    position: relative;
    text-decoration: none !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--grad-primary);
    transition: width 0.25s ease;
    border-radius: 99px;
}

.nav-link:hover {
    color: var(--color-text-main);
}

.nav-link:hover::after {
    width: 100%;
}

/* Custom pills buttons on Nav */
.btn-nav-help {
    background: rgba(83, 95, 128, 0.07) !important;
    color: var(--color-secondary) !important;
    border: 1px solid rgba(83, 95, 128, 0.15) !important;
    padding: 0.5rem 1.35rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none;
}

.btn-nav-help:hover {
    background: var(--color-secondary) !important;
    color: white !important;
    transform: translateY(-1.5px);
    box-shadow: 0 6px 15px rgba(83, 95, 128, 0.2);
    border-color: var(--color-secondary) !important;
}

.btn-nav-start {
    background: var(--grad-primary);
    color: white !important;
    padding: 0.6rem 1.6rem !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 4px 15px -3px rgba(8, 31, 98, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: none !important;
    text-decoration: none;
}

.btn-nav-start:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 22px -3px rgba(8, 31, 98, 0.4), 0 0 12px 1px rgba(83, 95, 128, 0.18);
}

.mobile-menu-btn {
    display: none;
    background: var(--color-glass-bg);
    border: 1px solid rgba(231, 233, 240, 0.8);
    padding: 0.55rem;
    border-radius: 10px;
    cursor: pointer;
    color: var(--color-text-main);
    transition: all 0.2s ease;
}

.mobile-menu-btn:hover {
    background: rgba(5, 23, 71, 0.05);
}

/* ----------------------------------------------------
   4. HERO SECTION (2 COLUMNS & HIGH END ILLUSTRATIONS)
   ---------------------------------------------------- */
.hero-container {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 4.5rem;
    align-items: center;
    min-height: calc(100vh - 120px);
    padding-top: 92px;
    padding-bottom: 70px;
}

/* Full-bleed video hero: breaks out of .container's max-width to span the
   whole viewport, with the video as a background layer behind the text. */
.hero-container.hero-video-section {
    display: flex;
    align-items: center;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    min-height: 100vh;
    padding: 130px 0 70px;
    overflow: hidden;
}

.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-video-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
            rgba(5, 23, 71, 0.85) 0%,
            rgba(5, 23, 71, 0.6) 42%,
            rgba(5, 23, 71, 0.32) 70%,
            rgba(5, 23, 71, 0.12) 100%);
    z-index: 1;
}

.hero-video-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-video-section .hero-left {
    max-width: 680px;
}

.hero-video-section .hero-title {
    color: #ffffff;
}

.hero-video-section .hero-title span {
    background: linear-gradient(135deg, #7dd3fc 0%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-video-section .hero-title span::after {
    display: none;
}

.hero-video-section .hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Glowing Pulsing Badge above Heading */
.badge-container {
    display: inline-flex;
    align-items: center;
    padding: 1px;
    background: var(--grad-badge-border);
    border-radius: 9999px;
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 15px -3px rgba(8, 31, 98, 0.05);
    animation: badgePulse 3.5s infinite alternate ease-in-out;
}

.animated-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 9999px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

.badge-dot {
    width: 7px;
    height: 7px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.badge-dot::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 1.5px solid var(--color-primary);
    animation: blinkDotRing 1.8s infinite;
}

@keyframes badgePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(8, 31, 98, 0.06);
    }

    100% {
        box-shadow: 0 0 15px 4px rgba(83, 95, 128, 0.16);
    }
}

@keyframes blinkDotRing {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* Visually Strong Headings */
.hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.6rem, 4.6vw, 3.95rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: var(--color-text-main);
    margin-bottom: 1.4rem;
    text-align: left;
}

.hero-title span {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
}

.hero-title span::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(83, 95, 128, 0.08);
    z-index: -1;
    border-radius: 4px;
}

.hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 590px;
    margin-bottom: 2.5rem;
    text-align: left;
}

/* CTA buttons with gradient color & scale */
.hero-actions {
    display: flex;
    gap: 1.15rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.hero-btn-primary {
    background: var(--grad-primary);
    color: white !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: 9999px;
    padding: 1.05rem 2.4rem;
    font-size: 1.05rem;
    border: none;
    box-shadow: 0 10px 25px -8px rgba(8, 31, 98, 0.45);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-btn-primary svg {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-btn-primary:hover {
    transform: translateY(-2px) scale(1.025);
    box-shadow: var(--shadow-glow);
}

.hero-btn-primary:hover svg {
    transform: translateX(4px);
}

.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-text-main) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: 9999px;
    padding: 1.05rem 2.4rem;
    font-size: 1.05rem;
    border: 1px solid var(--color-glass-card-border);
    box-shadow: 0 4px 15px -3px rgba(5, 23, 71, 0.02);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-btn-secondary:hover {
    transform: translateY(-2px) scale(1.025);
    background: #ffffff;
    border-color: rgba(8, 31, 98, 0.35);
    box-shadow: 0 10px 22px -10px rgba(5, 23, 71, 0.08);
}

/* Right Device illustration column styling */
.hero-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image-bg-glow {
    position: absolute;
    width: 120%;
    height: 120%;
    background: var(--grad-glow);
    filter: blur(60px);
    z-index: -1;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 490px;
    perspective: 1200px;
}

.hero-image {
    width: 100%;
    height: auto;
    border-radius: 28px;
    box-shadow:
        0 30px 70px -15px rgba(5, 23, 71, 0.16),
        0 0 0 1px rgba(5, 23, 71, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    animation: floatDashboard 8s ease-in-out infinite;
}

.hero-video {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #000;
    display: block;
}

.hero-image-wrapper:hover .hero-image {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(-1.5deg);
    box-shadow:
        0 40px 85px -20px rgba(5, 23, 71, 0.22),
        0 0 0 1px rgba(8, 31, 98, 0.08);
}

@keyframes floatDashboard {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-14px) rotate(0.4deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* Premium Floating glass badges around mockup */
.floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 15px 35px -10px rgba(5, 23, 71, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text-main);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.floating-card-icon {
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-card-1 {
    top: 10%;
    left: -14%;
    animation: floatCardSubtle 6s ease-in-out infinite;
}

.floating-card-2 {
    bottom: 22%;
    right: -14%;
    animation: floatCardSubtle 7s ease-in-out infinite 1.5s;
}

.floating-card-3 {
    bottom: -8%;
    left: 8%;
    animation: floatCardSubtle 8s ease-in-out infinite 3s;
}

@keyframes floatCardSubtle {
    0% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.02);
    }

    100% {
        transform: translateY(0px) scale(1);
    }
}

/* ----------------------------------------------------
   5. TRUST & STATS SECTION (GLASS CONTAINER DESIGN)
   ---------------------------------------------------- */
.stats-section {
    margin-top: 2rem;
    padding: 4rem 0;
    background: linear-gradient(150deg, #081F62 0%, #051747 100%);
    box-shadow: 0 30px 60px -20px rgba(5, 23, 71, 0.4);
    text-align: center;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    overflow: hidden;
    z-index: 5;
}

.stats-inner {
    position: relative;
    z-index: 2;
    padding: 0 2.5rem;
}

.stats-streaks {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 60px);
    pointer-events: none;
    z-index: 0;
}

.stats-glow-1 {
    position: absolute;
    top: -120px;
    right: -80px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(83, 95, 128, 0.35), transparent 70%);
    pointer-events: none;
}

.stats-glow-2 {
    position: absolute;
    bottom: -140px;
    left: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 44, 130, 0.45), transparent 70%);
    pointer-events: none;
}

.stats-badge {
    position: relative;
    z-index: 2;
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid #7dd3fc;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    margin-bottom: 3.5rem;
    letter-spacing: 0.01em;
}

.stats-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 3rem;
    column-gap: 4rem;
}

.stat-card {
    position: relative;
}

.stat-card-wide {
    grid-column: 1 / -1;
    max-width: 320px;
    margin: 0 auto;
}

.stat-line {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #7dd3fc);
    margin-bottom: 1rem;
}

.stat-card .stat-line:last-of-type {
    margin-bottom: 0;
    margin-top: 1rem;
}

.stat-number {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.1rem, 3.6vw, 2.9rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0;
    letter-spacing: -0.03em;
}

.stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.01em;
    margin-top: 0.85rem;
}

/* ----------------------------------------------------
   5b. ABOUT SECTION
   ---------------------------------------------------- */
.about-section {
    padding: 4.5rem 0 2rem;
    position: relative;
    z-index: 5;
}

.about-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: center;
}

/* Left: 4-Module Visual (stands in for a photo) */
.about-visual {
    position: relative;
    width: 100%;
}

.about-visual-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    background: linear-gradient(150deg, #081F62 0%, #051747 100%);
    border-radius: 28px;
    padding: 2.25rem;
    box-shadow: 0 30px 60px -20px rgba(5, 23, 71, 0.35);
    position: relative;
    overflow: hidden;
}

.about-visual-card::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -30%;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(83, 95, 128, 0.35) 0%, transparent 70%);
    pointer-events: none;
}

/* Photo slider variant of the about-visual card */
.about-visual-card.about-slider {
    display: block;
    width: 100%;
    padding: 0;
    aspect-ratio: 1 / 1;
}

.about-visual-card.about-slider::before {
    display: none;
}

.about-slider-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.about-slider-img-1 {
    opacity: 1;
    animation: aboutSliderFade 20s ease-in-out infinite;
}

.about-slider-img-2 {
    opacity: 0;
    animation: aboutSliderFade 20s ease-in-out infinite;
    animation-delay: 5s;
}

.about-slider-img-3 {
    opacity: 0;
    animation: aboutSliderFade 20s ease-in-out infinite;
    animation-delay: 10s;
}

.about-slider-img-4 {
    opacity: 0;
    animation: aboutSliderFade 20s ease-in-out infinite;
    animation-delay: 15s;
}

@keyframes aboutSliderFade {

    0%,
    20% {
        opacity: 1;
    }

    25%,
    95% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.about-slider-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 23, 71, 0) 55%, rgba(5, 23, 71, 0.5) 100%);
    z-index: 2;
    pointer-events: none;
}

.module-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    position: relative;
    z-index: 2;
}

.module-tile-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.module-tile span {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.98rem;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.about-visual-badge {
    position: absolute;
    bottom: -1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.7rem 1.4rem;
    box-shadow: 0 10px 30px -8px rgba(5, 23, 71, 0.18);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text-main);
    white-space: nowrap;
    z-index: 3;
    animation:
        aboutBadgePopIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
        aboutBadgeFloat 3.5s ease-in-out 1s infinite;
}

@keyframes aboutBadgePopIn {
    0% {
        transform: translateX(-50%) translateY(14px) scale(0.85);
        opacity: 0;
    }

    70% {
        transform: translateX(-50%) translateY(-4px) scale(1.04);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes aboutBadgeFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-6px);
    }
}

.about-visual-badge-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: white;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.about-visual-badge-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(8, 31, 98, 0.45);
    animation: aboutBadgeIconRing 2.4s ease-out 1s infinite;
}

@keyframes aboutBadgeIconRing {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* Right: Content */
.about-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-primary);
    margin-bottom: 0.9rem;
}

.about-title {
    text-align: left;
    margin-top: 0;
}

.about-content p {
    font-family: 'Inter', sans-serif;
    font-size: 1.04rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

.about-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.85rem 1.9rem;
    background: var(--grad-primary);
    color: white !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 10px 25px -8px rgba(8, 31, 98, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px rgba(8, 31, 98, 0.45);
}

/* Four Modules Detail Section */
.modules-detail-section {
    padding: 6rem 0 4rem;
    position: relative;
    z-index: 5;
}

.modules-detail-section .section-title {
    display: inline-block;
    position: relative;
    padding-bottom: 1.1rem;
}

.modules-detail-section .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #081F62, #38bdf8, #081F62);
    background-size: 200% 100%;
    animation:
        moduleTitleUnderlineGrow 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards,
        moduleTitleUnderlineShimmer 3s linear infinite 1.1s;
}

@keyframes moduleTitleUnderlineGrow {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes moduleTitleUnderlineShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.modules-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
}

.module-detail-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 2rem 1.6rem;
}

.module-detail-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(8, 31, 98, 0.08);
    color: var(--color-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 1.1rem;
}

.module-detail-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.6rem;
}

.module-detail-card p {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

.module-detail-video {
    width: 100%;
    display: block;
    margin-top: 1.2rem;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    background: #000;
}

.module-detail-card-video {
    padding: 0;
    position: relative;
    aspect-ratio: 0.85;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-detail-card-video:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -12px rgba(5, 23, 71, 0.35);
}

/* Corner-bracket hover accent, sitting just outside the box edge — needs its
   own (non-clipping) stacking context, so the video/rounded-corner clipping
   lives on .module-detail-video-inner instead of this outer card. */
.module-detail-card-video::before,
.module-detail-card-video::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-color: #0b2c82;
    border-style: solid;
    border-width: 0;
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.4s ease, width 0.4s ease, height 0.4s ease;
}

.module-detail-card-video::before {
    top: -10px;
    left: -10px;
    border-top-width: 4px;
    border-left-width: 4px;
    border-radius: 8px 0 0 0;
}

.module-detail-card-video::after {
    bottom: -10px;
    right: -10px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-radius: 0 0 8px 0;
}

.module-detail-card-video:hover::before,
.module-detail-card-video:hover::after {
    opacity: 1;
    width: 46px;
    height: 46px;
}

.module-detail-video-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.module-detail-card-video .module-detail-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border: none;
    border-radius: 16px;
    box-shadow: none;
}

.module-detail-video-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 1.4rem;
    display: flex;
    align-items: flex-start;
}

.module-detail-video-overlay .module-detail-number {
    position: relative;
    background: linear-gradient(135deg, #0b2c82, #051747);
    color: #fff;
    margin-bottom: 0;
    box-shadow: 0 6px 16px rgba(5, 23, 71, 0.5);
    animation: moduleBadgePopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.module-detail-video-overlay .module-detail-number::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    animation: moduleBadgeRingPulse 2.2s ease-out infinite;
}

@keyframes moduleBadgePopIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes moduleBadgeRingPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* ----------------------------------------------------
   6. FEATURES HIGHLIGHTS SECTION
   ---------------------------------------------------- */
.features-section {
    padding: 8rem 0 6rem;
    position: relative;
    z-index: 5;
}

.section-header {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 5rem;
}

.section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.1rem, 3.6vw, 2.6rem);
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 1.15rem;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.section-title span {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.65rem;
}

.feature-slide {
    background: #ffffff;
    border: 1px solid rgba(231, 233, 240, 0.85);
    border-radius: 10px;
    padding-bottom: 1.4rem;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px -15px rgba(5, 23, 71, 0.02);
    opacity: 0;
    transform: translateY(28px);
}

.feature-slide.in-view {
    animation: featureCardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.feature-slide.in-view:nth-child(1) {
    animation-delay: 0s;
}

.feature-slide.in-view:nth-child(2) {
    animation-delay: 0.12s;
}

.feature-slide.in-view:nth-child(3) {
    animation-delay: 0.24s;
}

.feature-slide.in-view:nth-child(4) {
    animation-delay: 0.36s;
}

@keyframes featureCardIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feature-slide:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px -15px rgba(8, 31, 98, 0.08), 0 0 0 1px rgba(8, 31, 98, 0.04);
    border-color: rgba(8, 31, 98, 0.2);
}

.feature-slide-media {
    position: relative;
    height: 100px;
    background: linear-gradient(150deg, #081F62 0%, #051747 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-bottom: 1.15rem;
    transition: color 0.4s ease;
}

.feature-slide-media.feature-slide-media-photo {
    background-image: linear-gradient(150deg, rgba(8, 31, 98, 0.82) 0%, rgba(5, 23, 71, 0.85) 100%),
        url('../images/feature-simulation-bg.jpg');
    background-size: cover;
    background-position: center;
}

.feature-slide-media.feature-slide-media-ai {
    background-image: linear-gradient(150deg, rgba(8, 31, 98, 0.82) 0%, rgba(5, 23, 71, 0.85) 100%),
        url('../images/feature-ai-band-bg.jpg');
    background-size: cover;
    background-position: center;
}

.feature-slide-media.feature-slide-media-feedback {
    background-image: linear-gradient(150deg, rgba(8, 31, 98, 0.82) 0%, rgba(5, 23, 71, 0.85) 100%),
        url('../images/feature-feedback-bg.jpg');
    background-size: cover;
    background-position: center;
}

.feature-slide-media.feature-slide-media-analytics {
    background-image: linear-gradient(150deg, rgba(8, 31, 98, 0.82) 0%, rgba(5, 23, 71, 0.85) 100%),
        url('../images/feature-analytics-bg.png');
    background-size: cover;
    background-position: center;
}

.feature-slide:hover .feature-slide-media svg {
    transform: scale(1.12);
}

.feature-slide-media svg {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-slide-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
}

.feature-slide .feature-card-title,
.feature-slide .feature-card-desc {
    padding: 0 1.4rem;
}

.feature-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.6rem;
    letter-spacing: -0.02em;
}

.feature-card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ----------------------------------------------------
   7. PREMIUM SAAS FOOTER COMPONENT
   ---------------------------------------------------- */
/* Pre-Footer CTA + Footer share one continuous background photo — see .footer-photo-wrap below */
.footer-cta-banner {
    position: relative;
    padding: 6rem 0 10rem;
    text-align: center;
    z-index: 2;
}

.footer-cta-banner-inner {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
}

.footer-cta-banner-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.footer-cta-banner-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.footer-cta-banner-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-primary-gradient {
    background: linear-gradient(135deg, #ffffff, #E7E9F0);
    color: #081F62 !important;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.9rem 2.3rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 12px 25px -6px rgba(0, 0, 0, 0.35);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary-gradient:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 30px -6px rgba(0, 0, 0, 0.4);
    color: #081F62;
}

.btn-glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.9rem 2.3rem;
    border-radius: 9999px;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-2px) scale(1.02);
}

/* SaaS Footer (dark navy, matching site theme) */
.footer-photo-wrap {
    position: relative;
    overflow: hidden;
    background: #051747;
}

.footer-photo-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.footer-photo-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 31, 98, 0.86) 0%, rgba(5, 23, 71, 0.85) 100%);
    z-index: 1;
}

.footer-saas {
    background: transparent;
    padding: 0 0 0;
    font-family: 'Inter', sans-serif;
    position: relative;
    z-index: 2;
}

.footer-saas::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top center, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

.footer-white-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    padding: 3.5rem 3rem 2.25rem;
    margin-top: -7rem;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 20;
}

.footer-watermark {
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(1.2rem, 7.5vw, 8rem);
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    user-select: none;
    margin-top: 1.5rem;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.09) 0%,
            rgba(0, 0, 0, 0.09) 35%,
            rgba(0, 0, 0, 0.32) 50%,
            rgba(0, 0, 0, 0.09) 65%,
            rgba(0, 0, 0, 0.09) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: watermarkShimmer 7s ease-in-out infinite;
}

@keyframes watermarkShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.footer-bottom-strip {
    position: relative;
    z-index: 2;
    padding: 2.75rem 0;
    margin-top: 3rem;
}

.footer-trust-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-bottom: 4rem;
    padding-bottom: 3rem;
    border-bottom: 1px dashed rgba(231, 233, 240, 0.8);
}

.trust-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #535F80;
    font-size: 0.95rem;
    padding-left: 4px;
    transition: color 0.35s ease;
}

.trust-badge svg {
    position: relative;
    z-index: 2;
    color: #535F80;
    transition: color 0.35s ease, transform 0.35s ease;
}

.trust-badge::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 2px solid rgba(8, 31, 98, 0.45);
    animation: trustBadgePulse 2.6s ease-out infinite;
    pointer-events: none;
}

.trust-badge:nth-child(2)::before {
    animation-delay: 0.4s;
}

.trust-badge:nth-child(3)::before {
    animation-delay: 0.8s;
}

.trust-badge:nth-child(4)::before {
    animation-delay: 1.2s;
}

.trust-badge:hover {
    color: #081F62;
}

.trust-badge:hover svg {
    color: #081F62;
    transform: scale(1.15);
}

@keyframes trustBadgePulse {
    0% {
        transform: translateY(-50%) scale(1);
        opacity: 0.7;
    }

    70% {
        transform: translateY(-50%) scale(2);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.footer-grid-4 {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.9fr 1.3fr;
    gap: 3.5rem;
    margin-bottom: 4rem;
}

.footer-saas-logo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #051747;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 1.2rem;
    letter-spacing: -0.04em;
}

.footer-saas-logo span {
    background: linear-gradient(135deg, #081F62, #535F80);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-saas-desc {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.footer-saas-socials {
    display: flex;
    gap: 0.75rem;
}

.saas-social-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #FEFEFE;
    border: 1px solid #E7E9F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.saas-social-icon:hover {
    background: linear-gradient(135deg, #081F62, #535F80);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2.5px);
    box-shadow: 0 8px 16px -4px rgba(8, 31, 98, 0.3);
}

.footer-saas-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    color: #051747;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.footer-saas-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.footer-saas-list a {
    color: #64748b;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.25s ease;
    display: inline-block;
}

.footer-saas-list a:hover {
    color: #081F62;
    transform: translateX(2px);
}

.footer-saas-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    max-width: 100%;
}

.footer-saas-form input {
    flex: 1;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid #E7E9F0;
    background: #FEFEFE;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 1px 2px rgba(5, 23, 71, 0.02);
}

.footer-saas-form input:focus {
    border-color: #081F62;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(8, 31, 98, 0.1), inset 0 1px 2px rgba(5, 23, 71, 0.02);
}

.footer-saas-form button {
    background: linear-gradient(135deg, #081F62, #535F80);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-saas-form button:hover {
    box-shadow: 0 4px 12px rgba(8, 31, 98, 0.25);
    transform: scale(1.02);
}

.btn-whatsapp-support {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(37, 211, 102, 0.08);
    color: #16a34a;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 1.75rem;
    border: 1px solid rgba(37, 211, 102, 0.2);
    font-size: 0.95rem;
}

.btn-whatsapp-support:hover {
    background: #25D366;
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 8px 16px -4px rgba(37, 211, 102, 0.25);
    transform: translateY(-2px);
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-contact-info a {
    color: #64748b;
    text-decoration: none;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

.footer-contact-info a:hover {
    color: #081F62;
}

.footer-contact-info svg {
    color: #94a3b8;
}

.footer-saas-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(231, 233, 240, 0.8), transparent);
    margin: 0 0 2rem 0;
}

.footer-saas-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
}

.footer-bottom-center {
    display: flex;
    gap: 1.75rem;
}

.footer-bottom-center a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bottom-center a:hover {
    color: #ffffff;
}

.footer-bottom-right {
    font-weight: 500;
}

/* ----------------------------------------------------
   8. ENHANCED LOAD TRANSITIONS (PREMIUM FADE UP)
   ---------------------------------------------------- */
.fade-up-element {
    opacity: 0;
    transform: translateY(28px);
    animation: fadeUpIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 {
    animation-delay: 0.12s;
}

.delay-150 {
    animation-delay: 0.18s;
}

.delay-200 {
    animation-delay: 0.24s;
}

.delay-300 {
    animation-delay: 0.36s;
}

.delay-400 {
    animation-delay: 0.48s;
}

@keyframes fadeUpIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------------------
   9. MOBILE & TABLET RESPONSIVENESS
   ---------------------------------------------------- */
@media (max-width: 1200px) {
    .hero-container {
        gap: 2.5rem;
    }

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

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

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 4.5rem;
        text-align: center;
        padding-top: 86px;
        padding-bottom: 50px;
    }

    .hero-left {
        align-items: center;
        text-align: center;
    }

    .hero-title,
    .hero-subtitle {
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .floating-card-1 {
        left: -4%;
    }

    .floating-card-2 {
        right: -4%;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .about-visual {
        max-width: 420px;
        margin: 0 auto 1.75rem;
    }

    .about-content {
        text-align: center;
    }

    .about-title {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* Controlled by JS active toggle class */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        /* Fully solid, not translucent: the content scrolled behind the
           fixed navbar was showing through this dropdown (visible as
           "ghosted" text) when relying on rgba()+backdrop-filter alone. */
        background: var(--color-surface);
        padding: 2.2rem 1.75rem;
        border-bottom: 1.5px solid var(--color-glass-card-border);
        box-shadow: 0 25px 40px rgba(5, 23, 71, 0.08);
        gap: 1.6rem;
        align-items: stretch;
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-link {
        font-size: 1.05rem;
        padding: 0.6rem 0;
        border-bottom: 1px solid rgba(231, 233, 240, 0.6);
    }

    .nav-link::after {
        display: none;
    }

    /* Mobile dropdown panel is light — override the blue-navbar white text back to dark for contrast */
    .nav-links.active .nav-link {
        color: var(--color-text-main);
    }

    .nav-links.active .nav-link:hover {
        color: var(--color-primary);
    }

    .btn-nav-help,
    .btn-nav-start {
        text-align: center;
        width: 100%;
        padding: 0.75rem !important;
    }

    .mobile-menu-btn {
        display: block;
    }

    .stats-section {
        padding: 2.5rem 0;
    }

    .stats-inner {
        padding: 0 1.5rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        row-gap: 2.25rem;
    }

    .stat-card-wide {
        max-width: none;
    }

    .floating-bg-item {
        display: none;
        /* Hide decorative floating elements on mobile for performance */
    }

    .footer-grid-4 {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: left;
    }

    .footer-cta-banner {
        padding: 4.5rem 0 8rem;
    }

    .footer-white-card {
        padding: 2.5rem 1.5rem 1.75rem;
        margin-top: -5.5rem;
        border-radius: 18px;
    }

    .footer-saas-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .footer-bottom-center {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 576px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .modules-detail-grid {
        grid-template-columns: 1fr;
    }

    .about-visual-card {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 2.3rem;
    }

    .floating-card {
        padding: 10px 14px;
        font-size: 0.78rem;
    }

    .floating-card-1 {
        left: -2%;
        top: 6%;
    }

    .floating-card-2 {
        right: -2%;
        bottom: 24%;
    }
}

/* --- End: landing.css --- */
/* ---------------------------------------------------------------------------
   Four Modules - captions over the video cards

   The cards previously showed only a number (1-4), so a visitor could not tell
   which module each video belonged to. The name, real duration and marking
   method now sit at the bottom of each card.

   Written as an overlay rather than a block below the video so the card keeps
   its existing aspect-ratio and the desktop layout is unchanged.
   --------------------------------------------------------------------------- */

/* Number to the top, caption to the bottom. */
.module-detail-card-video .module-detail-video-overlay {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

/* Scrim: video frames vary, so text needs a guaranteed contrast floor.
   Sits between the video (z-index auto) and the overlay (z-index 2). */
.module-detail-video-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    z-index: 1;
    opacity: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(5, 23, 71, 0.94) 0%,
        rgba(5, 23, 71, 0.80) 34%,
        rgba(5, 23, 71, 0.20) 62%,
        rgba(5, 23, 71, 0.42) 100%
    );
}

/* The number chip is dark-on-light by default, which disappears on the scrim. */
.module-detail-card-video .module-detail-number {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    margin-bottom: 0;
    flex: none;
}

.module-detail-caption {
    position: relative;
    z-index: 2;
}

/* Overrides .module-detail-card h3, which is dark for the non-video cards. */
.module-detail-card-video .module-detail-caption h3 {
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0 0 0.3rem;
}

.module-detail-card-video .module-detail-meta {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 0.55rem;
}

.module-detail-card-video .module-detail-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

/* Tablet: 2 columns, cards get wider so the text can breathe. */
@media (max-width: 992px) {
    .module-detail-card-video .module-detail-caption h3 {
        font-size: 1.15rem;
    }
    .module-detail-card-video .module-detail-desc {
        font-size: 0.88rem;
    }
}

/* Phone: single column and much wider cards - relax the aspect ratio so the
   video does not become disproportionately tall next to the text. */
@media (max-width: 768px) {
    .module-detail-card-video {
        aspect-ratio: 1.15;
    }
    .module-detail-card-video .module-detail-video-overlay {
        padding: 1.15rem;
    }
    .module-detail-card-video .module-detail-desc {
        font-size: 0.86rem;
    }
}

@media (max-width: 420px) {
    .module-detail-card-video {
        aspect-ratio: 0.95;
    }
}

/* ---------------------------------------------------------------------------
   Four Modules - fixes

   1. SCRIM ON THE WRONG PSEUDO-ELEMENT (this was the actual bug)
      The scrim was written on .module-detail-card-video::after, but that
      pseudo-element was already in use as the bottom-right corner-bracket
      hover accent. The bracket rule sets opacity:0, so the scrim inherited it
      and never painted - which is why the caption sat on bare video with no
      contrast. On hover the bracket's width/height:46px then deformed it.
      The scrim now lives on .module-detail-video-inner::after (the clipping
      container), leaving both corner brackets working as designed.

   2. CAPTION CONTRAST
      These videos have their own titles burned into the footage, so the
      caption needs a guaranteed dark base rather than relying on the frame.
      Stronger bottom gradient + a text-shadow so it stays legible even on the
      brightest frame.

   3. BADGE / BRACKET COLLISION
      The corner bracket grew to 46px on hover (spanning -10px..36px) while the
      number badge starts at 22px - so they overlapped. The bracket now grows
      to 34px, and the badge sits slightly further in.

   4. CALMER BADGE
      The infinite pulsing ring read as broken next to the bracket animation.
      The badge keeps its entrance pop, and the ring pulses briefly then stops.
   --------------------------------------------------------------------------- */

/* --- 2. stronger, deeper scrim --------------------------------------------- */
.module-detail-video-inner::after {
    background: linear-gradient(
        to top,
        rgba(4, 17, 54, 0.97) 0%,
        rgba(4, 17, 54, 0.94) 35%,
        rgba(4, 17, 54, 0.86) 55%,
        rgba(4, 17, 54, 0.70) 70%,
        rgba(4, 17, 54, 0.28) 84%,
        rgba(4, 17, 54, 0.46) 100%
    );
}

.module-detail-card-video .module-detail-caption h3,
.module-detail-card-video .module-detail-meta,
.module-detail-card-video .module-detail-desc {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.module-detail-card-video .module-detail-caption h3 {
    letter-spacing: -0.01em;
}

.module-detail-card-video .module-detail-desc {
    color: rgba(255, 255, 255, 0.95);
}

/* --- 3. stop the bracket reaching the badge -------------------------------- */
.module-detail-card-video:hover::before,
.module-detail-card-video:hover::after {
    width: 34px;
    height: 34px;
}

/* --- 4. calmer badge ------------------------------------------------------- */
.module-detail-video-overlay .module-detail-number {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(4, 17, 54, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    margin-left: 2px;
    margin-top: 2px;
}

/* Ring pulses three times on entry, then rests - no perpetual motion. */
.module-detail-video-overlay .module-detail-number::after {
    border-color: rgba(255, 255, 255, 0.7);
    animation: moduleBadgeRingPulse 2.2s ease-out 3;
}

@media (prefers-reduced-motion: reduce) {
    .module-detail-video-overlay .module-detail-number,
    .module-detail-video-overlay .module-detail-number::after {
        animation: none;
    }
}