/* ═══════════════════════════════════════════════════════════
   NEVILLE SION — SELECTED ASSETS  ·  styles.css
   NS Navy base · Gold accents · Safari-safe hover system
═══════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════════════════ */
:root {
  /* ── Page backgrounds ── */
  --bg:         #020230;   /* NS navy, slightly deeper than #0303F6 */
  --bg-2:       #03033a;   /* default card bg — deep NS navy */
  --bg-3:       #040450;   /* card hover bg (variant A) */
  --bg-page:    #020230;   /* page-level bg (used in transparent hover) */

  /* ── Card background variants (switch via .card-bg-* class) ── */
  --card-bg-navy:    #03033a;   /* default — NS deep navy */
  --card-bg-slate:   #1a1f2e;   /* warm dark slate */
  --card-bg-midnight:#0d0d1a;   /* near-black midnight */

  /* ── Gold ── */
  --gold:       #d4aa55;
  --gold-light: #eac97a;
  --gold-pale:  #f8eecc;
  --gold-dim:   #9a7530;

  /* ── Teal — Regeneris ── */
  --teal:       #3de0cb;
  --teal-dim:   #1a9488;

  /* ── Text ── */
  --text:       #f0ede4;
  --text-2:     #bdb5a0;
  --text-3:     #8a8070;

  /* ── Borders — all at 0.5px visual weight via opacity ── */
  --border:     rgba(212,170,85,0.30);
  --border-2:   rgba(212,170,85,0.15);
  --glow:       rgba(212,170,85,0.12);

  /* ── Regeneris ── */
  --regen-glow:  rgba(61,224,203,0.15);
  --regen-color: #3de0cb;

  /* ── Metrics ── */
  --metric-bg:  #020228;
  --metric-val: #f5d87a;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Barlow', sans-serif;
  --font-cond:    'Barlow Condensed', sans-serif;
}

/* ════════════════════════════════════════════════════════
   RESET
════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }
::selection { background: rgba(212,170,85,0.28); color: var(--text); }

/* ════════════════════════════════════════════════════════
   NAVBAR
════════════════════════════════════════════════════════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(2,2,48,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 0.5px solid var(--border);
  transition: background 0.4s;
}

#navbar.scrolled { background: rgba(2,2,48,0.97); }

.nav-inner {
  max-width: 1600px; margin: 0 auto;
  padding: 0 40px; height: 64px;
  display: flex; align-items: center; gap: 20px;
}

/* Logo image in navbar */
.nav-logo { display: flex; align-items: center; }

.nav-logo-img {
  height: 44px;
  width: auto;
  display: block;
  /* The logo PNG has a dark blue bg — blend to match navbar */
  border-radius: 4px;
}

/* Fallback text logo */
.logo-ns {
  width: 36px; height: 36px;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: var(--gold);
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-cond);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.nav-tagline {
  font-family: var(--font-cond);
  font-size: 9px; letter-spacing: 0.25em;
  color: var(--text-3); margin-left: 4px;
}

.nav-badge {
  margin-left: auto;
  font-family: var(--font-cond);
  font-size: 9px; letter-spacing: 0.25em;
  color: var(--gold-dim);
  border: 0.5px solid var(--gold-dim);
  padding: 3px 10px;
}

.nav-progress { height: 1px; background: var(--border-2); }

.nav-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-light));
  transition: width 0.1s linear;
}

