/* --- CSS Variables (New Color Palette & Global Settings) --- */
:root {
    /* Material Design 3 Inspired Palette */
    --color-darkest-bg: #0A0A0A;
    /* Even deeper background */
    --color-dark-section-bg: #1A2129;
    /* Slightly brighter for contrast areas */
    --color-accent-primary: #8DE0EE;
    /* A softer, more ethereal cyan/aqua */
    --color-accent-secondary: #FFB75A;
    /* Vibrant Orange (retained) */
    --color-text-primary: #E3E6E8;
    /* Lighter, almost white text */
    --color-text-secondary: #A0A9B0;
    /* Muted secondary text */
    --color-text-heading-drawn: rgba(141, 224, 238, 0.15);
    /* Very transparent for drawn effect */
    --color-border-glow-primary: rgba(141, 224, 238, 0.4);
    /* Primary glow */
    --color-border-glow-secondary: rgba(255, 183, 90, 0.3);
    /* Secondary glow */


    /* Transparent Backgrounds for Section Overlays */
    --section-overlay-bg: rgba(26, 33, 41, 0.6);
    /* Semi-transparent dark */
    --card-bg-transparent: rgba(255, 255, 255, 0.08);
    /* Card background */

    /* Blur strength */
    --blur-strong: 16px;
    --blur-medium: 12px;
    /* Standard backdrop blur */
    --blur-light: 8px;
    /* Lighter blur for cards */
    --blur-minimal: 50px;
    /* For the main blobs */


    /* Font Families */
    --font-family-heading: 'Poppins', sans-serif;
    --font-family-body: 'Inter', sans-serif;

    /* Spacing */
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 18px;
    --space-lg: 30px;
    --space-xl: 50px;
    --space-xxl: 70px;
    --space-xxxl: 100px;

    /* Border Radii */
    --radius-sm: 10px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --radius-full: 50%;

    /* Shadow Presets */
    --shadow-light: 0 3px 15px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-heavy: 0 15px 50px rgba(0, 0, 0, 0.7);

    /* Gradients */
    --gradient-primary: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));
}

/* --- Base Styles --- */
html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    /* Enable vertical scroll snapping */
    height: 100%;
    /* Ensure html takes full height for snapping */
    overflow-y: scroll;
    /* Allow vertical scroll */
    -webkit-overflow-scrolling: touch;
    /* For smooth scrolling on iOS */
}

