/* =========================================================
   SIENA — клубный дом · cinematic scroll landing
   Light / warm sand + terracotta / editorial-minimal
   ========================================================= */

:root{
  --bg:        #f6f2ec;
  --bg-2:      #efe8de;
  --surface:   #ffffff;
  --line:      rgba(45,34,24,.10);
  --line-2:    rgba(45,34,24,.16);
  --ink:       #262019;
  --ink-soft:  #6d6357;
  --ink-mute:  #a89d8e;
  --sand:      #c7a883;
  --terra:     #bd6440;
  --terra-hi:  #d1774c;
  --ease:      cubic-bezier(.32,.72,0,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --wrap:      1200px;
  --r-lg:      1.8rem;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-weight:400; line-height:1.55; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
em{ font-style:normal; }
a{ color:inherit; text-decoration:none; }

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 700px at 82% -10%, rgba(189,100,64,.10), transparent 60%),
    radial-gradient(900px 800px at 6% 112%, rgba(199,168,131,.14), transparent 60%);
}

.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:70; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--terra),var(--sand)); box-shadow:0 0 16px rgba(189,100,64,.4); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:clamp(20px,5vw,48px); position:relative; z-index:1; }

/* ---- typography helpers ---- */
.eyebrow{
  font-family:"Space Grotesk", monospace; font-size:.72rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--terra);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--terra),transparent); }
.section-head--center .eyebrow::after{ content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--terra)); }
.section-title{
  font-family:"Fraunces", Georgia, serif; font-weight:340;
  font-size:clamp(2.5rem,6.2vw,5rem); line-height:1; letter-spacing:-.025em; margin-top:.5em;
}
.section-title em{ color:var(--terra); font-style:italic; font-weight:340; }
.section-lead{ color:var(--ink-soft); font-size:clamp(1rem,1.5vw,1.16rem); max-width:48ch; margin-top:1.4rem; font-weight:300; }
.section-head{ margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.section-head--center{ text-align:center; display:flex; flex-direction:column; align-items:center; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:.7rem; font-weight:500; font-size:.95rem; letter-spacing:-.01em; cursor:pointer; border:0;
  transition:transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
.btn--pill{ background:var(--ink); color:#f6f2ec; padding:.72rem .8rem .72rem 1.3rem; border-radius:999px;
  box-shadow:0 10px 30px rgba(38,32,25,.18); }
.btn--pill:hover{ background:var(--terra); transform:translateY(-2px); }
.btn--pill:active{ transform:scale(.975); }
.btn--lg{ font-size:1.02rem; padding:.9rem .9rem .9rem 1.6rem; }
.btn__icon{ width:2rem; height:2rem; border-radius:999px; background:rgba(246,242,236,.16); display:inline-flex; align-items:center; justify-content:center; transition:transform .5s var(--ease), background .5s var(--ease); }
.btn--pill:hover .btn__icon{ background:rgba(246,242,236,.24); transform:translate(3px,0) scale(1.06); }

/* ---- floating glass nav ---- */
.nav{
  position:fixed; top:clamp(14px,2.4vw,26px); left:50%; transform:translateX(-50%); z-index:50;
  width:min(1120px, calc(100% - 32px));
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.5rem .5rem .5rem 1.35rem; border-radius:999px;
  background:rgba(255,255,255,.6); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 18px 44px -22px rgba(38,32,25,.4);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
}
.nav__brand{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.16rem; letter-spacing:.16em; display:flex; align-items:center; gap:.6rem; }
.nav__mark{ width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--terra-hi), var(--terra) 70%); box-shadow:0 0 12px rgba(189,100,64,.5); }
.nav__links{ display:flex; gap:2rem; margin-left:auto; }
.nav__links a{ font-size:.92rem; color:var(--ink-soft); position:relative; padding:.2rem 0; transition:color .4s var(--ease); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--terra); transition:width .45s var(--ease); }
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

/* =========================================================
   TOUR HERO (step-scroll video)
   ========================================================= */
.tour{ position:relative; height:700vh; z-index:1; }
.tour__pin{ position:sticky; top:0; height:100vh; overflow:hidden; background:#e9e2d8; }
.tour__media{ position:absolute; inset:0; }
.tour__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.tour__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(246,242,236,.35) 0%, transparent 16%, transparent 58%, rgba(40,32,24,.28) 100%),
    radial-gradient(130% 100% at 50% 30%, transparent 55%, rgba(60,46,32,.18) 100%);
}
.tour__spot{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(closest-side, transparent 58%, rgba(50,38,26,.28)); }

/* ---- text stages over the video ---- */
.tstage{ position:absolute; opacity:0; z-index:5; pointer-events:none; will-change:opacity,transform,filter;
  filter:blur(10px);
  transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); }
.tstage--bl{ transform:translate(-30px,22px); }
.tstage--br{ transform:translate(30px,22px); }
.tstage--center{ inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px; transform:translateY(22px); }
.tstage.is-on{ opacity:1; transform:none; filter:none; }

