/* ============================================================
   SENVA — общий дизайн-код
   ============================================================ */
:root{
  --bg:#06141a;
  --bg2:#0a1d22;
  --bg3:#081a1f;
  --sand:#c9b79c;
  --gold:#d9b87a;
  --gold-d:#b8965a;
  --jade:#3d6b5e;
  --jade-lt:#6fae9a;
  --teal:#1fa89a;
  --aqua:#39c2c9;
  --deep:#0a3a4a;
  --cream:#f4ede0;
  --muted:#8aa3a0;
  --line:rgba(217,184,122,.16);
  --line-s:rgba(217,184,122,.28);
  --line-teal:rgba(57,194,201,.2);
  --serif:'Cormorant Garamond',serif;
  --sans:'Outfit',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--cream);font-family:var(--sans);font-weight:300;overflow-x:hidden;cursor:none;line-height:1.6;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
/* подавляем системный курсор (палец на ссылках, текст на инпутах) — оставляем только кастомный */
a,button,.btn,input,textarea,select,label,canvas,[role=button]{cursor:none}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
::selection{background:var(--gold);color:var(--bg)}
.serif{font-family:var(--serif)}
em{font-style:italic;color:var(--gold)}

/* ---------- custom cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;opacity:0;transition:opacity .4s,width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s}
.cursor{width:30px;height:30px;border:1px solid rgba(217,184,122,.45)}
.cursor-dot{width:4px;height:4px;background:var(--gold)}
body.cursor-active .cursor,body.cursor-active .cursor-dot{opacity:1}
.cursor.grow{width:58px;height:58px;background:rgba(217,184,122,.14);border-color:var(--gold);border-width:1.5px}
body.cursor-active .cursor.grow~.cursor-dot,.cursor.grow{box-shadow:0 0 22px -4px rgba(217,184,122,.5)}
.cursor.hide{opacity:0!important}
@media(hover:none){.cursor,.cursor-dot{display:none}body{cursor:auto}}

/* ---------- grain + page transition ---------- */
.grain{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
#curtain{position:fixed;inset:0;z-index:9995;background:var(--bg);pointer-events:none;transform:scaleY(0);transform-origin:bottom;display:flex;align-items:center;justify-content:center}
#curtain.in{transform:scaleY(1);transform-origin:bottom;transition:transform .6s var(--ease)}
#curtain.out{transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
#curtain .cm{font-family:var(--serif);font-size:2rem;letter-spacing:.5em;color:var(--gold);opacity:0;padding-left:.5em}
#curtain.in .cm{opacity:1;transition:opacity .4s .15s}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;width:100%;z-index:900;display:flex;justify-content:space-between;align-items:center;padding:1.7rem clamp(1.5rem,5vw,4rem);transition:background .5s,padding .5s,backdrop-filter .5s,border-color .5s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(10,14,13,.72);backdrop-filter:blur(20px);padding:1.05rem clamp(1.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.logo{font-family:var(--serif);font-size:1.7rem;letter-spacing:.45em;font-weight:400;padding-left:.45em;display:flex;align-items:center;gap:.6rem}
.logo .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;align-self:flex-end;margin-bottom:.4em}
.nav-links{display:flex;gap:2.4rem;align-items:center}
.nav-links a{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);position:relative;transition:color .4s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--cream)}
.nav-links a.active::after,.nav-links a:hover::after{width:100%}
.nav-cta{border:1px solid var(--line-s);padding:.7rem 1.4rem;border-radius:40px;color:var(--cream)!important;transition:background .4s,border-color .4s,color .4s}
.nav-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--bg)!important}
.nav-cta::after{display:none}
.burger{display:none;flex-direction:column;gap:6px;z-index:901;padding:10px;margin:-10px;cursor:pointer}
.burger span{width:26px;height:1px;background:var(--cream);transition:.4s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:899;background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;transform:translateY(-100%);transition:transform .6s var(--ease);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{font-family:var(--serif);font-size:2.2rem;color:var(--cream);padding:.4rem 1rem}
.mobile-menu a em{color:var(--gold)}
@media(max-width:880px){.nav-links{display:none}.burger{display:flex}}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:1rem 2.2rem;border-radius:40px;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;transition:transform .4s var(--ease),background .4s,color .4s,box-shadow .4s;cursor:none}
.btn-gold{background:var(--gold);color:var(--bg);box-shadow:0 10px 40px -12px rgba(217,184,122,.5)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 50px -10px rgba(217,184,122,.7)}
.btn-ghost{border:1px solid var(--line-s);color:var(--cream)}
.btn-ghost:hover{background:rgba(244,237,224,.06);transform:translateY(-3px)}

