/* ── DH TECH SHARED BASE STYLES ─────────────────────────────────────────────
   Shared across all tech pages. Page-specific styles remain inline.
   ─────────────────────────────────────────────────────────────────────────── */

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

:root {
    --bg:       #F7F7F5;
    --white:    #FFFFFF;
    --black:    #111111;
    --text:     #1A1A1A;
    --text-mid: #555555;
    --text-dim: #888888;
    --border:   #E0E0DE;
    --yellow:   #FFE500;
    --yellow-bg:#FFFDE6;
    --red:      #E63B2E;
    --blue:     #0077DD;
    --orange:   #E87400;
    --mint:     #00A85A;
    --purple:   #9333EA;
    --teal:     #0891B2;
    --mono:     'JetBrains Mono', monospace;
    --sans:     'Inter', sans-serif;
}

html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

/* ── NAV ─────────────────────────────────────── */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    height: 56px;
    background: var(--black);
    color: #fff;
}

.nav-logo {
    font-family: var(--mono);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--yellow);
    text-decoration: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
}

.nav-link {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    padding: 0 1.3rem;
    height: 100%;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

.nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

.nav-link.creative {
    background: var(--yellow);
    color: var(--black);
    font-weight: 700;
    margin-left: 0.5rem;
}

.nav-link.creative:hover { background: #fff; }

/* ── FOOTER ───────────────────────────────────── */
footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 3rem;
    background: var(--black);
    color: rgba(255,255,255,0.4);
}

.footer-id {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-a {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color 0.15s;
}

.footer-a:hover { color: var(--yellow); }

/* ── MARQUEE ──────────────────────────────────── */
.marquee-band {
    background: var(--yellow);
    overflow: hidden;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scroll 22s linear infinite;
}

.marquee-item {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--black);
    padding: 0 2rem;
    white-space: nowrap;
}

@keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── SECTION BAR ──────────────────────────────── */
.section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 3rem;
    border-bottom: 1px solid var(--border);
    background: var(--white);
}

.section-label {
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ── ANIMATIONS ───────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.reveal {
    animation: scrollReveal ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.reveal-delay-1 { animation-range: entry 5% entry 35%; }

@supports not (animation-timeline: view()) {
    .reveal {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
    }
    .reveal.in-view {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
}

/* ── RESPONSIVE NAV ───────────────────────────── */
@media (max-width: 900px) {
    nav { padding: 0 2rem; }
}

@media (max-width: 600px) {
    nav { padding: 0 1.5rem; }
    .nav-link:not(.creative):not(.nav-mobile-visible) { display: none; }
    footer { padding: 1.2rem 1.5rem; flex-direction: column; gap: 0.8rem; align-items: flex-start; }
}