/* =============================================================
   Mumbai Escort Hub — Fineva Replica (v6 — dramatic)
   ============================================================= */

:root {
  --noir:        #0A0B07;
  --noir-2:      #11120E;
  --noir-3:      #181913;
  --noir-4:      #1F211B;
  --noir-5:      #2A2D24;
  --glass:       rgba(255, 255, 255, 0.04);
  --glass-2:     rgba(255, 255, 255, 0.07);
  --glass-line:  rgba(255, 255, 255, 0.08);
  --glass-line-strong: rgba(255, 255, 255, 0.16);

  --bone:        #FFFFFF;
  --bone-soft:   #B5B2A8;
  --bone-faint:  #6B6962;

  --lime:        #D4FF3A;
  --lime-2:      #E8FF6E;
  --lime-deep:   #A8CC1F;
  --lime-glow:   rgba(212, 255, 58, 0.4);
  --lime-line:   rgba(212, 255, 58, 0.3);

  --ff-display: 'Fraunces', 'FrauncesFallback', 'Playfair Display', Georgia, serif;
  --ff-body:    'Geist', 'GeistFallback', 'Inter', -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif;
  --ff-mono:    'Geist Mono', ui-monospace, monospace;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;

  --container:      1280px;
  --container-text: 720px;
  --pad-x:          20px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-3xl: 48px; --r-pill: 999px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-quick: .15s var(--ease);
  --t-base: .3s var(--ease);
  --t-slow: .6s var(--ease);
}
@media (min-width: 768px) { :root { --pad-x: 32px; } }
@media (min-width: 1080px) { :root { --pad-x: 48px; } }

/* ===== Fallback font metric adjustments (prevents CLS during font swap) ===== */
@font-face {
  font-family: 'GeistFallback';
  src: local('Arial');
  size-adjust: 102%;
  ascent-override: 92%;
  descent-override: 23%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'FrauncesFallback';
  src: local('Georgia');
  size-adjust: 99%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--bone);
  background: var(--noir);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: var(--bone); text-decoration: none; transition: color var(--t-quick); }
::selection { background: var(--lime); color: var(--noir); }
::-webkit-scrollbar { width: 8px; height: 6px; }
::-webkit-scrollbar-track { background: var(--noir); }
::-webkit-scrollbar-thumb { background: var(--noir-4); border-radius: var(--r-pill); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: var(--r-md); }

/* ===== DRAMATIC plant-blur background (Fineva-style) ===== */
.mesh {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: var(--noir);
}
.mesh::before {
  content: ""; position: absolute;
  width: 900px; height: 900px;
  top: -200px; left: -300px;
  background:
    radial-gradient(ellipse at center, rgba(150, 220, 50, 0.45) 0%, rgba(100, 160, 30, 0.25) 30%, transparent 60%);
  filter: blur(60px);
  animation: bgdrift1 30s ease-in-out infinite alternate;
}
.mesh::after {
  content: ""; position: absolute;
  width: 900px; height: 900px;
  top: -100px; right: -300px;
  background:
    radial-gradient(ellipse at center, rgba(150, 220, 50, 0.45) 0%, rgba(100, 160, 30, 0.25) 30%, transparent 60%);
  filter: blur(60px);
  animation: bgdrift2 32s ease-in-out infinite alternate;
}
.mesh-orb {
  position: absolute;
  width: 700px; height: 700px;
  top: 60%; left: 50%; margin-left: -350px;
  background: radial-gradient(circle, rgba(120, 180, 30, 0.18) 0%, transparent 65%);
  filter: blur(80px);
  animation: bgdrift3 26s ease-in-out infinite alternate;
}
@keyframes bgdrift1 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(60px,40px) scale(1.1)} }
@keyframes bgdrift2 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-60px,30px) scale(1.08)} }
@keyframes bgdrift3 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(80px,-40px) scale(1.05)} }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body > * { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .mesh::before, .mesh::after, .mesh-orb { animation: none; }
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 { margin: 0; color: var(--bone); line-height: 1.0; letter-spacing: -0.03em; }
.ital, em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
p { margin: 0 0 var(--s-4); }
strong { color: var(--bone); font-weight: 600; }

.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-pill);
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--bone-soft);
}
.eyebrow-tag svg { width: 14px; height: 14px; color: var(--lime); }

/* ===== LAYOUT ===== */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.container-narrow { max-width: var(--container-text); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.section { padding: var(--s-8) 0; }

/* ===== PAGE HERO (inner pages — not homepage) — design-led with decorative blobs ===== */
.page-hero {
  position: relative;
  padding: clamp(72px, 14vh, 140px) 0 clamp(40px, 6vh, 72px);
  text-align: center;
  overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(212,255,58,0.12), transparent 70%),
    radial-gradient(ellipse 40% 50% at 100% 100%, rgba(212,255,58,0.06), transparent 70%),
    radial-gradient(ellipse 35% 45% at 0% 60%, rgba(212,255,58,0.04), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Decorative grid lines */
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent 85%);
  mask: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent 85%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .eyebrow-tag { margin-bottom: var(--s-4); }

/* ===== Decorative gradient card (replaces image-heavy hero on inner pages) ===== */
.deco-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(212,255,58,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(212,255,58,0.1) 0%, transparent 60%),
    linear-gradient(165deg, #0F1108 0%, #050601 100%);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
.deco-card::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(212,255,58,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212,255,58,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.deco-card::after {
  content: ""; position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,255,58,0.22) 0%, transparent 70%);
  filter: blur(40px);
  top: -120px; right: -120px;
  pointer-events: none;
}
.deco-card-inner {
  position: relative; z-index: 2;
  text-align: center;
  padding: var(--s-7);
}
.deco-card .deco-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  margin-bottom: var(--s-5);
  border-radius: 20px;
  background: rgba(212,255,58,0.12);
  border: 1px solid rgba(212,255,58,0.35);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--lime);
}
.deco-card .deco-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}
.deco-card .deco-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--bone);
  margin-bottom: var(--s-4);
}
.deco-card .deco-meta {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.deco-card .deco-meta .dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--lime);
}

/* Decorative chip floating corners */
.deco-card .deco-chip {
  position: absolute; z-index: 3;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(10,11,7,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212,255,58,0.3);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lime);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.deco-card .deco-chip .big {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 24px;
  color: var(--bone);
  text-transform: none;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.deco-card .deco-chip.tl { top: 22px; left: 22px; }
.deco-card .deco-chip.br { bottom: 22px; right: 22px; }
@media (max-width: 600px) {
  .deco-card .deco-chip { padding: 6px 9px; font-size: 8px; }
  .deco-card .deco-chip .big { font-size: 18px; }
  .deco-card .deco-chip.tl { top: 14px; left: 14px; }
  .deco-card .deco-chip.br { bottom: 14px; right: 14px; }
}
.page-h1 {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--bone);
  margin: 0 auto var(--s-4);
  max-width: 900px;
}
.page-h1 .ital {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.page-sub {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--bone-soft);
  max-width: 620px;
  margin: 0 auto var(--s-6);
  line-height: 1.55;
}
@media (min-width: 1080px) { .section { padding: var(--s-10) 0; } }
.section-tight { padding: var(--s-5) 0; }

/* ===== NAV — floating pill on fading black-to-transparent gradient ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding: 14px 0 28px;
  background: transparent;
  isolation: isolate;
  pointer-events: none; /* gradient layer doesn't block; children re-enable */
}
.nav > * { pointer-events: auto; }

/* The gradient layer: solid pitch-black at top fading to fully transparent */
.nav::before {
  content: ""; position: absolute;
  inset: 0; bottom: auto; height: 140%;
  background: linear-gradient(
    180deg,
    #000 0%,
    rgba(0,0,0,0.92) 30%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
  z-index: -1;
}

/* On scroll — gradient stays, just tightens slightly and adds blur for legibility.
   Never solid black; always fades out at the bottom. */
.nav.scrolled {
  padding: 12px 0 24px;
}
.nav.scrolled::before {
  height: 130%;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.96) 0%,
    rgba(0,0,0,0.85) 30%,
    rgba(0,0,0,0.5) 65%,
    rgba(0,0,0,0) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  /* Mask the blur so it only applies in the upper opaque region, not the transparent fade */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.4) 80%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.4) 80%, transparent 100%);
}
.nav-inner {
  display: flex; align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  gap: 16px;
  position: relative;
}

/* Brand — small, restrained (legacy) */
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand-mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--lime);
  box-shadow: 0 4px 12px -2px rgba(212,255,58,0.35);
}
.brand-mark svg { width: 15px; height: 15px; }
.brand-mark path { stroke: var(--noir); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .dot { fill: var(--noir); }
.brand-text-only {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--bone);
  letter-spacing: -0.018em;
  line-height: 1;
}

/* ===== BRAND MASTHEAD — editorial logo with serif M monogram + two-line wordmark ===== */
.brand.brand-mast {
  gap: 10px;
  align-items: center;
}

/* Monogram: lime tile with italic serif M inside */
.brand-mark.brand-mark-mast {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--lime);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 6px 14px -2px rgba(212,255,58,0.4),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.brand-mark.brand-mark-mast svg { width: 100%; height: 100%; }
/* Inner highlight gradient — gives the tile depth */
.brand-mark.brand-mark-mast::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
  border-radius: 9px;
}
.brand-mast:hover .brand-mark.brand-mark-mast {
  transform: rotate(-4deg) scale(1.05);
  box-shadow:
    0 10px 20px -2px rgba(212,255,58,0.55),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Two-line wordmark */
.brand-wordmark {
  display: inline-flex; flex-direction: column;
  gap: 3px;
  line-height: 1;
  position: relative;
}
.brand-line1 {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--bone);
  line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.brand-line2 {
  display: inline-flex; align-items: center;
  gap: 5px;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  line-height: 1;
  padding-top: 1px;
}
.brand-line2 .bw-sep {
  color: var(--lime);
  font-size: 13px;
  line-height: 0;
  letter-spacing: 0;
  position: relative;
  top: -1px;
}

/* Hover: line1 inherits italic stay, line2 hint to lime */
.brand-mast:hover .brand-line2 { color: rgba(255,255,255,0.75); }

/* Compact wordmark on small screens */
@media (max-width: 480px) {
  .brand.brand-mast { gap: 8px; }
  .brand-mark.brand-mark-mast { width: 32px; height: 32px; border-radius: 8px; }
  .brand-line1 { font-size: 17px; }
  .brand-line2 { font-size: 8px; letter-spacing: 0.22em; gap: 4px; }
  .brand-line2 .bw-sep { font-size: 11px; }
}

/* Centered pill nav */
.nav-pill-wrap {
  display: none;
  flex: 1;
  justify-content: center;
}
@media (min-width: 1024px) { .nav-pill-wrap { display: flex; } }
.nav-pill {
  display: flex; align-items: center;
  gap: 0;
  padding: 5px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 999px;
  /* subtle inner highlight */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.nav-link {
  display: inline-flex; align-items: center;
  padding: 9px 18px;
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  border-radius: 999px;
  transition: color 0.2s ease, background 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: -0.005em;
  line-height: 1;
}
.nav-link:hover { color: var(--bone); }
.nav-link.active {
  background: #1a1a1a;
  color: var(--bone);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 8px -2px rgba(0,0,0,0.6);
}

/* Right cluster */
.nav-cta {
  display: flex; align-items: center;
  gap: 14px;
  margin-left: auto;
}
.nav-link-text {
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s ease;
  letter-spacing: -0.005em;
}
.nav-link-text:hover { color: var(--bone); }
@media (max-width: 600px) { .nav-link-text { display: none; } }

/* Sign Up / Book Now button — clean bone pill, no lime hover */
.btn-signup {
  display: inline-flex; align-items: center;
  padding: 9px 18px;
  background: var(--bone);
  color: var(--noir);
  border-radius: 999px;
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.25s var(--ease), background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.btn-signup:hover {
  background: #F5F5EC;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(255,255,255,0.25);
}

.menu-toggle {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(20, 22, 18, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-line);
  color: var(--bone);
  margin-left: 8px;
}
.menu-toggle svg { width: 20px; height: 20px; }
@media (min-width: 1024px) { .menu-toggle { display: none; } }

.scroll-progress {
  position: fixed; top: 0; left: 0; width: 0; height: 2px;
  background: var(--lime); box-shadow: 0 0 8px var(--lime-glow);
  z-index: 51; transition: width 80ms linear;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--ff-body);
  font-size: 15px; font-weight: 600;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: all var(--t-base);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: var(--bone); color: var(--noir); }
.btn-primary:hover { background: var(--lime); color: var(--noir); transform: translateY(-1px); box-shadow: 0 12px 32px -8px var(--lime-glow); }
.btn-dark {
  background: rgba(20, 22, 18, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: var(--bone);
  border: 1px solid var(--glass-line);
}
.btn-dark:hover { background: rgba(30, 32, 28, 0.8); color: var(--bone); border-color: var(--glass-line-strong); transform: translateY(-1px); }
.btn-lime { background: var(--lime); color: var(--noir); font-weight: 700; }
.btn-lime:hover { background: var(--lime-2); color: var(--noir); transform: translateY(-1px); box-shadow: 0 12px 32px -8px var(--lime-glow); }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-lg { padding: 18px 32px; font-size: 16px; }

/* ===== HERO — clean responsive layout, animated reveal on both viewports ===== */
.hero-scroll-wrap {
  position: relative;
  height: auto;
}
.hero {
  position: relative;
  padding: var(--s-6) 0 var(--s-7);
  text-align: center;
  overflow: hidden;
}
@media (min-width: 900px) {
  .hero {
    padding: var(--s-8) 0;
    min-height: 92vh;
    display: flex;
    align-items: center;
    text-align: left;
  }
}

.hero-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 2;
  width: 100%;
}

/* Desktop 2-col grid (text left, phone right) */
@media (min-width: 900px) {
  .hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--s-6);
    align-items: center;
    padding: 0 var(--s-5);
  }
  .hero-text-col { padding-right: var(--s-5); }
  .hero-phone-col { display: flex; justify-content: center; align-items: center; height: 100%; }
}
@media (min-width: 1080px) {
  .hero-inner { gap: var(--s-7); padding: 0 var(--s-6); }
}

