/* ============================================================
   INFINITY EVANA — FOMO LANDING (v2 — WOW Edition)
   Light · Gold #C9A227 · Ink Navy · Cream
   ============================================================ */
:root{
  --gold:#C9A227; --gold-deep:#A6841C; --gold-soft:#E6CB7A; --gold-glow:#F5D97A;
  --ink:#0F1A2C; --ink-2:#22324A; --ink-3:#1a2740;
  --cream:#F8F4EC; --cream-2:#FBF8F1; --paper:#FFFFFF;
  --line:rgba(15,26,44,.10); --muted:#5C6B82; --text:#1F2A3D;
  --rose:#C0392B; --green:#27c46b;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Figtree',-apple-system,sans-serif;
  --shadow-lg:0 30px 80px -30px rgba(15,26,44,.45);
  --shadow-md:0 12px 40px -12px rgba(15,26,44,.18);
  --shadow-gold:0 18px 50px -15px rgba(201,162,39,.55);
  --t:.4s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--text);background:var(--cream-2);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--t)}
ul{list-style:none}
button{font-family:inherit}
.container{max-width:1320px;margin:0 auto;padding:0 28px;position:relative}

.eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-bottom:14px}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin-right:12px;margin-bottom:3px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.05}
h2.section-title{font-size:clamp(2.2rem,4.4vw,3.8rem);font-weight:500;margin-bottom:18px}
h2.section-title em{font-style:italic;color:var(--gold-deep);font-weight:400}
.section-sub{color:var(--muted);font-size:1.05rem;max-width:640px}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;border:none;cursor:pointer;transition:all var(--t);position:relative;overflow:hidden;font-family:var(--sans);border-radius:2px}
.btn-gold{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);color:#fff;box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 22px 50px -10px rgba(201,162,39,.7)}
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-100%);transition:transform .9s}
.btn-gold:hover::after{transform:translateX(100%)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ===== TOP TICKER ===== */
.top-bar{background:var(--ink);color:#fff;font-size:.74rem;letter-spacing:.06em;padding:9px 0;text-align:center;position:relative;z-index:101;overflow:hidden}
.top-bar strong{color:var(--gold-soft);font-weight:600}
.ticker{overflow:hidden;width:100%}
.ticker-track{display:inline-flex;white-space:nowrap;gap:36px;animation:marquee 45s linear infinite;align-items:center}
.ticker-track > span{display:inline-block}
.live-dot{display:inline-block;width:7px;height:7px;background:#27c46b;border-radius:50%;margin-right:6px;vertical-align:middle;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(39,196,107,.6)}70%{box-shadow:0 0 0 8px rgba(39,196,107,0)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== HEADER ===== */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);z-index:1001;transition:all var(--t)}
.site-header.scrolled{box-shadow:0 4px 20px rgba(15,26,44,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:1320px;margin:0 auto}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:grid;place-items:center;color:#fff;font-family:var(--serif);font-size:1.25rem;font-weight:600;font-style:italic;box-shadow:0 6px 18px rgba(201,162,39,.4)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text .name{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);letter-spacing:.02em}
.brand-text .sub{font-size:.6rem;letter-spacing:.22em;color:var(--gold-deep);text-transform:uppercase;font-weight:600;margin-top:3px}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-size:.82rem;font-weight:500;color:var(--ink-2);position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.nav a:hover::after{transform:scaleX(1)}
.nav a:hover{color:var(--gold-deep)}
.header-cta{display:flex;align-items:center;gap:18px}
.header-phone{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--ink)}
.header-phone svg{color:var(--gold-deep)}
.btn-mini{padding:11px 22px;font-size:.7rem;letter-spacing:.15em}
.hamburger{display:none;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;padding:10px;z-index:3000;width:44px;height:44px}
.ham-inner{position:relative;width:24px;height:18px}
.hamburger span{position:absolute;left:0;width:24px;height:2px;background:var(--ink);transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:8px}
.hamburger span:nth-child(3){top:16px}
.hamburger.active span{background: #fff} /* White X on dark background */
.hamburger.active span:nth-child(1){top:8px;transform:rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:translateX(10px)}
.hamburger.active span:nth-child(3){top:8px;transform:rotate(-45deg)}

/* Mobile Nav Slider */
.nav-overlay{position:fixed;inset:0;background:rgba(15,26,44,.4);backdrop-filter:blur(4px);z-index:999;opacity:0;pointer-events:none;transition:opacity .4s}
.nav-overlay.active{opacity:1;pointer-events:auto}

/* ============================================================
   HERO — CINEMATIC
   ============================================================ */
.hero{position:relative;background:
  radial-gradient(ellipse at 20% 90%,rgba(15,26,44,.06),transparent 60%),
  radial-gradient(ellipse at 85% 10%,rgba(201,162,39,.18),transparent 55%),
  var(--cream);
  padding:50px 0 90px;overflow:hidden;min-height:820px}

.hero-grid-bg{position:absolute;inset:0;background-image:
  linear-gradient(rgba(15,26,44,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(15,26,44,.04) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
  pointer-events:none}

/* atmospheric haze layers */
.hero-haze{position:absolute;left:0;right:0;bottom:0;height:240px;background:linear-gradient(180deg,transparent,rgba(248,244,236,.85) 50%,var(--cream));pointer-events:none;z-index:1}
.hero-noise{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}

.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particles span{position:absolute;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));opacity:0;animation:rise 9s linear infinite;box-shadow:0 0 12px rgba(201,162,39,.6)}
.particles span:nth-child(1){left:10%;animation-delay:0s;width:4px;height:4px}
.particles span:nth-child(2){left:25%;animation-delay:1.5s}
.particles span:nth-child(3){left:38%;animation-delay:3s;width:3px;height:3px}
.particles span:nth-child(4){left:48%;animation-delay:.5s}
.particles span:nth-child(5){left:60%;animation-delay:2.2s;width:5px;height:5px}
.particles span:nth-child(6){left:72%;animation-delay:4s}
.particles span:nth-child(7){left:82%;animation-delay:1s;width:3px;height:3px}
.particles span:nth-child(8){left:90%;animation-delay:5s}
.particles span:nth-child(9){left:18%;animation-delay:6s;width:4px;height:4px}
.particles span:nth-child(10){left:55%;animation-delay:7s}
@keyframes rise{0%{transform:translateY(800px) scale(.5);opacity:0}10%{opacity:1}90%{opacity:.7}100%{transform:translateY(-100px) scale(1);opacity:0}}

.hero-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:0 60px;
  align-items:center;
  position:relative;
  z-index:3;
}
.hero-title-area{grid-column:1; grid-row:1; align-self:end; padding-bottom:24px}
.hero-content-area{grid-column:1; grid-row:2; align-self:start}
.building-stage{grid-column:2; grid-row:1 / span 2; height:800px; position:relative; perspective:1600px; perspective-origin:50% 55%; display:flex; align-items:flex-end; justify-content:center; user-select:none}

.status-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:30px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink);box-shadow:0 6px 18px rgba(15,26,44,.05);margin-bottom:24px}

.hero-h1{font-size:clamp(2.8rem,5.6vw,5.4rem);font-weight:500;color:var(--ink);margin:0 0 22px;text-wrap:balance}
.hero-h1 em{font-style:italic;color:var(--gold-deep);font-weight:400;background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft),var(--gold-deep));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:var(--gold-deep);animation:shimmer 4s linear infinite}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.hero-h1 .accent{display:block;font-size:.28em;font-family:var(--sans);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-top:18px}

