/* Monaco Residence v7 — Sea Breeze Patterns */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; font-size:16px; }
body {
  background:#F8F6F1;
  color:#0E0C0A;
  font-family:'Montserrat',sans-serif;
  font-weight:300;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { background:none; border:none; color:inherit; cursor:pointer; }

.skip-link {
  position:fixed; top:-200%; left:16px; z-index:99999;
  background:var(--g); color:#000;
  padding:10px 20px; font-size:14px; font-weight:500;
  letter-spacing:.06em; transition:top .18s ease; border-radius:2px;
}
.skip-link:focus { top:16px; outline:none; }
:focus { outline:none; }
:focus-visible { outline:2px solid var(--g); outline-offset:4px; border-radius:2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .h-n1-inner { transform:none !important; }
  .h-img-wrap { clip-path:inset(0 0 0 0) !important; }
}

:root {
  --g:    #C9A96E;
  --g2:   #EDD9A3;
  --lt:   #F8F6F1;
  --lt2:  #F0EBE2;
  --dk:   #0A0806;
  --tx:   #0E0C0A;
  --tx2:  #6B6459;
  --S:    'Cormorant Garamond', Georgia, serif;
  --ss:   'Montserrat', sans-serif;
  --ease: cubic-bezier(.19,1,.22,1);
}

/* ── SCROLL PROGRESS ── */
#scroll-bar {
  position:fixed; top:0; left:0; right:0; height:2px; z-index:9001;
  background:rgba(14,12,10,.06);
}
#scroll-fill { height:100%; width:0; background:var(--g); transition:width .05s linear; }

/* ── SECTION INDEX COUNTER ── */
#sec-idx {
  position:fixed; bottom:36px; left:36px; z-index:700;
  font-family:var(--S); font-size:clamp(48px,5vw,72px);
  font-weight:200; color:rgba(255,255,255,.12);
  letter-spacing:.04em; line-height:1;
  pointer-events:none; user-select:none;
  transition:color .6s ease, opacity .6s;
  mix-blend-mode:difference;
}
@media(max-width:640px){ #sec-idx { display:none; } }

/* ── LOADER ── */
#loader {
  position:fixed; inset:0; z-index:8000; background:var(--dk);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:60px 72px;
}
#ld-pct {
  font-family:var(--S); font-size:clamp(80px,14vw,180px);
  font-weight:200; line-height:1; letter-spacing:.04em; color:#fff;
}
#ld-line { width:100%; height:1px; background:rgba(255,255,255,.1); margin-top:24px; overflow:hidden; }
#ld-prog { height:100%; width:0; background:var(--g); }

/* ── NAV ── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:32px 72px;
  transition:padding .5s var(--ease), background .5s, backdrop-filter .5s;
}
#nav.stuck {
  padding:18px 72px;
  background:rgba(10,8,6,.92);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.n-logo { display:flex; flex-direction:column; }
.n-logo span:first-child { font-size:10px; font-weight:500; letter-spacing:.35em; line-height:1; color:#fff; }
.n-logo span:last-child { font-size:7px; font-weight:300; letter-spacing:.4em; color:rgba(255,255,255,.4); margin-top:3px; }
.n-links { display:flex; gap:36px; }
.n-links a {
  font-size:9px; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.6); transition:color .3s;
}
.n-links a:hover { color:#fff; }
.n-cta {
  font-size:9px; font-weight:400; letter-spacing:.2em;
  border:1px solid rgba(255,255,255,.3); padding:10px 22px;
  color:#fff; transition:all .35s;
}
.n-cta:hover { background:var(--g); border-color:var(--g); color:#000; }
.n-lang { display:flex; align-items:center; gap:2px; }
.lang-btn {
  background:none; border:none; font-family:var(--ss);
  font-size:9px; font-weight:400; letter-spacing:.18em;
  color:rgba(255,255,255,.3); cursor:pointer; padding:5px 7px;
  transition:color .25s; line-height:1;
}
.lang-btn:hover { color:rgba(255,255,255,.7); }
.lang-btn.lang-active { color:var(--g); border-bottom:1px solid var(--g); }
.n-right { display:flex; align-items:center; gap:16px; }
.n-burger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; width:36px; height:36px; padding:4px;
}
.n-burger span {
  display:block; width:22px; height:1px;
  background:#fff; transition:transform .35s var(--ease), opacity .25s;
}
.n-burger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.n-burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.n-burger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
#hero {
  position:relative; height:100vh; height:100dvh;
  overflow:hidden; background:var(--dk);
  display:flex; align-items:flex-end;
}
.h-img-wrap { position:absolute; inset:0; z-index:1; clip-path:inset(100% 0 0 0); }
.h-img {
  position:absolute; inset:-6%;
  background-size:cover; background-position:42% center;
  will-change:transform;
  filter:brightness(1.06) contrast(1.04) saturate(1.18);
}
.h-img-ov {
  position:absolute; inset:0;
  background:
    linear-gradient(to right,  rgba(0,0,0,.32) 0%, rgba(0,0,0,.06) 38%, transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.52) 0%, rgba(0,0,0,.18) 14%, transparent 32%, transparent 52%, rgba(0,0,0,.62) 100%);
}
.h-content {
  position:relative; z-index:3;
  padding:0 72px 72px; max-width:780px;
}
.h-tag {
  font-size:9px; font-weight:400; letter-spacing:.36em; text-transform:uppercase;
  color:rgba(255,255,255,.38); margin-bottom:20px; opacity:0; transform:translateY(10px);
}
.h-name { display:flex; flex-direction:column; margin:0; }
.h-n1 {
  font-family:var(--S); font-size:clamp(80px,11vw,160px);
  font-weight:200; line-height:.88; letter-spacing:.02em; color:#fff;
  display:block; overflow:hidden;
}
.h-n1-inner { display:block; transform:translateY(105%); }
.h-n2 {
  font-family:var(--ss); font-size:clamp(10px,1.4vw,18px);
  font-weight:200; letter-spacing:.7em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-top:12px;
  display:block; opacity:0; transform:translateY(12px);
}
/* SEABREEZE PATTERN: spaced letter repeat */
.h-spaced {
  font-family:var(--S); font-size:clamp(10px,1.2vw,15px);
  font-weight:200; letter-spacing:.5em; color:rgba(255,255,255,.12);
  text-transform:uppercase; margin-top:4px;
  opacity:0; transform:translateY(8px);
  user-select:none;
}
.h-sep {
  width:0; height:1px; background:var(--g);
  margin:28px 0 24px; transition:width 1.1s var(--ease);
}
.h-sep.show { width:64px; }
.h-del {
  font-family:var(--S); font-size:clamp(18px,2vw,26px);
  font-weight:200; line-height:1.45; color:rgba(255,255,255,.52);
  margin-bottom:36px; opacity:0; transform:translateY(12px);
}
.h-cta {
  display:inline-flex; align-items:center; gap:10px;
  font-size:10px; font-weight:400; letter-spacing:.3em; text-transform:uppercase;
  color:var(--g); border:1px solid rgba(201,169,110,.4);
  padding:16px 36px; opacity:0; transform:translateY(10px);
  transition:background .35s, color .35s, border-color .35s;
}
.h-cta:hover { background:var(--g); color:#000; border-color:var(--g); }
.h-scroll {
  position:absolute; bottom:40px; right:72px; z-index:3;
  display:flex; flex-direction:column; align-items:center;
}
.hs-bar {
  width:1px; height:56px;
  background:linear-gradient(to bottom, transparent, var(--g));
  animation:drop 2.4s ease-in-out infinite;
}
@keyframes drop { 0%,100%{opacity:.3} 50%{opacity:1} }
.h-badges {
  position:absolute; top:clamp(80px,11vh,130px); right:clamp(24px,5vw,72px);
  z-index:3; display:flex; flex-direction:column; gap:10px; opacity:0;
}
.h-badge {
  background:rgba(0,0,0,.42); backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border:1px solid rgba(201,169,110,.3); border-radius:3px;
  padding:10px 18px; text-align:center; min-width:84px;
}
.hb-val {
  font-family:var(--S); font-size:clamp(20px,2.4vw,30px);
  font-weight:200; color:#fff; line-height:1; letter-spacing:.02em;
}
.hb-lbl {
  font-size:8px; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--g); margin-top:5px;
}