.hero-headline {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(44px, 10vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--bone);
  margin-bottom: var(--s-5);
  /* reserve vertical space to prevent CLS during font swap */
  min-height: calc(2 * 0.96em);
}
@media (min-width: 900px) {
  .hero-headline { font-size: clamp(48px, 6.2vw, 88px); line-height: 0.94; }
}
@media (min-width: 1280px) {
  .hero-headline { font-size: clamp(72px, 5.8vw, 104px); }
}
.hero-headline .ital {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  color: var(--bone);
  display: block;
}

.hero-sub {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.9vw, 19px);
  color: var(--bone-soft);
  max-width: 580px;
  margin: 0 auto var(--s-6);
  line-height: 1.55;
}
@media (min-width: 900px) {
  .hero-sub { margin: 0 0 var(--s-6); max-width: 520px; }
}

.hero-ctas {
  display: flex; gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
}
@media (min-width: 900px) {
  .hero-ctas { justify-content: flex-start; margin-bottom: var(--s-5); }
}
@media (max-width: 420px) {
  .hero-ctas { flex-direction: column; align-items: stretch; padding: 0 var(--s-4); }
  .hero-ctas .btn { width: 100%; }
}

/* Desktop hero meta strip (replaces flanks-row on mobile) */
.hero-meta {
  display: none;
  align-items: center; gap: var(--s-4);
  font-family: var(--ff-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bone-soft);
}
@media (min-width: 900px) { .hero-meta { display: inline-flex; } }
.hero-meta-divider { width: 24px; height: 1px; background: var(--glass-line-strong); }
.hero-meta .star { color: var(--lime); font-size: 13px; }

/* PHONE — sized for mobile */
.hero-phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: var(--s-6);
}
@media (min-width: 900px) {
  .hero-phone-wrap { margin-top: 0; }
}
.hero-phone {
  position: relative;
  width: 240px;
  aspect-ratio: 9 / 19;
  border-radius: 40px;
  background: linear-gradient(155deg, #0F1108 0%, #050601 100%);
  border: 8px solid #18180F;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 50px 100px -30px rgba(0,0,0,0.92),
    0 0 110px rgba(212, 255, 58, 0.22);
  overflow: hidden;
  z-index: 1;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* Mobile: phone starts slightly offset + faded, reveals when scrolled into view */
@media (max-width: 899px) {
  .hero-phone {
    width: 250px;
    border-radius: 42px;
    border-width: 8px;
    transform: translateY(40px) scale(0.92);
    opacity: 0;
    transition:
      transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.85s ease-out;
  }
  .hero-phone.is-revealed {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@media (max-width: 480px) {
  .hero-phone { width: 220px; border-radius: 38px; border-width: 7px; }
}
@media (min-width: 900px)  {
  .hero-phone {
    --phone-y: 0%;
    --phone-s: 1;
    --phone-rot: 0deg;
    width: 300px; aspect-ratio: 9 / 19; border-radius: 50px; border-width: 10px;
    max-height: none;
    transform-origin: center center;
    transform: translateY(42%) scale(0.84) rotate(-5deg);
    opacity: 0;
    transition:
      transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 1.1s ease-out;
  }
  .hero-phone.is-revealed {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}
@media (min-width: 1280px) { .hero-phone { width: 340px; border-radius: 54px; } }
.hero-phone::before {
  content: ""; position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 26px;
  background: #000;
  border-radius: var(--r-pill);
  z-index: 10;
}
.hero-phone::after {
  content: ""; position: absolute;
  inset: 4px;
  border-radius: 40px;
  border: 1px solid rgba(255,255,255,0.04);
  pointer-events: none; z-index: 9;
}
.hero-phone video, .hero-phone img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== PHONE APP MOCKUP — premium full-bleed dating-app aesthetic ===== */
.phone-app {
  position: absolute; inset: 0;
  background: #050601;
  color: var(--bone);
  font-family: var(--ff-body);
  overflow: hidden;
}
/* ===== Phone — premium full-bleed profile (Tinder/Bumble style) ===== */

/* Status bar — minimal overlay at top */
.phone-status-bar {
  position: absolute; top: 12px; left: 18px; right: 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.98);
  z-index: 20;
}
.phone-status-bar .icons { display: inline-flex; gap: 5px; align-items: center; }
.phone-status-bar svg { width: 12px; height: 12px; color: rgba(255,255,255,0.98); }

/* App header — small brand pill + live (floats over image at top) */
.phone-app-header {
  position: absolute; top: 38px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 8px;
  z-index: 8;
}
.phone-app-mark {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: rgba(10,11,7,0.65);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(212,255,58,0.4);
  color: var(--lime);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px -4px rgba(0,0,0,0.5);
}
.phone-app-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.phone-app-brand {
  flex: 1;
  padding: 6px 10px;
  border-radius: 9px;
  background: rgba(10,11,7,0.55);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--bone);
}
.phone-app-brand .sub {
  font-family: var(--ff-mono);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--lime);
  text-transform: uppercase;
  display: block; margin-top: 3px;
}
.phone-live {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(212,255,58,0.92);
  color: var(--noir);
  font-family: var(--ff-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  box-shadow: 0 6px 16px -4px rgba(212,255,58,0.45);
}
.phone-live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--noir);
  animation: phone-pulse 1.4s ease-in-out infinite;
}
@keyframes phone-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Featured card = the entire phone canvas (full-bleed) */
.phone-featured-card {
  position: absolute; inset: 0;
  display: block;
  overflow: hidden;
}
.phone-featured-card .img-wrap {
  position: absolute; inset: 0;
}
.phone-featured-card .img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  filter: saturate(1.15) contrast(1.06) brightness(1.02);
}
/* Top gradient for status bar legibility */
.phone-featured-card .img-wrap::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 120px; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
}
/* Bottom gradient for overlay */
.phone-featured-card .img-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 50%, rgba(10,11,7,0.85) 80%, rgba(10,11,7,0.98) 100%);
}
/* Bottom info overlay */
.phone-card-overlay {
  position: absolute; left: 14px; right: 14px; bottom: 18px;
  z-index: 6;
}
.phone-verify-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  margin-bottom: 9px;
  border-radius: 20px;
  background: rgba(212,255,58,0.15);
  border: 1px solid rgba(212,255,58,0.4);
  font-family: var(--ff-mono);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lime);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.phone-verify-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
}
.phone-card-name {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 5vw, 28px);
  line-height: 0.96;
  letter-spacing: -0.018em;
  color: var(--bone);
  margin-bottom: 4px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.65);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.phone-card-name .age {
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(18px, 4vw, 22px);
  color: rgba(255,255,255,0.85);
  margin-left: 4px;
}
.phone-card-meta {
  display: inline-flex; gap: 6px; align-items: center;
  font-family: var(--ff-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.phone-card-meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--lime);
}
.phone-card-meta .meta-star { color: var(--lime); }

/* Card top-left tag - kept but minimal */
.phone-card-tag, .phone-card-heart { display: none; }

/* Bottom action row: pass / WhatsApp / heart (Tinder-style) */
.phone-actions {
  display: flex; align-items: center; gap: 8px;
  z-index: 6;
}
.phone-action-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(10,11,7,0.6);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bone);
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 8px 20px -4px rgba(0,0,0,0.5);
}
.phone-action-btn svg { width: 16px; height: 16px; }
.phone-action-btn.heart { color: #FF4D6D; }
.phone-action-btn.heart svg { fill: currentColor; }
.phone-cta {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--lime);
  color: var(--noir);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow:
    0 12px 28px -6px rgba(212,255,58,0.55),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.phone-cta svg { width: 13px; height: 13px; }

/* Home indicator */
.phone-home-bar {
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.4);
  z-index: 11;
}

/* Floating "Featured" chip pinned mid-screen for editorial flair */
.phone-floating-chip {
  position: absolute; top: 50%; right: -20px;
  transform: translateY(-50%) rotate(8deg);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(10,11,7,0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(212,255,58,0.35);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lime);
  z-index: 7;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.phone-floating-chip .big {
  font-family: var(--ff-display); font-style: italic; font-weight: 500;
  font-size: 18px; color: var(--bone); letter-spacing: -0.02em;
  text-transform: none;
}

/* Hero side flanks */
.hero-flanks-row {
  display: none;
  align-items: center; justify-content: space-between;
  max-width: 600px;
  margin: var(--s-6) auto 0;
  padding: 0 var(--s-4);
}
@media (min-width: 1080px) { .hero-flanks-row { display: flex; } }
.hero-flank {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bone-soft);
}
.hero-flank .star { color: var(--lime); font-size: 14px; }

/* ===== ABOUT + STATS (Fineva style) ===== */
.about-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-body);
  font-size: 12px; font-weight: 500;
  color: var(--bone-soft);
  text-transform: uppercase; letter-spacing: 0.15em;
  margin-bottom: var(--s-6);
}
.about-tag svg { width: 14px; height: 14px; color: var(--lime); }

.about-text {
  font-family: var(--ff-body);
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.38;
  color: var(--bone);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-8);
  max-width: 1000px;
}
.about-text strong, .about-text b {
  color: var(--bone);
  font-weight: 600;
}
.about-text .brand-inline {
  display: inline-flex; align-items: center; gap: 6px;
}
.about-text .brand-inline-mark {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  background: var(--lime); border-radius: 4px;
}
.about-text .brand-inline-mark svg { width: 14px; height: 14px; }
.about-text .brand-inline-mark svg path { stroke: var(--noir); stroke-width: 2.5; }
.about-text a {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(212,255,58,0.5);
}
.about-text a:hover { text-decoration-color: var(--lime); }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--glass-line);
  margin-bottom: var(--s-7);
}
@media (min-width: 600px) { .stats-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } }
.stat-block .stat-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--lime);
  border-radius: 6px;
  margin-bottom: var(--s-4);
}
.stat-block .stat-icon svg { width: 16px; height: 16px; color: var(--noir); }
.stat-block .v {
  font-family: var(--ff-body);
  font-size: clamp(56px, 7.5vw, 88px);
  font-weight: 500;
  color: var(--bone);
  letter-spacing: -0.045em;
  line-height: 1.0;
  margin-bottom: var(--s-3);
}
.stat-block .l {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--bone-soft);
  line-height: 1.5;
  max-width: 280px;
}

