/* AI-практикум ODAA — собрано из blocks/. Правьте здесь.
   Шрифты подключены относительно: ../fonts/ → assets/fonts/ */

/* ===== 00-core ===== */
/* ---------- ШРИФТЫ ------------------------------------------------
   Залейте 3 файла в ../fonts/ с этими именами.

   ВАЖНО: каждое начертание — ОТДЕЛЬНОЕ семейство. Начертание по всему
   макету задаётся через font-family ('Gilroy-Medium' / 'Gilroy-SemiBold'
   / 'Gilroy-Bold'), а не через font-weight. Так и должно быть, когда
   файлы залиты по отдельности.

   font-weight:100 900 внутри @font-face — не «жирность», а разрешённый
   диапазон: он говорит браузеру «этот файл подходит под любой вес».
   Без него браузер при системном font-weight:bold (заголовки, <b>)
   искусственную жирность поверх настоящего файла — буквы «плывут».

   Пока файлов нет — работает Manrope (близкий аналог).
------------------------------------------------------------------ */
@font-face{font-family:'Gilroy-Medium';src:url('../fonts/Gilroy-Medium.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy-SemiBold';src:url('../fonts/Gilroy-SemiBold.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy-Bold';src:url('../fonts/Gilroy-Bold.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- ТОКЕНЫ ------------------------------------------------ */
:root{
  /* фирменный синий и его семья */
  --o-blue:#0047FF;
  --o-blue-h:#0038CC;
  --o-blue-2:#2E6BFF;
  --o-blue-3:#5B8CFF;
  --o-deep:#0022A8;
  --o-violet:#6B4CFF;
  --o-cyan:#00C2FF;
  --o-ice:#BFD4FF;

  /* синевато-чёрная база вместо нейтральной */
  --o-ink:#04060F;
  --o-ink-2:#080D1E;
  --o-ink-3:#0E1630;

  --o-white:#FFFFFF;
  --o-gray:#5C6270;
  --o-gray-2:#8E96A8;
  --o-soft:#F1F4FA;

  --o-line:rgba(4,6,15,.10);
  --o-line-d:rgba(255,255,255,.14);

  --o-r-s:12px;
  --o-r-m:20px;
  --o-r-l:28px;
  --o-r-xl:clamp(20px,2.6vw,36px);
  --o-r-pill:999px;

  /* три начертания = три семейства. В правилах пишем font-family:var(--o-font-bold) и т.д. */
  --o-font-medium:'Gilroy-Medium','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --o-font-semibold:'Gilroy-SemiBold','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --o-font-bold:'Gilroy-Bold','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  /* базовое начертание страницы */
  --o-font:var(--o-font-medium);
  --o-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --o-pad-y:clamp(76px,9.5vw,150px);
  --o-gut:clamp(20px,5vw,48px);
  --o-max:1320px;

  --o-ease:cubic-bezier(.22,1,.36,1);
  --o-ease-io:cubic-bezier(.65,0,.35,1);

  /* путь к 3D-ассетам — поменяйте, если зальёте в другую папку */
  --o-3d:'/wp-content/uploads/odaa-3d';
}

/* ---------- БАЗА -------------------------------------------------- */
.oda{
  /* базовый текст = Gilroy-Medium; font-weight не задаём нигде */
  font-family:var(--o-font);
  color:var(--o-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  position:relative;
}
.oda *,.oda *::before,.oda *::after{box-sizing:border-box}
/* :where() обнуляет специфичность .oda в этом правиле — иначе
   ".oda p{margin:0}" (специфичность класс+тег) перебивает ЛЮБОЕ
   правило компонента вида ".odaXYZ{margin:0 auto}" на одном классе
   (специфичность ниже), и центрирующие отступы у <p> молча схлопываются
   в 0. Ровно так ломался .oda-hero__lead и .oda-doc__for. */
:where(.oda) p,:where(.oda) ul,:where(.oda) ol,:where(.oda) li,
:where(.oda) h1,:where(.oda) h2,:where(.oda) h3,:where(.oda) h4,
:where(.oda) figure{margin:0;padding:0}
/* Браузер по умолчанию делает заголовки и <b>/<strong> жирными через
   font-weight:bold. Жирность у нас лежит в отдельном файле, поэтому
   подставляем им семейство Gilroy-Bold. :where() = нулевая
   специфичность, любое правило компонента ниже это перебьёт. */
:where(.oda) h1,:where(.oda) h2,:where(.oda) h3,:where(.oda) h4,
:where(.oda) h5,:where(.oda) h6,:where(.oda) b,:where(.oda) strong{
  font-family:var(--o-font-bold);
}
.oda ul,.oda ol{list-style:none}
/* height:auto обязателен: у картинок стоят width/height атрибуты (для CLS),
   и без него max-width сжимает ширину, а высота остаётся из атрибута —
   изображение расплющивается. Точечные height:100% ниже перебивают это. */
.oda img,.oda svg,.oda canvas{display:block;max-width:100%}
.oda img{height:auto}
/* Кнопки НЕ наследуют цвет секции — иначе на тёмной секции белая кнопка
   получает белый текст, а на светлой синяя кнопка получает тёмный. */
.oda a:not(.oda-btn){color:inherit}
.oda a{text-decoration:none}
/* :where() обязателен: ".oda button" (класс+тег) специфичнее любого
   ".oda-q__b" (один класс), и font:inherit молча стирал бы начертание,
   заданное компоненту через font-family. */
:where(.oda) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* Betheme: гасим отступы врапперов вокруг наших секций */
.oda-wrap,.oda-wrap .wrap,.oda-wrap .container,.oda-wrap .column,.oda-wrap .mcb-column-inner,
.oda-wrap .mcb-wrap-inner,.oda-wrap .section_wrapper,.oda-wrap .mcb-section-inner{
  padding:0!important;margin:0!important;max-width:none!important;width:100%!important;
}
.oda-wrap .mcb-item-html-inner{padding:0!important;margin:0!important}

/* ---------- СЕТКА ------------------------------------------------- */
.oda-sec{padding:var(--o-pad-y) 0;position:relative;overflow:clip;isolation:isolate}
.oda-c{width:100%;max-width:var(--o-max);margin:0 auto;padding:0 var(--o-gut);position:relative;z-index:3}

/* ==================================================================
   NOISY MESH GRADIENT — ядро визуального языка
   Использование:
   <div class="oda-mesh oda-mesh--deep" aria-hidden="true">
     <i class="oda-blob" style="--x:18%;--y:24%;--c:var(--o-blue);--s:52vw;--d:0s"></i>
     ...
     <i class="oda-grain"></i>
   </div>
   ================================================================== */
.oda-mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}

/* базовые заливки под блобами */
.oda-mesh--deep{background:
  radial-gradient(120% 90% at 50% -10%, #1B3FCC 0%, #08133F 45%, #04060F 78%)}
.oda-mesh--night{background:
  radial-gradient(100% 80% at 20% 0%, #0B1C55 0%, #060B1C 55%, #04060F 100%)}
.oda-mesh--royal{background:
  linear-gradient(165deg,#0038D6 0%,#0022A8 42%,#061034 100%)}
.oda-mesh--light{background:
  radial-gradient(110% 80% at 80% 0%, #E6EDFF 0%, #F4F7FD 45%, #FFFFFF 100%)}
.oda-mesh--paper{background:
  linear-gradient(180deg,#FFFFFF 0%,#F1F5FD 100%)}

/* ---------- БЕСШОВНЫЕ СТЫКИ ТЁМНЫХ СЕКЦИЙ -------------------------
   У каждого пресета свой градиент, поэтому на границе двух тёмных
   секций был виден чёткий шов. Гасим края в один и тот же цвет —
   тогда низ одной секции и верх следующей совпадают пиксель в пиксель.

   Ставится атрибутом на mesh:  data-blend="top bottom"

   Важно: уходим в rgba(4,6,15,0), а НЕ в transparent — transparent
   это rgba(0,0,0,0), и на светлых оттенках он даёт грязную серую полосу.
------------------------------------------------------------------ */
.oda-mesh::before,.oda-mesh::after{
  content:"";position:absolute;left:0;right:0;
  height:var(--seam,clamp(90px,11vw,190px));
  z-index:6;pointer-events:none;display:none}
.oda-mesh[data-blend~="top"]::before{display:block;top:0;
  background:linear-gradient(180deg,var(--seam-c,#04060F) 0%,var(--seam-c0,rgba(4,6,15,0)) 100%)}
.oda-mesh[data-blend~="bottom"]::after{display:block;bottom:0;
  background:linear-gradient(0deg,var(--seam-c,#04060F) 0%,var(--seam-c0,rgba(4,6,15,0)) 100%)}

/* Светлые секции гасятся в белый. Прозрачный конец обязан быть
   ТОГО ЖЕ цвета: иначе градиент идёт через полупрозрачный тёмный
   и на светлом фоне появляется грязная серая полоса. */
.oda-mesh--light,.oda-mesh--paper{--seam-c:#FFFFFF;--seam-c0:rgba(255,255,255,0)}

.oda-blob{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);aspect-ratio:1;margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--c) 0%, transparent 68%);
  filter:blur(var(--blur,70px));
  opacity:var(--o,.85);
  will-change:transform;
  animation:oda-drift var(--dur,22s) var(--o-ease-io) var(--d,0s) infinite;
}
@keyframes oda-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  25%    {transform:translate3d(6%,-7%,0) scale(1.12)}
  50%    {transform:translate3d(-5%,5%,0) scale(.94)}
  75%    {transform:translate3d(4%,8%,0) scale(1.07)}
}

/* ---------- ЗЕРНО (анимированное) --------------------------------- */
.oda-grain{
  position:absolute;top:-60%;left:-60%;width:220%;height:220%;
  pointer-events:none;
  opacity:var(--g,.22);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px;
  animation:oda-grain .7s steps(1) infinite;
  will-change:transform;
}
.oda-grain--fine{background-size:170px 170px;--g:.16}
.oda-grain--heavy{--g:.32}
@keyframes oda-grain{
  0%  {transform:translate3d(0,0,0)}
  12.5%{transform:translate3d(-3%,-4%,0)}
  25% {transform:translate3d(-6%,2%,0)}
  37.5%{transform:translate3d(2%,-5%,0)}
  50% {transform:translate3d(5%,3%,0)}
  62.5%{transform:translate3d(-2%,6%,0)}
  75% {transform:translate3d(4%,-2%,0)}
  87.5%{transform:translate3d(-5%,-3%,0)}
  100%{transform:translate3d(0,0,0)}
}
/* На светлых секциях overlay слишком контрастный */
.oda-mesh--light .oda-grain,.oda-mesh--paper .oda-grain{mix-blend-mode:multiply;--g:.09}

/* Глобальное зерно поверх всей страницы */
.oda-grain-global{
  position:fixed;inset:0;z-index:9995;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:oda-grain .7s steps(1) infinite;
}

/* Секции вне экрана не анимируются — класс вешает IntersectionObserver.
   Без этого 12 секций с blur-блобами непрерывно жгут GPU и батарею.
   По умолчанию класса НЕТ: если IO не отработает, фон просто анимируется,
   а не застывает намертво. */
.oda-mesh.is-idle .oda-blob,
.oda-mesh.is-idle .oda-grain{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .oda-blob,.oda-grain,.oda-grain-global{animation:none!important}
}

/* ---------- ТИПОГРАФИКА ------------------------------------------- */
.oda-h1{font-family:var(--o-font-bold);letter-spacing:-.04em;line-height:.98;font-size:clamp(42px,7.4vw,104px)}
.oda-h2{font-family:var(--o-font-bold);letter-spacing:-.035em;line-height:1.02;font-size:clamp(32px,5.2vw,72px)}
.oda-h3{font-family:var(--o-font-bold);letter-spacing:-.025em;line-height:1.14;font-size:clamp(20px,2.3vw,30px)}
.oda-lead{font-size:clamp(16px,1.75vw,22px);line-height:1.5;color:var(--o-gray)}
.oda-body{font-size:clamp(15px,1.35vw,17px);line-height:1.55;color:var(--o-gray)}
.oda-small{font-size:clamp(13px,1.1vw,14px);line-height:1.5;color:var(--o-gray-2)}
.oda-on-dark{color:#fff}
.oda-on-dark .oda-lead,.oda-on-dark .oda-body{color:rgba(255,255,255,.74)}
.oda-on-dark .oda-small{color:rgba(255,255,255,.52)}

.oda-grad{background:linear-gradient(96deg,#fff 12%,var(--o-ice) 45%,var(--o-cyan) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.oda-grad-b{background:linear-gradient(96deg,var(--o-blue) 0%,var(--o-violet) 55%,var(--o-cyan) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Shimmer text — бегущий блик по буквам (аналог ShimmerText) */
.oda-shimmer{
  background:linear-gradient(100deg,
    var(--sh-base,rgba(255,255,255,.42)) 0%,
    var(--sh-base,rgba(255,255,255,.42)) 38%,
    var(--sh-hi,#fff) 50%,
    var(--sh-base,rgba(255,255,255,.42)) 62%,
    var(--sh-base,rgba(255,255,255,.42)) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:oda-shimmer 3.4s linear infinite;
}
@keyframes oda-shimmer{from{background-position:150% 0}to{background-position:-50% 0}}
.oda-shimmer--dark{--sh-base:rgba(4,6,15,.38);--sh-hi:var(--o-blue)}

/* Lyric text — активное слово подсвечивается, остальные притушены.
   Погашенное состояние держим читаемым: заголовок должен читаться
   даже если человек попал на середину страницы и ничего не скроллил. */
.oda-lyric .oda-w{
  display:inline-block;
  color:var(--ly-off,rgba(255,255,255,.55));
  transition:color .5s var(--o-ease),transform .5s var(--o-ease);
  will-change:transform,color;
}
.oda-lyric .oda-w.is-on{color:var(--ly-on,#fff);transform:translateY(-.04em)}
/* на светлых секциях цвета переворачиваются автоматически */
.oda-on-light .oda-lyric .oda-w{--ly-off:rgba(4,6,15,.42);--ly-on:var(--o-ink)}

/* Cycling text — смена строк с блюром без прыжков высоты */
.oda-cycle{position:relative;display:inline-grid;vertical-align:bottom}
.oda-cycle>span{grid-area:1/1;opacity:0;filter:blur(7px);transform:translateY(.24em);
  transition:opacity .5s var(--o-ease),filter .5s var(--o-ease),transform .5s var(--o-ease)}
.oda-cycle>span.is-on{opacity:1;filter:blur(0);transform:none}

/* ---------- ЭЙБРОУ ------------------------------------------------ */
/* Светло-голубой, а не #5B8CFF: на ярко-синей секции (--royal)
   средний синий давал контраст 3.7 при норме 4.5. */
.oda-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-family:var(--o-font-bold);
  letter-spacing:.1em;text-transform:uppercase;color:var(--o-ice);margin-bottom:22px}
.oda-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 4px rgba(91,140,255,.18);animation:oda-pulse 2.4s var(--o-ease) infinite}
.oda-on-light .oda-eyebrow{color:var(--o-blue)}
@keyframes oda-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.66);opacity:.5}}

/* ---------- ПИЛЮЛИ (как в референсе) ------------------------------ */
.oda-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.oda-pill{display:inline-flex;align-items:center;gap:9px;padding:11px 20px 11px 14px;
  border-radius:var(--o-r-pill);font-size:clamp(13px,1.3vw,15.5px);font-family:var(--o-font-semibold);
  letter-spacing:-.01em;white-space:nowrap;
  background:rgba(255,255,255,.08);border:1px solid var(--o-line-d);color:#fff;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background-color .4s var(--o-ease),transform .4s var(--o-ease)}
.oda-pill:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}
.oda-pill__d{width:18px;height:18px;flex:0 0 18px;border-radius:50%;display:grid;place-items:center;
  background:var(--o-blue-2)}
.oda-on-light .oda-pill{background:rgba(0,71,255,.06);border-color:rgba(0,71,255,.14);color:var(--o-ink)}

/* ---------- КНОПКИ ------------------------------------------------ */
.oda-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:19px 34px;border-radius:var(--o-r-pill);font-family:var(--o-font-semibold);font-size:clamp(15px,1.4vw,17px);
  letter-spacing:-.012em;line-height:1;white-space:nowrap;overflow:hidden;
  transition:transform .35s var(--o-ease),box-shadow .35s var(--o-ease),background-color .25s,color .25s;
  will-change:transform}
.oda-btn--primary{background:var(--o-blue);color:#fff;
  box-shadow:0 10px 34px -10px rgba(0,71,255,.8),inset 0 1px 0 rgba(255,255,255,.24)}
.oda-btn--primary:hover{background:var(--o-blue-2);
  box-shadow:0 20px 46px -12px rgba(0,71,255,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.oda-btn--light{background:#fff;color:var(--o-ink);box-shadow:0 12px 34px -14px rgba(0,0,0,.6)}
.oda-btn--light:hover{background:#EAF0FF}
.oda-btn--ghost{background:transparent;color:currentColor;box-shadow:inset 0 0 0 1.5px var(--o-line-d)}
.oda-on-light .oda-btn--ghost{box-shadow:inset 0 0 0 1.5px var(--o-line)}
.oda-btn--ghost:hover{background:rgba(255,255,255,.1)}
.oda-on-light .oda-btn--ghost:hover{background:rgba(0,71,255,.06)}
.oda-btn--lg{padding:23px 44px;font-size:clamp(16px,1.5vw,18.5px)}
.oda-btn--full{width:100%}
.oda-btn:active{transform:scale(.975)}
.oda-btn__sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  transform:translateX(-120%)}
.oda-btn:hover .oda-btn__sheen{transform:translateX(120%);transition:transform .85s var(--o-ease)}

/* ---------- КАРТОЧКИ / СТЕКЛО ------------------------------------- */
.oda-card{background:#fff;border-radius:var(--o-r-l);padding:clamp(24px,3vw,38px);
  border:1px solid var(--o-line);position:relative;overflow:hidden;
  box-shadow:0 1px 0 var(--o-line),0 24px 54px -34px rgba(4,6,15,.34)}
.oda-glass{position:relative;border-radius:var(--o-r-m);
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  border:1px solid var(--o-line-d);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 22px 60px -32px rgba(0,10,50,.85),inset 0 1px 0 rgba(255,255,255,.18)}
.oda-glass--solid{background:linear-gradient(160deg,rgba(12,22,60,.86),rgba(6,11,30,.9))}

/* ---------- СПИСКИ ------------------------------------------------- */
.oda-list{display:grid;gap:14px}
.oda-list li{position:relative;padding-left:36px;font-size:clamp(15px,1.45vw,18px);line-height:1.5}
.oda-list li::before{content:"";position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;
  background:rgba(0,71,255,.12);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.4l3 3 6-6.4' fill='none' stroke='%230047FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}
.oda-on-dark .oda-list li::before{background-color:rgba(255,255,255,.12);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.4l3 3 6-6.4' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- 3D-АССЕТЫ --------------------------------------------- */
.oda-3d{position:absolute;pointer-events:none;user-select:none;z-index:1;
  will-change:transform;filter:drop-shadow(0 30px 60px rgba(0,8,40,.55))}
.oda-3d img{width:100%;height:auto}
.oda-3d--float{animation:oda-float var(--fd,7s) var(--o-ease-io) var(--fdel,0s) infinite}
@keyframes oda-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.oda-3d--float{animation:none}}

/* ---------- ТАЙМЕР ------------------------------------------------ */
.oda-timer{display:inline-flex;align-items:flex-start;gap:clamp(8px,1.2vw,16px)}
.oda-timer__u{display:flex;flex-direction:column;align-items:center;min-width:clamp(44px,5vw,64px)}
.oda-timer__n{font-family:var(--o-font-bold);letter-spacing:-.05em;line-height:1;
  font-size:clamp(26px,3.6vw,46px);font-variant-numeric:tabular-nums}
.oda-timer__l{font-size:clamp(10px,.85vw,12px);font-family:var(--o-font-semibold);letter-spacing:.09em;
  text-transform:uppercase;opacity:.64;margin-top:8px}
.oda-timer__s{font-family:var(--o-font-bold);line-height:1;font-size:clamp(22px,3vw,38px);opacity:.22;
  margin-top:clamp(1px,.2vw,3px)}
.oda-timer--sm .oda-timer__n{font-size:18px}
.oda-timer--sm .oda-timer__l{font-size:9px;margin-top:4px}
.oda-timer--sm .oda-timer__s{font-size:16px}
.oda-timer--sm .oda-timer__u{min-width:30px}

/* ---------- АНИМАЦИИ ПОЯВЛЕНИЯ ------------------------------------ */
/* Появление на чистом CSS. Никакой зависимости от GSAP:
   класс oda-r ставится синхронно, класс is-in вешает IntersectionObserver. */
html.oda-r .oda-reveal,
html.oda-r .oda-reveal-line>*{
  opacity:0;transform:translateY(var(--rv-y,26px));
  transition:opacity .7s var(--o-ease),transform .7s var(--o-ease)}
html.oda-r .oda-reveal.is-in,
html.oda-r .oda-reveal-line.is-in>*{opacity:1;transform:none}

/* Первый экран показываем мгновенно, без перехода: это LCP,
   его нельзя задерживать ради эффекта появления. */
html.oda-r .oda-reveal.is-now,
html.oda-r .oda-reveal-line.is-now>*{transition:none!important}

/* Каскад внутри группы */
html.oda-r .oda-reveal-line.is-in>*:nth-child(2){transition-delay:.06s}
html.oda-r .oda-reveal-line.is-in>*:nth-child(3){transition-delay:.12s}
html.oda-r .oda-reveal-line.is-in>*:nth-child(4){transition-delay:.18s}
html.oda-r .oda-reveal-line.is-in>*:nth-child(5){transition-delay:.24s}
html.oda-r .oda-reveal-line.is-in>*:nth-child(6){transition-delay:.30s}
html.oda-r .oda-reveal-line.is-in>*:nth-child(n+7){transition-delay:.36s}

@media (max-width:767px){
  html.oda-r .oda-reveal,html.oda-r .oda-reveal-line>*{--rv-y:16px;transition-duration:.5s}
}
@media (prefers-reduced-motion:reduce){
  html.oda-r .oda-reveal,html.oda-r .oda-reveal-line>*{
    opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- БЕГУЩАЯ СТРОКА ---------------------------------------- */
.oda-marquee{display:flex;overflow:hidden;user-select:none;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.oda-marquee__t{flex:0 0 auto;display:flex;align-items:center;gap:clamp(24px,3vw,48px);
  padding-right:clamp(24px,3vw,48px);animation:oda-scroll 34s linear infinite}
.oda-marquee:hover .oda-marquee__t{animation-play-state:paused}
@keyframes oda-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ---------- УТИЛИТЫ ----------------------------------------------- */
.oda-only-mob{display:none}
@media (max-width:767px){
  .oda-hide-mob{display:none!important}
  .oda-only-mob{display:initial}
}
.oda-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- ТЕКСТ ЮРИДИЧЕСКИХ СТРАНИЦ ------------------------------
   Политика конфиденциальности и согласие на обработку данных:
   контент приходит из редактора WordPress, поэтому стилизуем теги. */
.oda-doc-text{font-size:clamp(15px,1.4vw,17px);line-height:1.65;color:var(--o-gray)}
.oda-doc-text > * + *{margin-top:1.1em}
.oda-doc-text h2{font-family:var(--o-font-bold);font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.025em;line-height:1.25;color:var(--o-ink);margin-top:1.8em}
.oda-doc-text h3{font-family:var(--o-font-semibold);font-size:clamp(17px,1.7vw,20px);
  letter-spacing:-.02em;color:var(--o-ink);margin-top:1.6em}
.oda-doc-text a{color:var(--o-blue);text-decoration:underline;text-underline-offset:2px}
.oda-doc-text strong,.oda-doc-text b{font-family:var(--o-font-semibold);color:var(--o-ink)}
.oda-doc-text ul,.oda-doc-text ol{padding-left:1.3em}
.oda-doc-text ul{list-style:disc}
.oda-doc-text ol{list-style:decimal}
.oda-doc-text li{margin-top:.5em}
.oda-doc-text li::marker{color:var(--o-blue)}

/* ==================================================================
   МОБИЛЬНАЯ ОПТИМИЗАЦИЯ — строго в конце файла, чтобы перебить
   правила компонентов выше по каскаду.
   Основной трафик пойдёт со средних Android — там дорогие эффекты
   (drift-анимация блоба, backdrop-filter) съедают плавность скролла.
   ================================================================== */
@media (max-width:767px){
  .oda-blob{filter:blur(var(--blur-m,44px));animation:none}  /* статичный mesh — он и так хорош */
  .oda-grain{--g:.15;animation-duration:1.2s}
  .oda-grain-global{opacity:.035}
  .oda-pill{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.13)}
  .oda-on-light .oda-pill{background:rgba(0,71,255,.07)}
  .oda-glass{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:linear-gradient(160deg,rgba(20,34,84,.9),rgba(8,14,36,.92))}
}

/* ===== 01-header ===== */
.oda-head{position:fixed;top:0;left:0;right:0;z-index:9990;
  transition:background-color .4s var(--o-ease),box-shadow .4s var(--o-ease),backdrop-filter .4s}
/* Сетка 1fr auto 1fr, а не space-between: таблетка обязана стоять по
   центру экрана независимо от того, насколько широки логотип и кнопка. */
.oda-head__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  height:clamp(64px,7vw,84px)}
/* Локап ERA AI × ODAA.
   Белый цвет задан на самой ссылке с запасом по специфичности: она
   попадает под правило .oda a:not(.oda-btn){color:inherit} из ядра
   и иначе утягивает в тёмный всё внутри — логотипы, разделитель и подпись. */
.oda a.oda-head__logo{color:#fff}
.oda .oda-lg-era,.oda .oda-lg-odaa{color:#fff}
.oda-head__logo{display:flex;align-items:center;gap:clamp(9px,1.2vw,14px);justify-self:start}
.oda-head__logo svg{display:block;width:auto}
.oda-lg-era{height:clamp(14px,1.5vw,19px)}
.oda-lg-odaa{height:clamp(21px,2.2vw,28px)}
.oda-head__x{color:#fff;opacity:1;font-size:clamp(12px,1.2vw,15px);
  font-family:var(--o-font-medium);line-height:1}
.oda-head__tag{color:#fff;opacity:1;font-family:var(--o-font-medium);font-size:12px;
  letter-spacing:.02em;
  padding-left:clamp(9px,1.2vw,14px);border-left:1px solid rgba(255,255,255,.28)}

/* ---------- Таблетка с якорями ---------- */
.oda-head__nav{display:flex;align-items:center;gap:2px;justify-self:center;
  padding:6px 8px;border-radius:var(--o-r-pill);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 18px 40px -26px rgba(0,10,60,.9)}
.oda .oda-head__nav a{padding:9px 17px;border-radius:var(--o-r-pill);
  font-size:14.5px;font-family:var(--o-font-semibold);letter-spacing:-.01em;
  color:rgba(255,255,255,.82);
  transition:color .3s var(--o-ease),background-color .3s var(--o-ease)}
.oda .oda-head__nav a:hover{color:#fff;background:rgba(255,255,255,.12)}
.oda-head__sep{color:#fff;opacity:.3;font-size:13px;user-select:none}

.oda-head__cta{padding:13px 24px;font-size:14px;justify-self:end}

/* Состояние после скролла — тёмное «стекло» в тон синему сайту */
.oda-head.is-stuck{background:rgba(6,11,28,.68);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.09),0 18px 44px -32px rgba(0,0,0,.95)}

@media (max-width:1279px){ .oda-head__tag{display:none} }
@media (max-width:1023px){
  .oda-head__nav{display:none}
  .oda-head__in{grid-template-columns:1fr auto}
}
@media (max-width:600px){
  .oda-head__cta{padding:12px 18px;font-size:13px}
}

/* Мобильная плашка таймера снизу экрана */
.oda-bar{position:fixed;left:10px;right:10px;bottom:10px;z-index:9989;
  display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px 11px 18px;border-radius:var(--o-r-pill);background:var(--o-ink);color:#fff;
  box-shadow:0 16px 40px -14px rgba(10,11,14,.6);
  transform:translateY(140%);transition:transform .5s var(--o-ease)}
.oda-bar.is-on{transform:translateY(0)}
.oda-bar__l{font-size:11px;font-family:var(--o-font-semibold);letter-spacing:.05em;text-transform:uppercase;opacity:.5;
  margin-bottom:5px}
.oda-bar__cta{padding:12px 20px;font-size:13px;flex:0 0 auto}
.oda-bar>div{min-width:0}
/* В компактной плашке секунды не показываем — иначе кнопка не влезает на 360px */
.oda-bar .oda-timer__u:last-child,
.oda-bar .oda-timer__s:last-of-type{display:none}
@media (max-width:1023px){ .oda-bar{display:flex} }

/* ===== 02-hero ===== */
/* ---------- Секция ---------- */
.oda-hero{position:relative;overflow:clip;isolation:isolate;color:#fff;
  background:var(--o-ink);
  /* Высоту задаёт контент, 100svh — только пол. Фиксированная высота
     больше первого экрана оставляет между кнопками и нижней лентой
     пустоту, которую нечем заполнить: карточек в сцене нет. */
  min-height:100svh;
  padding:clamp(128px,15vh,190px) 0 clamp(96px,12vh,158px);
  display:flex;flex-direction:column}
.oda-hero h1.oda-h1{font-size:clamp(36px,5.4vw,80px)}
.oda-hero .oda-c{z-index:4}

/* ---------- Слои сцены ---------- */
.oda-scene{position:absolute;inset:0;z-index:0;overflow:clip}
/* Селектор из двух классов не для красоты: в ядре есть
   ".oda img{height:auto}" со специфичностью (0,1,1), и одноклассовое
   правило её не перебивает — плита держит пропорцию 3:2 вместо того,
   чтобы заполнить секцию, и снизу остаётся полоса пустоты. */
.oda-scene .oda-scene__bg{position:absolute;left:50%;top:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  transform:translate3d(-50%,0,0);will-change:transform}
/* передний план шире кадра: при параллаксе края не должны обнажаться */
.oda-scene .oda-scene__fg{position:absolute;left:50%;bottom:-1.5%;
  width:120%;max-width:none;height:auto;z-index:2;pointer-events:none;
  transform:translate3d(-50%,0,0);will-change:transform}

/* Верхний скрим — под шапку и заголовок. Верх плиты сам по себе тёмный,
   поэтому плотное затемнение бьёт дважды и небо схлопывается. */
.oda-scene::before{content:"";position:absolute;inset:0 0 auto;height:58%;z-index:1;
  background:linear-gradient(180deg,
    rgba(2,10,26,.58) 0%,rgba(2,10,26,.34) 40%,rgba(2,10,26,.1) 74%,rgba(2,10,26,0) 100%)}
/* Нижний скрим — уводим сцену в цвет фона, чтобы следующая секция
   легла на плотное, а не на кашу из цветов. */
.oda-scene::after{content:"";position:absolute;inset:auto 0 0;height:24%;z-index:3;
  background:linear-gradient(0deg,rgba(4,6,15,.94) 0%,rgba(4,6,15,.6) 42%,rgba(4,6,15,0) 100%)}

/* ---------- Шапка блока: центрированный стек ---------- */
.oda-hero__top{text-align:center;position:relative;z-index:3}

.oda-hero__badge{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 13px;
  border-radius:var(--o-r-pill);background:rgba(255,255,255,.09);border:1px solid var(--o-line-d);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:13px;font-family:var(--o-font-semibold);letter-spacing:-.005em;margin-bottom:clamp(24px,3.2vw,34px)}
.oda-hero__badge b{font-family:var(--o-font-bold);color:var(--o-cyan)}
.oda-hero__dot{width:7px;height:7px;border-radius:50%;background:#3BE07A;
  box-shadow:0 0 0 4px rgba(59,224,122,.2);animation:oda-pulse 2.2s var(--o-ease) infinite}

.oda-hero h1{margin:0 auto clamp(20px,2.4vw,32px);max-width:1120px;
  text-wrap:balance;position:relative;text-shadow:0 2px 30px rgba(2,10,26,.5)}
.oda-hero__w{display:inline-block;will-change:transform}
/* Анимация заголовка — на CSS, без GSAP: это LCP-элемент,
   он не должен зависеть от загрузки скрипта с CDN. */
html.oda-r .oda-hero h1 .oda-hero__w{
  opacity:0;transform:translateY(.45em);
  animation:oda-word .9s var(--o-ease) forwards;
  animation-delay:calc(var(--i,0) * .04s + .08s)}
@keyframes oda-word{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html.oda-r .oda-hero h1 .oda-hero__w{opacity:1;transform:none;animation:none}
}

/* хромовая «пилюля» внутри заголовка */
.oda-hero__chip{display:inline-flex;align-items:center;justify-content:center;
  width:clamp(58px,7.4vw,104px);height:clamp(40px,5.2vw,74px);
  border-radius:var(--o-r-pill);overflow:hidden;vertical-align:middle;
  margin:0 .06em;transform:translateY(-.06em);
  background:linear-gradient(140deg,rgba(255,255,255,.2),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 10px 30px -12px rgba(0,20,90,.9)}
.oda-hero__chip img{width:118%;height:118%;object-fit:cover;filter:saturate(1.15)}

.oda-hero__lead{max-width:56ch;margin:0 auto clamp(28px,3.4vw,40px)}
.oda-hero__lead b{color:#fff;font-family:var(--o-font-semibold)}

.oda-hero__pills{margin-bottom:clamp(30px,3.8vw,44px)}

/* два CTA в строку, микро-строка под ними */
.oda-hero__acts{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:16px}
.oda-hero__micro{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;
  color:rgba(255,255,255,.7)}
.oda-hero__micro svg{opacity:.7;flex:0 0 auto}

/* ---------- Нижняя лента ---------- */
.oda-hero__foot{position:relative;z-index:3;margin-top:clamp(52px,8vh,104px);
  padding-top:clamp(26px,3.2vw,36px);border-top:1px solid var(--o-line-d);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,36px)}
.oda-hero__fl{font-size:11.5px;font-family:var(--o-font-bold);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-bottom:14px}
.oda-hero__fv{font-size:clamp(16px,1.6vw,20px);font-family:var(--o-font-bold);letter-spacing:-.025em}
.oda-hero__fv span{color:rgba(255,255,255,.5);font-family:var(--o-font-medium)}

/* ---------- Мобильная раскладка ----------
   Плита портретная, поэтому небо и диск целые. Полосу переднего плана
   на мобильных прячем: в портретном кадре свой передний план, два
   слоя цветов накладывались бы друг на друга. */
@media (max-width:767px){
  .oda-hero{padding-top:clamp(104px,26vw,150px);
    padding-bottom:clamp(64px,14vw,104px);min-height:0}
  .oda-hero h1{max-width:none}
  .oda-scene .oda-scene__fg{display:none}
  .oda-scene::before{height:52%}
  .oda-hero__acts .oda-btn{width:100%}
  .oda-hero__foot{gap:22px}
}

/* ===== 05-program ===== */
/* ---------- Шторка ----------
   Светлая панель наезжает на тёмный герой и на скролле распрямляется
   по горизонтали. Растягивается ФОН (::before), а не сама секция:
   scaleX на блоке ужимал бы текст на 6%, и на крупном кегле это видно.
   Наезд обязателен — по бокам сжатой панели остаётся видна сцена,
   именно это и тянет листать дальше. */
.oda-prog{position:relative;z-index:5;color:var(--o-ink);
  margin-top:calc(-1 * clamp(56px,7vw,124px));
  padding:clamp(54px,6.6vw,108px) 0 clamp(60px,7.5vw,116px)}
.oda-prog::before{content:"";position:absolute;inset:0 0 -240px;z-index:0;
  /* Панель на 240px длиннее секции и на этом хвосте уходит в прозрачность:
     ниже начинается «Кому подойдёт» со своим светлым mesh, и без растушёвки
     на стыке видна горизонтальная ступенька. Гасим в тот же цвет с alpha 0,
     а не в transparent — иначе на светлом пойдёт грязная серая полоса. */
  background:linear-gradient(180deg,var(--o-soft) 0%,var(--o-soft) calc(100% - 240px),rgba(241,244,250,0) 100%);
  border-radius:clamp(26px,4.4vw,70px) clamp(26px,4.4vw,70px) 0 0;
  transform:scaleX(var(--sx,.94));transform-origin:50% 50%;will-change:transform;
  box-shadow:0 -30px 80px -40px rgba(0,10,50,.5)}
.oda-prog>*{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){ .oda-prog::before{transform:none} }

/* ---------- Центрированная отбивка ---------- */
.oda-prog__top{text-align:center;max-width:820px;margin:0 auto clamp(42px,5vw,74px)}
.oda-prog__ico{width:clamp(52px,5vw,64px);height:clamp(52px,5vw,64px);
  margin:0 auto clamp(22px,2.4vw,30px);
  border-radius:clamp(15px,1.5vw,19px);background:#fff;display:grid;place-items:center;
  color:var(--o-blue);
  box-shadow:0 20px 44px -22px rgba(0,40,150,.55),0 0 0 1px rgba(4,6,15,.05)}
.oda-prog__top .oda-eyebrow{color:var(--o-blue);margin-bottom:18px}
.oda-prog__top h2{color:var(--o-blue);max-width:16ch;margin:0 auto 22px}
/* Заголовок набирается по словам (data-oda-lyric), и цвет каждого слова
   задаётся переменными --ly-off/--ly-on из ядра, а не свойством color
   на самом h2. Для светлой секции ядро уводит слова в --o-ink, поэтому
   синий приходится назначать именно этими переменными. */
.oda-prog__top h2.oda-lyric .oda-w{--ly-off:rgba(0,71,255,.26);--ly-on:var(--o-blue)}
.oda-prog__sub{font-size:clamp(15.5px,1.5vw,18.5px);line-height:1.58;color:var(--o-gray);
  max-width:58ch;margin:0 auto}
.oda-prog__meta{display:inline-flex;align-items:center;gap:10px;font-size:14px;
  margin-top:clamp(26px,3vw,36px);
  padding:11px 20px;border-radius:var(--o-r-pill);
  background:#fff;border:1px solid rgba(4,6,15,.07);color:var(--o-gray);
  box-shadow:0 14px 34px -22px rgba(0,20,80,.45)}
.oda-prog__meta b{color:var(--o-ink);font-family:var(--o-font-bold)}
.oda-prog__meta svg{color:var(--o-blue);flex:0 0 auto}

.oda-prog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:1023px){ .oda-prog__grid{grid-template-columns:1fr;gap:44px} }

/* ---------- Карточка дня ---------- */
.oda-day{position:relative;display:flex;flex-direction:column;
  padding:clamp(72px,7vw,96px) clamp(24px,2.6vw,34px) clamp(26px,2.8vw,34px);
  border-radius:var(--o-r-xl);
  background:#fff;
  border:1px solid rgba(4,6,15,.07);
  box-shadow:0 34px 64px -44px rgba(0,20,90,.42),0 2px 5px rgba(4,6,15,.03);
  transition:transform .55s var(--o-ease),box-shadow .55s var(--o-ease),
             background-color .55s var(--o-ease)}
.oda-day:hover{transform:translateY(-8px);
  box-shadow:0 46px 80px -44px rgba(0,20,90,.5),0 2px 5px rgba(4,6,15,.04)}

/* Хромовая цифра.
   Задаём ВЫСОТУ, а не ширину: исходники узкие и высокие (258×520),
   и по ширине «1» вырастала на 250px и накрывала заголовок с пилюлей. */
.oda-day__num{position:absolute;top:clamp(-38px,-3.2vw,-26px);left:clamp(18px,2.2vw,28px);
  height:clamp(72px,7.4vw,102px);width:auto;z-index:3;
  filter:drop-shadow(0 18px 32px rgba(0,20,90,.3));
  transition:transform .6s var(--o-ease)}
.oda-day__num img{height:100%;width:auto;display:block}
.oda-day:hover .oda-day__num{transform:translateY(-6px) rotate(-5deg) scale(1.06)}

.oda-day__pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:7px 15px;border-radius:var(--o-r-pill);
  background:rgba(0,71,255,.07);border:1px solid rgba(0,71,255,.16);color:var(--o-blue);
  font-size:12px;font-family:var(--o-font-bold);letter-spacing:.02em;margin-bottom:18px}
.oda-day__pill i{width:6px;height:6px;border-radius:50%;background:var(--o-blue);font-style:normal}

.oda-day__t{font-size:clamp(21px,2.2vw,27px);font-family:var(--o-font-bold);letter-spacing:-.03em;line-height:1.18;
  margin-bottom:22px;max-width:17ch}

.oda-day__l{display:grid;gap:11px;margin-bottom:26px}
.oda-day__l li{position:relative;padding-left:24px;font-size:14.8px;line-height:1.5;
  color:var(--o-gray)}
.oda-day__l li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:2px;
  border-radius:2px;background:var(--o-blue)}

.oda-day__r{margin-top:auto;padding-top:20px;border-top:1px solid var(--o-line)}
.oda-day__r-l{font-size:10.5px;font-family:var(--o-font-bold);letter-spacing:.11em;text-transform:uppercase;
  color:var(--o-gray-2);margin-bottom:10px}
.oda-day__r-t{font-size:15.5px;font-family:var(--o-font-semibold);letter-spacing:-.02em;line-height:1.4}

.oda-day__b{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:14px 16px;
  border-radius:14px;background:rgba(0,71,255,.05);border:1px solid rgba(0,71,255,.11)}
.oda-day__b svg{flex:0 0 18px;margin-top:1px;color:var(--o-blue)}
.oda-day__b p{font-size:13.2px;line-height:1.45;color:var(--o-gray)}
.oda-day__b b{color:var(--o-ink);font-family:var(--o-font-semibold)}

/* ---------- Нижняя плашка ---------- */
.oda-prog__foot{margin-top:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:clamp(24px,3vw,44px);
  padding:clamp(28px,3.4vw,44px);
  border-radius:var(--o-r-xl);
  background:#fff;border:1px solid rgba(4,6,15,.07);
  box-shadow:0 30px 60px -44px rgba(0,20,90,.4)}
.oda-prog__foot-t{font-size:clamp(18px,2vw,25px);font-family:var(--o-font-bold);letter-spacing:-.03em;
  line-height:1.32;max-width:30ch}
.oda-prog__foot-d{font-size:15px;line-height:1.55;color:var(--o-gray);
  margin-top:16px;max-width:44ch}

/* ===== 07-audience ===== */
.oda-aud{position:relative;overflow:clip;isolation:isolate}
.oda-aud__obj{position:absolute;right:1%;top:5%;width:min(22vw,290px);z-index:1;opacity:.5}
@media (max-width:1023px){ .oda-aud__obj{display:none} }
.oda-aud__top{margin-bottom:clamp(40px,5vw,64px);max-width:62ch}
.oda-aud__top h2{margin-bottom:18px}

.oda-aud__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
@media (max-width:1023px){ .oda-aud__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .oda-aud__grid{grid-template-columns:1fr} }

.oda-au{padding:clamp(24px,2.6vw,32px);border-radius:var(--o-r-l);border:1px solid var(--o-line);
  background:#fff;position:relative;overflow:hidden;
  transition:border-color .45s var(--o-ease),transform .45s var(--o-ease),box-shadow .45s var(--o-ease)}
.oda-au::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--o-blue),var(--o-violet));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--o-ease)}
.oda-au:hover{transform:translateY(-5px);border-color:transparent;
  box-shadow:0 26px 54px -32px rgba(10,11,14,.4)}
.oda-au:hover::after{transform:scaleX(1)}

.oda-au__ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--o-soft);margin-bottom:20px;transition:background-color .45s var(--o-ease)}
.oda-au:hover .oda-au__ic{background:rgba(0,71,255,.1)}
.oda-au__t{font-size:clamp(16px,1.6vw,18.5px);font-family:var(--o-font-semibold);letter-spacing:-.02em;line-height:1.35}

.oda-aud__cta{margin-top:clamp(36px,4.4vw,56px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:clamp(24px,3vw,44px);padding:clamp(28px,3.4vw,44px);
  border-radius:var(--o-r-xl);background:#fff;border:1px solid var(--o-line);
  box-shadow:0 24px 56px -40px rgba(4,6,15,.4)}
.oda-aud__cta-t{font-size:clamp(18px,2vw,24px);font-family:var(--o-font-bold);letter-spacing:-.025em;line-height:1.32;
  max-width:26ch}
.oda-aud__cta-d{font-size:15px;line-height:1.55;color:var(--o-gray);margin-top:16px;max-width:40ch}

/* ===== 08-team ===== */
.oda-team{position:relative;overflow:clip;isolation:isolate}
.oda-team__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(24px,4vw,60px);align-items:end;margin-bottom:clamp(40px,5vw,60px)}
@media (max-width:1023px){ .oda-team__top{grid-template-columns:1fr;align-items:start} }
.oda-team__top h2{max-width:16ch}

.oda-team__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,18px)}
@media (max-width:1100px){ .oda-team__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .oda-team__grid{grid-template-columns:repeat(2,1fr)} }

.oda-p{background:#fff;border-radius:var(--o-r-m);padding:14px;
  border:1px solid var(--o-line);
  box-shadow:0 18px 44px -34px rgba(4,6,15,.4);
  transition:transform .45s var(--o-ease),box-shadow .45s var(--o-ease)}
.oda-p:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(4,6,15,.45)}

/* aspect-ratio + object-fit:cover — фото кадрируется, а не растягивается */
.oda-p__av{position:relative;aspect-ratio:1/1.04;border-radius:14px;overflow:hidden;
  margin-bottom:16px;background:linear-gradient(150deg,var(--o-blue),var(--o-violet))}
.oda-p__av img{width:100%;height:100%;object-fit:cover;object-position:center 18%;
  display:block;transition:transform .6s var(--o-ease)}
.oda-p:hover .oda-p__av img{transform:scale(1.045)}
.oda-p__av::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(4,6,15,.28) 100%)}

.oda-p__r{font-size:11.5px;font-family:var(--o-font-bold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--o-blue);margin-bottom:7px}
.oda-p__n{font-size:clamp(16px,1.6vw,19px);font-family:var(--o-font-bold);letter-spacing:-.025em;line-height:1.2}

.oda-team__note{padding:24px 26px;border-radius:var(--o-r-m);background:#fff;
  border:1px solid var(--o-line)}
.oda-team__note p{font-size:clamp(14.5px,1.35vw,16.5px);line-height:1.55;color:var(--o-gray)}
.oda-team__note b{color:var(--o-ink);font-family:var(--o-font-semibold)}

/* ===== 09-faq ===== */
.oda-faq{position:relative;overflow:clip;isolation:isolate}
.oda-faq__in{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(32px,4.5vw,72px);align-items:start}
@media (max-width:1023px){ .oda-faq__in{grid-template-columns:1fr} }

.oda-faq__aside{position:sticky;top:clamp(96px,11vw,128px)}
@media (max-width:1023px){ .oda-faq__aside{position:static} }
.oda-faq__aside h2{margin-bottom:18px;max-width:12ch}
.oda-faq__aside .oda-lead{max-width:32ch;margin-bottom:28px}

.oda-q{border-bottom:1px solid var(--o-line)}
.oda-q:first-child{border-top:1px solid var(--o-line)}
.oda-q__b{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:clamp(20px,2.2vw,26px) 0;text-align:left;
  font-size:clamp(16px,1.75vw,20px);font-family:var(--o-font-semibold);letter-spacing:-.02em;line-height:1.35;
  transition:color .3s var(--o-ease)}
.oda-q__b:hover{color:var(--o-blue)}
.oda-q__ic{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--o-soft);
  display:grid;place-items:center;position:relative;margin-top:.05em;
  transition:background-color .4s var(--o-ease),transform .4s var(--o-ease)}
.oda-q__ic::before,.oda-q__ic::after{content:"";position:absolute;background:var(--o-ink);
  border-radius:2px;transition:transform .4s var(--o-ease),background-color .4s var(--o-ease)}
.oda-q__ic::before{width:12px;height:2px}
.oda-q__ic::after{width:2px;height:12px}
.oda-q.is-open .oda-q__ic{background:var(--o-blue);transform:rotate(180deg)}
.oda-q.is-open .oda-q__ic::before,.oda-q.is-open .oda-q__ic::after{background:#fff}
.oda-q.is-open .oda-q__ic::after{transform:scaleY(0)}

.oda-q__w{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--o-ease)}
.oda-q.is-open .oda-q__w{grid-template-rows:1fr}
.oda-q__c{overflow:hidden}
.oda-q__c p{font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.6;color:var(--o-gray);
  max-width:62ch;padding-bottom:clamp(20px,2.2vw,26px)}
.oda-q__c b{color:var(--o-ink);font-family:var(--o-font-semibold)}

.oda-faq__help{padding:28px;border-radius:var(--o-r-m);background:#fff;border:1px solid var(--o-line);
  box-shadow:0 20px 48px -38px rgba(4,6,15,.4)}
.oda-faq__help-t{font-size:17px;font-family:var(--o-font-bold);letter-spacing:-.02em;margin-bottom:12px}
.oda-faq__help-d{font-size:14.5px;line-height:1.55;color:var(--o-gray);margin-bottom:24px}

/* ===== 10-form ===== */
.oda-form{color:#fff;position:relative;overflow:clip;isolation:isolate}
.oda-form__obj{position:absolute;left:1%;top:8%;width:min(20vw,270px);z-index:1;opacity:.5}
@media (max-width:1279px){ .oda-form__obj{display:none} }
.oda-form__in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:1023px){ .oda-form__in{grid-template-columns:1fr} }

.oda-form h2{max-width:15ch;margin-bottom:20px}
.oda-form__lead{max-width:44ch;margin-bottom:clamp(28px,3.4vw,36px)}

.oda-form__tm{padding:20px 24px;border-radius:var(--o-r-m);border:1px solid var(--o-line-d);
  background:rgba(255,255,255,.05);display:inline-block;margin-bottom:clamp(28px,3.4vw,36px)}
.oda-form__tm-l{font-size:11.5px;font-family:var(--o-font-semibold);letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-bottom:14px}

.oda-form__ul{display:grid;gap:14px}
.oda-form__ul li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.5;
  color:rgba(255,255,255,.75)}
.oda-form__ul b{color:#fff;font-family:var(--o-font-semibold)}
.oda-form__ul-ic{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);margin-top:.05em}

/* ---------- Карточка формы ---------- */
.oda-fc{background:#fff;color:var(--o-ink);border-radius:clamp(20px,2.4vw,30px);
  padding:clamp(26px,3.2vw,44px);box-shadow:0 40px 90px -40px rgba(0,0,0,.7);position:relative;
  overflow:hidden}
.oda-fc__h{margin-bottom:8px;font-size:clamp(21px,2.2vw,27px);font-family:var(--o-font-bold);letter-spacing:-.028em;
  line-height:1.2}
.oda-fc__d{font-size:14.5px;line-height:1.5;color:var(--o-gray);margin-bottom:26px}
.oda-fc__seats{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:var(--o-r-pill);
  background:rgba(255,71,71,.1);color:#E03131;font-size:12.5px;font-family:var(--o-font-semibold);margin-bottom:20px}
.oda-fc__seats i{width:6px;height:6px;border-radius:50%;background:currentColor;font-style:normal;
  animation:oda-pulse 1.8s var(--o-ease) infinite}

/* Стили полей CF7 */
.oda-fc .wpcf7{margin:0}
.oda-fc .wpcf7-form{display:grid;gap:14px}
.oda-fc .wpcf7 p{margin:0}
.oda-fc label{display:block;font-size:13px;font-family:var(--o-font-semibold);letter-spacing:-.005em;
  color:var(--o-ink);margin-bottom:8px}

/* Скрытые поля UTM — не занимают места, но уходят в письмо */
.oda-hidden-fields{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;
  pointer-events:none!important}

/* Чекбокс согласия (если используете вариант с [acceptance]) */
.oda-fc .oda-f-accept{margin-top:2px}
.oda-fc .wpcf7-acceptance .wpcf7-list-item{margin:0}
.oda-fc .wpcf7-acceptance label{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;
  font-family:var(--o-font-medium);line-height:1.45;color:var(--o-gray);margin:0;cursor:pointer}
.oda-fc .wpcf7-acceptance input[type="checkbox"]{flex:0 0 18px;width:18px;height:18px;margin-top:1px;
  accent-color:var(--o-blue);cursor:pointer}
.oda-fc input[type="text"],
.oda-fc input[type="tel"],
.oda-fc input[type="email"]{
  width:100%;height:58px;padding:0 20px;border-radius:16px;border:1.5px solid var(--o-line);
  background:var(--o-soft);font-family:var(--o-font-medium);font-size:16px;
  color:var(--o-ink);outline:none;
  transition:border-color .3s var(--o-ease),background-color .3s var(--o-ease),box-shadow .3s var(--o-ease)}
.oda-fc input::placeholder{color:var(--o-gray-2);font-family:var(--o-font-medium)}
.oda-fc input:focus{border-color:var(--o-blue);background:#fff;
  box-shadow:0 0 0 4px rgba(0,71,255,.11)}
.oda-fc input[aria-invalid="true"]{border-color:#E03131;background:rgba(224,49,49,.04)}

.oda-fc .wpcf7-submit{width:100%;height:62px;border-radius:16px;border:0;cursor:pointer;
  background:var(--o-blue);color:#fff;font-family:var(--o-font-semibold);font-size:17px;
  letter-spacing:-.01em;margin-top:4px;
  box-shadow:0 14px 34px -14px rgba(0,71,255,.75);
  transition:background-color .3s,transform .3s var(--o-ease),box-shadow .3s var(--o-ease)}
.oda-fc .wpcf7-submit:hover{background:var(--o-blue-h);transform:translateY(-2px);
  box-shadow:0 20px 44px -16px rgba(0,71,255,.8)}
.oda-fc .wpcf7-submit:active{transform:translateY(0) scale(.99)}
.oda-fc .wpcf7-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}

.oda-fc .wpcf7-spinner{position:absolute;margin:0 0 0 12px}
.oda-fc .wpcf7-not-valid-tip{display:block;font-size:12.5px;font-family:var(--o-font-medium);color:#E03131;margin-top:7px}
.oda-fc .wpcf7-response-output{margin:16px 0 0!important;padding:13px 16px!important;
  border:0!important;border-radius:12px;font-size:13.5px;line-height:1.45;
  background:rgba(224,49,49,.08);color:#B02525}
.oda-fc form.sent .wpcf7-response-output{background:rgba(37,170,90,.1);color:#1E7A46}

.oda-fc__legal{font-size:12px;line-height:1.45;color:var(--o-gray-2);margin-top:16px;text-align:center}
.oda-fc__legal a{color:var(--o-gray);text-decoration:underline;text-underline-offset:2px}

/* ---------- Экран «спасибо» ---------- */
.oda-ok{position:absolute;inset:0;background:#fff;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:clamp(26px,3.2vw,44px);z-index:5}
.oda-ok.is-on{display:flex}
.oda-ok__ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin-bottom:24px;
  background:rgba(37,170,90,.12)}
.oda-ok__t{font-size:clamp(21px,2.2vw,27px);font-family:var(--o-font-bold);letter-spacing:-.028em;line-height:1.2;
  margin-bottom:12px}
.oda-ok__d{font-size:15px;line-height:1.55;color:var(--o-gray);max-width:34ch;margin-bottom:26px}
.oda-ok__steps{display:grid;gap:10px;width:100%;text-align:left;margin-bottom:24px}
.oda-ok__step{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;
  background:var(--o-soft);font-size:14px;line-height:1.45;color:var(--o-gray)}
.oda-ok__step b{display:block;color:var(--o-ink);font-family:var(--o-font-semibold);margin-bottom:3px}
.oda-ok__step i{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--o-blue);
  color:#fff;font-style:normal;font-size:11px;font-family:var(--o-font-bold);display:grid;place-items:center;
  margin-top:1px}

@media (max-width:767px){
  .oda-form__tm{display:block;width:100%}
}

/* ===== 11-footer ===== */
.oda-end{color:#fff;position:relative;overflow:clip;isolation:isolate}
/* Положительный top: раньше объект уезжал за верх секции и срезался
   по overflow:clip. */
.oda-end__obj{position:absolute;left:50%;top:clamp(14px,2.2vw,34px);transform:translateX(-50%);
  width:min(26vw,300px);z-index:1;opacity:.55}
@media (max-width:767px){ .oda-end__obj{width:min(56vw,220px);opacity:.4} }

/* padding-top/bottom, а НЕ шорткат: элемент несёт ещё и класс .oda-c,
   а шорткат обнулял его горизонтальные отступы и прижимал контент к краю. */
.oda-end__cta{position:relative;z-index:2;text-align:center;
  padding-top:clamp(64px,9vw,130px);padding-bottom:clamp(48px,6vw,80px)}
.oda-end__cta h2{max-width:18ch;margin:0 auto 20px}
.oda-end__cta .oda-lead{max-width:48ch;margin:0 auto clamp(30px,3.6vw,40px)}
.oda-end__acts{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.oda-end__tm{margin-top:clamp(32px,4vw,44px);display:flex;flex-direction:column;align-items:center;gap:12px}
.oda-end__tm-l{font-size:11.5px;font-family:var(--o-font-semibold);letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}

.oda-foot{position:relative;z-index:2;border-top:1px solid var(--o-line-d);
  padding-top:clamp(36px,4.4vw,56px);padding-bottom:clamp(28px,3.4vw,40px)}
.oda-foot__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,3.4vw,48px);margin-bottom:clamp(32px,4vw,48px)}
@media (max-width:860px){ .oda-foot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .oda-foot__grid{grid-template-columns:1fr;gap:28px} }

.oda-foot__logo{display:flex;align-items:center;gap:13px;margin-bottom:20px;color:#fff}
.oda-foot__logo svg{display:block;width:auto;color:currentColor}
.oda-foot__logo .oda-lg-era{height:18px}
.oda-foot__logo .oda-lg-odaa{height:27px}
.oda-foot__x{font-size:14px;font-family:var(--o-font-medium);opacity:.4;line-height:1}
.oda-foot__ab{font-size:14px;line-height:1.55;color:rgba(255,255,255,.62);max-width:36ch}

.oda-foot__h{font-size:12px;font-family:var(--o-font-semibold);letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:16px}
.oda-foot__l{display:grid;gap:11px}
.oda-foot__l a{font-size:14.5px;color:rgba(255,255,255,.7);transition:color .3s var(--o-ease)}
.oda-foot__l a:hover{color:#fff}

.oda-foot__bot{padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--o-line-d);
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
.oda-foot__cp{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.55);max-width:64ch}
.oda-foot__docs{display:flex;flex-wrap:wrap;gap:8px 20px}
.oda-foot__docs a{font-size:12.5px;color:rgba(255,255,255,.68);text-decoration:underline;
  text-underline-offset:3px;transition:color .3s var(--o-ease)}
.oda-foot__docs a:hover{color:#fff}