/* ====================================================
   GrSEn REDESIGN v3 — LIGHT CORPORATE (2026-05-17)
   Inverted palette: white bg + slate text + emerald/sky/gold accents.
   Spójny z siecse.pl korporacyjnym (siecse-corp) i panelem siecse.pl/portal.
   Wszystkie zmienne CSS te same — tylko wartości zmienione na light.
   Backup wersji ciemnej: /var/www/grojeckase-backups/ses-slomczyn-20260517_194320/
   ==================================================== */

@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700|space-grotesk:500,600,700,800|jetbrains-mono:400,500,700&display=swap');

:root {
  /* ----- Base — light corporate ----- */
  --bg:            #ffffff;          /* main page background */
  --bg-elev-1:     #f8fafc;          /* slate-50, subtle elevation */
  --bg-elev-2:     #f1f5f9;          /* slate-100, cards/sections */
  --bg-elev-3:     #e2e8f0;          /* slate-200, deeper containers */

  --emerald:        #10B981;
  --emerald-dark:   #047857;         /* lekko ciemniejszy dla czytelności na białym */
  --emerald-light:  #34d399;
  --emerald-bright: #6EE7B7;
  --emerald-glow:   rgba(16, 185, 129, 0.22);
  --emerald-halo:   rgba(16, 185, 129, 0.10);

  /* Light glass — biały glassmorphism */
  --glass-bg:       rgba(255, 255, 255, 0.92);
  --glass-bg-soft:  rgba(255, 255, 255, 0.65);
  --glass-border:   rgba(15, 23, 42, 0.08);     /* subtelny ciemny border na białym */
  --glass-border-emerald: rgba(16, 185, 129, 0.25);

  /* Tekst — slate ciemny na białym (inverted) */
  --text-primary:   #0f172a;         /* slate-900, body text */
  --text-secondary: #475569;         /* slate-600, meta/secondary */
  --text-muted:     #94a3b8;         /* slate-400, captions */
  --heading:        #020617;         /* deepest navy dla emfazy nagłówków */
  --white:          #ffffff;

  /* ----- NEW · Photovoltaic + Green Deal accents ----- */
  --solar-gold:     #F59E0B;   /* main sun / panel reflection */
  --solar-light:    #FCD34D;   /* sunrise, max-energy moment */
  --solar-dark:     #B45309;   /* amber-700, czytelny tekst na białym */
  --solar-glow:     rgba(245, 158, 11, 0.45);

  --sky-blue:       #0EA5E9;   /* clean sky, atmospheric clarity */
  --sky-light:      #38BDF8;   /* distance, transparency */
  --sky-glow:       rgba(14, 165, 233, 0.35);

  --sage:           #84CC16;   /* organic green, growth, leaves */
  --sage-glow:      rgba(132, 204, 22, 0.30);

  --earth-dark:     #064E3B;   /* deep field / soil, hero gradient anchor */

  /* ----- THE SUNRISE GRADIENT (hero + section transitions) ----- */
  /* night → earth → grass → sky → sun */
  --gradient-sunrise:
    linear-gradient(180deg,
      #020617 0%,
      #064E3B 30%,
      #10B981 55%,
      #38BDF8 80%,
      #F59E0B 100%);

  /* Soft horizontal twin for CTAs / dividers */
  --gradient-sunrise-h:
    linear-gradient(90deg, #064E3B 0%, #10B981 35%, #38BDF8 70%, #F59E0B 100%);

  /* Solar disc radial — for parallax sun */
  --gradient-sun-disc:
    radial-gradient(circle at center, #FCD34D 0%, #F59E0B 35%, rgba(245,158,11,0.25) 65%, transparent 80%);

  /* ----- TYPOGRAPHY upgrade ----- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;   /* geometric tech feel — H1, big numbers */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;  /* LCD meters */

  --tracking-display: -0.05em;   /* tighter on big display */
  --tracking-mono:     0.02em;   /* monospace counter feel */

  /* ----- MOTION ----- */
  --ease-out:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:      200ms var(--ease-out);
  --transition-slow: 350ms var(--ease-out);

  --radius-sm: 6px;  --radius: 12px;  --radius-lg: 20px;  --radius-xl: 28px;
  --container: 1100px;  --container-wide: 1280px;

  --shadow-card:       0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-card-hover: 0 12px 32px rgba(15, 23, 42, 0.10), 0 0 0 1px var(--glass-border-emerald), 0 0 40px var(--emerald-halo);
  --text-glow:         0 0 12px var(--emerald-halo);
  --text-glow-solar:   0 0 14px rgba(245, 158, 11, 0.18);
}

/* ====================================================
   Reset + base
   ==================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: 'cv11','ss01';
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
}

/* Grain overlay — subtelny na białym */
body::before {
  content:''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

h1,h2,h3 { font-family: var(--font-display); color: var(--heading); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.05; margin: 0 0 1rem; }
p { margin: 0 0 1rem; color: var(--text-primary); }
a { color: var(--emerald-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--emerald); }

::selection { background: var(--emerald); color: var(--white); }
button { font-family: inherit; cursor: pointer; }

/* ====================================================
   Helpers
   ==================================================== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.container--wide { max-width: var(--container-wide); }

.eyebrow {
  display: inline-block; padding: 0.4rem 0.95rem;
  background: rgba(16,185,129,0.08); color: var(--emerald-dark);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(16,185,129,0.20);
  font-family: var(--font-sans);
}
.eyebrow--solar {
  background: rgba(245,158,11,0.08); color: #B45309;
  border-color: rgba(245,158,11,0.25);
}

/* Primary CTA (kept identical, will reuse) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.75rem; font-family: var(--font-sans); font-weight: 600;
  font-size: 0.975rem; line-height: 1; letter-spacing: -0.01em;
  text-decoration: none; border-radius: var(--radius); border: 1px solid transparent;
  transition: all var(--transition); white-space: nowrap; position: relative; overflow: hidden;
}
.btn--primary {
  background: linear-gradient(135deg, var(--emerald-light) 0%, var(--emerald) 50%, var(--emerald-dark) 100%);
  color: var(--white); border-color: rgba(255,255,255,0.18);
  box-shadow: 0 4px 14px rgba(16,185,129,0.45), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.15);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(16,185,129,0.55), 0 0 40px rgba(52,211,153,0.30), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn--ghost { background: var(--glass-bg-soft); color: var(--text-primary); border-color: var(--glass-border); backdrop-filter: blur(8px); }
.btn--ghost:hover { background: var(--white); border-color: var(--glass-border-emerald); color: var(--emerald-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.08); }