.hero-lede{font-size:1.05rem;color:var(--ink-2);max-width:540px;margin-bottom:8px}
.hero-lede strong{color:var(--ink);font-weight:600}

.hero-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:32px 0 32px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta-item .v{font-family:var(--serif);font-size:1.7rem;color:var(--ink);font-weight:600;line-height:1}
.meta-item .v sup{font-size:.5em;color:var(--gold-deep);margin-left:2px;font-weight:500}
.meta-item .l{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:8px;font-weight:600}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}

.trust-row{display:flex;gap:24px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);font-weight:500}
.trust-item svg{color:#27c46b}

/* ============================================================
   BUILDING STAGE — 3D CINEMA
   ============================================================ */
/* (Building stage properties moved to .building-stage above) */

/* Sky dome behind the building */
.sky-dome{position:absolute;top:0;left:50%;transform:translateX(-50%);width:540px;height:680px;border-radius:50%;background:
  radial-gradient(ellipse at 50% 40%,rgba(230,203,122,.35),rgba(248,244,236,.15) 35%,transparent 70%);
  pointer-events:none;filter:blur(2px)}

.sky-sun{position:absolute;top:50px;right:30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(255,235,180,.95),rgba(230,203,122,.65) 40%,rgba(201,162,39,.25) 65%,transparent 85%);filter:blur(1px);animation:sunPulse 5s ease-in-out infinite}
.sky-sun::after{content:"";position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(245,217,122,.4),transparent 70%);filter:blur(8px)}
@keyframes sunPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}

/* Stars (subtle) */
.stars{position:absolute;inset:0;pointer-events:none;opacity:.6}
.stars i{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;box-shadow:0 0 4px rgba(255,255,255,.8);animation:twinkle 3s ease-in-out infinite}

@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

.clouds{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cloud{position:absolute;height:14px;border-radius:30px;background:rgba(255,255,255,.92);filter:blur(2px);box-shadow:0 0 30px rgba(255,255,255,.7)}
.cloud.c1{top:14%;width:80px;animation:drift 35s linear infinite}
.cloud.c2{top:30%;width:120px;height:18px;animation:drift 50s linear infinite;animation-delay:-12s}
.cloud.c3{top:48%;width:60px;animation:drift 40s linear infinite;animation-delay:-25s}
.cloud.c4{top:60%;width:100px;height:16px;animation:drift 60s linear infinite;animation-delay:-40s;opacity:.6}
@keyframes drift{0%{left:-150px}100%{left:120%}}

/* Distant mountain silhouette */
.mountains{position:absolute;left:0;right:0;bottom:80px;height:120px;pointer-events:none;opacity:.45}
.mountains svg{width:100%;height:100%}

/* The 3D building wrapper — tilted & mouse-reactive */
.building-3d{position:relative;width:240px;height:100%;transform-style:preserve-3d;transform:rotateX(6deg) rotateY(-8deg);transition:transform .6s cubic-bezier(.4,0,.2,1)}

/* Spire on top */
.spire{position:absolute;left:50%;bottom:calc(41 * 16px);transform:translateX(-50%) scaleY(0);transform-origin:bottom;width:5px;height:90px;background:linear-gradient(to top,var(--ink-2),var(--gold),var(--gold-glow));transition:transform 1s ease-out;transition-delay:3s;border-radius:2px;z-index:6}
.spire-tip{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--gold-glow);box-shadow:0 0 18px var(--gold-glow),0 0 36px var(--gold);animation:pulse2 1.5s infinite}
.spire-rings{position:absolute;left:50%;top:30%;transform:translateX(-50%)}
.spire-rings i{display:block;width:18px;height:3px;background:var(--gold-deep);border-radius:50%;margin:6px 0;opacity:.7}
@keyframes pulse2{0%,100%{box-shadow:0 0 18px var(--gold-glow),0 0 36px var(--gold)}50%{box-shadow:0 0 28px var(--gold-glow),0 0 60px var(--gold)}}
.building-3d.complete .spire{transform:translateX(-50%) scaleY(1)}

.floors{position:absolute;left:0;right:0;bottom:0;height:calc(41 * 16px)}

/* Front face floor */
.floor{position:absolute;left:50%;height:15px;background:linear-gradient(180deg,rgba(20,32,55,.95),rgba(34,50,74,.98));border-top:1px solid rgba(201,162,39,.22);box-shadow:inset 0 -1px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);transform:translateX(-50%) translateY(20px);opacity:0;transition:transform .35s ease-out,opacity .35s ease-out,box-shadow .3s,scale .3s;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 6px;z-index:3}
.floor.in{transform:translateX(-50%) translateY(0);opacity:1}
.floor:hover{box-shadow:0 0 35px rgba(245,217,122,.7),inset 0 0 12px rgba(245,217,122,.2);scale:1.06;z-index:10}
.floor.scan{box-shadow:0 0 40px rgba(245,217,122,.9),inset 0 0 14px rgba(245,217,122,.35) !important;background:linear-gradient(180deg,rgba(50,68,95,1),rgba(70,88,115,1)) !important}

/* Side face — gives depth */
.floor-side{position:absolute;height:15px;width:38px;background:linear-gradient(90deg,rgba(8,16,30,.95),rgba(20,32,55,.85));transform-origin:left center;transform:translateY(20px) rotateY(80deg);left:calc(50% + 84px);opacity:0;transition:inherit;border-top:1px solid rgba(201,162,39,.12);z-index:2}
.floor-side.in{transform:translateY(0) rotateY(80deg);opacity:1}

.window{flex:1;height:9px;border-radius:1px;background:rgba(245,217,122,.92);box-shadow:0 0 4px rgba(245,217,122,.85);animation:blink 4s ease-in-out infinite}
.window.dark{background:rgba(20,32,55,.7);box-shadow:none;animation:none;opacity:.5}
@keyframes blink{0%,100%{opacity:.85}50%{opacity:1}}