/* ══════════════════════════════════
   ABOUT — TABS WITH CROSSFADE BG
   (seabreeze.az 2.about pattern)
══════════════════════════════════ */
#about {
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; align-items:center;
}
.abt-bg {
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  will-change:transform, opacity;
  opacity:0; transition:opacity .8s ease;
}
.abt-bg--active { opacity:1; }
.abt-ov {
  position:absolute; inset:0;
  background:linear-gradient(110deg, rgba(10,8,6,.88) 0%, rgba(10,8,6,.72) 50%, rgba(10,8,6,.42) 100%);
  z-index:1;
}
.abt-inner {
  position:relative; z-index:2;
  width:100%; max-width:1400px; margin:0 auto;
  padding:140px 72px 100px;
}
.abt-top { margin-bottom:64px; }
.abt-eyebrow {
  font-size:9px; font-weight:400; letter-spacing:.36em; text-transform:uppercase;
  color:var(--g); margin-bottom:20px;
}
.abt-h {
  font-family:var(--S); font-size:clamp(52px,7vw,100px);
  font-weight:200; line-height:1.0; color:#fff;
}
.abt-h em { font-style:italic; color:var(--g); }
.abt-main {
  display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:start;
  margin-bottom:60px;
}
.abt-tabs { display:flex; flex-direction:column; gap:0; }
.abt-tab {
  display:flex; align-items:center; gap:20px;
  padding:24px 0; border:none; background:none;
  text-align:left; border-bottom:1px solid rgba(255,255,255,.07);
  position:relative; overflow:hidden;
  transition:padding-left .3s;
}
.abt-tab:hover { padding-left:6px; }
.abt-tab-n {
  font-family:var(--S); font-size:15px; font-weight:200;
  color:rgba(255,255,255,.2); min-width:28px; line-height:1;
  transition:color .3s;
}
.abt-tab-lbl {
  font-size:11px; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.4); transition:color .3s;
}
.abt-tab-line {
  position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--g);
  transition:width .5s var(--ease);
}
.abt-tab--active .abt-tab-n { color:var(--g); }
.abt-tab--active .abt-tab-lbl { color:#fff; }
.abt-tab--active .abt-tab-line { width:100%; }
.abt-panels { position:relative; }
.abt-panel {
  display:none; animation:panelFade .5s ease;
}
.abt-panel--active { display:block; }
@keyframes panelFade { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.abt-p {
  font-size:14px; font-weight:300; line-height:1.85;
  color:rgba(255,255,255,.6); margin-bottom:28px;
}
.abt-list { list-style:none; margin-bottom:32px; }
.abt-list li {
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:300; letter-spacing:.06em;
  color:rgba(255,255,255,.5); padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.abt-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--g); flex-shrink:0;
}
.abt-cta {
  display:inline-flex; align-items:center; gap:8px;
  font-size:10px; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:var(--g); transition:gap .3s;
}
.abt-cta:hover { gap:16px; }
.abt-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
}
.abt-card {
  position:relative; overflow:hidden; height:200px;
  cursor:pointer;
  opacity:.4; transition:opacity .4s;
}
.abt-card--active { opacity:1; }
.abt-card-img {
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  transition:transform .8s var(--ease);
}
.abt-card:hover .abt-card-img { transform:scale(1.06); }
.abt-card-lbl {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:16px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
  font-size:10px; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.abt-card--active .abt-card-lbl { color:var(--g); }

/* ══════════════════════════════════
   MARQUEE
══════════════════════════════════ */
#marquee { overflow:hidden; padding:22px 0; background:var(--dk); }
.mq-track { display:flex; white-space:nowrap; }
.mq-inner {
  display:flex; align-items:center; flex-shrink:0;
  font-family:var(--S); font-size:clamp(18px,2.5vw,32px);
  font-weight:200; letter-spacing:.04em; color:rgba(255,255,255,.45);
  animation:marq 32s linear infinite;
}
.mq-dot { color:var(--g); padding:0 20px; opacity:.6; }
@keyframes marq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
#marquee:hover .mq-inner { animation-play-state:paused; }

/* ══════════════════════════════════
   DEVELOPMENT — COUNT-UP
   (seabreeze.az 5.development pattern)
══════════════════════════════════ */
#development {
  position:relative; min-height:70vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.dev-bg {
  position:absolute; inset:-8%;
  background-size:cover; background-position:center 30%;
  will-change:transform;
}
.dev-ov {
  position:absolute; inset:0;
  background:rgba(10,8,6,.78);
}
.dev-inner {
  position:relative; z-index:2;
  width:100%; max-width:1300px; margin:0 auto;
  padding:120px 72px;
}
.dev-eyebrow {
  font-size:9px; font-weight:400; letter-spacing:.36em; text-transform:uppercase;
  color:var(--g); margin-bottom:16px;
}
.dev-h {
  font-family:var(--S); font-size:clamp(36px,5vw,72px);
  font-weight:200; line-height:1.1; color:#fff; margin-bottom:72px;
}
.dev-h em { font-style:italic; color:var(--g); }
.dev-stats {
  display:flex; align-items:stretch; gap:0;
  border-top:1px solid rgba(201,169,110,.15);
  margin-bottom:56px;
}
.dev-stat {
  flex:1; padding:44px 0 0; text-align:center;
}
.dev-num {
  font-family:var(--S); font-size:clamp(56px,8vw,110px);
  font-weight:200; line-height:1; color:#fff;
  letter-spacing:-.01em;
}
.dev-lbl {
  font-size:9px; font-weight:400; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-top:12px;
}
.dev-sep {
  width:1px; background:rgba(201,169,110,.15); flex-shrink:0;
}
.dev-map {
  display:inline-flex; align-items:center; gap:12px;
  font-size:10px; font-weight:400; letter-spacing:.28em; text-transform:uppercase;
  color:var(--g); border:1px solid rgba(201,169,110,.3);
  padding:16px 36px;
  transition:background .35s, color .35s, border-color .35s, gap .35s;
}
.dev-map:hover {
  background:var(--g); color:#000; border-color:var(--g); gap:20px;
}
.dev-map-arrow { transition:transform .35s; }
.dev-map:hover .dev-map-arrow { transform:translateX(4px); }

/* ══════════════════════════════════
   TYPE BREAK
══════════════════════════════════ */
#type-break {
  background:var(--dk); padding:28px 0; overflow:hidden; display:flex; flex-direction:column;
}
.tb-track {
  display:flex; white-space:nowrap;
  font-family:var(--S); font-size:clamp(72px,12vw,180px);
  font-weight:200; line-height:1.05; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.08);
  letter-spacing:.06em; animation:tbScroll 18s linear infinite; user-select:none;
}
.tb-track--rev { animation-direction:reverse; animation-duration:22s; -webkit-text-stroke-color:rgba(201,169,110,.07); }
@keyframes tbScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
#type-break:hover .tb-track { -webkit-text-stroke-color:rgba(201,169,110,.15); }

