/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── SKIP LINK ──────────────────────────────────────────── */
.skip-link {
    position: absolute; left: -9999px; top: 8px;
    z-index: 10000; padding: 10px 20px;
    background: #55D6F7; color: #0A0E14;
    font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700;
    border-radius: 0 0 4px 4px; text-decoration: none;
    white-space: nowrap;
}
.skip-link:focus { left: 16px; }

/* ─── FOCUS INDICATORS ───────────────────────────────────── */
:focus-visible {
    outline: 2px solid #55D6F7;
    outline-offset: 3px;
    border-radius: 2px;
}
/* Form inputs already show orange border; keep their custom focus */
.f-input:focus-visible,
.f-select:focus-visible,
.f-textarea:focus-visible { outline: none; }

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
    /* ─── Design tokens ─── */
    --color-bg:            #0A0E14;
    --color-accent-orange: #FFB596;
    --color-accent-blue:   #55D6F7;
    --color-text-primary:  #EDEEF0;

    /* ─── Working aliases ─── */
    --bg:      var(--color-bg);
    --bg2:     #111111;
    --bg3:     #1a1a1a;
    --bg4:     #222222;
    --text:    var(--color-text-primary);
    --text2:   #9ca3af;
    --text3:   #808898;
    --white:   #ffffff;
    --orange:  var(--color-accent-orange);
    --signal:  #E05F1E;
    --teal:    #55D6F7;
    --border:  rgba(255,255,255,0.07);
    --border2: rgba(255,255,255,0.13);
    --max-w:   1140px;
    --nav-h:   79px;
    --pad:     95px;
}

/* ─── BASE ───────────────────────────────────────────────── */
html  { scroll-behavior: smooth; }
body  {
    font-family: 'Outfit', system-ui, sans-serif;
    background: var(--bg); color: var(--text);
    line-height: 1.65; -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ─── LAYOUT ─────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); }
.section    { padding: 64px 0; }
.section-alt { background: var(--bg2); }

/* ─── EYEBROW ────────────────────────────────────────────── */
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: #55D6F7; margin-bottom: 20px;
}
.eyebrow::before { display: none; }

/* ─── HEADINGS ───────────────────────────────────────────── */
.h-section {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: clamp(22px, 3.2vw, 36px); font-weight: 800; color: var(--text);
    line-height: 1.25; letter-spacing: -0.01em;
    margin-bottom: 24px;
}
.h-section-lg {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: clamp(22px, 3.2vw, 36px); font-weight: 800; color: var(--text);
    line-height: 1.25; letter-spacing: -0.01em;
    margin-bottom: 24px;
}

/* ─── BODY TEXT ──────────────────────────────────────────── */
.body    { font-size: 15px; color: var(--text2); line-height: 1.78; }
.body p + p { margin-top: 14px; }
.body-lg { font-size: 17px; color: var(--text2); line-height: 1.72; }
.body-lg p + p { margin-top: 16px; }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px; background: var(--orange); color: #0A0E14;
    font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700;
    border: none; border-radius: 4px; letter-spacing: 0.02em;
    cursor: pointer; transition: background 0.18s, transform 0.15s;
}
.btn-primary:hover { background: #e09070; color: #0A0E14; transform: translateY(-1px); }

.btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; background: transparent; color: var(--text);
    font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600;
    border: 1px solid var(--border2); border-radius: 4px; letter-spacing: 0.02em;
    cursor: pointer; transition: border-color 0.18s, background 0.18s;
}
.btn-outline:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); }

.btn-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: #FFB596;
    background: none; border: none; cursor: pointer;
    transition: gap 0.18s;
}
.btn-link:hover { gap: 10px; }

/* ─── UTILITIES ─────────────────────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── FADE-IN ────────────────────────────────────────────── */
.fade { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.fade.in { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.06s; } .d2 { transition-delay: 0.12s; }
.d3 { transition-delay: 0.18s; } .d4 { transition-delay: 0.24s; }
.d5 { transition-delay: 0.30s; } .d6 { transition-delay: 0.36s; }

/* ─── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; transition-delay: 0ms !important; }
    .fade { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) { :root { --pad: 48px; } }
@media (max-width: 768px)  { :root { --pad: 20px; } }