/* ========= root tokens ========= */
:root {
    --bg-900: #0d0d0d;
    --bg-800: #141414;
    --text-100: #ffffff;
    --text-300: #c3c3c3;
    --accent: #00ff8b;
    --accent-glow: 0 0 8px rgba(0, 255, 139, 0.35);
    --radius: 16px;
    --transition: 0.25s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

/* ========= layout ========= */
body {
    background: var(--bg-900);
    color: var(--text-100);
    line-height: 1.55;
    padding-top: 72px;            /* header offset */
}

.section { padding: 64px 6vw; max-width: 900px; margin: 0 auto; }
.section h2 { font-size: 2rem; margin-bottom: 1.5rem; }

/* ========= header ========= */
.header {
    position: fixed; inset: 0 0 auto 0;
    height: 64px;
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(13, 13, 13, 0.75);
    backdrop-filter: blur(8px);
    padding: 0 6vw;
    z-index: 1000;
}

.brand {
    display: flex; align-items: center; gap: 8px; font-weight: 600;
}
.brand img { height: 28px; width: 28px; }

nav a {
    color: var(--text-300); text-decoration: none;
    margin-left: 24px; font-size: 0.95rem; transition: var(--transition);
}
nav a:hover, nav a.active { color: var(--accent); text-shadow: var(--accent-glow); }

/* ========= hero ========= */
.hero { text-align: center; padding: 96px 8vw 64px; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); line-height: 1.12; }
.hero .accent { color: var(--accent); text-shadow: var(--accent-glow); }
.subtitle { color: var(--text-300); max-width: 600px; margin: 1.25rem auto 0; }

/* ========= cards ========= */
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 48px 6vw; }
.card {
    background: var(--bg-800); border: 1px solid #1f1f1f; border-radius: var(--radius);
    padding: 24px; text-decoration: none; color: var(--text-100);
    transition: var(--transition);
}
.card:hover {
    transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--accent-glow);
}
.card h3 { margin-bottom: 0.5rem; font-size: 1.15rem; }
.card p { color: var(--text-300); font-size: 0.92rem; }

/* ========= details accordion ========= */
details { border: 1px solid #1f1f1f; border-radius: var(--radius); margin-bottom: 12px; }
summary {
    list-style: none; cursor: pointer; padding: 16px;
    background: var(--bg-800); font-weight: 600;
}
details[open] summary { border-bottom: 1px solid #1f1f1f; }
details p { padding: 16px; background: var(--bg-900); color: var(--text-300); }

/* ========= contact form ========= */
.contact p { margin-bottom: 2rem; }
form { display: grid; gap: 16px; max-width: 560px; }
input, textarea {
    background: var(--bg-800); border: 1px solid #1f1f1f; border-radius: var(--radius);
    padding: 14px 16px; color: var(--text-100); font-size: 1rem;
}
button {
    background: var(--accent); color: #000; border: none; border-radius: var(--radius);
    padding: 14px 0; font-weight: 600; cursor: pointer;
    transition: var(--transition);
}
button:hover { filter: brightness(1.1); box-shadow: var(--accent-glow); }

/* ========= footer ========= */
footer {
    text-align: center; padding: 48px 6vw; font-size: 0.85rem;
    background: var(--bg-800); border-top: 1px solid #1f1f1f;
}
footer .foot-links a { color: var(--text-300); text-decoration: none; margin: 0 4px; }
footer .foot-links a:hover { color: var(--accent); }

/* ========= responsive tweaks ========= */
@media (max-width: 560px) {
    nav { display: none; }            /* keep header minimal on very small screens */
    .header { justify-content: center; }
}