/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* HushThem color theme - Muted Forest Theme */
    --primary-color: #4CAF50;
    --primary-dark: #1976D2;
    --secondary-color: #C8E6C9;
    --accent-color: #FF5722;
    --background-light: #FAFAFA;
    --surface-light: #FFFFFF;
    --background-dark: #1E1E1E;
    --surface-dark: #2A2A2A;
    --text-primary: #424242;
    --text-secondary: #757575;
    --text-light: #E0E0E0;
    --error-color: #FF5722;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Base typography */
body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--background-light);
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Header and Navigation - Mobile First */
.header {
    background-color: var(--surface-light);
    box-shadow: var(--shadow-sm);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    max-width: 1200px;
    margin: 0 auto;
}

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

.logo-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.logo {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    z-index: 1001;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--text-primary);
    margin: 2px 0;
    transition: var(--transition-fast);
}

.nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--surface-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    list-style: none;
    transition: var(--transition-base);
    z-index: 1000;
}

.nav-menu.active {
    left: 0;
}

.nav-link {
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-size-lg);
    padding: var(--spacing-md);
    transition: var(--transition-fast);
}

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

/* Main content offset for fixed header */
main {
    margin-top: 70px;
}

/* Hero Section - Mobile First */
.hero {
    padding: var(--spacing-xl) 0;
    background: linear-gradient(135deg, var(--background-light) 0%, var(--secondary-color) 100%);
}

.hero-content {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.hero-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: center;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-fast);
    border: none;
    cursor: pointer;
    min-width: 140px;
}

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

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

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

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

/* Phone mockup */
.hero-image {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

.phone-mockup {
    width: 280px;
    height: 580px;
    background-color: #000;
    border-radius: 30px;
    padding: 8px;
    box-shadow: var(--shadow-lg);
}

.phone-screen {
    width: 100%;
    height: 100%;
    background-color: var(--surface-light);
    border-radius: 22px;
    overflow: hidden;
}

.app-preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--background-light);
}

.app-header {
    background-color: var(--primary-color);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 14px;
}

.app-time {
    font-size: 12px;
    opacity: 0.9;
}

.app-title {
    font-weight: 600;
    font-size: 16px;
}

.app-icons {
    font-size: 16px;
}

.app-content {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    background: white;
}

/* Protection card */
.protection-card,
.mode-card {
    background: var(--secondary-color);
    border-radius: 8px;
    padding: 12px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-weight: 500;
}

.card-status {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
}

/* Toggle switch */
.toggle-switch {
    width: 36px;
    height: 20px;
    background: #ccc;
    border-radius: 20px;
    position: relative;
    transition: var(--transition-fast);
}

.toggle-switch.active {
    background: var(--primary-color);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: var(--transition-fast);
}

.toggle-switch.active::after {
    left: 18px;
}

/* Mode buttons */
.mode-buttons {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.mode-btn {
    flex: 1;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--text-primary);
    font-size: 11px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.mode-btn.active {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 500;
}

.mode-note {
    font-size: 10px;
    color: #666;
    margin-top: 6px;
    line-height: 1.3;
}

/* Whitelist section */
.whitelist-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.whitelist-section h3 {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.empty-whitelist {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 0;
}

.add-contact-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.empty-whitelist p {
    font-size: 12px;
    color: var(--text-primary);
    margin: 2px 0;
}

.text-muted {
    color: var(--text-secondary) !important;
    font-size: 11px !important;
}

.add-contact-btn {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

/* Features Section */
.features {
    padding: var(--spacing-xxl) 0;
    background-color: var(--primary-color);
}

.section-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xl);
}

.features .section-title {
    color: white;
}

.features-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

.feature-card {
    background-color: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-md);
}

.feature-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.feature-description {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Stats Section */
.stats {
    padding: var(--spacing-xxl) 0;
    background-color: var(--primary-color);
    color: white;
}

.stats-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
    text-align: center;
}

.stat-item {
    padding: var(--spacing-lg);
}

.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: var(--font-size-lg);
    opacity: 0.9;
}

/* Download Section */
.download {
    padding: var(--spacing-xxl) 0;
    background-color: var(--background-light);
}

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

.download-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.download-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

/* The old .download-btn rules lived here. The element they styled was
   replaced by the Google Play badge (.gp-badge), so they styled nothing. */

