/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Scroll behavior */
html {
    scroll-behavior: smooth;
}

:root {
    /* Rose palette — muted dusty rose, easy on the eyes */
    --color-rose-50:  #FEF5F8;
    --color-rose-100: #FCDEE9;
    --color-rose-200: #F7B8CF;
    --color-rose-400: #D97A99;
    --color-rose-500: #C85B7A;
    --color-rose-600: #A84060;
    --color-rose-700: #8B2D4C;
    --color-rose-900: #5C1A2F;

    /* Violet palette */
    --color-violet-50:  #F5F3FF;
    --color-violet-400: #A78BFA;
    --color-violet-600: #7C3AED;

    /* Stone palette (warm neutrals) */
    --color-stone-50:  #FAFAF9;
    --color-stone-100: #F5F5F4;
    --color-stone-400: #A8A29E;
    --color-stone-600: #57534E;
    --color-stone-900: #1C1917;

    /* Surface tokens */
    --color-white:        #FFFFFF;
    --color-surface:      #FFFFFF;
    --color-surface-pink: #FFF5F7;

    /* Semantic */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error:   #EF4444;

    /* Backward-compat aliases */
    --primary:          var(--color-rose-500);
    --primary-light:    var(--color-rose-100);
    --primary-dark:     var(--color-rose-600);
    --accent:           var(--color-rose-400);
    --accent-light:     var(--color-rose-200);
    --secondary:        var(--color-violet-400);
    --background:       var(--color-stone-50);
    --surface:          var(--color-surface);
    --surface-variant:  var(--color-stone-100);
    --text-primary:     var(--color-stone-900);
    --text-secondary:   var(--color-stone-600);
    --text-light:       var(--color-white);
    --white:            var(--color-white);
    --light-gray:       var(--color-stone-100);
    --medium-gray:      var(--color-stone-400);
    --dark-gray:        var(--color-stone-600);
    --black:            var(--color-stone-900);
    --success:          var(--color-success);
    --warning:          var(--color-warning);
    --error:            var(--color-error);
    --info:             #60A5FA;

    /* Gradients */
    --gradient-primary:    linear-gradient(135deg, var(--color-rose-500), var(--color-rose-600));
    --gradient-background: linear-gradient(180deg, var(--color-stone-50), var(--color-rose-50));
    --gradient-card:       var(--color-surface);
    --gradient-rose-cta:   linear-gradient(135deg, var(--color-rose-500), var(--color-rose-600));

    /* Typography */
    --font-primary:   'Playfair Display', serif;
    --font-secondary: 'Inter', sans-serif;

    /* Spacing */
    --spacing-xs:  0.4rem;
    --spacing-sm:  0.75rem;
    --spacing-md:  1.25rem;
    --spacing-lg:  1.75rem;
    --spacing-xl:  2.5rem;
    --spacing-2xl: 3.5rem;
    --spacing-3xl: 5rem;

    /* Section padding */
    --section-padding-desktop: 70px;
    --section-padding-mobile:  50px;

    /* Breakpoints */
    --mobile:  480px;
    --tablet:  768px;
    --desktop: 1024px;
    --large:   1200px;

    /* Borders */
    --border-radius-sm:   8px;
    --border-radius-md:   12px;
    --border-radius-lg:   16px;
    --border-radius-xl:   20px;
    --border-radius-pill: 100px;

    /* Shadows — soft rose tint */
    --shadow-sm:      0 4px 24px rgba(200, 91, 122, 0.08);
    --shadow-md:      0 8px 32px rgba(200, 91, 122, 0.12);
    --shadow-lg:      0 16px 48px rgba(200, 91, 122, 0.15);
    --shadow-xl:      0 24px 64px rgba(200, 91, 122, 0.18);
    --shadow-neutral: 0 4px 24px rgba(0, 0, 0, 0.06);
}

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--text-primary);
    background: var(--background);
    /* `clip`, not `hidden`. overflow-x:hidden makes the body a scroll
       container, which silently breaks every `position: sticky` descendant —
       including the pinned cycle section. `clip` suppresses the same
       horizontal overflow without creating a scroll container.

       No @supports fallback on purpose: iOS Safari < 16 ignores `clip` and
       falls back to `visible`, but the only two elements that can exceed the
       viewport width (.hero-ring and .marquee__track) are already clipped by
       their own overflow:hidden parents. Re-adding `hidden` here for old iOS
       would break the cycle section's pinning to solve an overflow that no
       longer exists. */
    overflow-x: clip;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

h1 { font-size: 4rem; letter-spacing: -0.02em; }
h2 { font-size: 2.75rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.25rem; }

p {
    font-size: 1.0625rem;
    margin-bottom: var(--spacing-sm);
}

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

