/* ============================================================
   BARKER DEVELOPMENT — MAIN DESIGN SYSTEM
   Ultra-Luxury Real Estate | Baja California Sur, Mexico
   ============================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --black:        #0a0a0a;
  --black-soft:   #0d0d0d;
  --black-warm:   #0f0c05;
  --black-deep:   #050504;
  --cream:        #ffe5a6;
  --gold:         #d7af4d;
  --gold-dark:    #c08e31;
  --gold-light:   #e8c96a;
  --gold-muted:   rgba(215,175,77,.4);
  --gold-faint:   rgba(215,175,77,.06);
  --text-primary: #f0e8d4;
  --text-muted:   rgba(255,229,166,.45);
  --text-faint:   rgba(255,229,166,.22);

  --font-display: 'Figtree', sans-serif;
  --font-accent:  'Cormorant Garamond', serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  --ease-luxury:  cubic-bezier(.25,.46,.45,.94);
  --ease-drama:   cubic-bezier(.76,0,.24,1);

  --section-pad:  clamp(5rem,10vw,10rem);
  --container:    min(1380px, 92vw);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--text-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; }
input,textarea,select { font-family:inherit; }

/* ── LOADER ─────────────────────────────────────────────────── */
#loader {
  position:fixed; inset:0; background:#000;
  z-index:9999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2.5rem;
  transition: opacity .8s var(--ease-luxury), visibility .8s;
}
#loader.out { opacity:0; visibility:hidden; pointer-events:none; }

.loader-wordmark {
  font-family: var(--font-display);
  font-size:clamp(1.2rem,3vw,1.8rem);
  font-weight:700; letter-spacing:.35em;
  text-transform:uppercase; color:var(--cream);
  opacity:0; transform:translateY(16px);
  transition: opacity .9s var(--ease-luxury) .2s, transform .9s var(--ease-luxury) .2s;
}
.loader-wordmark.show { opacity:1; transform:translateY(0); }

.loader-sub {
  font-family: var(--font-display);
  font-size:.6rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--gold-muted);
  opacity:0;
  transition: opacity .6s ease .6s;
}
.loader-sub.show { opacity:1; }

.loader-bar-wrap {
  width:min(220px, 60vw); height:1px;
  background:rgba(215,175,77,.12); overflow:hidden;
}
#loader-bar {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold-dark), var(--cream));
  transition:width .08s linear;
}
#loader-pct {
  font-family:var(--font-display); font-size:.6rem;
  letter-spacing:.2em; color:var(--gold); text-transform:uppercase;
}

/* ── CUSTOM CURSOR ──────────────────────────────────────────── */
.cur-outer,.cur-inner {
  position:fixed; border-radius:50%;
  pointer-events:none; z-index:9998;
  will-change:transform;
}
.cur-outer {
  width:38px; height:38px;
  border:1px solid rgba(215,175,77,.45);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease-luxury), height .35s var(--ease-luxury),
             border-color .35s ease, opacity .3s ease;
}
.cur-inner {
  width:5px; height:5px; background:var(--gold);
  transform:translate(-50%,-50%);
  transition:transform .1s ease, opacity .3s ease;
}
.cursor-hover .cur-outer {
  width:60px; height:60px; border-color:var(--gold);
}
@media (pointer:coarse){ .cur-outer,.cur-inner { display:none; } }

/* ── NAVIGATION ─────────────────────────────────────────────── */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.75rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .45s ease, padding .45s ease,
             backdrop-filter .45s ease, transform .4s var(--ease-luxury),
             border-bottom-color .45s ease;
  border-bottom:1px solid transparent;
}
.site-nav.scrolled {
  background:rgba(8,8,8,.88);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  padding:1.1rem 2.5rem;
  border-bottom-color:rgba(215,175,77,.1);
}
.site-nav.hidden { transform:translateY(-100%); }

