/* ==========================================================================
           1. CSS Variables - Corporate Orange Theme
           - This section establishes the core design system for the entire site.
           - Using CSS variables (custom properties) allows for easy theme management
             and ensures brand consistency across all components. All colors, fonts,
             and shadows are defined here for centralized control. This architecture
             is crucial for scalability and maintainability in enterprise projects.
           ========================================================================== */
:root {
    /* * PRIMARY BRAND PALETTE
             * These colors form the core identity of the Arun Jewellers brand.
             * They are used for all primary actions, highlights, and branding moments.
             */
    --primary-orange: #E6461B;
    /* --primary-orange: #FF6B35; */
    /* Main brand color for CTAs, links, and active states. */
    --secondary-orange: #FF9558;
    /* A lighter shade for secondary buttons or highlights. */
    --accent-orange: #E55A2B;
    /* A deeper shade used for hover states on primary elements to provide clear visual feedback. */
    --dark-orange: #D84315;
    /* The darkest orange, reserved for high-impact but infrequent use. */

    /* * NEUTRAL & BACKGROUND PALETTE
             * A comprehensive set of neutral tones for backgrounds, text, and UI surfaces.
             * This creates a clean, professional hierarchy and ensures readability.
             */
    --bg-primary: #FFFFFF;
    /* The default page background, providing maximum contrast for content. */
    --bg-secondary: #F8F9FA;
    /* An off-white for section backgrounds, creating subtle separation. */
    --bg-tertiary: #F1F3F5;
    /* A slightly darker neutral for inactive or disabled UI elements. */
    --bg-dark: #121212;
    /* High-impact dark background for sections like stats and the footer, creating a premium feel. */

    /* * TEXT COLOR HIERARCHY
             * A structured palette for typography to ensure optimal readability and visual hierarchy.
             * Adheres to WCAG accessibility standards for contrast.
             */
    --text-primary: #1A1A1A;
    /* Near-black for main body text, ensuring high contrast and readability. */
    --text-secondary: #4A4A4A;
    /* For subheadings, descriptions, and less critical text. */
    --text-light: #6E6E6E;
    /* For helper text, captions, and placeholder content. */
    --text-white: #FFFFFF;
    /* For all text appearing on dark backgrounds (e.g., --bg-dark). */

    /* * UI & DECORATIVE COLORS
             * Used for borders, separators, and subtle UI elements that structure the layout.
             */
    --border-light: #E0E0E0;
    /* For light borders, cards, and dividers. */
    --border-medium: #CED4DA;
    /* For form inputs and elements requiring a slightly stronger outline. */

    /* * TYPOGRAPHY SYSTEM
             * Defines the font stacks for different text roles. This ensures consistency
             * and leverages system fonts for optimal performance.
             */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* For all UI and body text. */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    /* For large, impactful headlines (H1, H2). */

    /* * SHADOW SYSTEM (DEPTH & ELEVATION)
             * A tiered shadow system to create a sense of depth and hierarchy between elements.
             * These are intentionally subtle to maintain a professional, clean aesthetic.
             */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Subtle shadow for small elements like tags. */
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    /* Default shadow for cards and interactive components. */
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
    /* For elevated elements on hover or modals. */
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.16);
    /* For key elements like hero images that need to stand out. */
}

/* ==========================================================================
           2. Base & Reset Styles
           - Establishes a consistent baseline across all browsers (a modern CSS reset).
           - Removes default margins and paddings, and sets box-sizing to border-box
             for a more intuitive and predictable layout model.
           - Defines global styles for the body, links, and other core elements.
           ========================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Enables smooth scrolling for anchor links */
    font-size: 16px;
    /* Sets the base font size for rem calculations */
    -webkit-text-size-adjust: 100%;
    /* Prevents font scaling on iOS devices */
}

body {
    font-family: var(--font-primary);
    line-height: 1.65;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    /* Enables smoother font rendering on WebKit browsers */
    -moz-osx-font-smoothing: grayscale;
    /* Enables smoother font rendering on Firefox */
}

/* Generic image and media styles for responsive behavior */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Remove default list styles */
ul,
ol {
    list-style: none;
}

/* Generic link styling */
a {
    color: var(--primary-orange);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: var(--accent-orange);
}

/* ==========================================================================
           3. Layout & Container System
           - Defines the main content containers and section padding.
           - This ensures a consistent maximum width and padding for all major
             sections of the page, maintaining visual harmony and structure.
           ========================================================================== */
.container {
    width: 100%;
    max-width: 1240px;
    /* Optimal width for readability and layout on large screens */
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
}

.section {
    padding-top: 100px;
    /* Standard vertical spacing between sections */
    padding-bottom: 100px;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
    /* Constrains width for better readability of headlines and descriptions */
    margin-left: auto;
    margin-right: auto;
}