/* ---------- layout helpers ---------- */
.section{padding:clamp(5.5rem,12vw,10rem) clamp(1.5rem,6vw,7rem)}
.tag{font-size:.74rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:flex;align-items:center;gap:.8rem}
.tag::before{content:"";width:32px;height:1px;background:var(--gold)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:4.5rem}
.sec-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;letter-spacing:-.01em;max-width:14ch}
.sec-head p{color:var(--muted);max-width:34ch;line-height:1.8;font-size:.98rem}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(50px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- page hero (inner pages) ---------- */
.page-hero{position:relative;min-height:64vh;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(7rem,12vw,11rem) clamp(1.5rem,6vw,7rem) clamp(3rem,6vw,5rem);overflow:hidden}
.page-hero .bgwrap{position:absolute;inset:-12%;z-index:0;background-size:cover;background-position:center}
.page-hero .bgwrap::after{content:none}
/* неподвижное затемнение поверх фото — покрывает весь блок при любом параллаксе */
.page-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,14,13,.55) 0%,rgba(10,14,13,.35) 35%,rgba(10,14,13,.78) 80%,var(--bg) 100%)}
.page-hero .inner{position:relative;z-index:2;max-width:1400px;width:100%;margin:0 auto}
.page-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,9vw,7rem);line-height:.95;letter-spacing:-.01em;margin-top:.6rem}
.page-hero p{color:var(--cream);opacity:.85;max-width:46ch;margin-top:1.4rem;line-height:1.8}
.crumbs{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.crumbs a:hover{color:var(--gold)}
.crumbs span{color:var(--gold)}

/* gradient "photo" palettes */
.g1{background:linear-gradient(135deg,#1c3a33,#2d5a4a 45%,#d9b87a 130%)}
.g2{background:linear-gradient(160deg,#143028,#3d6b5e 50%,#c9b79c 140%)}
.g3{background:linear-gradient(135deg,#241d12,#7a5e35 55%,#3d6b5e 150%)}
.g4{background:linear-gradient(150deg,#0f2620,#2d5a4a 60%,#d9b87a 145%)}
.g5{background:linear-gradient(135deg,#2a2014,#6fae9a 130%)}
.g6{background:linear-gradient(160deg,#102a23,#c9b79c 150%)}
.g7{background:linear-gradient(135deg,#13302a,#3d6b5e 60%,#d9b87a 160%)}
.g8{background:linear-gradient(150deg,#1a1510,#b8965a 70%,#3d6b5e 160%)}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.5rem 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-block;animation:scroll 28s linear infinite}
.marquee span{font-family:var(--serif);font-style:italic;font-size:2.1rem;color:var(--muted);margin:0 2.2rem;opacity:.55}
.marquee span b{color:var(--gold);font-weight:400;font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- villa cards (3d tilt) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:2rem;perspective:1500px}
.card{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;transform-style:preserve-3d;transition:transform .6s var(--ease);will-change:transform;border:1px solid var(--line);display:block}
.card .ph{position:absolute;inset:0;transition:transform .9s var(--ease)}
.card:hover .ph{transform:scale(1.07)}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 32%,rgba(6,10,9,.88) 100%)}
.card .meta{position:absolute;left:0;bottom:0;padding:2rem;transform:translateZ(50px);width:100%}
.card .loc{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.card .meta h3{font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1.05;margin-bottom:.5rem}
.card .price{font-size:.86rem;opacity:.85}
.card .price b{color:var(--gold);font-weight:500}
.card .badge{position:absolute;top:1.3rem;right:1.3rem;transform:translateZ(60px);background:rgba(10,14,13,.45);backdrop-filter:blur(8px);border:1px solid var(--line);padding:.5rem .9rem;border-radius:30px;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.card .arrow{position:absolute;bottom:2rem;right:2rem;transform:translateZ(55px);width:42px;height:42px;border:1px solid var(--line-s);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--gold);opacity:0;transition:opacity .4s,background .4s}
.card:hover .arrow{opacity:1}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:4rem clamp(1.5rem,6vw,7rem) 2.5rem;position:relative}
.foot-top{display:flex;justify-content:space-between;gap:3rem;flex-wrap:wrap;margin-bottom:2rem}
.foot-col h4{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.foot-col a{display:block;color:var(--muted);font-size:.92rem;margin-bottom:.7rem;transition:color .3s}
.foot-col a:hover{color:var(--cream)}
.foot-col p{color:var(--muted);max-width:28ch;line-height:1.8;font-size:.9rem}
.foot-brand{font-family:var(--serif);font-size:clamp(3rem,9vw,7rem);font-weight:300;letter-spacing:.1em;line-height:1;opacity:.1;text-align:center;margin:1.5rem 0;-webkit-text-stroke:1px var(--gold);color:transparent}
.foot-bottom{display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem;letter-spacing:.05em;flex-wrap:wrap;gap:1rem;border-top:1px solid var(--line);padding-top:2rem}

/* ---------- misc components ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.split .visual{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.split .visual .inner{position:absolute;inset:-12%;will-change:transform}
.split .visual .float{position:absolute;z-index:3;background:rgba(10,14,13,.5);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.5rem}
.split h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.05;margin-bottom:1.6rem}
.split p{color:var(--muted);line-height:1.9;margin-bottom:1.4rem;max-width:46ch}
.feature-list{list-style:none;margin-top:2rem;display:flex;flex-direction:column;gap:1.1rem}
.feature-list li{display:flex;gap:1rem;align-items:center;padding-bottom:1.1rem;border-bottom:1px solid var(--line);font-size:.96rem}
.feature-list li span{color:var(--gold);font-family:var(--serif);font-style:italic;font-size:1.3rem;min-width:2.4rem}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;text-align:center}
.stat .num{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,7vw,5.4rem);color:var(--gold);line-height:1}
.stat .lbl{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:.8rem}

/* CTA band */
.cta-sec{position:relative;text-align:center;overflow:hidden}
.cta-sec .glow{position:absolute;top:50%;left:50%;width:80vmin;height:80vmin;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(217,184,122,.16),transparent 60%);filter:blur(40px)}
.cta-sec h2{position:relative;font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,8vw,6rem);line-height:1;letter-spacing:-.01em}
.cta-sec p{position:relative;color:var(--muted);margin:1.8rem auto 2.8rem;max-width:40ch;line-height:1.8}

/* ============================================================
   WOW-эффекты v2
   ============================================================ */
/* scroll progress */
#scrollProgress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--gold);z-index:9994;transform:scaleX(0);transform-origin:left;will-change:transform}

/* webgl canvas */
#webgl{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.no-webgl #webgl{display:none}
.no-webgl .hero-bg{display:block!important}

/* split text */
[data-split] .sw{display:inline-block;white-space:nowrap}
[data-split] .sl{display:inline-block;overflow:hidden;vertical-align:top}
[data-split] .sl i{display:inline-block;font-style:inherit;transform:translateY(110%);transition:transform .8s var(--ease)}
[data-split].split-in .sl i{transform:translateY(0)}

/* tilt glare */
.tilt{position:relative}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;z-index:6;mix-blend-mode:overlay}

/* magnetic smoothing */
.btn,.nav-cta{transition:transform .35s var(--ease),background .4s,color .4s,box-shadow .4s}

/* gold shimmer on headings */
.shimmer{background:linear-gradient(100deg,var(--cream) 30%,var(--gold) 50%,var(--cream) 70%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:-200% center}}

/* floating badge chips */
.float-chip{position:absolute;background:rgba(10,14,13,.5);backdrop-filter:blur(14px);border:1px solid var(--line-s);border-radius:40px;padding:.6rem 1.1rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);z-index:6;display:flex;align-items:center;gap:.5rem}
.float-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(217,184,122,.5)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(217,184,122,0)}}

/* trust / logos strip */
.trust{display:flex;flex-wrap:wrap;gap:2.5rem 4rem;align-items:center;justify-content:center;opacity:.6}
.trust span{font-family:var(--serif);font-size:1.4rem;letter-spacing:.1em;color:var(--muted)}

/* testimonial */
.quote-card{border:1px solid var(--line);border-radius:20px;padding:clamp(2rem,5vw,3.5rem);background:var(--bg2);position:relative;overflow:hidden}
.quote-card::before{content:"\201C";position:absolute;top:-1rem;left:1.5rem;font-family:var(--serif);font-size:9rem;color:var(--gold);opacity:.16;line-height:1}
.quote-card p{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.5;font-weight:300;position:relative;z-index:1}
.quote-card .who{margin-top:1.6rem;display:flex;align-items:center;gap:1rem}
.quote-card .who .av{width:48px;height:48px;border-radius:50%;overflow:hidden;border:1px solid var(--line)}
.quote-card .who b{font-weight:500;display:block;font-size:.95rem}
.quote-card .who small{color:var(--muted);font-size:.78rem;letter-spacing:.1em}

/* sticky reveal section divider */
.big-type{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,11vw,9rem);line-height:.95;letter-spacing:-.01em;text-align:center}
.big-type em{color:var(--gold)}

/* perks grid */
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem}
.perk{border:1px solid var(--line);border-radius:16px;padding:2rem 1.8rem;transition:.5s;position:relative}
.perk:hover{border-color:var(--line-s);background:rgba(217,184,122,.04);transform:translateY(-6px)}
.perk .ic{font-family:var(--serif);font-size:2rem;color:var(--gold)}
.perk h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin:.8rem 0 .5rem}
.perk p{color:var(--muted);font-size:.9rem;line-height:1.8}

/* ---- floating 3d decor for inner page heroes (CSS-only) ---- */
.hero-decor{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;perspective:800px}
.hero-decor .ring{position:absolute;border:1px solid var(--line-s);border-radius:50%;animation:spin3d 26s linear infinite;opacity:.5}
.hero-decor .ring.r1{width:340px;height:340px;top:-80px;right:-60px;animation-duration:30s}
.hero-decor .ring.r2{width:200px;height:200px;top:20px;right:60px;animation-duration:20s;animation-direction:reverse}
.hero-decor .cube{position:absolute;top:30%;right:14%;width:90px;height:90px;transform-style:preserve-3d;animation:tumble 18s linear infinite;opacity:.6}
.hero-decor .cube div{position:absolute;width:90px;height:90px;border:1px solid var(--gold);opacity:.5}
.hero-decor .cube .f1{transform:translateZ(45px)}
.hero-decor .cube .f2{transform:rotateY(180deg) translateZ(45px)}
.hero-decor .cube .f3{transform:rotateY(90deg) translateZ(45px)}
.hero-decor .cube .f4{transform:rotateY(-90deg) translateZ(45px)}
.hero-decor .cube .f5{transform:rotateX(90deg) translateZ(45px)}
.hero-decor .cube .f6{transform:rotateX(-90deg) translateZ(45px)}
@keyframes spin3d{to{transform:rotate(360deg)}}
@keyframes tumble{to{transform:rotateX(360deg) rotateY(360deg)}}
@media(max-width:880px){.hero-decor .cube{display:none}}

/* ---- sticky horizontal pinned showcase ---- */
.hpin{position:relative}
.hpin-inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:0 clamp(1.5rem,6vw,7rem)}
.hpin-head{margin-bottom:2.5rem;width:100%}
.hpin .track{display:flex;gap:1.8rem;will-change:transform}
.hpin .panel{flex:0 0 clamp(280px,38vw,460px);height:62vh;min-height:400px;border-radius:22px;overflow:hidden;position:relative;border:1px solid var(--line);transition:border-color .5s}
.hpin .panel:hover{border-color:var(--gold)}
.hpin .panel .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s var(--ease)}
.hpin .panel:hover .bg{transform:scale(1.07)}
.hpin .panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,10,9,.9))}
.hpin .panel .cap{position:absolute;left:0;bottom:0;padding:2.2rem;z-index:2}
.hpin .panel .cap small{color:var(--gold);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase}
.hpin .panel .cap h3{font-family:var(--serif);font-weight:400;font-size:2.1rem;margin-top:.4rem}
.hpin .panel-cta{background:linear-gradient(160deg,#10231d,#1a1510);display:flex;align-items:center;justify-content:center}
.hpin .panel-cta::after{display:none}
.cap-cta{text-align:center;z-index:2}
.cap-cta span{font-family:var(--serif);font-size:2rem;line-height:1.2;display:block;margin-bottom:1.5rem}
.cap-cta em{color:var(--gold)}
.arrow-lg{width:64px;height:64px;border:1px solid var(--line-s);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--gold);margin:0 auto;transition:.4s}
.hpin .panel-cta:hover .arrow-lg{background:var(--gold);color:var(--bg);border-color:var(--gold)}
@media(max-width:880px){
  .hpin{height:auto!important}
  .hpin-inner{position:relative;height:auto;padding:clamp(4rem,10vw,7rem) clamp(1.5rem,6vw,7rem)}
  .hpin .track{flex-direction:column;transform:none!important;padding-left:0}
  .hpin .panel{flex:none;width:100%;height:60vh}
}

/* ---- premium polish v3 ---- */
/* плотнее градиент на карточках с реальными фото для читаемости */
.card .ph::after{background:linear-gradient(180deg,rgba(6,10,9,.1) 0%,transparent 30%,rgba(6,10,9,.5) 65%,rgba(6,10,9,.92) 100%)}
.dest .bg::after{background:linear-gradient(180deg,rgba(6,10,9,.15) 0%,transparent 35%,rgba(6,10,9,.92) 100%)}
/* мягкое появление фоновых фото */
.ph,.bg,.bgwrap{background-color:#10231d}
/* premium тени на карточках */
.card{box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.card:hover{box-shadow:0 40px 80px -28px rgba(0,0,0,.85)}
/* тоньше и дороже типографика тегов */
.tag{font-weight:400}
/* стеклянные float-карточки чуть глубже */
.split .visual .float,.float-chip{box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
/* gallery фото на странице виллы */
.gallery .inner{background-size:cover;background-position:center}

/* ============================================================
   Правки v4: золото в лого/футере, плавный marquee, фон-зум
   ============================================================ */
/* marquee плавность */
.marquee-track{will-change:transform;backface-visibility:hidden}

/* page-hero фон: лёгкий медленный зум вместо съезжающего параллакса */
.page-hero .bgwrap{animation:slowzoom 24s ease-in-out infinite alternate}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.08)}}

/* ЛОГОТИП — золотой градиент + светящаяся точка */
.logo{color:var(--cream)}
.logo:not(.foot-col .logo){background:linear-gradient(100deg,var(--cream) 0%,var(--gold) 55%,var(--gold-d) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
nav .logo .dot{width:5px;height:5px;background:var(--gold);box-shadow:0 0 6px 0 rgba(217,184,122,.5);animation:pulse 2.4s infinite}
footer .logo{background:linear-gradient(100deg,var(--gold) 0%,var(--cream) 50%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
footer .logo .dot{background:var(--gold);box-shadow:0 0 10px 1px rgba(217,184,122,.6)}

/* ФУТЕР — больше золота */
footer{background:linear-gradient(180deg,transparent,rgba(217,184,122,.03))}
.foot-brand{opacity:.9;-webkit-text-stroke:0;color:transparent;background:linear-gradient(180deg,rgba(217,184,122,.5),rgba(217,184,122,.08));-webkit-background-clip:text;background-clip:text;letter-spacing:.12em}
.foot-col h4{color:var(--gold)}
.foot-bottom{border-top:1px solid var(--line-s)}
.foot-bottom div:first-child{color:var(--sand)}
footer .foot-top{border-bottom:1px solid var(--line);padding-bottom:2.5rem}

/* ============================================================
   Правки v5: премиум page-hero + чистые акценты
   ============================================================ */
/* вернуть фон-плейсхолдер только для visual-блока «о нас» и галереи */
.split .visual .inner{background-color:#10231d}
.gallery .inner{background-color:#10231d}

/* page-hero: плавное затемнение фото снизу, без коробок, премиум-читаемость */
.page-hero::before{background:linear-gradient(180deg,rgba(10,14,13,.35) 0%,rgba(10,14,13,.15) 30%,rgba(10,14,13,.55) 65%,rgba(10,14,13,.92) 100%)}
/* мягкая тень под текстом для контраста на светлых фото */
.page-hero h1{text-shadow:0 4px 40px rgba(0,0,0,.6)}
.page-hero p{text-shadow:0 2px 20px rgba(0,0,0,.7)}
.page-hero .crumbs{text-shadow:0 2px 12px rgba(0,0,0,.7)}
/* тонкая золотая линия-акцент перед заголовком */
.page-hero .inner::before{content:"";display:block;width:64px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin-bottom:1.6rem;opacity:.9}

/* ---- 3D service steps (premium) ---- */
.step3-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem}
.step3-card{position:relative;border:1px solid var(--line);border-radius:22px;padding:1.5rem 2rem 2.4rem;text-align:center;transition:border-color .6s,transform .6s var(--ease);overflow:hidden;background:linear-gradient(180deg,rgba(217,184,122,.025),transparent)}
.step3-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 45% at 50% 8%,rgba(217,184,122,.10),transparent 70%);opacity:0;transition:opacity .6s}
.step3-card:hover{border-color:var(--line-s);transform:translateY(-8px)}
.step3-card:hover::after{opacity:1}
.step3-stage{position:relative;width:100%;aspect-ratio:1/1;max-width:260px;margin:0 auto .6rem}
.step3-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:none}
.step3-stage canvas:active{cursor:none}
.step3-n{font-family:var(--serif);font-size:.95rem;letter-spacing:.3em;color:var(--gold);opacity:.7;margin-bottom:.4rem}
.step3-card h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin-bottom:.7rem}
.step3-card p{color:var(--muted);font-size:.93rem;line-height:1.8;max-width:30ch;margin:0 auto}

/* ============================================================
   Морская палитра (курортный акцент) + сохранённое золото
   ============================================================ */
/* фон страниц — глубокий океанический градиент */
body{background:linear-gradient(180deg,#06141a 0%,#081a1f 50%,#06141a 100%)}

/* hero-чип «online» — морская обводка с золотой точкой */
.float-chip{border-color:var(--line-teal);background:rgba(8,26,31,.55)}
.float-chip::before{background:var(--aqua);box-shadow:0 0 10px var(--aqua)}

/* подзаголовки/eyebrow — лёгкий морской оттенок рядом с золотом */
.hero .eyebrow{color:var(--gold)}
.marquee span b{color:var(--aqua)}

/* карточки вилл: морская рамка при наведении, но бейдж/локация — золотые (контраст на фото) */
.card:hover{border-color:var(--line-teal)}
.card .badge{color:var(--gold);border-color:var(--line-s);background:rgba(6,16,18,.7);text-shadow:0 1px 6px rgba(0,0,0,.5)}
/* подписи локаций — лёгкая тень для контраста на ярких фото */
.card .loc,.dest small,.hpin .panel .cap small{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.dest small{color:var(--gold)}

/* подсветка снизу карточек — бирюзовая дымка */
.card .ph::after{background:linear-gradient(180deg,rgba(6,20,26,.1) 0%,transparent 28%,rgba(6,20,26,.55) 62%,rgba(6,20,26,.94) 100%)}
.dest .bg::after{background:linear-gradient(180deg,rgba(6,20,26,.15) 0%,transparent 35%,rgba(6,20,26,.94) 100%)}

/* шаги: круг иконки — морская окантовка, золото внутри */
.step3-card:hover{border-color:var(--line-teal)}

/* квоут/отзыв и блоки — морская левая грань */
.quote-card{border-color:var(--line-teal)}
.quote-card::before{color:var(--aqua);opacity:.14}

/* перки/преимущества — морской ховер */
.perk:hover{border-color:var(--line-teal);background:rgba(57,194,201,.04)}

/* page-hero золотая линия → золото→бирюза градиент */
.page-hero .inner::before{background:linear-gradient(90deg,var(--gold),var(--aqua) 70%,transparent)}

/* hpin панели — морская рамка ховер, подпись золотая (контраст на фото) */
.hpin .panel:hover{border-color:var(--aqua)}
.hpin .panel .cap small{color:var(--gold)}

/* статистика — числа остаются золотыми, подписи чуть морские */
.stat .lbl{color:var(--jade-lt)}

/* футер — добавим бирюзовое свечение к золотому */
footer{background:linear-gradient(180deg,transparent,rgba(57,194,201,.025),rgba(217,184,122,.03))}

/* CTA свечение — морское + золотое */
.cta-sec .glow{background:radial-gradient(circle,rgba(57,194,201,.12),rgba(217,184,122,.10) 40%,transparent 65%)}

/* секционные теги: маркер-линия золото→аква */
.tag::before{background:linear-gradient(90deg,var(--gold),var(--aqua))}

/* курсор при наведении — лёгкий морской ободок поверх золота */
.cursor.grow{border-color:var(--aqua);background:rgba(57,194,201,.12);box-shadow:0 0 22px -4px rgba(57,194,201,.45)}

/* ============================================================
   Полоса районов Бали (замена бегущей строки)
   ============================================================ */
.locband{display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,5vw,4rem);flex-wrap:wrap;padding:1.8rem clamp(1.5rem,6vw,7rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(57,194,201,.02),transparent)}
.locband-lead{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.locband-list{display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap}
.locband-list a{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--cream);opacity:.55;position:relative;transition:opacity .4s,color .4s}
.locband-list a:not(:last-child)::after{content:"·";position:absolute;right:calc(clamp(1rem,3vw,2.4rem)/-2);color:var(--gold);opacity:.5;font-style:normal}
.locband-list a:hover{opacity:1;color:var(--gold)}
@media(max-width:640px){.locband{flex-direction:column;gap:1rem}}

/* ============================================================
   АДАПТИВНОСТЬ ПОД ВСЕ УСТРОЙСТВА
   MacBook/iMac · ноутбук · iPad/планшет · телефон
   ============================================================ */

/* safe-area для iPhone с вырезами (челка/динамический остров) */
@supports(padding:max(0px)){
  nav{padding-left:max(clamp(1.5rem,5vw,4rem),env(safe-area-inset-left));padding-right:max(clamp(1.5rem,5vw,4rem),env(safe-area-inset-right))}
  .section,.page-hero,footer,.hpin-inner,.admin-wrap{padding-left:max(clamp(1.5rem,6vw,7rem),env(safe-area-inset-left));padding-right:max(clamp(1.5rem,6vw,7rem),env(safe-area-inset-right))}
  .hero-stats{left:max(clamp(1.5rem,5vw,4rem),env(safe-area-inset-left))}
}

/* ---------- Большие экраны: MacBook 15"+, iMac (≥1600px) ---------- */
@media(min-width:1600px){
  .section{max-width:1700px;margin-left:auto;margin-right:auto}
  .hero h1{font-size:clamp(8rem,10vw,11rem)}
  .grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Ноутбук (1200–1440px, типичный MacBook 13/14") ---------- */
@media(max-width:1440px){
  .sec-head h2{font-size:clamp(2.2rem,5.2vw,4rem)}
}

/* ---------- iPad альбом / небольшой ноут (≤1024px) ---------- */
@media(max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .dest-grid{grid-template-columns:repeat(2,1fr)!important}
  .step3-grid{grid-template-columns:repeat(3,1fr)}
  .perks{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(2,1fr)}
  .hpin .panel{flex:0 0 46vw}
  .sec-head{gap:1.5rem}
}

/* ---------- iPad портрет / планшет (≤860px) ---------- */
@media(max-width:860px){
  .sec-head{flex-direction:column;align-items:flex-start}
  .sec-head p{max-width:100%}
  .split{gap:2.5rem}
  .villa-wrap{grid-template-columns:1fr!important}
  .book{position:static!important;margin-top:1.5rem}
  .contact-wrap{grid-template-columns:1fr!important}
  .foot-top{gap:2rem}
  .hpin .panel{flex:0 0 70vw}
  .big-type{font-size:clamp(2.6rem,9vw,5rem)}
  .page-hero{min-height:52vh}
}

/* ---------- Большие телефоны (≤640px) ---------- */
@media(max-width:640px){
  .grid{grid-template-columns:1fr;gap:1.4rem}
  .dest-grid{grid-template-columns:1fr!important}
  .step3-grid{grid-template-columns:1fr;gap:1.4rem}
  .perks{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(2,1fr);gap:1rem}
  .stats{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .section{padding-top:clamp(4rem,12vw,6rem);padding-bottom:clamp(4rem,12vw,6rem)}
  .hero h1{font-size:clamp(2.8rem,15vw,4.5rem)}
  .hero p.sub{font-size:.95rem;max-width:90%}
  .hero-actions{flex-direction:column;width:100%;gap:.8rem;padding:0 1rem}
  .hero-actions .btn{width:100%;text-align:center}
  .btn{padding:.95rem 1.8rem}
  .page-hero h1{font-size:clamp(2.6rem,12vw,4rem)}
  .card{aspect-ratio:4/5}
  .step3-stage{max-width:200px}
  .quote-card p{font-size:1.2rem}
  .foot-top{flex-direction:column;gap:1.8rem}
  .foot-bottom{flex-direction:column;text-align:center;gap:.6rem}
  .gallery{height:auto;grid-template-columns:1fr 1fr;gap:.5rem}
  .gallery>div:first-child{grid-column:1/3}
  .spec-row{gap:1.4rem}
  .modal-card{padding:1.5rem}
  .trust{gap:1.5rem 2rem}
  .trust span{font-size:1.1rem}
}

/* ---------- Маленькие телефоны (≤400px, iPhone SE/mini) ---------- */
@media(max-width:400px){
  .team{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .logo{font-size:1.4rem;letter-spacing:.3em}
  .nav-cta{padding:.6rem 1.1rem;font-size:.68rem}
  .hero .eyebrow{font-size:.6rem;letter-spacing:.3em}
  .sec-head h2{font-size:clamp(2rem,9vw,2.8rem)}
  .locband-list a{font-size:1.1rem}
}

/* ---------- Тач-устройства: убираем hover-зависимые эффекты ---------- */
@media(hover:none){
  body{cursor:auto}
  .btn,.nav-cta{cursor:pointer}
  /* отключаем 3D-tilt и magnetic, чтобы не мешали тапам */
  .card,.tilt{transform:none!important}
  .card .arrow{opacity:1}
  /* hover-эффекты заменяем на статичные */
  .card .ph{transform:none!important}
}

/* ---------- Альбомная ориентация телефона (низкая высота) ---------- */
@media(max-height:500px) and (orientation:landscape){
  .hero{height:auto;min-height:100vh;padding:6rem 0 3rem}
  nav{padding-top:.8rem;padding-bottom:.8rem}
}

/* ---------- Уважение к prefers-reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .marquee-track{animation:none}
}

/* ---------- Высокая плотность пикселей (Retina) — резче тонкие линии ---------- */
@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .tag::before,.scroll-hint .line{transform:translateZ(0)}
}

/* ---- переключатель языка ---- */
.lang-switch{display:flex;align-items:center;gap:.4rem;margin-right:1.6rem}
.lang-switch button{background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;cursor:pointer;padding:.3rem;transition:color .3s}
.lang-switch button:hover{color:var(--cream)}
.lang-switch button.active{color:var(--gold)}
.lang-switch span{color:var(--line-s);font-size:.7rem}
@media(max-width:880px){.lang-switch{margin-right:.8rem}}
@media(max-width:400px){.lang-switch{gap:.2rem;margin-right:.5rem}.lang-switch button{font-size:.66rem;padding:.2rem}}