/* ============================================================
   POWERSENSE — Main Stylesheet
   Author: Arav Patel
   
   TABLE OF CONTENTS:
   1. Variables & Reset
   2. Base Styles
   3. Navigation
   4. Hero Section
   5. Stats Bar
   6. How It Works
   7. Results Preview
   8. Why It Matters
   9. Call to Action
   10. Footer
   11. Reusable Components
   12. Mobile Responsive
============================================================ */


/* ============================================================
   1. VARIABLES & RESET
============================================================ */
:root {
  /* Colors */
  --bg:         #f7f8fa;
  --bg-white:   #ffffff;
  --bg-light:   #eef1f5;
  --navy:       #0f1f3d;
  --blue:       #1a56db;
  --blue-light: #e8effe;
  --blue-border:#c7d7f9;
  --blue-pale:  #93c5fd;
  --text:       #0f1f3d;
  --text-mid:   #4b5c78;
  --text-dim:   #8896ab;
  --border:     #dde3ed;
  --red:        #dc2626;
  --amber:      #d97706;
  --green:      #16a34a;

  /* Typography */
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Spacing */
  --section-pad: 88px 0;
  --container-width: 1200px;
}

/* Reset — removes default browser spacing */
html {
  scroll-behavior: smooth;
}

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

/* ============================================================
   2. BASE STYLES
============================================================ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; }

ul { list-style: none; }

/* ============================================================
   3. NAVIGATION
============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 56px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon { width: 34px; height: 34px; }

.logo-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--navy);
  letter-spacing: -0.02em;
}

.logo-accent { color: var(--blue); }

/* Nav links */
.nav-links {
  display: flex;
  gap: 36px;
}

.nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-mid);
  transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active { color: var(--blue); }

/* Nav CTA button */
.btn-nav {
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--blue);
  color: #fff;
  padding: 10px 22px;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-nav:hover {
  background: var(--navy);
  transform: translateY(-1px);
}

/* ============================================================
   4. HERO SECTION
============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 130px 56px 90px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
}

/* Badge above headline */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--blue);
  background: var(--blue-light);
  border: 1px solid var(--blue-border);
  padding: 5px 12px;
  margin-bottom: 28px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}

/* Animated dot in badge */
.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Main headline */
.hero-title {
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin-bottom: 20px;
}

.text-blue { color: var(--blue); }

/* Subheadline */
.hero-sub {
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 40px;
  font-weight: 400;
}

/* Button row */
.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Sample results card on hero right side */
.hero-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 4px 24px rgba(15, 31, 61, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.card-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
}

/* Warning badge */
.badge-warning {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--amber);
  background: #fff8ed;
  border: 1px solid #fcd47c;
  padding: 3px 10px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}

/* Energy waste bar rows */
.waste-bars {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 22px;
}

.waste-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.waste-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-mid);
  width: 95px;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  height: 7px;
  background: var(--bg-light);
  border-radius: 99px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 99px;
}

/* Bar fill colors */
.bar-fill.red   { background: var(--red); }
.bar-fill.amber { background: var(--amber); }
.bar-fill.blue  { background: var(--blue); }
.bar-fill.green { background: var(--green); }

.waste-pct {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* Percentage text colors */
.waste-pct.red   { color: var(--red); }
.waste-pct.amber { color: var(--amber); }
.waste-pct.blue  { color: var(--blue); }
.waste-pct.green { color: var(--green); }

/* Bottom stats row on card */
.card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.mini-stat {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
}

.mini-val {
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 3px;
}

/* Mini value colors */
.mini-val.red   { color: var(--red); }
.mini-val.amber { color: var(--amber); }
.mini-val.green { color: var(--green); }

.mini-lbl {
  font-size: 0.65rem;
  color: var(--text-dim);
}

/* ============================================================
   5. STATS BAR
============================================================ */
.stats-bar {
  display: flex;
  background: var(--navy);
  overflow-x: auto;
}

.stat-item {
  flex: 1;
  padding: 28px 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 160px;
}

.stat-number {
  font-weight: 700;
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

/* ============================================================
   6. HOW IT WORKS
============================================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}

/* Blue line that slides in on hover */
.step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.step-card:hover::before { transform: scaleX(1); }

.step-card:hover {
  box-shadow: 0 8px 32px rgba(15, 31, 61, 0.08);
  transform: translateY(-2px);
}

.step-number {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--blue);
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.step-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  display: block;
}

.step-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 10px;
}