.download-note {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Contact Section */
.contact {
    padding: var(--spacing-xxl) 0;
    background: linear-gradient(135deg, var(--background-light) 0%, var(--secondary-color) 100%);
}

.contact-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
    font-weight: 500;
    font-size: var(--font-size-base);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 2px solid var(--secondary-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    transition: var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

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

.contact-form .btn {
    width: 100%;
    padding: var(--spacing-md);
    font-size: var(--font-size-lg);
}

.form-status {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-size-base);
    display: none;
}

.form-status.success {
    display: block;
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.form-status.error {
    display: block;
    background-color: rgba(255, 87, 34, 0.1);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

/* Footer */
.footer {
    background-color: var(--surface-dark);
    color: var(--text-light);
    padding: var(--spacing-xxl) 0 var(--spacing-lg);
}

.footer-content {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: 1fr;
    margin-bottom: var(--spacing-xl);
}

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

.footer-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.footer-logo-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.footer-logo {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.footer-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.footer-links {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
    text-align: center;
}

.footer-section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: var(--spacing-sm);
}

.footer-list {
    list-style: none;
}

.footer-list li {
    margin-bottom: var(--spacing-xs);
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-fast);
}

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

.footer-bottom {
    border-top: 1px solid var(--text-secondary);
    padding-top: var(--spacing-lg);
    text-align: center;
}

.footer-copyright {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Responsive Design - Tablets and larger */
@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-lg);
    }

    .nav-toggle {
        display: none;
    }

    .nav-menu {
        position: static;
        width: auto;
        height: auto;
        background: none;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        left: 0;
    }

    .nav-link {
        font-size: var(--font-size-base);
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .hero-title {
        font-size: var(--font-size-4xl);
    }

    .hero-buttons {
        flex-direction: row;
        justify-content: center;
    }

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

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .footer-links {
        grid-template-columns: 1fr;
        text-align: right;
    }

    .footer-brand {
        text-align: left;
    }

    .footer-logo-wrapper {
        justify-content: flex-start;
    }

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

/* Desktop and larger screens */
@media (min-width: 1024px) {
    .hero {
        padding: var(--spacing-xxl) 0;
    }

    .hero .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xxl);
        align-items: center;
    }

    .hero-content {
        text-align: left;
        margin-bottom: 0;
    }

    .hero-buttons {
        justify-content: flex-start;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .phone-mockup {
        width: 320px;
        height: 640px;
    }
}

/* Large desktop */
@media (min-width: 1440px) {
    .container {
        padding: 0 var(--spacing-xl);
    }

    .hero-title {
        font-size: 3.5rem;
    }
}
/* ==========================================================================
   Google Play badge
   ==========================================================================
   Every download call to action on this site opens the Play listing. Nothing
   here serves an APK, so the buttons are built to look like what they are —
   a store badge, not a "download" button that could be mistaken for a direct
   file download from a third-party site.

   The mark below is drawn inline so it stays crisp and needs no extra
   request. If you would rather ship Google's official "Get it on Google Play"
   badge image, swap the <svg> and the two <span>s for a single <img> and drop
   the .gp-badge-* rules — the anchor and its href stay as they are.
   -------------------------------------------------------------------------- */

.gp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.35rem;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    line-height: 1;
}

.gp-badge:hover,
.gp-badge:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    color: #fff;
}

.gp-badge:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

.gp-badge-mark {
    width: 28px;
    height: 28px;
    flex: none;
}

.gp-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.gp-badge-small {
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.85;
}

.gp-badge-large {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* The download section's badge carries the page's main call to action. */
.gp-badge-lg {
    padding: 0.9rem 1.8rem;
    gap: 0.9rem;
}

.gp-badge-lg .gp-badge-mark {
    width: 34px;
    height: 34px;
}

.gp-badge-lg .gp-badge-large {
    font-size: 1.45rem;
}

/* Says plainly where the button goes, next to the button itself rather than
   somewhere further down the page. */
.gp-reassure {
    margin-top: 1rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    max-width: 34rem;
}

.download-note p {
    max-width: 40rem;
    margin: 0 auto;
}

.download-note-meta {
    margin-top: 0.6rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    .gp-badge,
    .gp-badge-lg {
        padding: 0.7rem 1.1rem;
    }

    .gp-badge-lg .gp-badge-large {
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gp-badge {
        transition: none;
    }

    .gp-badge:hover,
    .gp-badge:focus-visible {
        transform: none;
    }
}

/* ==========================================================================
   "Earn with us" — partner program call to action
   ==========================================================================
   Sits beside the Play badge in the hero. It is deliberately the only
   animated thing on the page: one moving element reads as emphasis, several
   read as noise. The sheen sweeps on a long cycle so it catches the eye on
   arrival without pulsing at anyone who stays to read.
   -------------------------------------------------------------------------- */

.earn-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    background: linear-gradient(120deg, #1B6B4A 0%, #4CAF50 55%, #3D9E68 100%);
    color: #fff;
    font-weight: 600;
    font-size: 1.02rem;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(27, 107, 74, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.earn-btn:hover,
.earn-btn:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(27, 107, 74, 0.42);
}

.earn-btn:focus-visible {
    outline: 3px solid #1B6B4A;
    outline-offset: 3px;
}

.earn-btn-icon {
    width: 18px;
    height: 18px;
    flex: none;
}

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

.earn-btn-chip {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.42rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.22);
}

/* The sweep. A single wide highlight crossing the button every 5s. */
.earn-btn-sheen {
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.38) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-18deg);
    animation: earn-sweep 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes earn-sweep {
    0%, 62% { left: -60%; }
    100%    { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
    .earn-btn {
        transition: none;
    }

    .earn-btn:hover,
    .earn-btn:focus-visible {
        transform: none;
    }

    /* No sweep, but keep the button visibly distinct from the others. */
    .earn-btn-sheen {
        animation: none;
        display: none;
    }
}

@media (max-width: 480px) {
    .earn-btn {
        padding: 0.8rem 1.2rem;
        font-size: 0.95rem;
    }
}

/* Three buttons now sit in the hero row. Wrapping keeps them from overflowing
   at tablet widths, and centring the cross axis lines up the Play badge with
   the shorter buttons beside it. */
.hero-buttons {
    flex-wrap: wrap;
    align-items: center;
}

/* The label is a full sentence now, so it must not break mid-phrase and sit
   over two ragged lines next to the Play badge. On narrow screens the 30% chip
   is dropped instead of letting the button grow taller than everything else —
   the sentence carries the offer on its own there. */
.earn-btn-label {
    white-space: nowrap;
}

@media (max-width: 560px) {
    .earn-btn-chip {
        display: none;
    }

    .earn-btn-label {
        white-space: normal;
    }
}