/* Floor tooltip — left side */
.floor-tip{position:absolute;right:calc(100% + 18px);top:50%;transform:translateY(-50%) translateX(-8px);background:linear-gradient(135deg,rgba(15,26,44,.96),rgba(34,50,74,.92));backdrop-filter:blur(10px);color:#fff;padding:10px 14px;border-radius:4px;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;border:1px solid rgba(201,162,39,.4);opacity:0;pointer-events:none;transition:all .25s;z-index:20;box-shadow:0 8px 24px rgba(15,26,44,.4)}
.floor-tip strong{color:var(--gold-soft);margin-right:8px;display:block;font-size:.78rem}
.floor-tip em{font-style:normal;color:rgba(255,255,255,.65);font-size:.65rem;font-weight:500;letter-spacing:.05em;text-transform:none;display:block;margin-top:2px}
.floor:hover .floor-tip{opacity:1;transform:translateY(-50%) translateX(0)}
.floor-tip::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:rgba(15,26,44,.96)}

/* Beam scan effect */
.scan-beam{position:absolute;left:50%;transform:translateX(-50%);width:280px;height:3px;background:linear-gradient(90deg,transparent,var(--gold-glow),transparent);box-shadow:0 0 16px var(--gold-glow);opacity:0;pointer-events:none;z-index:8;border-radius:2px}
.scan-beam.run{animation:scanRun 4s ease-in-out infinite}
@keyframes scanRun{0%{bottom:0;opacity:0}10%{opacity:.9}50%{opacity:.9}90%{opacity:.4}100%{bottom:660px;opacity:0}}

/* Crane */
.crane{position:absolute;left:50%;transform:translateX(-50%);transition:bottom .3s ease-out;width:1px;height:1px;z-index:7}
.crane-mast{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:3px;height:60px;background:linear-gradient(to top,var(--ink-2),var(--gold));border-radius:2px}
.crane-arm{position:absolute;left:-4px;bottom:60px;width:90px;height:3px;background:linear-gradient(to right,var(--gold),var(--gold-deep));border-radius:2px}
.crane-cab{position:absolute;left:-10px;bottom:55px;width:12px;height:9px;background:var(--ink);border-radius:1px}
.crane-line{position:absolute;left:74px;bottom:30px;width:1px;height:30px;background:var(--ink-2)}
.crane-hook{position:absolute;left:71px;bottom:22px;width:7px;height:7px;background:var(--gold-deep);border-radius:1px;animation:hookSway 2s ease-in-out infinite}
@keyframes hookSway{0%,100%{transform:translateX(0) rotate(-4deg)}50%{transform:translateX(3px) rotate(4deg)}}
.crane.hidden{opacity:0;transition:opacity .8s}

/* Podium / base */
.podium{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);width:300px;height:18px;background:linear-gradient(180deg,var(--ink-2),var(--ink));border-radius:2px;box-shadow:0 10px 36px rgba(15,26,44,.5)}
.podium-light{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:340px;height:8px;background:radial-gradient(ellipse,rgba(245,217,122,.55),transparent 70%);filter:blur(4px)}
.ground-shadow{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:380px;height:36px;border-radius:50%;background:radial-gradient(ellipse,rgba(15,26,44,.4),transparent 70%);filter:blur(10px)}

/* Reflection on glass floor */
.reflection{position:absolute;left:50%;bottom:-660px;transform:translateX(-50%) scaleY(-1);width:240px;height:660px;opacity:.12;mask-image:linear-gradient(180deg,#000,transparent 60%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);pointer-events:none;background:linear-gradient(180deg,rgba(15,26,44,.8),transparent);filter:blur(2px)}

/* ===== FLOATING DATA CARDS ===== */
.float-card{position:absolute;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border:1px solid rgba(201,162,39,.22);padding:14px 18px;border-radius:8px;box-shadow:var(--shadow-lg);z-index:5;animation:floatY 6s ease-in-out infinite;min-width:140px}
.float-card.dark{background:rgba(15,26,44,.92);color:#fff;border-color:rgba(201,162,39,.35)}
.float-card.top-left{top:20px;left:-10px}
.float-card.bottom-right{bottom:80px;right:-10px;animation-delay:-3s}
.float-card.middle-right{top:42%;right:-20px;animation-delay:-1.5s}
.float-card.middle-left{top:55%;left:-30px;animation-delay:-4s;background:linear-gradient(135deg,#FFF7E0,#FBF1D0);border-color:var(--gold)}
.fc-eye{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px}
.fc-eye.gold{color:var(--gold-soft)}
.fc-num{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--ink);line-height:1.1;margin-top:2px}
.float-card.dark .fc-num{color:#fff}
.fc-num em{color:var(--gold-deep);font-style:normal;font-size:.65em;margin-left:2px}
.float-card.dark .fc-num em{color:var(--gold-soft)}
.fc-sub{font-size:.7rem;color:var(--muted);margin-top:4px;font-weight:500}
.float-card.dark .fc-sub{color:rgba(255,255,255,.75)}
.fc-tip{font-size:.85rem;color:var(--ink);font-weight:600;margin-top:2px}
.fc-arrow{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--green)}
/* Middle-left 'Price Trajectory' card — always dark so text is visible against any background */
.float-card.middle-left{top:55%;left:-30px;animation-delay:-4s;
  background:rgba(15,26,44,.92);
  border-color:rgba(201,162,39,.45);
  color:#fff;
}
.float-card.middle-left .fc-eye{color:var(--gold-soft)}
.float-card.middle-left .fc-num{color:#fff;font-size:2rem}
.float-card.middle-left .fc-num em{color:var(--gold-soft)}
.float-card.middle-left .fc-sub{color:rgba(255,255,255,.8)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Build progress mini-progress bar inside card */
.fc-bar{margin-top:8px;height:5px;background:rgba(15,26,44,.08);border-radius:30px;overflow:hidden;position:relative}
.float-card.dark .fc-bar{background:rgba(255,255,255,.12)}
.fc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-glow));width:0;border-radius:30px;transition:width .3s ease-out}

/* ============================================================
   URGENCY BAR — punchier
   ============================================================ */
.urgency{background:linear-gradient(135deg,#FFF7E0 0%,#FBF1D0 50%,#FFF2C8 100%);padding:36px 0;border-bottom:1px solid var(--line);border-top:1px solid var(--line);position:relative;overflow:hidden}
.urgency::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 20h40M20 0v40' stroke='%23C9A227' stroke-width='.5' opacity='.15'/></svg>");pointer-events:none}
.urgency-grid{display:grid;grid-template-columns:1fr 2fr 1.2fr;align-items:center;gap:30px;position:relative}
.urgency-label{font-size:.85rem;color:var(--ink-2)}
.urgency-label strong{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--ink);font-weight:600;margin-top:2px}
.urgency-label .flame{display:inline-block;color:var(--rose);margin-right:6px;animation:flameWobble 1s ease-in-out infinite}
@keyframes flameWobble{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.08)}}
.bar-wrap{background:rgba(15,26,44,.1);height:16px;border-radius:30px;overflow:hidden;position:relative}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-deep));border-radius:30px;width:0;transition:width 2.4s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:flex-end;padding-right:12px;position:relative;overflow:hidden}
.bar-fill::after{content:"75%";font-size:.7rem;color:#fff;font-weight:700;letter-spacing:.1em;z-index:2}
.bar-fill::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);animation:barShine 2.5s linear infinite}
@keyframes barShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.bar-meta{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);margin-top:10px;letter-spacing:.05em}
.bar-meta strong{color:var(--ink)}
.urgency-cd{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cd-label{font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cd-row{display:flex;gap:8px}
.cd-block{background:linear-gradient(180deg,var(--ink),var(--ink-2));color:#fff;padding:11px 13px;border-radius:5px;text-align:center;min-width:58px;box-shadow:0 6px 14px rgba(15,26,44,.3),inset 0 1px 0 rgba(255,255,255,.08);position:relative}
.cd-block::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.3);z-index:1}
.cd-num{font-family:var(--serif);font-size:1.6rem;font-weight:600;line-height:1;color:var(--gold-soft);font-variant-numeric:tabular-nums;position:relative;z-index:2}
.cd-unit{font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px;position:relative;z-index:2}

/* ===== SECTIONS ===== */
section{position:relative}
.section{padding:110px 0}
.section-light{background:var(--cream-2)}
.section-paper{background:var(--paper)}
.section-dark{background:linear-gradient(180deg,var(--ink) 0%,#0a1322 100%);color:#fff;overflow:hidden}
.section-dark h2{color:#fff}
.section-dark .eyebrow{color:var(--gold-soft)}
.section-dark .section-sub{color:rgba(255,255,255,.7)}

.section-head{text-align:center;max-width:740px;margin:0 auto 70px}
.section-head .section-sub{margin:0 auto}

/* ============================================================
   HIGHLIGHTS — premium cards
   ============================================================ */
.highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.highlight-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;transition:all var(--t);position:relative;overflow:hidden}
.highlight-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-deep));transform:scaleX(0);transform-origin:left;transition:transform var(--t);z-index:2}
.highlight-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent}
.highlight-card:hover::before{transform:scaleX(1)}