/* ════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 120px 40px 80px;
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; }

.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,170,85,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,170,85,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%);
}

.hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; }

.orb-1 {
  width: 600px; height: 600px; top: -200px; left: -100px;
  background: radial-gradient(circle, rgba(212,170,85,0.35), transparent 70%);
  animation: orb-drift 20s ease-in-out infinite;
}
.orb-2 {
  width: 400px; height: 400px; bottom: 0; right: -100px;
  background: radial-gradient(circle, rgba(61,224,203,0.2), transparent 70%);
  animation: orb-drift 15s ease-in-out infinite reverse;
}
.orb-3 {
  width: 300px; height: 300px; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212,170,85,0.12), transparent 70%);
  animation: orb-pulse 8s ease-in-out infinite;
}

@keyframes orb-drift {
  0%, 100% { transform: translate(0,0); }
  33%       { transform: translate(40px,-30px); }
  66%       { transform: translate(-20px,20px); }
}
@keyframes orb-pulse {
  0%, 100% { opacity:0.3; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity:0.5; transform: translate(-50%,-50%) scale(1.15); }
}

.hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; }

.hero-eyebrow {
  font-family: var(--font-cond);
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 24px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(72px, 10vw, 140px);
  font-weight: 300; line-height: 0.9;
  color: var(--text); margin-bottom: 32px; letter-spacing: -0.01em;
}
.hero-title em { font-style: italic; color: var(--gold-light); }

.hero-subtitle {
  font-family: var(--font-cond);
  font-size: 13px; letter-spacing: 0.25em;
  color: var(--text-2); margin-bottom: 40px;
}

.hero-divider {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto 32px;
}

.hero-note { font-size: 14px; color: var(--text-2); line-height: 1.8; }
.hero-note strong { color: var(--gold); font-weight: 500; }

.regeneris-link {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-cond);
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--regen-color); text-decoration: none;
  border-bottom: 0.5px solid rgba(61,224,203,0.4);
  padding-bottom: 2px; transition: color 0.3s, border-color 0.3s;
}
.regeneris-link:hover { color: #fff; border-color: #fff; }

.hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 48px;
  font-family: var(--font-cond);
  font-size: 11px; letter-spacing: 0.25em;
  color: var(--gold); text-decoration: none;
  border: 0.5px solid var(--border);
  padding: 14px 28px; transition: all 0.3s;
  position: relative; overflow: hidden;
}
.hero-cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--glow); opacity: 0; transition: opacity 0.3s;
}
.hero-cta:hover { border-color: var(--gold); color: var(--gold-light); }
.hero-cta:hover::before { opacity: 1; }

.hero-stats {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 48px;
  margin-top: 80px; padding-top: 40px;
  border-top: 0.5px solid var(--border-2);
}

.stat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stat-n { font-family: var(--font-display); font-size: 36px; font-weight: 300; color: var(--gold-light); line-height: 1; }
.stat-l { font-family: var(--font-cond); font-size: 10px; letter-spacing: 0.25em; color: var(--text-3); }
.stat-sep { width: 0.5px; height: 40px; background: var(--border); }

/* ════════════════════════════════════════════════════════
   FILTER BAR
════════════════════════════════════════════════════════ */
.filter-bar {
  position: sticky; top: 64px; z-index: 90;
  background: rgba(2,2,48,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--border-2);
  padding: 0 40px;
}

.filter-inner {
  max-width: 1600px; margin: 0 auto;
  display: flex; align-items: center; gap: 4px;
  height: 52px; overflow-x: auto; scrollbar-width: none;
}
.filter-inner::-webkit-scrollbar { display: none; }

.filter-btn {
  background: none; border: none;
  padding: 8px 20px;
  font-family: var(--font-cond);
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--text-3);
  cursor: pointer; white-space: nowrap;
  transition: all 0.25s; position: relative; flex-shrink: 0;
}
.filter-btn::after {
  content: ''; position: absolute;
  bottom: 0; left: 20px; right: 20px;
  height: 0.5px; background: var(--gold);
  transform: scaleX(0); transition: transform 0.25s;
}
.filter-btn:hover { color: var(--text-2); }
.filter-btn.active { color: var(--gold); }
.filter-btn.active::after { transform: scaleX(1); }

.regeneris-filter        { color: var(--regen-color) !important; opacity: 0.75; }
.regeneris-filter:hover,
.regeneris-filter.active { opacity: 1 !important; color: var(--regen-color) !important; }
.regeneris-filter::after { background: var(--regen-color) !important; }

/* ════════════════════════════════════════════════════════
   ASSET GRID
════════════════════════════════════════════════════════ */
.asset-grid {
  max-width: 1600px; margin: 0 auto;
  padding: 60px 40px 100px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
  background: transparent;
}