/* Grid helper classes for common layouts */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* ==========================================================================
           4. Typography System
           - Defines a clear and scalable typographic hierarchy for headings,
             paragraphs, and other text elements. Uses clamp() for fluid typography
             where appropriate for a seamless responsive experience.
           ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

h1 {
    font-family: var(--font-display);
    font-size: 3.5rem;
    /* 56px */
    letter-spacing: -1px;
    /* Tighter spacing for large display text */
}

h2 {
    font-family: var(--font-display);
    font-size: 2.75rem;
    /* 44px */
}

h3 {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    /* 28px */
    font-weight: 600;
}

h4 {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    /* 20px */
    font-weight: 600;
}

p {
    font-size: 1.05rem;
    /* 17px */
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 65ch;
    /* Optimal line length for readability */
}

.section-header p {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: none;
    /* Override max-width for section descriptions */
}

.text-accent {
    color: var(--primary-orange);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.875rem;
    /* 14px */
    display: block;
    margin-bottom: 12px;
}

/* ==========================================================================
           5. Buttons & UI Elements
           - Defines the appearance and behavior of all button components.
           - NO ANIMATION: Transitions have been removed for a static, instant response
             as per user requirements for an industry-level feel. State changes are
             immediate.
           ========================================================================== */
.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    font-size: 1rem;
    text-align: center;
}

.btn:hover {
    text-decoration: none;
    /* Buttons should not be underlined on hover */
}

.btn-primary {
    background-color: var(--primary-orange);
    color: var(--text-white);
    border-color: var(--primary-orange);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
    color: var(--text-white);
}

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

.btn-secondary:hover {
    background-color: var(--text-primary);
    color: var(--text-white);
    border-color: var(--text-primary);
}

/* Back to top button for usability */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-orange);
    color: var(--text-white);
    border: none;
    border-radius: 50%;
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    box-shadow: var(--shadow-lg);
}

.back-to-top.visible {
    display: flex;
}

.back-to-top:hover {
    background-color: var(--accent-orange);
}

/* ==========================================================================
           6. Header & Navigation
           - Styles for the fixed site header, main navigation, and mobile menu.
           - The header is fixed to the top for persistent navigation access.
           ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    /* Creates a modern, frosted glass effect */
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    /* Ensures header stays on top of other content */
    transition: box-shadow 0.2s ease-out;
    /* Subtle transition for scrolled state */
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

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

.logo-icon {
    width: 44px;
    height: 44px;
    background-color: var(--primary-orange);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-weight: 700;
    font-size: 1.25rem;
    font-family: var(--font-display);
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
    align-items: center;
}

.nav-links a:not(.btn) {
    color: var(--text-secondary);
    font-weight: 500;
    position: relative;
    padding: 8px 0;
}

.nav-links a:not(.btn):hover {
    color: var(--primary-orange);
    text-decoration: none;
}

.nav-links a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-orange);
    transform: scaleX(0);
    /* Hidden by default */
    transform-origin: center;
    transition: transform 0.2s ease-out;
    /* Smooth visual feedback */
}

.nav-links a:not(.btn):hover::after {
    transform: scaleX(1);
    /* Visible on hover */
}

.nav-links .btn-primary {
    padding: 10px 24px;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(255, 107, 53, 0.3);
}

.mobile-menu-toggle {
    display: none;
    /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    /* Must be above the mobile menu overlay */
}

.mobile-menu-toggle svg {
    width: 28px;
    height: 28px;
    color: var(--text-primary);
}

.mobile-nav-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--bg-primary);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.mobile-nav-menu.active {
    display: flex;
}

.mobile-nav-menu a {
    font-size: 1.5rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* ==========================================================================
           7. Hero Section
           - The main introductory section of the landing page.
           ========================================================================== */
.hero {
    padding-top: 180px;
    padding-bottom: 100px;
    background: linear-gradient(135deg, var(--pale-orange) 0%, var(--bg-primary) 100%);
}

.hero-text h1 {
    margin-bottom: 24px;
}

.hero-text p {
    font-size: 1.25rem;
    margin-bottom: 40px;
    color: var(--text-secondary);
    max-width: 50ch;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    align-items: center;
}

.hero-image {
    position: relative;
}

.hero-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: 20px;
    bottom: 20px;
    background-color: var(--light-orange);
    border-radius: 16px;
    z-index: 1;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 2;
    /* Sits on top of the decorative element */
    object-fit: cover;
}

/* ==========================================================================
           8. Stats Section
           - Displays key metrics to build trust and credibility.
           ========================================================================== */
.stats {
    background-color: var(--bg-dark);
    padding: 60px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.stat-item h3 {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--primary-orange);
    margin-bottom: 8px;
}

.stat-item p {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    max-width: none;
    margin: 0 auto;
}