/* Image-based highlight card parts */
.highlight-img{height:200px;background-size:cover;background-position:center;transition:transform .7s ease}
.highlight-card:hover .highlight-img{transform:scale(1.06)}
.highlight-body{padding:26px 24px}
.highlight-body h3{font-size:1.25rem;margin-bottom:8px;font-weight:600;color:var(--ink)}
.highlight-body p{font-size:.88rem;color:var(--muted);line-height:1.6}

/* Legacy icon variant kept for fallback */
.highlight-card .icon{width:54px;height:54px;border-radius:50%;background:var(--cream);display:grid;place-items:center;color:var(--gold-deep);margin-bottom:22px;transition:all var(--t)}
.highlight-card:hover .icon{background:var(--gold);color:#fff;transform:rotate(8deg) scale(1.05);box-shadow:0 8px 20px rgba(201,162,39,.4)}
.highlight-card h3{font-size:1.4rem;margin-bottom:10px;font-weight:600}
.highlight-card p{font-size:.92rem;color:var(--muted);line-height:1.6}

/* ============================================================
   TIMELINE / PROJECT FACTS BAND
   ============================================================ */
.factband{background:var(--ink);color:#fff;padding:0;position:relative;overflow:hidden}
.factband::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,rgba(201,162,39,.12),transparent 50%)}
.fact-grid{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.fact{padding:36px 28px;border-right:1px solid rgba(255,255,255,.08);text-align:center;position:relative}
.fact:last-child{border-right:none}
.fact-num{font-family:var(--serif);font-size:2.6rem;color:var(--gold-soft);font-weight:600;line-height:1}
.fact-num small{font-size:.45em;color:#fff;font-family:var(--sans);font-weight:500;margin-left:3px;letter-spacing:.05em}
.fact-l{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px;font-weight:600}

/* ============================================================
   RESIDENCES — refined
   ============================================================ */
.residence-tabs{display:flex;gap:4px;justify-content:center;margin-bottom:48px;background:var(--cream);padding:6px;border-radius:50px;width:fit-content;margin-left:auto;margin-right:auto;box-shadow:inset 0 2px 4px rgba(15,26,44,.06)}
.rtab{background:transparent;border:none;padding:12px 28px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--muted);cursor:pointer;border-radius:50px;transition:all var(--t)}
.rtab.active{background:linear-gradient(135deg,var(--ink),var(--ink-2));color:#fff;box-shadow:0 6px 18px rgba(15,26,44,.3)}
.rtab:hover:not(.active){color:var(--ink)}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.price-card{background:var(--paper);padding:36px 32px;border:1px solid var(--line);border-radius:8px;position:relative;transition:all .5s var(--t);overflow:hidden;animation:fadeUp .6s ease-out both}
.price-card.featured{background:linear-gradient(180deg,var(--ink),var(--ink-2));color:#fff;border-color:var(--ink);transform:scale(1.04);box-shadow:0 30px 60px -20px rgba(15,26,44,.5)}
.price-card.featured h3,.price-card.featured .price{color:#fff}
.price-card.featured .specs li{border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.price-card.featured .specs li strong{color:#fff}
.price-card.featured .ribbon{position:absolute;top:18px;right:-44px;background:var(--gold);color:var(--ink);padding:6px 48px;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;transform:rotate(45deg);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.price-card.featured:hover{transform:scale(1.04) translateY(-6px)}
.price-tag{display:inline-block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-bottom:10px}
.price-card.featured .price-tag{color:var(--gold-soft)}
.price-card h3{font-family:var(--serif);font-size:2rem;font-weight:600;margin-bottom:4px}
.price-card .config{font-size:.82rem;color:var(--muted);margin-bottom:22px}
.price-card.featured .config{color:rgba(255,255,255,.65)}
.price-card .price{font-family:var(--serif);font-size:2.4rem;font-weight:600;color:var(--ink);line-height:1;margin-bottom:6px}
.price-card .price small{font-size:.45em;color:var(--muted);font-family:var(--sans);font-weight:500;margin-left:4px}
.price-card.featured .price small{color:rgba(255,255,255,.55)}
.price-card .specs{margin-bottom:24px}
.price-card .specs li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.86rem;color:var(--ink-2);display:flex;justify-content:space-between}
.price-card .specs li strong{color:var(--ink);font-weight:600}
.price-card .btn{width:100%;padding:14px;font-size:.72rem}
.price-card.featured .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.price-card.featured .btn-ghost:hover{background:#fff;color:var(--ink)}
.price-card .stock{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.7rem;color:var(--muted);letter-spacing:.06em}
.price-card .stock-bar{flex:1;height:4px;background:rgba(15,26,44,.08);border-radius:30px;overflow:hidden}
.price-card.featured .stock-bar{background:rgba(255,255,255,.15)}
.price-card .stock-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-deep));border-radius:30px}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   AMENITIES — marquee + grid
   ============================================================ */
.marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:34px 0;margin:30px 0 70px;background:rgba(0,0,0,.18)}
.marquee-track{display:inline-flex;white-space:nowrap;gap:36px;animation:marquee 50s linear infinite;font-family:var(--serif);font-size:2rem;font-weight:500;color:#fff}
.marquee-track > span:not([class]){color:rgba(255,255,255,.85)}
.marquee-track > span:nth-child(even){color:var(--gold-soft)}
.amenity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.am-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:32px;border-radius:6px;transition:all var(--t)}
.am-card:hover{background:rgba(201,162,39,.08);border-color:rgba(201,162,39,.3);transform:translateY(-4px)}
.am-num{font-family:var(--serif);font-size:3.4rem;font-weight:600;color:var(--gold-soft);line-height:1}
.am-num em{font-style:normal;font-size:.45em;color:#fff;margin-left:4px}
.am-l{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:10px;font-weight:600}

/* ============================================================
   AMENITIES IMAGE GRID
   ============================================================ */
.am-image-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px;margin-bottom:30px}
.am-image-card{position:relative;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-md);transition:all var(--t)}
.am-image-card:hover{transform:translateY(-6px);box-shadow:0 15px 40px rgba(201,162,39,.15)}
.am-image-card img{width:100%;height:320px;object-fit:cover;transition:transform .8s ease}
.am-image-card:hover img{transform:scale(1.05)}
.am-image-card-title{position:absolute;bottom:0;left:0;right:0;padding:40px 24px 20px;background:linear-gradient(to top,rgba(11,20,36,.9),transparent);color:#fff;font-family:var(--serif);font-size:1.6rem;font-weight:500;z-index:2}

/* ============================================================
   AMENITIES ICON GRID (new)
   ============================================================ */
.am-icons{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:60px}
.am-icon{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);padding:22px 16px;border-radius:6px;text-align:center;transition:all var(--t);cursor:default}
.am-icon:hover{background:rgba(201,162,39,.1);border-color:rgba(201,162,39,.35);transform:translateY(-3px)}
.am-icon svg{color:var(--gold-soft);margin-bottom:10px}
.am-icon-name{font-size:.74rem;color:rgba(255,255,255,.85);font-weight:500}

/* ============================================================
   LOCATION
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.loc-list{margin-top:24px}
.loc-list li{padding:16px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;font-size:.95rem;color:var(--ink-2)}
.loc-list li span{font-family:var(--serif);font-size:1.25rem;color:var(--gold-deep);font-weight:600;min-width:80px}
.loc-map{position:relative;aspect-ratio:1/1;background:var(--cream);border-radius:8px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md)}
.map-grid{position:absolute;inset:0;width:100%;height:100%}
.map-pin{position:absolute;transform:translate(-50%,-100%);z-index:2}
.pin-self{top:50%;left:50%;z-index:5}
.pin-dot{width:18px;height:18px;border-radius:50%;background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 0 rgba(201,162,39,.6),0 6px 14px rgba(15,26,44,.25);animation:pinPulse 1.8s infinite}
.pin-dot.small{width:10px;height:10px;border-width:2px;animation:none;background:var(--ink-2)}
@keyframes pinPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.7),0 6px 14px rgba(15,26,44,.25)}70%{box-shadow:0 0 0 14px rgba(201,162,39,0),0 6px 14px rgba(15,26,44,.25)}}
.pin-label{font-size:.72rem;font-weight:700;color:var(--ink);background:#fff;padding:4px 10px;border-radius:30px;margin-top:6px;white-space:nowrap;box-shadow:0 4px 12px rgba(15,26,44,.15);position:absolute;left:50%;transform:translateX(-50%)}
.pin-label.small{font-size:.65rem;background:rgba(255,255,255,.92);color:var(--muted);font-weight:600}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{background:var(--cream-2);padding:34px 30px;border-radius:6px;border:1px solid var(--line);position:relative;transition:all var(--t)}
.testi:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.testi::before{content:"\201C";position:absolute;top:-10px;left:24px;font-family:var(--serif);font-size:5rem;color:var(--gold);line-height:1;font-weight:700}
.quote{font-family:var(--serif);font-size:1.15rem;color:var(--ink);line-height:1.5;font-style:italic;margin-bottom:24px;padding-top:14px}
.testi-author{display:flex;align-items:center;gap:14px}
.avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:600;font-size:1rem}
.testi-author strong{display:block;font-size:.9rem;color:var(--ink);font-weight:600}
.testi-author span{display:block;font-size:.75rem;color:var(--muted);margin-top:2px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section{background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-points{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}
.cpoint{display:flex;align-items:center;gap:18px}
.cp-icon{width:46px;height:46px;border-radius:50%;background:var(--cream);display:grid;place-items:center;color:var(--gold-deep);flex-shrink:0;border:1px solid var(--line)}
.cpoint strong{display:block;font-size:1rem;color:var(--ink);font-weight:600}
.cpoint span{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}
.micro-fomo{display:inline-flex;align-items:center;gap:10px;background:#FFF7E0;border:1px solid var(--gold);padding:10px 16px;border-radius:30px;font-size:.78rem;color:var(--ink);font-weight:500}
.micro-fomo strong{color:var(--gold-deep);font-weight:700}

.recent-bookings{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 22px;box-shadow:0 6px 24px rgba(15,26,44,.05)}
.rb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.rb-head strong{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:700}
.rb-head .live-dot{margin-right:0}
.rb-list{display:flex;flex-direction:column;gap:8px}
.rb-item{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;padding:8px 0;border-bottom:1px dashed rgba(15,26,44,.06)}
.rb-item:last-child{border-bottom:none}
.rb-item .rb-loc{color:var(--muted)}
.rb-item .rb-time{color:var(--gold-deep);font-weight:600;font-size:.74rem}

/* Form card with luxe accent */
.form-card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-md);overflow:hidden;position:relative}
.form-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-soft),var(--gold))}
.form-tabs{display:flex;background:var(--cream);position:relative;z-index:1}
.ftab{flex:1;background:transparent;border:none;padding:18px 20px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--muted);cursor:pointer;transition:all var(--t);border-bottom:2px solid transparent}
.ftab.active{background:#fff;color:var(--ink);border-bottom-color:var(--gold)}
.form-panels{padding:36px 32px}
.form-panel{display:none}
.form-panel.active{display:block;animation:fadeUp .35s ease-out}

.form-group-line{position:relative;margin-bottom:22px}
.form-group-line input,.form-group-line select{width:100%;padding:18px 0 8px;font-size:.95rem;background:transparent;border:none;border-bottom:1.5px solid var(--line);color:var(--ink);font-family:var(--sans);outline:none;transition:border-color var(--t)}
.form-group-line input:focus,.form-group-line select:focus{border-bottom-color:var(--gold)}
.form-group-line label{position:absolute;left:0;top:18px;font-size:.95rem;color:var(--muted);pointer-events:none;transition:all .25s ease;font-weight:500}
.form-group-line input:focus + label,
.form-group-line input:not(:placeholder-shown) + label{top:0;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.form-group-line input[type="date"]{color:var(--ink)}
.form-group-line select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%235C6B82' stroke-width='1.5' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 4px center;padding-right:24px}
.btn-solid-navy-full{width:100%;background:linear-gradient(135deg,var(--ink),var(--ink-2));color:#fff;border:none;padding:18px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;cursor:pointer;border-radius:3px;transition:all var(--t);position:relative;overflow:hidden;font-family:var(--sans)}
.btn-solid-navy-full:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(15,26,44,.4)}
.btn-solid-navy-full::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(201,162,39,.35) 50%,transparent 70%);transform:translateX(-100%);transition:transform .9s}
.btn-solid-navy-full:hover::after{transform:translateX(100%)}
.mt-4{margin-top:16px}

