/* ThaiTrack public site — Siam-night theme */
:root {
    --night: #0B1020;
    --night-mid: #16102C;
    --night-deep: #2A1848;
    --gold: #D4AF37;
    --gold-light: #F5D76E;
    --gold-dark: #B8960F;
    --crimson: #C41E3A;
    --cream: #F4EDE0;
    --cream-card: #FBF7F0;
    --ink: #2C2416;
    --gray: #374151;
    --gray-500: #6B7280;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --serif: "Cormorant Garamond", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    margin: 0;
    line-height: 1.6;
}

h1, h2, .logo {
    font-family: var(--serif);
    font-weight: 600;
}

/* --- Header / footer chrome --- */
header {
    position: relative;
    z-index: 2;
    background: var(--night);
    color: var(--cream);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-bottom: 1px solid var(--gold);
    overflow: hidden;
}
header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/website-assets/pattern-kanok.jpg") repeat;
    background-size: 280px;
    opacity: 0.1;
    pointer-events: none;
}
header > * { position: relative; z-index: 1; }
header a {
    color: var(--cream);
    text-decoration: none;
    font-weight: 500;
}
header a:hover { color: var(--gold-light); }
.logo {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.02em;
}
.logo:hover { color: var(--gold); }
nav {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}
nav a.nav-cta {
    background: var(--gold);
    color: var(--night);
    padding: 0.5rem 0.95rem;
    border-radius: 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
nav a.nav-cta:hover { background: var(--gold-light); color: var(--night); }

footer {
    text-align: center;
    padding: 2rem 1rem;
    color: #9CA3AF;
    font-size: 0.9rem;
    background: var(--night);
    border-top: 1px solid var(--gold);
    position: relative;
}
footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/website-assets/pattern-kanok.jpg") repeat;
    background-size: 280px;
    opacity: 0.08;
    pointer-events: none;
}
footer a {
    position: relative;
    color: var(--gold);
    text-decoration: none;
}
footer a:hover { color: var(--gold-light); }

/* --- Shared layout --- */
.hero-inner,
.section-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}
.hero-inner { padding-top: 3rem; padding-bottom: 3rem; position: relative; z-index: 1; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.7rem 1.25rem;
    border-radius: 10px;
    font-weight: 650;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
}
.btn-primary {
    background: var(--gold);
    color: var(--night);
}
.btn-primary:hover { background: var(--gold-light); color: var(--night); }
.btn-step {
    background: var(--gold);
    color: var(--night);
    width: 100%;
}
.btn-step:hover { background: var(--gold-dark); color: var(--night); }
.btn-disabled {
    background: #E8E0D4;
    color: var(--gray-500);
    cursor: default;
    pointer-events: none;
}

