:root{
  --bg-dark: #0b1220;
  --ink: #0f1321;
  --muted: #616a7b;
  --brand: #ff7a00;        /* акцент — солнечный тревел-оранж */
  --brand-2:#02c2c2;       /* второй акцент — морской */
  --paper:#ffffff;
  --glass: rgba(255,255,255,.08);
  --glass-2: rgba(255,255,255,.16);
  --radius: 20px;
  --radius-lg: 28px;
  --shadow: 0 10px 30px rgba(7,17,41,.2);
  --container: 1400px;
  --header-h: 64px;
}

*{
  box-sizing:border-box;
/*  outline: 1px solid red; */
}
html,body{
  height:100%
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  color:var(--paper);
  background:#060b16;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  padding-top: var(--header-h);
}

/* utils */
.container{
  width:min(100%, calc(var(--container) + 48px));
  margin:0 auto;
  padding:0 24px
}

.bg-cover{
  background: var(--bg) center/cover no-repeat
}

.screen{
  min-height:100svh;
  display:grid;
  align-items:center;
  position:relative;
  isolation:isolate
}

.screen .container{
  padding-block: 36px;
}

.lead{
  font-size:1.125rem;
  color:#e9eef9
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1.2rem;
  border-radius:14px;
  border:1px solid transparent;
  background:var(--glass-2);
  color:#fff;
  text-decoration:none;
  backdrop-filter:saturate(120%) blur(8px);
  box-shadow:var(--shadow)
}

.btn:hover{
  transform:translateY(-1px)
}

.btn-primary{
  background:linear-gradient(135deg,var(--brand),#ff9f3f);
  margin: 20px 0;
}

.btn-outline{
  background:transparent;
  border-color:#8aa0c8
}

.btn-lg{
  padding:1.05rem 1.4rem;
  font-size:1.05rem
}

.btn-ghost-brand{
  background:transparent;
  border-color: var(--brand);
  color: var(--brand);
  box-shadow:none;
}

.btn-ghost-brand:hover{
  background: rgba(255,122,0,.12);
  transform: translateY(-1px);
}

.hero-note{
  opacity:.8;
  font-size:.9rem;
  margin:.5rem 0 0
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden
}

.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  z-index:999;
  background:#000;
  color:#fff;
  padding:.5rem .75rem;
  border-radius:8px
}

/* header */
.site-header{
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:1000;
  background: rgba(6,11,22,.6);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition: transform .25s ease;
  will-change: transform;
}
.site-header.hide {
  transform: translateY(-100%);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  padding:14px 24px
}

.brand{
  display:flex;
  align-items:center
}

.brand-desktop{
  display:inline-block;
  text-decoration:none
}

.brand-mobile{
  display:none;
  font-weight:800; letter-spacing:.3px;
  font-size:1.05rem; color:#fff;
}

.nav{
  margin-left: 0;
}

.nav-figure {
  display: none;
}

.mobile-cta {
  display: none;
}

.cta-desktop{
  margin-left:auto
}

.brand-mark{
  font-weight:800;
  letter-spacing:.3px;
  font-size:1.1rem
}

.nav .burger{
  display:none;
  background:none;
  border:0;
  padding:8px;
  cursor:pointer
}

.nav .burger span{
  display:block;
  width:24px;
  height:2px;
  background:#fff;
  margin:5px 0;
  transition:.2s
}

.nav-list{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0
}

.nav-list a{
  color:#dfe7ff;
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px
}

.nav-list a:hover{
  background:rgba(255,255,255,.08)
}

.cta-desktop{
  margin-left: auto
}

/* hero */
.screen-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(3,8,18,.5), rgba(3,8,18,.7) 60%, rgba(3,8,18,.85));
  z-index:-1;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:center
}

.hero-copy h1{
  font-size:clamp(28px, 4.2vw, 58px);
  margin:0 0 12px
}

.hero-copy p{
  margin:0 0 20px
}

.hero-figure img{
  width:100%;
  height:auto;
  max-height: 700px;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));
  object-fit: contain;
}

/* video section */
.screen-video{
  position:relative; min-height:100svh
}

.screen-video::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,11,22,.62), rgba(6,11,22,.45));
  z-index:-1;
}

.video-overlay-top{
  position:absolute;
  left:0;
  right:0;
  top:64px;
  text-align:center;
}