/* intro brand — dark ink on light footage, with soft halo for legibility */
.tstage--center::before{
  content:""; position:absolute; width:min(94vw,940px); height:min(70vw,680px);
  background:radial-gradient(closest-side, rgba(246,242,236,.8), rgba(246,242,236,.44) 42%, transparent 74%);
  filter:blur(26px); z-index:-1;
}
.tstage--center .eyebrow{ color:#9d4526; text-shadow:0 1px 16px rgba(246,242,236,.92); }
.tstage--center .eyebrow::before{ background:linear-gradient(90deg,#9d4526,transparent); }
.tstage__brand{ font-family:"Fraunces", Georgia, serif; font-weight:600; letter-spacing:.06em; font-size:clamp(3.6rem,12vw,9.5rem); line-height:.9; margin-top:1.1rem; color:var(--ink); text-shadow:0 2px 42px rgba(246,242,236,.88); }
.tstage__tagline{ font-family:"Space Grotesk", monospace; font-size:clamp(.82rem,1.5vw,1.05rem); letter-spacing:.32em; text-transform:uppercase; color:var(--ink); text-shadow:0 1px 16px rgba(246,242,236,.92); margin-top:1.3rem; }

/* side chapters — frosted card so dark text always reads over bright footage */
.tstage--bl, .tstage--br{ bottom:15vh; max-width:min(440px,44vw);
  background:rgba(248,244,238,.62); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.6); border-radius:1.4rem; padding:1.5rem 1.7rem;
  box-shadow:0 30px 70px -30px rgba(40,32,24,.45); }
.tstage--bl{ left:clamp(20px,6vw,72px); text-align:left; }
.tstage--br{ right:clamp(20px,6vw,72px); text-align:left; }
.tstage__no{ font-family:"Space Grotesk",monospace; font-size:.72rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--terra); }
.tstage__title{ font-family:"Fraunces", Georgia, serif; font-weight:340; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1; letter-spacing:-.02em; margin:.5rem 0 .7rem; }
.tstage__title em{ color:var(--terra); font-style:italic; }
.tstage__lead{ color:var(--ink-soft); font-size:clamp(.92rem,1.2vw,1.02rem); font-weight:300; max-width:38ch; margin-bottom:1.1rem; }
.tstage__list{ list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.tstage__list li{ font-family:"Space Grotesk",monospace; font-size:.76rem; letter-spacing:.04em; color:var(--ink-soft); position:relative; padding-left:1.4rem; }
.tstage__list li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--terra-hi), var(--terra)); }

.tour__index{ position:absolute; bottom:10vh; left:50%; transform:translateX(-50%); display:flex; gap:1rem; z-index:5; font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  background:rgba(248,244,238,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:.5rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.5); }
.tour__index span{ color:var(--ink-mute); transition:color .5s var(--ease), transform .5s var(--ease); }
.tour__index span.on{ color:var(--terra); font-weight:500; }

.hero__scrollcue{ position:absolute; bottom:4.5vh; left:50%; transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--ink-soft); font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; }
.hero__scrollcue svg{ animation:bob 2s var(--ease-soft) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5;} 50%{ transform:translateY(6px); opacity:1;} }

/* ---- viewfinder overlay ---- */
.vf{ position:absolute; inset:0; z-index:4; pointer-events:none; font-family:"Space Grotesk",monospace; color:rgba(45,34,24,.55); }
.vf__c{ position:absolute; width:22px; height:22px; border:2px solid rgba(45,34,24,.32); }
.vf__c--tl{ top:20px; left:20px; border-right:0; border-bottom:0; }
.vf__c--tr{ top:20px; right:20px; border-left:0; border-bottom:0; }
.vf__c--bl{ bottom:20px; left:20px; border-right:0; border-top:0; }
.vf__c--br{ bottom:20px; right:20px; border-left:0; border-top:0; }
.vf__rec{ position:absolute; left:30px; top:92px; display:flex; align-items:center; gap:.5rem; font-size:.68rem; letter-spacing:.22em; }
.vf__rec i{ width:9px; height:9px; border-radius:50%; background:#d1774c; box-shadow:0 0 8px #d1774c; animation:recblink 1.4s steps(1) infinite; }
@keyframes recblink{ 50%{ opacity:.22; } }
.vf__tc{ position:absolute; right:30px; top:92px; font-size:.82rem; letter-spacing:.14em; color:var(--terra); }
.vf__meta{ position:absolute; top:114px; display:flex; gap:.6rem; font-size:.6rem; letter-spacing:.18em; }
.vf__meta--l{ left:30px; }
.vf__meta--r{ right:30px; text-align:right; }
.vf__meta span{ opacity:.5; }
.vf__scan{ position:absolute; left:8%; right:8%; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(189,100,64,.45),transparent); opacity:.4; }

