/*
  Greenpacks landing styles
  - Adds a subtle overlay for text readability on bright images
  - Applies to `.hero` by default and to any element with `.has-overlay`
  - Strength can be tuned via the CSS variable `--overlay-strength`
*/

/* Base resets and typography */
:root {
  --overlay-strength: 0.28; /* default overlay opacity (0 to 1) */
  --overlay-color: 0, 0, 0; /* RGB string used in rgba(var(--overlay-color), a) */
  --bg-blur: 3px;          /* background blur amount for hero */
  --container-max: 1100px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  color: #0b1a13;
  background: #ffffff;
  height: 100%;
  overflow: hidden; /* lock scrolling */
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
/* Hide header on landing to match screenshot */
.site-header { display: none; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo { height: 28px; width: auto; display: block; }
.brand-name { font-weight: 700; letter-spacing: 0.2px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s ease;
}

.btn-primary {
  background: #0a7b55;
  color: #fff;
  box-shadow: 0 6px 14px rgba(10, 123, 85, 0.25);
}

.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(10, 123, 85, 0.3); }
.btn-lg { padding: 14px 22px; font-size: 1.05rem; border-radius: 12px; }

/* Main */
.main { display: block; height: 100%; }

/*
  Overlay utility
  Usage:
    - Add class `.has-overlay` to any element with a background image or color
    - Or rely on `.hero` which includes the overlay by default
    - Adjust intensity per-section: `.hero { --overlay-strength: 0.22; }`
*/
.has-overlay,
.hero {
  position: relative; /* ensure containing block for ::before */
  color: #ffffff;     /* assume light-on-dark when overlay is present */
}

.has-overlay > *,
.hero > * {
  position: relative; /* keep content above the overlay */
  z-index: 1;
}

.has-overlay::before,
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--overlay-color), var(--overlay-strength));
  -webkit-backdrop-filter: blur(var(--bg-blur));
  backdrop-filter: blur(var(--bg-blur));
  pointer-events: none;
  z-index: 0;
}

/* Optional: gentle gradient variant for very bright images */
.has-overlay.gradient::before,
.hero.gradient::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--overlay-color), calc(var(--overlay-strength) * 0.6)) 0%,
    rgba(var(--overlay-color), var(--overlay-strength)) 65%,
    rgba(var(--overlay-color), calc(var(--overlay-strength) * 0.9)) 100%
  );
}

/* Hero layout (non-destructive; does not set a background image) */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center; /* center horizontally and vertically */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0; /* exact full-viewport look */
}

/* Subtle vignette around the edges for added depth */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,0.28), transparent 40%),
              radial-gradient(120% 80% at 0% 100%, rgba(0,0,0,0.30), transparent 35%),
              radial-gradient(120% 80% at 100% 100%, rgba(0,0,0,0.30), transparent 35%);
}

.hero h1 {
  margin: 0 0 8px 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.05;
}

.hero .subtitle {
  margin: 0 0 20px 0;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  opacity: 0.95;
}

/* Glassy centered card (matches the screenshot's style) */
.hero-card {
  width: min(640px, 92%);
  margin: 0 auto;
  padding: 44px 48px 40px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(22, 36, 58, 0.92), rgba(25, 41, 67, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow:
    0 40px 80px rgba(5, 10, 20, 0.55),
    0 12px 28px rgba(5, 10, 20, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(10px) saturate(120%);
}

.hero-logo {
  width: 260px;        /* bigger logo */
  max-width: 90%;      /* responsive cap */
  height: auto;
  display: block;      /* enable margin auto centering */
  margin: 0 auto 24px; /* centered with a bit more spacing */
}

.version {
  margin: 14px 0 0 0;
  color: rgba(255,255,255,0.8);
}

/* Button refinement inside card for a subtle elevated look */
/* Button: dark pill with inner highlight and subtle border like screenshot */
.hero-card .btn-primary {
  background: #2c3f57;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 10px 22px rgba(10, 20, 30, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.hero-card .btn-primary:hover {
  background: #2a3a50;
  transform: translateY(-1px);
}

/* Footer */
.site-footer {
  padding: 28px 0;
  color: rgba(0,0,0,0.7);
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}

  .footer-inner { display: flex; align-items: center; justify-content: center; }