.section-title.center{
  margin:0;
  font-size:clamp(28px,3.2vw,40px);
  text-shadow: 0 4px 16px rgba(0,0,0,.4);
}

.bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  filter:saturate(110%) contrast(105%) brightness(92%)
}

.screen-video::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(6,11,22,.9) 15%, rgba(6,11,22,.0) 55%  );
  z-index:-1
}

.video-overlay-bottom{
  position:absolute;
  left:0;
  right:0;
  bottom:24px
}

.card-wrap{
  display:flex;
  flex-direction:column;
  gap:8px
}

.card-head{
  margin:0;
  text-align:center;
  font-weight:800;
  letter-spacing:.2px;
  font-size:clamp(18px,1.6vw,22px);
  color:#eaf2ff;
  text-shadow:0 3px 12px rgba(0,0,0,.35);
}

.cards-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch
}

.card{
  background:rgba(15,19,33,.74);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius-lg);
  padding:24px
}

.card h3{
  margin:0 0 10px;
  font-size:1.15rem
} 

/* split screens 3,4,6 */
.split-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
  align-items:center
}

.split-figure{
  justify-self:start
}

.split-figure.right{
  justify-self:end
}

.split.flip .split-figure.right{
  justify-self:start;
}

.split .bullets{
  margin:10px 0 18px;
  padding-left:18px
}

.split .bullets li{
  margin:6px 0
}

.numbers{
  list-style:none;
  margin:14px 0 18px;
  padding:0;
  display:grid;
  gap:10px
}

.numbers span{
  font-weight:800;
  color:#fff
}

.split.flip .split-grid{
  direction:rtl
}

.split.flip .split-grid > *{
  direction:ltr
}

.split .split-figure img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.35))
}

.split .split-copy h2{
  font-size:clamp(28px,3.2vw,40px);
  margin:.2rem 0 12px
}

/* residents */
.screen-residents::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(6,11,22,.8), rgba(6,11,22,.8)); z-index:-1;
}

.res-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:18px
}

.res-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  padding:20px;
  text-align:center
}

.res-card img{
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .3s ease;
}

.res-card img:hover {
  transform: scale(1.05);
}

.res-card h3{
  margin:6px 0 4px;
  font-size:1rem
}

.res-card p{
  margin:0;
  color:#d0d7ea;
  font-size:.95rem
}

/* footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.12);
  background:#070c18
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr; gap:12px;
  align-items:center;
  padding:16px 24px
}

.footer-grid .center{
  text-align:center
}

.footer-grid .right{
  text-align:right
}

.link-privacy{
  color:#dfe7ff;
  text-decoration:none
}

.link-privacy:hover{
  text-decoration:underline
}

/* privacy dialog */
.privacy-dialog{
  max-width:720px;
  width:min(92vw,720px);
  border:none;
  border-radius:16px;
  padding:0;
  background:#0c1326;
  color:#e7edff
}

.privacy-dialog::backdrop{
  background:rgba(0,0,0,.6)
}

.privacy-dialog article{
  padding:16px 18px
}

.privacy-dialog header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px
}

.icon-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer
}

/* мягкое затемнение поверх фоновых split-экранов (3,4,6) */
.split.bg-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(3,8,18,.70) 0%, rgba(3,8,18,.82) 65%, rgba(3,8,18,.90) 100%);
  z-index:-1;
}

/* круглая рамка под персонажа */
.avatar-circle{ 
  width:min(540px, 50vw);
  aspect-ratio:1 / 1;
  border-radius:50%;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.08), rgba(0,0,0,.25));
  border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  overflow:hidden;
  display:grid;
  place-items: center;
  padding: 0;
}

.avatar-circle img{
  width:106%;
  height:auto;
  transform:translateY(4px);
}

/* заголовки разделов */
.section-subtitle{
  margin:4px 0 12px; color:#dbe4ff; opacity:.9;
}

/* резиденты: затемнение у тебя уже есть в .screen-residents::before */
.screen-residents .container{
  text-align:center;
}

