/* SEO Backlinks — Global foundations */
/* Design language: dark, premium, futuristic SEO/agency. Electric violet + cyan accents on near-black. */

:root {
    /* Brand */
    --color-primary: #7c5cff;
    --color-primary-soft: #9d85ff;
    --color-primary-dim: rgba(124, 92, 255, 0.18);
    --color-secondary: #22d3ee;
    --color-secondary-dim: rgba(34, 211, 238, 0.18);
    --color-accent: #f0abfc;

    /* Surfaces */
    --color-bg: #08080c;
    --color-bg-soft: #0e0e15;
    --color-bg-elev: #14141f;
    --color-bg-elev-2: #1c1c2c;
    --color-bg-darker: #050507;
    --color-surface: rgba(255, 255, 255, 0.03);
    --color-surface-strong: rgba(255, 255, 255, 0.06);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.14);
    --color-border-glow: rgba(124, 92, 255, 0.35);

    /* Text */
    --color-text: #ffffff;
    --color-text-light: #ffffff;
    --color-text-medium: #b6b8c7;
    --color-text-muted: #7d8095;
    --color-text-dark: #4a4d5e;

    /* Status */
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #fb7185;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 4rem;
    --spacing-2xl: 6rem;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 80px rgba(124, 92, 255, 0.25);
    --shadow-glow-strong: 0 0 120px rgba(124, 92, 255, 0.4), 0 0 40px rgba(34, 211, 238, 0.2);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --max-width: 1280px;
    --max-width-narrow: 1080px;
    --section-padding-y: 6rem;
    --section-padding-x: 1.5rem;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #7c5cff 0%, #22d3ee 100%);
    --gradient-aurora: linear-gradient(135deg, #7c5cff 0%, #f0abfc 50%, #22d3ee 100%);
    --gradient-text: linear-gradient(135deg, #ffffff 0%, #b6b8c7 100%);
    --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);

    /* Homepage-specific surfaces (theme-overridable) */
    --hero-panel-bg: linear-gradient(180deg, rgba(20, 20, 31, 0.9), rgba(14, 14, 21, 0.7));
    --bar-t1: linear-gradient(180deg, #7c5cff, #5d3eff);
    --bar-t2: linear-gradient(180deg, #22d3ee, #0ea5e9);
    --bar-t3: linear-gradient(180deg, #3a3a52, #25253a);
    --final-cta-bg: linear-gradient(135deg, rgba(124, 92, 255, 0.1), rgba(34, 211, 238, 0.05));
    --final-cta-halo: radial-gradient(600px circle at 50% 0%, rgba(124, 92, 255, 0.3), transparent 60%);
}

@media (max-width: 768px) {
    :root {
        --section-padding-y: 4rem;
        --section-padding-x: 1.25rem;
    }
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    background: var(--color-bg);
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    position: relative;
}

/* Ambient backdrop — subtle aurora glow + grid */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(800px circle at 15% -10%, rgba(124, 92, 255, 0.18), transparent 60%),
        radial-gradient(700px circle at 90% 10%, rgba(34, 211, 238, 0.12), transparent 60%),
        radial-gradient(900px circle at 50% 110%, rgba(240, 171, 252, 0.10), transparent 60%);
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 30%, transparent 90%);
    pointer-events: none;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--color-primary);
    color: #fff;
}

/* Section base */
section {
    padding: var(--section-padding-y) var(--section-padding-x);
    position: relative;
}

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

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

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.45); }
    50%      { box-shadow: 0 0 0 14px rgba(124, 92, 255, 0); }
}

@keyframes shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

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

@keyframes barRise {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes typeIn {
    from { width: 0; }
    to   { width: 100%; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}