@import url('tokens.generated.css');

/* The app's Oat theme (swift_app/Shared/AppTheme.swift), light. Overrides the shared app tokens, which still carry the old dark orange. */
:root {
    --bg: #f4f1ea;
    --card: #fbf9f4;
    --elevated: #eae6dd;
    --border: #ddd8cd;
    --ink: #2f2d2a;
    --ink-2: #6f6a62;
    --ink-3: #736d64;
    --brand: #5f5b55;
    --brand-2: #7a756e;
    --accent: #7d6a52;
    --on-brand: #ffffff;
    --color-text-primary: var(--ink);
    --color-text-secondary: var(--ink-2);
    --color-text-muted: var(--ink-3);
    --color-overlay-white-soft: var(--border);
    --glass: var(--card);
    --glass-border: var(--border);
    --cjk-serif: 'Noto Serif TC';
    --cjk-sans: 'Noto Sans TC';
    --family-display: 'Newsreader', var(--cjk-serif), 'Songti TC', serif;
    --family-body: 'Newsreader', var(--cjk-sans), 'PingFang TC', sans-serif;
    color-scheme: light;
}

:root:lang(zh-CN) { --cjk-serif: 'Noto Serif SC'; --cjk-sans: 'Noto Sans SC'; }
:root:lang(ja) { --cjk-serif: 'Noto Serif JP'; --cjk-sans: 'Noto Sans JP'; }
:root:lang(ko) { --cjk-serif: 'Noto Serif KR'; --cjk-sans: 'Noto Sans KR'; }
:root:lang(th) { --cjk-serif: 'Noto Serif Thai'; --cjk-sans: 'Noto Sans Thai'; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button {
    font: inherit;
}

body {
    font-family: var(--family-body);
    background-color: var(--bg);
    color: var(--color-text-primary);
    overflow-x: hidden;
    line-height: 1.6;
}

h1,
h2,
h3 {
    font-family: var(--family-display);
}

/* Background Animations */
.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    opacity: 0.6;
    animation: drift 15s infinite alternate ease-in-out;
}

.blob-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--elevated) 0%, rgba(234, 230, 221, 0) 70%);
    top: -200px;
    left: -100px;
}

@keyframes drift {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(40px) scale(1.1);
    }
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xl) 6%;
    position: relative;
    z-index: 10;
}

.nav-brand {
    height: 36px;
    width: auto;
    display: block;
}

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

.nav-links a {
    color: var(--color-text-secondary);
    text-decoration: none;
    margin: 0 var(--spacing-base);
    font-weight: var(--weight-medium);
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--color-text-primary);
}

.btn {
    text-decoration: none;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
}

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) 6% 120px;
    position: relative;
    z-index: 5;
    min-height: 85vh;
}

.hero-content {
    max-width: 50%;
}

.hero-title {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: var(--spacing-xl);
    letter-spacing: -2px;
}

.hero-accent {
    color: var(--accent);
}

:root:not(:lang(en)) .hero-title {
    letter-spacing: 0;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: var(--size-lg);
    color: var(--color-text-secondary);
    margin-bottom: 40px;
    max-width: 90%;
}

.hero-cta-group {
    margin-bottom: 30px;
}

/* Hero Visual & Mockups */
.hero-visual {
    position: relative;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
}


/* Features Component Layer (Glassmorphism) */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xxl);
    padding: 0 6% 120px;
    position: relative;
    z-index: 5;
}

.glass {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xxl);
    padding: 40px var(--spacing-xxl);
    transition: transform 0.3s, background 0.3s;
}

.glass:hover {
    transform: translateY(-8px);
    background: #fff;
}

.feature-icon {
    font-size: 36px;
    margin-bottom: var(--spacing-lg);
}

.feature-card h3 {
    font-size: var(--size-xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--spacing-md);
}

.feature-card p {
    color: var(--color-text-secondary);
    font-size: var(--size-base);
}

/* Responsive */
@media (max-width: 992px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding-top: 40px;
    }

    .hero-content {
        max-width: 100%;
        margin-bottom: 80px;
    }

    .hero-subtitle {
        margin: 0 auto 40px;
    }

    .hero-visual {
        width: 100%;
        max-width: 500px;
        margin-bottom: 60px;
    }

    .phone-scene {
        transform: none;
        animation: phone-breathe-flat 6s ease-in-out infinite;
    }

    .download-group {
        justify-content: center;
    }

    .nav-links {
        display: none;
    }

    .nav-brand {
        width: auto;
        height: 30px;
    }
}

@keyframes phone-breathe-flat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@media (max-width: 480px) {
    .hero-visual {
        max-width: 320px;
    }

    .float-tag {
        display: none;
    }
}