.nav-logo-img {
  height:111px; width:auto;
  transition:opacity .3s ease;
}
.nav-logo-text {
  font-family:var(--font-display); font-weight:800;
  font-size:1.15rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cream);
  display:flex; flex-direction:column; gap:0;
}
.nav-logo-text span {
  font-family:var(--font-accent); font-style:italic;
  font-size:1.6rem; font-weight:400; letter-spacing:.04em;
  color:var(--gold); line-height:1;
}
.nav-logo-text small {
  font-family:var(--font-display); font-size:.45rem;
  font-weight:600; letter-spacing:.45em;
  color:rgba(215,175,77,.65); text-transform:uppercase;
}

.nav-links {
  display:flex; align-items:center; gap:2.75rem;
}
.nav-links a {
  font-family:var(--font-display); font-size:.75rem;
  font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,229,166,.65);
  position:relative; transition:color .3s ease;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px;
  background:var(--gold); transition:width .3s var(--ease-luxury);
}
.nav-links a:hover { color:var(--gold); }
.nav-links a:hover::after { width:100%; }

.nav-cta {
  padding:.6rem 1.6rem !important;
  border:1px solid rgba(215,175,77,.45) !important;
  color:var(--gold) !important;
  transition:background .3s ease, border-color .3s ease !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { background:rgba(215,175,77,.09) !important; border-color:var(--gold) !important; }

.nav-toggle {
  display:none; flex-direction:column;
  gap:5px; padding:6px; z-index:1001;
}
.nav-toggle span {
  display:block; width:24px; height:1px;
  background:var(--cream); transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-mobile {
  display:none; position:fixed; inset:0;
  background:rgba(5,5,4,.97); backdrop-filter:blur(24px);
  z-index:999; flex-direction:column;
  align-items:center; justify-content:center; gap:2.75rem;
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease-luxury);
}
.nav-mobile.open { display:flex; opacity:1; pointer-events:all; }
.nav-mobile a {
  font-family:var(--font-display); font-size:2.2rem;
  font-weight:300; color:var(--cream); letter-spacing:.05em;
  transition:color .3s ease;
}
.nav-mobile a:hover { color:var(--gold); }

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  position:relative; height:100vh; min-height:700px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#hero-canvas {
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
}
.hero-bg-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
  filter:brightness(.32) saturate(.75);
  transform:scale(1.05);
  transition:transform 8s ease-out;
}
.hero-bg-img.loaded { transform:scale(1); }

.hero-overlay {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,10,10,.2) 0%,
    rgba(10,10,10,.1) 40%,
    rgba(10,10,10,.7) 80%,
    rgba(10,10,10,.95) 100%);
}
.hero-mouse-gradient {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,
    rgba(215,175,77,.07) 0%, transparent 65%);
  transition:background .15s linear;
}

.hero-content {
  position:relative; z-index:4;
  text-align:center; padding:0 2rem;
  max-width:1060px;
}
.hero-eyebrow {
  display:inline-block;
  font-family:var(--font-display); font-size:.65rem;
  font-weight:600; letter-spacing:.45em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:2rem; opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease-luxury) .4s, transform .8s var(--ease-luxury) .4s;
}
.hero-eyebrow.show { opacity:1; transform:translateY(0); }

.hero-title {
  font-family:var(--font-display);
  font-size:clamp(3.8rem,8.5vw,9rem);
  font-weight:800; line-height:.93;
  color:var(--cream); margin-bottom:2rem;
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease-luxury) .6s, transform .9s var(--ease-luxury) .6s;
}
.hero-title.show { opacity:1; transform:translateY(0); }
.hero-title .accent {
  color:var(--gold); font-style:italic;
  font-family:var(--font-accent);
  font-weight:600;
  position:relative; display:inline-block;
}
.hero-title .accent::after {
  content:''; position:absolute; bottom:.05em; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, var(--gold-dark), var(--cream), var(--gold-dark));
  border-radius:2px;
}

.hero-sub {
  font-size:clamp(1rem,1.8vw,1.2rem); font-weight:300;
  color:rgba(255,229,166,.55); max-width:580px;
  margin:0 auto 3rem; line-height:1.75;
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease-luxury) .8s, transform .8s var(--ease-luxury) .8s;
}
.hero-sub.show { opacity:1; transform:translateY(0); }

