/* =============================================
   FAVORITE PART — Marketing Site
   ============================================= */

/* --- Variables --- */
:root {
    --primary:      #5B5BD6;   /* indigo — matches app primary */
    --primary-dark: #4848b8;
    --action:       #FF8C42;   /* warm orange — matches app action */
    --bg:           #FAFAFA;
    --bg-alt:       #F3F2FF;   /* very light lavender */
    --bg-dark:      #1A1830;
    --text:         #1A1830;
    --text-secondary: #6B6B8A;
    --white:        #FFFFFF;
    --radius:       16px;
    --radius-sm:    10px;
    --shadow:       0 8px 40px rgba(91, 91, 214, 0.12);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* --- Layout --- */
.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

section { padding: 96px 0; }

/* --- Typography --- */
h1 {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text);
}

h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}

p { color: var(--text-secondary); font-size: 1.05rem; }

.section-sub {
    font-size: 1.1rem;
    max-width: 520px;
    margin: 0 auto 56px;
    text-align: center;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    border: none;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--text);
    color: var(--white);
    padding: 4px;
}

.btn-small {
    background: var(--primary);
    color: var(--white);
    padding: 10px 22px;
    font-size: 0.9rem;
}

.app-store-badge { height: 52px; width: auto; }

/* --- Nav --- */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 250, 250, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-wordmark {
    height: 44px;
    width: auto;
    display: block;
}

.footer-wordmark {
    height: 28px;
    width: auto;
    display: block;
}

/* --- Hero --- */
.hero {
    padding: 80px 0 96px;
    background: linear-gradient(160deg, var(--bg-alt) 0%, var(--bg) 60%);
}

.hero .container {
    display: flex;
    align-items: center;
    gap: 64px;
}

.hero-text { flex: 1; }

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

.hero-text p {
    font-size: 1.15rem;
    max-width: 480px;
    margin-bottom: 36px;
    line-height: 1.7;
}

.hero-screenshot {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* --- Phone placeholders (swap with real screenshots) --- */
.phone-placeholder {
    width: 260px;
    aspect-ratio: 9 / 19.5;
    background: linear-gradient(145deg, #e8e7ff, #d4d3f5);
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(91, 91, 214, 0.25);
    box-shadow: var(--shadow);
}

.phone-placeholder span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --- How it works --- */
.how-it-works { background: var(--white); text-align: center; }
.how-it-works h2 { margin-bottom: 56px; }

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.step { padding: 16px; }

.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.step h3 { color: var(--text); margin-bottom: 10px; }
.step p { font-size: 0.98rem; }

/* --- Screenshots --- */
.screenshots {
    background: var(--bg-alt);
    text-align: center;
}
.screenshots h2 { margin-bottom: 12px; }

.screenshot-row {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 56px;
}

.screenshot-row .phone-placeholder { width: 200px; }

/* --- Why --- */
.why { background: var(--white); }
.why h2 { text-align: center; margin-bottom: 56px; }

.reasons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.reason {
    background: var(--bg-alt);
    border-radius: var(--radius);
    padding: 36px 32px;
}

.reason-icon {
    font-size: 2rem;
    margin-bottom: 16px;
}

.reason h3 { color: var(--text); margin-bottom: 10px; font-size: 1.1rem; }
.reason p { font-size: 0.97rem; line-height: 1.65; }

/* --- Privacy callout --- */
.privacy-callout {
    background: var(--bg-dark);
    padding: 80px 0;
}

.privacy-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

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

.privacy-callout p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* --- Download --- */
.download {
    background: var(--primary);
    text-align: center;
    padding: 96px 0;
}

.download h2 { color: var(--white); margin-bottom: 12px; }
.download p { color: rgba(255,255,255,0.75); font-size: 1.1rem; margin-bottom: 36px; }
.download .btn-primary { background: var(--white); color: var(--primary); }

/* --- Footer --- */
footer {
    background: var(--bg-dark);
    padding: 32px 24px;
}

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

footer .footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
footer a { color: rgba(255,255,255,0.5); font-size: 0.875rem; transition: color 0.2s; }
footer a:hover { color: var(--white); }
footer .footer-note { color: rgba(255,255,255,0.25); font-size: 0.65rem; max-width: 560px; text-align: right; }

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

@media (max-width: 768px) {
    section { padding: 72px 0; }

    .hero .container {
        flex-direction: column;
        text-align: center;
        gap: 48px;
    }

    .hero-text p { margin-left: auto; margin-right: auto; }

    .steps { grid-template-columns: 1fr; gap: 32px; }

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

    .screenshot-row { gap: 16px; }
    .screenshot-row .phone-placeholder { width: 160px; }

    footer .container { flex-direction: column; gap: 12px; text-align: center; }
}