/* =====================================================
   UDEWAY - Advanced Duolingo-Style CSS
   ===================================================== */

/* CSS Variables */
:root {
    /* Primary Colors */
    --primary: #58CC00;
    --primary-dark: #46A302;
    --primary-light: #7EE03D;
    --primary-glow: rgba(88, 204, 0, 0.4);

    /* Secondary Colors */
    --secondary: #1CB0F6;
    --secondary-dark: #1899D6;

    /* Accent Colors */
    --purple: #A560E8;
    --purple-dark: #8A4BC9;
    --pink: #FF4B8C;
    --pink-dark: #E03D78;
    --orange: #FF9600;
    --orange-dark: #E08600;
    --red: #FF4B4B;
    --red-dark: #E03D3D;

    /* Dialogflow Custom Colors */
    --primary: #22C55E;
    --primary-dark: #15803d;
    --secondary: #1E293B;
    --accent: #F59E0B;
    --bg-body: #F8FAFC;
    --text-main: #0F172A;
    --text-light: #64748B;

    /* Neutral Colors */
    --white: #FFFFFF;
    --gray-50: #F7F7F7;
    --gray-100: #E5E5E5;
    --gray-200: #CDCDCD;
    --gray-300: #AFAFAF;
    --gray-500: #777777;
    --gray-700: #4B4B4B;
    --gray-900: #1A1A1A;

    /* Special Colors */
    --footer-bg: #0A2C4E;

    /* Typography */
    --font-primary: 'Nunito', sans-serif;
    --font-display: 'Nunito', sans-serif;

    /* Spacing */
    --section-padding: 100px 0;
    --container-max: 1140px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s var(--ease-out-expo);
}

/* Dark Mode Variables */
body.dark-mode {
    --white: #131F24;
    --gray-50: #19272E;
    --gray-100: #263640;
    --gray-200: #384954;
    --gray-300: #647480;
    --gray-500: #9AA5B1;
    --gray-700: #E5E5E5;
    --gray-900: #FFFFFF;
    --primary-glow: rgba(88, 204, 2, 0.2);

    background-color: var(--gray-50);
    /* Fix body background in dark mode */
}

/* Specific overrides for dark mode that variables can't handle alone */
body.dark-mode .header {
    background: rgba(19, 31, 36, 0.95);
}

body.dark-mode .hero {
    background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
}

body.dark-mode .lottie-feature {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--white) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark-mode .download-section {
    background: linear-gradient(135deg, #0f1c21 0%, #15252b 50%, #1a2a32 100%);
}

/* Dark Mode Adjustments */
body.dark-mode .phone-frame {
    border-color: #2D3748;
    background: #1A202C;
}

body.dark-mode .phone-screen {
    background: #111;
}

body.dark-mode .path-node {
    border-color: #333;
}

body.dark-mode .path-line {
    background: #333;
}

body.dark-mode .path-node.locked {
    background: #222;
    color: #555;
}

body.dark-mode .mascot-svg {
    filter: brightness(0.9);
}

body.dark-mode .bg-circle {
    background: rgba(255, 255, 255, 0.05);
}


/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--gray-700);
    background-color: #f4f7fa;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

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

ul {
    list-style: none;
}

/* =====================================================
   STICKY HEADER
   ===================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    padding: 20px 0;
    transition: all 0.4s var(--ease-out-expo);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 0;
    box-shadow: var(--shadow-sm);
}

/* Ensure dark mode support for scrolled header */
body.dark-mode .header.scrolled {
    background: rgba(19, 31, 36, 0.95);
}

/* Persistent Solid Header (for inner pages) */
.header.solid-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 0;
    box-shadow: none;
}

body.dark-mode .header.solid-header {
    background: rgba(19, 31, 36, 0.95);
}

.header-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.logo-mascot {
    width: 44px;
    height: 44px;
    object-fit: contain;
    transition: transform var(--transition-normal);
}

.logo:hover .logo-mascot {
    transform: rotate(-10deg) scale(1.1);
}

.logo-text {
    font-family: 'Nunito', sans-serif;
    font-size: 30px;
    font-weight: 900;
    color: var(--primary);
    text-transform: lowercase;
    letter-spacing: -1px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.theme-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: color 0.3s ease, transform 0.3s ease;
    border-radius: 50%;
}

.theme-toggle:hover {
    color: var(--primary);
    background: rgba(0, 0, 0, 0.04) !important;
    /* Subtle hover effect only */
    transform: rotate(15deg);
}

body.dark-mode .theme-toggle {
    color: var(--white);
}

body.dark-mode .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.sun-icon,
.moon-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2.5px;
    /* Slightly bolder icon */
}

/* Logic for toggling icons is likely in JS, but we ensure one is hidden if CSS handles it, 
   otherwise JS handles the swapping or we just style the SVG inside. 
   Assuming JS toggles visibility or we use CSS based on body class: */

.sun-icon {
    display: none;
}

body.dark-mode .sun-icon {
    display: block;
}

body.dark-mode .moon-icon {
    display: none;
}

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

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

/* Hamburger Menu */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1002;
    padding: 0;
}

.hamburger-menu span {
    width: 100%;
    height: 3px;
    background-color: var(--gray-700);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

body.dark-mode .hamburger-menu span {
    background-color: var(--white);
}

/* Hamburger Active State */
.hamburger-menu.active span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* Mobile Menu Media Query */
@media (max-width: 1024px) {
    .hamburger-menu {
        display: flex;
    }

    .header-right {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: var(--white);
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease-in-out;
        z-index: 9999;
        padding: 60px 20px;
        visibility: visible;
        opacity: 1;
    }

    body.dark-mode .header-right {
        background: #111827;
        /* Dark background for visibility */
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    }

    .header-right.active {
        right: 0;
    }

    .nav-link {
        display: block !important;
        font-size: 20px;
        color: var(--gray-700);
        /* Ensure visibility */
        margin: 10px 0;
    }

    body.dark-mode .nav-link {
        color: var(--white);
        /* Ensure visibility in dark mode */
    }
}


/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
    user-select: none;
}

.btn-primary {
    background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
    color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 0 var(--primary-dark), 0 6px 20px var(--primary-glow);
}

.btn-primary:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--primary-dark), 0 4px 12px var(--primary-glow);
}