/* ===== "BUILT FOR" 2-col Fineva ===== */
.feat-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 900px) { .feat-2col { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }

.feat-card {
  padding: var(--s-7) var(--s-5);
  background: rgba(20, 22, 18, 0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-2xl);
}
@media (min-width: 768px) { .feat-card { padding: var(--s-8) var(--s-7); } }
.feat-card .eyebrow-tag { margin-bottom: var(--s-5); }
.feat-card h2 {
  font-family: var(--ff-body);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: var(--s-5);
  color: var(--bone);
}
.feat-card h2 .ital {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  display: block;
}
.feat-card p {
  color: var(--bone-soft);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: var(--s-5);
}

.check-list { list-style: none; padding: 0; margin: var(--s-5) 0; }
.check-list li {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--bone);
  border-top: 1px solid var(--glass-line);
}
.check-list li:first-child { border-top: 0; }
.check-list .icon {
  width: 24px; height: 24px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(212, 255, 58, 0.15);
  border-radius: 6px;
  color: var(--lime);
}
.check-list .icon svg { width: 14px; height: 14px; }

/* ===== Numbered step list — Fineva editorial ===== */
.step-list { list-style: none; padding: 0; margin: var(--s-5) 0 0; counter-reset: stp; }
.step-list li {
  counter-increment: stp;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--glass-line);
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bone-soft);
}
.step-list li:first-child { border-top: 0; padding-top: 0; }
.step-list li::before {
  content: counter(stp, decimal-leading-zero);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: 22px;
  line-height: 1.2;
  color: var(--lime);
}
.step-list li b, .step-list li strong { color: var(--bone); font-weight: 600; }
.step-list li a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(212,255,58,0.4); }
.step-list li a:hover { color: var(--lime-2); }

/* Section intro (used above the 2-col In/Out grid) */
.section-intro {
  text-align: center;
  margin-bottom: var(--s-7);
  max-width: 820px;
  margin-left: auto; margin-right: auto;
}
.section-intro .eyebrow-tag { margin-bottom: var(--s-4); }
.section-intro h2 {
  font-family: var(--ff-body);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--bone);
  margin-bottom: var(--s-4);
}
.section-intro h2 .ital {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  display: block;
}
.section-intro p { color: var(--bone-soft); font-size: 15.5px; line-height: 1.6; }

/* Single-row payment / process card */
.process-card {
  padding: var(--s-7) var(--s-5);
  background: rgba(20, 22, 18, 0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-2xl);
  margin-top: var(--s-5);
}
@media (min-width: 768px) { .process-card { padding: var(--s-8) var(--s-7); } }
.process-card .top-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.process-card h2 {
  font-family: var(--ff-body);
  font-size: clamp(28px, 3.8vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--bone);
}
.process-card h2 .ital {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
}
.process-card .process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 768px) { .process-card .process-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); } }
.process-card .step-list { margin: 0; }

/* ===== Advantage cards — 5-card grid of numbered feature paragraphs ===== */
.advantages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 768px)  { .advantages-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .advantages-grid { grid-template-columns: repeat(3, 1fr); } }

.advantage-card {
  padding: var(--s-5);
  background: rgba(20, 22, 18, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  transition: all var(--t-base);
}
@media (min-width: 768px) { .advantage-card { padding: var(--s-6); } }
.advantage-card:hover {
  border-color: var(--lime-line);
  transform: translateY(-2px);
}
.advantage-card .num-big {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: 56px;
  line-height: 1;
  color: var(--lime);
  margin-bottom: var(--s-4);
}
.advantage-card p {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--bone-soft);
  margin: 0;
}
.advantage-card p strong, .advantage-card p b { color: var(--bone); font-weight: 600; }
.advantage-card p a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(212,255,58,0.4);
}
.advantage-card p a:hover { color: var(--lime-2); }
/* When grid is 3-cols and we have 5 cards, the 4th and 5th span gracefully */
@media (min-width: 1080px) {
  .advantages-grid.has-5 > :nth-child(4) { grid-column: 1 / span 1; }
  .advantages-grid.has-5 > :nth-child(5) { grid-column: 2 / span 2; }
}

/* 4-card grid: 2x2 tablet, 4-col desktop */
@media (min-width: 768px)  { .advantages-grid.has-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .advantages-grid.has-4 { grid-template-columns: repeat(4, 1fr); } }

/* 6-card grid: 2-col tablet, 3-col desktop */
@media (min-width: 768px)  { .advantages-grid.has-6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .advantages-grid.has-6 { grid-template-columns: repeat(3, 1fr); } }

.advantage-card .title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: 22px;
  line-height: 1.15;
  color: var(--bone);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.015em;
}

/* ===== Tip cards (etiquette tips, etc.) ===== */
.tips-grid {
  display: grid; grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 768px) { .tips-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }

.tip-card {
  padding: var(--s-5);
  background: rgba(20, 22, 18, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  display: flex; align-items: flex-start; gap: var(--s-4);
  transition: all var(--t-base);
}
.tip-card:hover { border-color: var(--lime-line); transform: translateY(-2px); }
.tip-card .ico {
  width: 36px; height: 36px; flex-shrink: 0;
  background: rgba(212, 255, 58, 0.12);
  border: 1px solid var(--lime-line);
  border-radius: 10px;
  display: grid; place-items: center;
}
.tip-card .ico img {
  width: 20px; height: 20px;
  filter: hue-rotate(40deg) saturate(2.5) brightness(1.1);
}
.tip-card .ico svg { width: 18px; height: 18px; color: var(--lime); }
.tip-card .text { flex: 1; }
.tip-card .text p {
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bone-soft);
  margin: 0;
}
.tip-card .text p strong, .tip-card .text p b { color: var(--bone); font-weight: 600; }
.tip-card .text p a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(212,255,58,0.4);
}
.tip-card .num-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--lime);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
  display: block;
  font-weight: 500;
}

/* ===== Feature block (Housewives / VIP / similar) ===== */
.feature-block {
  padding: var(--s-7) var(--s-5);
  background: rgba(20, 22, 18, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-2xl);
  max-width: var(--container);
  margin: 0 auto;
}
@media (min-width: 768px) { .feature-block { padding: var(--s-8) var(--s-7); } }
.feature-block .eyebrow-tag { margin-bottom: var(--s-4); }
.feature-block h2 {
  font-family: var(--ff-body);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-5);
  color: var(--bone);
}
.feature-block h2 .ital {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.feature-block .paragraphs {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
}
@media (min-width: 900px) { .feature-block .paragraphs { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
.feature-block .paragraphs p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--bone-soft);
  margin: 0;
}
.feature-block .paragraphs p strong, .feature-block .paragraphs p b { color: var(--bone); font-weight: 600; }
.feature-block .paragraphs p a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(212,255,58,0.4);
}
.feature-block .paragraphs p a:hover { color: var(--lime-2); }

/* List card — Fineva country list */
.list-card {
  padding: var(--s-5);
  background: rgba(20, 22, 18, 0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-2xl);
}
.list-card .list-title {
  font-family: var(--ff-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bone-soft);
  margin-bottom: var(--s-4);
  padding: 0 var(--s-3);
}
.list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-md);
  transition: background var(--t-quick);
  border-bottom: 1px solid var(--glass-line);
  text-decoration: none;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: rgba(255,255,255,0.03); }
.list-row .left { display: flex; align-items: center; gap: var(--s-3); }
.list-row .flag {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--noir-3), var(--noir-4));
  display: grid; place-items: center;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--lime);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.list-row .name {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--bone);
  line-height: 1.2;
}
.list-row .name .sub {
  display: block;
  font-size: 11px;
  color: var(--bone-soft);
  font-weight: 400;
  margin-top: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.list-row .right {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--lime);
  white-space: nowrap;
}

/* ===== DASH CARD (Take Control) ===== */
.dash-card {
  padding: var(--s-6);
  background: rgba(20, 22, 18, 0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.dash-card .top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-4);
}
.dash-card .label {
  font-family: var(--ff-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bone-soft);
}
.dash-card .figure {
  font-family: var(--ff-body);
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--bone);
  margin-bottom: var(--s-5);
}
.dash-bars {
  display: flex; align-items: flex-end;
  gap: 6px; height: 180px;
  margin-bottom: var(--s-5);
  padding: var(--s-3);
  background: var(--noir);
  border-radius: var(--r-md);
  border: 1px solid var(--glass-line);
}
.dash-bar { flex: 1; background: var(--noir-4); border-radius: 4px; min-height: 16px; transition: all var(--t-base); }
.dash-bar.active { background: var(--lime); box-shadow: 0 0 20px var(--lime-glow); }
.dash-bar.medium { background: rgba(212, 255, 58, 0.45); }
.dash-mini-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--glass-line);
}
.dash-mini-stat .v {
  font-family: var(--ff-body); font-weight: 500; font-size: 22px;
  color: var(--bone); letter-spacing: -0.02em; margin-bottom: 2px;
}
.dash-mini-stat .l {
  font-family: var(--ff-body); font-size: 11px;
  color: var(--bone-soft); text-transform: uppercase; letter-spacing: 0.1em;
}

/* ===== TRUST STRIP ===== */
.trust-strip {
  text-align: center;
  padding: var(--s-8) 0;
  border-top: 1px solid var(--glass-line);
  border-bottom: 1px solid var(--glass-line);
}
.trust-strip .label {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--bone-soft);
  margin-bottom: var(--s-5);
}
.trust-strip .label .ital {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--bone);
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.trust-logos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: var(--s-7);
}
.trust-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--bone);
  opacity: 0.65;
  transition: opacity var(--t-base);
}
.trust-logo:hover { opacity: 1; }
.trust-logo svg { width: 18px; height: 18px; }

/* ===== STORIES / Testimonials ===== */
.stories-block {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
  margin-bottom: var(--s-7);
  align-items: end;
}
@media (min-width: 900px) { .stories-block { grid-template-columns: 1.4fr 1fr; gap: var(--s-7); } }
.stories-title {
  font-family: var(--ff-body);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--bone);
}
.stories-title .ital {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  display: block;
}
.stories-desc {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--bone-soft);
  line-height: 1.6;
  max-width: 380px;
}
.stories-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
@media (min-width: 768px) { .stories-grid { grid-template-columns: 1fr 1fr; } }
.story-card {
  padding: var(--s-6);
  background: rgba(20, 22, 18, 0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
}
.story-card .quote-icon {
  color: var(--lime);
  font-size: 36px;
  line-height: 1;
  margin-bottom: var(--s-4);
  font-family: var(--ff-display);
  font-weight: 700;
}
.story-card .body {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--bone);
  line-height: 1.55;
  margin-bottom: var(--s-5);
}
.story-card .author {
  display: flex; align-items: center; gap: var(--s-3);
}
.story-card .author-img {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--noir-3);
  overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--glass-line);
  display: grid; place-items: center;
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--lime);
  font-size: 20px;
}
.story-card .author-img img { width: 100%; height: 100%; object-fit: cover; }
.story-card .author-name {
  font-family: var(--ff-body);
  font-size: 14px; font-weight: 500;
  color: var(--bone);
}
.story-card .author-meta {
  font-family: var(--ff-body);
  font-size: 12px;
  color: var(--bone-soft);
}

