/* ================================================= */
/* CSS RESET & PERFORMANCE OPTIMIZED */
/* ================================================= */
:root {
   /* Your Primary Color Palette */
    --color-primary: #008B8B;
    --color-accent: #00FFFF;
    --color-dark: #0A0A1A;
    --color-darker: #050510;
    --color-text: #FFFFFF;
    --color-text-light: #E0E0E0;
    --color-accent-dark: #00cccc;
    --color-primary-dark: #006b6b;

    /* Extended Colors (for consistency with your about page) */
    --color-medium: #1c2638;
    --color-light: #2a3549;
    --color-text-lighter: #c5d0e8;
    
    /* Status Colors */
    --color-success: #008b8b;
    --color-warning: orange;
    --color-error: #e74c3c;
    --color-info: #008b8b;
    
    /* RGB versions for opacity control */
    --color-accent-rgb: 0, 255, 255;
    --color-primary-rgb: 0, 139, 139;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 15px rgba(0, 212, 255, 0.3);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: var(--color-dark);
}
/* Prevent text selection */
body {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Non-prefixed version */
}

/* Prevent image dragging */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none; /* Makes images non-interactive */
}

/* Add overlay on images */
.image-protection {
    position: relative;
    display: inline-block;
}

.image-protection::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 6%;
}

/* ================================================= */
/* PREMIUM DARK SAAS SCROLLBAR */
/* ================================================= */

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
    width: 8px; /* thinner */
}

::-webkit-scrollbar-track {
    background: #050510;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(0, 255, 255, 0.85),
        rgba(0, 139, 139, 0.85)
    );
    border-radius: 8px;
    border: 1px solid rgba(5, 5, 16, 0.9); /* thinner, softer */
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        #00ffff,
        #00cccc
    );
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 139, 139, 0.5) #050510;
}

/* ================================================= */
/* HEADER - FLUENTLY STYLE (TRANSPARENT, DISAPPEARS) */
/* ================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
    padding: 2rem 0;
    background: transparent;
    transform: translateZ(0);
    transition: transform 0.25s ease;
    -webkit-transform: translateZ(0);
    padding-top: 60px;
}

/* Header container for left alignment */
.site-header .container {
    display: flex;
    padding-left: 1rem;
    justify-content: flex-start;
}

/* White logo with subtle cyan glow */
.brand-title {
    font-size: 2rem;
    font-weight: 800;
    padding-left: 2rem;
    cursor: default;
    background: linear-gradient(90deg, #00FFFF, #008B8B, #00FFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: gradient-shimmer 3s linear infinite;
}

@keyframes gradient-shimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: -200% 0%; }
}
.site-header.hidden {
    transform: translateY(-120%);
    pointer-events: none;
}

/* ================================================= */
/* HERO SECTION - PERFORMANCE OPTIMIZED */
/* ================================================= */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 10rem 0 4rem;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Simplified gradient for better performance */
    background: linear-gradient(
        145deg,
        var(--color-darker) 0%,
        var(--color-dark) 100%
    );
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-content {
    padding-right: 2rem;
    contain: content;
}

.hero-headline {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 2rem;
}

.gradient-text {
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.hero-subhead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin-bottom: 3rem;
    max-width: 90%;
}

.hero-cta {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: fit-content;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 1.2rem;
}

.btn-primary {
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
    color: var(--color-dark);
    box-shadow: 0 8px 20px rgba(0, 255, 255, 0.15);
    border: 1px solid #000000;       /* default white liner */
    border-radius: 25px;             /* reduce corner roundness */
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.9); /* more visible liner */
}

.hero-note {
    font-size: 0.9rem;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.8;
}

/* App Mockup - Performance Optimized */
.hero-preview {
    position: relative;
    contain: content;
}

.app-mockup {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.map-visual {
    position: relative;
    height: 200px;
    background: rgba(0, 139, 139, 0.1);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.route-line {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
    transform: translateY(-50%);
}

.car-icon {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    color: var(--color-accent);
    font-size: 1.5rem;
}

.start-point, .end-point {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
}

.start-point {
    left: 8%;
}

.end-point {
    right: 8%;
}

.trip-notification {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.25rem;
    border-left: 3px solid var(--color-accent);
}

.notification-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.notification-header i {
    color: var(--color-accent);
}

.notification-header h5 {
    font-size: 1rem;
    font-weight: 600;
}

.trip-notification p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

.notification-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-teal {
    background: var(--color-primary);
    color: white;
}

.btn-teal:hover {
    background: #006B6B;
}

.btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-light);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Scroll Hint - independent, centered on screen */
.scroll-hint {
    position: fixed;             /* fixed relative to viewport */
    bottom: 2rem;                /* distance from bottom of the screen */
    left: 50%;                   /* center horizontally */
    transform: translateX(-50%); /* adjust for exact centering */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;

    color: var(--color-accent);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 999;                /* stay above content */
}

.scroll-hint:hover {
    opacity: 1;
}

.scroll-hint span {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
}

.scroll-hint i {
    font-size: 1.2rem;           /* optional: adjust arrow size */
}
/* Hide scroll hint when hero stacks vertically */
@media (max-width: 992px) { 
    .scroll-hint {
        display: none;
    }
}


/* ================================================= */
/* HERO FRAME – CLEAN WHITE BORDER (NO JAGGED) */
/* ================================================= */
.hero-frame {
    width: 100%;
    margin: 0 auto;
    display: block;
    border-radius: 24px;
    overflow: hidden;
    /* REMOVE inset shadow - it causes white dots */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); /* Only outer shadow */
    transform: translateZ(0);
    will-change: transform;
    opacity: 0;
    animation: fadeInUp 0.9s ease-out forwards;
    animation-delay: 0.25s;
}

.hero-frame img {
    display: block;
    width: 100%;
    height: auto;
    /* No border-radius here */
    transform: translateZ(0);
}

/* Fade-in animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================================================= */
/* HERO GRID – DESKTOP DEFAULT */
/* ================================================= */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 420px);
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

.hero-content {
    max-width: 520px;
    width: 100%;
    text-align: left;
}

.hero-headline,
.hero-subhead {
    max-width: 100%;
}

.hero-cta {
    align-items: flex-start;
}

.hero-cta .btn {
    width: auto;
    max-width: none;
}

/* ================================================= */
/* RESPONSIVE – STACKED / TABLETS / PHONES */
/* ================================================= */

/* Tablet: 992px and below */
@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        justify-items: center;
    }

    .hero-content {
        padding: 0;
        text-align: center;
        width: 100%;
        max-width: 100%; /* ← CHANGE FROM 600px TO 100% */
        box-sizing: border-box;
    }

    .hero-frame {
        width: 90%; /* fill width of container */
    }

    .hero-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
    }

    .hero-cta .btn {
        width: auto;
        max-width: 90%;
        margin: 0 auto;
        display: inline-flex;
        justify-content: center;
    }
}

/* Phones: 768px and below */
@media (max-width: 768px) {
    .hero-content {
        padding: 0 1rem; /* ← ADD PADDING FOR SMALL PHONES */
        max-width: 100%;
        box-sizing: border-box;
    }
    .hero-headline {
        font-size: 2.2rem;
        text-align: center;
        padding: 0 1rem;
    }

    .hero-subhead {
        font-size: 1.1rem;
        text-align: center;
        padding: 0 1rem;
    }

    .hero-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .hero-cta .btn {
        width: auto;
        max-width: 95%;
    }

    .hero-frame {
        width: 90%;
    }
}

