/* ─── TRUST-IN DESIGN TOKENS ─── */
:root {
    /* Backgrounds */
    --bg: #030408;
    --bg-surface: rgba(15, 20, 35, 0.4);
    --glass-bg: rgba(15, 20, 35, 0.4);
    --glass: rgba(255, 255, 255, 0.03);

    /* Borders */
    --border: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(120, 130, 238, 0.4);
    --glass-border-hover: rgba(120, 130, 238, 0.5);

    /* Accent */
    --accent: #7882EE;
    --accent-light: #AFB9F6;
    --accent-glow: rgba(120, 130, 238, 0.4);
    --hologram: rgba(120, 130, 238, 0.85);

    /* Text */
    --text-1: #ffffff;
    --text-main: #ffffff;
    --text-2: #A1A1AA;
    --text-muted: #A1A1AA;
    --text-3: #71717A;
    --text-dim: #71717A;

    /* Status Colors */
    --green: #4ADE80;
    --green-bg: rgba(74, 222, 128, 0.1);
    --green-border: rgba(74, 222, 128, 0.3);
    --amber: #FCD34D;
    --amber-bg: rgba(252, 211, 77, 0.1);
    --amber-border: rgba(252, 211, 77, 0.3);
    --purple: #A78BFA;
    --purple-bg: rgba(167, 139, 250, 0.1);
    --purple-border: rgba(167, 139, 250, 0.3);
    --purple-glow: rgba(167, 139, 250, 0.25);
    --rose: #FB7185;
    --rose-bg: rgba(251, 113, 133, 0.1);
    --rose-border: rgba(251, 113, 133, 0.3);

    /* Misc */
    --radius: 24px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; cursor: none; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    background: var(--bg);
    color: var(--text-1);
    font-family: 'Inter', -apple-system, sans-serif;
    overflow-x: hidden;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .logo, .section-tag { font-family: 'Sora', sans-serif; letter-spacing: -0.03em; }
a { color: inherit; text-decoration: none; }

/* ─── TOUCH DEVICE CURSOR RESET ─── */
@media (pointer: coarse) {
    *, *::before, *::after { cursor: auto; }
    button, a, select, input, textarea, label { cursor: pointer; }
}

/* ─── CANVAS & CURSOR ─── */
#webgl-canvas { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; }
#cursor-dot {
    position: fixed; width: 8px; height: 8px; background: #fff; border-radius: 50%;
    pointer-events: none; z-index: 10000; box-shadow: 0 0 10px #fff;
    transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s;
}
#cursor-ring {
    position: fixed; width: 40px; height: 40px; border: 1px solid var(--accent);
    border-radius: 50%; pointer-events: none; z-index: 10000; transition: 0.15s ease-out;
    transform: translate(-50%, -50%); box-shadow: inset 0 0 10px var(--accent-glow);
}

/* ─── SCROLL REVEAL ─── */
.reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* ─── KEYFRAMES ─── */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes floatObj {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}