/* ===== ORIGINAL CONTENT styles ===== */
.action-bar {
  display: flex; gap: var(--s-2);
  padding: var(--s-2);
  background: rgba(20, 22, 18, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-pill);
  flex-wrap: wrap; justify-content: center;
}
.action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-family: var(--ff-body); font-size: 13px; font-weight: 500;
  color: var(--bone-soft);
  transition: all var(--t-base);
}
.action-btn:hover { color: var(--bone); background: rgba(255,255,255,0.04); }
.action-btn svg { width: 14px; height: 14px; }
.action-btn-call { background: var(--lime); color: var(--noir); }
.action-btn-call:hover { background: var(--lime-2); color: var(--noir); }

.marquee-wrap {
  overflow: hidden;
  border-radius: var(--r-xl);
  background: rgba(20, 22, 18, 0.4);
  border: 1px solid var(--glass-line);
  padding: var(--s-3) 0;
}
.marquee-track { display: flex; gap: var(--s-5); animation: marquee 35s linear infinite; width: max-content; }
.marquee-track img { height: 60px; width: auto; flex-shrink: 0; border-radius: 8px; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.profile-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3);
}
@media (min-width: 768px) { .profile-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 1080px) { .profile-grid { grid-template-columns: repeat(4, 1fr); } }

/* ===== PROFILE RAIL — horizontal scroll carousel ===== */
.section-intro-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.rail-controls {
  display: none;
  gap: 8px;
  flex-shrink: 0;
}
@media (min-width: 768px) { .rail-controls { display: inline-flex; } }
.rail-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--bone);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.rail-arrow:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--noir);
  transform: translateY(-2px);
}
.rail-arrow:disabled {
  opacity: 0.4; cursor: default; transform: none;
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
}
.rail-arrow svg { width: 18px; height: 18px; }

.profile-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 75%;
  gap: var(--s-3);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px var(--pad-x) 12px;
  margin: var(--s-5) calc(-1 * var(--pad-x)) 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.profile-rail::-webkit-scrollbar { display: none; }
@media (min-width: 600px)  { .profile-rail { grid-auto-columns: 42%; gap: var(--s-4); } }
@media (min-width: 1080px) { .profile-rail { grid-auto-columns: 25%; } }
.profile-rail .rail-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.rail-progress {
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  margin-top: var(--s-5);
  overflow: hidden;
  position: relative;
}
.rail-progress-bar {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: 2px;
  background: var(--lime);
  transition: width 0.2s ease, transform 0.2s ease;
}

/* ===== PROFILE CARD v3 — clean editorial, image-first, refined chrome ===== */
.profile-card {
  display: block; position: relative;
  border-radius: 18px; overflow: hidden;
  background: #0E1009;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.4s var(--ease), border-color 0.35s ease, box-shadow 0.4s ease;
  color: var(--bone);
  isolation: isolate;
  text-decoration: none;
  box-shadow: 0 14px 28px -14px rgba(0,0,0,0.55);
}
.profile-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212,255,58,0.28);
  box-shadow:
    0 30px 56px -20px rgba(0,0,0,0.85),
    0 0 60px -22px rgba(212,255,58,0.32);
}

.profile-card .img-wrap {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
}
.profile-card .img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform 1.2s var(--ease), filter 0.5s ease;
  filter: saturate(1.06);
}
.profile-card:hover .img-wrap img {
  transform: scale(1.06);
  filter: saturate(1.15);
}
/* Top vignette — only for badges legibility */
.profile-card .img-wrap::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 80px; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
  pointer-events: none;
}
/* Bottom strong fade for direct text overlay */
.profile-card .img-wrap::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 55%; z-index: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(10,11,7,0.55) 40%, rgba(10,11,7,0.95) 80%, rgba(10,11,7,1) 100%);
  pointer-events: none;
}

/* Top-left badge — refined glass pill */
.profile-card .img-wrap .pbadge {
  position: absolute; top: 11px; left: 11px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1;
}
.profile-card .img-wrap .pbadge.lime {
  color: var(--lime);
  border-color: rgba(212,255,58,0.35);
}
.profile-card .img-wrap .pbadge::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 6px rgba(212,255,58,0.6);
  flex-shrink: 0;
}

/* Top-right age chip — flat lime, no shadow overload */
.profile-card .img-wrap .page-chip {
  position: absolute; top: 11px; right: 11px; z-index: 4;
  display: inline-flex; align-items: center;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--lime);
  color: var(--noir);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  box-shadow: 0 4px 10px -2px rgba(212,255,58,0.4);
}

/* Direct text overlay at bottom — no glass brick */
.profile-card .pinfo {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 14px 14px;
  z-index: 2;
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}
/* Thin lime accent line above name */
.profile-card .pinfo::before {
  content: ""; display: block;
  width: 24px; height: 2px;
  background: var(--lime);
  border-radius: 2px;
  margin-bottom: 8px;
  transition: width 0.4s var(--ease);
}
.profile-card:hover .pinfo::before { width: 36px; }

.profile-card .pname {
  font-family: var(--ff-display); font-style: italic; font-weight: 500;
  font-size: clamp(18px, 4.5vw, 22px);
  letter-spacing: -0.018em; color: var(--bone);
  margin-bottom: 6px; line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.profile-card .pname .heart-ic {
  font-family: var(--ff-body);
  font-size: 13px;
  color: rgba(212,255,58,0.65);
  font-style: normal;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.3s ease;
}
.profile-card:hover .pname .heart-ic { transform: scale(1.18); color: var(--lime); }

.profile-card .pmeta {
  font-family: var(--ff-mono);
  font-size: clamp(8.5px, 2.2vw, 9.5px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap;
  font-weight: 500;
  line-height: 1.4;
}
.profile-card .pmeta .dot-sep {
  width: 2.5px; height: 2.5px;
  border-radius: 50%;
  background: rgba(212,255,58,0.7);
  flex-shrink: 0;
}

/* CTA strip — slides up on hover, replaces info */
.profile-card .pcta {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--lime);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--noir);
  font-weight: 800;
  line-height: 1;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.25s ease;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 10px 22px -6px rgba(212,255,58,0.5);
}
.profile-card .pcta::after {
  content: "→"; font-family: var(--ff-body); font-size: 14px; line-height: 1;
}
/* Show CTA only on devices that can hover (skip mobile to avoid layout jank) */
@media (hover: hover) {
  .profile-card:hover .pcta { transform: translateY(0); opacity: 1; }
  .profile-card:hover .pinfo { transform: translateY(-15%); opacity: 0; }
}

/* Tighter mobile spacing */
@media (max-width: 600px) {
  .profile-card { border-radius: 14px; }
  .profile-card .img-wrap .pbadge,
  .profile-card .img-wrap .page-chip {
    top: 9px; padding: 4px 8px; font-size: 8.5px;
  }
  .profile-card .img-wrap .pbadge { left: 9px; }
  .profile-card .img-wrap .page-chip { right: 9px; }
  .profile-card .pinfo { padding: 0 11px 11px; }
  .profile-card .pinfo::before { width: 20px; height: 1.5px; margin-bottom: 6px; }
  .profile-card .pname { font-size: 17px; margin-bottom: 4px; }
  .profile-card .pname .heart-ic { font-size: 11px; }
  .profile-card .pmeta { font-size: 8px; gap: 4px; }
}

/* ===== VIDEO GRID (videos page) ===== */
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 600px)  { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
.video-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background: var(--noir-2);
  transition: transform 0.4s var(--ease), border-color 0.3s ease;
}
.video-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(212,255,58,0.25);
}
.video-tile iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ===== PROFILE DETAIL PAGE ===== */
.profile-hero {
  position: relative;
  padding: var(--s-7) 0 var(--s-6);
  overflow: hidden;
}
.profile-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(212,255,58,0.08), transparent 70%);
  pointer-events: none;
}
.profile-hero > .container { position: relative; z-index: 1; }
.profile-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: start;
}
@media (min-width: 900px) {
  .profile-hero-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--s-7);
  }
}
/* ===== Profile main image — editorial wrapper with corner brackets ===== */
.profile-main-wrap {
  position: relative;
  padding: 14px;
}
@media (min-width: 600px) { .profile-main-wrap { padding: 18px; } }

/* Decorative L-shaped corner brackets — thin lime lines */
.profile-corner {
  position: absolute;
  width: 24px; height: 24px;
  pointer-events: none;
  z-index: 4;
  opacity: 0.65;
}
.profile-corner::before,
.profile-corner::after {
  content: ""; position: absolute;
  background: var(--lime);
}
.profile-corner::before { width: 100%; height: 1.5px; }
.profile-corner::after  { width: 1.5px; height: 100%; }
.profile-corner-tl { top: 0;    left: 0;    }
.profile-corner-tl::before { top: 0;    left: 0;    }
.profile-corner-tl::after  { top: 0;    left: 0;    }
.profile-corner-tr { top: 0;    right: 0;   }
.profile-corner-tr::before { top: 0;    right: 0;   }
.profile-corner-tr::after  { top: 0;    right: 0;   }
.profile-corner-bl { bottom: 0; left: 0;    }
.profile-corner-bl::before { bottom: 0; left: 0;    }
.profile-corner-bl::after  { bottom: 0; left: 0;    }
.profile-corner-br { bottom: 0; right: 0;   }
.profile-corner-br::before { bottom: 0; right: 0;   }
.profile-corner-br::after  { bottom: 0; right: 0;   }

/* Vertical photo-count label at upper-left edge */
.profile-photo-count {
  position: absolute;
  top: 18px; left: -4px;
  z-index: 5;
  transform: rotate(-90deg);
  transform-origin: left top;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(212,255,58,0.55);
  white-space: nowrap;
}
@media (max-width: 600px) { .profile-photo-count { display: none; } }

.profile-main-img {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(212,255,58,0.15);
  background: var(--noir-2);
  box-shadow:
    0 40px 80px -24px rgba(0,0,0,0.95),
    0 0 100px -20px rgba(212,255,58,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}
.profile-main-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  filter: saturate(1.08);
}
.profile-main-img .pbadge,
.profile-main-img .page-chip {
  position: absolute; z-index: 4;
}
.profile-main-img .pbadge {
  top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px;
  border-radius: 20px;
  background: rgba(212,255,58,0.12);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(212,255,58,0.4);
  color: var(--lime);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.profile-main-img .pbadge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 10px var(--lime);
  animation: phone-pulse 1.6s ease-in-out infinite;
}
.profile-main-img .page-chip {
  top: 16px; right: 16px;
  padding: 8px 12px;
  border-radius: 20px;
  background: var(--lime);
  color: var(--noir);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 10px 22px -4px rgba(212,255,58,0.5);
}

/* Floating editorial chip — bottom-right of profile-main-img */
.profile-img-chip {
  position: absolute; bottom: 18px; right: 18px; z-index: 4;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(10,11,7,0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(212,255,58,0.3);
  text-align: center;
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  box-shadow: 0 16px 32px -10px rgba(0,0,0,0.65);
}
.profile-img-chip .big {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--bone);
  line-height: 1;
  letter-spacing: -0.02em;
}
.profile-img-chip .sm {
  font-family: var(--ff-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}

/* Inline thumbnail strip at bottom-left of main image */
.profile-thumbs {
  position: absolute; bottom: 18px; left: 18px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(10,11,7,0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.65);
}
.profile-thumb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--noir);
  flex-shrink: 0;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lime);
  transition: border-color 0.25s ease;
}
.profile-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.profile-thumb.active { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(212,255,58,0.2); }
.profile-thumb-more { background: rgba(212,255,58,0.1); border-color: rgba(212,255,58,0.3); }

.profile-info-card {
  padding: var(--s-6) var(--s-5);
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(28,30,22,0.85) 0%, rgba(10,11,7,1) 100%);
  border: 1px solid rgba(255,255,255,0.07);
}
@media (min-width: 768px) { .profile-info-card { padding: var(--s-7) var(--s-6); } }
.profile-info-card .eyebrow-tag { margin-bottom: var(--s-4); }
.profile-name {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--bone);
  margin-bottom: var(--s-3);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.profile-name .age-inline {
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 500;
  font-size: 0.55em;
  color: rgba(255,255,255,0.55);
  margin-left: 12px;
  letter-spacing: -0.02em;
}
.profile-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.profile-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--lime); }

