/* =========================================================
   Владимир Арончик — персональный сайт спикера
   Светлая тема · параллакс · плавные анимации
   ========================================================= */

:root{
  --ink:      #0e1b2c;
  --ink-2:    #26384d;
  --muted:    #64778c;
  --line:     #e3eaf2;
  --bg:       #f6f9fc;
  --bg-2:     #eef4fb;
  --card:     #ffffff;
  --accent:   #0f5fa8;
  --accent-2: #2f9be0;
  --accent-3: #7ec8f0;
  --gold:     #b98a2e;

  --shadow-s: 0 2px 10px rgba(14,45,80,.05);
  --shadow-m: 0 12px 34px rgba(14,45,80,.08);
  --shadow-l: 0 30px 70px rgba(14,45,80,.13);

  --r:  18px;
  --r-l: 28px;
  --wrap: 1180px;

  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --serif:'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

  --ease: cubic-bezier(.16,.84,.34,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ margin:0; line-height:1.16; letter-spacing:-.02em; font-weight:700; }
p{ margin:0; }

.wrap{ width:min(100% - 44px, var(--wrap)); margin-inline:auto; }

/* ---------- Фактура: зерно и световое пятно ----------
   Зерно убирает «пластиковость» плоских градиентов,
   пятно за курсором даёт ощущение объёмного света. */
/* Статичное — анимировать полноэкранный слой с multiply слишком дорого,
   а «плёночная» фактура читается и без движения. */
.grain{
  position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.34;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

.spotlight{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity .8s ease;
  background:radial-gradient(560px circle at var(--sx,50%) var(--sy,40%),
    rgba(120,190,245,.16), rgba(120,190,245,.05) 42%, transparent 68%);
}
.spotlight.is-on{ opacity:1; }

/* ---------- Прогресс ---------- */
.progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:120; pointer-events:none; }
.progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
}

/* ---------- Навигация ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.nav--stuck{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(1.6) blur(16px);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  box-shadow:0 1px 0 var(--line), var(--shadow-s);
}
.nav__inner{
  width:min(100% - 44px, var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; gap:26px;
  height:74px;
}
.nav__brand{ display:flex; align-items:center; gap:13px; margin-right:auto; }
.nav__mark{
  width:40px; height:40px; flex:none; position:relative;
  border-radius:12px; overflow:hidden;
  box-shadow:0 8px 20px -6px rgba(15,95,168,.5), 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.nav__mark svg,
.nav__mark img{ width:100%; height:100%; display:block; }
/* Мягкий блик по знаку — оживает при наведении на логотип */
.nav__mark::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(125deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  transform:translateX(-130%); transition:transform .75s var(--ease);
}
.nav__brand:hover .nav__mark{
  transform:translateY(-2px) rotate(-3deg);
  box-shadow:0 12px 26px -6px rgba(15,95,168,.55), 0 0 0 1px rgba(255,255,255,.75);
}
.nav__brand:hover .nav__mark::after{ transform:translateX(130%); }

.nav__lockup{ display:flex; flex-direction:column; line-height:1.15; }
.nav__lockup b{ font-weight:700; font-size:15.5px; letter-spacing:-.015em; }
.nav__lockup i{
  font-style:normal; font-size:10px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  margin-top:3px; transition:color .35s var(--ease);
}
.nav__brand:hover .nav__lockup i{ color:var(--accent); }
.nav__links{ display:flex; gap:28px; }
.nav__links a{
  font-size:15px; font-weight:500; color:var(--ink-2);
  position:relative; padding:6px 0; transition:color .25s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:2px; transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--accent); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ width:100%; }
.nav__links a.is-active{ color:var(--accent); }
.nav__burger{ display:none; }

/* ---------- Кнопки ---------- */
.btn{
  --bg1:var(--accent); --bg2:var(--accent-2);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px; flex:none;
  font-weight:600; font-size:15.5px; color:#fff; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  box-shadow:0 10px 26px rgba(15,95,168,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s;
  position:relative; overflow:hidden;
}
.btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(15,95,168,.34); }
.btn:hover::after{ transform:translateX(120%); }
.btn--sm{ padding:10px 20px; font-size:14.5px; }
.btn--ghost{
  background:transparent; color:var(--accent);
  border:1.5px solid rgba(15,95,168,.28); box-shadow:none;
}
.btn--ghost:hover{ background:rgba(15,95,168,.06); box-shadow:0 10px 24px rgba(15,95,168,.12); }

