/* ============================================================
   HARMONIX - Minimal product landing
   Shared application styles
   ============================================================ */

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

/* ---- Intro animation overlay ---- */
#harmonix-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: #06060e;
}

#harmonix-intro-wordmark {
    display: flex;
    align-items: center;
    transform: scale(min(1, calc(88vw / 880px)));
    transform-origin: center center;
}

.intro-word {
    font-family: "Quicksand", "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 160px;
    line-height: 1;
    color: #a7a5c6;
    letter-spacing: -0.01em;
    user-select: none;
    opacity: 0;
    transition: opacity 600ms ease;
}

#harmonix-intro-cube { flex-shrink: 0; }
#harmonix-intro.show-wordmark .intro-word { opacity: 1; }
#harmonix-intro.fade-out { opacity: 0; transition: opacity 500ms ease; }

/* ---- Theme variables ---- */
:root {
    --hx-bg: #06060e;
    --hx-bg2: #0d0c1a;
    --hx-surface: rgba(103,34,221,0.04);
    --hx-border: rgba(103,34,221,0.18);
    --hx-border-soft: rgba(103,34,221,0.12);
    --hx-text: #f3f4f2;
    --hx-text-sec: rgba(199,196,220,0.78);
    --hx-text-muted: rgba(167,165,198,0.55);
    --hx-nav-bg: rgba(6,6,14,0.88);
    --hx-uv-bg: #0d0c1a;
    --hx-hero-bg: radial-gradient(ellipse 60% 50% at 70% 30%, rgba(103,34,221,0.22) 0%, transparent 70%), #06060e;
}

html {
    background: var(--hx-bg);
}

body {
    font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.hx-page {
    background: var(--hx-bg);
    color: var(--hx-text);
    transition: background 250ms ease, color 250ms ease;
    min-height: 100svh;
    overflow-x: clip;
}

/* ---- Shared layout ---- */
.hx-container {
    max-width: 960px;
    margin-inline: auto;
    padding-inline: clamp(20px, 6vw, 60px);
}

.hx-container--narrow { max-width: 700px; }
.hx-centered { text-align: center; }

.hx-section {
    padding-block: clamp(80px, 11vh, 130px);
}

/* ---- Shared type ---- */
.hx-eyebrow {
    font-family: "Quicksand", sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6722dd;
    margin-bottom: 24px;
}

.hx-section-title {
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--hx-text);
    margin-bottom: 24px;
}

.hx-body {
    font-size: 1.0625rem;
    color: var(--hx-text-sec);
    line-height: 1.78;
    margin-bottom: 20px;
    max-width: 65ch;
}

.hx-centered .hx-body { max-width: 100%; }

.hx-lead {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--hx-text-sec);
    max-width: 48ch;
    margin-bottom: 0;
}

/* ---- Shared buttons ---- */
.hx-btn-primary {
    display: inline-block;
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #f3f4f2;
    background: #6722dd;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    text-decoration: none;
    transition: background 150ms, transform 120ms;
    letter-spacing: 0.01em;
}

.hx-btn-primary:hover {
    background: #5518c0;
    transform: translateY(-1px);
}

.hx-btn-large {
    padding: 16px 40px;
    font-size: 1rem;
}