/* ==========================================================================
           9. Partners Section
           - Showcases partner logos to build social proof and authority.
           ========================================================================== */
.partners {
    background-color: var(--bg-secondary);
    padding: 60px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.partners-title {
    text-align: center;
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 40px;
}

.partner-logos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.partner-logo img {
    max-height: 40px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.2s ease-out, opacity 0.2s ease-out;
    /* Smooth feedback */
}

.partner-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ==========================================================================
           10. About Section
           - Provides company background and mission statement.
           ========================================================================== */
.about {
    background-color: var(--bg-primary);
}

.about-text h2 {
    margin-bottom: 24px;
}

.about-text p {
    margin-bottom: 24px;
}

.about-text .btn {
    margin-top: 16px;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    max-height: 500px;
    object-fit: contain;
}

/* ==========================================================================
           11. Features Section
           - Highlights key platform features in a card-based layout.
           ========================================================================== */
.features {
    background-color: var(--bg-secondary);
}

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

.feature-card {
    background-color: var(--bg-primary);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.feature-card:hover {
    box-shadow: var(--shadow-lg);
    /* Simple shadow change on hover */
    border-color: transparent;
}

.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background-color: var(--light-orange);
}

.feature-icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary-orange);
}

.feature-card h3 {
    margin-bottom: 12px;
    font-size: 1.5rem;
}

.feature-card p {
    max-width: none;
}

/* ==========================================================================
           12. App Showcase Section
           - Interactive tabbed view of the mobile application's features.
           ========================================================================== */
.app-showcase {
    background-color: var(--bg-primary);
    overflow: hidden;
    /* Prevents visual glitches with the mockup */
}

.app-nav-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 60px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 20px;
}

.app-tab {
    padding: 12px 28px;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-secondary);
}

.app-tab.active {
    background-color: var(--primary-orange);
    color: var(--text-white);
}

.app-tab:not(.active):hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.app-info h3 {
    margin-bottom: 20px;
}

.app-features-list {
    list-style: none;
    margin-top: 30px;
    padding: 0;
}

.app-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.app-features-list li p {
    margin: 0;
    max-width: none;
}

.check-mark {
    width: 24px;
    height: 24px;
    background-color: var(--light-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-orange);
    flex-shrink: 0;
    font-weight: bold;
}

.phone-mockup {
    width: 340px;
    height: 680px;
    background-color: #1a1a1a;
    border-radius: 44px;
    padding: 14px;
    margin: 0 auto;
    box-shadow: var(--shadow-xl);
    position: relative;
}

.phone-mockup::before {
    content: '';
    position: absolute;
    top: 100px;
    left: -3px;
    width: 2px;
    height: 30px;
    background-color: #444;
    border-radius: 2px 0 0 2px;
}

.phone-mockup::after {
    content: '';
    position: absolute;
    top: 120px;
    right: -3px;
    width: 2px;
    height: 60px;
    background-color: #444;
    border-radius: 0 2px 2px 0;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background-color: var(--bg-primary);
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#app-screen-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: var(--font-primary);
    color: var(--text-primary);
    overflow-y: auto;
}

#app-screen-content::-webkit-scrollbar {
    width: 4px;
}

#app-screen-content::-webkit-scrollbar-track {
    background: transparent;
}

#app-screen-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

/* ==========================================================================
           13. Testimonials Section
           - Builds social proof and trust with client quotes.
           ========================================================================== */
.testimonials {
    background-color: var(--bg-secondary);
}

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

.testimonial-card {
    background-color: var(--bg-primary);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
}

.testimonial-card-quote {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 24px;
    flex-grow: 1;
}