/* Blog Grid */
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.blog-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);transition:all var(--t);display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.blog-thumb{position:relative;height:180px;overflow:hidden}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.blog-card:hover .blog-thumb img{transform:scale(1.1)}
.blog-tag{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font-size:.65rem;font-weight:700;padding:5px 12px;border-radius:30px;letter-spacing:.05em;text-transform:uppercase}
.blog-body{padding:24px;flex:1;display:flex;flex-direction:column}
.blog-body h3{font-size:1.15rem;margin-bottom:12px;line-height:1.4;color:var(--ink)}
.blog-body p{font-size:.88rem;color:var(--muted);line-height:1.6;margin-bottom:20px;flex:1}
.blog-link{font-size:.78rem;font-weight:700;color:var(--gold-deep);display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.1em}
.blog-link svg{transition:transform .3s}
.blog-card:hover .blog-link svg{transform:translateX(5px)}

.form-bonus{margin-top:18px;font-size:.74rem;color:var(--muted);text-align:center;line-height:1.6}
.form-bonus strong{color:var(--gold-deep);font-weight:700}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding:70px 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
.site-footer h4{color:#fff;font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:18px}
.site-footer a{display:block;font-size:.85rem;color:rgba(255,255,255,.7);padding:6px 0;transition:color var(--t)}
.site-footer a:hover{color:var(--gold-soft)}
.site-footer p{font-size:.85rem;line-height:1.7}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:24px 0;font-size:.75rem;color:rgba(255,255,255,.5)}

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;background:#fff;padding:12px;gap:10px;box-shadow:0 -8px 24px rgba(15,26,44,.12);border-top:1px solid var(--line)}
.sc-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;border-radius:3px}
.sc-btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff}
.sc-btn.ghost{border:1.5px solid var(--ink);color:var(--ink)}