.primary-text {
    color: var(--primary);
}

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

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 14px 32px;
    border-radius: var(--border-radius-pill);
    font-family: var(--font-secondary);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

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

.btn-primary:hover {
    background: var(--color-rose-600);
    box-shadow: var(--shadow-sm);
}

.btn-outline {
    background: transparent;
    color: var(--color-rose-500);
    border: 2px solid var(--color-rose-500);
}

.btn-outline:hover {
    background: var(--color-rose-50);
    color: var(--color-rose-600);
}

.btn-large {
    padding: 16px 40px;
    font-size: 1.1rem;
}

.btn-sm {
    padding: 10px 20px;
    font-size: 0.875rem;
}

.btn-full {
    width: 100%;
}

/* Skip link — first tab stop, visible only when focused.
   `fixed`, not `absolute`: an absolutely positioned skip link is placed at the
   top of the *document*, so focusing it part-way down the page drops it out of
   view and the user sees nothing happen. */
.skip-link {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 2000;
    padding: 12px 22px;
    background: var(--color-rose-600);
    color: var(--color-white);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translate(-50%, 0);
    outline: 2px solid var(--color-white);
    outline-offset: -4px;
}

/* Launch banner */
.launch-banner {
    position: relative;
    /* Below the navbar: the navbar must win any overlap, never the banner. */
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 12px 52px;
    background: var(--gradient-rose-cta);
    color: var(--color-white);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
}

.launch-banner__link {
    color: var(--color-white);
    text-decoration: underline;
    font-weight: 700;
    white-space: nowrap;
}

.launch-banner__close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.launch-banner__close:hover { background: rgba(255, 255, 255, 0.18); }

/* Navigation
   `sticky`, not `fixed`. A fixed navbar sits outside normal flow, so every
   page had to hand-compensate with a top padding — .hero and .legal-header
   did, .legal-content (support, careers) and the launch banner did not, and
   the navbar covered their first 80px. Sticky occupies its own space, so the
   compensation is no longer needed anywhere and cannot drift out of sync. */
.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 1000;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-rose-100);
}

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

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

.logo {
    width: 40px;
    height: 40px;
}

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

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

.nav-logo a {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-decoration: none;
}

.brand-text {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-stone-900);
}

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

.nav-link {
    color: var(--color-stone-600);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

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

.nav-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-left: var(--spacing-lg);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.nav-toggle span {
    width: 24px;
    height: 3px;
    background: var(--color-stone-900);
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

/* Hero Section */
.hero {
    position: relative;
    /* No navbar offset needed — the navbar is sticky and holds its own space. */
    padding: var(--section-padding-desktop) 0;
    background: var(--color-stone-50);
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    background: radial-gradient(ellipse at 70% 50%, var(--color-rose-100) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-title {
    /* Fluid rather than three fixed breakpoints — keeps the line breaks
       sensible at every width instead of only at 1024/768/480. */
    font-size: clamp(2.1rem, 4.6vw, 3.75rem);
    margin-bottom: var(--spacing-md);
    line-height: 1.05;
    letter-spacing: -0.025em;
    /* Safety net for widths where an explicit .line still has to wrap:
       spreads it over even lines instead of dropping a single word. */
    text-wrap: balance;
}

.hero-lead {
    color: var(--color-stone-900);
    font-weight: 600;
}

.hero-description {
    font-size: 1.125rem;
    color: var(--color-stone-600);
    margin-bottom: var(--spacing-xl);
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.hero-stats {
    display: flex;
    gap: var(--spacing-xl);
}

.stat {
    text-align: center;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-rose-500);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--color-stone-600);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.phone-mockup {
    position: relative;
    z-index: 2;
}

.app-screenshot {
    width: 300px;
    height: auto;
    border-radius: 28px;
    box-shadow: var(--shadow-lg);
}

.hero-phone-img {
    width: 100%;
    max-width: 340px;
    /* Cap against the viewport too. The screenshot is ~9:19.5, so an
       unconstrained 380px width made the hero taller than the screen: the
       phone got cut off and, because the columns are centre-aligned, the
       headline was pushed into the lower half with dead space above it. */
    max-height: 72vh;
    height: auto;
    border-radius: 32px;
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 2;
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.floating-card {
    position: absolute;
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-rose-100);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    animation: float 8s ease-in-out infinite;
}

.floating-card.card-1 {
    top: 10%;
    right: -10%;
    animation-delay: 0s;
}

.floating-card.card-2 {
    top: 40%;
    left: -15%;
    animation-delay: 2s;
}

.floating-card.card-3 {
    bottom: 20%;
    right: -5%;
    animation-delay: 4s;
}

.card-icon {
    font-size: 1.5rem;
}

.card-text {
    font-weight: 600;
    color: var(--color-stone-900);
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.section-title {
    margin-bottom: var(--spacing-md);
}

.section-description {
    font-size: 1.1rem;
    color: var(--color-stone-600);
    max-width: 600px;
    margin: 0 auto;
}

/* Section title white variant (for use on rose gradient bg) */
.section-title--white,
.section-title--white .gradient-text {
    color: var(--color-white);
    -webkit-text-fill-color: var(--color-white);
    background: none;
}

/* Features Section */
.features {
    padding: var(--section-padding-desktop) 0;
    background: var(--color-white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.feature-card {
    background: var(--color-surface);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    text-align: left;
    box-shadow: 0 4px 24px rgba(200, 91, 122, 0.08);
    transition: all 0.2s ease;
    border: 1px solid var(--color-rose-100);
}

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

.feature-icon {
    margin-bottom: var(--spacing-md);
}

.icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-rose-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-rose-500);
}

.icon-circle svg {
    stroke: var(--color-rose-500);
    color: var(--color-rose-500);
}

.feature-title {
    color: var(--color-stone-900);
    margin-bottom: var(--spacing-sm);
}

.feature-description {
    color: var(--color-stone-600);
    line-height: 1.7;
}

/* Screenshots Section */
.screenshots {
    padding: var(--section-padding-desktop) 0;
    background: var(--color-stone-50);
}

.screenshots-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--spacing-md) 0 var(--spacing-xl);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
    scrollbar-width: none;
}

.screenshots-carousel::-webkit-scrollbar {
    display: none;
}

.screenshot-item {
    flex: 0 0 auto;
    width: 220px;
    scroll-snap-align: start;
    text-align: center;
}

.screenshot-item img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-sm);
}

.screenshot-label {
    font-size: 0.875rem;
    color: var(--color-stone-600);
    font-weight: 500;
}

/* About Section */
.about {
    padding: var(--section-padding-desktop) 0;
    background: var(--color-stone-100);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.about-description {
    font-size: 1.1rem;
    color: var(--color-stone-600);
    line-height: 1.75;
    margin-bottom: var(--spacing-md);
}

.about-values {
    margin-top: var(--spacing-xl);
}

.value-item {
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-md);
    border-left: 4px solid var(--color-rose-400);
}

.value-item h4 {
    color: var(--color-stone-900);
    margin-bottom: var(--spacing-xs);
}

.value-item p {
    color: var(--color-stone-600);
    margin: 0;
}

.about-visual {
    display: flex;
    justify-content: center;
}

.about-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--border-radius-lg);
}