/* ════════════════════════════════════════════════════════
   ASSET CARD — CORE

   HOVER SYSTEM — THREE VARIANTS (verified Safari-safe):
   Rule: every pseudo-element has ALL its properties in
   ONE block. Split ::before rules break Safari compositing.
   No border-color transition. No box-shadow. No border-radius
   combined with overflow:hidden.

   Variant A (default) — gold glow overlay, bg lightens
   Variant B — .card-hover-transparent — bg dissolves to page
   Variant C — .card-hover-outline — border flares, no bg change

   CARD BACKGROUND VARIANTS:
   Default              — deep NS navy  (#03033a)
   .card-bg-slate       — warm dark slate (#1a1f2e)
   .card-bg-midnight    — near-black (#0d0d1a)
════════════════════════════════════════════════════════ */

.asset-card {
  background: var(--card-bg-navy);
  padding: 36px 32px 44px;
  position: relative;
  overflow: hidden;
  /* 0.5px borders on all sides */
  border-top:    0.5px solid rgba(212,170,85,0.20);
  border-right:  0.5px solid rgba(212,170,85,0.20);
  border-bottom: 0.5px solid rgba(212,170,85,0.20);
  border-left:   0.5px solid var(--gold);
  /* background-only transition — the only property Safari mobile
     reliably animates on elements with overflow:hidden */
  transition: background 0.4s;
  cursor: default;
}

/* ── Category left-edge colour (0.5px) ── */
.asset-card[data-category="ibiza"]         { border-left-color: var(--gold); }
.asset-card[data-category="spain"]         { border-left-color: #d05c4a; }
.asset-card[data-category="france"]        { border-left-color: #5b82be; }
.asset-card[data-category="international"] { border-left-color: #9b7dd4; }

/* ── VARIANT A ::before — gold glow (DEFAULT) ──────────
   ONE complete block. background + opacity + transition
   all together — Safari requires this. ── */
.asset-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(212,170,85,0.11) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 0;
}

/* ── Top accent line ── */
.asset-card::after {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), transparent 70%);
  opacity: 0.45;
  transition: opacity 0.4s;
  pointer-events: none;
}

.asset-card.hidden { display: none; }
.card-wide { grid-column: span 2; }

/* ─────────────────────────────────────────
   HOVER VARIANT A — default
   bg lightens, gold glow fades in
───────────────────────────────────────── */
.asset-card:hover {
  background: var(--bg-3);
  z-index: 2;
}
.asset-card:hover::before { opacity: 1; }
.asset-card:hover::after  { opacity: 1; }

/* ─────────────────────────────────────────
   HOVER VARIANT B — transparent (dissolve)
   bg fades to the page background colour
   Add class  card-hover-transparent  to any card
───────────────────────────────────────── */
.asset-card.card-hover-transparent::before {
  background: linear-gradient(135deg, rgba(212,170,85,0.05) 0%, transparent 80%);
  opacity: 0;
  transition: opacity 0.4s;
}
.asset-card.card-hover-transparent:hover {
  background: var(--bg-page);
  z-index: 2;
}
.asset-card.card-hover-transparent:hover::before { opacity: 1; }
.asset-card.card-hover-transparent:hover::after  { opacity: 0.9; }

/* ─────────────────────────────────────────
   HOVER VARIANT C — outline pulse
   bg unchanged, top line intensifies
   Add class  card-hover-outline  to any card
───────────────────────────────────────── */
.asset-card.card-hover-outline::before {
  background: transparent;
  opacity: 0;
  transition: none;
}
.asset-card.card-hover-outline:hover {
  background: var(--card-bg-navy);
  z-index: 2;
}
.asset-card.card-hover-outline:hover::before { opacity: 0; }
.asset-card.card-hover-outline:hover::after  { opacity: 1; }