/* Small phones / iPhone: 480px and below */
@media (max-width: 480px) {

    .hero-grid {
        gap: 0.5rem !important; /* ← CHANGE THIS (was likely 2-4rem) */
        row-gap: 0.5rem !important; /* Specifically vertical gap */
    }
    .hero-content {
        max-width: 100% !important;
        padding: 0 1rem !important; /* Keep some padding */
        width: 100%;
        text-align: left; /* ← Left align everything */
    }

    .hero-headline {
        font-size: 2rem; /* Slightly larger */
        margin: 0;
        line-height: 1.2;
        text-align: left; /* ← Left aligned */
    }

    .hero-subhead {
        font-size: 1.05rem;
        margin: 1rem 0 1.5rem 0; /* ↑ Space below, less space above */
        line-height: 1.5;
        text-align: left; /* ← Left aligned */
        max-width: 100%; /* Full width */
        margin-left: 0; /* Remove auto margins */
        margin-right: 0;
    }

    .hero-cta {
        margin-top: 1.5rem; /* ↑ Space above button */
        margin-bottom: 2rem; /* ↑ Space below button before image */
        text-align: left; /* ← Left aligned button */
    }

    .hero-cta .btn {
        padding: 0.9rem 1.8rem;
        font-size: 1.05rem;
        margin: 0; /* Remove auto margin */
        width: auto; /* Natural button width */
        max-width: none;
        display: inline-block; /* Natural width button */
    }

    .hero-note {
        margin-top: 0.75rem; /* ↑ Space between button and note */
        font-size: 0.85rem;
        text-align: left; /* ← Left aligned */
        opacity: 0.8;
    }

    .hero-frame {
        width: 100%;
        margin-top: 1rem; /* ↓ Less space above image */
        margin-bottom: 0.5rem; /* ↓ Less space below image */
    }
    
    .container {
        padding-left: 1.25rem; /* Slightly more padding */
        padding-right: 1.25rem;
    }
}
/* ================================================= */
/* SECTION 2: FEATURES - FINAL VERSION              */
/* ================================================= */

.section-features {
    padding: 5rem 0 6rem; /* Reduced top padding */
    background: linear-gradient(45deg, var(--color-dark) 0%, var(--color-primary) 100%);
    position: relative;
    overflow: hidden;
    color: white;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Section divider line */
.section-features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--color-accent), 
        transparent);
}
.section-features::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2); /* adds subtle darkness on top */
    pointer-events: none;
    z-index: 0;
}
.section-header {
    text-align: center;
    margin-bottom: 3.5rem; /* Reduced from 4rem */
    position: relative;
    z-index: 1;
}

.section-features .section-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    text-align: center;
    
       /* Gradient text with three colors */
    background: linear-gradient(160deg, #008B8B, #ffffff, #00ffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.section-features .section-subtitle {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 0;
    color: var(--color-text-light); /* SOFTER COLOR, NOT WHITE */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-weight: 300;
}

/* ================================================= */
/* 2-3-2 GRID LAYOUT - WITH INCREASED SPACING       */
/* ================================================= */

.features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2.5rem; /* INCREASED CARD SPACING */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* Card sizing */
.feature-card {
    position: relative;
    min-height: 360px; /* 2:3 ratio */
    grid-column: span 2;
}

/* First row: 2 cards centered */
.feature-card:nth-child(1) {
    grid-column: 2 / span 2;
}
.feature-card:nth-child(2) {
    grid-column: 4 / span 2;
}

/* Second row: 3 cards centered */
.feature-card:nth-child(3) {
    grid-column: 1 / span 2;
}
.feature-card:nth-child(4) {
    grid-column: 3 / span 2;
}
.feature-card:nth-child(5) {
    grid-column: 5 / span 2;
}

/* Third row: 2 cards centered */
.feature-card:nth-child(6) {
    grid-column: 2 / span 2;
}
.feature-card:nth-child(7) {
    grid-column: 4 / span 2;
}

/* ================================================= */
/* CARD STYLING - WITH IMPROVED COLORS              */
/* ================================================= */

.feature-card-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.05); /* Subtler background */
    border-radius: 16px; /* Slightly more rounded */
    padding: 1px;
    transition: all 0.3s ease;
}

.feature-card-glass {
    position: relative;
    height: 100%;
    background: rgba(10, 10, 26, 0.4); /* Darker glass using --color-dark */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 15px;
    padding: 2.2rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

/* Feature Number */
.feature-card::before {
    content: attr(data-number);
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    background: rgba(0, 255, 255, 0.15);
    color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    z-index: 2;
    border: 1px solid rgba(0, 255, 255, 0.3);
}

/* Icon - EYE-CATCHING COLOR */
.feature-icon {
    margin-bottom: 1.5rem;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 255, 0.1);
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.feature-icon i {
    font-size: 2.4rem;
    color: var(--color-accent); /* BRIGHT ACCENT COLOR FOR ICONS */
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.4));
}

/* Title */
.feature-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white; /* White for good contrast */
    line-height: 1.4;
}

/* Description */
.feature-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-light); /* Lighter gray for description */
    font-weight: 300;
}

/* ================================================= */
/* HOVER: WHITE BORDER ONLY (Correct Implementation) */
/* ================================================= */

.feature-card:hover .feature-card-border {
    background: transparent; /* Remove the subtle background on hover */
    border: 1px solid white; /* ADD WHITE BORDER */
}

.feature-card:hover .feature-card-glass {
    /* Keep the glass effect, just change border to transparent */
    border-color: transparent;
}

/* Optional: Slight icon enhancement on hover */
.feature-card:hover .feature-icon {
    background: rgba(0, 255, 255, 0.15);
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* ================================================= */
/* RESPONSIVE DESIGN                                */
/* ================================================= */

/* Tablet: Switch to 2 columns */
@media (max-width: 1100px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        max-width: 700px;
    }
    
    .feature-card {
        grid-column: span 1 !important;
        min-height: 340px;
    }
    
    .feature-card:nth-child(n) {
        grid-column: span 1;
    }
}

/* Large Mobile: Single column */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 1.8rem;
        padding: 0 1.5rem;
    }
    
    .feature-card {
        min-height: 320px;
    }
    
    .section-features {
        padding: 4rem 0 4rem;
    }
    
    .section-features .section-title {
        font-size: 2.4rem;
    }
    
    .section-features .section-subtitle {
        font-size: 1.05rem;
        padding: 0 1rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .section-features {
        padding: 3.5rem 0 3.5rem;
    }
    
    .section-features .section-title {
        font-size: 2rem;
    }
    
    .section-features .section-subtitle {
        font-size: 0.95rem;
    }
    
    .features-grid {
        padding: 0 1rem;
        gap: 1.5rem;
    }
    
    .feature-card {
        min-height: 300px;
    }
    
    .feature-card-glass {
        padding: 1.8rem 1.5rem;
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
    }
    
    .feature-icon i {
        font-size: 2rem;
    }
    
    .feature-title {
        font-size: 1.15rem;
    }
    
    .feature-desc {
        font-size: 0.9rem;
    }
}

/* Large Desktop */
@media (min-width: 1400px) {
    .features-grid {
        max-width: 1300px;
        gap: 3rem; /* Even more spacing on large screens */
    }
    
    .feature-card {
        min-height: 380px;
    }
}

/* ================================================= */
/* FAQ SECTION - MODERN CLEAN STYLE                  */
/* ================================================= */