/* Download Section */
.download {
    padding: var(--section-padding-desktop) 0;
    background: var(--gradient-rose-cta);
    color: var(--color-white);
}

.download-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.download-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

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

.download-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.download-note {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.download-option .download-note {
    color: var(--color-success);
}

.coming-soon .download-note,
.download-option:has(.coming-soon) .download-note {
    color: var(--color-warning);
}

.coming-soon {
    opacity: 0.7;
    position: relative;
}

.coming-soon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
}

.store-button {
    display: block;
    transition: transform 0.2s ease;
}

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

.store-button img {
    height: 60px;
    width: auto;
}

/* Web app store button (on rose gradient bg) */
.store-button--web {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: white;
    border-radius: var(--border-radius-pill);
    padding: 14px 24px;
    text-decoration: none;
    min-width: 160px;
    min-height: 56px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background 0.2s ease;
}

.store-button--web:hover {
    background: rgba(255, 255, 255, 0.25);
}

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

.store-button__kicker { font-size: 11px; opacity: 0.85; }
.store-button__name   { font-size: 15px; font-weight: 700; }

.web-app-link {
    text-align: center;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--surface-variant);
    border-radius: var(--border-radius-md);
    border-left: 4px solid var(--primary);
}

.web-app-link p {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
}

.pwa-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
}

.web-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.web-link:hover {
    text-decoration: underline;
}

.download-visual {
    display: flex;
    justify-content: center;
}

.phones-mockup img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

/* Contact Section */
.contact {
    padding: var(--section-padding-desktop) 0;
    background: var(--color-white);
}

.contact-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: var(--spacing-2xl);
    align-items: start;
    /* Capped and centred. Against the full 1200px container the details
       column is roughly twice the width its content needs, which opened a
       dead gap down the middle of the section. */
    max-width: 940px;
    margin-inline: auto;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.contact-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-rose-100);
    border-radius: 50%;
    color: var(--color-rose-500);
    flex-shrink: 0;
}

.contact-icon svg {
    stroke: var(--color-rose-500);
}

.contact-details h4 {
    margin-bottom: var(--spacing-xs);
    color: var(--color-stone-900);
}

.contact-details p {
    color: var(--color-stone-600);
    margin: 0;
}