/* ══════════════════════════════════
   NIGHT
══════════════════════════════════ */
#night {
  position:relative; height:100vh; height:100dvh;
  overflow:hidden; display:flex; align-items:flex-end;
}
.ni-img { position:absolute; inset:-12%; background-size:cover; background-position:center; will-change:transform; }
.ni-ov { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,.04) 100%); }
.ni-body { position:relative; z-index:2; padding:0 80px 72px; width:100%; }
.ni-word { font-family:var(--S); font-size:clamp(70px,12vw,180px); font-weight:200; line-height:.9; letter-spacing:.04em; color:#fff; display:block; }
.ni-line { width:80px; height:1px; background:var(--g); margin:20px 0 16px; }
.ni-foot { font-size:11px; font-weight:300; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.4); }

/* ══════════════════════════════════
   PLANS
══════════════════════════════════ */
#plans { background:var(--lt2); border-top:1px solid rgba(14,12,10,.07); }
.pl-top {
  max-width:1340px; margin:0 auto; padding:100px 72px 56px;
  display:flex; align-items:baseline; gap:32px;
}
.pl-n { font-family:var(--S); font-size:88px; font-weight:200; color:rgba(14,12,10,.06); line-height:1; flex-shrink:0; }
.pl-h { font-family:var(--S); font-size:clamp(36px,4vw,60px); font-weight:200; color:var(--tx); }
.pl-sub { font-size:10px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:rgba(14,12,10,.4); align-self:center; margin-left:auto; }
.pl-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.pl-card {
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--dk); border:1px solid rgba(201,169,110,.08);
  transition:border-color .4s;
}
.pl-card:hover { border-color:rgba(201,169,110,.22); }
.plc-svg {
  flex:1; min-height:300px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(201,169,110,.05) 0%, transparent 60%);
  padding:clamp(20px,3vw,48px);
  border-bottom:1px solid rgba(201,169,110,.1);
  transition:background .4s;
}
.pl-card:hover .plc-svg { background:linear-gradient(135deg, rgba(201,169,110,.09) 0%, transparent 65%); }
.plc-svg svg { width:100%; height:100%; max-height:260px; }
.plc-body { padding:28px 32px 32px; }
.plc-type {
  font-family:var(--S); font-size:clamp(52px,5.5vw,80px);
  font-weight:200; line-height:1; color:#fff; margin-bottom:8px;
}
.plc-size { font-size:11px; font-weight:300; letter-spacing:.14em; color:var(--g); margin-bottom:16px; }
.plc-sep { width:36px; height:1px; background:rgba(201,169,110,.3); margin-bottom:16px; transition:width .5s var(--ease); }
.pl-card:hover .plc-sep { width:56px; background:var(--g); }
.plc-desc { font-size:12px; font-weight:300; line-height:1.8; color:rgba(255,255,255,.45); max-width:260px; }

/* ══════════════════════════════════
   INFRASTRUCTURE — lifestyle slider + grid
   (seabreeze.az 8.infra pattern)
══════════════════════════════════ */
#infra { background:var(--lt); border-top:1px solid rgba(14,12,10,.07); }