.section-faq {
    background: linear-gradient(180deg, 
        var(--color-darker) 0%, 
        #0a1a2a 100%);
    padding: 6rem 0;
    color: var(--color-text);
}

/* Main container - two column layout */
.faq-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Left column - FAQ header */
.faq-header {
    position: sticky;
    top: 2rem;
}

/* FAQ Title - Clean typography like getfluently.app */
.faq-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.faq-title-line {
    display: block;
    color: var(--color-text);
    margin-bottom: 0.3rem;
}

.faq-title-accent {
    display: block;
    color: var(--color-accent);
    font-weight: 800;
}

/* FAQ description */
.faq-description {
    font-size: 1.15rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 90%;
}

/* FAQ List - Right column */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual FAQ Item - Clean card style */
.faq-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.faq-item:hover {
    border-width: 2px;
    border-color: rgba(0, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
}

/* Question button */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
}

.faq-question span {
    flex: 1;
    line-height: 1.5;
}

/* Chevron icon - Simple and clean */
.faq-question i {
    font-size: 0.9rem;
    color: var(--color-accent);
    transition: transform 0.3s ease;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

/* Answer - Smooth expand/collapse */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer p {
    padding-top: 1rem;
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-light);
    line-height: 1.6;
    opacity: 0.9;
}

/* Active state - When FAQ is open */
.faq-item.active {
    border-color: rgba(0, 255, 255, 0.25);
    background: rgba(0, 255, 255, 0.03);
}

.faq-item.active .faq-question {
    color: var(--color-accent);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    max-height: 1000px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .faq-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .faq-header {
        position: static;
        text-align: center;
    }
    
    .faq-description {
        max-width: 100%;
        margin: 0 auto 2rem;
    }
    
    .faq-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .section-faq {
        padding: 4rem 0;
    }
    
    .faq-container {
        padding: 0 1.5rem;
        gap: 2.5rem;
    }
    
    .faq-title {
        font-size: 2.2rem;
    }
    
    .faq-item {
        padding: 1.25rem;
    }
    
    .faq-question {
        font-size: 1.05rem;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .section-faq {
        padding: 3rem 0;
    }
    
    .faq-container {
        padding: 0 1rem;
    }
    
    .faq-title {
        font-size: 2rem;
    }
    
    .faq-description {
        font-size: 1rem;
    }
    
    .faq-item {
        padding: 1rem;
        border-radius: 10px;
    }
    
    .faq-question {
        font-size: 1rem;
    }
    
    .faq-answer p {
        font-size: 0.95rem;
    }
}

/* ================================================= */
/* PRICING SECTION - CLEAN MODERN STYLE             */
/* ================================================= */

.section-pricing {
    background: linear-gradient(180deg, 
        var(--color-darker) 0%, 
        #0a1929 100%);
    padding: 6rem 0;
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

/* Background accent for center card */
.section-pricing::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 70%;
    background: radial-gradient(circle, 
        rgba(0, 255, 255, 0.05) 0%, 
        transparent 70%);
    z-index: 0;
}

.pricing-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.pricing-header .section-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
       /* Gradient text with three colors */
    background: linear-gradient(160deg, #008B8B, #ffffff, #00ffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pricing-header .section-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0.9;
}

/* ================================================= */
/* THREE COLUMN PRICING GRID                        */
/* ================================================= */

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

/* Base Card Style */
.pricing-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

/* Lite Plan - Left Column */
.lite-plan {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Pro Yearly - Center Featured Column */
.pricing-card.featured {
    transform: scale(1.05);
    border: 2px solid var(--color-accent);
    background: rgba(10, 10, 26, 0.6);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(0, 255, 255, 0.1) inset;
    position: relative;
}

/* Best Value Badge */
.value-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: var(--color-dark);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 1.5rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Pro Monthly - Right Column */
.pricing-card.monthly {
    border-color: rgba(0, 255, 255, 0.15);
}

/* ================================================= */
/* PLAN HEADER (Title, Price, Tagline)              */
/* ================================================= */

.plan-header {
    margin-bottom: 2rem;
    text-align: center;
}

.plan-name {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.lite-plan .plan-name {
    color: var(--color-text-light);
}

.featured .plan-name {
    color: var(--color-accent);
}

.plan-price {
    margin-bottom: 0.5rem;
}

.price {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
}

.lite-plan .price {
    color: var(--color-text);
}

.featured .price {
    color: var(--color-accent);
}

.monthly .price {
    color: var(--color-text);
}

.period {
    display: block;
    font-size: 1rem;
    color: var(--color-text-light);
    margin-top: 0.3rem;
    font-weight: 400;
}

.plan-tagline {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-top: 0.5rem;
    opacity: 0.9;
}

/* Savings Highlight (Yearly Plan Only) */
.savings-highlight {
    margin-top: 1rem;
    padding: 0.6rem 1rem;
    background: rgba(0, 255, 255, 0.1);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-accent);
}

.savings-highlight i {
    font-size: 0.9rem;
}

/* ================================================= */
/* FEATURE LISTS                                    */
/* ================================================= */

.plan-features {
    flex: 1;
    margin-bottom: 2rem;
}

.plan-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
}

.plan-features li:last-child {
    margin-bottom: 0;
}

/* Check/X Icons */
.plan-features i.fa-check {
    color: var(--color-accent);
    font-size: 1rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.plan-features i.fa-times {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

/* Disabled Feature Text */
.feature-disabled {
    color: rgba(255, 255, 255, 0.4);
}

/* "Everything in Lite" header */
.plan-features li strong {
    color: var(--color-accent);
    font-weight: 600;
}

/* Flexibility Note for Monthly */
.flexibility-note {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.flexibility-note i {
    color: var(--color-accent);
}

/* ================================================= */
/* HOVER EFFECTS (Minimal)                          */
/* ================================================= */

.lite-plan:hover,
.pricing-card.monthly:hover {
    border-color: rgba(0, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
}

/* Center card doesn't hover - it's already emphasized */
.pricing-card.featured:hover {
    transform: scale(1.05); /* Keep same scale */
}

/* ================================================= */
/* FOOTER NOTE                                      */
/* ================================================= */

.pricing-footer {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.footer-note {
    font-size: 0.95rem;
    color: var(--color-text-light);
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.6;
}

.footer-note i {
    color: var(--color-accent);
    font-size: 0.9rem;
}

/* ================================================= */
/* RESPONSIVE DESIGN                                */
/* ================================================= */

@media (max-width: 1100px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        gap: 2.5rem;
    }
    
    .pricing-card.featured {
        transform: none;
        order: -1; /* Show featured card first on mobile */
    }
    
    .value-badge {
        left: 2rem;
        transform: none;
    }
}

@media (max-width: 768px) {
    .section-pricing {
        padding: 4rem 0;
    }
    
    .pricing-header .section-title {
        font-size: 2.4rem;
    }
    
    .pricing-grid {
        padding: 0 1.5rem;
        gap: 2rem;
    }
    
    .pricing-card {
        padding: 2rem 1.5rem;
    }
    
    .price {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .section-pricing {
        padding: 3rem 0;
    }
    
    .pricing-header .section-title {
        font-size: 2rem;
    }
    
    .pricing-header .section-subtitle {
        font-size: 1rem;
    }
    
    .pricing-grid {
        padding: 0 1rem;
        gap: 1.8rem;
    }
    
    .pricing-card {
        padding: 1.8rem 1.2rem;
        border-radius: 12px;
    }
    
    .price {
        font-size: 2.5rem;
    }
    
    .plan-features li {
        font-size: 0.95rem;
    }
    
    .footer-note {
        font-size: 0.9rem;
        flex-direction: column;
        gap: 0.3rem;
    }
}

/* ================================================= */
/* iOS DOWNLOAD SECTION - SMART DETECTION           */
/* ================================================= */

.ios-download-section {
    background: linear-gradient(135deg, 
        var(--color-dark) 0%, 
        var(--color-darker) 100%);
    padding: 6rem 0;
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

/* Subtle accent glow */
.ios-download-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, 
        rgba(0, 255, 255, 0.05) 0%, 
        transparent 70%);
    z-index: 0;
}

.container {
    position: relative;
    z-index: 1;
}

/* Section Header */
.ios-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.ios-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;

    /* Gradient text with three colors */
    background: linear-gradient(160deg, #008B8B, #ffffff, #00ffff); /* dark cyan → teal → black */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ios-subtitle {
    font-size: 1.15rem;
    color: var(--color-text-light);
    margin-bottom: 3rem;
    opacity: 0.9;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ================================================= */
/* DOWNLOAD SCENARIOS CONTAINER                     */
/* ================================================= */

.download-scenarios {
    max-width: 800px;
    margin: 0 auto 3rem;
}

/* Base Scenario Styling */
.download-scenario {
    display: none; /* Hidden by default, shown via JS */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

/* Scenario Header */
.scenario-content {
    text-align: center;
}

.scenario-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.scenario-description {
    font-size: 1.05rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* ================================================= */
/* SCENARIO 1: iOS DEVICE                           */
/* ================================================= */

.ios-device .scenario-title {
    color: var(--color-accent);
}

/* Primary CTA - App Store Button */
.primary-cta {
    margin-bottom: 2.5rem;
}

.app-store-btn {
    display: inline-block;
    transition: transform 0.2s ease;
}

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

.app-store-badge {
    max-width: 200px;
    height: auto;
     display: block;
}

/* Scenario Features */
.scenario-features {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-text-light);
}

.feature-item i {
    color: var(--color-accent);
    font-size: 1rem;
}

/* ================================================= */
/* SCENARIO 2: macOS DEVICE                         */
/* ================================================= */

.macos-device .scenario-title {
    color: var(--color-accent-dark); /* Slightly different blue for variety */
}

/* Instructions */
.scenario-instructions {
    text-align: left;
    margin-bottom: 2.5rem;
}

.instruction-step {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border-left: 3px solid var(--color-accent);
}

.step-number {
    width: 32px;
    height: 32px;
    background: var(--color-accent);
    color: var(--color-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--color-text);
}

.step-content p {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

/* QR Section for macOS */
.macos-device .qr-section {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
}

/* Secondary CTA for macOS */
.macos-device .secondary-cta {
    margin-top: 2rem;
}

.app-store-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(0, 255, 255, 0.1);
    color: var(--color-accent);
    padding: 1rem 2rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid rgba(0, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.app-store-link:hover {
    background: rgba(0, 255, 255, 0.15);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.app-store-link i {
    font-size: 1.2rem;
}

.link-note {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: 0.5rem;
    opacity: 0.7;
}

/* ================================================= */
/* SCENARIO 3: DESKTOP/OTHER DEVICE                 */
/* ================================================= */

/* QR Container for Desktop */
.desktop-device .qr-container {
    max-width: 220px;
    margin: 0 auto 1.5rem;
}
.qr-container {
    background: linear-gradient(135deg, #008B8B, #000000);
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.qr-container img {
    border-radius: 12px; /* QR image corners */
    display: block;
    width: 200px;
    height: 200px;
}

.scan-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.95rem;
    color: white;
}

.scan-hint i {
    color: white;
}

/* Desktop CTA */
.desktop-device .secondary-cta {
    margin: 2rem 0;
}

/* ================================================= */
/* DEVICE DETECTION NOTE                            */
/* ================================================= */

.detection-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-text-light);
    opacity: 0.8;
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.detection-note i {
    color: var(--color-accent);
    font-size: 0.9rem;
}

/* ================================================= */
/* RESPONSIVE DESIGN                                */
/* ================================================= */

@media (max-width: 992px) {
    .ios-download-section {
        padding: 5rem 0;
    }
    
    .ios-title {
        font-size: 2.4rem;
    }
    
    .download-scenario {
        padding: 2rem;
    }
    
    .scenario-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 768px) {
    .ios-download-section {
        padding: 4rem 0;
    }
    
    .ios-title {
        font-size: 2rem;
    }
    
    .ios-subtitle {
        font-size: 1.05rem;
        padding: 0 1rem;
    }
    
    .download-scenario {
        padding: 1.8rem 1.5rem;
        border-radius: 16px;
    }
    
    .instruction-step {
        flex-direction: column;
        gap: 1rem;
        padding: 1.2rem;
    }
    
    .scenario-features {
        gap: 1.5rem;
    }
    
    .feature-item {
        font-size: 0.9rem;
    }
    
}

@media (max-width: 480px) {
    .ios-download-section {
        padding: 3rem 0;
    }
    
    .ios-title {
        font-size: 1.8rem;
    }
    
    .ios-subtitle {
        font-size: 1rem;
    }
    
    .download-scenario {
        padding: 1.5rem 1.2rem;
        border-radius: 14px;
    }
    
    .scenario-title {
        font-size: 1.4rem;
    }
    
    .scenario-description {
        font-size: 1rem;
    }
    
    .app-store-badge {
        max-width: 180px;
    }
    
    .app-store-link {
        padding: 0.9rem 1.5rem;
        font-size: 0.95rem;
    }
    
    
    .feature-item {
        font-size: 0.85rem;
    }
    
    .detection-note {
        font-size: 0.9rem;
        padding: 0.8rem;
        flex-direction: column;
        text-align: center;
        gap: 0.3rem;
    }
}

/* ================================================= */
/* FOOTER */
/* ================================================= */
.site-footer {
    background: var(--color-darker);
    padding: 4rem 0 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.platform-note {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.platform-note p {
    font-size: 1rem;
    color: var(--color-text-light);
}

.android-coming {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    margin-bottom: 3rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text);
}

.footer-tagline {
    color: var(--color-text-light);
    font-size: 0.95rem;
}

.footer-description {
    color: var(--color-text-light);
    font-size: 0.9rem;
    opacity: 0.8;
}

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

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

.footer-column h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.footer-column a {
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    color: var(--color-text-light);
    font-size: 0.85rem;
    opacity: 0.7;
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    color: var(--color-text-light);
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: var(--color-accent);
}

/* ================================================= */
/* FOOTER COPYRIGHT */
/* ================================================= */
.footer-copyright {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: var(--color-text-lighter);
    font-size: 0.9rem;
}

.footer-copyright p {
    margin: 0.5rem 0;
    line-height: 1.5;
}

.copyright-notice {
    font-size: 0.8rem;
    opacity: 0.7;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .footer-copyright {
        margin-top: 1.5rem;
        padding-top: 1rem;
    }
    
    .copyright-notice {
        font-size: 0.75rem;
        padding: 0 1rem;
    }
}

/* ================================================= */
/* RESPONSIVE DESIGN */
/* ================================================= */
@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 8rem;
    }
    
    .hero-content {
        padding-right: 0;
        text-align: center;
        max-width: 55%;
    }
    
    .hero-subhead {
        max-width: 100%;
    }
    
    .hero-cta {
        align-items: center;
    }
    
    .hero-headline {
        font-size: 2.8rem;
    }
    .hero-frame {
        width: 100%;
        max-width: 400px;
    }
    .download-options {
        gap: 2rem;
    }
    
    .ios-features {
        gap: 2rem;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .hero-headline {
        font-size: 2.2rem;
    }
    
    .hero-subhead {
        font-size: 1.1rem;
    }
    
    .brand-title {
        font-size: 1.8rem;
    }
    
    .ios-title {
        font-size: 2rem;
    }
    
    .download-options {
        flex-direction: column;
        gap: 2.5rem;
    }
    
    .site-header {
        padding: 1rem 0;
    }
     .hero-frame {
        width: 90%;   /* occupy almost full width */
        max-width: none; /* optional: remove px limit for small screens */
    }
    
    .footer-links {
       grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-headline {
        font-size: 1.8rem;
    }
    
    .container {
        padding: 0 1.5rem;
    }
    .hero-frame {
        width: 90%;   /* almost edge to edge */
        max-width: none;
    }
    
    .ios-title {
        font-size: 1.8rem;
    }
    
    .ios-features {
        flex-direction: column;
        gap: 1.5rem;
    }
      .footer-links {
       grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .brand-title {
        font-size: 1.6rem;
    }
}

/* ================================================= */
/* CRITICAL PERFORMANCE OPTIMIZATIONS */
/* ================================================= */
.site-header,
.hero-section,
.app-mockup,
.qr-container {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

@media (hover: hover) {
    .btn-primary:hover,
    .app-store-badge:hover {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
}

.hero-content,
.hero-preview,
.download-option {
    contain: content;
}

/* ================================================= */
/* NAVI BACK HOME - WITH ANIMATIONS */
/* ================================================= */

.nav-back {
    position: fixed;
    /* KEY: Use viewport-relative positioning */
    top: 0; /* Viewport top */
    left: 0; /* Viewport left */
    margin: 1.5rem; /* Offset from viewport edges */
    z-index: 1002;
    
    /* Rest of your existing styles */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateX(-100%); /* Start off-screen left */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

/* When visible */
.nav-back.visible {
    opacity: 1;
    transform: translateX(0); /* Just show, don't change position */
}

/* iOS specific: account for safe areas */
@supports (padding: max(0px)) {
    .nav-back {
        margin: max(1.5rem, env(safe-area-inset-top))
                max(1.5rem, env(safe-area-inset-left))
                max(1.5rem, env(safe-area-inset-bottom))
                max(1.5rem, env(safe-area-inset-right));
    }
}

/* ===== PHASE 1: BEFORE TEXT FADE ===== */
/* Hover before text fade: arrow + text change to accent color */
.nav-back:not(.text-hidden):hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ===== PHASE 2: AFTER TEXT FADE ===== */
/* Text fade-out + container shrink to circle */
.nav-back.text-hidden {
    padding: 0.7rem; /* Equal padding for circle */
    border-radius: 50%; /* Perfect circle */
    width: 44px; /* Fixed circle size */
    height: 44px;
    gap: 0;
}

/* Text fade animation (permanent) */
.nav-back.text-hidden .back-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transform: translateX(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease, width 0.5s ease;
}

/* Keep icon centered in circle */
.nav-back.text-hidden .back-icon {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover after text fade: circle fills with accent, arrow stays white */
.nav-back.text-hidden:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
   
}

.nav-back.text-hidden:hover .back-icon {
    color: white;
}

/* ===== PULSE ANIMATION ===== */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(var(--color-accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
}

.nav-back.pulse {
    animation: pulse-glow 1.5s ease;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .nav-back {
        top: 1rem;
        left: -120px;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        min-width: 40px;
        min-height: 40px;
    }
    
    .nav-back.visible {
        left: 1rem;
    }
    
    .nav-back.text-hidden {
        width: 40px;
        height: 40px;
        padding: 0.6rem;
    }
    
    /* Disable hover effects on touch devices */
    @media (hover: none) {
        .nav-back:hover,
        .nav-back.text-hidden:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.15);
            color: var(--color-text-light);
        }
        
        .nav-back.text-hidden:hover .back-icon {
            color: var(--color-text-light);
        }
    }
    
    /* Smaller on very small phones */
    @media (max-width: 480px) {
        .nav-back {
            min-width: 36px;
            min-height: 36px;
        }
        
        .nav-back.text-hidden {
            width: 36px;
            height: 36px;
            padding: 0.5rem;
        }
        
        .nav-back .back-icon {
            font-size: 0.9rem;
        }
    }
}

/* Hide on homepage */
.index-page .nav-back {
    display: none;
}

/* ================================================= */
/* ABOUT PAGE STYLES */
/* ================================================= */

.about-page {
    padding: 4rem 0;
    background: var(--color-darker);
    padding-top: 120px;
}

/* Hero Section */
.about-hero {
    margin-top: 0;
    padding-top: 2rem;
    text-align: center;
    margin-bottom: 4rem;
}

.about-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, var(--color-accent), #2D9CDB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-hero .subtitle {
    font-size: 1.2rem;
    color: var(--color-text-light);
    opacity: 0.9;
}

/* Mission & Story Sections */
.about-mission,
.about-story {
    max-width: 800px;
    margin: 0 auto 4rem;
    text-align: center;
}

/* ONLY these three headers get gradient */
.about-mission h2,        /* Our Mission */
.about-story h2,          /* Our Story */
.about-different h2,    /* What Makes iDrive Different */
.about-values h2 {            /* Our Values */
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(160deg, #008B8B, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

/* Keep these headers plain */

.about-mission p,
.about-story p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-light);
}

/* Differentiators Grid */
.about-different {
    margin-bottom: 4rem;
}

.different-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.different-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.different-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
}

.different-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--color-text); /* Plain color */
}

/* Values Grid */
.about-values {
    margin-bottom: 4rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.value-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.value-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--color-accent); /* Plain accent color */
}


/* Responsive */
@media (max-width: 768px) {
    .about-hero h1 {
        font-size: 2.2rem;
    }
    
    .different-grid,
    .values-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
     .site-header {
        padding-top: 50px; /* Less space on mobile */
    }
    
    .about-page {
        padding-top: 100px;
    }
}

@media (max-width: 480px) {
     .site-header {
        padding-top: 45px;
    }
    .about-hero h1 {
        font-size: 1.8rem;
    }
    
    .about-page {
        padding: 2rem 0;
        padding-top: 90px;
    }
    .nav-back {
        margin: 1rem;
    }
}

/* ================================================= */
/* GLOBAL DOWNLOAD CTA SECTION - REUSABLE - UPDATED */
/* ================================================= */
.download-cta {
    text-align: center;
    width: 100%;                       /* fills parent content column */
    padding: 3rem 0;                    /* only top/bottom padding */
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.05), rgba(var(--color-darker), 0.2));
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    margin: 3rem 0;                     /* spacing for top/bottom separation */
    box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.15);
    transition: all 0.3s ease;
    box-sizing: border-box;             /* ensure padding doesn’t break width */
}

.download-cta-inner {
    width: 100%;                        /* fills parent container */
    padding: 0 6%;                      /* horizontal padding same as container */
    box-sizing: border-box;
}

.download-cta:hover {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.08), rgba(var(--color-darker), 0.3));
    box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), 0.25);
}

.download-cta h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--color-text);
    line-height: 1.3;
    font-weight: 700;
}

.download-cta p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* CTA Button */
.download-cta a.btn,
.download-cta a.btn-primary,
.download-cta a.btn-secondary {
    display: inline-block;
    padding: 0.8rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-darker);
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.download-cta a.btn:hover {
    background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.3);
}

/* ================================================= */
/* Responsive - Tablet (max-width: 768px)          */
/* ================================================= */
@media (max-width: 768px) {
    .download-cta {
        padding: 2rem 0;
        margin: 3rem 0;
    }

    .download-cta-inner {
        padding: 0 4%;  /* horizontal padding scaled down */
    }

    .download-cta h2 {
        font-size: 1.8rem;
    }

    .download-cta p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .download-cta a.btn {
        padding: 0.75rem 1.8rem;
        font-size: 0.95rem;
    }
}

/* ================================================= */
/* Responsive - Mobile (max-width: 480px)          */
/* ================================================= */
@media (max-width: 480px) {
    .download-cta {
        padding: 1.5rem 0;
        margin: 2rem 0;
    }

    .download-cta-inner {
        padding: 0 4%;  /* match mobile container */
    }

    .download-cta h2 {
        font-size: 1.4rem;
    }

    .download-cta p {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .download-cta a.btn {
        display: block;
        width: 100%;
        padding: 0.8rem 0;
        font-size: 1rem;
    }
}
/* ================================================= */
/* CONTACT PAGE STYLES */
/* ================================================= */

.contact-page-content {
    padding: 4rem 0;
    background: var(--color-darker);
}

/* Hero Section */
.contact-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    background: linear-gradient(160deg, #008B8B, #ffffff, #00ffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

.contact-hero .subtitle {
    font-size: 1.2rem;
    color: var(--color-text-light);
    opacity: 0.9;
}

/* Contact Grid Layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

/* Form Container */
.contact-form-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem;
    backdrop-filter: blur(10px);
}

/* Form Elements */
.form-group {
    margin-bottom: 1.8rem;
}

/* File Upload Styles */
.file-upload-container {
    margin-top: 0.5rem;
}

.file-input-wrapper {
    position: relative;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.03);
}

.file-input-wrapper:hover {
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.05);
}