.profile-cta-row {
  display: flex; flex-direction: column; gap: var(--s-3);
  margin-bottom: var(--s-6);
}
@media (min-width: 480px) { .profile-cta-row { flex-direction: row; flex-wrap: wrap; } }
.profile-cta-row .btn { flex: 1; justify-content: center; min-width: 0; }

.quick-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: var(--s-5);
}
@media (min-width: 480px) { .quick-stats { grid-template-columns: repeat(4, 1fr); } }
.qs-block {
  padding: 14px 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s var(--ease);
}
.qs-block:hover {
  border-color: rgba(212,255,58,0.3);
  transform: translateY(-2px);
}
.qs-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(212,255,58,0.1);
  color: var(--lime);
  margin-bottom: 8px;
}
.qs-ic svg { width: 14px; height: 14px; }
.qs-v {
  font-family: var(--ff-body);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bone);
  line-height: 1;
  margin-bottom: 5px;
}
.qs-l {
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Action chip strip below quick-stats */
.profile-actions-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: var(--s-5);
  border-top: 1px solid var(--glass-line);
}
.pa-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--bone);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}
.pa-chip svg { width: 13px; height: 13px; }
.pa-chip:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(212,255,58,0.3);
  color: var(--lime);
}
.pa-chip.pa-chip-lime {
  background: var(--lime);
  color: var(--noir);
  border-color: var(--lime);
}
.pa-chip.pa-chip-lime:hover {
  background: var(--lime-2);
  color: var(--noir);
  transform: translateY(-1px);
}

/* ===== About prose (HTML rendered from DB) — proper typography ===== */
.profile-prose {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  color: var(--bone-soft);
}
.profile-prose h1,
.profile-prose .heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  color: var(--bone);
  line-height: 1.1;
  margin: 0 0 var(--s-3);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.profile-prose h2,
.profile-prose .subheading {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.02em;
  color: var(--lime);
  line-height: 1.2;
  margin: var(--s-5) 0 var(--s-3);
}
.profile-prose h3 {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 18px;
  color: var(--bone);
  margin: var(--s-4) 0 var(--s-2);
}
.profile-prose p {
  margin: 0 0 var(--s-4);
  color: var(--bone-soft);
}
.profile-prose p:last-child { margin-bottom: 0; }
.profile-prose a {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-color: rgba(212,255,58,0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.25s ease;
}
.profile-prose a:hover { text-decoration-color: var(--lime); }
.profile-prose strong, .profile-prose b { color: var(--bone); font-weight: 600; }
.profile-prose ul, .profile-prose ol {
  padding-left: 1.4em;
  margin: 0 0 var(--s-4);
}
.profile-prose li {
  margin-bottom: 8px;
  color: var(--bone-soft);
}
.profile-prose li::marker { color: var(--lime); }

/* ===== Profile details grid (4 cards: about / hours / fees / extras) ===== */
.profile-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 768px) { .profile-details-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } }
.detail-card {
  position: relative;
  padding: var(--s-6) var(--s-5);
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(28,30,22,0.85) 0%, rgba(10,11,7,1) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color 0.35s ease, transform 0.45s var(--ease), box-shadow 0.35s ease;
  isolation: isolate;
}
.detail-card:hover {
  border-color: rgba(212,255,58,0.2);
  transform: translateY(-3px);
  box-shadow: 0 28px 56px -20px rgba(0,0,0,0.85);
}
/* Featured variant — Fees card */
.detail-card-featured {
  background: linear-gradient(165deg, #0E1009 0%, #050601 100%);
  border-color: rgba(212,255,58,0.25);
  box-shadow:
    0 28px 56px -20px rgba(0,0,0,0.85),
    0 0 50px -20px rgba(212,255,58,0.2);
}
.detail-card-featured::before {
  content: ""; position: absolute;
  top: -1px; right: -1px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,255,58,0.18) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
.detail-card > * { position: relative; z-index: 1; }

.detail-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--glass-line);
}
.detail-ic {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(212,255,58,0.1);
  border: 1px solid rgba(212,255,58,0.3);
  color: var(--lime);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.detail-ic svg { width: 18px; height: 18px; }
.detail-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 24px);
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0;
  line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.detail-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.detail-row:last-child { border-bottom: none; }
.detail-row .k {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  padding-top: 2px;
}
.detail-row .v {
  font-family: var(--ff-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--bone);
  text-align: right;
}
.detail-row .v .amt {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--lime);
  letter-spacing: -0.01em;
  display: block;
  line-height: 1.1;
}
.detail-row .v .sub {
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.extras-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: var(--s-2);
}
.extra-pill {
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(212,255,58,0.08);
  border: 1px solid rgba(212,255,58,0.25);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--lime);
  transition: all 0.25s ease;
}
.extra-pill:hover {
  background: rgba(212,255,58,0.15);
  border-color: rgba(212,255,58,0.5);
  transform: translateY(-1px);
}
.extras-note {
  margin: var(--s-5) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--lime);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* Photo gallery — uniform editorial grid */
.profile-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 600px)  { .profile-gallery { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 1080px) { .profile-gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery-tile {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.07);
  position: relative;
  isolation: isolate;
  background: var(--noir-2);
  transition: transform 0.45s var(--ease), border-color 0.35s ease, box-shadow 0.4s ease;
}
.gallery-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(212,255,58,0.25);
  box-shadow:
    0 28px 56px -20px rgba(0,0,0,0.85),
    0 0 50px -20px rgba(212,255,58,0.25);
}
.gallery-tile img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform 1s var(--ease), filter 0.5s ease;
  filter: saturate(1.05);
}
.gallery-tile:hover img { transform: scale(1.08); filter: saturate(1.18); }

/* Subtle vertical gradient — top + bottom legibility */
.gallery-tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 60px; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
  pointer-events: none;
}
.gallery-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(10,11,7,0.85) 100%);
  pointer-events: none;
}

/* Top-left number — flat lime tag, no glass */
.gallery-tile .gallery-num {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(10,11,7,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212,255,58,0.3);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--lime);
}

/* Hover overlay — "View" CTA fades in bottom-right */
.gallery-tile .gallery-cta {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--noir);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease);
  box-shadow: 0 10px 22px -4px rgba(212,255,58,0.5);
}
.gallery-tile .gallery-cta svg { width: 11px; height: 11px; }
.gallery-tile:hover .gallery-cta { opacity: 1; transform: translateY(0); }

/* ===== CTA banner with editorial accent ===== */
.profile-cta-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.profile-cta-banner::before {
  content: ""; position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,255,58,0.2) 0%, transparent 70%);
  filter: blur(50px);
  top: -150px; left: -100px;
  pointer-events: none;
  z-index: -1;
}
.profile-cta-banner::after {
  content: ""; position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,255,58,0.15) 0%, transparent 70%);
  filter: blur(40px);
  bottom: -100px; right: -80px;
  pointer-events: none;
  z-index: -1;
}

/* Prev / Next nav */
.prev-next-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 600px) { .prev-next-row { grid-template-columns: 1fr 1fr; } }
.prev-next-btn {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-line);
  color: var(--bone);
  text-decoration: none;
  transition: all var(--t-base);
}
.prev-next-btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--lime-line);
  transform: translateY(-2px);
}
.prev-next-btn.align-right {
  justify-content: flex-end; text-align: right;
}
.prev-next-btn .arr {
  font-family: var(--ff-body);
  font-size: 24px;
  color: var(--lime);
  line-height: 1;
}
.prev-next-btn .lbl {
  display: block;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.prev-next-btn .nm {
  display: block;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--bone);
  letter-spacing: -0.015em;
}

/* ===== CONTACT FORM + INFO CARD ===== */
.contact-form .form-row { margin-bottom: var(--s-4); }
.contact-form .form-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 600px) {
  .contact-form .form-row-2 { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}
.contact-form label {
  display: block;
}
.contact-form .lbl {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-soft);
  margin-bottom: 8px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: var(--bone);
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.5;
  transition: border-color 0.25s ease, background 0.25s ease;
  appearance: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,255,255,0.4); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--lime);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(212,255,58,0.12);
}
.contact-form textarea { resize: vertical; min-height: 120px; }

.contact-info-card {
  padding: var(--s-7) var(--s-5);
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(28,30,22,0.95) 0%, rgba(10,11,7,1) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: var(--s-5);
}
@media (min-width: 768px) { .contact-info-card { padding: var(--s-8) var(--s-7); } }
.contact-info-card .info-row {
  display: flex; align-items: flex-start; gap: var(--s-3);
}
.contact-info-card .info-ic {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  background: rgba(212,255,58,0.12);
  border: 1px solid rgba(212,255,58,0.3);
  color: var(--lime);
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-info-card .info-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.contact-info-card .info-ic svg[fill="currentColor"] { fill: currentColor; stroke: none; }
.contact-info-card .info-l {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-soft);
  margin-bottom: 4px;
}
.contact-info-card .info-v {
  display: block;
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--bone);
  text-decoration: none;
  line-height: 1.5;
}
.contact-info-card a.info-v:hover { color: var(--lime); }
.contact-info-card .info-quick {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: var(--s-5);
  border-top: 1px solid var(--glass-line);
}

/* ===== PRICE CARDS (Fineva pricing tier) ===== */
.btn-block { display: inline-flex; width: 100%; justify-content: center; }
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 768px) { .price-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }

.price-card {
  position: relative;
  padding: var(--s-7) var(--s-5);
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(28,30,22,0.95) 0%, rgba(10,11,7,1) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--bone);
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease;
}
.price-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212,255,58,0.15);
  box-shadow: 0 32px 64px -20px rgba(0,0,0,0.85);
}
.price-card.featured {
  background: linear-gradient(165deg, #0E1009 0%, #050601 100%);
  border-color: rgba(212,255,58,0.35);
  box-shadow:
    0 32px 64px -20px rgba(0,0,0,0.85),
    0 0 80px -20px rgba(212,255,58,0.35);
  transform: scale(1.03);
}
@media (min-width: 768px) {
  .price-card.featured { transform: translateY(-8px) scale(1.04); }
}
.price-badge {
  position: absolute; top: -1px; left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--lime);
  color: var(--noir);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -4px rgba(212,255,58,0.5);
}
.price-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-soft);
  margin-bottom: var(--s-3);
}
.price-card.featured .price-eyebrow { color: var(--lime); }
.price-tier {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 36px);
  letter-spacing: -0.02em;
  color: var(--bone);
  margin-bottom: var(--s-4);
  line-height: 1;
}
.price-amount {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: var(--s-3);
}
.price-amount .cur {
  font-family: var(--ff-body);
  font-size: 22px;
  font-weight: 500;
  color: var(--bone-soft);
}
.price-amount .big {
  font-family: var(--ff-body);
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--bone);
  line-height: 1;
}
.price-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-soft);
  margin-bottom: var(--s-5);
}
.price-list {
  list-style: none; padding: 0; margin: 0 0 var(--s-6);
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.price-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px;
  color: var(--bone);
  line-height: 1.5;
}
.price-list .ic {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(212,255,58,0.18);
  color: var(--lime);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ===== FAQ accordion ===== */
.faq-item {
  border-bottom: 1px solid var(--glass-line);
  padding: var(--s-4) 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 500;
  color: var(--bone);
  padding: var(--s-3) 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--ff-mono);
  font-size: 22px;
  color: var(--lime);
  transition: transform 0.3s ease;
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-body {
  padding: var(--s-3) 0 var(--s-3);
  font-size: 15px;
  color: var(--bone-soft);
  line-height: 1.6;
}

/* ===== CATEGORY TILE — design-only, no images ===== */
.cat-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  align-items: start;
  gap: var(--s-4);
}
@media (min-width: 600px)  { .cat-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cat-tile-grid { grid-template-columns: repeat(3, 1fr); } }