/* ============================================================
   FOMO TOAST (live booking notifications)
   ============================================================ */
.fomo-toast{position:fixed;bottom:24px;left:24px;z-index:98;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;box-shadow:0 16px 40px -12px rgba(15,26,44,.25);display:flex;align-items:center;gap:14px;max-width:340px;transform:translateX(-120%);transition:transform .5s cubic-bezier(.4,0,.2,1);border-left:3px solid var(--gold)}
.fomo-toast.show{transform:translateX(0)}
.fomo-toast .ft-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:.95rem;flex-shrink:0}
.fomo-toast .ft-text{font-size:.82rem;color:var(--ink);line-height:1.45}
.fomo-toast .ft-text strong{font-weight:700}
.fomo-toast .ft-time{font-size:.7rem;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:5px}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:all .9s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* Sticky CTA */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;height:70px;background:#fff;display:none;align-items:center;padding:10px 16px;gap:12px;box-shadow:0 -10px 30px rgba(15,26,44,0.1);z-index:1000}
.sc-btn{flex:1;height:50px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:all .3s}
.sc-btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.sc-btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .nav{
    position:fixed; top:0; right:0; bottom:0; width:300px;
    background:linear-gradient(180deg, #0A1322 0%, var(--ink) 100%) !important; 
    z-index:2500; padding:100px 40px;
    display:flex; flex-direction:column; gap:32px;
    transform:translateX(100%); transition:transform .5s cubic-bezier(.4,0,.2,1);
    box-shadow:-10px 0 50px rgba(0,0,0,.4);
    opacity:1 !important;
  }
  .nav.active{transform:translateX(0)}
  .nav a{font-size:1.4rem; font-weight:600; color:#fff; border-bottom:1px solid rgba(255,255,255,.05); padding-bottom:12px}
  .nav a:hover{color:var(--gold-soft)}
  .hamburger{display:flex}
  .hero{padding:40px 0 60px;min-height:auto}
  .hero-grid{display:flex; flex-direction:column; gap:32px; align-items:center; text-align:center}
  .hero-title-area{padding:0}
  .building-stage{height:500px; width:100%; max-width:540px}
  .hero-content-area{width:100%}
  .hero-meta{justify-content:center; width:100%}
  .hero-lede{max-width:none; text-align:center}
  .hero-cta{justify-content:center; width:100%}
  .trust-row{justify-content:center; width:100%}
  .float-card.middle-left,.float-card.middle-right{display:none}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .urgency-grid{grid-template-columns:1fr;text-align:center;gap:20px}
  .urgency-cd{align-items:center}
  .highlights{grid-template-columns:repeat(2,1fr);gap:16px}
  .pricing-grid{grid-template-columns:1fr;gap:20px;max-width:480px;margin:0 auto}
  .price-card.featured{transform:none}
  .price-card.featured:hover{transform:translateY(-6px)}
  .amenity-grid{grid-template-columns:repeat(2,1fr)}
  .am-icons{grid-template-columns:repeat(3,1fr)}
  .am-image-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:40px}
  .testi-grid{grid-template-columns:1fr 1fr;gap:16px}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .fact-grid{grid-template-columns:repeat(3,1fr)}
  .fact{border-bottom:1px solid rgba(255,255,255,.08)}
  .hero-meta{grid-template-columns:repeat(2,1fr);gap:16px}
  .hero-h1{font-size:clamp(2.4rem,5vw,4rem)}
  .render-frame{height:440px}
}

