/* BeeCrypt — base tokens, reset, typography */
:root {
    --c-bg: #0B0F14;
    --c-bg-2: #121821;
    --c-bg-3: #0F1520;
    --c-surface: rgba(255, 255, 255, 0.03);
    --c-surface-2: rgba(255, 255, 255, 0.05);
    --c-border: rgba(255, 255, 255, 0.08);
    --c-border-strong: rgba(255, 255, 255, 0.14);

    --c-text: #E6F0F7;
    --c-text-dim: #A9B6C4;
    --c-text-mute: #6B7A8C;

    --c-cyan: #22EFFF;
    --c-cyan-soft: #22EFFF;
    --c-violet: #9965F3;
    --c-violet-soft: #9965F3;
    --c-gray: #4C9E8C;

    --grad-cv: linear-gradient(135deg, #22EFFF 0%, #9965F3 100%);
    --grad-vc: linear-gradient(135deg, #9965F3 0%, #22EFFF 100%);

    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-glow-cyan: 0 0 40px rgba(34, 239, 255, 0.25);
    --shadow-glow-violet: 0 0 40px rgba(153, 101, 243, 0.25);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --fs-eyebrow: .78rem;
    --fs-body: 1rem;
    --fs-lead: 1.12rem;
    --fs-h3: 1.35rem;
    --fs-h2: clamp(1.9rem, 3.6vw, 2.8rem);
    --fs-h1: clamp(2.6rem, 6vw, 4.6rem);

    --container: 1200px;
    --nav-h: 72px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

h1, h2, h3, h4 {
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 .5em;
    color: var(--c-text);
}

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; }

p { margin: 0 0 1em; color: var(--c-text-dim); }

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-cyan); }

img, svg { display: block; max-width: 100%; height: auto; }

ul { margin: 0; padding: 0; list-style: none; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.eyebrow {
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--c-cyan);
    margin-bottom: .8em;
}

.grad {
    background: var(--grad-cv);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.grad--violet { background: var(--grad-vc); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Background layers */
.bg-grid {
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(ellipse at top, rgba(34, 239, 255, 0.08), transparent 60%),
        var(--c-bg);
    -webkit-mask-image: radial-gradient(ellipse at center top, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse at center top, #000 20%, transparent 80%);
    z-index: -2;
}

.bg-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    pointer-events: none;
    z-index: -1;
}
.bg-glow--1 { width: 520px; height: 520px; background: #22EFFF33; top: -120px; right: -120px; }
.bg-glow--2 { width: 480px; height: 480px; background: #9965F333; top: 420px; left: -140px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
    html { scroll-behavior: auto; }
}