body {
    font-family: var(--font-family-body);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    background-color: var(--color-darkest-bg);
    background-image: radial-gradient(at 50% 0%, rgba(141, 224, 238, 0.1) 0%, transparent 60%),
        radial-gradient(at 100% 100%, rgba(255, 183, 90, 0.08) 0%, transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* Keep background fixed when scrolling */
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    position: relative;
    /* Base for z-index */

    filter: none;
    /* No blur on body itself, blur comes from blobs */
    -webkit-filter: none;
}

/* Scroll Snap Sections */
.scroll-snap-section {
    scroll-snap-align: start;
    /* Align the start of each section to the viewport top */
    min-height: 100vh;
    /* Ensure each section takes at least full viewport height */
    position: relative;
    /* For overlay and content positioning */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Contains children, important for transitions */
}


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

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    color: var(--color-accent-primary);
    margin-top: 0;
    margin-bottom: var(--space-md);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Hero Title Size */
h1.hero-title {
    font-size: 5.5em;
    line-height: 1;
    font-weight: 800;
    color: var(--color-text-primary);
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* "Drawn Behind Blur" Section Headers - these selectors will likely not apply to anything now */
h2.section-heading {
    font-size: 4em;
    /* Larger, more expressive */
    font-weight: 800;
    /* Bold */
    color: var(--color-text-heading-drawn);
    /* Very transparent color */
    text-shadow: 0 0 20px var(--color-text-shadow-drawn),
        /* Strong blur shadow */
        0 0 40px var(--color-text-shadow-drawn);
    /* Larger blur shadow */
    letter-spacing: 0.05em;
    /* Wider spacing */
    margin-bottom: var(--space-xxl);
    /* More space below it */
    pointer-events: none;
    /* Ensure it doesn't block interaction */
    user-select: none;
    /* Prevent selection */
    transition: all 0.5s ease;
    /* For smooth animation of header */
    position: relative;
    /* To ensure z-index applies */
    z-index: 3;
    /* Above overlays */
}

h3 {
    font-size: 2.2em;
    line-height: 1.3;
    margin-bottom: var(--space-md);
}

p {
    font-size: 1.1em;
    color: var(--color-text-secondary);
}

a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease;
}

a:hover {
    color: var(--color-accent-secondary);
    transform: translateY(-2px);
}

ul {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0;
}

ul li {
    font-size: 1em;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

ul li .material-icons {
    color: var(--color-accent-primary);
    font-size: 1.1em;
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

/* --- Navbar --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--space-md) 0;
    background-color: transparent;
    /* Made transparent */
    backdrop-filter: blur(var(--blur-light));
    /* Navbar blur */
    -webkit-backdrop-filter: blur(var(--blur-light));
    z-index: 1000;
    /* Ensure it's on top */
    box-shadow: none;
    /* Removed shadow for clean look */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    /* For potential scroll change */
}

/* Add a subtle background on scroll (via JS) */
.navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.7);
    /* Darker on scroll */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

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

.navbar-brand {
    font-family: var(--font-family-heading);
    font-size: 1.8em;
    font-weight: 700;
    color: var(--color-text-primary);
    text-decoration: none;
    display: flex;
    /* To align icon and text */
    align-items: center;
    gap: var(--space-xs);
    /* Space between icon and text */
}

.navbar-logo-icon {
    /* Style for icon in navbar brand */
    height: 30px;
    /* Adjust size as needed */
    width: auto;
    vertical-align: middle;
}

.navbar-links {
    display: flex;
    /* To align items */
    align-items: center;
    /* Removed gap: var(--space-lg); to control download button spacing separately */
}

.navbar-links a {
    /* General link styling, applies to text links */
    color: var(--color-text-secondary);
    margin-left: 0;
    /* Remove default margin from previous setup */
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-links a:hover {
    color: var(--color-accent-primary);
}

.navbar-links .btn {
    /* For any primary/secondary text buttons in navbar */
    margin-left: 0;
    padding: var(--space-xs) var(--space-md);
    font-size: 0.85em;
}

/* Styling for the Play Store badge button in navbar */
.download-playstore-badge.navbar-download-button {
    /* Target the specific badge button in navbar */
    display: inline-block;
    padding: 0;
    border-radius: 0;
    transition: transform 0.2s ease;
    margin-left: var(--space-md);
    /* Add margin to separate from brand */
}

.navbar-download-button img {
    height: 30px;
    /* DECREASED SIZE for navbar badge */
    width: auto;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    /* Subtle shadow for badge */
    border-radius: 4px;
    transform: scale(0.7);
    /* ADDED SCALE 0.7 */
    transform-origin: center right;
    /* Scale from right side */
}

.navbar-download-button:hover {
    transform: translateY(-2px) scale(0.7);
    /* Lift effect on hover, maintain scale */
}


/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-family: var(--font-family-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-light);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn .material-icons {
    margin-right: var(--space-xs);
    font-size: 1.1em;
}

.primary-btn {
    background: var(--gradient-primary);
    color: var(--color-darkest-bg);
}

.primary-btn:hover {
    background: linear-gradient(90deg, var(--color-accent-secondary), var(--color-accent-primary));
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

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

.secondary-btn:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
    background-color: rgba(122, 253, 255, 0.1);
    transform: translateY(-3px);
    box-shadow: var(--shadow-light);
}

.large-btn {
    padding: var(--space-md) var(--space-xl);
    font-size: 1em;
}

.btn-small {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.8em;
}

/* Added for navbar */


/* --- Background Blobs (Smaller, More, Varying Movement) --- */
.background-blob-container {
    position: fixed;
    /* Fixed relative to viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    /* Blobs are behind everything else */
    opacity: 0.5;
    filter: blur(15px);
    /* BLUR REDUCED TO 5px */
    transform: scale(1.0);
}

.background-blob {
    position: absolute;
    border-radius: 50%;
    filter: none;
    /* Removed individual blob blur */
    /* Updated animation property to use multiple, distinct animations */
    animation: blobMove 25s infinite alternate ease-in-out;
}

/* All 12 blobs now have unique animation properties */
.blob-1 {
    width: 180px;
    height: 180px;
    background-color: #7AFDFF;
    top: 10%;
    left: 5%;
    animation: blobMove1 25s infinite alternate ease-in-out, blobPulse 10s infinite ease-in-out;
}

.blob-2 {
    width: 220px;
    height: 220px;
    background-color: #FFB75A;
    top: 40%;
    right: 10%;
    animation: blobMove2 28s infinite alternate-reverse ease-in-out, blobPulse 12s infinite ease-in-out;
}

.blob-3 {
    width: 150px;
    height: 150px;
    background-color: #7AFDFF;
    bottom: 15%;
    left: 20%;
    animation: blobMove3 22s infinite alternate ease-in-out, blobPulse 8s infinite ease-in-out;
}

.blob-4 {
    width: 250px;
    height: 250px;
    background-color: #FFB75A;
    top: 5%;
    right: 25%;
    animation: blobMove4 30s infinite alternate-reverse ease-in-out, blobPulse 14s infinite ease-in-out;
}

.blob-5 {
    width: 160px;
    height: 160px;
    background-color: #7AFDFF;
    bottom: 50%;
    left: 5%;
    animation: blobMove5 26s infinite alternate ease-in-out, blobPulse 9s infinite ease-in-out;
}

.blob-6 {
    width: 200px;
    height: 200px;
    background-color: #FFB75A;
    top: 20%;
    left: 40%;
    animation: blobMove6 23s infinite alternate-reverse ease-in-out, blobPulse 11s infinite ease-in-out;
}

.blob-7 {
    width: 130px;
    height: 130px;
    background-color: #7AFDFF;
    bottom: 10%;
    right: 40%;
    animation: blobMove7 29s infinite alternate ease-in-out, blobPulse 7s infinite ease-in-out;
}

.blob-8 {
    width: 230px;
    height: 230px;
    background-color: #FFB75A;
    top: 70%;
    left: 30%;
    animation: blobMove8 24s infinite alternate-reverse ease-in-out, blobPulse 13s infinite ease-in-out;
}

.blob-9 {
    width: 150px;
    height: 150px;
    background-color: #7AFDFF;
    top: 25%;
    right: 5%;
    animation: blobMove9 27s infinite alternate ease-in-out, blobPulse 10.5s infinite ease-in-out;
}

.blob-10 {
    width: 190px;
    height: 190px;
    background-color: #FFB75A;
    bottom: 20%;
    left: 10%;
    animation: blobMove10 31s infinite alternate-reverse ease-in-out, blobPulse 9.5s infinite ease-in-out;
}

.blob-11 {
    width: 110px;
    height: 110px;
    background-color: #7AFDFF;
    top: 55%;
    left: 15%;
    animation: blobMove11 25s infinite alternate ease-in-out, blobPulse 8.5s infinite ease-in-out;
}

.blob-12 {
    width: 210px;
    height: 210px;
    background-color: #FFB75A;
    bottom: 30%;
    right: 20%;
    animation: blobMove12 28s infinite alternate-reverse ease-in-out, blobPulse 11.5s infinite ease-in-out;
}


@keyframes blobMove1 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(15vw, -20vh) scale(1.1) rotate(10deg);
    }

    50% {
        transform: translate(-10vw, 30vh) scale(0.9) rotate(-15deg);
    }

    75% {
        transform: translate(20vw, -5vh) scale(1.05) rotate(5deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

@keyframes blobMove2 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(-10vw, 25vh) scale(0.95) rotate(-5deg);
    }

    50% {
        transform: translate(15vw, -15vh) scale(1.08) rotate(12deg);
    }

    75% {
        transform: translate(-5vw, 10vh) scale(1.02) rotate(-8deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

@keyframes blobMove3 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(25vw, 10vh) scale(1.03) rotate(7deg);
    }

    50% {
        transform: translate(-15vw, -20vh) scale(0.98) rotate(-10deg);
    }

    75% {
        transform: translate(5vw, 30vh) scale(1.01) rotate(3deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

@keyframes blobMove4 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(-20vw, -10vh) scale(1.06) rotate(-10deg);
    }

    50% {
        transform: translate(10vw, 20vh) scale(0.94) rotate(15deg);
    }

    75% {
        transform: translate(-5vw, -25vh) scale(1.03) rotate(-7deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

@keyframes blobMove5 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(10vw, 15vh) scale(1.02) rotate(8deg);
    }

    50% {
        transform: translate(-25vw, -5vh) scale(0.97) rotate(-12deg);
    }

    75% {
        transform: translate(15vw, 20vh) scale(1.04) rotate(4deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

@keyframes blobMove6 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(-15vw, -20vh) scale(1.05) rotate(-9deg);
    }

    50% {
        transform: translate(20vw, 10vh) scale(0.96) rotate(13deg);
    }

    75% {
        transform: translate(-10vw, -5vh) scale(1.01) rotate(-6deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

@keyframes blobMove7 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(5vw, 25vh) scale(1.01) rotate(6deg);
    }

    50% {
        transform: translate(-20vw, -10vh) scale(0.99) rotate(-11deg);
    }

    75% {
        transform: translate(10vw, 15vh) scale(1.03) rotate(2deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

@keyframes blobMove8 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(-25vw, 5vh) scale(1.04) rotate(-8deg);
    }

    50% {
        transform: translate(15vw, -20vh) scale(0.95) rotate(14deg);
    }

    75% {
        transform: translate(-10vw, 10vh) scale(1.02) rotate(-5deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

@keyframes blobMove9 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(18vw, -12vh) scale(1.03) rotate(9deg);
    }

    50% {
        transform: translate(-10vw, 22vh) scale(0.98) rotate(-13deg);
    }

    75% {
        transform: translate(8vw, -8vh) scale(1.01) rotate(4deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

@keyframes blobMove10 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(-12vw, 18vh) scale(1.06) rotate(-7deg);
    }

    50% {
        transform: translate(22vw, -10vh) scale(0.94) rotate(11deg);
    }

    75% {
        transform: translate(-8vw, 12vh) scale(1.03) rotate(-3deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

@keyframes blobMove11 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(20vw, 5vh) scale(1.02) rotate(10deg);
    }

    50% {
        transform: translate(-18vw, -15vh) scale(0.97) rotate(-9deg);
    }

    75% {
        transform: translate(10vw, 25vh) scale(1.04) rotate(5deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

@keyframes blobMove12 {
    0% {
        transform: translate(0vw, 0vh) scale(1);
    }

    25% {
        transform: translate(-10vw, -18vh) scale(1.05) rotate(-11deg);
    }

    50% {
        transform: translate(12vw, 20vh) scale(0.96) rotate(12deg);
    }

    75% {
        transform: translate(-5vw, -10vh) scale(1.01) rotate(-4deg);
    }

    100% {
        transform: translate(0vw, 0vh) scale(1);
    }
}

/* Optional: Add a subtle pulse animation for more organic feel */
@keyframes blobPulse {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        opacity: 0.8;
    }
}

/* --- Section Overlays for Blur (applied to elements inside sections) --- */
/* REMOVED .section-background-overlay CSS properties */


/* --- Hero Section --- */
.hero-section {
    background: transparent;
    /* Remains transparent to let blobs show through */
    padding-top: calc(var(--space-xxl) + 80px);
    /* Add space for navbar */
    padding-bottom: var(--space-xl);
    z-index: 1;
    /* Hero content above blobs */
}

.hero-content {
    /* Changed from .hero-content to .hero-content-wrapper */
    position: relative;
    /* For animations */
    z-index: 1;
    /* Content above background-overlay (if used) */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-brand-line {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.hero-brand-line .app-icon {
    /* Specific styling for app icon within the brand line */
    width: 100px;
    /* INCREASED SIZE */
    height: 100px;
    /* Maintain aspect ratio */
    margin-bottom: 0;
    /* No bottom margin as it's inline now */
}


.app-icon {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-lg);
    /* Retain roundness for icon if it's a square image */
    margin-bottom: var(--space-xl);
    box-shadow: none;
    /* No shadow */
    filter: brightness(1.1);
    transition: transform 0.3s ease;
    background-color: transparent;
    /* Ensure transparent background */
}

.app-icon:hover {
    transform: scale(1.05);
}

.glow-shadow {
    /* This class remains for context, but its ::before is removed */
    position: relative;
}

.glow-shadow::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: none;
    /* Removing the glow background */
    filter: blur(25px);
    border-radius: inherit;
    z-index: -1;
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

.glow-shadow:hover::before {
    opacity: 1;
}

.hero-title {
    font-size: 5.5em;
    margin-bottom: 0px;
    color: #FFFFFF;
    /* CHANGED TO WHITE */
    letter-spacing: 0.04em;
    text-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    font-weight: 800;
    line-height: 1;
    will-change: font-size, transform;
    /* Optimize for GSAP */
}

.tagline {
    font-size: 1.8em;
    margin-bottom: var(--space-xxxl);
    color: var(--color-text-secondary);
    font-weight: 400;
    max-width: 900px;
    will-change: opacity, transform;
    /* Optimize for GSAP */
}

.hero-buttons {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    justify-content: center;
    will-change: opacity, transform;
    /* Optimize for GSAP */
}

/* Styling for the Play Store badge image button */
.download-playstore-badge {
    display: inline-block;
    /* Ensure it behaves like a button */
    padding: 0;
    /* Remove padding */
    border-radius: 0;
    /* No border radius on badge */
    transition: transform 0.2s ease;
}

.download-playstore-badge img {
    height: 80px;
    width: auto;
    vertical-align: middle;
    border-radius: 5px;
}

.download-playstore-badge:hover {
    transform: translateY(-3px);
    /* Lift effect on hover */
}


/* --- Content Sections (General Styling) --- */
/* Each 'section' will now have min-height and scroll-snap-align */
.section {
    padding-top: var(--space-xxl);
    /* General padding for content within sections */
    padding-bottom: var(--space-xxl);
    text-align: center;
    position: relative;
    /* For z-index and overlay positioning */
    z-index: 1;
    /* Ensure content is above background */
    overflow: hidden;
    /* Contains children, important for transitions */

    /* Remove direct background/backdrop-filter from sections */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
    border-bottom: none;
}


/* --- Removed sections' specific styles --- */
/* These styles are no longer present due to section removal */


/* Support buttons */
.support-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-top: var(--space-xl);
}

.support-buttons .btn {
    min-width: 180px;
    height: 50px;
}

.github-btn {
    background-color: var(--color-darkest-bg);
    border: 2px solid var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.github-btn:hover {
    background-color: rgba(122, 253, 255, 0.15);
    color: var(--color-text-primary);
}

.donate-btn {
    background: linear-gradient(90deg, var(--color-accent-secondary), var(--color-accent-primary));
    color: var(--color-darkest-bg);
}

.donate-btn:hover {
    background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));
    transform: translateY(-3px);
}

/* Download CTA Section - Has its own solid background */
.download-cta-section {
    background: linear-gradient(135deg, var(--color-darkest-bg) 0%, var(--color-dark-section-bg) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.download-cta-section .container {
    position: relative;
    /* Ensure content is above overlay */
    z-index: 2;
}

.download-cta-section h2 {
    color: var(--color-accent-primary);
    margin-bottom: var(--space-lg);
}

.download-cta-section p {
    font-size: 1.2em;
    margin-bottom: var(--space-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-secondary);
}

/* Footer */
footer {
    position: fixed;
    /* Fixed position */
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--space-md) 0;
    /* Reduced padding for compact footer */
    background-color: transparent;
    /* Made transparent */
    color: var(--color-text-secondary);
    font-size: 0.85em;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 999;
    /* Ensure it's above content but below navbar */
    backdrop-filter: blur(var(--blur-light));
    /* Apply navbar-like blur */
    -webkit-backdrop-filter: blur(var(--blur-light));
}

.footer-content {
    /* Flex container for the single line of content */
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    /* Adjust gap if needed after removing nav */
    gap: var(--space-xs);
    /* Small gap between text and link */
    padding: 0 var(--space-lg);
    /* Padding on sides */
}

/* Removed .footer-logo and .footer-nav styles as elements are removed from HTML */
.copyright {
    margin: 0;
    /* Remove default margin */
    display: flex;
    /* Use flex to align items on a single line */
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    /* Small gap between copyright text and Privacy Policy link */
    font-size: 0.85em;
    opacity: 0.7;
}

.copyright a {
    /* Styling for Privacy Policy link within copyright */
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.copyright a:hover {
    color: var(--color-accent-primary);
    background-color: transparent;
    /* No background change on hover */
}


/* --- Responsive Design (Media Queries) --- */
@media (max-width: 1024px) {
    .container {
        max-width: 90%;
        padding: 0 var(--space-md);
    }

    h1 {
        font-size: 3.5em;
    }

    h2 {
        font-size: 2.5em;
        margin-bottom: var(--space-lg);
    }

    h3 {
        font-size: 1.8em;
        margin-bottom: var(--space-sm);
    }

    .tagline {
        font-size: 1.5em;
        margin-bottom: var(--space-lg);
    }

    .hero-buttons {
        gap: var(--space-sm);
    }

    .hero-buttons .btn {
        min-width: 100px;
        font-size: 0.85em;
    }

    /* Smaller buttons for mobile */
    .download-playstore-badge img {
        height: 60px;
    }

    /* Smaller badge for mobile */
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.8em;
    }

    h2 {
        font-size: 2.2em;
    }

    h3 {
        font-size: 1.6em;
    }

    .tagline {
        font-size: 1.2em;
    }

    .slide-heading {
        margin-bottom: var(--space-lg);
    }

    .scroll-snap-section {
        min-height: 70vh;
    }

    /* Adjust snapping height */
    .app-icon {
        width: 150px;
        height: 150px;
        margin-bottom: var(--space-sm);
    }

    /* Smaller hero icon on mobile */
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }

    /* No need for .hero-buttons .btn here as it's adjusted above */

    .background-blob {
        filter: blur(60px);
        /* Reduce blob blur on mobile */
    }

    .footer-content {
        /* Adjust footer layout for mobile */
        flex-direction: column;
        gap: var(--space-xs);
    }

    .footer-nav a,
    .copyright {
        /* These selectors won't apply to specific elements now */
        font-size: 0.7em;
        /* Make footer text smaller on mobile */
    }

    .copyright {
        /* Correct target for copyright text */
        font-size: 0.7em;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 1.8em;
    }

    h3 {
        font-size: 1.4em;
    }

    .tagline {
        font-size: 1em;
    }

    .app-icon {
        width: 120px;
        height: 120px;
    }

    /* Even smaller hero icon on very small mobile */
    .btn {
        font-size: 0.8em;
        padding: var(--space-xs) var(--space-lg);
    }

    .large-btn {
        font-size: 0.9em;
        padding: var(--space-sm) var(--space-lg);
    }

    .section {
        padding: var(--space-lg) 0;
    }

    .download-playstore-badge img {
        height: 50px;
    }

    /* Even smaller badge */
}