/* Contact form card.
   Compact by design: five short fields do not need 40px of padding, 16px
   input padding and 20px gaps — that stack made the card roughly twice the
   height of the contact details beside it. Scoped to this card so the longer
   forms on support/careers keep their own rhythm. */
.contact-form-card {
    background: var(--color-surface);
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--color-rose-100);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    width: 100%;
    max-width: 460px;
    align-self: start;
    /* No-op in the 460px desktop column; centres the card once the grid
       collapses to one column below 1024px. */
    margin-inline: auto;
}

.contact-form-card .form { gap: var(--spacing-sm); }

.contact-form-card .form input,
.contact-form-card .form select,
.contact-form-card .form textarea {
    padding: 12px 14px;
    font-size: 0.9375rem;
    border-radius: var(--border-radius-md);
}

.contact-form-card .form textarea { min-height: 92px; }

.contact-form-card .btn { padding: 12px 28px; }

/* Form Styles */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form input,
.form select,
.form textarea {
    padding: 16px;
    border: 1.5px solid var(--color-stone-100);
    border-radius: var(--border-radius-lg);
    font-family: var(--font-secondary);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--color-stone-50);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--color-rose-500);
    box-shadow: 0 0 0 3px rgba(200, 91, 122, 0.10);
}

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

/* Footer */
.footer {
    background: #0F0A0A;
    color: var(--color-white);
    padding: var(--spacing-xl) 0 var(--spacing-lg);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.footer-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.footer-brand-text {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-rose-500);
}

.footer-description {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.social-links {
    display: flex;
    gap: var(--spacing-sm);
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s ease;
}

.social-link:hover {
    background: var(--color-rose-500);
}

.footer-title {
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
}

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

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

.footer-links a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--color-rose-400);
}

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

.footer-copyright {
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

.footer-credit {
    color: inherit;
    text-decoration: underline;
}

.footer-credit:hover { color: var(--color-rose-400); }

/* Background utilities */
.bg-white     { background: var(--color-white); }
.bg-stone     { background: var(--color-stone-50); }
.bg-stone-100 { background: var(--color-stone-100); }
.bg-rose-gradient {
    background: var(--gradient-rose-cta);
    color: var(--color-white);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-content,
    .about-content,
    .download-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .hero-visual {
        order: -1;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

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

    /* Tighten nav so links + buttons don't crowd at ~900–1024px */
    .nav-menu {
        gap: var(--spacing-md);
    }

    .nav-buttons {
        gap: var(--spacing-xs);
        margin-left: var(--spacing-md);
    }

    .nav-buttons .btn {
        padding: 10px 18px;
        font-size: 0.875rem;
    }
}

/* Switch to hamburger at 900px (desktop nav gets cramped below this) */
@media (max-width: 900px) {
    .nav-menu {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .hero {
        padding: var(--section-padding-mobile) 0;
    }

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

    .hero-stats {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .features,
    .screenshots,
    .about,
    .download,
    .contact {
        padding: var(--section-padding-mobile) 0;
    }

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

    .download-buttons {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .download-option {
        width: 100%;
        align-items: center;
    }

    .store-button img {
        max-width: 200px;
        width: 100%;
    }

    .web-app-link {
        margin-top: var(--spacing-md);
        padding: var(--spacing-sm);
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    /* Fix 2: h2 size step at 768px (was jumping straight from 2.75rem → 2rem at 480px) */
    h2 {
        font-size: 2.25rem;
    }

    /* Fix 3: contact form card padding on mobile */
    .contact-form-card {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    :root {
        --section-padding-mobile: 40px;
        --spacing-sm: 0.5rem;
        --spacing-md: 0.75rem;
        --spacing-lg: 1.25rem;
        --spacing-xl: 1.75rem;
        --spacing-2xl: 2.25rem;
        --spacing-3xl: 2.75rem;
    }

    .container {
        padding: 0 var(--spacing-sm);
    }

    .hero {
        padding: var(--section-padding-mobile) 0;
    }

    h2 {
        font-size: 2rem;
    }

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

    .floating-card {
        display: none;
    }

    .download-buttons {
        gap: var(--spacing-sm);
    }

    .store-button img {
        max-width: 180px;
    }

    .web-app-link {
        padding: var(--spacing-sm);
        font-size: 0.9rem;
    }

    .web-app-link p {
        margin-bottom: var(--spacing-xs);
    }

    .pwa-note {
        font-size: 0.8rem;
    }

    .phones-mockup img {
        max-width: 100%;
        border-radius: var(--border-radius-md);
    }

    /* Fix 3: contact form card padding on small phones */
    .contact-form-card {
        padding: var(--spacing-md);
    }

    /* Fix 4: hero stats — wrap back to row so they don't take excessive vertical space */
    .hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .stat-number {
        font-size: 1.4rem;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* Loading States */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

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

/* Focus styles */
.btn:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--color-rose-500);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
}