/* ---- reveal ---- */
.reveal{ opacity:0; transform:translateY(44px); filter:blur(8px); }
.reveal.in{ opacity:1; transform:none; filter:none; transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }

/* =========================================================
   ABOUT / FACTS
   ========================================================= */
.about{ position:relative; z-index:3; padding:clamp(5rem,11vw,8.5rem) 0 clamp(3rem,7vw,5rem); background:var(--bg); }
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,2rem); }
.fact{ padding:1.8rem 1.6rem; border:1px solid var(--line); border-radius:1.3rem; background:linear-gradient(180deg,var(--surface),rgba(255,255,255,.4)); box-shadow:0 20px 50px -34px rgba(40,32,24,.4); }
.fact__n{ font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; color:var(--terra); }
.fact__l{ color:var(--ink-soft); font-size:.92rem; font-weight:300; margin-top:.6rem; }

/* =========================================================
   PLANS
   ========================================================= */
.plans{ position:relative; z-index:3; padding:clamp(4rem,9vw,7rem) 0; background:var(--bg-2); }
.plans__media{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2); box-shadow:0 50px 110px -50px rgba(40,32,24,.55); background:#e9e2d8; }
.plans__media img{ width:100%; height:auto; display:block; }

/* =========================================================
   TRAILER / player
   ========================================================= */
.trailer{ position:relative; z-index:3; padding:clamp(5rem,11vw,8rem) 0; background:var(--bg); }
.player{ max-width:1040px; margin:0 auto; }
.player__shell{ padding:.6rem; border-radius:calc(var(--r-lg) + .4rem); background:linear-gradient(180deg, rgba(199,168,131,.28), rgba(255,255,255,.5)); border:1px solid var(--line-2); box-shadow:0 50px 120px -50px rgba(40,32,24,.5), inset 0 1px 0 rgba(255,255,255,.8); }
.player__inner{ border-radius:var(--r-lg); overflow:hidden; background:#0d0c10; position:relative; }
.player__caption{ text-align:center; margin-top:1.3rem; color:var(--ink-mute); font-family:"Space Grotesk",monospace; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; }

/* =========================================================
   PRICING
   ========================================================= */
.pricing{ position:relative; z-index:3; padding:clamp(2rem,5vw,3rem) 0 clamp(7rem,15vw,10rem); background:var(--bg-2); }
.price-card{ max-width:720px; margin:0 auto; }
.price-card__shell{ padding:.7rem; border-radius:calc(var(--r-lg) + .5rem); background:linear-gradient(180deg, rgba(189,100,64,.2), rgba(255,255,255,.5)); border:1px solid var(--line-2); box-shadow:0 60px 130px -55px rgba(189,100,64,.4), inset 0 1px 0 rgba(255,255,255,.8); }
.price-card__inner{ background:linear-gradient(180deg,var(--surface),#f4eee5); border-radius:var(--r-lg); padding:clamp(1.8rem,4vw,2.8rem); box-shadow:inset 0 1px 1px rgba(255,255,255,.7); }
.price-card__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.price-card__kicker{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--terra); }
.price-card__amount{ font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:clamp(3.2rem,8vw,4.8rem); line-height:1; margin:.4rem 0 .3rem; color:var(--ink); }
.price-card__amount .cur{ color:var(--ink-soft); font-size:.5em; vertical-align:.5em; margin-right:.05em; }
.price-card__note{ color:var(--ink-soft); font-size:.95rem; font-weight:300; }
.price-card__list{ list-style:none; margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 1.5rem; }
.price-card__list li{ position:relative; padding-left:1.7rem; color:var(--ink-soft); font-size:.98rem; font-weight:300; }
.price-card__list li::before{ content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--terra-hi), var(--terra)); }

/* ---- footer ---- */
.foot{ padding:3rem 0 4rem; border-top:1px solid var(--line); position:relative; z-index:3; background:var(--bg-2); }
.foot__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.foot__brand{ font-family:"Fraunces",Georgia,serif; font-weight:600; letter-spacing:.16em; font-size:1.1rem; }
.foot__copy{ color:var(--ink-mute); font-size:.84rem; font-family:"Space Grotesk",monospace; letter-spacing:.06em; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:860px){
  .nav__links{ display:none; }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .price-card__list{ grid-template-columns:1fr; }
  .price-card__top{ flex-direction:column; align-items:stretch; }
  .vf__meta{ display:none; }
  .tstage--bl, .tstage--br{ max-width:82vw; bottom:16vh; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .tour{ height:auto; }
  .tour__pin{ height:auto; min-height:100vh; padding:6rem 0; }
  .tstage{ position:relative; opacity:1; transform:none; filter:none; margin:3rem auto; }
  .tstage--bl,.tstage--br{ left:auto; right:auto; bottom:auto; margin-inline:auto; }
  .tstage--center{ position:relative; }
  .reveal{ opacity:1; transform:none; filter:none; }
  .hero__scrollcue svg{ animation:none; }
}