/*
  EVT App marketing site — shared stylesheet.
  Dark theme with EVT orange accent. Designed to match the
  visual language of the iOS / macOS app so users moving from
  the App Store listing to the website see a consistent brand.
*/

:root {
    --bg: #0a0a0c;
    --bg-elevated: #131316;
    --bg-card: #1c1c20;
    --border: rgba(255, 255, 255, 0.08);
    --text: #f5f5f7;
    --text-secondary: rgba(245, 245, 247, 0.72);
    --text-tertiary: rgba(245, 245, 247, 0.5);
    --accent: #f28b1a;             /* EVT orange */
    --accent-soft: rgba(242, 139, 26, 0.15);
    --max-width: 980px;
    --radius: 14px;
    --radius-sm: 10px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ── Layout ── */

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Header / Nav ── */

.site-header {
    border-bottom: 1px solid var(--border);
    background: rgba(10, 10, 12, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
}

/* EVT logo in the site header. Uses the dark-mode variant
   from the iOS asset catalog (white reticle on transparent
   background, designed to read against the site's dark theme).
   Square aspect ratio at 32px keeps it visually balanced with
   the "EVT App" wordmark to its right; object-fit: contain
   guarantees the reticle stays circular if the source image
   ever shifts proportions. */
.brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-name {
    color: var(--text);
}

.nav {
    display: flex;
    gap: 28px;
    font-size: 15px;
}

.nav a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav a:hover {
    color: var(--text);
    text-decoration: none;
}

/* ── Hero ── */

.hero {
    padding: 88px 24px 64px;
    text-align: center;
    background: radial-gradient(
        ellipse 80% 60% at 50% 0%,
        rgba(242, 139, 26, 0.18) 0%,
        transparent 60%
    );
}

.hero h1 {
    font-size: 56px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

.hero-tagline {
    font-size: 22px;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto 32px;
    font-weight: 400;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    border: 1px solid transparent;
}

.btn:hover {
    text-decoration: none;
    opacity: 0.9;
}

.btn-primary {
    background: var(--accent);
    color: #1a0a02;
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

/* ── Sections ── */

.section {
    padding: 64px 24px;
    border-top: 1px solid var(--border);
}

.section h2 {
    font-size: 36px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}

.section .lede {
    font-size: 19px;
    color: var(--text-secondary);
    max-width: 720px;
    margin-bottom: 36px;
}

/* ── Feature grid ── */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.feature-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
}

.feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

/* ── Privacy callout (the OAuth-specific section) ── */

.privacy-callout {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    margin-top: 36px;
}

.privacy-callout h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
}

.privacy-callout p {
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.privacy-callout p:last-child {
    margin-bottom: 0;
}

/* ── Doc-style pages (privacy, terms, support) ── */

.doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 64px 24px 96px;
}

.doc h1 {
    font-size: 40px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.doc .updated {
    color: var(--text-tertiary);
    font-size: 14px;
    margin-bottom: 40px;
}

.doc h2 {
    font-size: 22px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 12px;
}

.doc h3 {
    font-size: 17px;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 8px;
    color: var(--text);
}

.doc p {
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.doc ul {
    color: var(--text-secondary);
    padding-left: 24px;
    margin-bottom: 16px;
}

.doc li {
    margin-bottom: 6px;
}

.doc strong {
    color: var(--text);
    font-weight: 600;
}

/* ── Footer ── */

.site-footer {
    border-top: 1px solid var(--border);
    padding: 40px 24px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.site-footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
}

.site-footer .nav {
    gap: 24px;
}

.site-footer .nav a {
    color: var(--text-tertiary);
    font-size: 14px;
}

.site-footer .nav a:hover {
    color: var(--text-secondary);
}

/* ── Mobile ── */

@media (max-width: 640px) {
    .hero {
        padding: 60px 24px 40px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-tagline {
        font-size: 18px;
    }

    .section {
        padding: 48px 24px;
    }

    .section h2 {
        font-size: 28px;
    }

    .nav {
        gap: 16px;
        font-size: 14px;
    }

    .doc h1 {
        font-size: 32px;
    }
}