@charset "utf-8";

/* RENA brand palette — space-separated RGB channels for Tailwind + rgba() in this file
   Backup copy: site.backup.css (same contents; swap href only if you need to roll back) */
:root {
  --color-rena: 229 83 61;
  --color-rena-dark: 201 68 49;
  --color-forest: 26 48 38;
  --color-forest-deep: 18 31 26;
  --color-forest-mid: 19 37 29;
  --color-forest-tint-a: 26 50 40;
  --color-forest-tint-b: 22 48 36;
  --color-forest-tint-c: 15 26 22;
  --color-forest-card: 36 61 50;
  --color-charcoal: 51 51 51;
  --color-mist: 245 245 245;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
}
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
}
.hero-bg {
  background-color: rgb(var(--color-forest) / 1);
  background-image:
    radial-gradient(ellipse 120% 80% at 20% -20%, rgb(var(--color-rena) / 0.22), transparent 55%),
    radial-gradient(ellipse 90% 60% at 100% 0%, rgb(255 255 255 / 0.06), transparent 45%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgb(0 0 0 / 0.35), transparent 50%);
}
.hero-bg-soft {
  background-color: rgb(var(--color-forest) / 1);
  background-image:
    radial-gradient(ellipse 100% 80% at 100% 0%, rgb(var(--color-rena) / 0.14), transparent 50%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgb(255 255 255 / 0.04), transparent 45%);
}

.hero-coral-slab {
  background: linear-gradient(
    145deg,
    rgb(var(--color-rena) / 1) 0%,
    rgb(var(--color-rena-dark) / 1) 52%,
    rgb(var(--color-rena) / 1) 100%
  );
  box-shadow: 0 24px 60px -16px rgb(var(--color-rena) / 0.45), 0 0 0 1px rgb(255 255 255 / 0.06) inset;
}
.ease-spring {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-active {
  color: rgb(255 255 255 / 0.98);
  font-weight: 600;
  text-shadow: 0 0 28px rgb(var(--color-rena) / 0.38);
}

/* Orange primary CTAs (Tailwind bg-rena): top sheen + warm specular + bottom depth */
a.bg-rena,
button.bg-rena {
  background-image: linear-gradient(
    172deg,
    rgb(255 255 255 / 0.45) 0%,
    rgb(255 255 255 / 0.2) 14%,
    rgb(255 220 200 / 0.22) 26%,
    rgb(255 255 255 / 0) 42%,
    transparent 48%,
    rgb(0 0 0 / 0.12) 72%,
    rgb(0 0 0 / 0.24) 100%
  );
}

/* Inspiration-aligned: fine mesh on deep forest */
.bg-mesh-forest {
  background-color: rgb(var(--color-forest) / 1);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px),
    radial-gradient(ellipse 100% 70% at 50% -10%, rgb(var(--color-rena) / 0.12), transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 100%, rgb(0 0 0 / 0.25), transparent 50%);
  background-size: 56px 56px, 56px 56px, auto, auto;
}

/* Sticky header: deep forest → warm orange diagonal, plus coral / orange glows */
.header-surface {
  background-color: rgb(var(--color-forest-deep) / 1);
  background-image:
    radial-gradient(ellipse 105% 95% at 92% -28%, rgb(var(--color-rena) / 0.44), transparent 54%),
    radial-gradient(ellipse 85% 75% at -8% 102%, rgb(255 132 72 / 0.26), transparent 50%),
    radial-gradient(ellipse 68% 50% at 50% 118%, rgb(0 0 0 / 0.38), transparent 56%),
    linear-gradient(
      128deg,
      rgb(7 18 14) 0%,
      rgb(12 30 24) 24%,
      rgb(18 44 34) 52%,
      rgb(26 52 40) 72%,
      rgb(52 36 26) 88%,
      rgb(120 52 34) 96%,
      rgb(229 83 61 / 0.55) 100%
    );
}

/* Brand promise (homepage): full-bleed forest → deep green, coral atmosphere */
.brand-promise-section {
  background-color: rgb(10 20 16);
  background-image: linear-gradient(
    to bottom right,
    rgb(var(--color-forest) / 1) 0%,
    rgb(21 42 34) 48%,
    rgb(10 20 16) 100%
  );
}