/* ─────────────────────────────────────────
   CARD BACKGROUND VARIANTS
   Apply to individual cards via class on article
───────────────────────────────────────── */
.card-bg-slate    { background: var(--card-bg-slate) !important; }
.card-bg-midnight { background: var(--card-bg-midnight) !important; }
.card-bg-slate    .metric { background: #121826; }
.card-bg-midnight .metric { background: #080810; }

/* ─────────────────────────────────────────
   REGENERIS CARD — teal overrides
   ONE ::before block (required for Safari)
───────────────────────────────────────── */
.regeneris-card {
  background: linear-gradient(160deg, var(--card-bg-navy) 78%, rgba(61,224,203,0.06) 100%);
  border-color: rgba(61,224,203,0.30);
  border-left-color: var(--regen-color);
}
/* Single complete ::before for regeneris — replaces the default one */
.regeneris-card::before {
  background: linear-gradient(135deg, rgba(61,224,203,0.09) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.regeneris-card::after {
  background: linear-gradient(90deg, var(--teal-dim), var(--regen-color), transparent 70%);
  opacity: 0.65;
  transition: opacity 0.4s;
}
.regeneris-card:hover {
  background: linear-gradient(160deg, var(--bg-3) 78%, rgba(61,224,203,0.10) 100%);
  z-index: 2;
}
.regeneris-card:hover::before { opacity: 1; }
.regeneris-card:hover::after  { opacity: 1; }

/* ── Card number — bottom-right ghost ── */
.card-num {
  position: absolute; bottom: 12px; right: 20px;
  font-family: var(--font-display);
  font-size: 50px; font-weight: 300;
  color: rgba(212,170,85,0.07);
  line-height: 1; pointer-events: none; user-select: none;
  transition: color 0.4s;
}
.asset-card:hover .card-num { color: rgba(212,170,85,0.18); }

/* ════════════════════════════════════════════════════════
   SAFARI MOBILE TOUCH-HOVER  (.is-touched)
   Mirrors every :hover rule for touch devices where CSS
   :hover does not fire on tap. Added/removed by animations.js
   via touchstart/touchend listeners.
════════════════════════════════════════════════════════ */

/* Variant A (default) */
.asset-card.is-touched          { background: var(--bg-3); z-index: 2; }
.asset-card.is-touched::before  { opacity: 1; }
.asset-card.is-touched::after   { opacity: 1; }
.asset-card.is-touched .card-num { color: rgba(212,170,85,0.18); }

/* Variant B — transparent */
.asset-card.card-hover-transparent.is-touched          { background: var(--bg-page); z-index: 2; }
.asset-card.card-hover-transparent.is-touched::before  { opacity: 1; }
.asset-card.card-hover-transparent.is-touched::after   { opacity: 0.9; }

/* Variant C — outline */
.asset-card.card-hover-outline.is-touched              { background: var(--card-bg-navy); z-index: 2; }
.asset-card.card-hover-outline.is-touched::before      { opacity: 0; }
.asset-card.card-hover-outline.is-touched::after       { opacity: 1; }

/* Regeneris touch */
.regeneris-card.is-touched {
  background: linear-gradient(160deg, var(--bg-3) 78%, rgba(61,224,203,0.10) 100%);
  z-index: 2;
}
.regeneris-card.is-touched::before { opacity: 1; }
.regeneris-card.is-touched::after  { opacity: 1; }

/* ════════════════════════════════════════════════════════
   CARD INTERNALS
════════════════════════════════════════════════════════ */

/* Regeneris badge */
.regeneris-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-cond);
  font-size: 9px; letter-spacing: 0.2em;
  color: var(--regen-color);
  border: 0.5px solid rgba(61,224,203,0.35);
  padding: 3px 10px; margin-bottom: 16px;
  animation: regen-pulse 3s ease-in-out infinite;
}
@keyframes regen-pulse {
  0%, 100% { border-color: rgba(61,224,203,0.35); }
  50%       { border-color: rgba(61,224,203,0.65); }
}

/* Card header */
.card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.card-flag   { font-size: 18px; line-height: 1; }
.card-location {
  font-family: var(--font-cond);
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--text-3); flex: 1;
}
.card-price {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  color: var(--gold-light); letter-spacing: -0.01em;
}

/* Title & sub */
.card-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 400;
  color: var(--text); line-height: 1.2; margin-bottom: 10px;
}
.card-sub {
  font-size: 12px; color: var(--text-2);
  line-height: 1.65; margin-bottom: 20px;
}