/* Lifestyle text slider */
.ls-slider {
  background:var(--dk); padding:72px;
  border-bottom:1px solid rgba(201,169,110,.08);
}
.lss-inner { position:relative; min-height:180px; margin-bottom:32px; }
.lss-slide {
  display:none; animation:panelFade .5s ease;
}
.lss-slide--active { display:block; }
.lss-num {
  font-family:var(--S); font-size:12px; font-weight:200;
  letter-spacing:.4em; color:var(--g); margin-bottom:24px;
}
.lss-q {
  font-family:var(--S); font-size:clamp(24px,3.5vw,48px);
  font-weight:200; line-height:1.2; color:#fff; margin-bottom:20px;
  font-style:italic;
}
.lss-txt {
  font-size:13px; font-weight:300; line-height:1.85;
  color:rgba(255,255,255,.45); max-width:680px;
}
.lss-nav {
  display:flex; align-items:center; gap:20px;
}
.lss-prev, .lss-next {
  font-size:18px; color:rgba(255,255,255,.4);
  padding:8px 12px; transition:color .3s;
}
.lss-prev:hover, .lss-next:hover { color:var(--g); }
.lss-dots { display:flex; gap:8px; }
.lss-dot {
  width:20px; height:1px; background:rgba(255,255,255,.2);
  transition:background .3s, width .3s;
}
.lss-dot--active { background:var(--g); width:32px; }

.inf-head {
  max-width:1340px; margin:0 auto; padding:80px 72px 48px;
  display:flex; align-items:baseline; gap:32px;
}
.inf-n { font-family:var(--S); font-size:88px; font-weight:200; color:rgba(14,12,10,.06); line-height:1; flex-shrink:0; }
.inf-h { font-family:var(--S); font-size:clamp(36px,4vw,60px); font-weight:200; color:var(--tx); }
.inf-sub { font-size:10px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:rgba(14,12,10,.38); align-self:center; margin-left:auto; }
.inf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.inf-card { position:relative; height:42vh; min-height:260px; overflow:hidden; }
.inf-bg {
  position:absolute; inset:-8%; background-size:cover; background-position:center;
  transition:transform 1.1s var(--ease);
}
.inf-card:hover .inf-bg { transform:scale(1.07); }
.inf-ov {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.1) 100%);
  transition:background .4s;
}
.inf-card:hover .inf-ov { background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 50%, rgba(0,0,0,.06) 100%); }
.inf-body { position:absolute; bottom:0; left:0; right:0; z-index:2; padding:24px 28px; }
.inf-num {
  font-family:var(--S); font-size:clamp(28px,3.5vw,48px);
  font-weight:200; color:var(--g); line-height:1; margin-bottom:4px;
}
.inf-title { font-size:11px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:6px; }
.inf-desc { font-size:11px; font-weight:300; color:rgba(255,255,255,.5); line-height:1.5; }

/* ══════════════════════════════════
   GALLERY
══════════════════════════════════ */
#gallery { background:var(--dk); }
#gal-pin {
  height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:60px;
}
.gal-label { padding:0 72px; margin-bottom:24px; font-size:10px; font-weight:300; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.25); }
.gal-label em { font-style:italic; color:var(--g); }
#gal-track { display:flex; gap:3px; padding:0 72px; will-change:transform; }
.gf { flex:0 0 40vw; height:55vh; position:relative; overflow:hidden; cursor:pointer; }
.gf-img { position:absolute; inset:-8%; background-size:cover; background-position:center; transition:transform 1s var(--ease); }
.gf:hover .gf-img { transform:scale(1.05); }
figcaption { position:absolute; bottom:16px; left:16px; z-index:2; font-family:var(--S); font-size:16px; font-weight:300; color:rgba(255,255,255,.72); letter-spacing:.04em; }
.gf::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 52%); }
.gf::before {
  content:'↗'; position:absolute; top:16px; right:16px; z-index:3;
  font-size:18px; color:rgba(255,255,255,.5);
  opacity:0; transition:opacity .3s;
}
.gf:hover::before { opacity:1; }

/* ══════════════════════════════════
   LOCATION — seabreeze.az 3.location pattern
   Repeat title + badges + carousel
══════════════════════════════════ */
#location {
  background:var(--dk); border-top:1px solid rgba(255,255,255,.04);
  overflow:hidden;
}
.loc-head {
  padding:100px 72px 0; overflow:hidden;
}
.loc-repeat {
  font-family:var(--S); font-size:clamp(12px,1.5vw,18px);
  font-weight:200; font-style:italic;
  letter-spacing:.06em; color:rgba(255,255,255,.18);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:28px;
}
.loc-h {
  font-family:var(--S); font-size:clamp(52px,8vw,116px);
  font-weight:200; line-height:.96; letter-spacing:.02em; color:#fff;
  margin-bottom:0;
}
.loc-h em { font-style:italic; color:var(--g); display:block; }
.loc-badges {
  display:flex; align-items:center; gap:0;
  padding:48px 72px; border-bottom:1px solid rgba(255,255,255,.06);
}
.loc-badge { flex:1; text-align:center; padding:20px 0; }
.locb-val {
  font-family:var(--S); font-size:clamp(32px,4.5vw,64px);
  font-weight:200; color:var(--g); line-height:1; margin-bottom:8px;
}
.locb-lbl {
  font-size:9px; font-weight:400; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.3);
}
.locb-sep { width:1px; height:60px; background:rgba(255,255,255,.08); flex-shrink:0; }

