:root{
  --bg:#0b0d10;
  --ink:#e7ecf2;
  --muted:#a6b0ba;
  --card:#11151a;
  --line:#212a32;
  --accent:#67d4ff;
  --accent-2:#8b5cf6;
  --ok:#41d392;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* BASE */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; 
  background:
    radial-gradient(1200px 700px at 100% 0%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(1200px 700px at 0% 100%, rgba(103,212,255,.10), transparent 60%),
    var(--bg);
}
img{max-width:100%; display:block}
.wrap{max-width:1120px; margin:0 auto; padding:28px 22px; position:relative;} /* добавлено position:relative */

/* GLASS LOOK */
.glass{background:rgba(18,22,27,.6); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.subtle{background:rgba(12,16,20,.55)}
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){
  .glass{backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px)}
}

/* HERO */
.hero{display:grid; gap:18px; grid-template-columns:1.15fr .85fr; padding:22px}
.title{font-size:clamp(28px,4.8vw,46px); margin:0; font-weight:800}
.title .ver{opacity:.6}
.subtitle{margin:10px 0 0; color:var(--muted); line-height:1.6}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.badge{background:linear-gradient(135deg, rgba(103,212,255,.14), rgba(139,92,246,.14)); border:1px solid rgba(255,255,255,.08); padding:8px 12px; border-radius:999px; font-size:12px}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}

/* STATS */
.hero__meta{display:flex; flex-direction:column; gap:12px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; list-style:none; padding:0; margin:0}
.stat{background:rgba(17,21,26,.7); border:1px solid var(--line); border-radius:14px; padding:16px}
.stat .k{display:block; font-weight:800; font-size:22px}
.stat .n{font-size:12px; color:var(--muted)}
.copy{display:flex; gap:10px; align-items:center; padding:12px}
.copy input{flex:1; background:#0a0d10; color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:12px}

/* BANNER */
.banner{
  background-image: url(/fon/joinfon.webp);
  /* позиция задаётся переменной: "x y" (проценты, px или ключевые слова) */
  background-position: var(--banner-pos, center);
  /* размер (cover / contain / <value>) */
  background-size: var(--banner-size, cover);
  background-repeat: no-repeat;
  /* плавный переход при изменении позиции */
  transition: background-position .2s ease;
}
.banner{position:relative; height:240px; margin-top:22px; overflow:hidden}
.banner::before{content:""; position:absolute; inset:0; background:

  background-size 100%; animation:slide s linear infinite}
.banner__label{position:absolute; left:16px; top:14px; background:#0b0f12; border:1px solid var(--line); border-radius:999px; padding:6px 10px; font-size:12px}
@keyframes slide{0%{background-position:0 0}100%{background-position:-200% 0}}

/* PANELS + HEADINGS */
.panel{padding:18px; margin-top:22px}
.h2{font-size:clamp(22px,3.5vw,32px); margin:0 0 10px; font-weight:800}
.h3{font-size:24px; margin:0 0 8px; font-weight:800}
.note{color:var(--muted); margin:12px 2px}

/* Ссылки в секции "Описание сезона" — берюзово‑голубые */
section[aria-labelledby="about-title"] a{
  color: #00f7ff;
  text-decoration: none;
  transition: color .15s ease, text-decoration .15s ease;
}
section[aria-labelledby="about-title"] a:hover,
section[aria-labelledby="about-title"] a:focus{
  color: #00d1c7;
  text-decoration: underline;
}

/* TABS */
.tabs{display:flex; gap:8px; background:rgba(17,21,26,.6); border:1px solid var(--line); border-radius:12px; padding:6px; width:max-content}
.tab{padding:8px 12px; border-radius:8px; cursor:pointer; color:var(--muted); font-weight:700; background:transparent; border:none}
.tab.is-active{color:var(--ink); background:linear-gradient(90deg, rgba(103,212,255,.25), rgba(139,92,246,.25))}
.tab-content{margin-top:14px}
.is-hidden{display:none}

/* CARDS */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.card{padding:16px; background:rgba(12,16,20,.55); border:1px solid var(--line); border-radius:14px}

/* TAGS */
.tags{display:flex; flex-wrap:wrap; gap:10px}
.tag{padding:8px 10px; background:#131920; border:1px solid var(--line); border-radius:999px; font-size:12px}

/* FEATURES */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center; margin-top:22px}
.feature--reverse{grid-template-columns:1fr 1fr}
.feature__media img{border-radius:14px; border:1px solid var(--line)}
.feature__text{min-height:100%}

/* VIDEO */
.video{position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#000}
.video .play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.22));
  border-radius:16px;
  cursor:pointer;
  transition:background .15s ease, opacity .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.video .play-overlay::before{
  content: "▶";
  font-size:48px;
  color:rgba(255,255,255,0.92);
  text-shadow:0 4px 18px rgba(0,0,0,0.6);
  transform:translateX(2px);
  pointer-events:none;
}
.video .play-overlay:hover{ background:linear-gradient(rgba(0,0,0,0.32), rgba(0,0,0,0.32)); }
.video iframe{width:100%; height:100%; border:0}

/* STEPS */
.steps{margin:0 0 8px 18px; line-height:1.7}

/* BUTTONS */
.btn{--bg:transparent; display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; border:1px solid var(--line); color:var(--ink); text-decoration:none; cursor:pointer}
.btn--primary{--bg:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#0b0d10; border:0}
.btn,.btn--primary{background:var(--bg); box-shadow:0 6px 16px rgba(103,212,255,.20), inset 0 0 0 1px rgba(0,0,0,.25)}
.btn:hover{filter:brightness(1.05)}

/* REVEAL (scroll-in) */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .4s ease}
.reveal.is-in{opacity:1; transform:none}

/* FULLSCREEN (now: full-wrap) VIDEO BACKGROUND — привязан к .wrap, скроллится с контентом */
.page-video-bg{
  position:absolute; /* ранее fixed */
  inset:-82px; /* сохраняем вертикальные границы относительно .wrap */
  left:50%;              /* центрируем относительно окна */
  transform:translateX(-50%); /* окончательно центрируем по X */
  width:100vw;           /* растянуть по ширине окна браузера */
  height:105%;           /* высота равна высоте контейнера .wrap */
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  will-change:transform;
}
.page-video-bg .page-video{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%) translateY(0) scale(1.05);
  transform-origin:center;
  min-width:100vw; /* гарантируем минимум ширины окна */
  width:100vw;     /* растянем видео по ширине окна */
  height:100%;     /* подгон по высоте контейнера */
  object-fit:cover;
  object-position:center;
  filter: blur(8px) brightness(.7);
  transition:filter .2s linear;
  will-change:transform;
}
.page-video-bg .video-overlay{
  position:absolute;
  inset:0;
  background:rgba(6,8,10,0.28);
  pointer-events:none;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr}
}

.video video{
  width:100%;
  aspect-ratio:16/9;     
  display:block;
  background:#000;       
  object-fit:cover;  
  border-radius:16px;   
}