/* Homepage stats strip: soft lift from flat black, whisper of warmth */
.stats-band-surface {
  background-color: rgb(2 2 3);
  background-image:
    radial-gradient(ellipse 85% 50% at 50% -35%, rgb(255 255 255 / 0.045), transparent 58%),
    radial-gradient(ellipse 65% 40% at 100% 100%, rgb(var(--color-rena) / 0.055), transparent 52%),
    linear-gradient(168deg, rgb(7 8 10) 0%, rgb(3 3 4) 42%, rgb(2 2 3) 68%, rgb(10 9 10) 100%);
}

/* Wide CTA bands (e.g. homepage closing): forest-first, barely-there coral */
.cta-band-surface {
  background-color: rgb(var(--color-forest-deep) / 1);
  background-image:
    radial-gradient(ellipse 95% 75% at 88% -18%, rgb(var(--color-rena) / 0.09), transparent 58%),
    radial-gradient(ellipse 80% 65% at -5% 102%, rgb(var(--color-rena) / 0.05), transparent 52%),
    radial-gradient(ellipse 65% 42% at 50% 108%, rgb(0 0 0 / 0.2), transparent 56%),
    linear-gradient(
      168deg,
      rgb(var(--color-forest-tint-c) / 1) 0%,
      rgb(var(--color-forest-mid) / 1) 38%,
      rgb(var(--color-forest-tint-b) / 1) 72%,
      rgb(var(--color-forest-tint-a) / 1) 100%
    );
}

/* Site footer: black base + orange / coral gradient */
.footer-surface {
  background-color: rgb(0 0 0);
  background-image:
    radial-gradient(ellipse 100% 80% at 90% 8%, rgb(var(--color-rena) / 0.32), transparent 58%),
    radial-gradient(ellipse 85% 70% at -5% 95%, rgb(255 132 72 / 0.2), transparent 52%),
    radial-gradient(ellipse 60% 45% at 50% 110%, rgb(0 0 0 / 0.55), transparent 55%),
    linear-gradient(
      168deg,
      rgb(2 2 2) 0%,
      rgb(0 0 0) 28%,
      rgb(10 8 7) 55%,
      rgb(28 16 12) 78%,
      rgb(72 32 24) 90%,
      rgb(var(--color-rena-dark) / 0.82) 97%,
      rgb(var(--color-rena) / 0.45) 100%
    );
}

/* Footer wordmark: plain home link, slight hover / focus only */
.footer-logo-shell {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 0.375rem;
  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-logo-shell:hover {
  opacity: 0.88;
}

.footer-logo-shell:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.45);
  outline-offset: 2px;
}

.footer-logo-shell:active {
  opacity: 0.8;
}

.card-feature-dark {
  background: linear-gradient(
    155deg,
    rgb(var(--color-forest-card) / 1) 0%,
    rgb(var(--color-forest) / 1) 45%,
    rgb(var(--color-forest-deep) / 1) 100%
  );
  box-shadow: 0 20px 50px -12px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.06) inset;
}

.cta-command-bar {
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 24px 48px -20px rgba(0, 0, 0, 0.5);
}

.timeline-rail {
  background: linear-gradient(180deg, rgb(var(--color-rena) / 0.5), rgb(255 255 255 / 0.15));
}

/* Scroll reveal — only opacity + transform */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 {
  transition-delay: 0.06s;
}
.reveal-delay-2 {
  transition-delay: 0.12s;
}
.reveal-delay-3 {
  transition-delay: 0.18s;
}
.reveal-delay-4 {
  transition-delay: 0.24s;
}

/* Ambient motion — transform only */
@keyframes float-soft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.04);
  }
}
.animate-float-slow {
  animation: float-soft 6s ease-in-out infinite;
}
.animate-orb {
  animation: pulse-glow 8s ease-in-out infinite;
}

/* FAQ accordion caret */
.faq-details summary {
  list-style: none;
}
.faq-details summary::-webkit-details-marker {
  display: none;
}
.faq-details summary .faq-icon {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-details[open] summary .faq-icon {
  transform: rotate(45deg);
}

/* Staggered hero entrance */
@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-stagger > * {
  animation: hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-stagger > *:nth-child(1) {
  animation-delay: 0.05s;
}
.hero-stagger > *:nth-child(2) {
  animation-delay: 0.14s;
}
.hero-stagger > *:nth-child(3) {
  animation-delay: 0.22s;
}
.hero-stagger > *:nth-child(4) {
  animation-delay: 0.3s;
}
.hero-stagger > *:nth-child(5) {
  animation-delay: 0.38s;
}

@media (prefers-reduced-motion: reduce) {
  .animate-float-slow,
  .animate-orb {
    animation: none !important;
  }
  .hero-stagger > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}