/* Energieversum — Pitch-Vorschau
   Custom styles: brand gradient utilities, mesh background, scrollbar, selection,
   reduced-motion guard, glassmorphism details. */

:root {
  --brand-cyan:   #0098B5;
  --brand-blue:   #1582A9;
  --brand-mid:    #395D96;
  --brand-violet: #564088;
  --brand-plum:   #6A2C7D;
  --brand-grape:  #762077;
  --brand-purple: #7B1C75;

  --ink-950: #06070a;
  --ink-900: #0a0b0f;
}

::selection { background: var(--brand-cyan); color: #fff; }
::-moz-selection { background: var(--brand-cyan); color: #fff; }

html { scroll-behavior: smooth; }

/* Subtle scrollbar on dark + light */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.22); }

/* ---- Brand gradient utilities ---- */
.bg-brand-gradient {
  background-image: linear-gradient(135deg, #0098B5 0%, #1582A9 18%, #395D96 42%, #564088 62%, #6A2C7D 80%, #7B1C75 100%);
}
.bg-brand-gradient-soft {
  background-image: linear-gradient(135deg, rgba(0,152,181,.92) 0%, rgba(57,93,150,.92) 50%, rgba(123,28,117,.92) 100%);
}
.text-brand-gradient {
  background-image: linear-gradient(135deg, #0098B5 0%, #395D96 50%, #7B1C75 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.border-brand-gradient {
  border-image: linear-gradient(135deg, #0098B5, #7B1C75) 1;
}

/* ---- Hero mesh background ---- */
.hero-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 18%, rgba(0,152,181,.45), transparent 70%),
    radial-gradient(50% 50% at 88% 30%, rgba(123,28,117,.42), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(57,93,150,.55), transparent 70%);
  filter: blur(20px);
  opacity: .9;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  pointer-events: none;
}

/* Subtle film grain on dark sections */
.noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---- Header glass states ---- */
#site-header.is-stuck {
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 8px 28px -16px rgba(0,0,0,.18);
}
#site-header.is-stuck .nav-link { color: #1f2229; }
#site-header.is-stuck .header-logo-text { color: #0a0b0f; }

/* ---- Magnetic CTA wrapper ---- */
.magnetic { display: inline-block; will-change: transform; }

/* ---- Card hover (services + testimonials) ---- */
.card-lift { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
.card-lift:hover { transform: translateY(-4px); }

/* Stat number rendering: tabular for stable counter animation */
.stat-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv11' 1; }

/* Headline rendering quality */
.h-display {
  font-family: 'Inter Tight', Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.035em;
  line-height: .95;
  font-weight: 800;
}

/* Eyebrow */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  font-weight: 600;
}

/* Reveal default state — JS adds .is-in to play */
.reveal { opacity: 0; transform: translateY(28px); }

/* Image frame: prevent any pixel bleed */
.frame { overflow: hidden; border-radius: 1.5rem; }

/* Diagonal triangle from logo, used as small mark */
.brand-mark {
  width: 28px; height: 24px;
  background: linear-gradient(135deg, #0098B5 0%, #395D96 50%, #7B1C75 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Reduced motion — disable all animations + parallax */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Body min font size + form fields anti zoom */
body { font-size: 16px; }
input, select, textarea { font-size: 16px; }

/* Long words break gracefully on narrow screens */
.break-safe { word-break: break-word; overflow-wrap: anywhere; }