.file-input-wrapper.drag-over {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.1);
}

.file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    z-index: 1;
}

.file-upload-label i {
    font-size: 2rem;
    color: var(--color-accent);
}

.upload-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.upload-hint {
    font-size: 0.85rem;
    color: var(--color-text-light);
    opacity: 0.8;
}

/* File List */
.file-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1;
}

.file-icon {
    color: var(--color-accent);
}

.file-name {
    color: #ffffff !important; /* Brighter file name */
    font-weight: 500;
}

.file-size {
    color: var(--color-text-light);
    font-size: 0.85rem;
    opacity: 0.8;
}

.file-remove {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.file-remove:hover {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.file-remove i {
    font-size: 0.9rem;
}

/* File type indicators */
.file-item.image .file-icon {
    color: #4ecdc4;
}

.file-item.other .file-icon {
    color: var(--color-text-light);
}

/* Submit Button Centering */
.submit-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.button-wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    max-width: 400px;
}

.button-wrapper .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto;
    min-width: 220px;
    padding: 1rem 2rem;
}

.button-wrapper .form-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-light);
    opacity: 0.8;
    max-width: 300px;
}
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
}

.form-label i {
    margin-right: 0.5rem;
    color: var(--color-accent);
}

.form-required {
    color: #ff6b6b;
    margin-left: 0.25rem;
}