.step-desc {
  font-size: 0.85rem;
  color: var(--text-mid);
  line-height: 1.75;
}

/* ============================================================
   7. RESULTS PREVIEW
============================================================ */
.preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.preview-desc {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 28px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
  padding: 0;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-mid);
  line-height: 1.6;
  list-style: none;
}

/* Blue dot before each feature */
.feature-item::before {
  content: '';
  width: 6px;
  height: 6px;
  min-width: 6px;
  background: var(--blue);
  border-radius: 50%;
  margin-top: 6px;
}

/* ============================================================
   8. WHY IT MATTERS
============================================================ */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.impact-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 40px 36px;
  transition: all 0.2s;
}

/* Blue tinted version */
.impact-card.highlight {
  background: var(--blue-light);
  border-color: var(--blue-border);
}

.impact-card:hover {
  box-shadow: 0 6px 24px rgba(15, 31, 61, 0.07);
  transform: translateY(-2px);
}

.impact-number {
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  line-height: 1;
}

/* Impact number colors */
.impact-number.blue  { color: var(--blue); }
.impact-number.amber { color: var(--amber); }
.impact-number.red   { color: var(--red); }
.impact-number.green { color: var(--green); }

.impact-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 10px;
}

.impact-desc {
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.75;
}

/* ============================================================
   9. CALL TO ACTION
============================================================ */
.cta-section {
  background: var(--navy);
  padding: 96px 56px;
  text-align: center;
}

.cta-title {
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.1;
}

.text-blue-light { color: var(--blue-pale); }

.cta-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 40px;
}

/* ============================================================
   10. FOOTER
============================================================ */
.footer {
  background: var(--bg-white);
  border-top: 1px solid var(--border);
  padding: 36px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.footer-links {
  display: flex;
  gap: 28px;
}

.footer-link {
  font-size: 0.78rem;
  color: var(--text-dim);
  transition: color 0.2s;
}

.footer-link:hover { color: var(--blue); }

/* ============================================================
   11. REUSABLE COMPONENTS
============================================================ */

/* Section wrapper */
.section {
  padding: var(--section-pad);
}

.section.bg-white { background: var(--bg-white); }

/* Max width container centered on page */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 56px;
}

.text-center { text-align: center; }

/* Small label above section titles */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

/* Section headline */
.section-title {
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 56px;
  max-width: 540px;
  line-height: 1.15;
}

/* Primary blue button */
.btn-primary {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--blue);
  color: #fff;
  padding: 14px 32px;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 86, 219, 0.25);
}

/* Outlined secondary button */
.btn-secondary {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-mid);
  border: 1px solid var(--border);
  padding: 14px 32px;
  border-radius: 4px;
  background: transparent;
  transition: all 0.2s;
}

.btn-secondary:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--blue-light);
}

/* White button (used on dark backgrounds) */
.btn-white {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  background: #fff;
  color: var(--navy);
  padding: 16px 40px;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-white:hover {
  background: var(--blue-pale);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   12. MOBILE RESPONSIVE
   Adjusts layout for smaller screens
============================================================ */
@media (max-width: 900px) {

  .navbar {
    padding: 16px 20px;
  }

  .nav-links { display: none; }

  .hero {
    grid-template-columns: 1fr;
    padding: 100px 20px 60px;
    gap: 40px;
  }

  .stats-bar { flex-wrap: wrap; }

  .stat-item { min-width: 140px; }

  .section { padding: 60px 0; }

  .container { padding: 0 20px; }

  .steps-grid { grid-template-columns: 1fr; }

  .preview-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .impact-grid { grid-template-columns: 1fr; }

  .cta-section { padding: 60px 20px; }

  .footer {
    padding: 24px 20px;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}