/* Tags */
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.tag {
  font-family: var(--font-cond);
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--text-3); border: 0.5px solid var(--border-2);
  padding: 3px 9px; text-transform: uppercase;
}
.tag-mandate  { color: var(--gold-dim);    border-color: rgba(212,170,85,0.25); }
.tag-regeneris{ color: var(--regen-color); border-color: rgba(61,224,203,0.35); }

/* Metrics grid — accepts any number of items */
.card-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.5px; background: var(--border-2);
  border: 0.5px solid var(--border-2); margin-bottom: 20px;
}
.metric {
  background: var(--metric-bg);
  padding: 13px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
  border-right: 0.5px solid var(--border-2);  /* separator */
}

.metric:last-child {
  border-right: none;  /* no double border on the outer edge */
}

.m-val {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  color: var(--metric-val); line-height: 1;
}
.m-lab {
  font-family: var(--font-cond);
  font-size: 9.5px; letter-spacing: 0.15em;
  color: var(--text-3); text-transform: uppercase;
}

/* Highlights */
.card-highlights { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.highlight {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 0.5px solid var(--border-2); gap: 12px;
}
.hl-label {
  font-family: var(--font-cond);
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--text-3); flex-shrink: 0;
}
.hl-value { font-size: 13px; color: var(--text); text-align: right; }

/* Card footer */
.card-footer { margin-top: auto; padding-top: 16px; border-top: 0.5px solid var(--border-2); }
.card-note   { font-size: 11px; color: var(--text-2); font-style: italic; line-height: 1.5; }