.form-note {
    font-size: 0.85rem;
    color: var(--color-text-light);
    opacity: 0.8;
    margin-top: 0.25rem;
}

.form-hint {
    font-size: 0.85rem;
    color: var(--color-text-light);
    opacity: 0.7;
    margin-top: 0.25rem;
    font-style: italic;
}

/* Input Fields */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.9rem 1.2rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: var(--color-text);
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 150px;
    font-family: inherit;
}

/* Tech-specific fields */
.tech-specific {
    background: rgba(var(--color-accent-rgb), 0.05);
    border-left: 3px solid var(--color-accent);
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1rem;
}

/* Info Cards */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.8rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
}

.info-icon {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.info-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: var(--color-text);
}

.info-card p,
.info-card li {
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

.info-list {
    list-style: none;
    padding-left: 0;
}

.info-list li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.info-list li:before {
    content: "•";
    color: var(--color-accent);
    position: absolute;
    left: 0;
}
/* FAQ Link Color Fix */
.info-card a,
.faq-link a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.info-card a:hover,
.faq-link a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Specific FAQ link in list */
.info-list li a {
    color: var(--color-accent);
    text-decoration: none;
}

.info-list li a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Privacy Note */
.privacy-note {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-color: rgba(var(--color-accent-rgb), 0.2);
}

/* FAQ Link */
.faq-link {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-link p {
    color: var(--color-text-light);
    font-size: 1rem;
}

.faq-link a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}

.faq-link a:hover {
    text-decoration: underline;
}

/* Form Status Messages */
.form-status {
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.form-status.success {
    background: rgba(0, 128, 128, 0.15); /* pale cyan background */
    border: 1px solid rgba(0, 128, 128, 0.3); /* cyan border */
    color: #008B8B; /* dark cyan text */
}
.form-status.error {
    background: rgba(255, 193, 7, 0.15); /* pale yellow background */
    border: 1px solid rgba(255, 193, 7, 0.3); /* yellow border */
    color: orange; /* bright orange text */
}

/* Responsive Design */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-hero h1 {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .contact-hero h1 {
        font-size: 2rem;
    }
    
    .contact-form-container {
        padding: 1.8rem;
    }
    
    .info-card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .contact-page-content {
        padding: 2rem 0;
    }
    
    .contact-hero h1 {
        font-size: 1.8rem;
    }
    
    .contact-hero .subtitle {
        font-size: 1rem;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }
}

//* ================================================= */
/* ATO PAGE POLISHED CSS - UPDATED                 */
/* ================================================= */

/* ATO page specific anchors */
.ato-page :target {
    scroll-margin-top: 140px;
}
.ato-page {
    padding-top: 120px;       /* Push below header */
    padding-bottom: 2rem;     /* Bottom spacing */
    background: var(--color-darker);
    min-height: 100vh;
}

/* ================================================= */
/* HERO SECTION */
/* ================================================= */
.ato-hero {
    background: linear-gradient(135deg, var(--color-darker), var(--color-dark));
    color: var(--color-text);
    padding: 2.5rem 2rem;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    text-align: center;
    border: 1px solid rgba(var(--color-accent-rgb), 0.1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
    
}

.ato-hero h1 {
    margin-top: 0;
    font-size: 2.5rem;
    line-height: 1.2;
    background: linear-gradient(160deg, var(--color-accent), #ffffff, var(--color-accent-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ato-hero .article-meta {
    font-size: 0.95rem;
    opacity: 0.8;
    margin-top: 1rem;
    color: var(--color-text-lighter);
}

/* ================================================= */
/* CONTENT CARDS */
/* ================================================= */
.ato-content-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem 2rem; /* remove horizontal padding */
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    width: 100%;
    box-sizing: border-box;
}
.ato-content-card h2 {
    color: var(--color-text);
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.3rem; /* reduce space for thinner line */
    border-bottom: 2px solid; /* thinner line */
    border-image: linear-gradient(to right, var(--color-accent-dark), var(--color-dark)) 1;
}

.ato-content-card p {
    margin-bottom: 1rem;
    line-height: 1.5;
    font-size: 1rem;
}

/* Rules Grid - Option 1 */
.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.rule-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rule-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

.rule-icon {
    position: relative;
    width: 4rem;
    height: 4rem;
    background: rgba(var(--color-accent-rgb), 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border: 2px solid rgba(var(--color-accent-rgb), 0.3);
}

.rule-icon i {
    font-size: 1.5rem;
    color: var(--color-accent);
    z-index: 2;
}

.rule-number {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--color-accent);
    color: var(--color-darker);
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.rule-content h3 {
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
}

.rule-content p {
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.6;
}

.rules-note {
    margin-top: 2rem;
    padding: 1.2rem;
    background: rgba(var(--color-accent-rgb), 0.05);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.rules-note p {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: var(--color-text-light);
}

.rules-note i {
    color: var(--color-accent);
    font-size: 1.2rem;
    margin-top: 0.2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .rules-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    
    .rule-card {
        padding: 1.2rem;
    }
}

/* ================================================= */
/* TABLES */
/* ================================================= */
.ato-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ato-comparison-table th {
    background: rgba(0, 139, 139, 0.3);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem;
    border-bottom: 2px solid rgba(0, 255, 255, 0.5);
}

.ato-comparison-table td {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
    color: var(--color-text-light);
}

.ato-comparison-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

.ato-rule-table {
    width: 100%;
    margin: 1.5rem 0;
}

.ato-rule-table td {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
}

.ato-rule-title {
    font-weight: bold;
    color: var(--color-text);
    width: 35%;
}

/* ================================================= */
/* STEP LIST */
/* ================================================= */
.ato-step-list {
    counter-reset: step-counter;
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.ato-step-list li {
    counter-increment: step-counter;
    margin-bottom: 1.5rem;
    padding-left: 4rem;
    position: relative;
    color: var(--color-text-light);
}

.ato-step-list li::before {
    content: counter(step-counter);
    background: var(--color-accent);
    color: var(--color-darker);
    font-weight: bold;
    border-radius: 50%;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.9rem;
}

/* ================================================= */
/* FAQ */
/* ================================================= */
.ato-faq-item {
    border-left: 4px solid var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.05);
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: var(--radius-sm);
}

.ato-faq-q {
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}
/* ================================================= */
/* CLAIM METHODS SECTION - CARD LAYOUT */
/* ================================================= */
.claim-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.method-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.method-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.method-card-featured {
    border: 2px solid var(--color-accent);
    box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.2);
}

.featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-accent);
    color: var(--color-darker);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 2;
}

.method-card-header {
    padding: 1.5rem;
    color: white;
    position: relative;
}

.method-card-header.cents-per-km {
    background: linear-gradient(135deg, #4a5568, #2d3748);
}

.method-card-header.logbook-method {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.2), rgba(var(--color-accent-rgb), 0.3));
    border: 1px solid rgba(var(--color-accent-rgb), 0.4);
}

.method-card-header h3 {
    margin: 0;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.method-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.method-card-body {
    padding: 1.5rem;
}

.method-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.stat-item i {
    font-size: 1.5rem;
    color: var(--color-accent);
    width: 2rem;
    text-align: center;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-weight: bold;
    color: var(--color-text);
    font-size: 1.1rem;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--color-text-lighter);
    opacity: 0.8;
}

.method-details h4 {
    color: var(--color-text);
    margin: 1rem 0 0.5rem 0;
    font-size: 1.1rem;
}

.method-details p {
    margin-bottom: 0.8rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

.method-benefits {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.method-benefits li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-light);
}

.method-benefits li i {
    color: var(--color-accent-dark);
    font-size: 0.9rem;
}

.method-chooser {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(var(--color-accent-rgb), 0.05);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.method-chooser h3 {
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 0.8rem;
}

.method-chooser p {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* ================================================= */
/* PROCESS TIMELINE - OPTION 3 (CLEAN VERSION) */
/* ================================================= */
.process-timeline {
    position: relative;
    padding: 1.5rem 0;
}

.process-timeline::before {
    content: '';
    position: absolute;
    left: 1.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        var(--color-accent) 10%, 
        var(--color-accent) 90%, 
        transparent 100%);
    opacity: 0.5;
}

.process-step {
    display: flex;
    margin-bottom: 2rem;
    position: relative;
    align-items: flex-start;
}

.process-step:last-child {
    margin-bottom: 0;
}

.step-number {
    position: relative;
    z-index: 2;
    margin-right: 1.5rem;
    flex-shrink: 0;
    /* Ensure no extra dimensions */
    width: 3rem;
    height: 3rem;
}
.step-number span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: #008b8b 100%;
    color: var(--color-darker);
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: bold;
    /* Fix the shadow to prevent distortion */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Add a border to make it stand out without distorting shape */
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* For a stronger glow effect that won't distort, use inset shadow */
.step-number span.glow-effect {
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 0 15px rgba(var(--color-accent-rgb), 0.3);
}

/* OR use a cleaner approach with just a subtle shadow */
.step-number span.clean-circle {
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.4);
}
.step-content {
    flex: 1;
    padding-top: 0.5rem;
}

.step-content h3 {
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
}

.step-content h3 i {
    margin-right: 0.75rem;
    color: var(--color-accent);
    font-size: 1.1rem;
    width: 1.5rem;
    text-align: center;
}

.step-content p {
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.6;
    padding-left: 2.25rem; /* Align with text (icon width + margin) */
}

.process-note {
    margin-top: 2rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    border-left: 4px solid #008b8b;
}

.process-note p {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: var(--color-text-light);
}

.process-note i {
    color: #008b8b;
    font-size: 1.2rem;
    margin-top: 0.2rem;
}
/* ================================================= */
/* RESPONSIVE DESIGN FOR NEW COMPONENTS */
/* ================================================= */
@media (max-width: 768px) {
    .claim-methods-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    
    .method-stats {
        grid-template-columns: 1fr;
    }
    
    .process-timeline::before {
        left: 1.5rem;
    }
    
    .step-number {
        margin-right: 1.2rem;
        width: 3rem;
        height: 3rem;
    }
    
    .step-number span {
        width: 100%;
        height: 100%;
        font-size: 1.1rem;
    }
    
    .step-content h3 {
        font-size: 1.2rem;
    }
    
    .step-content h3 i {
        font-size: 1rem;
        margin-right: 0.6rem;
        width: 1.3rem;
    }
    
    .step-content p {
        padding-left: 1.9rem;
    }
}

@media (max-width: 480px) {
    .method-card-header {
        padding: 1.2rem;
    }
    
    .method-card-header h3 {
        font-size: 1.3rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .method-badge {
        align-self: flex-start;
    }
    
    .process-timeline::before {
        left: 1.25rem;
    }
    
    .step-number {
        margin-right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .step-number span {
        width: 100%;
        height: 100%;
        font-size: 1rem;
    }
    
    .step-content h3 {
        font-size: 1.1rem;
        flex-wrap: wrap;
    }
    
    .step-content h3 i {
        font-size: 0.9rem;
        margin-right: 0.5rem;
        width: 1.1rem;
    }
    
    .step-content p {
        font-size: 0.9rem;
        padding-left: 1.6rem;
    }
    
    .featured-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
    
    .process-note {
        padding: 1rem;
    }
    
    .process-note p {
        font-size: 0.9rem;
    }
}
/* ================================================= */
/* TIPS PAGE STYLES - MATCHING ATO PAGE COLORS      */
/* ================================================= */

.tips-page {
    padding-top: 120px;       /* Clear the fixed header */
    padding-bottom: 2rem;
    background: var(--color-darker);
    min-height: 100vh;
}
/* ================================================= */
/* 1. Container & Typography                         */
/* ================================================= */
.tips-article-container {
    font-family: var(--font-family);
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0 auto;
    padding: 20px;
    padding-top: 120px;
}

/* ================================================= */
/* 2. Hero Section                                   */
/* ================================================= */
.tips-hero {
    background: linear-gradient(135deg, var(--color-darker), var(--color-dark)); /* same gradient */
    color: var(--color-text);
    padding: 2.5rem 2rem;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    text-align: center;
    border: 1px solid rgba(var(--color-accent-rgb), 0.1);
    position: relative;
    overflow: hidden;

    /* Added glow / frosted effect */
    backdrop-filter: blur(10px); /* soft frosted look */
    box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.3); /* cyan glow around container */
}

.tips-hero h1 {
    margin-top: 0;
    font-size: 2.5rem;
    line-height: 1.2;
    background: linear-gradient(160deg, #008B8B, #ffffff, #00FFFF); /* text gradient like ATO page */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tips-hero .article-meta {
    font-size: 0.95rem;
    opacity: 0.8;
    margin-top: 1rem;
    color: var(--color-text-lighter);
}

/* ================================================= */
/* 3. Content Cards                                  */
/* ================================================= */
.tips-content-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem 2rem; /* reduce top/bottom padding */
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.tip-item {
    margin-top: 1.2rem; /* reduce space between tip items */
    padding-top: 0;     /* remove extra padding */
    padding-bottom: 0;
}
.tip-item h3 {
    margin-bottom: 0.5rem; /* slightly smaller spacing under title */
    font-size: 1.2rem;
}
.tip-item p {
    margin-bottom: 0.8rem; /* reduce spacing after paragraph */
}

/* ================================================= */
/* 4. Tip Items                                      */
/* ================================================= */
.tip-item {
    margin-bottom: 1.5rem;
    padding: 1rem 0;
    border-left: 4px solid var(--color-accent);
    padding-left: 1.5rem;
    background: rgba(var(--color-accent-rgb), 0.05);
    border-radius: var(--radius-sm);
}

.tip-item h3 i {
    color: var(--color-accent);
    margin-right: 0.5rem;
}

/* ================================================= */
/* 5. Lists and Ordered Steps                        */
/* ================================================= */
.tip-item ol,
.tip-item ul {
    margin-left: 1.5rem;
}

.tip-item li {
    margin-bottom: 0.8rem;
}

/* ================================================= */
/* 6. CTA Box                                        */
/* ================================================= */
.tips-cta-box {
    background: linear-gradient(to right, rgba(var(--color-accent-rgb), 0.1), rgba(var(--color-primary-rgb), 0.1), rgba(0, 212, 255, 0.08)); /* subtle three-color gradient */
    border-left: 5px solid var(--color-accent);
    padding: 2rem;
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
    text-align: center;
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
}

.tips-cta-box h3 {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.tips-cta-box p {
    color: var(--color-text-light);
    font-size: 1.05rem;
}

/* ================================================= */
/* 7. Responsive Design                               */
/* ================================================= */
@media (max-width: 768px) {
    .tips-article-container {
        padding: 15px;
        padding-top: 100px;
    }

    .tips-hero {
        padding: 1.8rem 1.2rem;
    }

    .tips-hero h1 {
        font-size: 2rem;
    }

    .tips-content-card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .tips-article-container {
        padding-top: 90px;
    }

    .tips-hero h1 {
        font-size: 1.8rem;
    }

    .tips-article-container h2 {
        font-size: 1.6rem;
    }

    .tips-cta-box {
        padding: 1.5rem 1rem;
    }
}

/* ================================================= */
/* LEGAL PAGE STYLES - iDrive Consistent Design    */
/* ================================================= */

.legal-page {
    background: var(--color-dark);
    color: var(--color-text-light);
    padding: 4rem 0;
    line-height: 1.6;
    font-family: var(--font-family);
}

.legal-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 6%;
}

/* Header Container - Glowing similar to ATO hero */
.legal-header {
    background: linear-gradient(135deg, var(--color-darker), var(--color-dark));
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-accent-rgb), 0.1);
    padding: 2.5rem 2rem;
    margin: 6rem 0 var(--space-lg) 0; /* ↑ increase top margin to push it below logo */
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px); /* frosted/glow effect */
    box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.3);
}