/* ---------- Общие блоки секций ---------- */
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.section{ position:relative; padding:118px 0; overflow:hidden; }
.section--tint{
  background:
    radial-gradient(1000px 480px at 12% 0%, #ffffff 0%, transparent 60%),
    linear-gradient(180deg,var(--bg-2),#f4f9fe);
  border-block:1px solid var(--line);
}
.section--slim{ padding:70px 0; }
.sec-head{ max-width:760px; margin-bottom:64px; }
.sec-head h2{ font-size:clamp(30px,4vw,46px); }
.sec-sub{ margin-top:18px; color:var(--muted); font-size:18px; max-width:640px; }
.sub-head{
  margin:86px 0 34px; font-size:15px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
  display:flex; align-items:center; gap:16px;
}
.sub-head::after{ content:''; flex:1; height:1px; background:var(--line); }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:130px 0 90px; overflow:hidden;
  background:linear-gradient(175deg,#ffffff 0%,#f2f8fe 55%,var(--bg) 100%);
}
.hero__bg{ position:absolute; inset:-15% -10%; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform; }
.blob--1{ width:620px; height:620px; top:-8%; right:-6%;
  background:radial-gradient(circle at 35% 35%,#bfe1f8,#e6f2fc 65%,transparent 72%); }
.blob--2{ width:480px; height:480px; bottom:-14%; left:-8%;
  background:radial-gradient(circle at 50% 50%,#cfe4f7,#eef5fd 60%,transparent 70%); }
.blob--3{ width:340px; height:340px; top:38%; left:44%;
  background:radial-gradient(circle at 50% 50%,#e5eeff,#f4f9ff 60%,transparent 70%); opacity:.7; }
.blob--c{ width:640px; height:640px; top:-18%; right:-12%; position:absolute; z-index:0;
  background:radial-gradient(circle at 40% 40%,#d7eafa,#f0f7fd 60%,transparent 70%);
  filter:blur(70px); opacity:.75; pointer-events:none; }
/* Аурора — медленно дышащие цветовые пятна поверх градиента */
.aurora{ position:absolute; inset:0; overflow:hidden; opacity:.85; }
.aurora__l{
  position:absolute; display:block; border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
  filter:blur(58px); will-change:transform;
  mix-blend-mode:multiply;
}
.aurora__l--1{
  width:52vw; height:52vw; top:-14%; right:-8%;
  background:radial-gradient(circle at 40% 40%, rgba(150,205,245,.55), rgba(198,228,250,.25) 55%, transparent 72%);
  animation:aur1 26s ease-in-out infinite;
}
.aurora__l--2{
  width:44vw; height:44vw; bottom:-18%; left:-10%;
  background:radial-gradient(circle at 55% 45%, rgba(178,206,246,.5), rgba(214,232,252,.22) 58%, transparent 74%);
  animation:aur2 32s ease-in-out infinite;
}
.aurora__l--3{
  width:34vw; height:34vw; top:26%; left:38%;
  background:radial-gradient(circle at 50% 50%, rgba(226,214,246,.42), rgba(240,236,252,.18) 60%, transparent 75%);
  animation:aur3 38s ease-in-out infinite;
}
@keyframes aur1{
  0%,100%{ transform:translate3d(0,0,0) scale(1) rotate(0deg) }
  50%    { transform:translate3d(-5%,6%,0) scale(1.14) rotate(22deg) }
}
@keyframes aur2{
  0%,100%{ transform:translate3d(0,0,0) scale(1.06) rotate(0deg) }
  50%    { transform:translate3d(7%,-5%,0) scale(.92) rotate(-18deg) }
}
@keyframes aur3{
  0%,100%{ transform:translate3d(0,0,0) scale(.95) rotate(0deg) }
  50%    { transform:translate3d(-8%,-7%,0) scale(1.2) rotate(30deg) }
}

/* Тонкие световые лучи сверху */
.rays{
  position:absolute; inset:-10% 0 auto 0; height:70%; opacity:.5;
  background:
    linear-gradient(102deg, transparent 46%, rgba(255,255,255,.85) 49%, transparent 52%),
    linear-gradient(97deg,  transparent 62%, rgba(255,255,255,.6) 64.5%, transparent 67%),
    linear-gradient(110deg, transparent 28%, rgba(255,255,255,.5) 30%, transparent 33%);
  mask-image:linear-gradient(#000, transparent 78%);
  -webkit-mask-image:linear-gradient(#000, transparent 78%);
  animation:rays 14s ease-in-out infinite;
}
@keyframes rays{ 0%,100%{ opacity:.35 } 50%{ opacity:.62 } }

.grid-lines{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(15,95,168,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,95,168,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
}
.deco{
  position:absolute; width:420px; height:420px; border-radius:50%; z-index:0;
  filter:blur(60px); opacity:.6; pointer-events:none;
  background:radial-gradient(circle,#d5e9fa,transparent 68%);
}
.deco--r{ top:8%; right:-140px; }
.deco--l{ bottom:4%; left:-160px; }

.hero__inner{
  position:relative; z-index:1;
  width:min(100% - 44px, var(--wrap)); margin-inline:auto;
  display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center;
}
.hero__title{
  font-size:clamp(40px,5.6vw,72px); letter-spacing:-.035em; line-height:1.03;
}
.hero__first{ display:block; font-size:.47em; font-weight:600; color:var(--ink-2); letter-spacing:-.01em; margin-bottom:6px; }
.hero__last{
  display:block; font-family:var(--serif); font-weight:600; letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--ink) 10%,var(--accent) 60%,var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{ margin-top:26px; font-size:19px; color:var(--ink-2); max-width:520px; }
.hero__lead b{ color:var(--accent); font-weight:700; }

.hero__facts{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.fact{
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 20px; min-width:132px;
  backdrop-filter:blur(8px); box-shadow:var(--shadow-s);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.fact:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.fact b{
  display:block; font-size:28px; font-weight:800; letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fact span{ font-size:13.5px; color:var(--muted); line-height:1.4; display:block; margin-top:2px; }

.hero__cta{ display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; }

/* фото */
.hero__photo{
  position:relative; justify-self:center; will-change:transform;
  display:flex; align-items:center; gap:22px;
}
.photo-stack{ position:relative; flex:none; width:min(320px, 100%); }
/* Цветовая подложка под портретом вместо колец:
   плашка фирменного градиента со смещением — как цветной картон под снимком. */
.photo-accent{
  position:absolute; z-index:0; pointer-events:none;
  inset:7% -7% -5% 9%;
  border-radius:32px;
  background:linear-gradient(152deg, var(--accent) 0%, #1a76c4 42%, var(--accent-2) 78%, #7ec8f0 100%);
  transform:rotate(-3.6deg);
  box-shadow:0 46px 90px -34px rgba(15,95,168,.75);
}
/* Тонкая золотая линия с другой стороны — держит композицию */
.photo-accent::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(233,196,124,.55);
  transform:translate(9px,9px);
}
/* Мягкое свечение вокруг всей группы */
.photo-glow{
  position:absolute; z-index:0; pointer-events:none;
  inset:-12% -10% -8%;
  background:radial-gradient(ellipse at 52% 46%, rgba(47,155,224,.28), transparent 68%);
  filter:blur(34px);
  animation:pulse 15s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.04);opacity:1} }

.photo-frame{
  position:relative; z-index:1; border-radius:var(--r-l); overflow:hidden;
  background:linear-gradient(170deg,#ffffff,#eaf3fb);
  box-shadow:
    0 40px 90px -24px rgba(14,45,80,.32),
    0 8px 26px -8px rgba(14,45,80,.14),
    0 0 0 1px rgba(255,255,255,.75);
  max-width:410px;
  transform-style:preserve-3d;
  will-change:transform;
  /* Переход только на возврат в покой: во время движения угол
     интерполируется в JS покадрово, иначе transition перезапускается
     на каждом событии мыши и картинка «дёргается». */
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.photo-frame.is-tracking{ transition:none; }
.photo-frame::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(200deg, rgba(255,255,255,.28), transparent 45%);
  pointer-events:none;
}
.photo-frame img{ width:100%; mix-blend-mode:multiply; }

/* Цитата-миссия справа от фото — рукописный шрифт, «записка» */
.hero-quote{
  flex:1 1 0; min-width:0; max-width:220px; margin:0; padding:20px 22px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 18px 40px -20px rgba(14,45,80,.32), 0 0 0 1px rgba(255,255,255,.6);
  font-family:var(--hand); font-weight:700;
  font-size:clamp(20px, 1.55vw, 25px); line-height:1.26; letter-spacing:.005em;
  color:var(--ink); text-align:center; position:relative; z-index:2;
}
.hero-quote::before{
  content:''; display:block; width:44px; height:2px; margin:0 auto 14px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}


.scroll-hint{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.scroll-hint span{
  width:22px; height:36px; border:1.5px solid rgba(15,95,168,.3); border-radius:14px;
  position:relative;
}
.scroll-hint span::after{
  content:''; position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px;
  background:var(--accent); transform:translateX(-50%);
  animation:wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{ 0%{opacity:0;top:7px} 35%{opacity:1} 100%{opacity:0;top:20px} }

/* ---------- Бегущая строка ---------- */
.marquee{
  overflow:hidden; background:linear-gradient(90deg,var(--accent),#1a76c4 50%,var(--accent-2));
  padding:15px 0; position:relative; z-index:2;
}
.marquee__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:slide 42s linear infinite;
  color:#fff; font-size:14px; font-weight:600; letter-spacing:.05em; white-space:nowrap;
}
.marquee__track i{ color:rgba(255,255,255,.5); font-style:normal; font-size:9px; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- Заказчики и партнёры ---------- */
.partners__label{
  text-align:center; margin:0 0 28px;
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.partners__grid{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:16px 34px;
}
.plogo{
  font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:.005em;
  color:var(--ink-2); opacity:.66; white-space:nowrap;
  transition:opacity .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.plogo:hover{ opacity:1; color:var(--accent); transform:translateY(-2px); }

/* ---------- Обо мне: авторские методики ---------- */
.about-brands{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:22px; margin-bottom:14px;
}
.brandcard{
  position:relative; padding:28px 30px 26px 34px; border-radius:var(--r-l); overflow:hidden;
  background:linear-gradient(162deg, #ffffff, #eef4fb);
  border:1px solid var(--line); box-shadow:var(--shadow-m);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.brandcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-l); }
.brandcard::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
}
.brandcard__tag{
  display:inline-block; margin-bottom:12px;
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.brandcard h3{
  font-family:var(--serif); font-weight:600; font-size:23px; color:var(--ink); margin-bottom:12px;
}
.brandcard p{ color:var(--ink-2); font-size:16px; }

.about-ethic{
  margin-top:26px; padding:20px 26px; border-radius:var(--r);
  background:var(--bg-2); border:1px solid var(--line);
  color:var(--ink-2); font-size:16px;
}
.about-ethic b{ color:var(--ink); }

/* ---------- Бегущая строка отзывов ---------- */
.reviews-strip{
  position:relative; z-index:2; padding:44px 0 48px;
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  border-bottom:1px solid var(--line);
}
.reviews-strip__label{
  text-align:center; margin:0 0 24px;
  font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
}
.reviews-strip .reviews-band{ margin-top:0; }

.reviews-band{
  margin-top:40px; display:flex; flex-direction:column; gap:18px;
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.rev-row{ overflow:hidden; }
.rev-track{
  display:flex; align-items:stretch; gap:18px; width:max-content;
  animation:slide 64s linear infinite; will-change:transform;
}
.rev-row--rtl .rev-track{ animation-direction:reverse; animation-duration:72s; }
.reviews-band:hover .rev-track{ animation-play-state:paused; }
.rev{
  flex:none; width:min(80vw, 430px); margin:0;
  display:flex; flex-direction:column; gap:12px; justify-content:space-between;
  padding:22px 26px; border-radius:var(--r);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-s);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}
.rev:hover{ box-shadow:var(--shadow-m); transform:translateY(-3px); border-color:var(--accent-3); }
.rev__q{
  margin:0; font-family:var(--serif); font-size:16.5px; line-height:1.5; color:var(--ink-2);
}
.rev__q::before{ content:'«'; color:var(--accent-2); }
.rev__q::after{ content:'»'; color:var(--accent-2); }
.rev__cite{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.01em; color:var(--accent);
}
.rev__cite::before{
  content:''; width:18px; height:2px; border-radius:2px; background:var(--gold); flex:none;
}

/* ---------- Таймлайн ---------- */
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{
  content:''; position:absolute; left:29px; top:12px; bottom:12px; width:2px;
  background:linear-gradient(180deg,var(--accent-3),var(--line));
}
.tl{ display:grid; grid-template-columns:60px 1fr; gap:30px; padding-bottom:44px; position:relative; }
.tl:last-child{ padding-bottom:0; }
.tl__num{
  width:60px; height:60px; border-radius:50%; flex:none; z-index:1;
  display:grid; place-items:center; font-weight:800; font-size:16px; color:#fff;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 24px rgba(15,95,168,.26), 0 0 0 7px var(--bg);
  transition:transform .4s var(--ease);
}
.tl:hover .tl__num{ transform:scale(1.08) rotate(-4deg); }
.tl__body{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 30px; box-shadow:var(--shadow-s);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.tl:hover .tl__body{ transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:#cfe2f4; }
.tl__body h3{ font-size:21px; margin-bottom:10px; }
.tl__body p{ color:var(--muted); font-size:16.5px; }
.flags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.flags span{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; padding:6px 13px 6px 10px; border-radius:999px;
  background:var(--bg-2); color:var(--ink-2); border:1px solid var(--line); font-weight:500;
}
.flags .flag{
  width:21px; height:14px; border-radius:2px; flex:none;
  box-shadow:0 0 0 1px rgba(14,45,80,.14);
}

/* ---------- KPI ---------- */
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:38px 32px; box-shadow:var(--shadow-s); position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.kpi::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.kpi:hover{ transform:translateY(-6px); box-shadow:var(--shadow-m); }
.kpi:hover::before{ transform:scaleX(1); }
.kpi b{
  display:block; font-size:clamp(38px,4.6vw,54px); font-weight:800; letter-spacing:-.04em; line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kpi > span{ display:block; margin-top:14px; color:var(--muted); font-size:15.5px; line-height:1.5; }

/* ---------- Карточки экспертизы ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px; box-shadow:var(--shadow-s); position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.card::after{
  content:''; position:absolute; inset:auto -40% -60% auto; width:180px; height:180px;
  background:radial-gradient(circle,rgba(47,155,224,.16),transparent 68%);
  opacity:0; transition:opacity .45s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-m); border-color:#cfe2f4; }
.card:hover::after{ opacity:1; }
.card__ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  font-size:19px; color:var(--accent); margin-bottom:18px;
  background:linear-gradient(140deg,#e8f3fc,#dcecfa); border:1px solid #d5e8f8;
  transition:transform .4s var(--ease);
}
.card:hover .card__ico{ transform:rotate(-8deg) scale(1.06); }
.card h4{ font-size:18px; margin-bottom:9px; }
.card p{ color:var(--muted); font-size:15.5px; }

/* ---------- Программы ---------- */
.programs{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.prog{
  display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:34px 34px 28px; box-shadow:var(--shadow-s);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.prog::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease);
}
.prog:hover{ transform:translateY(-6px); box-shadow:var(--shadow-l); border-color:#cfe2f4; }
.prog:hover::before{ transform:scaleY(1); }
.prog__n{
  font-family:var(--serif); font-size:44px; line-height:1; font-weight:500;
  color:#cfe1f2; transition:color .4s var(--ease);
}
.prog:hover .prog__n{ color:var(--accent-2); }
.prog h3{ font-size:20px; flex:1; }
.prog--feature{ grid-column:1 / -1; }
.prog--feature h3{ flex:none; font-size:22px; }
.prog__desc{ margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.55; }
.prog__go{
  font-size:14px; font-weight:600; color:var(--accent);
  opacity:0; transform:translateX(-8px); transition:all .4s var(--ease);
}
.prog:hover .prog__go{ opacity:1; transform:translateX(0); }

/* ---------- Награды ---------- */
.awards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.award{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px; box-shadow:var(--shadow-s); position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.award:hover{ transform:translateY(-6px) rotate(-.5deg); box-shadow:var(--shadow-m); }
.award__star{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  font-size:19px; color:var(--gold); margin-bottom:16px;
  background:linear-gradient(140deg,#fdf5e4,#f9ecd2); border:1px solid #f0e0c0;
}
.award h4{ font-size:17.5px; margin-bottom:8px; }
.award p{ color:var(--muted); font-size:15px; }

/* ---------- Лента публикаций ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.chip{
  font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  padding:10px 20px; border-radius:999px; color:var(--ink-2);
  background:#fff; border:1px solid var(--line);
  transition:all .3s var(--ease);
}
.chip:hover{ border-color:var(--accent-3); color:var(--accent); transform:translateY(-2px); }
.chip.is-on{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 20px rgba(15,95,168,.26);
}

.feed{ display:flex; flex-direction:column; gap:16px; position:relative; }
.news{
  display:grid; grid-template-columns:250px 1fr; gap:28px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:16px 30px 16px 16px; box-shadow:var(--shadow-s); position:relative; overflow:hidden;
}
.news::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:2;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  transform:scaleY(0); transform-origin:center; transition:transform .45s var(--ease);
}
.news:hover{ transform:translateY(-4px); box-shadow:var(--shadow-l); }
.news:hover::before{ transform:scaleY(1); }
.news.is-hidden{ display:none; }

.news__media{
  position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/10;
  background:linear-gradient(140deg,#e9f2fa,#dbe9f6);
  box-shadow:0 8px 22px -10px rgba(14,45,80,.35);
}
.news__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(255,255,255,.22), transparent 46%);
}
.news__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), filter .6s var(--ease);
  filter:saturate(.92);
}
.news:hover .news__media img{ transform:scale(1.06); filter:saturate(1.05); }

.news__meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:11px; }
.news__meta time{ font-size:13.5px; color:var(--muted); font-weight:500; }
.news__tag{
  display:inline-block; padding:4px 12px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); background:var(--bg-2); border:1px solid #dcebf8;
}
.news__body h3{
  font-size:19.5px; line-height:1.35;
  transition:color .35s var(--ease);
}
.news:hover .news__body h3{ color:var(--accent); }
.news__src{
  margin-top:12px; font-size:14px; color:var(--muted);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.news__go{
  font-weight:600; color:var(--accent);
  opacity:0; transform:translateX(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.news:hover .news__go{ opacity:1; transform:translateX(0); }

.feed__empty{ margin-top:26px; color:var(--muted); }

.profiles{ margin-top:52px; }
.profiles__label{
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px;
}
.profiles__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.profile{
  display:block; padding:22px 26px; border-radius:var(--r);
  background:linear-gradient(140deg,#ffffff,#f2f8fd);
  border:1px solid var(--line); box-shadow:var(--shadow-s);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.profile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); border-color:#cfe2f4; }
.profile b{ display:block; font-size:17px; }
.profile span{ display:block; margin-top:6px; font-size:14px; color:var(--accent); font-weight:600; }

/* ---------- И не только ---------- */
.also{
  background:linear-gradient(135deg,#ffffff,#f1f7fd);
  border:1px solid var(--line); border-radius:var(--r-l);
  padding:44px 46px; box-shadow:var(--shadow-s);
  display:flex; align-items:center; gap:38px; flex-wrap:wrap;
}
.also h3{ font-family:var(--serif); font-size:30px; font-weight:500; flex:none; }
.also__tags{ display:flex; flex-wrap:wrap; gap:10px; }
.also__tags span{
  padding:10px 18px; border-radius:999px; font-size:14.5px; font-weight:500;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  transition:transform .3s var(--ease), border-color .3s, color .3s;
}
.also__tags span:hover{ transform:translateY(-3px); border-color:var(--accent-3); color:var(--accent); }

/* ---------- Контакты ---------- */
.contact{ overflow:hidden; }
.contact .wrap{ position:relative; z-index:1; }
.contact__box{
  background:var(--card); border:1px solid var(--line); border-radius:32px;
  padding:60px; box-shadow:var(--shadow-l);
  display:grid; grid-template-columns:1.25fr .75fr; gap:52px; align-items:center;
}
.contact__box h2{ font-size:clamp(28px,3.4vw,42px); }
.phone{
  display:inline-block; margin:26px 0 10px;
  font-size:clamp(28px,3.6vw,42px); font-weight:800; letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:transform .35s var(--ease);
}
.phone:hover{ transform:translateX(6px); }
.contact__note{ color:var(--muted); font-size:15px; margin-bottom:28px; }
.contact__qr{
  justify-self:center; text-align:center;
  background:linear-gradient(150deg,#ffffff,#eff6fd);
  border:1px solid var(--line); border-radius:var(--r-l);
  padding:22px; box-shadow:var(--shadow-m); max-width:270px;
  transition:transform .5s var(--ease); transform-style:preserve-3d;
}
.contact__qr img{ border-radius:12px; }
.contact__qr p{ margin-top:14px; font-size:13.5px; color:var(--muted); }

/* ---------- Подвал ---------- */
.footer{ border-top:1px solid var(--line); background:#fff; padding:32px 0; }
.footer__inner{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:14.5px; color:var(--muted);
}

/* =========================================================
   Премиальный слой: свет, золото, глубина
   ========================================================= */

/* --- Золотая линия под надзаголовком секции --- */
.sec-head .eyebrow{ position:relative; display:inline-block; padding-bottom:12px; }
.sec-head .eyebrow::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg, rgba(185,138,46,.75), rgba(185,138,46,.12) 70%, transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease) .25s;
}
.sec-head.is-in .eyebrow::after{ transform:scaleX(1); }

/* --- Свет, следующий за курсором внутри карточек --- */
.card, .award, .prog, .news, .kpi, .profile, .tl__body{ isolation:isolate; }
.card::before, .award::before, .kpi::before, .news__glow, .prog__glow{ pointer-events:none; }
.glow-host{ position:relative; }
.glow-host::after{
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  opacity:0; transition:opacity .45s var(--ease);
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),
    rgba(47,155,224,.14), transparent 62%);
}
.glow-host:hover::after{ opacity:1; }
.glow-host > *{ position:relative; z-index:1; }

/* --- Градиентная рамка: в покое почти незаметна, на ховере оживает --- */
.card, .award, .prog, .news, .profile{
  background-image:
    linear-gradient(var(--card),var(--card)),
    linear-gradient(140deg, rgba(210,226,240,.9), rgba(226,236,246,.7) 55%, rgba(214,228,242,.9));
  background-origin:border-box;
  background-clip:padding-box, border-box;
  border-color:transparent;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background-image .6s var(--ease);
}
.card:hover, .award:hover, .prog:hover, .news:hover, .profile:hover{
  background-image:
    linear-gradient(var(--card),var(--card)),
    linear-gradient(140deg, rgba(47,155,224,.55), rgba(126,200,240,.35) 45%, rgba(185,138,46,.42));
}

/* --- Заполняемая шкала времени --- */
.timeline::after{
  content:''; position:absolute; left:29px; top:12px; width:2px;
  height:var(--fill,0%);
  background:linear-gradient(180deg,var(--accent),var(--accent-2),var(--accent-3));
  box-shadow:0 0 12px rgba(47,155,224,.6);
  transition:height .25s linear;
}

/* --- Магнитные кнопки --- */
.btn{ will-change:transform; }
.btn.is-magnetic{
  transform:translate3d(var(--bx,0px), calc(var(--by,0px) - 3px), 0);
  transition:transform .18s ease-out, box-shadow .3s var(--ease);
}

/* --- Ореол под ключевыми цифрами --- */
.kpi b, .fact b{ position:relative; }
.kpi::after{
  content:''; position:absolute; right:-30px; top:-30px; width:150px; height:150px;
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(47,155,224,.16), transparent 66%);
  transition:opacity .5s var(--ease);
}
.kpi:hover::after{ opacity:1; }

/* --- Бегущая строка: мягкие края и блик --- */
.marquee{
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  box-shadow:0 12px 34px -14px rgba(15,95,168,.55);
}
.marquee::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  animation:marqueeSheen 7s ease-in-out infinite;
}
@keyframes marqueeSheen{
  0%{ transform:translateX(-100%) } 45%,100%{ transform:translateX(100%) }
}

/* --- Кнопка контакта: пульсирующий ореол --- */
.contact__box{ position:relative; overflow:hidden; }
.contact__box::before{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  right:-160px; bottom:-220px; pointer-events:none;
  background:radial-gradient(circle, rgba(47,155,224,.14), transparent 65%);
  animation:pulse 9s ease-in-out infinite;
}

/* --- Разделительный орнамент --- */
.section--tint::before{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(680px, 70%); height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(185,138,46,.5), transparent);
}

/* ---------- Появление при скролле ---------- */
.reveal{
  opacity:0; transform:translateY(30px) scale(.985); filter:blur(6px);
  transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
  transition-delay:calc(var(--dl,0) * 95ms);
}
.reveal.is-in{ opacity:1; transform:none; filter:none; }

/* ---------- Адаптив ---------- */
@media (max-width:980px){
  .hero{ padding-top:110px; }
  .hero__inner{ grid-template-columns:1fr; gap:48px; text-align:left; }
  .hero__photo{ order:-1; max-width:360px; flex-direction:column; align-items:center; gap:20px; }
  .hero-quote{ max-width:min(340px, 100%); }
  .spotlight{ display:none; }
  .kpis, .cards, .awards{ grid-template-columns:repeat(2,1fr); }
  .programs{ grid-template-columns:1fr; }
  .profiles__row{ grid-template-columns:1fr; }
  .contact__box{ grid-template-columns:1fr; padding:42px 34px; }
  .nav__links{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; gap:0;
    background:rgba(255,255,255,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line); padding:8px 22px 20px;
    transform:translateY(-140%); transition:transform .45s var(--ease);
    box-shadow:var(--shadow-m);
  }
  .nav__links.is-open{ transform:translateY(0); }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--line); }
  .nav__burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; border-radius:12px; padding:0 10px;
    background:#fff; border:1px solid var(--line); cursor:pointer;
  }
  .nav__burger span{ height:2px; background:var(--ink); border-radius:2px; transition:.35s var(--ease); }
  .nav__burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
  .btn--sm{ display:none; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .section{ padding:78px 0; }
  .sec-head{ margin-bottom:44px; }
  .kpis, .cards, .awards{ grid-template-columns:1fr; }
  .tl{ grid-template-columns:46px 1fr; gap:18px; }
  .tl__num{ width:46px; height:46px; font-size:14px; box-shadow:0 8px 18px rgba(15,95,168,.24), 0 0 0 5px var(--bg); }
  .timeline::before{ left:22px; }
  .tl__body{ padding:22px; }
  .also{ padding:32px 26px; gap:22px; }
  .news{ grid-template-columns:1fr; gap:16px; padding:16px 16px 22px; }
  .news__media{ aspect-ratio:16/9; }
  .news__body{ padding:0 6px; }
  .news__body h3{ font-size:17.5px; }
  .news__go{ opacity:1; transform:none; }
  .contact__box{ padding:32px 24px; }
  .grain{ opacity:.32; }
  .hero__facts{ gap:10px; }
  .fact{ min-width:calc(50% - 5px); padding:14px 16px; }
}

/* ---------- Уважение к настройкам движения ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; filter:none; }
  .grain, .spotlight, .rays{ display:none; }
  .photo-glow{ animation:none; }
  .marquee__track{ animation:none; }
}