/* =========================================================
   REPOWER NY — MASTER STYLESHEET (FOUNDATION)
   Clean, stable, scalable base
========================================================= */


/* =========================================================
   1. DESIGN TOKENS / BRAND SYSTEM
========================================================= */

:root {
  /* Blues */
  --blue-deep: #1E4FA3;
  --blue-mid: #2F7FD3;
  --blue-light: #5CB6E6;
  --blue-sky: #87CEEB;

  /* Accent */
  --green-accent: #4CAF50;
  --green-deep: #3A8E3E;

  /* Neutrals */
  --white: #ffffff;
  --gray-light: #f5f7fa;
  --gray-mid: #dbe3ec;
  --gray-dark: #2c3e50;

  /* Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-xl: 16px;

  /* Layout */
  --max-width: 1200px;
  --section-padding: 80px;
}


/* =========================================================
   2. GLOBAL RESET / BASE
========================================================= */

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

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-y: auto;


  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--gray-dark);

background: linear-gradient(
  to bottom,
  var(--blue-mid),
  var(--blue-deep) 60%,
  #0f2f6e
);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* =========================================================
   3. BACKGROUND LAYERS
========================================================= */

#canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#canvas {
  pointer-events: none;
}

.solar-svg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;

  z-index: 1;
  pointer-events: none;

  opacity: 0.45;
  mix-blend-mode: overlay;
}

.solar-overlay {
  display: none;
}

.content {
  position: relative;
  z-index: 2;

}



/* =========================================================
   4. TYPOGRAPHY
========================================================= */

h1,
h2,
h3 {
  margin: 0 0 16px;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--white);
}

h2 {
  font-size: clamp(1.8rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--white);
}

h3 {
  font-size: 1.3rem;
  font-weight: 600;
}

h4 {
  font-size: 1.3rem;
  font-weight: 600;

  color: var(--blue-deep); /* 🔥 dark blue */
}



p {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}



/* ---------- Section Typography ---------- */

.section-title {
  margin-bottom: 24px;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--blue-deep);
}

.section-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 12px;
  border-radius: 2px;

  background: var(--green-accent);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);

  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.6s ease;
}

.section-subtitle {
  margin-bottom: 18px;
  font-size: 1.1rem;
  color: var(--blue-mid);
}


/* =========================================================
   5. LAYOUT HELPERS
========================================================= */

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

.section {
  padding: var(--section-padding) 0;
}


/* =========================================================
   6. HERO
========================================================= */

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80vh;
}


/* =========================================================
   BRAND TITLE (CLEAN RESET)
========================================================= */

.brand-title {
  font-size: 1.8rem;
  font-weight: 700;

  line-height: 1;
  margin: 0;
  letter-spacing: -0.3px;

  /* GRADIENT TEXT */
  background: linear-gradient(
    90deg,
    var(--green-accent) 0%,     /* Re */
    var(--blue-light) 45%,      /* Power */
    var(--blue-deep) 100%       /* NY */
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* KEEP YOUR STROKE */
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.85);

  /* subtle polish */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.15),
    0 0 6px rgba(255,255,255,0.25);
}

/* =========================================================
   8. BRAND ICON
========================================================= */

.brand-icon {
  margin-right: 10px;
  font-size: 3rem;
  vertical-align: middle;

  background: linear-gradient(
    135deg,
    var(--blue-light),
    var(--green-accent)
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 12px rgba(255,255,255,0.4),
    0 0 30px rgba(255,255,255,0.2),
    0 6px 20px rgba(0,0,0,0.3);

  transition: transform 0.3s ease, filter 0.3s ease;
}

.brand-icon:hover {
  transform: scale(1.1) rotate(6deg);
  filter: brightness(1.2);
}


/* subtle pulse animation (optional hook) */
@keyframes chargePulse {
  0%   { filter: brightness(1.1); }
  50%  { filter: brightness(1.35); }
  100% { filter: brightness(1.1); }
}