/* ═══════════════════════════════════════════
   WattCompare Design System — Premium v2
   ═══════════════════════════════════════════ */

/* ── Color Palette ── */
:root{
  --grey-50:#F7F9FC; --grey-100:#EDF1F7; --grey-200:#DDE2EB; --grey-300:#C4CBD6;
  --grey-400:#9BA3AF; --grey-500:#6B7078; --grey-600:#4B5159; --grey-700:#3A404A;
  --grey-800:#232830; --grey-900:#1A1E25;
  --blue-50:#F0F6FF; --blue-100:#DBEAFE; --blue-200:#BFDBFE; --blue-400:#1A6DE0;
  --blue-600:#1558B4; --blue-700:#10448C; --blue-900:#0A2450;
  --amber-50:#FFFBF0; --amber-100:#FEF3C7; --amber-400:#E0880A;
  --amber-600:#B06A08; --amber-900:#5C3504;
  --green-50:#F0FDF4; --green-100:#DCFCE7; --green-400:#0D7A3E;
  --green-600:#0A5E30; --green-900:#042D16;
  --paper:var(--grey-50); --paper-elevated:#FFFEFC; --paper-dark:var(--grey-100);
  --ink:var(--grey-900); --ink-soft:var(--grey-700); --ink-muted:var(--grey-500);
  --blue:var(--blue-400); --blue-light:var(--blue-50);
  --amber:var(--amber-400); --amber-light:var(--amber-50);
  --green:var(--green-400); --green-light:var(--green-50);
  --line:var(--grey-200); --line-strong:var(--grey-300);
}

/* ── Ambient Energy Field ── */
body{
  position:relative;overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 600px 500px at 10% 15%, var(--blue-100) 0%, transparent 60%),
    radial-gradient(ellipse 500px 400px at 90% 75%, var(--amber-100) 0%, transparent 55%),
    radial-gradient(ellipse 400px 350px at 60% 40%, var(--blue-100) 0%, transparent 50%);
  background-size:200% 200%;
  animation:energyField 18s ease-in-out infinite;
  opacity:.85;
}
main,section,.card,.max-w,.max-w-narrow{position:relative;z-index:1}

/* ── Animations ── */
@keyframes energyField{
  0%{background-position:0% 50%}
  33%{background-position:100% 25%}
  66%{background-position:30% 80%}
  100%{background-position:0% 50%}
}
@keyframes heroGlow{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.15)}
}
@keyframes cardFloat{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Cards ── */
.card{
  background:var(--paper-elevated);
  border:1px solid var(--line);
  border-radius:12px;
  transition:all .35s cubic-bezier(.25,.46,.45,.94);
  position:relative;z-index:1;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--blue-200);
  box-shadow:0 0 60px rgba(26,109,224,.08),0 8px 24px rgba(0,0,0,.06);
}

/* ── Cursor Glow ── */
.cursor-glow{
  position:fixed;pointer-events:none;z-index:9999;
  width:320px;height:320px;
  background:radial-gradient(circle,rgba(26,109,224,.12) 0%,rgba(26,109,224,.04) 35%,transparent 60%);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:opacity .3s;
}