.cat-tile {
  --tile-bg-1: #0F1108;
  --tile-bg-2: #050601;
  --tile-accent: var(--lime);
  --tile-ink: var(--bone);
  --tile-ink-soft: rgba(255,255,255,0.6);
  --tile-line: rgba(255,255,255,0.07);

  position: relative;
  display: flex; flex-direction: column;
  padding: 22px 22px 18px;
  height: auto;
  min-height: 0;
  border-radius: 18px;
  background: linear-gradient(165deg, var(--tile-bg-1) 0%, var(--tile-bg-2) 100%);
  border: 1px solid var(--tile-line);
  color: var(--tile-ink);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease;
}
@media (min-width: 768px) { .cat-tile { padding: 26px 26px 20px; border-radius: 20px; } }
.cat-tile:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--tile-accent) 35%, transparent);
  box-shadow:
    0 32px 64px -20px rgba(0,0,0,0.9),
    0 0 70px -22px var(--tile-accent);
}

/* Grid pattern background */
.cat-tile::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none; z-index: 0;
  -webkit-mask: radial-gradient(ellipse 80% 80% at 30% 30%, black, transparent 85%);
          mask: radial-gradient(ellipse 80% 80% at 30% 30%, black, transparent 85%);
}
/* Big colour blob */
.cat-tile-deco {
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tile-accent) 35%, transparent) 0%, transparent 70%);
  filter: blur(36px);
  top: -90px; right: -90px;
  pointer-events: none; z-index: 0;
  transition: transform 0.7s var(--ease), opacity 0.5s ease;
  opacity: 0.85;
}
.cat-tile:hover .cat-tile-deco {
  transform: scale(1.25) translate(-12px, 12px);
  opacity: 1;
}

/* Number — small mono in top-right */
.cat-tile-num {
  position: absolute; top: var(--s-5); right: var(--s-5);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--tile-accent) 80%, transparent);
  z-index: 2;
}

/* Icon — top-left */
.cat-tile-icon {
  position: relative; z-index: 2;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tile-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tile-accent) 35%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tile-accent);
  margin-bottom: 16px;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 16px -8px color-mix(in srgb, var(--tile-accent) 30%, transparent);
}
.cat-tile-icon svg { width: 22px; height: 22px; }
@media (min-width: 768px) { .cat-tile-icon { width: 48px; height: 48px; } .cat-tile-icon svg { width: 24px; height: 24px; } }

/* Eyebrow */
.cat-tile-eyebrow {
  position: relative; z-index: 2;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tile-ink-soft);
  margin-bottom: 8px;
}

/* Title — big italic display */
.cat-tile-title {
  position: relative; z-index: 2;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--tile-ink);
  margin: 0 0 14px 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  text-transform: capitalize;
}

/* CTA pill (bottom) */
.cat-tile-cta {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--tile-line);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tile-accent);
  width: 100%;
  justify-content: space-between;
}
.cat-tile-cta .arr {
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.35s var(--ease);
  letter-spacing: 0;
}
.cat-tile:hover .cat-tile-cta .arr { transform: translateX(6px); }

/* ===== Variants — make the grid feel varied ===== */
/* v-lime — default lime on noir */
.cat-tile.v-lime { /* uses defaults */ }

/* v-pearl — light noir with bone accent */
.cat-tile.v-pearl {
  --tile-bg-1: #1A1C14;
  --tile-bg-2: #0B0C07;
  --tile-accent: #F5F5EC;
  --tile-line: rgba(255,255,255,0.1);
}
.cat-tile.v-pearl .cat-tile-num { color: var(--lime); }
.cat-tile.v-pearl .cat-tile-icon {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: #F5F5EC;
}
.cat-tile.v-pearl .cat-tile-cta { color: var(--lime); }

/* v-noir — deep black with lime number accent only */
.cat-tile.v-noir {
  --tile-bg-1: #0A0A05;
  --tile-bg-2: #000000;
  --tile-line: rgba(212,255,58,0.12);
}
.cat-tile.v-noir .cat-tile-deco {
  width: 320px; height: 320px;
  top: auto; bottom: -120px; right: auto; left: -120px;
}

/* v-emerald — slight green tint */
.cat-tile.v-emerald {
  --tile-bg-1: #0E140A;
  --tile-bg-2: #050801;
  --tile-accent: #B8FF52;
}

/* ===== CATEGORY CARD ===== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--s-4);
}
@media (min-width: 600px)  { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }

.category-card {
  display: block; position: relative;
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(165deg, rgba(28,30,22,0.9) 0%, rgba(10,11,7,1) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--bone); text-decoration: none;
  transition: transform 0.45s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease;
  isolation: isolate;
}
.category-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212,255,58,0.2);
  box-shadow:
    0 28px 56px -20px rgba(0,0,0,0.85),
    0 0 50px -20px rgba(212,255,58,0.3);
}
.category-card .img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
.category-card .img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1s var(--ease);
  filter: saturate(1.05);
}
.category-card:hover .img-wrap img { transform: scale(1.06); }
.category-card .img-wrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,11,7,0.55) 100%);
}
.category-card .cat-num {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  color: var(--lime);
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.category-card .cat-meta {
  padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
}
.category-card .cat-title {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -0.015em;
  color: var(--bone);
}
.category-card .cat-sub {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.category-card .cat-sub .arrow {
  color: var(--lime);
  font-size: 14px;
  transition: transform 0.3s ease;
}
.category-card:hover .cat-sub .arrow { transform: translateX(4px); }

/* ===== AREA SPOTLIGHT — single-location detail page hero ===== */
.area-spotlight {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(212,255,58,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(212,255,58,0.06) 0%, transparent 60%),
    linear-gradient(165deg, #0F1108 0%, #050601 100%);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 900px) {
  .area-spotlight { grid-template-columns: 1.1fr 1fr; }
}

/* Editorial info side (left) */
.area-info {
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column;
  gap: var(--s-4);
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) { .area-info { padding: var(--s-7) var(--s-7); } }

.area-breadcrumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
}
.area-breadcrumb .bc-link {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}
.area-breadcrumb .bc-link:hover { color: var(--lime); }
.area-breadcrumb .bc-sep { color: rgba(212,255,58,0.4); font-size: 14px; }
.area-breadcrumb .bc-current { color: var(--lime); }

.area-name {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(56px, 9vw, 110px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--bone);
  margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

.area-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.area-tag {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  line-height: 1;
}
.area-tag i {
  font-style: normal; color: var(--lime); margin: 0 2px;
}
.area-tag-lime {
  background: rgba(212,255,58,0.1);
  border-color: rgba(212,255,58,0.35);
  color: var(--lime);
}

.area-desc {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.6;
  color: var(--bone-soft);
  margin: 0;
  max-width: 460px;
}

.area-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 480px) { .area-stats { grid-template-columns: repeat(4, 1fr); } }
.area-stat {
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.area-stat .v {
  font-family: var(--ff-body);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--bone);
  line-height: 1;
  margin-bottom: 5px;
}
.area-stat .v i {
  font-style: normal;
  color: var(--lime);
  font-weight: 500;
  margin-left: 1px;
}
.area-stat .l {
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.area-cta-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: var(--s-3);
}
.area-cta-row .btn { flex: 1; min-width: 0; justify-content: center; }

/* Map side (right) */
.area-map {
  position: relative;
  min-height: 360px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(212,255,58,0.06) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
@media (min-width: 900px) {
  .area-map {
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,0.06);
    min-height: 100%;
  }
}

/* Soft grid background */
.area-map::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent 90%);
          mask: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent 90%);
  pointer-events: none;
  z-index: 0;
}

.area-map-chip {
  position: absolute; top: 18px; left: 18px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(212,255,58,0.12);
  border: 1px solid rgba(212,255,58,0.35);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}

/* Single-letter italic watermark in background */
.area-map-watermark {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(160px, 32vw, 280px);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(212,255,58,0.18);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

.area-map svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}

/* Main pulsing dot */
.area-main-dot .area-dot-core {
  transform-origin: center;
  transform-box: fill-box;
  animation: coverage-pulse 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(212,255,58,0.9));
}

/* Concentric expanding ripples — radar style */
.area-pulse-rings circle {
  transform-origin: 160px 160px;
  animation: area-ping 3s ease-out infinite;
}
.area-pulse-rings circle.ring-2 { animation-delay: 1s; }
.area-pulse-rings circle.ring-3 { animation-delay: 2s; }
@keyframes area-ping {
  0%   { transform: scale(0.35); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Faint neighbour connections — flowing dashes */
.area-conn line {
  stroke-dasharray: 4 6;
  animation: coverage-flow 2.2s linear infinite;
}
.area-conn line:nth-child(2n) { animation-direction: reverse; animation-duration: 2.8s; }

/* Neighbour dots — subtle bone pulse */
.area-neighbours > g circle:last-child {
  transform-origin: center;
  transform-box: fill-box;
  animation: coverage-pulse 3.4s ease-in-out infinite;
}
.area-neighbours > g:nth-child(2) circle:last-child { animation-delay: 0.6s; }
.area-neighbours > g:nth-child(3) circle:last-child { animation-delay: 1.2s; }
.area-neighbours > g:nth-child(4) circle:last-child { animation-delay: 1.8s; }
.area-neighbours > g:nth-child(5) circle:last-child { animation-delay: 2.4s; }

@media (prefers-reduced-motion: reduce) {
  .area-main-dot .area-dot-core,
  .area-pulse-rings circle,
  .area-conn line,
  .area-neighbours > g circle:last-child {
    animation: none;
  }
}

/* ===== CATEGORY SPOTLIGHT — reuses area-spotlight base, custom visual side ===== */
.cat-spotlight {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(212,255,58,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(212,255,58,0.06) 0%, transparent 60%),
    linear-gradient(165deg, #0F1108 0%, #050601 100%);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 900px) { .cat-spotlight { grid-template-columns: 1.1fr 1fr; } }

.cat-spotlight-info {
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column;
  gap: var(--s-4);
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) { .cat-spotlight-info { padding: var(--s-7); } }

/* Category icon tile (top-left badge in info side) */
.cat-icon-tile {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: rgba(212,255,58,0.1);
  border: 1px solid rgba(212,255,58,0.35);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lime);
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 22px -8px rgba(212,255,58,0.35);
}
.cat-icon-tile svg { width: 30px; height: 30px; }

/* Visual side (right) — animated floating icons + watermark */
.cat-spotlight-visual {
  position: relative;
  min-height: 360px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(212,255,58,0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.7));
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
@media (min-width: 900px) {
  .cat-spotlight-visual {
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,0.06);
    min-height: 100%;
  }
}
/* Faint grid */
.cat-spotlight-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent 90%);
          mask: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent 90%);
  pointer-events: none;
  z-index: 0;
}

.cat-visual-chip {
  position: absolute; top: 18px; left: 18px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(212,255,58,0.12);
  border: 1px solid rgba(212,255,58,0.35);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}

/* Big italic watermark of the category name */
.cat-visual-watermark {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(56px, 9vw, 100px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(212,255,58,0.22);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  white-space: nowrap;
  text-transform: capitalize;
}

/* Floating category icons - 5 outliers + 1 big center */
.cat-visual-icons {
  position: absolute; inset: 0;
  z-index: 1;
}
.cat-flo {
  position: absolute;
  color: var(--lime);
  filter: drop-shadow(0 0 8px rgba(212,255,58,0.4));
  animation: cat-float 6s ease-in-out infinite;
}
.cat-flo svg { width: 100%; height: 100%; }

/* Layout positions */
.cat-flo-main { top: 50%; left: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); color: var(--lime); opacity: 0.95; }
.cat-flo-main { animation: cat-float-main 5s ease-in-out infinite; }
.cat-flo-1 { top: 14%;  left: 18%;  width: 28px; height: 28px; opacity: 0.5; animation-delay: 0s; }
.cat-flo-2 { top: 22%;  right: 14%; width: 32px; height: 32px; opacity: 0.55; animation-delay: 1.2s; }
.cat-flo-3 { bottom: 22%; left: 12%; width: 36px; height: 36px; opacity: 0.5; animation-delay: 2.4s; }
.cat-flo-4 { bottom: 16%; right: 18%; width: 28px; height: 28px; opacity: 0.55; animation-delay: 3.6s; }
.cat-flo-5 { top: 48%;  right: 8%;  width: 22px; height: 22px; opacity: 0.45; animation-delay: 4.8s; }