@media (max-width: 640px){
  /* Layout */
  .section{padding:60px 0}
  .container{padding:0 16px}
  .section-head{margin-bottom:44px}

  /* Header */
  .header-inner{padding:14px 16px}
  .brand-text .name{font-size:1rem}
  .brand-text .sub{font-size:.5rem}
  .brand img{height:36px !important}

  /* Hero */
  .hero{padding:24px 0 40px;min-height:auto}
  .hero-grid{display:flex; flex-direction:column; gap:20px; align-items:center; text-align:center}
  .hero-title-area{padding:0; margin-top:10px; width:100%}
  .building-stage{height:200px; width:100%; max-width:400px; margin:0}
  .render-frame{height:180px}
  .hero-h1{font-size:clamp(1.4rem, 6vw, 1.8rem); margin-bottom:8px; line-height:1.2; color:var(--ink) !important; display:block !important; position:relative; z-index:5}
  .hero-lede{font-size:.85rem; line-height:1.4; margin-top:0}
  .hero-content-area{width:100%}
  .hero-meta{grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}
  .meta-item .v{font-size:1.2rem}
  .hero-cta{flex-direction:column;gap:10px}
  .hero-cta .btn{width:100%;justify-content:center}
  .trust-row{gap:12px}
  .trust-item{font-size:.72rem}
  .status-pill{font-size:.65rem;padding:6px 12px}

  /* Building stage */
  .building-stage{height:340px}
  .render-frame{height:320px;transform:none !important}
  .float-card{display:none}

  /* Sections */
  .highlights{grid-template-columns:1fr;gap:14px}
  .highlight-img{height:160px}
  .am-image-grid{grid-template-columns:1fr;gap:14px}
  .am-image-card img{height:220px}
  .amenity-grid{grid-template-columns:1fr 1fr;gap:12px}
  .am-icons{grid-template-columns:repeat(2,1fr);gap:10px}
  .am-card{padding:22px 16px}
  .am-num{font-size:2.4rem}

  /* Marquee */
  .marquee-track{font-size:1.3rem;gap:24px}

  /* Urgency */
  .urgency{padding:24px 0}
  .urgency-grid{grid-template-columns:1fr;text-align:center;gap:20px}
  .urgency-cd{align-items:center}
  .cd-num{font-size:1.3rem}
  .cd-block{min-width:46px;padding:8px 10px}
  .urgency-label strong{font-size:1.3rem}

  /* Fact band */
  .fact-grid{grid-template-columns:repeat(2,1fr)}
  .fact{border-bottom:1px solid rgba(255,255,255,.08);padding:24px 16px}
  .fact-num{font-size:2rem}

  /* Location */
  .split{grid-template-columns:1fr;gap:30px}
  .loc-map{min-height:300px}

  /* Testimonials */
  .testi-grid{grid-template-columns:1fr}

  /* Contact */
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .contact-info{order:2}
  .blog-grid{grid-template-columns:1fr;gap:20px}
  .form-card{order:1}
  .form-panels{padding:22px 16px}
  .contact-points{gap:14px}
  .recent-bookings{padding:14px 16px}
  .micro-fomo{font-size:.72rem}

  /* Form */
  .form-group-line input,.form-group-line select{font-size:.9rem}
  .form-tabs .ftab{font-size:.65rem;padding:14px 10px;letter-spacing:.1em}

  /* Footer */
  .footer-grid{grid-template-columns:1fr}
  .site-footer{padding:50px 0 0}
  .footer-grid>div{padding-bottom:0}

  /* Sticky CTA */
  .sticky-cta{display:flex}
  body{padding-bottom:70px}

  /* Header */
  .header-phone, .header-cta .btn, .header-cta .btn-mini{display:none !important}
  .header-inner{padding:10px 14px}
  .brand{gap:10px}
  .brand img{height:30px !important}
  .brand-text .name{font-size:.9rem}
  .brand-text .sub{display:none}
  .hamburger{margin-left:auto}

  /* Ticker */
  .ticker-track{font-size:.68rem;gap:24px}

  /* Toast */
  .fomo-toast{left:10px;right:10px;max-width:none;padding:12px 14px;bottom:85px}

  /* Skyline section */
  .skyline{height:auto;min-height:700px;padding:80px 0;background:#0B1424}
  .skyline-overlay{
    position:relative;left:auto;bottom:auto;transform:none;
    text-align:center;align-items:center;gap:28px;
    background:rgba(11,20,36,0.75);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:40px 24px !important;
    margin:0 16px;
    border-radius:16px;
    border:1px solid rgba(230,203,122,0.25);
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
  }
  .skyline-eye{align-self:center}
  .skyline-h{
    font-size:clamp(1.6rem,7.5vw,2.2rem);line-height:1.5;margin:0 auto;
    text-wrap:balance;
    text-shadow:0 2px 10px rgba(0,0,0,0.5);
  }
  .skyline-sub{
    font-size:.92rem;line-height:1.8;margin:10px auto 0;color:rgba(255,255,255,0.9);
    text-shadow:0 2px 8px rgba(0,0,0,0.5);
  }
  .skyline-stats{
    grid-template-columns:repeat(2,1fr);gap:24px;width:100%;
    border-top:1px solid rgba(255,255,255,0.15);padding-top:24px;
  }
  .ss-num{text-shadow:0 2px 8px rgba(0,0,0,0.5)}
  .skyline-img{object-position:center 40%;opacity:0.8}
  .skyline-grade{background:rgba(11,20,36,0.5)}

  /* Pricing */
  .pricing-grid{grid-template-columns:1fr}
  .price-card{padding:28px 22px}
  .price-card .price{font-size:2rem}

  /* Residences tabs */
  .residence-tabs{padding:4px;width:auto;margin:0 0 32px}
  .rtab{padding:10px 18px;font-size:.7rem}
}


/* ============================================================
   REAL ARCHITECTURAL RENDER FRAME
   ============================================================ */
.render-frame{
  position:relative;
  width:min(100%, 540px);
  height:740px;
  margin:0 auto 20px;
  border-radius:14px;
  overflow:hidden;
  background:#0B1424;
  box-shadow:
    0 50px 120px -30px rgba(0,0,0,.6),
    0 0 0 1px rgba(201,162,39,.18) inset,
    0 0 80px rgba(201,162,39,.08) inset;
  isolation:isolate;
  transform:perspective(1800px) rotateY(-4deg) rotateX(2deg);
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.render-frame:hover{transform:perspective(1800px) rotateY(-2deg) rotateX(1deg) scale(1.012)}

.render-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
  filter:saturate(1.05) contrast(1.04);
  transform:scale(1.04);
  animation:renderDriftSlow 22s ease-in-out infinite alternate;
}
@keyframes renderDriftSlow{
  0%{transform:scale(1.04) translateY(0)}
  100%{transform:scale(1.06) translateY(-12px)}
}

/* Build-up reveal mask: drops floor-by-floor as build% increases */
.render-mask{
  position:absolute; left:0; right:0; top:0;
  height:100%;
  background:linear-gradient(180deg,
    rgba(11,20,36,.95) 0%,
    rgba(11,20,36,.85) 60%,
    rgba(11,20,36,.4) 90%,
    transparent 100%);
  transform:translateY(0);
  transition:transform 1.4s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  z-index:3;
}
.render-frame.built .render-mask{transform:translateY(-100%)}

/* Cinematic grade overlay */
.render-grade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,20,36,.0) 50%, rgba(11,20,36,.55) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(230,203,122,.18), transparent 55%);
  pointer-events:none; z-index:2;
}
.render-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(11,20,36,.55) 100%);
  pointer-events:none; z-index:2;
}