.btn-primary:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--primary-dark);
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: btnShine 3s infinite;
}

@keyframes btnShine {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

.btn-secondary {
    background: var(--white);
    color: var(--secondary);
    border: 2.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 0 var(--gray-200);
}

.btn-secondary:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--gray-200);
    border-color: var(--secondary);
}

.btn-header {
    padding: 10px 20px;
    font-size: 13px;
}

.btn-large {
    padding: 16px 36px;
    font-size: 15px;
    min-width: 180px;
}

.btn-text {
    position: relative;
    z-index: 1;
}


/* =====================================================
   HERO SECTION
   ===================================================== */
.hero {
    min-height: 100vh;
    padding: 80px 24px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center the group */
    gap: 120px;
    /* Increased separation */
    position: relative;
    z-index: 2;
}

.hero-image {
    flex: 0 0 350px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px;
}

.hero-mascot-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lottie-mascot {
    position: absolute;
    width: 400px;
    height: 400px;
    z-index: 15;
    pointer-events: none;
}

.lottie-mascot.loaded+.hero-mascot {
    opacity: 0;
    visibility: hidden;
}

.hero-mascot {
    width: 320px;
    height: auto;
    position: relative;
    z-index: 10;
    animation: mascotFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

@keyframes mascotFloat {

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

    25% {
        transform: translateY(-12px) rotate(2deg);
    }

    75% {
        transform: translateY(8px) rotate(-2deg);
    }
}

.mascot-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {

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

    50% {
        transform: scale(1.2);
        opacity: 0.9;
    }
}

.lottie-feature {
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s var(--ease-out-expo);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.lottie-feature:hover {
    transform: scale(1.05);
}

.hero-content {
    flex: 0 1 600px;
    /* Compact layout */
}

.hero-title {
    font-family: var(--font-display);
    font-size: 42px;
    /* Reduced to fit better */
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.2;
    margin-bottom: 24px;
}

.dynamic-word {
    position: relative;
    display: inline-block;
}

.dynamic-word::after {
    content: '|';
    position: absolute;
    right: -10px;
    color: var(--primary);
    animation: blinkCursor 0.8s infinite;
    font-weight: 400;
    opacity: 1;
}

@keyframes blinkCursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.desktop-break {
    display: block;
}

@media (max-width: 768px) {
    .desktop-break {
        display: inline;
        /* On mobile, let it flow naturally if needed, or keep block */
    }
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}


/* =====================================================
   EXAM CAROUSEL
   ===================================================== */
.exam-carousel {
    max-width: 700px;
    margin: 60px auto 0;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.carousel-arrow {
    width: 48px;
    height: 48px;
    border: 2px solid var(--gray-200);
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    color: var(--gray-500);
    flex-shrink: 0;
}

.carousel-arrow:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.1);
}

.carousel-track-wrapper {
    flex: 1;
    overflow: hidden;
    padding: 20px 0;
    /* Space for hover effects */
    margin: -20px 0;
    /* Negate margin to keep layout tight if needed, or just let it breathe */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Auto-Scroll Marquee Track */
.carousel-track {
    display: flex;
    gap: 12px;
    width: max-content;
    /* Continuous scroll animation */
    animation: marqueeExams 30s linear infinite;
    /* Pause on hover for interaction */
}

.carousel-track:hover {
    animation-play-state: paused;
}

@keyframes marqueeExams {
    0% {
        transform: translateX(0);
    }

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

    /* Since we duplicated the list once (total 2 sets) */
}

.carousel-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--white);
    border: 2px solid var(--gray-100);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.carousel-item:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.exam-icon {
    font-size: 20px;
}

.exam-name {
    font-weight: 700;
    color: var(--gray-700);
    font-size: 14px;
}


/* =====================================================
   FEATURES SECTION
   ===================================================== */
.features {
    padding: 0;
}

/* Uniform White Background for all features */
.feature-block {
    padding: var(--section-padding);
    position: relative;
    overflow: hidden;
    background: #fff;
    /* Force white */
}

/* Remove separate alt-bg color */
.feature-block.alt-bg {
    background: #fff;
}

.feature-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 80px;
    flex-direction: row;
    /* Respect DOM order */
}

/* Removed redundant feature-left/right direction rules to let DOM order dictate layout */

.feature-content {
    flex: 1;
}

.feature-title {
    font-family: var(--font-display);
    font-size: 48px;
    /* Increased from 40px */
    font-weight: 800;
    /* Extra Bold like Duolingo */
    color: var(--primary);
    /* Duolingo Green */
    margin-bottom: 24px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.feature-text {
    font-size: 19px;
    color: #777;
    font-weight: 600;
    /* Semi-bold for readability */
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Ensure features stay on top */
.feature-container {
    position: relative;
    z-index: 10;
}

.feature-image {
    flex: 1;
    display: flex;
    justify-content: center;
}


/* =====================================================
   DOWNLOAD SECTION
   ===================================================== */
.download-section {
    padding: 120px 24px;
    background: linear-gradient(135deg, #E8FDE8 0%, #E0F7FA 50%, #EDE7F6 100%);
    position: relative;
    overflow: hidden;
}

.download-bg-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.bg-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.circle-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
}

.circle-2 {
    width: 300px;
    height: 300px;
    bottom: -50px;
    left: -100px;
}

.circle-3 {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 30%;
}

.download-container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 2;
}

.download-content {
    flex: 1;
}

.download-title {
    font-size: 44px;
    font-weight: 900;
    color: var(--gray-900);
    margin-bottom: 16px;
    line-height: 1.1;
}

.highlight-text {
    background: linear-gradient(135deg, var(--primary) 0%, #7EE03D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Download Content Column */
.download-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center everything */
    text-align: center;
    padding: 20px;
}

.download-text {
    font-size: 18px;
    color: var(--gray-500);
    margin-bottom: 32px;
    max-width: 400px;
}

.download-buttons {
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center buttons row */
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}

.download-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}

.qr-box {
    background: #ffffff;
    padding: 12px;
    border-radius: 24px;
    /* More rounded "sweet" look */
    border: 3px solid #e5e7eb;
    border-bottom-width: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bouncy/Jelly feel */
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.qr-box:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--primary);
    box-shadow: 0 15px 30px -5px rgba(88, 204, 2, 0.25);
}