/* ════════════════════════════════════════════════════════
   REGENERIS SECTION
════════════════════════════════════════════════════════ */
.regeneris-section {
  position: relative; background: var(--bg);
  overflow: hidden; padding: 120px 40px;
}
.regen-bg { position: absolute; inset: 0; pointer-events: none; }
.regen-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, var(--regen-glow), transparent 70%);
  animation: regen-breathe 6s ease-in-out infinite;
}
@keyframes regen-breathe {
  0%, 100% { opacity:0.5; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity:1;   transform: translate(-50%,-50%) scale(1.15); }
}
.regen-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(61,224,203,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,224,203,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent);
}
.regen-inner { max-width: 1000px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.regen-symbol {
  font-size: 48px; color: var(--regen-color); opacity: 0.65;
  margin-bottom: 24px; display: block;
  animation: hex-spin 20s linear infinite;
}
@keyframes hex-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.regen-eyebrow { font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.35em; color: var(--regen-color); margin-bottom: 16px; text-transform: uppercase; }
.regen-title   { font-family: var(--font-display); font-size: clamp(56px,7vw,96px); font-weight: 300; color: var(--text); line-height: 0.9; margin-bottom: 16px; }
.regen-title em { font-style: italic; color: var(--regen-color); }
.regen-tagline  { font-family: var(--font-cond); font-size: 13px; letter-spacing: 0.25em; color: var(--text-2); margin-bottom: 40px; }
.regen-desc     { font-size: 16px; color: var(--text-2); line-height: 1.85; max-width: 700px; margin: 0 auto 60px; }
.regen-stats    { display: flex; justify-content: center; gap: 60px; margin-bottom: 60px; flex-wrap: wrap; }
.regen-stat     { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rs-n { font-family: var(--font-display); font-size: 40px; font-weight: 300; color: var(--regen-color); line-height: 1; }
.rs-l { font-family: var(--font-cond); font-size: 10px; letter-spacing: 0.2em; color: var(--text-3); }

.regen-systems {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.5px; background: rgba(61,224,203,0.10);
  border: 0.5px solid rgba(61,224,203,0.15);
  margin-bottom: 60px; text-align: left;
}
.regen-sys {
  background: var(--bg); padding: 20px 24px;
  display: grid; grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 4px; transition: background 0.3s;
}
.regen-sys:hover { background: var(--bg-2); }
.sys-icon   { grid-row: span 2; align-self: center; color: var(--regen-color); font-size: 14px; opacity: 0.8; }
.sys-name   { font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.15em; color: var(--text); font-weight: 500; }
.sys-detail { font-size: 11px; color: var(--text-3); }

.regen-cost { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; border: 0.5px solid var(--border); margin-bottom: 48px; overflow: hidden; }
.rc-item    { padding: 20px 32px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.rc-label   { font-family: var(--font-cond); font-size: 9px; letter-spacing: 0.25em; color: var(--text-3); text-transform: uppercase; }
.rc-val     { font-family: var(--font-display); font-size: 20px; color: var(--gold-light); }
.rc-sep     { width: 0.5px; height: 60px; background: var(--border); }

.regen-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.3em;
  color: var(--regen-color); text-decoration: none;
  border: 0.5px solid rgba(61,224,203,0.35);
  padding: 16px 36px; transition: all 0.3s;
  position: relative; overflow: hidden;
}
.regen-cta::before { content: ''; position: absolute; inset: 0; background: var(--regen-glow); opacity: 0; transition: opacity 0.3s; }
.regen-cta:hover { border-color: var(--regen-color); color: #fff; }
.regen-cta:hover::before { opacity: 1; }

/* ════════════════════════════════════════════════════════
   CONTACT / FOOTER
════════════════════════════════════════════════════════ */
.contact-section {
  background: var(--bg-2); border-top: 0.5px solid var(--border);
  padding: 80px 40px 0;
}
.contact-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.5fr 1fr;
  gap: 60px; padding-bottom: 60px; border-bottom: 0.5px solid var(--border-2);
}

/* Logo in footer */
.contact-logo-img {
  display: block;
  width: 280px;
  height: auto;
  opacity: 0.92;
}

.contact-name  { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--text); margin-bottom: 4px; }
.contact-role  { font-family: var(--font-cond); font-size: 10px; letter-spacing: 0.25em; color: var(--gold-dim); margin-bottom: 20px; }
.contact-details { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.contact-details a,
.contact-details span { font-size: 13px; color: var(--text-2); text-decoration: none; transition: color 0.2s; }
.contact-details a:hover { color: var(--gold); }
.contact-address { font-size: 11px; color: var(--text-3); line-height: 1.65; }

.confidential-box { border: 0.5px solid var(--border); padding: 24px; background: var(--bg); }
.conf-label { display: block; font-family: var(--font-cond); font-size: 10px; letter-spacing: 0.3em; color: var(--gold-dim); margin-bottom: 12px; }
.confidential-box p { font-size: 11px; color: var(--text-2); line-height: 1.75; margin-bottom: 8px; }

.footer-bar { max-width: 1200px; margin: 0 auto; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; }
.footer-bar span { font-family: var(--font-cond); font-size: 9px; letter-spacing: 0.2em; color: var(--text-3); }

/* ════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
════════════════════════════════════════════════════════ */
.reveal-up {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal-up.visible { opacity: 1; transform: translateY(0); }

.reveal-card {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal-card.visible { opacity: 1; transform: translateY(0); }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .card-wide { grid-column: span 1; }
  .contact-inner { grid-template-columns: 1fr 1fr; }
  .contact-right { grid-column: span 2; }
}

@media (max-width: 768px) {
  .nav-tagline      { display: none; }
  .nav-logo-img     { height: 34px; }
  .hero-stats       { gap: 24px; }
  .stat-n           { font-size: 28px; }
  .asset-grid       { grid-template-columns: 1fr; padding: 40px 20px; }
  .card-metrics     { grid-template-columns: repeat(2, 1fr); }
  .regen-stats      { gap: 32px; }
  .regen-cost       { flex-direction: column; }
  .rc-sep           { width: 60px; height: 0.5px; }
  .contact-inner    { grid-template-columns: 1fr; }
  .contact-right    { grid-column: span 1; }
  .contact-logo-img { width: 220px; }
  .filter-bar       { padding: 0 20px; }
  .hero             { padding: 100px 24px 60px; }
  .regeneris-section{ padding: 80px 24px; }
  .regen-systems    { grid-template-columns: 1fr; }
}