/* Carousel */
.loc-carousel {
  position:relative; height:60vh; min-height:360px; overflow:hidden;
}
.loc-slides {
  display:flex; height:100%;
  transition:transform .7s var(--ease);
}
.loc-slide {
  flex:0 0 100%; height:100%;
  background-size:cover; background-position:center;
}
.loc-prev, .loc-next {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  font-size:24px; color:rgba(255,255,255,.5);
  padding:20px 28px; transition:color .3s, background .3s;
  background:rgba(0,0,0,.2); backdrop-filter:blur(8px);
}
.loc-prev { left:0; }
.loc-next { right:0; }
.loc-prev:hover, .loc-next:hover { color:#fff; background:rgba(0,0,0,.4); }
.loc-counter {
  position:absolute; bottom:20px; right:28px; z-index:3;
  font-size:9px; font-weight:400; letter-spacing:.3em;
  color:rgba(255,255,255,.4);
}

/* ══════════════════════════════════
   PAYMENT
══════════════════════════════════ */
#payment {
  background:var(--lt2);
  border-top:1px solid rgba(14,12,10,.07);
  border-bottom:1px solid rgba(14,12,10,.07);
}
.pay-head {
  max-width:1400px; margin:0 auto;
  padding:100px 72px 56px;
  display:flex; align-items:baseline; gap:28px;
}
.pay-n { font-family:var(--S); font-size:88px; font-weight:200; color:rgba(14,12,10,.05); line-height:1; flex-shrink:0; }
.pay-h { font-family:var(--S); font-size:clamp(36px,4vw,60px); font-weight:200; color:var(--tx); }
.pay-h em { font-style:italic; color:var(--g); }
.pay-sub { font-size:10px; font-weight:300; letter-spacing:.16em; text-transform:uppercase; color:rgba(14,12,10,.38); align-self:center; margin-left:auto; }
.pay-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.pay-card {
  background:var(--lt); padding:52px 48px 48px;
  display:flex; flex-direction:column;
  border-top:2px solid transparent;
  transition:border-color .35s; position:relative;
}
.pay-card:hover { border-color:var(--g); }
.pay-card--gold { background:var(--dk); border-top:2px solid var(--g); }
.pc-badge {
  display:inline-flex; align-items:center;
  font-size:8px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:#000; background:var(--g); padding:5px 12px;
  margin-bottom:24px; align-self:flex-start;
}
.pc-label { font-size:9px; font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:var(--tx2); margin-bottom:16px; }
.pay-card--gold .pc-label { color:rgba(255,255,255,.38); }
.pc-val { font-family:var(--S); font-size:clamp(56px,7vw,100px); font-weight:200; line-height:1; color:var(--g); }
.pc-note { font-size:11px; font-weight:300; color:var(--tx2); margin-top:6px; margin-bottom:32px; }
.pay-card--gold .pc-note { color:rgba(255,255,255,.4); }
.pc-list {
  list-style:none; flex:1;
  display:flex; flex-direction:column;
  border-top:1px solid rgba(14,12,10,.07); margin-bottom:36px;
}
.pay-card--gold .pc-list { border-color:rgba(255,255,255,.08); }
.pc-list li {
  font-size:12px; font-weight:300; letter-spacing:.04em;
  color:rgba(14,12,10,.55); padding:14px 0;
  border-bottom:1px solid rgba(14,12,10,.06);
  display:flex; align-items:center; gap:10px;
}
.pay-card--gold .pc-list li { color:rgba(255,255,255,.5); border-color:rgba(255,255,255,.06); }
.pc-list li::before { content:'—'; color:var(--g); font-size:12px; flex-shrink:0; }
.pc-cta {
  display:flex; align-items:center; justify-content:center;
  padding:16px; border:1px solid rgba(14,12,10,.18);
  font-size:9px; font-weight:400; letter-spacing:.26em; text-transform:uppercase;
  color:var(--tx); transition:all .35s;
}
.pc-cta:hover { background:var(--g); border-color:var(--g); color:#000; }
.pay-card--gold .pc-cta { border-color:var(--g); color:var(--g); }
.pay-card--gold .pc-cta:hover { background:var(--g); color:#000; }

/* ══════════════════════════════════
   ABOUT SEA BREEZE
══════════════════════════════════ */
#about-sb {
  position:relative; padding:120px 72px;
  overflow:hidden; display:flex; align-items:center; min-height:80vh;
}
.ab-bg {
  position:absolute; inset:-10%;
  background-size:cover; background-position:center 40%; will-change:transform;
}
.ab-ov {
  position:absolute; inset:0;
  background:linear-gradient(110deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.75) 55%, rgba(10,8,6,.45) 100%);
}
.ab-inner {
  position:relative; z-index:2;
  width:100%; max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.ab-tag { font-size:9px; font-weight:400; letter-spacing:.36em; text-transform:uppercase; color:var(--g); margin-bottom:20px; }
.ab-h { font-family:var(--S); font-size:clamp(40px,5vw,74px); font-weight:200; line-height:1.08; color:#fff; margin-bottom:28px; }
.ab-h em { font-style:italic; color:var(--g); }
.ab-p { font-size:13px; font-weight:300; line-height:1.9; color:rgba(255,255,255,.5); max-width:400px; }
.ab-stats { display:flex; align-items:stretch; border:1px solid rgba(255,255,255,.08); }
.abs-item { flex:1; padding:36px 28px; text-align:center; display:flex; flex-direction:column; gap:8px; }
.abs-val { font-family:var(--S); font-size:clamp(32px,4vw,56px); font-weight:200; color:#fff; line-height:1; }
.abs-val sup { font-size:.5em; vertical-align:super; color:var(--g); }
.abs-lbl { font-size:9px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.3); }
.abs-sep { width:1px; background:rgba(255,255,255,.08); flex-shrink:0; }

/* ══════════════════════════════════
   CTA
══════════════════════════════════ */
#cta {
  position:relative; overflow:hidden; background:var(--dk);
  padding:140px 72px 120px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  border-top:1px solid rgba(255,255,255,.04);
}
#cta::before {
  content:''; position:absolute; top:40%; left:50%; transform:translate(-50%,-50%);
  width:700px; height:320px;
  background:radial-gradient(ellipse at center, rgba(201,169,110,.06) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
.ct-gold-line { width:1px; height:80px; background:linear-gradient(to bottom,transparent,var(--g)); margin-bottom:44px; position:relative; z-index:1; }
.ct-brand { font-size:10px; font-weight:300; letter-spacing:.42em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:16px; position:relative; z-index:1; }
.ct-big { font-family:var(--S); font-size:clamp(90px,16vw,220px); font-weight:200; letter-spacing:.06em; line-height:.88; color:#fff; position:relative; z-index:1; }
.ct-res { font-family:var(--ss); font-size:clamp(11px,2vw,22px); font-weight:200; letter-spacing:.6em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:24px; position:relative; z-index:1; }
.ct-sub { font-size:12px; font-weight:300; letter-spacing:.1em; color:rgba(255,255,255,.32); font-style:italic; margin-bottom:40px; position:relative; z-index:1; }
.ct-acts { display:flex; gap:12px; margin-bottom:28px; position:relative; z-index:1; }
.ct-ghost {
  font-size:10px; font-weight:300; letter-spacing:.16em; text-transform:uppercase;
  padding:18px 32px; border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.65); transition:all .35s;
  min-height:48px; display:flex; align-items:center;
}
.ct-ghost:hover { border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.04); }
.ct-url { font-size:10px; font-weight:300; letter-spacing:.28em; color:rgba(255,255,255,.18); position:relative; z-index:1; }
.ct-url:hover { color:var(--g); }
.ct-wa { border-color:rgba(37,211,102,.3); color:rgba(37,211,102,.7); }
.ct-wa:hover { border-color:rgba(37,211,102,.7); color:rgb(37,211,102); background:rgba(37,211,102,.04); }

/* CTA Form */
.ct-form { width:100%; max-width:720px; margin:0 auto 36px; position:relative; z-index:1; }
.ctf-row { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-bottom:2px; }
.ctf-field { position:relative; }
.ctf-input {
  width:100%; background:rgba(255,255,255,.04);
  border:none; border-bottom:1px solid rgba(255,255,255,.15);
  padding:28px 20px 10px; color:#fff;
  font-family:var(--ss); font-size:13px; font-weight:300; letter-spacing:.04em;
  outline:none; transition:background .3s, border-color .3s;
  -webkit-appearance:none; appearance:none;
}
.ctf-input:focus { background:rgba(255,255,255,.07); border-color:var(--g); }
.ctf-label {
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  font-size:9px; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.3); pointer-events:none;
  transition:top .2s, font-size .2s, color .2s;
}
.ctf-input:focus + .ctf-label,
.ctf-input:not(:placeholder-shown) + .ctf-label { top:14px; font-size:8px; color:var(--g); }
.ctf-select option { background:#1a1510; color:#fff; }
.ctf-submit {
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; padding:22px; margin-top:2px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  background:var(--g); color:#000; font-weight:500;
  border:none; transition:background .3s, gap .3s; cursor:pointer;
}
.ctf-submit:hover { background:var(--g2); gap:20px; }
.ctf-arrow { transition:transform .3s; }
.ctf-submit:hover .ctf-arrow { transform:translateX(4px); }
.ctf-success {
  margin-top:20px; padding:16px 20px;
  font-size:12px; font-weight:300; letter-spacing:.06em;
  color:var(--g); border:1px solid rgba(201,169,110,.3);
  text-align:center; line-height:1.6;
}
.ctf-note { margin-top:12px; font-size:9px; font-weight:300; letter-spacing:.08em; color:rgba(255,255,255,.18); text-align:center; }

/* ── FOOTER ── */
footer {
  background:#060404; padding:30px 72px;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.04);
}
footer a { transition:color .3s; }
footer a:hover { color:var(--g) !important; }

/* ══════════════════════════════════
   MOBILE MENU
══════════════════════════════════ */
#mobile-menu {
  position:fixed; inset:0; z-index:900;
  background:var(--dk);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease);
}
#mobile-menu.open { opacity:1; pointer-events:all; }
.mm-inner { display:flex; flex-direction:column; align-items:flex-start; padding:0 48px; width:100%; }
.mm-links { display:flex; flex-direction:column; gap:8px; margin-bottom:48px; }
.mm-link {
  font-family:var(--S); font-size:clamp(36px,10vw,64px);
  font-weight:200; color:rgba(255,255,255,.55); letter-spacing:.02em;
  transition:color .3s, transform .3s;
  transform:translateX(-20px); opacity:0;
}
#mobile-menu.open .mm-link { transform:translateX(0); opacity:1; }
#mobile-menu.open .mm-link:nth-child(1) { transition-delay:.08s; }
#mobile-menu.open .mm-link:nth-child(2) { transition-delay:.14s; }
#mobile-menu.open .mm-link:nth-child(3) { transition-delay:.20s; }
#mobile-menu.open .mm-link:nth-child(4) { transition-delay:.26s; }
#mobile-menu.open .mm-link:nth-child(5) { transition-delay:.32s; }
#mobile-menu.open .mm-link:nth-child(6) { transition-delay:.38s; }
.mm-link:hover { color:#fff; transform:translateX(6px) !important; }
.mm-cta {
  font-family:var(--S); font-size:clamp(20px,6vw,36px);
  font-weight:200; color:var(--g); letter-spacing:.1em;
  border-top:1px solid rgba(255,255,255,.08); padding-top:24px; width:100%; margin-bottom:16px;
}
.mm-foot { font-size:10px; font-weight:300; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.18); }