/* HUD frame corners — give it a 'sci-fi spec view' feeling */
.hud-corner{
  position:absolute; width:32px; height:32px; z-index:5;
  border-color:var(--gold); border-style:solid; border-width:0;
  pointer-events:none;
}
.hud-corner.tl{top:14px;left:14px;border-top-width:2px;border-left-width:2px}
.hud-corner.tr{top:14px;right:14px;border-top-width:2px;border-right-width:2px}
.hud-corner.bl{bottom:14px;left:14px;border-bottom-width:2px;border-left-width:2px}
.hud-corner.br{bottom:14px;right:14px;border-bottom-width:2px;border-right-width:2px}

/* Scan beam — re-position it inside the render frame */
.render-frame .scan-beam{display:none}
.scan-beam{position:absolute;left:50%;transform:translateX(-50%);width:90%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(230,203,122,.85),transparent);
  box-shadow:0 0 24px rgba(230,203,122,.55); z-index:6; bottom:0;}
.scan-beam.run{animation:scanRunNew 5s ease-in-out infinite}
@keyframes scanRunNew{
  0%{bottom:6%; opacity:0}
  10%{opacity:.95}
  50%{opacity:.95}
  90%{opacity:.4}
  100%{bottom:96%; opacity:0}
}

/* Live render stamp */
.render-stamp{
  position:absolute; bottom:18px; left:18px; right:18px; z-index:6;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:9px 14px;
  background:linear-gradient(135deg, rgba(11,20,36,.78), rgba(11,20,36,.58));
  backdrop-filter:blur(10px);
  border:1px solid rgba(230,203,122,.28);
  border-radius:6px;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.92); font-weight:700;
}
.render-stamp-eye{display:flex; align-items:center; gap:8px; color:var(--gold-soft)}
.render-stamp-meta{color:rgba(255,255,255,.65); font-weight:500; letter-spacing:.14em}

/* ===== PINS / HOTSPOTS on the render ===== */
.pin{
  position:absolute; z-index:7;
  width:18px; height:18px; padding:0; margin:0;
  background:transparent; border:none; cursor:pointer;
}
.pin-1{top:24%; left:38%}
.pin-2{top:9%; left:54%}
.pin-3{top:78%; left:46%}

.pin-dot{
  position:absolute; inset:5px;
  background:var(--gold); border-radius:50%;
  box-shadow:0 0 0 3px rgba(11,20,36,.7), 0 0 18px rgba(230,203,122,.9);
}
.pin-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--gold);
  animation:pinPulse 2.4s ease-out infinite;
}
@keyframes pinPulse{
  0%{transform:scale(1);opacity:.8}
  100%{transform:scale(2.4);opacity:0}
}
.pin-label{
  position:absolute; top:50%; left:24px; transform:translateY(-50%);
  white-space:nowrap;
  background:rgba(11,20,36,.92);
  color:#fff; font-size:.68rem; font-weight:600; letter-spacing:.06em;
  padding:6px 11px; border-radius:5px;
  border:1px solid rgba(230,203,122,.35);
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.pin:hover .pin-label, .pin:focus-visible .pin-label{
  opacity:1; transform:translateY(-50%) translateX(4px);
}

/* Mobile hide pin labels by default; pins remain */
@media(max-width:720px){
  .render-frame{height:520px; transform:none}
  .render-frame:hover{transform:none}
  .pin-label{display:none}
}

/* ============================================================
   SKYLINE SECTION (full-bleed dusk render)
   ============================================================ */
.skyline{
  position:relative;
  width:100%;
  height:min(86vh, 760px);
  min-height:520px;
  overflow:hidden;
  background:#0B1424;
  isolation:isolate;
}
.skyline-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 35%;
  filter:saturate(1.04) contrast(1.06);
  transform:scale(1.06);
  animation:skylineDrift 24s ease-in-out infinite alternate;
}
@keyframes skylineDrift{
  0%{transform:scale(1.06) translateY(0)}
  100%{transform:scale(1.10) translateY(-18px)}
}
.skyline-grade{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(11,20,36,.15) 0%,
    rgba(11,20,36,.05) 30%,
    rgba(11,20,36,.6) 80%,
    rgba(11,20,36,.92) 100%);
  z-index:2; pointer-events:none;
}
.skyline-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 20%, rgba(230,203,122,.18), transparent 55%);
  z-index:2; pointer-events:none;
}
.skyline-overlay{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  z-index:3; padding-bottom:64px; padding-top:64px;
  color:#fff;
  display:flex; flex-direction:column; gap:18px;
}
.skyline-eye{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:var(--gold-soft);
  background:rgba(11,20,36,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(230,203,122,.32);
  padding:8px 14px; border-radius:30px;
  align-self:flex-start;
}
.skyline-h{
  font-family:var(--serif);
  font-size:clamp(2.4rem, 4.8vw, 4.4rem);
  font-weight:500; line-height:1.02; letter-spacing:-.02em;
  color:#fff; max-width:920px;
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.skyline-h em{font-style:italic; color:var(--gold-soft); font-weight:500}
.skyline-sub{
  font-size:1.05rem; line-height:1.55;
  color:rgba(255,255,255,.82); max-width:640px;
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.skyline-sub strong{color:var(--gold-soft); font-weight:600}
.skyline-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px; margin-top:18px; max-width:760px;
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:24px;
}
.skyline-stats > div{display:flex; flex-direction:column; gap:4px}
.ss-num{
  font-family:var(--serif);
  font-size:clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight:600; color:#fff; line-height:1;
}
.ss-num em{color:var(--gold-soft); font-size:.55em; font-weight:500; font-style:normal; margin-left:3px}
.ss-l{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.6); font-weight:600;
}