:root{
  --bg:#0A0F12;
  --text:#DCE4E7;
  --text-2:#9FB1B7;
  --teal:#1DDBB7;
  --tealDeep:#0BA398;
  --aqua:#05f7bf; /* match demo */
  --gold:#F5C97A;
  --blue:#3376F3;
  /* demo wave variables */
  --deep:#047e85;
  --deepHi:#6eff72;
  --tealHi:#61ff90;
  --aquaHi:#00c4b4;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; line-height:1.15; margin:0}
h1{font-size:clamp(42px,6vw,84px)}
.brand-title{
  font-family:"Great Vibes",cursive;
  font-size:clamp(48px,8vw,120px);
  font-weight:400;
  line-height: 1.22; /* give room for Great Vibes tall swashes so gradient won't clip */
  background:linear-gradient(120deg,#1DDBB7 0%, #CFF99C 40%, #EAF68F 60%, #8AF8E6 100%);
  background-size:100% 220%;
  background-position:50% 22%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:0 0 24px rgba(29,219,183,.18);
  display:inline-block;
  padding-top: .18em; /* extra paint area for background-clip */
  overflow: visible;  /* avoid any accidental clipping by parent/line box */
}
.brand-word{ display:inline-block }
.brand-word--b{ margin-left:.18em } /* мягкий зазор, чтобы свэш A не давил на Venti */
.t40{margin-top: 40px;}
h2{font-size:clamp(28px,3.2vw,48px); color:#fff; margin-bottom:1rem}
.lead{font-size:clamp(18px,1.6vw,22px)}
.kicker{color:var(--text-2); text-transform:uppercase; letter-spacing:.18em; font-size:.85rem}

a{color:inherit; text-decoration:none}
a:hover{ text-decoration:underline; color:var(--aqua); text-decoration-color:#1DDBB7; text-decoration-thickness:2px; text-underline-offset:4px}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.2rem; border-radius:999px; font-weight:600;
  color:#041012;
  background:linear-gradient(120deg,#0BA398 0%, #1DDBB7 45%, #8AF8E6 100%);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(29,219,183,.25)}
.btn.ghost{color:var(--text); background:transparent; border:1px solid color-mix(in oklab, var(--blue) 45%, #0A0F12)}

.muted{color:var(--text-2)}
.chiprow{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}

.color-text {
  color: var(--teal);
}
.color-text2 {
  color: var(--deepHi);
}
/* NAV */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .2s ease, backdrop-filter .2s}
.nav__inner{max-width:1320px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between}
.brand{font-family:"Great Vibes",cursive; font-weight:700; letter-spacing:.02em; color:#61ff90; font-size:clamp(18px,1.6vw,22px);}
.menu{display:none; gap:18px}
.lang{display:flex; gap:6px}
.lang__btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid #ffffff1a; color:var(--text-2);
  padding:.4rem .7rem; border-radius:999px; cursor:pointer; text-decoration:none;
  transition:border-color .2s ease, color .2s ease;
}
.lang__btn.is-active{border-color:var(--teal); color:#fff}
@media (min-width:640px){ .menu{display:flex} }
.nav--solid{backdrop-filter:blur(10px); background:rgba(0,0,0,.28)}

/* HERO */
.hero{position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:2px 24px 24px}
.aeolian-canvas{position:absolute; left:0; right:0; bottom:0; width:100%; height:55%; display:block; z-index:10; pointer-events:none}
.hero__inner{max-width:1200px; width:100%; display:grid; grid-template-columns:1fr; align-items:center; gap:32px; position:relative; z-index:2}
.hero__content{text-align:left; position:relative; z-index:3; max-width:680px}
@media (min-width:900px){
  .hero__inner{grid-template-columns:1.2fr .8fr}
}
.cta{display:flex; justify-content:flex-start; gap:.6rem; margin-top:1rem}

/* Aeolian dunes (hero) */
.aeolian-hero{display:none}

/* Нижняя статичная «лента» песчаных градиентов */
.hero--ribbon-a::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-6vw; width:140vw; height:48vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 35% 60%, color-mix(in oklab, var(--teal) 70%, #000) 0 45%, transparent 70%),
    radial-gradient(120% 80% at 60% 62%, color-mix(in oklab, var(--blue) 70%, #000) 0 42%, transparent 72%),
    radial-gradient(120% 70% at 80% 55%, rgba(245,201,122,.25) 0 12%, transparent 60%);
  filter:blur(20px) saturate(120%);
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 95%);
  mask-image: linear-gradient(to top, #000 30%, transparent 95%);
}

/* Новый сценарий волн как на рефе: плотные слои без прозрачности, разной высоты,
   чем дальше слой — тем выше. Псевдоэлемент выше фото, но ниже текста. */
/* hero--waves теперь рисуется на canvas, псевдоэлемент не нужен */

/* Вариант B — многослойная песочная кромка */
.hero--ribbon-b::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-5vw; width:160vw; height:54vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(140% 85% at 30% 70%, color-mix(in oklab, var(--teal) 75%, #000) 0 36%, transparent 64%),
    radial-gradient(140% 80% at 54% 68%, color-mix(in oklab, var(--blue) 75%, #000) 0 34%, transparent 66%),
    radial-gradient(130% 70% at 78% 60%, rgba(245,201,122,.30) 0 10%, transparent 58%),
    radial-gradient(120% 65% at 65% 82%, color-mix(in oklab, var(--tealDeep) 50%, #000) 0 22%, transparent 50%),
    radial-gradient(120% 60% at 85% 85%, rgba(138,248,230,.22) 0 12%, transparent 52%);
  filter:blur(22px) saturate(118%);
  -webkit-mask-image: linear-gradient(to top, #000 34%, transparent 96%);
  mask-image: linear-gradient(to top, #000 34%, transparent 96%);
}

/* Вариант C — асимметричная волна */
.hero--ribbon-c::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%) rotate(-2deg);
  bottom:-8vw; width:170vw; height:52vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(150% 90% at 20% 85%, color-mix(in oklab, var(--teal) 80%, #000) 0 40%, transparent 66%),
    radial-gradient(120% 80% at 70% 70%, color-mix(in oklab, var(--blue) 78%, #000) 0 38%, transparent 68%),
    radial-gradient(120% 70% at 90% 65%, rgba(245,201,122,.32) 0 10%, transparent 60%);
  filter:blur(24px) saturate(118%);
  -webkit-mask-image: linear-gradient(to top, #000 36%, transparent 96%);
  mask-image: linear-gradient(to top, #000 36%, transparent 96%);
}

/* SECTIONS */
.main{padding:24px}
.section{max-width:800px; margin:0 auto; padding:72px 0}
.cards{display:grid; grid-template-columns:1fr; gap:12px; margin:18px 0 0}
.cards li{list-style:none; padding:14px 16px; border-radius:20px; border:1px solid #ffffff0d; background:rgba(255,255,255,.02)}
@media (min-width:640px){ .cards{grid-template-columns:repeat(1,1fr)} }
.grid-2{display:grid; gap:18px}
@media (min-width:860px){ .grid-2{grid-template-columns:repeat(2,1fr)} }
.card{border:1px solid #ffffff0d; background:rgba(255,255,255,.02); border-radius:20px; padding:18px; margin-bottom:10px}
.achievements__grid{display:grid; gap:18px; margin-top:24px}
.achievements__card{display:flex; gap:18px; align-items:flex-start}
.achievements__photo{width:154px; height:154px; object-fit:cover; border-radius:28px; flex-shrink:0; box-shadow:0 18px 48px rgba(0,0,0,.35)}
.achievements__content ul{margin:12px 0 0; padding-left:1.1rem; display:grid; gap:.45rem}
.achievements__content li{line-height:1.55}

.programs{display:grid; gap:18px; margin-top:24px}
.program-card{display:grid; gap:12px}
.program-card ul{margin:0; padding-left:1.1rem; display:grid; gap:.4rem}

/* MEDIA frame with soft blend */
.media__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:28px; background:#000; box-shadow:0 20px 60px rgba(0,0,0,.5)
}
.media__video{width:100%; height:100%; border:0; display:block; background:#000}

/* soft “in-blend” without mask for universal support */
.media__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(10,15,18,.88) 92%),
    linear-gradient(to bottom, transparent 70%, rgba(10,15,18,.45) 100%);
}

/* subtle dunes overlay on video */
.aeolian-media{
  position:absolute; inset:-10% -10% -15% -10%;
  pointer-events:none; opacity:.16; filter:blur(12px) saturate(118%);
  background:
    radial-gradient(130% 60% at 10% 70%, color-mix(in oklab, var(--teal) 80%, #000) 0 44%, transparent 64%),
    radial-gradient(130% 58% at 55% 55%, color-mix(in oklab, var(--blue) 80%, #000) 0 42%, transparent 66%),
    radial-gradient(130% 58% at 88% 35%, rgba(245,201,122,.28) 0 10%, transparent 64%);
  background-size:180% 140%;
  -webkit-mask-image: radial-gradient(80% 36% at 50% 60%, #000 40%, transparent 70%);
  mask-image: radial-gradient(80% 36% at 50% 60%, #000 40%, transparent 70%);
}
/* без анимации */

/* FOOTER */
.footer{border-top:1px solid #ffffff0d; margin-top:48px}
.footer__inner{max-width:1320px; margin:0 auto; padding:24px; color:var(--text-2); font-size:.95rem}

/* a11y / motion */
@media (prefers-reduced-motion: reduce){
  .aeolian-hero, .aeolian-media { animation:none !important }
}

/* HERO photo figure with organic mask */
.hero__photo{margin:0; justify-self:center; width:min(640px, 88vw); border-radius:60px; overflow:hidden; box-shadow:0 30px 120px rgba(0,0,0,.6); position:relative; z-index:1}
.hero__photo img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(108%) contrast(102%)}