/* ══════════════════════════════════
   FLOATING BUTTONS
══════════════════════════════════ */
#float-btns {
  position:fixed; bottom:32px; right:32px; z-index:800;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:0; transform:translateY(20px);
  transition:opacity .4s, transform .4s; pointer-events:none;
}
#float-btns.visible { opacity:1; transform:translateY(0); pointer-events:all; }
#float-wa {
  width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.35);
  transition:transform .3s, box-shadow .3s;
}
#float-wa:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,.5); }
#float-cta {
  width:64px; height:64px; border-radius:50%;
  background:var(--g); color:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  box-shadow:0 4px 20px rgba(201,169,110,.35);
  transition:transform .3s, box-shadow .3s;
}
#float-cta:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(201,169,110,.55); }
.fc-label { font-family:var(--S); font-size:22px; font-weight:200; line-height:1; }
.fc-sub { font-size:7px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; opacity:.7; }

/* ══════════════════════════════════
   LIGHTBOX
══════════════════════════════════ */
#lightbox {
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center;
}
#lightbox[hidden] { display:none; }
.lb-ov { position:absolute; inset:0; background:rgba(0,0,0,.94); }
.lb-wrap {
  position:relative; z-index:2;
  width:min(92vw, 1400px); height:min(88vh, 900px); overflow:hidden;
}
.lb-img {
  width:100%; height:100%;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  transition:opacity .2s;
}
.lb-close {
  position:absolute; top:24px; right:28px; z-index:3;
  font-size:22px; color:rgba(255,255,255,.5); padding:12px; transition:color .25s;
}
.lb-close:hover { color:#fff; }
.lb-prev, .lb-next {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  font-size:28px; color:rgba(255,255,255,.35); padding:20px 28px; transition:color .25s;
}
.lb-prev { left:0; }
.lb-next { right:0; }
.lb-prev:hover, .lb-next:hover { color:#fff; }
.lb-counter {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:9px; font-weight:400; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.3);
}

/* ── GPU LAYERS ── */
.h-img, .ni-img, .gf-img, .inf-bg, .ab-bg, .abt-bg, .dev-bg, .loc-slide, .abt-card-img {
  will-change:transform;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
#main-content { will-change:transform; }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media(max-width:1100px) {
  #nav { padding:20px 36px; }
  #nav.stuck { padding:14px 36px; }
  .n-links { display:none; }
  .n-lang { display:none; }
  .n-burger { display:flex; }
  .n-cta { display:none; }

  /* About tabs */
  .abt-inner { padding:100px 36px 72px; }
  .abt-main { grid-template-columns:1fr; gap:40px; }
  .abt-h { font-size:clamp(48px,9vw,80px); }

  /* Development */
  .dev-inner { padding:80px 36px; }
  .dev-stats { flex-wrap:wrap; }
  .dev-stat { flex:0 0 50%; }
  .dev-sep { display:none; }

  /* Location */
  .loc-head { padding:72px 36px 0; }
  .loc-badges { padding:32px 36px; flex-wrap:wrap; }
  .loc-badge { flex:0 0 100%; margin-bottom:12px; }
  .locb-sep { display:none; }

  /* Plans */
  .pl-cards { grid-template-columns:1fr 1fr; }
  .pl-top { padding:60px 32px 32px; flex-wrap:wrap; }
  .pl-sub { margin-left:0; }

  /* Infra */
  .ls-slider { padding:48px 36px; }
  .inf-head { padding:60px 36px 36px; }
  .inf-grid { grid-template-columns:1fr 1fr; }
  .inf-sub { display:none; }

  /* Gallery */
  #gal-track { padding:0 32px; }
  .gal-label { padding:0 32px; }
  .gf { flex:0 0 70vw; }

  /* About SB */
  .ab-inner { grid-template-columns:1fr; gap:40px; }
  .ab-stats { display:grid; grid-template-columns:repeat(2,1fr); }
  .abs-sep { display:none; }
  #about-sb { padding:80px 32px; }

  /* Payment */
  .pay-cards { grid-template-columns:1fr; }
  .pay-head { padding:80px 32px 40px; flex-wrap:wrap; }
  .pay-sub { margin-left:0; }
  .pay-card { padding:40px 32px; }

  /* CTA */
  #cta { padding:100px 36px 80px; }
  .ctf-row { grid-template-columns:1fr; }
  .ct-big { font-size:clamp(72px,18vw,140px); }

  /* Footer */
  footer { padding:24px 36px; }
  .mm-inner { padding:0 32px; }

  /* Abt cards */
  .abt-cards { grid-template-columns:1fr; height:200px; display:flex; }
  .abt-card { flex:1; }
}

@media(max-width:768px) {
  /* Type break */
  .tb-track { font-size:clamp(60px,10vw,120px); }

  /* Night */
  .ni-body { padding:0 36px 56px; }
  .ni-word { font-size:clamp(56px,14vw,120px); }

  /* Infra */
  .inf-grid { grid-template-columns:1fr; }
  .inf-card { height:56vw; }

  /* Dev */
  .dev-stat { flex:0 0 50%; }
  .dev-num { font-size:clamp(48px,10vw,80px); }

  /* Plans */
  .pl-cards { grid-template-columns:1fr; }
  .plc-svg { min-height:220px; }
}

@media(max-width:640px) {
  #nav { padding:20px 24px; }
  #nav.stuck { padding:14px 24px; }
  .h-content { padding:0 24px 56px; max-width:100%; }
  .h-n1 { font-size:clamp(56px,17vw,96px); }
  .h-scroll { right:24px; }
  .h-badges { top:auto; bottom:130px; right:16px; flex-direction:row; gap:8px; }
  .h-badge { padding:8px 12px; min-width:60px; }
  .hb-val { font-size:16px; }

  /* About */
  .abt-inner { padding:80px 24px 56px; }

  /* Development */
  .dev-inner { padding:60px 24px; }
  .dev-stat { flex:0 0 50%; }

  /* Location */
  .loc-head { padding:56px 24px 0; }
  .loc-h { font-size:clamp(40px,12vw,72px); }
  .loc-badges { padding:24px; }
  .locb-val { font-size:clamp(28px,7vw,48px); }
  .loc-carousel { height:52vw; min-height:240px; }

  /* Night */
  .ni-body { padding:0 24px 48px; }

  /* Gallery */
  .gf { flex:0 0 82vw; height:50vw; }
  #gal-track { padding:0 20px; }
  .gal-label { padding:0 20px; }

  /* Infra slider */
  .ls-slider { padding:40px 24px; }
  .lss-q { font-size:clamp(20px,5.5vw,32px); }

  /* Infra */
  .inf-head { padding:48px 24px 28px; }

  /* Float btns */
  #float-btns { bottom:20px; right:20px; }
  #float-cta { width:56px; height:56px; }

  /* Footer */
  footer { padding:24px; flex-direction:column; gap:8px; text-align:center; }

  /* CTA */
  #cta { padding:80px 20px 60px; }
  .ct-acts { flex-direction:column; width:100%; }
  .ct-ghost { width:100%; text-align:center; justify-content:center; }

  /* About SB */
  #about-sb { padding:64px 20px; }
  .abs-item { padding:24px 16px; }

  /* Type break */
  .tb-track { font-size:15vw; }
}

/* ══════════════════════════════════
   MOBILE v9 — Safari / Chrome touch
   safe areas · scroll-snap · swipe
══════════════════════════════════ */

/* ── Touch tap highlight & interaction ── */
a, button, [role="button"], .abt-tab, .inf-card, .gf, .pl-card, .pay-card {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}
input, select, textarea { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* ── Safe area insets (notch / home bar) ── */
#nav {
  padding-top: max(32px, env(safe-area-inset-top));
  padding-left: max(72px, env(safe-area-inset-left));
  padding-right: max(72px, env(safe-area-inset-right));
}
#nav.stuck {
  padding-top: max(18px, env(safe-area-inset-top));
  padding-left: max(72px, env(safe-area-inset-left));
  padding-right: max(72px, env(safe-area-inset-right));
}
#loader {
  padding-top: max(60px, env(safe-area-inset-top));
  padding-left: max(72px, env(safe-area-inset-left));
}
#mobile-menu .mm-inner {
  padding-top: max(80px, calc(env(safe-area-inset-top) + 60px));
  padding-bottom: max(48px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
#float-btns {
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px));
  right: max(32px, env(safe-area-inset-right));
}
footer {
  padding-bottom: max(30px, env(safe-area-inset-bottom));
}

