/*
Theme Name: Havisionz
Theme URI: https://havisionz.nl
Author: Oussama
Author URI: https://havisionz.nl
Description: Premium WordPress-thema voor een influencer marketing broker. Dark luxe editorial design met focus op het verbinden van merken met creators.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: havisionz
Tags: business, marketing, dark, custom-colors, custom-menu
*/


/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Background ──────────────────────────────────────── */
  --color-bg:             #0A0A0F;
  --color-surface:        #12121A;
  --color-surface-2:      #1A1A26;
  --color-surface-3:      #222233;
  --color-border:         rgba(255, 255, 255, 0.06);
  --color-border-subtle:  rgba(255, 255, 255, 0.03);
  --color-border-strong:  rgba(255, 255, 255, 0.12);

  /* ── Brand Gradient ──────────────────────────────────── */
  --color-violet:         #6C3CE0;
  --color-violet-mid:     #8B5CF6;
  --color-violet-light:   #A78BFA;
  --color-coral:          #FF6B6B;
  --color-coral-light:    #FF8A8A;
  --color-coral-dark:     #E85555;

  --gradient-brand:       linear-gradient(135deg, #6C3CE0 0%, #8B5CF6 40%, #FF6B6B 100%);
  --gradient-brand-h:     linear-gradient(90deg, #6C3CE0 0%, #8B5CF6 40%, #FF6B6B 100%);
  --gradient-brand-v:     linear-gradient(180deg, #6C3CE0 0%, #FF6B6B 100%);
  --gradient-subtle:      linear-gradient(135deg, rgba(108,60,224,0.15) 0%, rgba(255,107,107,0.08) 100%);
  --gradient-glow:        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(139,92,246,0.12) 0%, transparent 70%);
  --gradient-mesh:        radial-gradient(at 20% 80%, rgba(108,60,224,0.08) 0%, transparent 50%),
                          radial-gradient(at 80% 20%, rgba(255,107,107,0.06) 0%, transparent 50%);

  /* ── Gold Accent ─────────────────────────────────────── */
  --color-gold:           #F0C66E;
  --color-gold-light:     #F5D98A;
  --color-gold-dark:      #D4A84E;

  /* ── Text ────────────────────────────────────────────── */
  --color-white:          #F0F0F8;
  --color-text:           rgba(240, 240, 248, 0.88);
  --color-text-secondary: rgba(240, 240, 248, 0.60);
  --color-text-muted:     rgba(240, 240, 248, 0.38);
  --color-text-ghost:     rgba(240, 240, 248, 0.20);

  /* ── Semantic ────────────────────────────────────────── */
  --color-success:        #34D399;
  --color-success-bg:     rgba(52, 211, 153, 0.10);
  --color-warning:        #FBBF24;
  --color-warning-bg:     rgba(251, 191, 36, 0.10);
  --color-error:          #F87171;
  --color-error-bg:       rgba(248, 113, 113, 0.10);
  --color-info:           #60A5FA;
  --color-info-bg:        rgba(96, 165, 250, 0.10);

  /* ── Typography ──────────────────────────────────────── */
  --font-display: 'Clash Display', 'Inter', system-ui, sans-serif;
  --font-body:    'Satoshi', 'Inter', system-ui, sans-serif;

  --font-xs:   clamp(0.6875rem, 0.65rem  + 0.19vw, 0.75rem);
  --font-sm:   clamp(0.8125rem, 0.775rem + 0.19vw, 0.875rem);
  --font-base: clamp(0.9375rem, 0.875rem + 0.31vw, 1.0625rem);
  --font-lg:   clamp(1.0625rem, 0.975rem + 0.44vw, 1.25rem);
  --font-xl:   clamp(1.25rem,   1.1rem   + 0.75vw, 1.625rem);
  --font-2xl:  clamp(1.5rem,    1.25rem  + 1.25vw, 2.25rem);
  --font-3xl:  clamp(2rem,      1.5rem   + 2.5vw,  3.25rem);
  --font-4xl:  clamp(2.5rem,    1.75rem  + 3.75vw, 4.5rem);
  --font-5xl:  clamp(3rem,      2rem     + 5vw,    6.5rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  --leading-none:    0.9;
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.65;
  --leading-relaxed: 1.8;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-2xs: clamp(0.25rem, 0.2rem  + 0.25vw, 0.375rem);
  --space-xs:  clamp(0.5rem,  0.4rem  + 0.5vw,  0.75rem);
  --space-sm:  clamp(0.75rem, 0.6rem  + 0.75vw, 1.25rem);
  --space-md:  clamp(1.25rem, 1rem    + 1.25vw, 2rem);
  --space-lg:  clamp(2rem,    1.5rem  + 2.5vw,  3.5rem);
  --space-xl:  clamp(3rem,    2rem    + 5vw,    6rem);
  --space-2xl: clamp(5rem,    3rem    + 10vw,   10rem);

  /* ── Layout ──────────────────────────────────────────── */
  --container-max:    1320px;
  --container-narrow: 800px;
  --container-wide:   1440px;
  --gutter:           clamp(20px, 4vw, 48px);

  /* ── Radius ──────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.6);
  --shadow-glow-violet: 0 0 40px rgba(108,60,224,0.20), 0 0 80px rgba(108,60,224,0.08);
  --shadow-glow-coral:  0 0 40px rgba(255,107,107,0.15), 0 0 80px rgba(255,107,107,0.06);
  --shadow-glow-brand:  0 8px 40px rgba(108,60,224,0.25), 0 0 80px rgba(255,107,107,0.10);

  /* ── Glass-morphism ──────────────────────────────────── */
  --glass-bg:          rgba(18, 18, 26, 0.60);
  --glass-bg-strong:   rgba(18, 18, 26, 0.80);
  --glass-blur:        16px;
  --glass-blur-strong: 24px;
  --glass-border:      1px solid rgba(255, 255, 255, 0.08);

  /* ── Easing ──────────────────────────────────────────── */
  --ease-smooth:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:    cubic-bezier(0.2, 0, 0, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;

  --transition-fast:   150ms var(--ease-snap);
  --transition-base:   300ms var(--ease-smooth);
  --transition-slow:   500ms var(--ease-smooth);
  --transition-slower: 800ms var(--ease-smooth);

  /* ── Z-Index ─────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-toast:    50;
}


/* ═══════════════════════════════════════════════════════════
   BASE RESET & GLOBALS
   ═══════════════════════════════════════════════════════════ */

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--font-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

/* Ambient mesh gradient */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--gradient-mesh);
  pointer-events: none;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: var(--z-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--color-white);
}

h1 { font-size: var(--font-4xl); letter-spacing: var(--tracking-tight); line-height: var(--leading-none); }
h2 { font-size: var(--font-3xl); }
h3 { font-size: var(--font-2xl); }
h4 { font-size: var(--font-xl); }

p { margin-bottom: var(--space-sm); }

a {
  color: var(--color-violet-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-white); }
a:focus-visible {
  outline: 2px solid var(--color-violet-mid);
  outline-offset: 3px;
}

img, picture, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; padding: 0; }

::selection {
  background-color: var(--color-violet);
  color: var(--color-white);
}


/* ═══════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════ */

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

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--gradient-brand);
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
  font-weight: var(--weight-bold);
  font-family: var(--font-display);
  font-size: var(--font-sm);
  z-index: 99999;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; outline: none; color: var(--color-white); }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--font-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-violet-light);
  margin-bottom: var(--space-xs);
}

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Scroll reveal */
.scroll-reveal { opacity: 0; transform: translateY(32px) scale(0.97); transition: opacity var(--duration-slower) var(--ease-smooth), transform var(--duration-slower) var(--ease-smooth); }
.scroll-reveal.visible { opacity: 1; transform: translateY(0) scale(1); }
.stagger-item { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) var(--ease-smooth), transform var(--duration-slow) var(--ease-smooth); }
.stagger-item.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal, .stagger-item { opacity: 1; transform: none; }
}