@charset "utf-8";

/* RENA brand palette — space-separated RGB channels for Tailwind + rgba() in this file
   Snapshots: site.backup.css (latest sync) · site.css.backup-20260503 (point-in-time)
   To roll back main stylesheet only: replace site.css with one of the backups above. */
: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);
}

/* Homepage limited-time offer panel */
.promo-offer-panel {
  position: relative;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 1) 0%, rgb(250 252 251 / 1) 45%, rgb(255 250 248 / 1) 100%);
  box-shadow:
    0 28px 64px -24px rgb(26 48 38 / 0.2),
    0 0 0 1px rgb(26 48 38 / 0.06),
    inset 0 1px 0 rgb(255 255 255 / 0.9);
}
.promo-offer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgb(229 83 61 / 0.18),
    inset 0 0 0 2px rgb(255 255 255 / 0.5);
  pointer-events: none;
}
.promo-offer-shine {
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgb(255 255 255 / 0) 42%,
    rgb(255 255 255 / 0.12) 48%,
    rgb(255 255 255 / 0) 54%,
    transparent 100%
  );
  animation: promo-shine 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes promo-shine {
  0%,
  100% {
    transform: translateX(-20%) rotate(12deg);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  50% {
    transform: translateX(25%) rotate(12deg);
    opacity: 0.6;
  }
  70% {
    opacity: 0;
  }
}
/* Offer graphic: static for a calmer, corporate feel */
.promo-offer-visual svg {
  display: block;
}
.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;
  }
  .mobile-nav-panel,
  .mobile-nav-backdrop {
    transition: none !important;
  }
}

/* Hero offer countdown (homepage) */
.hero-offer-countdown[data-offer-expired="1"] .grid {
  opacity: 0.55;
}

/* Mobile navigation — scroll lock lives in site.js (iOS-safe). */

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgb(0 0 0 / 0.52);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Cover dynamic toolbars on mobile Safari */
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.28s;
}
.mobile-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-panel {
  position: fixed;
  top: 4rem;
  right: 0;
  bottom: 0;
  z-index: 100;
  /* 100% of viewport width avoids sub-pixel overflow from 100vw + scrollbar quirks on phones */
  width: min(22rem, 100%);
  max-width: 100%;
  border-left: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: -12px 0 40px -12px rgb(0 0 0 / 0.45);
  transform: translate3d(100%, 0, 0);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Off-canvas drawer must not intercept taps meant for the header (iOS hit-testing quirks) */
  pointer-events: none;
}
.mobile-nav-panel.is-open {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.mobile-nav-panel-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 1rem 0 calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

.mobile-nav-panel-eyebrow {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0 1rem 0.75rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.45);
}

#mobile-nav-panel .mobile-nav-link {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.88);
  text-decoration: none;
  outline: none;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
#mobile-nav-panel .mobile-nav-link:hover {
  background-color: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 1);
}
#mobile-nav-panel .mobile-nav-link:focus-visible {
  background-color: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 2px rgb(var(--color-rena) / 0.7);
}

.mobile-nav-group-label {
  margin: 1.25rem 1rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.4);
}

/* Trades list in mobile drawer: collapsed until the row is tapped (<details>) */
.mobile-nav-trades-details {
  border-top: 1px solid rgb(255 255 255 / 0.08);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.mobile-nav-trades-summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgb(255 255 255 / 0.12);
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.4);
  user-select: none;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.mobile-nav-trades-summary::-webkit-details-marker {
  display: none;
}
/* Do not hide ::marker — breaks <details> toggle on some iOS WebKit builds */
.mobile-nav-trades-details[open] .mobile-nav-trades-chevron {
  transform: rotate(180deg);
}
.mobile-nav-trades-summary:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(var(--color-rena) / 0.7);
}
.mobile-nav-group--accordion {
  margin: 0 0.75rem 0.75rem;
}

#mobile-nav-panel .mobile-nav-group {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0.75rem 0.5rem;
  border-radius: 0.75rem;
  background: rgb(0 0 0 / 0.22);
  padding: 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.08);
}

.mobile-nav-group a {
  display: block;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.82);
  text-decoration: none;
  border-radius: 0.5rem;
  outline: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.mobile-nav-group a:hover {
  background-color: rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 1);
}
.mobile-nav-group a:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(var(--color-rena) / 0.65);
}

.mobile-nav-group a.mobile-nav-trade-overview {
  font-weight: 600;
  color: rgb(var(--color-rena) / 1);
  margin-bottom: 0.25rem;
}
.mobile-nav-group a.mobile-nav-trade-overview:hover {
  color: rgb(255 255 255 / 1);
}

#mobile-nav-panel .mobile-nav-cta {
  display: block;
  align-self: stretch;
  box-sizing: border-box;
  margin: 1.25rem 1rem 0;
  padding: 0.875rem 1rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(255 255 255 / 1);
  text-decoration: none;
  border-radius: 0.75rem;
  background: rgb(var(--color-rena) / 1);
  box-shadow: 0 12px 32px -10px rgb(var(--color-rena) / 0.55);
  outline: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
#mobile-nav-panel .mobile-nav-cta:hover {
  background: rgb(var(--color-rena-dark) / 1);
}
#mobile-nav-panel .mobile-nav-cta:focus-visible {
  box-shadow:
    0 0 0 2px rgb(255 255 255 / 0.85),
    0 12px 32px -10px rgb(var(--color-rena) / 0.55);
}
#mobile-nav-panel .mobile-nav-cta:active {
  transform: scale(0.99);
}

.mobile-nav-toggle {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(255 255 255 / 0.12);
}

.mobile-nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 1.25rem;
  height: 1rem;
  flex-shrink: 0;
  pointer-events: none;
}
.mobile-nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  min-height: 2px;
  border-radius: 9999px;
  /* currentColor fails to paint on some mobile WebViews — use solid white */
  background-color: rgb(255 255 255 / 0.95);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
  transform-origin: center;
}
.mobile-nav-toggle.is-open .mobile-nav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle.is-open .mobile-nav-burger span:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle.is-open .mobile-nav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Header Trades mega menu: hover opens only on fine pointers; touch/tablet uses click (see site.js) */
@media (hover: hover) and (pointer: fine) {
  .nav-trades-root:hover > .nav-trades-panel {
    opacity: 1;
    pointer-events: auto;
  }
}
.nav-trades-root.nav-trades-open > .nav-trades-panel {
  opacity: 1;
  pointer-events: auto;
}