.testimonial-card-quote::before {
    content: '“';
    font-size: 3rem;
    color: var(--primary-orange);
    font-weight: 700;
    line-height: 0;
    display: block;
    margin-bottom: 10px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

.testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-author-name {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.testimonial-author-title {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

/* ==========================================================================
           14. Contact Section
           - Contains contact information and a lead generation form.
           ========================================================================== */
#contact-form-section {
    background-color: var(--pale-orange);
}

#contact-form-section .grid-2-col {
    align-items: flex-start;
}

.contact-info-block h3,
.contact-form-block h3 {
    margin-bottom: 24px;
}

.contact-info-list {
    margin-top: 20px;
    padding: 0;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    font-size: 1.05rem;
}

.contact-info-list svg {
    width: 24px;
    height: 24px;
    color: var(--primary-orange);
    margin-top: 4px;
    flex-shrink: 0;
}

.contact-image img {
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    margin-top: 40px;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.contact-form .form-control {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--border-medium);
    background-color: var(--bg-primary);
    font-size: 1rem;
    font-family: var(--font-primary);
}

.contact-form .form-control:focus {
    outline: none;
    border-color: var(--primary-orange);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.contact-form textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.form-message {
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    font-weight: 500;
    display: none;
    /* Hidden by default */
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

/* ==========================================================================
           15. FAQ Section
           - An accordion-style section for frequently asked questions.
           ========================================================================== */
#faq {
    background-color: var(--bg-secondary);
}

.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid var(--border-light);
}

.faq-item {
    border-bottom: 1px solid var(--border-light);
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question:hover {
    color: var(--primary-orange);
}

.faq-answer {
    max-height: 0;
    /* Collapsed by default */
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    /* Smooth collapse/expand */
}

.faq-answer p {
    padding: 0 0 24px 0;
    color: var(--text-secondary);
}

.faq-icon {
    font-size: 1.5rem;
    font-weight: 400;
    transition: transform 0.2s ease-out;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    /* Kept for icon state indication */
}

/* ==========================================================================
           16. CTA (Call to Action) Section
           - A high-impact section encouraging app downloads.
           ========================================================================== */
.cta {
    background: linear-gradient(135deg, var(--primary-orange) 0%, var(--accent-orange) 100%);
    color: var(--text-white);
    text-align: center;
}

.cta h2 {
    color: var(--text-white);
    margin-bottom: 20px;
}

.cta p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.download-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.store-button {
    display: inline-block;
    height: 60px;
    /* Consistent height */
    transition: transform 0.1s ease-out;
}

.store-button:hover {
    transform: scale(1.03);
    text-decoration: none;
}

.store-button svg {
    height: 100%;
    width: auto;
    display: block;
}

/* ==========================================================================
           17. Footer
           - Contains site navigation, legal links, and social media links.
           ========================================================================== */
footer {
    background-color: var(--bg-dark);
    color: var(--text-white);
    padding: 80px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand .logo {
    margin-bottom: 16px;
}

.footer-brand .logo-text {
    color: var(--text-white);
}

.footer-brand p {
    color: #AAAAAA;
    max-width: 40ch;
}

.footer-column h4 {
    color: var(--text-white);
    margin-bottom: 20px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.footer-links {
    list-style: none;
    padding: 0;
}

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

.footer-links a {
    color: #AAAAAA;
}

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

.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid #2A2A2A;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom p {
    color: #888888;
    font-size: 0.9rem;
    margin: 0;
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-link {
    width: 40px;
    height: 40px;
    background-color: #2A2A2A;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #AAAAAA;
}

.social-link svg {
    width: 20px;
    height: 20px;
}

.social-link:hover {
    background-color: var(--primary-orange);
    color: var(--text-white);
    text-decoration: none;
}

/* ==========================================================================
           18. Responsive Design
           - Media queries to ensure the layout adapts gracefully to different
             screen sizes, from mobile phones to large desktops.
           ========================================================================== */

/* Tablet and Small Desktops (max-width: 1024px) */
@media (max-width: 1024px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    .grid-2-col {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .hero-text p,
    .about-text p,
    .app-info p,
    .contact-info-block p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons,
    .hero-text .text-accent {
        justify-content: center;
    }

    .hero-image {
        grid-row: 1;
        /* Puts image above text on mobile */
        margin-bottom: 30px;
    }

    .about-image {
        order: -1;
        /* Move image above text */
    }

    .phone-mockup {
        margin-top: 40px;
    }

    .contact-info-list {
        justify-content: center;
        text-align: left;
    }

    #contact-form-section .grid-2-col {
        text-align: left;
        /* Keep contact form left-aligned */
    }

    .contact-image {
        display: none;
        /* Hide image on contact form for tablets */
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile Devices (Portrait, max-width: 768px) */
@media (max-width: 768px) {
    .section {
        padding: 80px 0;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .container {
        padding: 0 20px;
    }

    /* Switch to mobile navigation */
    .nav-links {
        display: none;
    }

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

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 30px;
    }

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

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column h4 {
        margin-top: 20px;
    }

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

    .footer-brand .logo,
    .social-links {
        justify-content: center;
    }

    .phone-mockup {
        width: 300px;
        height: 600px;
    }

    .app-tab {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* Small Mobile Devices (max-width: 480px) */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .hero-buttons,
    .download-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero {
        padding-top: 140px;
    }

    .partner-logo img {
        max-height: 30px;
    }
}

.store-button {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-family: 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    transition: background-color 0.3s ease;
}

.store-button:hover {
    background-color: #333;
}

.store-button i {
    font-size: 28px;
    margin-right: 12px;
}

.store-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.small-text {
    font-size: 10px;
    letter-spacing: 0.5px;
}

.big-text {
    font-size: 16px;
    font-weight: bold;
}

@media(max-width:575px) {
    .hero-image img {
        max-height: 150px !important;
    }
}