/* responsive */
@media (max-width: 1100px){
  .res-grid{
    grid-template-columns:repeat(2,1fr)
  }
}
@media (max-width: 880px){
  .hero-figure img{
    max-height: 360px;
    margin-top: var(--header-h);
  }
  .screen-hero{
  }
  .screen-hero .container{
    padding-top: 0;
    padding-bottom: 8px;
  }
  .hero-grid{
    grid-template-columns:1fr;
    gap: 16px;
    text-align:center
  }
  .hero-figure{
    order:-1
  }
  .video-overlay-top{
    top: 10px;
  }
  .split-grid{
    grid-template-columns:1fr;
    text-align:center
  }
  .split .split-figure{
    order:-1;
    justify-self:center
  }
  .split.flip .split-figure.right{
    justify-self:center
  }
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center
  }
  .footer-grid .right{
    text-align:center
  }
  .nav{ margin-left:auto; }
  .nav .burger{
    display:inline-block;
    margin-right:0 
  }

  .site-header .nav-list{
    position: fixed;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    margin: 0;
    padding: calc(84px + env(safe-area-inset-top)) 24px calc(72px + env(safe-area-inset-bottom));
    background:
      radial-gradient(1200px 600px at 50% -10%, rgba(255,122,0,.12), transparent 60%),
      #0b142a;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 1200;
  
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease;
  }

  .site-header .nav-list.open{
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-figure{
    display: block;
    margin-bottom: 6px;
    opacity:0; transform: translateY(8px);
    animation: itemIn .35s ease forwards;
    animation-delay: .04s; /* первым появляется */
  }
  .nav-figure img{
    width: 200px;      /* аккуратный размер */
    height: 200px;
    object-fit: contain;
    border-radius: 50%;
    background: radial-gradient(120px 120px at 30% 30%, rgba(255,255,255,.08), rgba(0,0,0,.35));
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 14px 36px rgba(0,0,0,.4);
  }
  
  .nav-list li{
    opacity:0;
    margin: 5px 0;
    transform:translateY(8px);
    animation: itemIn .35s ease forwards;
  }

  .nav-list li{
    opacity:0; transform:translateY(8px);
    animation: itemIn .35s ease forwards;
  }
  .nav-list li:nth-of-type(2){ animation-delay:.10s } /* О клубе */
  .nav-list li:nth-of-type(3){ animation-delay:.16s } /* Путешествия */
  .nav-list li:nth-of-type(4){ animation-delay:.22s } /* Заработок */
  .nav-list li:nth-of-type(5){ animation-delay:.28s } /* Резиденты */
  .nav-list li:nth-of-type(6){ animation-delay:.34s } /* mobile-cta */
  
  .nav-list a{
    font-size: clamp(20px, 5.5vw, 26px);   /* крупнее шрифт */
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 10px 14px;
    border-radius: 12px;
    color:#eaf2ff;
    text-decoration:none;
  }

  .nav-list a:hover{ background:rgba(255,255,255,.08) }
  
  .mobile-cta {
    display: block;
    padding-top: 20px;
  }

  .nav-list .mobile-cta a{
    border:1px solid var(--brand);
    color:var(--brand);
    padding:12px 16px;
    border-radius:14px;
  }
  
  .nav .burger{ position:relative; z-index:1300 }
  
  body.nav-open{ overflow:hidden }
  
  @keyframes menuFade{ from{opacity:0} to{opacity:1} }
  @keyframes itemIn{ to{ opacity:1; transform:none } }

  .cta-desktop{
    display:none
  }

  .cards-row{
    grid-template-columns:1fr;
    gap:16px
  }

  .card-head{
    margin-bottom: 4px;
    margin-top: 20px;
  }

  .card{
    padding: 10px 20px;
    margin: 0 24px;
  }
  
  .video-overlay-bottom{
    position:static;
    padding:24px 0 40px;
    margin-top: 72px;
  }

  .avatar-circle{
    width:300px
  }

  .screen-residents{
    padding-top: 45px;
  }

  .brand-mobile{
    display:inline-block
  }

  .res-card img {
    width: 298px;
    height: 298px;
  }
  .res-grid {
    gap: 32px;
    margin-top: 12px;
  }
  .res-card {
    background: transparent;
    border: none;
    box-shadow: none;
  }
}

@media (max-width: 560px){
  .res-grid{
    grid-template-columns:repeat(1,1fr)
  }
}

.nav .burger span{
  transition: transform .25s ease, opacity .2s ease;
}
.burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg) }
.burger.is-open span:nth-child(2){ opacity:0 }
.burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg) }

/* subtle reveals */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease
}
[data-reveal].visible{
  opacity:1;
  transform:none
}