.qr-box:active {
    transform: scale(0.95);
    border-bottom-width: 3px;
}

.qr-img {
    width: 90px;
    height: 90px;
    border-radius: 14px;
    pointer-events: none;
    display: block;
}

/* Optional text next to it or tooltip? Stick to simple visual for now */

/* Arrow hidden for now */
.qr-arrow {
    display: none;
}

/* Dark mode for QR box handled in general dark mode section or here if specific */
body.dark-mode .qr-box {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

body.dark-mode .qr-box:hover {
    border-color: var(--primary);
    background: #283546;
}

.store-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: #ffffff;
    color: #4b5563;
    /* Gray-600 */
    border: 2px solid #e5e7eb;
    /* Gray-200 */
    border-bottom-width: 5px;
    /* Thicker bottom for 3D feel */
    border-radius: 16px;
    /* Soft roundness */
    transition: all 0.1s ease;
    cursor: pointer;
}

.store-button:hover {
    transform: translateY(2px);
    border-bottom-width: 3px;
    background: #f9fafb;
    color: #111827;
    border-color: #d1d5db;
}

.store-button:active {
    transform: translateY(5px);
    border-bottom-width: 0;
    margin-top: 5px;
    /* Keep layout stable */
    margin-bottom: -5px;
}

.store-text {
    text-align: left;
}

.store-subtitle {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.7;
}

.store-name {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.download-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--gray-700);
}

.feature-icon {
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Enhancing Container for 3D View */
.download-image {
    perspective: 2000px;
    position: relative;
    width: 500px;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

/* Floating Assets (Subtle Pastel) */
.floating-assets {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
}

.float-item {
    position: absolute;
    font-size: 56px;
    filter: saturate(0.8) brightness(1.1) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.05));
    opacity: 0.9;
    animation: gentleFloat 8s ease-in-out infinite;
}

.item-book {
    top: 10%;
    right: 10px;
    animation-delay: 0s;
    transform: rotate(10deg);
}

.item-bulb {
    bottom: 20%;
    left: -10px;
    animation-delay: 2s;
    transform: rotate(-10deg);
    font-size: 60px;
}

.item-chat {
    top: 35%;
    left: -30px;
    animation-delay: 1s;
    transform: rotate(5deg);
    font-size: 48px;
}

.item-pencil {
    bottom: 10%;
    right: -20px;
    animation-delay: 3s;
    transform: rotate(-5deg);
    font-size: 52px;
}

@keyframes gentleFloat {

    0%,
    100% {
        transform: translateY(0) rotate(var(--r, 0deg));
    }

    50% {
        transform: translateY(-20px) rotate(calc(var(--r, 0deg) + 5deg));
    }
}

.item-book {
    --r: 10deg;
}

.item-bulb {
    --r: -10deg;
}

.item-chat {
    --r: 5deg;
}

.item-pencil {
    --r: -5deg;
}

/* Phone Mockup Updates */
.phone-mockup {
    animation: phoneHover 10s ease-in-out infinite;
    transform-style: preserve-3d;
    position: relative;
    z-index: 10;
}

@keyframes phoneHover {

    0%,
    100% {
        transform: translateY(0) rotateY(0deg);
    }

    50% {
        transform: translateY(-15px) rotateY(-2deg);
    }
}

/* Sleek Premium Frame */
.phone-frame {
    width: 320px;
    background: #000000;
    border-radius: 50px;
    box-shadow:
        0 40px 100px -20px rgba(0, 0, 0, 0.3),
        /* Cinematic Shadow */
        0 0 0 2px rgba(255, 255, 255, 0.1) inset;
    /* Subtle rim light */
    border: 6px solid #1a1a1a;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s var(--ease-out-expo);
}

.phone-mockup:hover .phone-frame {
    transform: rotateY(0) rotateX(0);
}

.phone-screen {
    background: var(--white);
    border-radius: 32px;
    height: 540px;
    overflow: hidden;
}

.screen-content {
    padding: 60px 20px 20px;
}

.app-nav {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    font-size: 20px;
}

.app-nav span {
    opacity: 0.5;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.app-nav span.active {
    opacity: 1;
    transform: scale(1.2);
}

.app-greeting {
    margin-bottom: 20px;
}

.greeting-text {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--gray-900);
}

.greeting-sub {
    font-size: 14px;
    color: var(--gray-500);
}

.app-quick-stats {
    display: flex;
    gap: 12px;
}

.quick-stat {
    flex: 1;
    padding: 20px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    text-align: center;
}

.qs-value {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: var(--gray-900);
}

.qs-label {
    font-size: 12px;
    color: var(--gray-500);
}

.phone-shadow {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 20px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
}

.floating-badges {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.badge {
    position: absolute;
    font-size: 32px;
    background: var(--white);
    padding: 12px;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    animation: badgeFloat 4s ease-in-out infinite;
}

.badge-1 {
    top: 10%;
    right: -20px;
    animation-delay: 0s;
}

.badge-2 {
    top: 40%;
    left: -30px;
    animation-delay: 1s;
}

.badge-3 {
    bottom: 20%;
    right: -10px;
    animation-delay: 2s;
}

@keyframes badgeFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-5deg);
    }

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


/* =====================================================
   EXTRAS SECTION
   ===================================================== */
/* =====================================================
   INFINITE FEATURES MARQUEE
   ===================================================== */