/* ── Minimum touch targets (44px) ── */
.lss-prev, .lss-next {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.loc-prev, .loc-next {
  min-width: 52px; min-height: 60px;
  display: flex; align-items: center; justify-content: center;
}
.lang-btn { min-width: 36px; min-height: 36px; }
.n-burger { min-width: 44px; min-height: 44px; }

/* ── Gallery: CSS scroll-snap on tablet / mobile ── */
@media (max-width: 1100px) {
  #gallery { overflow: hidden; }
  #gal-pin {
    height: auto !important;
    padding-bottom: 36px;
    display: block;
    overflow: visible;
  }
  #gal-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 28px;
    gap: 4px;
    transform: none !important;
    cursor: grab;
  }
  #gal-track:active { cursor: grabbing; }
  #gal-track::-webkit-scrollbar { display: none; }
  .gf {
    flex: 0 0 72vw;
    height: 50vw;
    min-height: 260px;
    scroll-snap-align: start;
  }
  .gal-label { padding: 28px 28px 16px; }
}

@media (max-width: 640px) {
  .gf { flex: 0 0 84vw; height: 58vw; min-height: 220px; }
  #gal-track { padding: 0 16px; }
  .gal-label { padding: 24px 16px 12px; }
}

/* ── Plans: horizontal scroll-snap on mobile ── */
@media (max-width: 640px) {
  .pl-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
  }
  .pl-cards::-webkit-scrollbar { display: none; }
  .pl-card { flex: 0 0 82vw; scroll-snap-align: start; }
  .pl-top { padding: 48px 20px 20px; flex-wrap: wrap; }
  .pl-n { font-size: 52px; }
  .plc-svg { min-height: 180px; }
  .plc-body { padding: 20px 24px 24px; }
}