/* --- Homepage: hero --- */
.hero {
    position: relative;
    min-height: 28rem;
    background: var(--night) url("/website-assets/hero-siam-night.jpg") center right / cover no-repeat;
    color: var(--cream);
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(11, 16, 32, 0.94) 0%,
        rgba(11, 16, 32, 0.82) 38%,
        rgba(22, 16, 44, 0.4) 68%,
        rgba(11, 16, 32, 0.22) 100%
    );
}
.hero::after {
    content: "";
    position: absolute;
    right: 6%;
    top: 50%;
    width: 260px;
    height: 260px;
    transform: translateY(-50%);
    background: url("/website-assets/lotus-gold.jpg") center / contain no-repeat;
    opacity: 0.14;
    pointer-events: none;
}
.badge {
    display: inline-block;
    background: rgba(11, 16, 32, 0.7);
    color: var(--gold-light);
    border: 1px solid var(--gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.hero h1 {
    color: var(--cream);
    font-size: 2.15rem;
    line-height: 1.15;
    margin: 0 0 0.75rem;
    max-width: 18ch;
}
.hero .tagline {
    font-size: 1.15rem;
    color: #E5D9C5;
    margin: 0 0 1.5rem;
    max-width: 38rem;
}

@media (min-width: 800px) {
    .hero h1 { font-size: 2.75rem; }
    .hero { min-height: 32rem; }
}
@media (max-width: 799px) {
    .hero::after { display: none; }
    .hero::before {
        background: linear-gradient(
            180deg,
            rgba(11, 16, 32, 0.9) 0%,
            rgba(11, 16, 32, 0.78) 100%
        );
    }
    .hero h1 { max-width: none; }
}

/* --- Homepage: get the app --- */
#get-the-app { scroll-margin-top: 1rem; }
.get-app {
    position: relative;
    background: var(--night-mid);
    color: var(--cream);
    overflow: hidden;
}
.get-app::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/website-assets/pattern-kanok.jpg") repeat;
    background-size: 320px;
    opacity: 0.08;
    pointer-events: none;
}
.get-app .section-inner { position: relative; z-index: 1; }
.get-app h2 {
    color: var(--gold-light);
    margin: 0 0 0.5rem;
    font-size: 2rem;
}
.get-intro {
    margin: 0 0 1.5rem;
    max-width: 40rem;
    color: #E5D9C5;
}
.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 800px) {
    .steps { grid-template-columns: 1fr 1fr 1fr; }
}
.step {
    background: var(--cream-card);
    color: var(--ink);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-top: 3px solid var(--gold);
    border-radius: 14px;
    padding: 1.15rem 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.step-num {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--night);
    color: var(--gold);
    border: 1px solid var(--gold);
    font-weight: 700;
    font-family: var(--sans);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.step h3 {
    margin: 0 0 0.4rem;
    color: var(--night);
    font-family: var(--serif);
    font-size: 1.25rem;
}
.step p {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    flex: 1;
}
.note {
    margin: 1.25rem 0 0;
    padding: 0.9rem 1rem;
    background: rgba(251, 247, 240, 0.08);
    border-left: 4px solid var(--gold);
    border-radius: 0 8px 8px 0;
    font-size: 0.95rem;
    color: #E5D9C5;
}
.note p { margin: 0 0 0.5rem; }
.note p:last-child { margin: 0; }
.note a { color: var(--gold-light); }

/* --- Features / audience --- */
.features {
    position: relative;
    background: var(--night);
    color: var(--cream);
    overflow: hidden;
}
.features::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/website-assets/pattern-kanok.jpg") repeat;
    background-size: 320px;
    opacity: 0.07;
    pointer-events: none;
}
.features .section-inner,
.audience .section-inner { position: relative; z-index: 1; }
.features h2,
.audience h2 {
    color: var(--gold-light);
    margin: 0 0 1.25rem;
    font-size: 2rem;
}
.feature-grid,
.audience-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
@media (min-width: 640px) {
    .feature-grid { grid-template-columns: 1fr 1fr; }
    .audience-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
    .feature-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.card {
    background: var(--cream-card);
    color: var(--ink);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}
.card h3 {
    margin: 0 0 0.35rem;
    color: var(--night);
    font-family: var(--serif);
    font-size: 1.2rem;
}
.card p { margin: 0; font-size: 0.95rem; color: var(--gray); }

.audience {
    position: relative;
    background: #0A0C18;
    color: var(--cream);
    border-top: 1px solid rgba(212, 175, 55, 0.35);
    overflow: hidden;
}
.audience::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/website-assets/pattern-kanok.jpg") repeat;
    background-size: 320px;
    opacity: 0.06;
    pointer-events: none;
}

/* --- Legal / inner pages --- */
.page-legal {
    background: var(--cream-card);
    color: var(--gray);
}
.page-legal main {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
.page-legal h1 {
    color: var(--night);
    margin-top: 0;
    font-size: 2rem;
}
.page-legal h2 {
    color: var(--night);
    font-size: 1.2rem;
    margin-top: 1.5rem;
}
.page-legal main a { color: #1E40AF; }
.page-legal header a { color: var(--cream); }
.page-legal header .logo { color: var(--gold-light); }
.page-legal header a.nav-cta { color: var(--night); }
.page-legal .updated {
    color: var(--gray-500);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}