.extras-section {
    padding: 60px 0;
    background: var(--gray-50);
    overflow: hidden;
    /* Hide overflow for marquee */
    position: relative;
    /* Clean fade masks */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.extras-container.full-width {
    max-width: 100%;
    padding: 0;
}

.section-title {
    font-size: 40px;
    font-weight: 800;
    color: var(--gray-900);
    text-align: center;
    margin-bottom: 60px;
    padding: 0 20px;
}

.features-marquee-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.features-track {
    display: flex;
    gap: 24px;
    width: max-content;
}

/* Scroll Animations */
.track-left {
    animation: scrollLeft 60s linear infinite;
}

.track-right {
    animation: scrollRight 60s linear infinite;
}

/* FEATURE CHIP PILL STYLE */
.feature-chip {
    background: var(--white);
    padding: 16px 32px;
    border-radius: 999px;
    /* Pill shape */
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-700);
    border: 2px solid var(--gray-100);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-chip:hover {
    transform: scale(1.05) translateY(-2px);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 8px 16px rgba(88, 204, 2, 0.15);
    z-index: 10;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.33%);
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(-33.33%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Dark Mode Adjustments */
body.dark-mode .extras-section {
    background: var(--gray-50);
}

body.dark-mode .feature-chip {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-500);
}

body.dark-mode .feature-chip:hover {
    background: var(--gray-200);
    border-color: var(--primary);
    color: var(--primary);
}


/* Calculator Keys Animation */
.calc-keys {
    bottom: 15px;
    right: 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    opacity: 0.3;
}

.calc-keys span {
    width: 24px;
    height: 24px;
    background: #1CB0F6;
    border-radius: 8px;
    display: block;
}

.card-tall:hover .calc-keys span:nth-child(odd) {
    transform: translateY(-10px);
}

.card-tall:hover .calc-keys span:nth-child(even) {
    transform: translateY(10px);
}

/* Dark Mode Adjustments */
body.dark-mode .extras-section {
    background: var(--gray-50);
}

body.dark-mode .bento-card {
    background: var(--gray-100);
    border-color: var(--gray-200);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

body.dark-mode .bento-card h3 {
    color: var(--white);
}

body.dark-mode .bento-card p {
    color: var(--gray-300);
}

/* Dark mode specific card backgrounds for better contrast */
body.dark-mode .card-wide {
    background: linear-gradient(135deg, #3D232D 0%, #2D1A22 100%);
    border-color: #502A38;
}

body.dark-mode .card-tall {
    background: linear-gradient(135deg, #1A323D 0%, #15252B 100%);
    border-color: #2A4550;
}

/* Ensure gradient card text remains visible */
body.dark-mode .card-gradient h3,
body.dark-mode .card-gradient p {
    color: white;
}


/* =====================================================
   DOWNLOAD SECTION (DUOLINGO STYLE - FLAT & PLAYFUL)
   ===================================================== */
.download-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    background: #fff;
    /* Clean white background like Duolingo */
}

.download-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    /* More space */
    position: relative;
    z-index: 2;
}

/* Flat Vector Phone */
.phone-mockup {
    position: relative;
    width: 300px;
    height: 600px;
    transform: rotate(-3deg);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.phone-mockup:hover {
    transform: rotate(0deg) scale(1.02);
}

.phone-frame {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 12px solid #235390;
    /* Brand Blue Border */
    border-radius: 46px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    box-shadow:
        12px 12px 0px rgba(35, 83, 144, 0.2);
    /* Solid flat shadow */
}

/* Screen Content: Learning Path */
.phone-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
}

.path-header {
    padding: 20px;
    border-bottom: 2px solid #E5E5E5;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.energy-badge {
    background: #FF9600;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.gem-badge {
    color: #1CB0F6;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.learning-path {
    flex: 1;
    position: relative;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Path Nodes */
.path-node {
    width: 70px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.path-node:hover {
    transform: scale(1.1);
}

/* Node Styles */
.node-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #E5E5E5;
    position: relative;
    top: -5px;
    /* 3D effect offset */
    box-shadow: 0 5px 0 #CECECE;
    /* Flat 3d shadow */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.path-node:active .node-circle {
    top: 0;
    box-shadow: none;
    transform: translateY(5px);
}

/* Active Node */
.node-active .node-circle {
    background: #58CC02;
    box-shadow: 0 5px 0 #46A302;
}

.node-active::before {
    content: 'BAŞLA';
    position: absolute;
    top: -35px;
    background: #fff;
    color: #58CC02;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 12px;
    border: 2px solid #E5E5E5;
    animation: bounce 1s infinite;
}

/* Completed Node */
.node-completed .node-circle {
    background: #FFC800;
    box-shadow: 0 5px 0 #DDA600;
}

/* =====================================================
   APP MOCKUP UI (Result Screen)
   ===================================================== */
.app-screen {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: white;
    font-family: 'Nunito', sans-serif;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.status-bar {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    color: #9ca3af;
    margin-bottom: 20px;
}

.status-icons {
    display: flex;
    gap: 5px;
}

.result-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.result-confetti {
    font-size: 60px;
    margin-bottom: 10px;
    animation: popScale 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popScale {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.result-title {
    font-size: 32px;
    font-weight: 900;
    color: #FFC800;
    margin-bottom: 5px;
}

.result-subtitle {
    font-size: 16px;
    color: #6b7280;
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: auto;
}

.stat-card {
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom-width: 4px;
}

.stat-card.gold {
    background: #fffbeb;
    border-color: #fcd34d;
    border-bottom-color: #f59e0b;
}

.stat-card.blue {
    background: #eff6ff;
    border-color: #93c5fd;
    border-bottom-color: #3b82f6;
}

.stat-card.purple {
    background: #faf5ff;
    border-color: #d8b4fe;
    border-bottom-color: #9333ea;
}

.stat-label {
    font-size: 13px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 24px;
    font-weight: 900;
}

.text-gold {
    color: #d97706;
}

.text-blue {
    color: #2563eb;
}

.text-purple {
    color: #7e22ce;
}

.app-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 2px solid #e5e7eb;
}

.app-footer.no-border {
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.streak-notification {
    background: #FEF2F2;
    border: 2px solid #FECACA;
    color: #DC2626;
    padding: 10px;
    border-radius: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-continue {
    width: 100%;
    padding: 16px;
    background: #58CC02;
    color: white;
    font-weight: 800;
    font-size: 18px;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 0 #46A302;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 0.1s;
}

.btn-continue:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #46A302;
}

/* =====================================================
   GAMIFICATION SCENE (Lottie)
   ===================================================== */
.gamification-lottie-container {
    width: 100%;
    max-width: 550px;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.lottie-scene {
    width: 100%;
    height: 100%;
    min-height: 450px;
}

/* Adjust download-image container to be flexible */
.download-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.scene-blob-bg {
    display: none;
    /* Hidden by user request */
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(88, 204, 2, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(40px);
}

.scene-card {
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    /* Soft elevated shadow */
    padding: 24px;
    position: absolute;
    z-index: 2;
    transition: transform 0.3s ease;
}

/* Main Streak Card */
.highlight-card {
    position: relative;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 4px solid #fff;
    outline: 4px solid #f3f4f6;
    /* Double border effect */
    animation: floatMain 6s ease-in-out infinite;
}

.streak-icon-container {
    font-size: 64px;
    margin-bottom: 12px;
    filter: drop-shadow(0 10px 20px rgba(255, 69, 0, 0.3));
}

.fire-animation {
    animation: pulse 2s infinite;
}

.streak-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}

.streak-number {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    color: #FF9600;
    /* Streak Orange */
}

.streak-label {
    font-size: 14px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.streak-message {
    font-size: 16px;
    font-weight: 600;
    color: #4b5563;
    background: #fdf2f8;
    /* Light pink/orange tint */
    padding: 8px 16px;
    border-radius: 12px;
    color: #be185d;
}

/* Rank Badge */
.rank-card {
    top: 20px;
    right: -20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 20px;
    animation: floatDelayed 7s ease-in-out infinite;
}

.rank-icon {
    font-size: 32px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.rank-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.rank-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.rank-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #10b981;
    /* Success Green */
}

/* XP Pill */
.xp-card {
    bottom: 40px;
    left: -30px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #1f2937;
    /* Dark pill */
    color: white;
    border-radius: 50px;
    animation: floatSlower 8s ease-in-out infinite;
    box-shadow: 0 10px 25px rgba(31, 41, 55, 0.3);
}

.xp-icon {
    font-size: 20px;
    color: #fbbf24;
}

.xp-val {
    font-weight: 700;
    font-size: 16px;
}

/* Animations */
@keyframes floatMain {

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

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

@keyframes floatDelayed {

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

    50% {
        transform: translateY(-10px) rotate(8deg);
    }
}

@keyframes floatSlower {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(10px) rotate(-5deg);
    }
}

/* Dark Mode Overrides for Gamification Scene */
body.dark-mode .scene-card {
    background: #1f2937;
    border-color: #374151;
    /* for inner border */
    outline-color: #374151;
    /* for double border */
    color: white;
}

body.dark-mode .streak-message {
    background: #831843;
    color: #fbcfe8;
}

body.dark-mode .rank-title {
    color: white;
}

body.dark-mode .xp-card {
    background: black;
    border: 1px solid #374151;
}

/* Dark Mode Overrides for App UI */
body.dark-mode .app-screen {
    background: #111;
}

body.dark-mode .status-bar {
    color: #4b5563;
}

body.dark-mode .stat-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .stat-card.gold {
    border-color: #b45309;
}

body.dark-mode .stat-card.blue {
    border-color: #1e40af;
}

body.dark-mode .stat-card.purple {
    border-color: #6b21a8;
}

body.dark-mode .streak-notification {
    background: #450a0a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

body.dark-mode .result-title {
    color: #fbbf24;
}

body.dark-mode .result-subtitle {
    color: #9ca3af;
}

.node-completed::after {
    content: '👑';
    position: absolute;
    bottom: -10px;
    right: -5px;
    font-size: 20px;
}

/* Mascot Peeking */
.peeking-mascot {
    position: absolute;
    right: -60px;
    bottom: 80px;
    width: 120px;
    height: 120px;
    z-index: 10;
    transform: rotate(10deg);
    animation: peek 3s infinite ease-in-out;
}

@keyframes peek {

    0%,
    100% {
        transform: rotate(10deg) translateX(0);
    }

    50% {
        transform: rotate(5deg) translateX(-10px);
    }
}

@keyframes bounce {

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

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

/* =====================================================
   FOOTER
   ===================================================== */
/* =====================================================
   FOOTER (Premium Redesign)
   ===================================================== */
.footer {
    background: #0A2C4E;
    /* Solid dark blue, or linear gradient if preferred */
    background: linear-gradient(180deg, #173B66 0%, #0A2C4E 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* Ambient Glow Effect */
.footer-glow {
    display: none;
    /* Hide the glow effect */
}

.footer-wave {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    color: var(--white);
    transform: rotate(180deg);
    opacity: 0.1;
    /* Subtle overlay effect */
}

/* Or restore the original wave color if it was meant to blend with section above */
/* Actually, usually footer wave is same color as footer top to blend with white section above. 
   Let's keep the original logic but make it white to match the section above (since Hero/Features are white/light). 
   Wait, if the section above is white, the wave should be the footer color pointing UP, or white pointing DOWN. 
   The original svg path looked like it was "filling" the bottom. 
   Let's ensure it looks like the footer is "liquid" at the top. */

.footer-wave svg {
    width: 100%;
    height: 80px;
    fill: #ffffff;
    /* Matches the section above */
}

.footer-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 60px 24px 40px;
    position: relative;
    z-index: 1;
}

.footer-main {
    display: flex;
    flex-wrap: wrap;
    /* Responsive wrap */
    justify-content: space-between;
    align-items: flex-start;
    /* Align to top */
    /* Vertically center left and right blocks removed */
    gap: 60px;
    text-align: left;
    padding-top: 40px;
    /* Add some top padding */
}

.footer-brand {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.footer-brand-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
    /* Handled by gap */
}

/* Removed hover effects since it's just text now */
.footer-logo:hover {
    transform: none;
    box-shadow: none;
}

.footer-mascot {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.footer-logo-text {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--primary);
    /* Green is back! */
}

.footer-tagline {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
    line-height: 1.6;
    font-weight: 500;
}

/* Horizontal Actions Row */
.footer-bottom-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    /* Safety wrap */
}

/* Mini Store Badge */
.footer-download-badges {
    margin-bottom: 0;
    /* Align with social icons */
}

.store-badge-mini {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    /* Slightly simpler padding */
    background: rgba(255, 255, 255, 0.05);
    /* Very subtle background */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Subtle border */
    border-radius: 10px;
    color: #fff;
    transition: all 0.2s ease;
    height: 44px;
    /* Fixed height to match social icons */
}

.store-badge-mini:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.badge-sub {
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.6;
    letter-spacing: 0.5px;
}

.badge-head {
    font-size: 14px;
    font-weight: 700;
}

.footer-social {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}

.social-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-btn:hover {
    background: var(--white);
    color: var(--primary);
    transform: translateY(-4px) scale(1.1);
    border-color: var(--white);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.footer-links {
    flex: 2;
    display: flex;
    justify-content: flex-end;
    /* Push to right */
    gap: 80px;
    flex-wrap: wrap;
    padding-top: 10px;
}

.footer-column {
    min-width: 140px;
}

.footer-column h4 {
    font-size: 13px;
    /* Slightly smaller to match reference */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #58CC02;
    /* Solid green matches reference exactly */
    display: inline-block;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-block;
    position: relative;
}

.footer-column ul li a:hover {
    color: var(--white);
    padding-left: 8px;
    /* Slide effect */
}

/* Arrow indicator on hover */
.footer-column ul li a:hover::before {
    content: '›';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-56%);
    color: var(--primary);
    font-weight: 800;
    font-size: 18px;
}

.footer-bottom {
    margin-top: 80px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    /* Space between copyright and links */
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.footer-bottom-links {
    display: flex;
    gap: 32px;
}

.footer-bottom-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    transition: color 0.2s;
}

.footer-bottom-links a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* Tablet/Mobile Responsive */
@media (max-width: 960px) {
    .footer-main {
        flex-direction: column;
        gap: 50px;
    }

    .footer-brand {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
        width: 100%;
        gap: 40px;
        text-align: center;
    }

    .footer-column {
        text-align: center;
    }

    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }
}


/* Glassmorphism UI */
.glass-theme {
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
}

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    border-radius: 16px;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

.glass-card.selected {
    background: rgba(224, 242, 254, 0.8);
    /* Light blue tint */
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px #38bdf8;
}

.glass-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4);
    border: none;
    letter-spacing: 1px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.glass-btn:active {
    transform: scale(0.98);
    box-shadow: 0 5px 10px -5px rgba(16, 185, 129, 0.4);
}

/* =====================================================
   SCROLL REVEAL
   ===================================================== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal[data-delay="100"] {
    transition-delay: 0.1s;
}

.scroll-reveal[data-delay="200"] {
    transition-delay: 0.2s;
}

.scroll-reveal[data-delay="300"] {
    transition-delay: 0.3s;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .hero-container {
        gap: 40px;
    }

    .hero-mascot {
        width: 260px;
    }

    .hero-title {
        font-size: 38px;
    }

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

    /* Force Feature Blocks to Stack Earlier (Tablet/Small Laptop) */
    .feature-container {
        flex-direction: column !important;
        text-align: center;
        gap: 48px;
        padding: 0 20px;
    }

    .lottie-feature {
        width: 100%;
        max-width: 320px;
        /* Cap width */
        height: auto;
        aspect-ratio: 1/1;
        /* Maintain square */
        margin: 0 auto;
    }

    .feature-content {
        max-width: 600px;
        margin: 0 auto;
        order: 1;
        /* Always Text First */
    }

    .feature-image {
        order: 2;
        /* Always Image Second */
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px 0;
    }

    /* Refined Mobile Header */
    .header-container {
        padding: 0 20px;
    }

    .header-right {
        gap: 12px;
        /* Tighter gap */
    }

    /* Hide secondary nav links on mobile, keep CTA and Theme Toggle */
    .nav-link:not([href="index.html"]) {
        display: none;
    }

    /* Show 'BAŞLA' button but maybe smaller */
    .btn-header {
        padding: 10px 20px !important;
        font-size: 14px !important;
        height: 44px !important;
    }

    /* Hero Optimization */
    .hero {
        min-height: auto;
        padding: 120px 20px 20px;
        /* Reduced bottom padding from 60px to 20px */
        text-align: center;
    }

    .hero-container {
        flex-direction: column;
        gap: 32px;
        /* Reduced gap from 40px */
    }

    /* Make hero image smaller and centered */
    .hero-image {
        min-height: 280px;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .hero-mascot {
        width: 200px;
    }

    .hero-title {
        font-size: 36px;
        line-height: 1.2;
    }

    /* Mobile Button Stacking */
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }

    .btn-large {
        width: 100%;
        justify-content: center;
    }

    .exam-carousel {
        margin-top: -16px;
        /* Pull carousel upwards closer to buttons */
    }

    /* Feature Sections */
    .feature-showcase-section {
        gap: 60px;
        /* Reduced gap */
        padding: 40px 20px;
        /* Reduced padding */
    }

    .feature-row,
    .feature-row.reverse {
        flex-direction: column-reverse;
        text-align: center;
        gap: 24px;
        /* Reduced gap */
    }

    .f-visual-card {
        aspect-ratio: auto;
        height: 250px;
        /* Slightly smaller height */
        width: 100%;
    }

    .f-heading {
        font-size: 32px;
    }

    /* Download Section */
    .download-section {
        padding: 0 20px 40px;
        /* Removed top padding completely to fix gap */
    }

    .download-container {
        gap: 24px;
        /* Reduced gap */
    }

    .hero-image {
        min-height: 200px;
        /* Reduce hero image height restriction */
        margin-bottom: -20px;
        /* Pull content up */
    }

    .download-container {
        flex-direction: column;
        text-align: center;
        gap: 0;
        /* Eliminate gap */
    }

    /* Target specific image container to remove internal spacing */
    .download-image {
        margin-bottom: -50px;
        /* Pull text up significantly */
        position: relative;
        z-index: 1;
    }

    .download-title {
        font-size: 32px;
    }

    .download-buttons {
        flex-direction: column;
        gap: 16px;
    }

    .qr-box {
        display: none;
        /* Hide QR on mobile, redundant */
    }

    .phone-frame {
        width: 260px;
        transform: none;
        margin: 0 auto;
    }

    .phone-screen {
        height: 500px;
    }

    /* Footer */
    .footer-links {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 32px;
    }

    .footer-bottom-row {
        flex-direction: column;
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 32px;
    }

    .f-heading {
        font-size: 28px;
    }

    .f-visual-icon {
        font-size: 60px;
    }

    .hero-buttons {
        width: 100%;
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
    }

    .floating-badges {
        display: none;
    }
}

/* =====================================================
   THEME TOGGLE
   ===================================================== */
.theme-toggle {
    background: transparent;
    border: 2px solid var(--gray-200);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray-500);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: rotate(15deg);
}

.theme-toggle svg {
    position: absolute;
    transition: all 0.5s var(--ease-out-expo);
}

.sun-icon {
    opacity: 0;
    transform: translateY(20px) rotate(45deg);
}

.moon-icon {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

/* When dark mode is active (assumed via class on body) */
body.dark-mode .sun-icon {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

body.dark-mode .moon-icon {
    opacity: 0;
    transform: translateY(-20px) rotate(-45deg);
}

body.dark-mode .theme-toggle {
    color: var(--yellow, #FDD835);
    border-color: var(--gray-500);
}

/* =====================================================
   TESTIMONIALS MARQUEE
   ===================================================== */
.testimonials-section {
    padding: 60px 0;
    background: var(--white);
    overflow: hidden;
    position: relative;
    /* Fade masks for edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

body.dark-mode .testimonials-section {
    background: var(--white);
    /* Uses dark mode var */
}

body.dark-mode .testimonial-card {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

body.dark-mode .testimonial-card:hover {
    background: var(--gray-200);
    border-color: var(--primary);
}

.marquee-container {
    padding: 20px 0;
}

.marquee-track {
    display: flex;
    gap: 32px;
    width: max-content;
    animation: marqueeScroll 60s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.testimonial-group {
    display: flex;
    gap: 32px;
}

.testimonial-card {
    background: var(--gray-50);
    border: 2px solid var(--gray-100);
    border-radius: 16px;
    padding: 20px;
    min-width: 280px;
    display: flex;
    align-items: center;
    background: white;
    padding: 20px 25px;
    border-radius: 20px;
    box-shadow: 0 4px 0 #e5e7eb;
    /* 3D "Pop" Border */
    border: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 320px;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    margin: 10px;
    /* Space for hover movement */
    user-select: none;
}

/* Hover Effect: Press Down */
.testimonial-card:hover {
    transform: translateY(4px);
    box-shadow: 0 0 0 #e5e7eb;
    /* Collapse shadow */
    border-color: var(--primary);
    /* Highlight border */
}

@media (max-width: 768px) {
    .testimonial-card {
        min-width: 250px;
        /* Smaller card width for mobile */
        padding: 16px;
        gap: 12px;
    }

    .user-avatar {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .user-info h4 {
        font-size: 16px;
    }

    .user-info p {
        font-size: 13px;
        padding: 6px 10px;
    }

    .marquee-track {
        gap: 20px;
    }

    .testimonial-group {
        gap: 20px;
    }
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    /* Squircle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.1);
    /* Inner depth */
}

.user-info h4 {
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 4px;
    font-size: 18px;
}

.user-info p {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.4;
    font-style: italic;
    background: #f3f4f6;
    padding: 8px 12px;
    border-radius: 12px;
    border-top-left-radius: 0;
    /* Chat bubble feel */
    margin-top: 5px;
}

/* Dark Mode Overrides for Testimonials */
body.dark-mode .testimonial-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 0 #0f172a;
}

body.dark-mode .testimonial-card:hover {
    box-shadow: 0 0 0 #0f172a;
    border-color: var(--primary);
}

body.dark-mode .user-info h4 {
    color: white;
}

body.dark-mode .user-info p {
    background: #334155;
    color: #cbd5e1;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100% / 3));
        /* Adjust based on duplicated groups */
    }
}

/* =====================================================
   DARK MODE EXTRO (New Elements)
   ===================================================== */
body.dark-mode .feature-block,
body.dark-mode .feature-block.alt-bg {
    background: #131F24;
    /* Dark blue-grey like Duolingo Dark */
}

body.dark-mode .feature-title {
    color: #58CC02;
    /* Keep green or make it pop more */
}

body.dark-mode .feature-text {
    color: #AFAFAF;
}

body.dark-mode .download-section {
    background: #131F24;
    border: none;
    margin-top: -1px;
    /* Fix sub-pixel gap line */
}

body.dark-mode .store-button {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

body.dark-mode .store-button:hover {
    background: #374151;
    color: #fff;
    border-color: #4b5563;
}

body.dark-mode .glass-theme {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

body.dark-mode .glass-card {
    background: rgba(31, 41, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .glass-card:hover {
    background: rgba(31, 41, 55, 0.9);
}

body.dark-mode .glass-card.selected {
    background: rgba(56, 189, 248, 0.2);
    border-color: #0ea5e9;
}

body.dark-mode .quiz-question {
    color: #e5e7eb;
}

body.dark-mode .quiz-image-placeholder {
    background: #374151;
    box-shadow: none;
}

/* =====================================================
   DOWNLOAD MODAL
   ===================================================== */
body.modal-open {
    overflow: hidden;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-card {
    position: relative;
    width: 90%;
    max-width: 480px;
    background: #fff;
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.5);
    text-align: center;
}

.modal-overlay.active .modal-card {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    font-size: 20px;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: #e5e7eb;
    color: var(--gray-900);
    transform: rotate(90deg);
}

.modal-mascot-container {
    margin-bottom: 24px;
}

.modal-lottie-icon {
    width: 140px;
    height: 140px;
    margin: 0 auto;
}

.modal-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.2;
    margin-bottom: 12px;
}

.modal-desc {
    color: var(--gray-500);
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 32px;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    /* More space */
    width: 100%;
}

/* White Pill Button Style (Ref Image) */
.modal-actions .store-button {
    width: 100%;
    max-width: 320px;
    height: 78px;
    border-radius: 18px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-bottom-width: 6px;
    /* 3D depth */
    color: #4b5563;
    /* Dark gray text */
    justify-content: center;
    /* Icon and text centered */
    padding: 0 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 18px;
}

.modal-actions .store-button:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    /* subtle hint of brand */
    border-bottom-color: #58CC02;
    color: var(--primary);
    box-shadow: 0 10px 20px -5px rgba(88, 204, 2, 0.15);
}

.modal-actions .store-button:active {
    transform: translateY(3px);
    border-bottom-width: 2px;
    box-shadow: none;
}

/* Ensure text is aligned left */
.modal-actions .store-button .store-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Keep left aligned to look like standard badge, or center? User said "ortalı olsun" to "hemen indir". Left alignment aligns their starts. Center aligns their centers. */
    /* Let's try aligning their starts properly first. Usually standard badges are left aligned. */
    /* But user said "hemen ındıre ortalı olsun play store yazısı" -> "Google Play should be centered to Hemen Indir". */
    /* That means align-items: center is what they want for the text block. */
    align-items: center;
    text-align: center;
}

.modal-actions .store-subtitle {
    font-size: 11px;
    opacity: 0.8;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0;
    text-transform: uppercase;
}

.modal-actions .store-name {
    font-size: 24px;
    font-weight: 700;
    color: inherit;
    line-height: 1;
    margin-top: -2px;
    /* Pull it up closer */
}

/* Nudge icon down slightly */
.modal-actions .store-button .store-icon {
    transform: translateY(3px);
}

/* Sweet Big QR */
.modal-qr {
    background: white;
    padding: 16px;
    border-radius: 24px;
    border: 3px solid #f3f4f6;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    /* Stack if needed, but img is main */
    align-items: center;
    width: auto;
    height: auto;
    transition: transform 0.3s ease;
}

.modal-qr:hover {
    transform: scale(1.05) rotate(2deg);
    border-color: var(--primary);
}

.modal-qr .qr-img {
    width: 150px;
    /* MUCH BIGGER */
    height: 150px;
    border-radius: 12px;
}

/* Divider Style */
.modal-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 250px;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Restore Modal Divider */
.modal-divider::before,
.modal-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    border-radius: 2px;
}

@media (max-width: 768px) {

    /* Feature Chips Mobile Scroll */
    .features-marquee-wrapper {
        width: 100vw;
        margin-left: -20px;
        /* Counteract padding */
        padding: 0 20px;
        overflow-x: hidden;
    }

    .features-track {
        gap: 16px;
    }

    .feature-chip {
        padding: 12px 24px;
        font-size: 15px;
    }

    /* Icon Sizing Fix */
    .f-visual-icon {
        font-size: 56px;
        margin-bottom: 16px;
    }

    .f-visual-tag {
        font-size: 16px;
        padding: 8px 16px;
    }
}

/* Dark Mode Overrides */
body.dark-mode .modal-divider {
    color: #6b7280;
}

body.dark-mode .modal-divider::before,
body.dark-mode .modal-divider::after {
    background: #374151;
}

.qr-hint-text {
    margin-top: -20px;
    /* Pull it up closer to QR section logic if separated, but here it's sibling */
    margin-top: 8px;
    font-size: 14px;
    color: #9ca3af;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Dark Mode Overrides for Modal Elements */
body.dark-mode .modal-qr {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .modal-qr:hover {
    border-color: #58CC02;
}

/* Dark Mode for Modal */
body.dark-mode .modal-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .modal-title {
    color: white;
}

body.dark-mode .modal-desc {
    color: #9ca3af;
}

body.dark-mode .modal-close {
    background: #374151;
    color: #e5e7eb;
}

body.dark-mode .modal-close:hover {
    background: #4b5563;
}

body.dark-mode .modal-qr {
    background: #111827;
    border-color: #374151;
}

@keyframes bounce {

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

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

/* =====================================================
   FEATURES PAGE STYLES (Redesigned)
   ===================================================== */
.page-hero {
    padding: 180px 24px 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 0%, #F0FDF4 0%, var(--bg-body) 100%);
}

.page-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.page-hero-bg .c1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(88, 204, 2, 0.1) 0%, transparent 70%);
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
}

.page-title {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 900;
    color: var(--gray-900);
    line-height: 1.1;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.page-subtitle {
    font-size: 20px;
    color: var(--gray-500);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Feature Showcase (Zig-Zag Layout) */
.feature-showcase-section {
    padding: 80px 24px;
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 80px;
}

.feature-row.reverse {
    flex-direction: row-reverse;
}

.f-text-col {
    flex: 1;
}

.f-visual-col {
    flex: 1;
    position: relative;
}

.f-label {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(88, 204, 2, 0.1);
    color: var(--primary);
    border-radius: 99px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.f-heading {
    font-size: 42px;
    font-weight: 900;
    color: var(--gray-900);
    margin-bottom: 24px;
    line-height: 1.1;
}

.f-desc {
    font-size: 18px;
    color: var(--gray-500);
    line-height: 1.6;
    margin-bottom: 32px;
}

.f-visual-card {
    background: var(--white);
    border-radius: 40px;
    padding: 40px;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-100);
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.feature-row:hover .f-visual-card {
    transform: translateY(-10px);
}

.f-visual-content {
    text-align: center;
}

.f-visual-icon {
    font-size: 80px;
    margin-bottom: 20px;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

.f-visual-tag {
    font-size: 20px;
    font-weight: 800;
    color: var(--gray-900);
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Secondary Feature Grid */
.secondary-features {
    padding: 80px 24px 160px;
    background: #FAFAFA;
    border-top: 1px solid var(--gray-100);
}

.sec-features-container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.sec-title {
    text-align: center;
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 60px;
    color: var(--gray-900);
}

.sec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.sec-card {
    background: var(--white);
    padding: 32px;
    border-radius: 24px;
    border: 1px solid var(--gray-100);
    transition: all 0.2s ease;
}

.sec-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.sec-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-body);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--primary);
}

.sec-card h4 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--gray-900);
}

.sec-card p {
    font-size: 15px;
    color: var(--gray-500);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {

    .feature-row,
    .feature-row.reverse {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .f-heading {
        font-size: 32px;
    }

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

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

    .page-hero {
        padding-top: 120px;
    }

    .page-title {
        font-size: 36px;
    }
}

/* =====================================================
   404 ERROR PAGE
   ===================================================== */
.error-page-section {
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 24px 80px;
    background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
}

.error-lottie-container {
    width: 320px;
    height: 320px;
    margin: 0 auto;
}

.error-code-text {
    font-family: var(--font-display);
    font-size: 80px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
    margin-top: -20px;
    margin-bottom: 24px;
    text-shadow: 0 4px 0 var(--primary-dark);
}

.error-message-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 16px;
}

.error-message-desc {
    font-size: 18px;
    color: var(--gray-500);
    max-width: 500px;
    margin: 0 auto 40px;
}

body.dark-mode .error-page-section {
    background: linear-gradient(180deg, var(--gray-50) 0%, #0d161b 100%);
}

body.dark-mode .error-message-title {
    color: var(--white);
}