@keyframes cat-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
@keyframes cat-float-main {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
  50%      { transform: translate(-50%, -55%) rotate(3deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .cat-flo, .cat-flo-main { animation: none; }
}

/* ===== COVERAGE MAP — custom Mumbai location card (pure design, no images) ===== */
.coverage-map {
  position: relative;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(212,255,58,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(212,255,58,0.06) 0%, transparent 60%),
    linear-gradient(165deg, #0F1108 0%, #050601 100%);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column;
  padding: var(--s-5);
  gap: var(--s-4);
  min-height: 460px;
}
@media (min-width: 768px) { .coverage-map { padding: var(--s-6); min-height: 540px; } }

/* Decorative grid pattern */
.coverage-map::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent 90%);
          mask: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent 90%);
  pointer-events: none;
  z-index: 0;
}

/* Head row */
.coverage-head {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  flex-shrink: 0;
}
.coverage-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(212,255,58,0.1);
  border: 1px solid rgba(212,255,58,0.35);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}
.coverage-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.coverage-live .live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: phone-pulse 1.4s ease-in-out infinite;
}

/* The canvas where dots, lines, watermark live — fills available space */
.coverage-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  z-index: 1;
  overflow: hidden;
}

/* ── Radar sweep — slow conic rotation, lime tinted ───────────────── */
.coverage-radar {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from 0deg at 50% 65%,
    transparent 0deg,
    transparent 280deg,
    rgba(212,255,58, 0.05) 320deg,
    rgba(212,255,58, 0.22) 350deg,
    rgba(212,255,58, 0.45) 358deg,
    rgba(212,255,58, 0.22) 360deg,
    transparent 360deg
  );
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: coverage-radar-spin 7s linear infinite;
  transform-origin: 50% 65%;
}
@keyframes coverage-radar-spin {
  to { transform: rotate(360deg); }
}

/* Faint dot-grid overlay for technical map feel */
.coverage-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(212,255,58, 0.12) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: 0 0;
  opacity: .45;
  mask-image: radial-gradient(ellipse at center,
    rgba(0,0,0, .9) 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center,
    rgba(0,0,0, .9) 35%, transparent 75%);
}

@media (prefers-reduced-motion: reduce) {
  .coverage-radar { animation: none !important; opacity: .25; }
}

/* Background watermark — small, subtle bottom-right accent (not a competing layer) */
.coverage-watermark {
  position: absolute;
  bottom: -12px; right: -16px;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(60px, 11vw, 110px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,255,58,0.22);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  white-space: nowrap;
  opacity: 0.7;
}
.coverage-watermark .dot {
  color: rgba(212,255,58,0.7);
  -webkit-text-stroke: 0;
}

/* SVG fills the canvas */
.coverage-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Lines: continuous "data flowing" effect via marching dashes — loops forever */
.coverage-lines path {
  stroke-dasharray: 6 8;
  stroke-dashoffset: 0;
  animation: coverage-flow 1.6s linear infinite;
}
/* Alternate directions / speeds for visual rhythm */
.coverage-lines path:nth-child(2n) { animation-duration: 2.2s; animation-direction: reverse; }
.coverage-lines path:nth-child(3n) { animation-duration: 1.9s; }
.coverage-lines path:nth-child(5n) { animation-duration: 2.6s; animation-direction: reverse; }
@keyframes coverage-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -28; } /* exactly 2× pattern (6+8 = 14, ×2 = 28) so it loops seamlessly */
}

/* Subtle glow pulse on the lines too — adds liveliness */
.coverage-lines { animation: coverage-glow 4s ease-in-out infinite; }
@keyframes coverage-glow {
  0%, 100% { stroke-opacity: 0.3; }
  50%      { stroke-opacity: 0.55; }
}

/* Dot groups pulse — apply animation to the inner cdot */
.coverage-dots .cdot {
  transform-origin: center;
  transform-box: fill-box;
  animation: coverage-pulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(212,255,58,0.65));
}
.coverage-dots .cdot-major {
  animation-duration: 2s;
  filter: drop-shadow(0 0 10px rgba(212,255,58,0.9));
}
.coverage-dots .cdot-group:nth-of-type(1)  .cdot { animation-delay: 0.0s; }
.coverage-dots .cdot-group:nth-of-type(2)  .cdot { animation-delay: 0.3s; }
.coverage-dots .cdot-group:nth-of-type(3)  .cdot { animation-delay: 0.7s; }
.coverage-dots .cdot-group:nth-of-type(4)  .cdot { animation-delay: 1.0s; }
.coverage-dots .cdot-group:nth-of-type(5)  .cdot { animation-delay: 1.4s; }
.coverage-dots .cdot-group:nth-of-type(6)  .cdot { animation-delay: 0.2s; }
.coverage-dots .cdot-group:nth-of-type(7)  .cdot { animation-delay: 0.8s; }
.coverage-dots .cdot-group:nth-of-type(8)  .cdot { animation-delay: 1.6s; }
.coverage-dots .cdot-group:nth-of-type(9)  .cdot { animation-delay: 0.5s; }
.coverage-dots .cdot-group:nth-of-type(10) .cdot { animation-delay: 1.2s; }
@keyframes coverage-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.7); opacity: 0.55; }
}

/* Labels — uniform off-white, dark shadow keeps them readable against lime dots */
.coverage-labels {
  opacity: 0;
  animation: coverage-labels-in 0.8s ease 1.4s forwards;
  /* SVG drop-shadow filter — gives every label a 1px dark halo */
  filter:
    drop-shadow(0 0 2px rgba(0,0,0,0.95))
    drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}
.coverage-labels text {
  paint-order: stroke fill;
  stroke: rgba(5,6,1,0.7);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
@media (max-width: 599px) { .coverage-labels { opacity: 0 !important; } }
@keyframes coverage-labels-in { to { opacity: 1; } }

/* Bottom info strip */
.coverage-foot {
  position: relative; z-index: 3;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.coverage-title {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--bone);
  margin-bottom: var(--s-3);
}
.coverage-title .ital {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  color: var(--lime);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.coverage-stats {
  display: flex; align-items: center;
  gap: var(--s-3);
}
.coverage-stat {
  display: flex; flex-direction: column;
  gap: 3px;
}
.coverage-stat .v {
  font-family: var(--ff-body);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bone);
  line-height: 1;
}
.coverage-stat .l {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.coverage-sep {
  width: 1px; height: 28px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* Reduced motion: freeze everything */
@media (prefers-reduced-motion: reduce) {
  .coverage-dots .cdot { animation: none; }
  .coverage-lines path { stroke-dashoffset: 0; animation: none; }
  .coverage-labels { opacity: 1; animation: none; }
  .coverage-live .live-dot { animation: none; }
}

/* ===== MEDIA CARD (video tile w/ overlay — Fineva pattern) ===== */
.media-card {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--noir-2);
  border: 1px solid var(--glass-line);
  min-height: 360px;
  isolation: isolate;
}
.media-card video, .media-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  position: absolute; inset: 0;
}
.media-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,11,7,0.95) 100%);
  z-index: 1;
}
.media-card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--s-5);
  z-index: 2;
}
.media-card-overlay .phone-card-tag {
  position: static; display: inline-flex; margin-bottom: 10px;
}
.media-card-title {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--bone);
  margin-bottom: 6px;
}
.media-card-title .ital {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  color: var(--lime);
}
.media-card-meta {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* Prose */
.prose, .prose-card { max-width: var(--container-text); }
.prose-card {
  padding: var(--s-7) var(--s-5);
  background: rgba(20, 22, 18, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-2xl);
}
@media (min-width: 768px) { .prose-card { padding: var(--s-8) var(--s-7); } }
.prose h1, .prose-card h1, .prose h2, .prose-card h2 {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  color: var(--bone); margin: 0 0 var(--s-4);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  line-height: 1.1;
}
.prose h1, .prose-card h1 { font-size: clamp(30px, 4.5vw, 44px); }
.prose h2, .prose-card h2 { font-size: clamp(24px, 3.2vw, 32px); margin-top: var(--s-7); }
.prose-card h2:first-child, .prose h2:first-child { margin-top: 0; }
.prose h3, .prose-card h3 {
  font-family: var(--ff-body); font-size: 14px; font-weight: 600;
  color: var(--lime); letter-spacing: 0.06em; text-transform: uppercase;
  margin: var(--s-6) 0 var(--s-3);
}
.prose p, .prose-card p {
  font-size: 15.5px; line-height: 1.75;
  color: var(--bone-soft); margin-bottom: var(--s-4);
}
.prose p strong, .prose-card p strong { color: var(--bone); }
.prose a, .prose-card a {
  color: var(--lime); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(212, 255, 58, 0.4);
}
.prose a:hover, .prose-card a:hover { color: var(--lime-2); }
.prose ul, .prose-card ul, .prose ol, .prose-card ol {
  padding-left: var(--s-5); margin-bottom: var(--s-5); color: var(--bone-soft);
}
.prose ul li, .prose-card ul li, .prose ol li, .prose-card ol li {
  margin-bottom: var(--s-3); line-height: 1.7; font-size: 15.5px;
}
.prose ul li::marker, .prose-card ul li::marker { color: var(--lime); }
.prose ol, .prose-card ol { list-style: none; counter-reset: f2; padding-left: 0; }
.prose ol li, .prose-card ol li { counter-increment: f2; position: relative; padding-left: 48px; }
.prose ol li::before, .prose-card ol li::before {
  content: counter(f2, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--ff-display); font-style: italic;
  color: var(--lime); font-size: 22px; line-height: 1;
}
.prose-image, .prose-image-block { display: block; border-radius: var(--r-lg); overflow: hidden; margin: var(--s-5) 0; }
.prose-image-block { width: 100%; }

.whatsapp-banner {
  position: relative; display: inline-block;
  border-radius: var(--r-xl); overflow: hidden;
  max-width: 365px; width: 100%;
}
.whatsapp-banner img { width: 100%; height: auto; display: block; }
.whatsapp-banner .mobile-number {
  position: absolute; bottom: 6px; right: 52px;
  padding: 10px; font-size: 16px; font-weight: 900; color: #fff;
}

.section-h2-center {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  text-align: center; color: var(--bone);
  margin-bottom: var(--s-7);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  line-height: 1.1;
}
.section-h2-gradient {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 4.5vw, 44px);
  text-align: center; color: var(--bone);
  margin-bottom: var(--s-6);
  padding: var(--s-5) 0;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--noir-3) 0%, var(--noir-2) 100%);
  border: 1px solid var(--glass-line);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

.cat-pills-row {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  justify-content: center; margin: var(--s-5) 0;
}
.cat-pill {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--noir-3);
  border: 1px solid var(--glass-line);
  color: var(--bone);
  font-family: var(--ff-body); font-size: 13px; font-weight: 500;
  transition: all var(--t-base);
}
.cat-pill:hover {
  background: var(--lime); color: var(--noir); border-color: var(--lime);
  transform: translateY(-1px);
}

.heding-wrap {
  margin-top: var(--s-6); padding: var(--s-5);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(212, 255, 58, 0.08), rgba(212, 255, 58, 0.02));
  border: 1px solid var(--lime-line);
  text-align: center;
}
.heding-h2 {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--bone); margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

.tiles-grid, .tiles-grid-4 {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3);
}
@media (min-width: 768px) { .tiles-grid, .tiles-grid-4 { grid-template-columns: repeat(4, 1fr); } }
.tiles-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.tile-link {
  display: block; border-radius: var(--r-lg); overflow: hidden;
  background: var(--noir-3); border: 1px solid var(--glass-line);
  transition: all var(--t-base);
  aspect-ratio: 3 / 4;
}
.tile-link:hover { border-color: var(--lime-line); transform: translateY(-2px); }
.tile-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.tile-link:hover img { transform: scale(1.05); }

.gif-video { width: 100%; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--glass-line); }