.hero-actions {
  display:flex; align-items:center; justify-content:center;
  gap:1.5rem; flex-wrap:wrap;
  opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease-luxury) 1s, transform .8s var(--ease-luxury) 1s;
}
.hero-actions.show { opacity:1; transform:translateY(0); }

.btn-primary {
  display:inline-flex; align-items:center; gap:.75rem;
  padding:1.1rem 2.5rem;
  background:var(--gold); color:var(--black);
  font-family:var(--font-display); font-size:.78rem;
  font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:color .3s ease;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:var(--cream); transform:translateX(-100%);
  transition:transform .45s var(--ease-drama);
}
.btn-primary:hover::before { transform:translateX(0); }
.btn-primary span,.btn-primary svg { position:relative; z-index:1; }
.btn-primary:hover svg { transform:translateX(4px); }
.btn-primary svg { transition:transform .3s ease; }

.btn-ghost {
  display:inline-flex; align-items:center; gap:.75rem;
  padding:1.05rem 2.5rem;
  border:1px solid rgba(215,175,77,.4);
  color:rgba(255,229,166,.7);
  font-family:var(--font-display); font-size:.78rem;
  font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.btn-ghost:hover {
  border-color:var(--gold); color:var(--gold);
  background:rgba(215,175,77,.05);
}

.hero-scroll-hint {
  position:absolute; bottom:2.5rem; left:50%;
  transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  opacity:0; animation:fadeIn 1s var(--ease-luxury) 1.6s forwards;
}
.scroll-line {
  width:1px; height:52px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  animation:scrollPulse 2.2s ease-in-out infinite;
}
.scroll-lbl {
  font-family:var(--font-display); font-size:.55rem;
  letter-spacing:.35em; text-transform:uppercase;
  color:rgba(215,175,77,.5);
  writing-mode:vertical-lr; transform:rotate(180deg);
}
@keyframes scrollPulse {
  0%,100%{ opacity:1; transform:scaleY(1); }
  50%{ opacity:.3; transform:scaleY(.65); }
}
@keyframes fadeIn { to{ opacity:1; } }

/* ── SECTION UTILITIES ──────────────────────────────────────── */
.section-wrap {
  max-width:var(--container); margin:0 auto; padding:0 2rem;
}
.sec-tag {
  font-family:var(--font-display); font-size:.62rem;
  font-weight:600; letter-spacing:.4em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:1.5rem; display:flex; align-items:center; gap:1rem;
}
.sec-tag::before {
  content:''; width:32px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.sec-heading {
  font-family:var(--font-display); font-weight:800;
  line-height:1.0; color:var(--cream);
}
.sec-heading .ital {
  font-style:italic; color:var(--gold);
  font-family:var(--font-accent); font-weight:600;
}
.sec-body {
  line-height:1.85; color:var(--text-muted);
  font-weight:300;
}
.gold-rule {
  width:56px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
  margin:2rem 0;
}

/* ── MARQUEE BAND ───────────────────────────────────────────── */
.marquee-band {
  padding:1.5rem 0; overflow:hidden;
  background:linear-gradient(90deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-dark) 100%);
}
.marquee-inner {
  display:flex; gap:0; white-space:nowrap;
  animation:mq 30s linear infinite;
}
.marquee-inner:hover { animation-play-state:paused; }
.marquee-item {
  flex-shrink:0; padding:0 2.5rem;
  font-family:var(--font-display); font-size:.8rem;
  font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--black);
  display:flex; align-items:center; gap:2.5rem;
}
.marquee-item::after {
  content:'✦'; font-size:.6em; color:rgba(0,0,0,.3);
}
@keyframes mq { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ── STATS / WHY CABO ───────────────────────────────────────── */
.why-cabo {
  padding:var(--section-pad) 0;
  background:var(--black-warm);
  border-top:1px solid rgba(215,175,77,.07);
  border-bottom:1px solid rgba(215,175,77,.07);
}
.why-cabo-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:6rem; align-items:center;
}
.why-cabo-text h2 {
  font-size:clamp(2.5rem,4.5vw,4.5rem); margin-bottom:1.5rem;
}
.why-cabo-text .sec-body {
  font-size:1.05rem; margin-bottom:2.5rem;
}
.link-arrow {
  font-family:var(--font-display); font-size:.75rem;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:.6rem;
  border-bottom:1px solid rgba(215,175,77,.3); padding-bottom:.2rem;
  transition:gap .3s ease, border-color .3s ease;
}
.link-arrow:hover { gap:1.1rem; border-color:var(--gold); }