/* ── Payment: horizontal scroll-snap on mobile ── */
@media (max-width: 640px) {
  .pay-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
  }
  .pay-cards::-webkit-scrollbar { display: none; }
  .pay-card { flex: 0 0 88vw; scroll-snap-align: start; }
  .pay-head { padding: 56px 20px 28px; flex-wrap: wrap; }
  .pay-n { font-size: 52px; }
}

/* ── About SB stats: 2-column grid on mobile ── */
@media (max-width: 640px) {
  .ab-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: none;
    gap: 1px;
    background: rgba(255,255,255,.06);
  }
  .abs-item { background: rgba(0,0,0,.28); padding: 20px 12px; }
  .abs-item:last-child { grid-column: 1 / -1; }
  .abs-sep { display: none; }
  .abs-val { font-size: clamp(26px, 8vw, 40px); }
}

/* ── About cards: scrollable on mobile ── */
@media (max-width: 640px) {
  .abt-cards {
    height: 160px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 3px;
  }
  .abt-cards::-webkit-scrollbar { display: none; }
  .abt-card { flex: 0 0 68vw; scroll-snap-align: start; }
}

/* ── iOS input zoom prevention (< 16px triggers zoom) ── */
@media (max-width: 768px) {
  .ctf-input { font-size: 16px; }
}

/* ── CTA mobile ── */
@media (max-width: 640px) {
  .ct-big { font-size: clamp(60px, 17vw, 96px); }
  .ct-form { max-width: 100%; }
  .ctf-input { padding: 26px 16px 10px; }
  .ctf-label { left: 16px; }
  .ctf-submit { padding: 18px 20px; letter-spacing: .2em; }
}

/* ── Dev stats: single column on very small screens ── */
@media (max-width: 400px) {
  .dev-stat { flex: 0 0 100%; }
  .dev-num { font-size: clamp(42px, 13vw, 64px); }
}

/* ── Night: smaller text on very small screens ── */
@media (max-width: 480px) {
  .ni-word { font-size: clamp(42px, 13vw, 80px); }
}

/* ── Infra grid: single column on very small screens ── */
@media (max-width: 480px) {
  .inf-grid { grid-template-columns: 1fr; }
  .inf-card { height: 50vw; }
}

/* ── Float buttons safe area on small screens ── */
@media (max-width: 640px) {
  #float-btns {
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
    right: max(16px, env(safe-area-inset-right));
    gap: 8px;
  }
  #float-wa { width: 46px; height: 46px; }
  #float-cta { width: 56px; height: 56px; }
}

/* ── Nav safe area on small screens ── */
@media (max-width: 640px) {
  #nav { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  #nav.stuck { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  #loader { padding-left: max(24px, env(safe-area-inset-left)); }
}

/* ── Hero on very small screens ── */
@media (max-width: 380px) {
  .h-spaced { display: none; }
  .h-n1 { font-size: 14vw; }
}

/* ── Location: prevent overflow on small screens ── */
@media (max-width: 480px) {
  .loc-h { font-size: clamp(36px, 11vw, 60px); }
  .loc-head { padding: 48px 20px 0; }
}

/* ── Reduce heavy backdrop-blur on Safari iOS ── */
@supports (-webkit-touch-callout: none) {
  #nav.stuck {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }
  .h-badge {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .loc-prev, .loc-next {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}