.legal-header h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    background: linear-gradient(160deg, #008B8B, #ffffff, #00FFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.legal-header .effective-date {
    font-size: 1rem;
    color: var(--color-text-lighter);
    margin-bottom: 1rem;
}

.legal-header .legal-intro {
    font-size: 1.1rem;
    color: var(--color-text-light);
    opacity: 0.9;
}
/* Legal page links: default orange, hover dark cyan */
.legal-document a {
    color: #FFA500; /* orange */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.legal-document a:hover {
    color: #008B8B; /* dark cyan */
    text-decoration: underline;
}

/* Legal Document Sections */
.legal-content {
    margin-top: 2rem;
}

.legal-section-card {
    background: linear-gradient(45deg, var(--color-darker) 0%, #002c2c 50%, rgba(var(--color-accent-rgb), 0.1) 100%);
    border-radius: var(--radius-md);
    padding: 2rem 3rem;   /* 2rem top/bottom, 3rem left/right */
    margin-top: 2rem;
    margin-bottom: 4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-section {
    margin-bottom: var(--space-lg);
}

.legal-section a {
    color: orange;           /* bright orange for readability */
    text-decoration: underline; /* optional: keep underline or remove with none */
    transition: color 0.3s ease; /* smooth hover effect */
}

.legal-section a:hover {
    color: #008b8b; /* subtle cyan hover for consistency */
}

.legal-section h2 {
    color: var(--color-text);
    border-bottom: 2px solid rgba(0, 139, 139, 0.25); /* dark cyan with low opacity */
    padding-bottom: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-size: 1.9rem;
}

.legal-section p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

.legal-section ul.legal-list {
    margin-top: 1rem;
    margin-left: 1.5rem;
    list-style: disc;
}

.legal-section ul.legal-list li {
    margin-bottom: 0.8rem;
    color: var(--color-text-light);
}

/* Contact Section */
.legal-contact {
    margin-top: var(--space-lg);
    background: rgba(var(--color-accent-rgb), 0.05);
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    padding: 2rem;
}

.legal-contact h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.legal-contact p {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

/* ================================================= */
/* Responsive - Tablet */
@media (max-width: 768px) {
    .legal-header {
        padding: 1.8rem 1.5rem;
    }

    .legal-header h1 {
        font-size: 2rem;
    }

    .legal-header .legal-intro {
        font-size: 1rem;
    }

    .legal-section-card {
        padding: 1.8rem 2rem;
        margin-top: 1.5rem;
        margin-bottom: 3rem;
    }

    .legal-section h2 {
        font-size: 1.8rem;
        margin-top: 0.4rem;
        margin-bottom: 0.4rem;
    }

    .legal-section p,
    .legal-section ul.legal-list li {
        font-size: 1rem;
        margin-bottom: 0.35rem;
    }

    .legal-contact {
        padding: 1.5rem 2rem;
    }

    .legal-contact h3 {
        font-size: 1.6rem;
    }
}

/* ================================================= */
/* Responsive - Mobile */
@media (max-width: 480px) {
    .legal-header {
        padding: 1.5rem 1rem;
    }

    .legal-header h1 {
        font-size: 1.6rem;
    }

    .legal-header .legal-intro {
        font-size: 0.95rem;
    }

    .legal-section-card {
        padding: 1.5rem 1.5rem;
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .legal-section h2 {
        font-size: 1.5rem;
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .legal-section p,
    .legal-section ul.legal-list li {
        font-size: 0.93rem;
        margin-bottom: 0.25rem;
    }

    .legal-contact {
        padding: 1rem 1.5rem;
    }

    .legal-contact h3 {
        font-size: 1.4rem;
    }
}