.stats-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
}
.stat-box {
  padding:2.5rem 2rem;
  background:rgba(215,175,77,.03);
  border:1px solid rgba(215,175,77,.08);
  position:relative; overflow:hidden;
  transition:border-color .3s ease, background .3s ease;
}
.stat-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--gold-dark), var(--cream));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-luxury);
}
.stat-box:hover { border-color:rgba(215,175,77,.22); background:rgba(215,175,77,.05); }
.stat-box:hover::before { transform:scaleX(1); }
.stat-num {
  font-family:var(--font-display); font-size:clamp(2.5rem,4vw,4rem);
  font-weight:800; color:var(--cream); line-height:1;
  margin-bottom:.5rem; display:flex; align-items:flex-start; gap:.08em;
}
.stat-sfx { font-size:.5em; color:var(--gold); margin-top:.3em; }
.stat-lbl {
  font-size:.72rem; font-weight:300; letter-spacing:.06em;
  color:rgba(255,229,166,.38); text-transform:uppercase;
  font-family:var(--font-body);
}

/* ── DEVELOPMENTS GRID ──────────────────────────────────────── */
.developments {
  padding:var(--section-pad) 0; background:var(--black);
}
.dev-header {
  display:flex; justify-content:space-between;
  align-items:flex-end; margin-bottom:4rem;
}
.dev-header h2 { font-size:clamp(2.5rem,4vw,4rem); }
.dev-header .view-all {
  font-family:var(--font-display); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid rgba(215,175,77,.3);
  padding-bottom:.2rem; white-space:nowrap;
  transition:border-color .3s ease;
}
.dev-header .view-all:hover { border-color:var(--gold); }

.dev-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.dev-card {
  position:relative; overflow:hidden;
  aspect-ratio:3/4; display:block;
}
.dev-card-visual {
  width:100%; height:100%; position:relative;
  transition:transform .7s var(--ease-luxury);
}
.dev-card:hover .dev-card-visual { transform:scale(1.06); }

.dev-card-img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:1;
}