.loc-video-wrap {
  border-radius: var(--r-xl); overflow: hidden;
  max-width: 800px; margin: 0 auto;
  border: 1px solid var(--glass-line);
}
.loc-video-wrap video { width: 100%; height: auto; display: block; }
.loc-pills-row { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }

.etiquette-list { margin: var(--s-5) 0; }
.etiquette-list p {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--glass-line);
  font-size: 15.5px; line-height: 1.7; color: var(--bone-soft);
  margin: 0;
}
.etiquette-list p:last-child { border-bottom: 0; }
.etiquette-list p img {
  width: 24px; height: 24px; flex-shrink: 0; margin-top: 4px;
  filter: hue-rotate(40deg) saturate(2);
}
.etiquette-list p strong, .etiquette-list p b { color: var(--bone); }
.etiquette-list p a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

.ms-rail {
  display: flex; gap: var(--s-3); overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--pad-x) var(--s-5);
  margin: 0 calc(-1 * var(--pad-x));
  scrollbar-width: none;
}
.ms-rail::-webkit-scrollbar { display: none; }
.ms-slide-link {
  scroll-snap-align: start; flex-shrink: 0;
  width: 200px; aspect-ratio: 3 / 4;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--glass-line);
  background: var(--noir-3);
  transition: all var(--t-base);
}
.ms-slide-link:hover { border-color: var(--lime-line); transform: translateY(-2px); }
.ms-slide-link img { width: 100%; height: 100%; object-fit: cover; }

.other-cat-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 600px) { .other-cat-grid { grid-template-columns: 1fr 1fr; } }
.other-cat-col { display: flex; flex-direction: column; gap: var(--s-3); }
.other-cat-btn {
  display: block; padding: 14px 24px;
  background: var(--noir-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-md); color: var(--bone);
  font-family: var(--ff-body); font-size: 15px; font-weight: 500;
  text-align: center; transition: all var(--t-base);
}
.other-cat-btn:hover {
  background: var(--lime); color: var(--noir); border-color: var(--lime);
  transform: translateX(4px);
}

/* Drawer + sticky CTA */
.drawer {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 11, 7, 0.96);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  transform: translateX(100%);
  transition: transform var(--t-slow);
  overflow-y: auto; display: flex; flex-direction: column;
  padding: var(--s-5);
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-7); }
.drawer-eyebrow { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--lime); }
.drawer-nav { flex: 1; display: flex; flex-direction: column; }
.drawer-link {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding: var(--s-4) 0;
  font-family: var(--ff-display); font-style: italic; font-weight: 500;
  font-size: clamp(28px, 6vw, 40px);
  color: var(--bone); border-bottom: 1px solid var(--glass-line);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  transition: color var(--t-base), padding-left var(--t-base);
}
.drawer-link:hover { color: var(--lime); padding-left: var(--s-3); }
.drawer-link .index {
  font-family: var(--ff-mono); font-style: normal;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--bone-faint); width: 28px; flex-shrink: 0;
}
.drawer-link .arrow { margin-left: auto; opacity: 0; color: var(--lime); font-style: normal; transition: opacity var(--t-base), transform var(--t-base); }
.drawer-link:hover .arrow { opacity: 1; transform: translateX(4px); }
.drawer-foot { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--glass-line); }
.drawer-foot .ctas { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.drawer-foot .legal { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--bone-faint); }

/* Sticky bottom CTA — header-style gradient fade, compact buttons */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 40;
  background: transparent;
  border: 0;
  padding: 22px var(--pad-x) calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: center;
  isolation: isolate;
  pointer-events: none;
}
.sticky-cta > * { pointer-events: auto; }
/* Gradient: transparent at top fades down to opaque black — mirrors the header from below */
.sticky-cta::before {
  content: ""; position: absolute;
  inset: 0; top: -40px;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.88) 70%,
    rgba(0,0,0,0.96) 100%
  );
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 22%, #000 45%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 22%, #000 45%, #000 100%);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  pointer-events: none;
  z-index: -1;
}

@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* Compact button styling — matches header pill size */
.sticky-cta .btn {
  flex: 1;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
  line-height: 1;
  min-height: 0;
  gap: 8px;
}
.sticky-cta .btn svg { width: 15px; height: 15px; }
/* Primary (WhatsApp) — bone fill like header Sign Up */
.sticky-cta .btn-primary {
  background: var(--bone);
  color: var(--noir);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.sticky-cta .btn-primary:hover {
  background: #F5F5EC;
  box-shadow: 0 8px 20px -8px rgba(255,255,255,0.25);
}
/* Glass (Call) — subtle pill like header nav-pill */
.sticky-cta .btn-glass {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--bone);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sticky-cta .btn-glass:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(212,255,58,0.3);
  color: var(--lime);
}

body.has-sticky-cta { padding-bottom: 78px; }
@media (min-width: 1024px) { body.has-sticky-cta { padding-bottom: 0; } }

.site-foot { margin-top: var(--s-9); padding-top: var(--s-7); padding-bottom: var(--s-5); border-top: 1px solid var(--glass-line); }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-4); margin-bottom: var(--s-6); }
@media (min-width: 768px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot-grid h5,
.foot-col h5 {
  font-family: var(--ff-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--lime); margin-bottom: var(--s-4); font-weight: 600;
}
.foot-grid ul,
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-grid ul li,
.foot-col ul li { margin-bottom: var(--s-2); }
.foot-grid ul li a,
.foot-col ul li a {
  color: var(--bone-soft); font-size: 14px; transition: color var(--t-quick);
  text-decoration: none;
}
.foot-grid ul li a:hover,
.foot-col ul li a:hover { color: var(--lime); }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
  padding-top: var(--s-5); border-top: 1px solid var(--glass-line);
  font-family: var(--ff-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--bone-faint);
}

/* ===== SITE FOOT V2 — editorial with CTA strip, marquee, watermark ===== */
.site-foot-v2 {
  position: relative;
  margin-top: var(--s-9);
  padding-top: 0;
  border-top: 0;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, #0A0B07 30%, #050601 100%);
}

/* Top CTA strip */
.foot-cta-strip {
  position: relative;
  padding: clamp(56px, 10vh, 96px) 0 clamp(48px, 8vh, 72px);
  border-top: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}
.foot-cta-strip::before {
  content: ""; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,255,58,0.12) 0%, transparent 70%);
  filter: blur(50px);
  top: -200px; right: -150px;
  pointer-events: none;
}
.foot-cta-strip::after {
  content: ""; position: absolute;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,255,58,0.08) 0%, transparent 70%);
  filter: blur(40px);
  bottom: -180px; left: -120px;
  pointer-events: none;
}
.foot-cta-strip > .container { position: relative; z-index: 1; }
.foot-headline {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--bone);
  margin: 0 0 var(--s-4);
  max-width: 880px;
}
.foot-headline .ital {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.foot-sub {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--bone-soft);
  max-width: 600px;
  margin: 0 0 var(--s-6);
  line-height: 1.6;
}

/* Marquee ticker */
.foot-marquee {
  position: relative;
  padding: var(--s-5) 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  background: rgba(0,0,0,0.3);
}
.foot-marquee-track {
  display: inline-flex; align-items: center;
  gap: var(--s-5);
  animation: foot-marquee 40s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.foot-marquee-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lime);
  text-transform: uppercase;
}
.foot-marquee-item em {
  font-style: normal;
  font-family: var(--ff-display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 1.15em;
  color: var(--bone);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-style: italic;
}
.foot-marquee-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(212,255,58,0.5);
}
@keyframes foot-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Brand area in footer */
.foot-grid-v2 {
  padding-top: var(--s-7);
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--s-7);
}
@media (min-width: 768px) { .foot-grid-v2 { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-7) var(--s-6); } }
.foot-grid-v2 .col-brand { grid-column: 1 / -1; }
@media (min-width: 768px) { .foot-grid-v2 .col-brand { grid-column: auto; } }

.foot-brand-blurb {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone-soft);
  margin: 0 0 var(--s-5);
  max-width: 320px;
}
.foot-social {
  display: inline-flex; align-items: center; gap: 10px;
}
.foot-social-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--bone);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: all 0.25s ease;
}
.foot-social-btn:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--noir);
  transform: translateY(-2px);
}
.foot-social-btn svg { width: 16px; height: 16px; }

/* Giant lime watermark */
.foot-watermark {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(80px, 22vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,255,58,0.18);
  text-align: center;
  user-select: none;
  pointer-events: none;
  margin: var(--s-7) 0 var(--s-4);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.foot-watermark .dot {
  color: var(--lime);
  -webkit-text-stroke: 0;
}

.foot-bottom-v2 {
  margin-top: 0;
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ===== Site-wide scroll reveal animation system ===== */
@media (prefers-reduced-motion: no-preference) {
  /* Reveal-on-scroll: any element with .reveal starts hidden, slides up on view */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Variants */
  .reveal-x {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
  }
  .reveal-x.is-visible { opacity: 1; transform: translateX(0); }

  .reveal-scale {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
  }
  .reveal-scale.is-visible { opacity: 1; transform: scale(1); }

  /* Auto-apply to common layout elements */
  .section-intro,
  .stats-grid,
  .feat-2col,
  .advantages-grid,
  .tips-grid,
  .stories-grid,
  .price-grid,
  .profile-details-grid,
  .category-grid,
  .cat-tile-grid,
  .profile-grid,
  .profile-rail,
  .feature-block,
  .deco-card,
  .media-card,
  .trust-strip,
  .prose-card {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    will-change: opacity, transform;
  }
  .section-intro.is-visible,
  .stats-grid.is-visible,
  .feat-2col.is-visible,
  .advantages-grid.is-visible,
  .tips-grid.is-visible,
  .stories-grid.is-visible,
  .price-grid.is-visible,
  .profile-details-grid.is-visible,
  .category-grid.is-visible,
  .cat-tile-grid.is-visible,
  .profile-grid.is-visible,
  .profile-rail.is-visible,
  .feature-block.is-visible,
  .deco-card.is-visible,
  .media-card.is-visible,
  .trust-strip.is-visible,
  .prose-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered children — gives grids a cascading entrance */
  .stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .stagger.is-visible > * { opacity: 1; transform: translateY(0); }
  .stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
  .stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
  .stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
  .stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
  .stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
  .stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
  .stagger.is-visible > *:nth-child(7) { transition-delay: 0.47s; }
  .stagger.is-visible > *:nth-child(8) { transition-delay: 0.54s; }

  /* Animated number counter — when in view, gets .is-counting class */
  .count-up { display: inline-block; }
}

/* Spotlight cursor effect — lime glow that follows the mouse on cards */
@media (hover: hover) and (min-width: 900px) {
  .advantage-card,
  .tip-card,
  .detail-card,
  .cat-tile {
    --mx: 50%; --my: 50%;
    position: relative;
  }
  .advantage-card::before,
  .tip-card::before,
  .detail-card::before,
  .cat-tile::before { /* keep existing ::before if defined */ }
  .advantage-card::after,
  .tip-card::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(280px circle at var(--mx) var(--my), rgba(212,255,58,0.08), transparent 60%);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 0;
  }
  .advantage-card:hover::after,
  .tip-card:hover::after {
    opacity: 1;
  }
  .advantage-card > *,
  .tip-card > * { position: relative; z-index: 1; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.no-scroll { overflow: hidden; }
.dot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--lime); display: inline-block; }

/* ════════════════════════════════════════════════════════════════
   .cat-tile NUCLEAR override — explicit max-height + flex lock
   ════════════════════════════════════════════════════════════════ */
.cat-tile-grid {
  align-items: start !important;
  align-content: start !important;
  grid-auto-rows: min-content !important;
  grid-template-rows: auto !important;
}
.cat-tile {
  min-height: 0 !important;
  height: auto !important;
  max-height: 260px !important;
  aspect-ratio: auto !important;
  align-self: start !important;
}
.cat-tile-title {
  margin: 0 0 12px 0 !important;
  flex-grow: 0 !important;
}
.cat-tile-cta {
  margin-top: auto !important;
}
.cat-tile > * {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}