/* Gradient fallback sits behind real image */
.dev-card-gradient {
  width:100%; height:100%; position:absolute; inset:0;
  z-index:0;
}
.dev-1-grad {
  background:linear-gradient(160deg, #0e0e12 0%, #1a1408 40%, #2a1e0a 70%, #0a0a0a 100%);
}
.dev-2-grad {
  background:linear-gradient(160deg, #0a0f0e 0%, #0d1a12 40%, #102216 70%, #070a08 100%);
}
.dev-3-grad {
  background:linear-gradient(160deg, #0d0d18 0%, #12100e 40%, #1a150a 70%, #080808 100%);
}

.dev-card-decor {
  position:absolute; inset:0; pointer-events:none;
}
.dev-1-decor {
  background: radial-gradient(ellipse 80% 60% at 50% 30%,
    rgba(192,142,49,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 70% 70%,
    rgba(215,175,77,.06) 0%, transparent 50%);
}
.dev-2-decor {
  background: radial-gradient(ellipse 60% 80% at 30% 40%,
    rgba(30,80,50,.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%,
    rgba(215,175,77,.05) 0%, transparent 50%);
}
.dev-3-decor {
  background: radial-gradient(ellipse 70% 50% at 60% 50%,
    rgba(40,30,80,.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 20% 80%,
    rgba(215,175,77,.06) 0%, transparent 50%);
}

/* Architectural line art */
.dev-card-art {
  position:absolute; top:15%; left:50%;
  transform:translateX(-50%);
  width:60%; opacity:.12;
  pointer-events:none;
}

.dev-card-overlay {
  position:absolute; inset:0;
  z-index:2;
  background:linear-gradient(to top,
    rgba(5,4,2,.97) 0%,
    rgba(5,4,2,.35) 40%,
    transparent 70%);
  transition:background .4s ease;
}
.dev-card:hover .dev-card-overlay {
  background:linear-gradient(to top,
    rgba(5,4,2,.98) 0%,
    rgba(5,4,2,.55) 55%,
    rgba(5,4,2,.12) 80%);
}
.dev-card-body {
  position:absolute; bottom:0; left:0; right:0; padding:2rem;
  z-index:3;
}
.dev-loc {
  font-family:var(--font-display); font-size:.62rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem;
}
.dev-loc::before {
  content:''; width:18px; height:1px; background:var(--gold); flex-shrink:0;
}
.dev-name {
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.4rem,2.2vw,2.2rem);
  color:var(--cream); line-height:1.05; margin-bottom:.4rem;
}
.dev-price {
  font-size:.82rem; font-weight:400;
  color:rgba(255,229,166,.5); margin-bottom:1.5rem;
}
.dev-cta {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-size:.68rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); opacity:0; transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease, gap .25s ease;
}
.dev-card:hover .dev-cta { opacity:1; transform:translateY(0); }
.dev-cta:hover { gap:.85rem; }

/* ── VALUE PROPOSITION (HORMOZI) ────────────────────────────── */
.value-prop {
  padding:var(--section-pad) 0;
  background:var(--black-warm);
  border-top:1px solid rgba(215,175,77,.07);
  border-bottom:1px solid rgba(215,175,77,.07);
}
.vp-layout {
  display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:start;
}
.vp-left h2 { font-size:clamp(2rem,3.5vw,3.5rem); margin-bottom:2rem; }

.vp-problem {
  border-left:2px solid rgba(215,175,77,.12);
  padding:1.25rem 1.75rem; margin-bottom:1.5rem;
  background:rgba(255,255,255,.015);
}
.vp-problem p { font-size:.95rem; line-height:1.75; color:rgba(255,229,166,.38); }
.vp-problem p::before { content:'"'; }
.vp-problem p::after  { content:'"'; }

.vp-solution {
  border-left:2px solid var(--gold);
  padding:1.25rem 1.75rem; margin-bottom:2.5rem;
}
.vp-solution p { font-size:1rem; line-height:1.75; color:rgba(255,229,166,.72); }

.vp-btn { margin-top:.5rem; }

.features-list { display:flex; flex-direction:column; gap:1.25rem; }
.feature-item {
  display:flex; align-items:flex-start; gap:1.5rem; padding:1.5rem;
  border:1px solid rgba(215,175,77,.08);
  background:rgba(215,175,77,.025);
  transition:border-color .3s ease, background .3s ease;
}
.feature-item:hover {
  border-color:rgba(215,175,77,.2); background:rgba(215,175,77,.05);
}
.feat-icon {
  width:44px; height:44px; flex-shrink:0;
  border:1px solid rgba(215,175,77,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.feat-icon svg { width:20px; height:20px; }
.feat-copy h4 {
  font-family:var(--font-display); font-size:.9rem;
  font-weight:700; color:var(--cream); margin-bottom:.4rem;
}
.feat-copy p {
  font-size:.82rem; line-height:1.65;
  color:rgba(255,229,166,.4);
}

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.testimonials {
  padding:var(--section-pad) 0; background:var(--black); overflow:hidden;
}
.testi-header {
  text-align:center; margin-bottom:5rem;
}
.testi-header h2 {
  font-size:clamp(2rem,4vw,3.5rem); max-width:680px; margin:0 auto;
}
.testi-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.testi-card {
  padding:3rem 2.5rem;
  background:rgba(215,175,77,.028);
  border:1px solid rgba(215,175,77,.08);
  position:relative;
  transition:border-color .3s ease;
}
.testi-card:hover { border-color:rgba(215,175,77,.18); }
.testi-mark {
  font-family:var(--font-accent); font-size:5.5rem; line-height:1;
  color:rgba(215,175,77,.08); position:absolute; top:1.25rem; left:2rem;
  pointer-events:none; user-select:none;
}
.testi-text {
  font-family:var(--font-accent); font-style:italic;
  font-size:1.05rem; line-height:1.75;
  color:rgba(255,229,166,.65); margin-bottom:2rem; position:relative;
}
.testi-author { display:flex; align-items:center; gap:1rem; }
.testi-avatar {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--gold-dark) 0%, var(--cream) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.85rem;
  font-weight:800; color:var(--black);
}
.testi-info strong {
  display:block; font-family:var(--font-display);
  font-size:.88rem; font-weight:700; color:var(--cream);
}
.testi-info span {
  font-size:.72rem; color:rgba(215,175,77,.45);
}

/* ── CTA QUALIFY FORM ───────────────────────────────────────── */
.cta-section {
  padding:var(--section-pad) 0;
  background:var(--black-warm); position:relative; overflow:hidden;
}
.cta-glow {
  position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:90vw; height:90vw; max-width:900px;
  background:radial-gradient(circle, rgba(215,175,77,.04) 0%, transparent 65%);
  pointer-events:none;
}
.cta-layout {
  display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:start;
}
.cta-text h2 { font-size:clamp(2rem,3.5vw,3.5rem); margin-bottom:1.5rem; }
.cta-text .sec-body { font-size:1rem; margin-bottom:2.5rem; }

.guarantees { display:flex; flex-direction:column; gap:1rem; }
.guarantee {
  display:flex; align-items:flex-start; gap:1rem;
  font-size:.88rem; color:rgba(255,229,166,.55); line-height:1.5;
}
.guarantee-check {
  width:18px; height:18px; flex-shrink:0; margin-top:.1em;
  border:1px solid rgba(215,175,77,.4);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23d7af4d' d='M14.7 4.3l-7 7-3.4-3.4L3 9.2l4.7 4.8 8.3-8.4z'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* Form */
.qualify-form { display:flex; flex-direction:column; gap:1.2rem; }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-group { display:flex; flex-direction:column; gap:.45rem; }
.form-group label {
  font-family:var(--font-display); font-size:.65rem;
  font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(215,175,77,.65);
}
.form-group input,.form-group select,.form-group textarea {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(215,175,77,.15);
  color:var(--cream); font-family:var(--font-body);
  font-size:.9rem; padding:.9rem 1.2rem;
  outline:none; appearance:none; -webkit-appearance:none;
  border-radius:0;
  transition:border-color .3s ease, background .3s ease;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  border-color:rgba(215,175,77,.5); background:rgba(215,175,77,.03);
}
.form-group input::placeholder,.form-group textarea::placeholder {
  color:rgba(255,229,166,.18);
}
.form-group select option { background:#1a1505; color:var(--cream); }
.form-group textarea { resize:none; min-height:90px; }

.check-group { display:flex; flex-direction:column; gap:.55rem; }
.check-item {
  display:flex; align-items:flex-start; gap:.75rem; cursor:pointer;
}
.check-item input[type="checkbox"] {
  appearance:none; -webkit-appearance:none;
  width:17px; height:17px; min-width:17px;
  border:1px solid rgba(215,175,77,.3);
  background:transparent; position:relative;
  margin-top:.15em; cursor:pointer; border-radius:0;
  transition:border-color .2s ease, background .2s ease;
}
.check-item input[type="checkbox"]:checked {
  background:var(--gold); border-color:var(--gold);
}
.check-item input[type="checkbox"]:checked::after {
  content:''; position:absolute; top:2px; left:5px;
  width:5px; height:9px;
  border-right:2px solid var(--black); border-bottom:2px solid var(--black);
  transform:rotate(45deg);
}
.check-item span {
  font-size:.85rem; color:rgba(255,229,166,.52); line-height:1.55;
}
.check-item.consent span {
  font-size:.72rem; color:rgba(255,229,166,.35); line-height:1.65;
}
.check-item.consent a { color:var(--gold-muted); text-decoration:underline; }
.check-item.consent a:hover { color:var(--gold); }

.check-cols {
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem .75rem;
}

.form-submit {
  width:100%; padding:1.15rem;
  background:var(--gold); color:var(--black);
  font-family:var(--font-display); font-size:.82rem;
  font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:color .3s ease;
  border:none;
}
.form-submit::before {
  content:''; position:absolute; inset:0;
  background:var(--cream); transform:translateX(-100%);
  transition:transform .45s var(--ease-drama);
}
.form-submit:hover::before { transform:translateX(0); }
.form-submit span { position:relative; z-index:1; }
.form-note {
  font-size:.65rem; color:rgba(255,229,166,.2);
  text-align:center; line-height:1.7;
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-section {
  padding:var(--section-pad) 0; background:var(--black);
}
.faq-layout {
  display:grid; grid-template-columns:1fr 2.2fr; gap:6rem; align-items:start;
}
.faq-intro h2 {
  font-size:clamp(2rem,3vw,3.2rem);
  position:sticky; top:9rem;
}
.faq-list { display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid rgba(215,175,77,.1); }
.faq-q {
  width:100%; background:none; border:none; text-align:left;
  padding:1.75rem 0; display:flex; align-items:center;
  justify-content:space-between; gap:2rem; cursor:pointer;
  font-family:var(--font-display); font-size:.98rem;
  font-weight:600; color:var(--cream);
  transition:color .3s ease;
}
.faq-q:hover { color:var(--gold); }
.faq-ico {
  width:24px; height:24px; flex-shrink:0;
  border:1px solid rgba(215,175,77,.3);
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:border-color .3s ease;
}
.faq-ico::before,.faq-ico::after {
  content:''; position:absolute; background:var(--gold);
  transition:transform .3s ease, opacity .3s ease;
}
.faq-ico::before { width:10px; height:1px; }
.faq-ico::after  { width:1px; height:10px; }
.faq-item.open .faq-ico { border-color:var(--gold); }
.faq-item.open .faq-ico::after { opacity:0; transform:rotate(90deg); }
.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .45s var(--ease-luxury);
}
.faq-a-inner { padding-bottom:1.75rem; }
.faq-a-inner p {
  font-size:.93rem; line-height:1.85;
  color:rgba(255,229,166,.48);
}
.faq-item.open .faq-a { max-height:600px; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background:var(--black-deep);
  border-top:1px solid rgba(215,175,77,.1);
  padding:5.5rem 0 2.5rem;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:4.5rem; margin-bottom:4.5rem;
}
.footer-brand-logo {
  height:69px; width:auto; margin-bottom:1.5rem;
}
.footer-brand-text {
  font-family:var(--font-display); font-weight:800;
  font-size:1rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cream); margin-bottom:1.5rem;
}
.footer-tagline {
  font-size:.82rem; line-height:1.85;
  color:rgba(255,229,166,.3); max-width:270px; margin-bottom:1.75rem;
}
.footer-contact a {
  display:block; font-size:.78rem;
  color:rgba(255,229,166,.35); margin-bottom:.4rem;
  transition:color .3s ease;
}
.footer-contact a:hover { color:var(--gold); }
.footer-col-title {
  font-family:var(--font-display); font-size:.6rem;
  font-weight:700; letter-spacing:.35em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.5rem;
}
.footer-col-links li { margin-bottom:.7rem; }
.footer-col-links a {
  font-size:.82rem; color:rgba(255,229,166,.3);
  transition:color .3s ease;
}
.footer-col-links a:hover { color:rgba(255,229,166,.65); }

.footer-divider {
  height:1px; background:rgba(215,175,77,.07); margin-bottom:2rem;
}
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
}
.footer-copy { font-size:.72rem; color:rgba(255,229,166,.18); }
.footer-legal {
  display:flex; gap:2rem; flex-wrap:wrap;
}
.footer-legal a {
  font-size:.72rem; color:rgba(255,229,166,.18);
  transition:color .3s ease;
}
.footer-legal a:hover { color:rgba(255,229,166,.45); }
.footer-credit {
  font-size:.68rem; color:rgba(215,175,77,.25);
  letter-spacing:.04em; transition:color .3s ease;
}
.footer-credit a { color:inherit; transition:color .3s ease; }
.footer-credit:hover,.footer-credit a:hover { color:rgba(215,175,77,.55); }

/* ── PAGE HERO (sub-pages) ──────────────────────────────────── */
.page-hero {
  height:52vh; min-height:420px; max-height:580px;
  display:flex; align-items:flex-end; padding-bottom:4.5rem;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,
    var(--black) 0%, var(--black-warm) 50%, var(--black) 100%);
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 80% at 25% 60%,
    rgba(215,175,77,.05) 0%, transparent 65%);
}
.page-hero-inner {
  position:relative; z-index:1; padding-top:8rem;
  max-width:var(--container); margin:0 auto; padding-left:2rem; padding-right:2rem;
}
.breadcrumb {
  font-family:var(--font-display); font-size:.62rem;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(215,175,77,.45); margin-bottom:1.2rem;
}
.breadcrumb a { transition:color .3s ease; }
.breadcrumb a:hover { color:var(--gold); }
.page-hero h1 {
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(3rem,7vw,6.5rem); line-height:.93; color:var(--cream);
}

/* ── REVEAL ANIMATIONS ──────────────────────────────────────── */
.rv       { opacity:0; transform:translateY(36px); }
.rv.in    { opacity:1; transform:translateY(0);
            transition:opacity .85s var(--ease-luxury), transform .85s var(--ease-luxury); }
.rv-l     { opacity:0; transform:translateX(-36px); }
.rv-l.in  { opacity:1; transform:translateX(0);
            transition:opacity .85s var(--ease-luxury), transform .85s var(--ease-luxury); }
.rv-r     { opacity:0; transform:translateX(36px); }
.rv-r.in  { opacity:1; transform:translateX(0);
            transition:opacity .85s var(--ease-luxury), transform .85s var(--ease-luxury); }
.rv-sc    { opacity:0; transform:scale(.94); }
.rv-sc.in { opacity:1; transform:scale(1);
            transition:opacity .85s var(--ease-luxury), transform .85s var(--ease-luxury); }
.d1 { transition-delay:.08s; }
.d2 { transition-delay:.16s; }
.d3 { transition-delay:.24s; }
.d4 { transition-delay:.32s; }
.d5 { transition-delay:.40s; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1100px){
  .why-cabo-layout,.vp-layout,.cta-layout {
    grid-template-columns:1fr; gap:3.5rem;
  }
  .footer-grid { grid-template-columns:1fr 1fr; gap:3rem; }
  .testi-grid  { grid-template-columns:1fr; }
  .dev-grid    { grid-template-columns:repeat(2,1fr); }
  .faq-layout  { grid-template-columns:1fr; gap:3rem; }
  .faq-intro h2{ position:static; }
}
@media (max-width:768px){
  :root{ --section-pad:clamp(3.5rem,8vw,6rem); }
  .nav-links   { display:none; }
  .nav-toggle  { display:flex; }
  .dev-grid    { grid-template-columns:1fr; }
  .stats-grid  { grid-template-columns:1fr 1fr; }
  .form-row-2  { grid-template-columns:1fr; }
  .check-cols  { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2.5rem; }
  .footer-bottom{ flex-direction:column; text-align:center; gap:1rem; }
  .footer-legal { justify-content:center; }
  .dev-header  { flex-direction:column; align-items:flex-start; gap:1rem; }
}
@media (max-width:480px){
  .stats-grid  { grid-template-columns:1fr; }
  .testi-grid  { grid-template-columns:1fr; }
  .hero-title  { font-size:clamp(3rem,13vw,5rem); }
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv,.rv-l,.rv-r,.rv-sc { opacity:1 !important; transform:none !important; }
  .hero-eyebrow,.hero-title,.hero-sub,.hero-actions,.hero-scroll-hint {
    opacity:1 !important; transform:none !important;
  }
  .marquee-inner { animation:none !important; }
}