/* Йордан Тотев - дигитална визитка. Светла палитра от цвета на очите (проба v2, 11.2026).
   Всяка глава взима идентичността на своята организация. */
@font-face { font-family: "Oswald"; src: url("../assets/fonts/Oswald-Variable.ttf") format("truetype"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/Manrope-Variable.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  /* гама „ирис“ */
  --g50: #F6F7F1; --g100: #E9EDDD; --g200: #D2DABB; --g300: #AEBB88; --g400: #8A9A5B;
  --g500: #6B7B40; --g600: #55632F; --g700: #414C25; --g800: #2D351B; --g900: #1C2112;
  --gold: #B08A3E;
  --paper: var(--g50); --ink: var(--g900); --ink-2: var(--g700); --ink-3: var(--g600);
  --accent: var(--g500); --accent-ink: #F6F7F1; --line: rgba(28, 33, 18, .12);
  --glass: rgba(246, 247, 241, .78);
  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "Manrope", system-ui, -apple-system, sans-serif;
  --gutter: 20px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
body[data-theme="buditel"] { --accent: #0068FF; --accent-ink: #fff; }
body[data-theme="podari"] { --accent: #C73378; --accent-ink: #fff; }
body[data-theme="mechki"] { --accent: #F8B224; --accent-ink: #111; }
body[data-theme="shkola"] { --accent: #EC212A; --accent-ink: #fff; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; font-feature-settings: "locl" 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--g500); color: var(--g50); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- фон ---------- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 62% at 30% 112%, rgba(246, 247, 241, .94) 18%, rgba(246, 247, 241, 0) 62%); transition: opacity .8s; }
body:not([data-theme="yt"]) .veil, body[data-theme="yt"].past-hero .veil { opacity: 0; }
.grain { position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(3) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } }

/* ---------- интро ---------- */
.intro { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--g50); pointer-events: none; }
.intro-mark { width: 84px; height: auto; fill: transparent; stroke: var(--g500); stroke-width: .6; }
.intro-mark path { stroke-dasharray: 200; stroke-dashoffset: 200; }

/* ---------- лента и прогрес ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 25; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); transition: background .6s; }
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) var(--gutter) 14px; pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; opacity: 0; transition: opacity .4s;
  background: linear-gradient(180deg, rgba(246, 247, 241, .92) 0%, rgba(246, 247, 241, .65) 60%, rgba(246, 247, 241, 0) 100%); }
.bar.solid::before { opacity: 1; }
.bar-mark { display: block; width: 34px; padding: 4px 0; flex: none; }
.bar-mark svg { width: 100%; height: auto; fill: var(--g500); transition: fill .4s; }
.bar-org { flex: 1; display: flex; justify-content: center; height: 26px; opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; }
.bar-org.on { opacity: 1; transform: none; }
.bar-org img { height: 100%; width: auto; }
.bar-right { display: flex; gap: 8px; flex: none; }
.pill { appearance: none; border: 1px solid var(--line); background: rgba(246, 247, 241, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; padding: 8px 14px; font: 700 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color .3s, background .3s; min-height: 36px; color: var(--g800); }
.pill:hover { border-color: var(--accent); }
.lang { min-width: 44px; }
main { position: relative; z-index: 3; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 96px var(--gutter) 28px; position: relative; }
.hero-inner { max-width: 620px; }
/* редакционен портрет: голяма арка, мек фон в зеленото на очите, тънка златиста рамка, лек 3D наклон */
.portrait { --pw: min(64vw, 290px); margin: 0 0 26px; width: var(--pw); aspect-ratio: 3 / 4; position: relative; perspective: 1100px; opacity: 0; transform: translateY(14px); }
.portrait-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--ease); will-change: transform; }
.portrait-arch { position: absolute; inset: 0; border-radius: 999px 999px 18px 18px; overflow: hidden; transform: translateZ(0);
  background: radial-gradient(90% 60% at 50% 30%, rgba(246, 247, 241, .75) 0%, rgba(246, 247, 241, 0) 70%), linear-gradient(180deg, var(--g100) 0%, var(--g200) 55%, var(--g300) 100%);
  box-shadow: 0 34px 70px -18px rgba(45, 53, 27, .38), 0 10px 24px -10px rgba(45, 53, 27, .25); }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; opacity: 0; }
.portrait-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.portrait.has-img img, .portrait.no-fx img { opacity: 1; }
.portrait.has-img .portrait-mark, .portrait.has-fx .portrait-mark { display: none; }
.portrait.no-fx .portrait-fx { display: none; }
.portrait-ring { position: absolute; inset: -9px; border-radius: 999px 999px 24px 24px; border: 1px solid var(--gold); opacity: .85; transform: translateZ(18px); pointer-events: none; }
.portrait-mark { position: absolute; left: 50%; top: 50%; width: 30%; transform: translate(-50%, -46%); fill: var(--g500); }
.loc { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--g600); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(176, 138, 62, .6); } 70% { box-shadow: 0 0 0 10px rgba(176, 138, 62, 0); } 100% { box-shadow: 0 0 0 0 rgba(176, 138, 62, 0); } }
.name { margin: 0; font: 300 clamp(58px, 17vw, 148px)/.9 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--g900); }
.name-line { display: block; overflow: hidden; padding-bottom: .04em; }
.name-line .ch { display: inline-block; transform: translateY(105%); }
.name-line:nth-child(2) { color: transparent; -webkit-text-stroke: 1.2px var(--g500); }
.role { margin: 18px 0 10px; font: 700 15px/1.4 var(--body); color: var(--g800); }
.tags { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font: 600 12px/1 var(--body); padding: 7px 11px; border-radius: 999px; border: 1px solid var(--g200); color: var(--g700); background: rgba(246, 247, 241, .7); }
.lead { margin: 0 0 22px; font: 400 18px/1.5 var(--body); color: var(--g700); max-width: 30ch; }
.cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cta .btn-primary { grid-column: 1 / -1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 20px; border-radius: 14px;
  font: 700 15px/1 var(--body); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .35s var(--ease), background .3s, border-color .3s; position: relative; overflow: hidden; }
.btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn svg .fill { fill: currentColor; stroke: none; }
.btn-primary { background: var(--g500); color: var(--g50); box-shadow: 0 12px 28px rgba(85, 99, 47, .3), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 4.5s 2.5s infinite; }
@keyframes sheen { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.btn-primary:hover { background: var(--g600); transform: translateY(-2px); }
.btn-ghost { background: rgba(246, 247, 241, .75); border-color: var(--g200); color: var(--g800); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: var(--g500); transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn.wide { width: 100%; margin-top: 26px; }
.scroll-cue { display: none; }

/* ---------- глави ---------- */
.chapter { position: relative; min-height: 190vh; padding: 0 var(--gutter) 22vh; display: flex; flex-direction: column; }
.ch-head { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding-top: 10vh; max-width: 1120px; margin: 0 auto; width: 100%;
  text-shadow: 0 1px 24px rgba(246, 247, 241, .95), 0 0 2px rgba(246, 247, 241, .6); }
.ch-num { display: block; font: 200 clamp(72px, 22vw, 180px)/.85 var(--display); color: transparent; -webkit-text-stroke: 1.2px var(--chc, var(--g500)); text-shadow: none; }
.ch-place { margin: 14px 0 6px; font: 700 12px/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--chc, var(--g600)); }
.ch-title { margin: 0; font: 300 clamp(40px, 10vw, 92px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--g900); max-width: 14ch; text-wrap: balance; }
.ch-card { position: relative; width: 100%; max-width: 600px; padding: 28px 22px 26px; border-radius: 22px; margin: 0 auto; }
.ch-logo { height: 44px; width: auto; margin-bottom: 20px; }
.ch-lead { margin: 0 0 14px; font: 600 19px/1.45 var(--body); }
.ch-text { margin: 0; font-size: 16px; line-height: 1.7; }
.ch-facts { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ch-facts li { font: 600 12px/1 var(--body); padding: 8px 12px; border-radius: 999px; }
.ch-items { display: grid; gap: 10px; margin-top: 22px; }
.ch-item { padding: 14px 16px; border-radius: 14px; }
.ch-item b { display: block; font-size: 15px; margin-bottom: 3px; }
.ch-item span { font-size: 14px; line-height: 1.5; }
.ch-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font: 700 15px/1 var(--body); text-decoration: none; padding: 14px 18px; border-radius: 12px; transition: transform .35s var(--ease), filter .3s; }
.ch-link:hover { transform: translateY(-2px); filter: brightness(1.08); }
.ch-link i { width: 18px; height: 1.5px; background: currentColor; position: relative; }
.ch-link i::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }

/* Аляска - личната история, в цвета на очите */
.ch-alaska { --chc: #3f6f78; }
.ch-alaska .ch-card { background: var(--glass); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 30px 60px rgba(45, 53, 27, .14); }
.ch-alaska .ch-lead { color: var(--g800); }
.ch-alaska .ch-text { color: var(--g700); }
.ch-alaska .ch-facts li { background: #e3eef0; color: #2e5860; }

/* СофтУни БУДИТЕЛ - синьо, чип, розови възли */
.ch-buditel { --chc: #0068FF; }
.ch-buditel .ch-card { background: #0068FF; color: #fff; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 72, 180, .3);
  background-image: radial-gradient(circle at 92% 8%, rgba(78, 155, 248, .9) 0 2px, transparent 3px), linear-gradient(135deg, #0068FF 0%, #0050d6 100%); }
.ch-buditel .ch-card::before { content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; pointer-events: none; opacity: .35;
  background: linear-gradient(#fff, #fff) 50% 0 / 1.5px 46% no-repeat, linear-gradient(#fff, #fff) 0 46% / 50% 1.5px no-repeat, radial-gradient(circle, #F44F7A 0 5px, transparent 6px) 50% 46% / 12px 12px no-repeat; }
.ch-buditel .ch-lead { font-weight: 800; letter-spacing: -.01em; }
.ch-buditel .ch-text { color: rgba(255, 255, 255, .88); }
.ch-buditel .ch-item { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); padding-left: 34px; position: relative; }
.ch-buditel .ch-item::before { content: ""; position: absolute; left: 14px; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: #F44F7A; box-shadow: 0 0 0 4px rgba(244, 79, 122, .25); }
.ch-buditel .ch-item span { color: rgba(255, 255, 255, .8); }
.ch-buditel .ch-link { background: #F44F7A; color: #fff; }

/* Подари време - магента, оранжево, топлина */
.ch-podari { --chc: #C73378; }
.ch-podari .ch-card { background: #fff; border: 1px solid #f3d6e3; box-shadow: 0 30px 60px rgba(199, 51, 120, .16); }
.ch-podari .ch-logo { height: 54px; }
.ch-podari .ch-lead { font: 400 26px/1.15 var(--display); letter-spacing: .02em; color: #C73378; }
.ch-podari .ch-text { color: #3d3438; }
.ch-podari .ch-link { background: #C73378; color: #fff; }
.ch-podari .ch-card::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, #C73378, #EB9534); }

/* Мечешки истории - черно и кехлибар */
.ch-mechki { --chc: #b07a0c; }
.ch-mechki .ch-card { background: #0d0d0d; color: #fff; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.ch-mechki .ch-logo { height: 64px; }
.ch-mechki .ch-lead { font-weight: 800; color: #F8B224; }
.ch-mechki .ch-text { color: rgba(255, 255, 255, .82); }
.ch-mechki .ch-item { background: #1a1a1a; border: 1px solid rgba(248, 178, 36, .35); }
.ch-mechki .ch-item b { color: #F8B224; }
.ch-mechki .ch-item span { color: rgba(255, 255, 255, .75); }
.ch-mechki .ch-link { background: #F8B224; color: #000; }

/* Катерене - Школа по алпинизъм и катерене: бялото лого върху тъмен гранит, червен акцент от логото */
.ch-shkola { --chc: #c2410c; }
.ch-shkola .ch-card { background: #17191b; color: #fff; overflow: hidden; box-shadow: 0 30px 60px rgba(60, 24, 8, .35);
  background-image: radial-gradient(120% 70% at 100% 0%, rgba(236, 33, 42, .16), transparent 60%), linear-gradient(160deg, #202326 0%, #121314 100%); }
.ch-shkola .ch-logo { height: 96px; margin-bottom: 18px; }
.ch-shkola .ch-lead { font-weight: 800; color: #fff; }
.ch-shkola .ch-lead::before { content: ""; display: block; width: 36px; height: 3px; background: #EC212A; margin-bottom: 14px; border-radius: 2px; }
.ch-shkola .ch-text { color: rgba(255, 255, 255, .8); }
.ch-shkola .ch-facts li { background: transparent; border: 1px solid rgba(236, 33, 42, .6); color: #fff; }
.ch-shkola .ch-link { background: #EC212A; color: #fff; }

/* видео в картата: плакат + бутон, iframe/видео се зарежда чак при клик */
.ch-video { margin: 22px 0 0; }
.vid { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; }
.vid img, .vid iframe, .vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vid video { object-fit: contain; }
.vid img { transition: transform .8s var(--ease); }
button.vid:hover img { transform: scale(1.04); }
.vid-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--chp, #fff); color: var(--chpi, #111); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .35s var(--ease); }
.vid-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
button.vid:hover .vid-play, button.vid:focus-visible .vid-play { transform: scale(1.08); }
.ch-video figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 13px; }
.ch-video figcaption b { font-size: 15px; }
.ch-video figcaption span { opacity: .65; }
.ch-mechki { --chp: #F8B224; --chpi: #000; }
.ch-shkola { --chp: #EC212A; --chpi: #fff; }

/* ---------- нощ (Мечешки истории и след тях): текстът върху небето става светъл ---------- */
.ch-head, .finale, .motto, .motto-note, .foot { transition: color .8s, text-shadow .8s; }
.ch-mechki .ch-head, .night .finale { text-shadow: 0 1px 24px rgba(8, 12, 22, .9), 0 0 2px rgba(8, 12, 22, .6); }
.ch-mechki { --chc: #F8B224; }
.ch-mechki .ch-title, .night .motto { color: #F4EFE2; }
.night .motto-note, .night .foot { color: rgba(244, 239, 226, .75); }
.night .finale-mark { fill: #F8B224; }
.night .bar::before { background: linear-gradient(180deg, rgba(9, 13, 24, .9) 0%, rgba(9, 13, 24, .6) 60%, rgba(9, 13, 24, 0) 100%); }
.night .pill { background: rgba(15, 20, 34, .6); border-color: rgba(255, 255, 255, .16); color: #F4EFE2; }
.night .bar-mark svg { fill: #F8B224; }
.night .contact .wrap { background: rgba(246, 247, 241, .92); }
.bar-org img.on-dark { background: #141414; padding: 3px 10px; border-radius: 8px; }
.bar-org:has(img.on-dark) { height: 40px; }

/* ---------- карти с медия: текст + снимка/видео в две колони (телефон: една колона) ---------- */
.ch-media { margin-top: 24px; }
.ch-media .ch-video { margin: 0; }
.ch-photo { margin: 24px 0 0; }
.ph-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; border: 6px solid #fff; background: #fff;
  box-shadow: 0 40px 80px -24px rgba(20, 24, 12, .55), 0 10px 24px -10px rgba(20, 24, 12, .35); }
.ch-podari .ph-frame { border: 4px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #C73378 0%, #EB9534 100%) border-box;
  box-shadow: 0 30px 60px -16px rgba(199, 51, 120, .5), 0 8px 20px -8px rgba(60, 20, 40, .3); }
.ch-able .ph-frame { border-color: #020101; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(30, 195, 240, .4); }
.ph-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.ch-photo figcaption { margin-top: 10px; font: 400 18px/1.2 var(--display); letter-spacing: .03em; color: #C73378; }

/* ---------- плаващи медии до картата (над 3D сцената) ---------- */
.ch-stage { position: relative; max-width: 1240px; margin: 0 auto; width: 100%; }
.ch-stage .ch-card { margin: 0; }
.ch-float { position: relative; margin-top: 30px; display: grid; gap: 18px; transform: translateY(var(--py, 0px)); }
.fl { margin: 0; animation: fl-bob 8s ease-in-out infinite; }
.fl-1 { animation-delay: -3s; }
@keyframes fl-bob { 0%, 100% { translate: 0 -6px; } 50% { translate: 0 8px; } }
.fl-photo { rotate: -1.6deg; }
.fl-photo.fl-1 { rotate: 2.4deg; }
.fl-photo figcaption, .fl-cap { margin-top: 12px; font: 400 19px/1.2 var(--display); letter-spacing: .03em; color: #F4EFE2; text-shadow: 0 1px 14px rgba(8, 12, 22, .85); }
.fl-cap { display: flex; flex-direction: column; gap: 3px; }
.fl-cap span { font: 500 12px/1.3 var(--body); letter-spacing: 0; opacity: .8; }
.ch-alaska .fl-photo figcaption { color: var(--g900); text-shadow: 0 1px 14px rgba(246, 247, 241, .95); }
.ch-podari .fl-photo figcaption { color: #C73378; text-shadow: 0 1px 14px rgba(255, 255, 255, .9); }
.fl-duo.fl-1 { width: 74%; margin: -16% 0 0 auto; position: relative; z-index: 1; }
.fl-duo.fl-0 { width: 92%; }
/* лаптоп за видеата */
.fl-device { rotate: 0deg; }
.laptop { width: 100%; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .45)); }
.laptop-screen { background: #0e0f11; border-radius: 18px 18px 4px 4px; padding: 3.4% 3.4% 4.2%; border: 1px solid #2c2e33; box-shadow: inset 0 0 0 2px #1a1b1e; position: relative; }
.laptop-screen::before { content: ""; position: absolute; top: 1.3%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2a2d33; }
.laptop .ch-video { margin: 0; }
.laptop .ch-video figcaption { display: none; }
.laptop .vid { border-radius: 4px; }
.laptop-base { position: relative; height: 16px; width: 116%; margin-left: -8%; border-radius: 2px 2px 16px 16px; background: linear-gradient(#e4e7ec, #b4b9c2 70%, #8d929b); }
.laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; margin-left: -8%; border-radius: 0 0 8px 8px; background: #a3a8b1; }
.fl-device:hover .laptop { transform: translateY(-4px); transition: transform .4s var(--ease); }
/* reNOSEvate: история от блога на гимназията */
.fl-story { background: #fff; color: #23252E; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -24px rgba(0, 40, 120, .45), 0 0 0 1px rgba(0, 104, 255, .12); animation-duration: 9s; }
.story-kicker { display: inline-block; margin: 18px 20px 0; padding: 6px 10px; border-radius: 999px; background: rgba(0, 104, 255, .08); color: #0068FF; font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.story-dia { padding: 10px 16px 0; }
.story-body { padding: 4px 20px 22px; }
.story-body h3 { margin: 6px 0 8px; font: 800 20px/1.25 var(--body); letter-spacing: -.01em; }
.story-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #4a4f5c; }
.story-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: #0068FF; color: #fff; font: 700 14px/1 var(--body); text-decoration: none; transition: transform .3s var(--ease); }
.story-link:hover { transform: translateY(-2px); }
.story-link i { width: 16px; height: 1.5px; background: currentColor; position: relative; }
.story-link i::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.rnd { margin: 0; }
.rnd svg { width: 100%; height: auto; display: block; }
.rnd-l { font: 600 13px/1 var(--body); fill: #7a8090; }
.rnd-big { font-size: 15px; fill: #23252E; }
.rnd .rnd-out, .rnd .rnd-in, .rnd-ribs { transition: opacity .6s; }
.rnd[data-flow="out"] .rnd-in, .rnd[data-flow="in"] .rnd-out { opacity: .1; }
.rnd[data-flow="out"] .rnd-ribs { opacity: .7; }
.rnd[data-flow="in"] .rnd-ribs { opacity: .15; }
.rnd-toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: #EEF3FB; margin: 0 0 6px; }
.rnd-toggle button { appearance: none; border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font: 700 12px/1 var(--body); color: #4a4f5c; cursor: pointer; }
.rnd-toggle button[aria-pressed="true"] { background: #fff; color: #0068FF; box-shadow: 0 2px 6px rgba(0, 40, 120, .15); }
.rnd-cap { font-size: 13px; color: #4a4f5c; min-height: 1.4em; }
.rnd[data-flow="out"] .rnd-cap-in, .rnd[data-flow="in"] .rnd-cap-out { display: none; }
.rnd-team { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 2px; font: 700 12px/1 var(--body); color: #23252E; }
.rnd-team ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rnd-team li { width: 30px; height: 20px; transform-origin: 0 50%; animation: fl-wave 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
.rnd-team svg { width: 100%; height: 100%; border-radius: 3px; display: block; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
@keyframes fl-wave { 0%, 100% { transform: perspective(60px) rotateY(-14deg) skewY(-3deg); } 50% { transform: perspective(60px) rotateY(10deg) skewY(3deg); } }
/* предстоящо събитие (Ден на отворените врати) */
.fl-event { display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: start; padding: 18px; border-radius: 20px; color: #fff; animation-delay: -4s;
  background: linear-gradient(135deg, #0068FF 0%, #0050d6 100%); box-shadow: 0 30px 60px -20px rgba(0, 60, 170, .6); }
.ev-date { display: grid; place-items: center; align-content: center; height: 74px; border-radius: 16px; background: #fff; color: #0068FF; }
.ev-date b { font: 300 34px/1 var(--display); }
.ev-date span { font: 800 12px/1.2 var(--body); text-transform: uppercase; letter-spacing: .1em; color: #F44F7A; }
.ev-kicker { display: inline-block; font: 700 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #98EA49; }
.ev-body h3 { margin: 6px 0 6px; font: 800 18px/1.2 var(--body); }
.ev-body p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.ev-who { margin-top: 6px !important; color: rgba(255, 255, 255, .7) !important; }
.ev-cta { display: inline-block; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #F44F7A; color: #fff; font: 700 13px/1 var(--body); text-decoration: none; }
@media (min-width: 1000px) {
  .ch-stage[class*="float-"] { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
  .ch-stage.float-left { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
  .ch-stage.float-left .ch-float { order: -1; }
  .ch-float { margin-top: 0; }
  .ch-podari .ch-float { max-width: 420px; justify-self: center; }
  .ch-buditel .ch-float { max-width: 520px; justify-self: center; }
}
@media (max-width: 999px) { .ch-float { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fl, .rnd-team li { animation: none; } .ch-float { transform: none; } }
@media (min-width: 900px) {
  .ch-card.has-media { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
  .ch-card.has-media .ch-media, .ch-card.has-media .ch-photo { margin: 0; }
  .ch-card.media-left { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .ch-card.media-left .ch-media { order: -1; }
  .ch-podari .ch-card.has-media { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr); }
  .ch-card.has-media .ch-items { grid-template-columns: 1fr; gap: 8px; }
  .ch-card.has-media .ch-item { padding: 11px 14px; }
}

/* ---------- лайтбокс: видеото на цял екран ---------- */
.lb { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 64px 12px 24px; background: rgba(5, 8, 14, .93);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; }
.lb.on { opacity: 1; }
.lb[hidden] { display: none; }
.lb-frame { position: relative; width: min(100%, calc((100vh - 110px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6); transform: scale(.97); transition: transform .35s var(--ease); }
.lb.on .lb-frame { transform: none; }
.lb-frame iframe, .lb-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.lb-frame:fullscreen { border-radius: 0; width: 100%; }
.lb-tools { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
.lb-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.lb-btn:hover { background: rgba(255, 255, 255, .2); }
.lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html.lb-open { overflow: hidden; }

/* ---------- подкаст (нощ) ---------- */
.pod { padding-top: 16vh; padding-bottom: 10vh; }
.pod-wrap { max-width: 1120px; margin: 0 auto; display: grid; gap: 26px; color: #F4EFE2; }
.pod-poster { border-radius: 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); outline: 1px solid rgba(255, 255, 255, .14); outline-offset: -1px; }
.pod-poster .vid-play { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: #F4EFE2; color: #111; }
.pod-poster .vid-play svg { width: 32px; height: 32px; }
.pod-len { position: absolute; right: 12px; bottom: 12px; padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, .75); color: #fff; font: 700 13px/1 var(--body); }
.pod-meta { text-shadow: 0 1px 18px rgba(8, 12, 22, .9); }
.pod .kicker { color: #F8B224; }
.pod .kicker::before { background: #F8B224; }
.pod-title { margin: 0 0 14px; font: 300 clamp(38px, 8vw, 68px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.pod-quote { margin: 0 0 14px; font: 400 clamp(20px, 3.4vw, 26px)/1.25 var(--display); letter-spacing: .02em; color: #F8B224; }
.pod-text { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(244, 239, 226, .88); max-width: 46ch; }
.pod-yt { margin-top: 22px; background: #F4EFE2; color: #111; text-shadow: none; }
.pod-yt svg .fill { fill: #FF0033; }
.pod-yt:hover { transform: translateY(-2px); background: #fff; }
@media (min-width: 900px) { .pod-wrap { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; } }

/* ---------- Instagram ---------- */
.ig { padding-top: 14vh; padding-bottom: 6vh; }
.ig-wrap { max-width: 980px; margin: 0 auto; color: #F4EFE2; }
.ig-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ig-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; padding: 3px; display: block;
  background: conic-gradient(from 200deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }
.ig-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 3px solid #0c1120; }
.ig-kicker { margin: 0 0 4px; font: 700 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #F8B224; }
.ig-handle { margin: 0; font: 400 clamp(26px, 6vw, 40px)/1.05 var(--display); letter-spacing: .04em; text-shadow: 0 1px 18px rgba(8, 12, 22, .9); }
.ig-title { margin: 0 0 8px; font: 300 clamp(34px, 8vw, 64px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 24px rgba(8, 12, 22, .9); }
.ig-text { margin: 0 0 24px; color: rgba(244, 239, 226, .85); max-width: 44ch; text-shadow: 0 1px 14px rgba(8, 12, 22, .9); }
.ig-reels { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 260px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ig-reels::-webkit-scrollbar { display: none; }
.ig-reels li { scroll-snap-align: start; }
.reel { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; padding: 0; border-radius: 18px; overflow: hidden; cursor: pointer; text-decoration: none;
  background: #111; color: #fff; box-shadow: 0 20px 40px rgba(0, 0, 0, .4); outline: 1px solid rgba(255, 255, 255, .12); outline-offset: -1px; }
.reel img, .reel-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.reel-ph { background: radial-gradient(120% 80% at 20% 0%, #962FBF 0%, transparent 60%), radial-gradient(120% 80% at 100% 100%, #FA7E1E 0%, transparent 60%), #1a1430; }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .7)); }
.reel:hover img { transform: scale(1.05); }
.reel .vid-play { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(255, 255, 255, .92); color: #111; z-index: 1; }
.reel-t { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; font: 700 15px/1.3 var(--body); text-align: left; }
.reel-frame { aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #fff; }
.reel-frame iframe { width: 100%; height: 100%; border: 0; }
.ig-btn { margin-top: 20px; color: #fff; background: linear-gradient(90deg, #D62976, #FA7E1E); box-shadow: 0 12px 28px rgba(214, 41, 118, .35); }
.ig-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
@media (min-width: 720px) {
  .ig-reels { margin: 0; padding: 4px 0 10px; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; }
}
/* официалното вграждане на рийла: плейсхолдър, докато embed.js не го замени с iframe */
.ig-reels:has(.ig-embed) { display: block; margin: 0; padding: 0; overflow: visible; }
.ig-embed { list-style: none; max-width: 400px; }
.ig-embed blockquote.instagram-media { margin: 0 !important; min-height: 520px; border-radius: 18px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45); font: 700 14px/1.4 var(--body); }
.ig-embed blockquote a { color: #D62976; text-decoration: none; padding: 20px; text-align: center; }
.ig-embed iframe.instagram-media-rendered { border-radius: 18px !important; box-shadow: 0 30px 70px rgba(0, 0, 0, .45) !important; margin: 0 !important; }
@media (min-width: 900px) {
  .ig-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(326px, 400px); column-gap: 64px; align-items: start; }
  .ig-head, .ig-title, .ig-text, .ig-btn { grid-column: 1; }
  .ig-head { margin-top: 12vh; }
  .ig-btn { justify-self: start; }
  .ig-reels { grid-column: 2; grid-row: 1 / span 5; }
}
@media (max-width: 899px) { .ig-embed { margin: 0 auto 6px; } }

/* ---------- Able: черно и циан от логото ---------- */
body[data-theme="able"] { --accent: #1EC3F0; --accent-ink: #020101; }
.ch-able { --chc: #1EC3F0; }
.ch-able .ch-head { text-shadow: 0 1px 24px rgba(8, 12, 30, .85), 0 0 2px rgba(8, 12, 30, .5); }
.ch-able .ch-title { color: #F4F7FA; }
.ch-able .ch-card { background: #020101; color: #fff; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 40, 60, .4), 0 0 0 1px rgba(30, 195, 240, .25);
  background-image: radial-gradient(90% 60% at 100% 0%, rgba(30, 195, 240, .18), transparent 60%), radial-gradient(1.5px 1.5px at 20% 30%, rgba(30, 195, 240, .5), transparent 2px); }
.ch-able .ch-logo { height: 40px; }
.ch-able .ch-lead { font-weight: 800; color: #1EC3F0; }
.ch-able .ch-text { color: rgba(255, 255, 255, .82); }
.ch-able .ch-item { background: rgba(30, 195, 240, .06); border: 1px solid rgba(30, 195, 240, .35); }
.ch-able .ch-item b { color: #1EC3F0; }
.ch-able .ch-item span { color: rgba(255, 255, 255, .75); }
.ch-able .ch-link { background: #1EC3F0; color: #020101; }
.ch-item-link { text-decoration: none; }
.ch-item-link:hover b { text-decoration: underline; }
.ch-buditel .ch-item-link b { color: #fff; }

/* ---------- контакти: увод + форма „Поискай среща“ ---------- */
.contact-grid { max-width: 1120px; margin: 0 auto; display: grid; gap: 22px; }
.contact-intro { color: #F4EFE2; text-shadow: 0 1px 18px rgba(8, 12, 22, .85); }
.contact-intro .kicker { color: #F8B224; }
.contact-intro .kicker::before { background: #F8B224; }
.contact-intro .body-lg { color: rgba(244, 239, 226, .9); }
.contact .rows { border-top-color: rgba(255, 255, 255, .16); text-shadow: none; }
.contact .rows a { border-bottom-color: rgba(255, 255, 255, .16); }
.contact .rows a:hover { background: rgba(255, 255, 255, .06); }
.contact .rows .ic { background: rgba(246, 247, 241, .12); }
.contact .rows .ic svg { stroke: #F4EFE2; }
.contact .rows .ic svg .fill { fill: #F4EFE2; }
.contact .rows span.sub { color: rgba(244, 239, 226, .65); }
.contact .rows .go { border-color: #F8B224; }
.contact #vcard2 { background: rgba(15, 20, 34, .55); border-color: rgba(255, 255, 255, .22); color: #F4EFE2; }
.contact .more-title { color: rgba(244, 239, 226, .65); }
.contact .more a { border-bottom-color: rgba(255, 255, 255, .16); }
.contact .more a:hover { color: #F8B224; }
.meet { position: relative; background: rgba(246, 247, 241, .96); color: var(--ink); border-radius: 24px; padding: 28px 20px 22px; box-shadow: 0 40px 80px rgba(0, 0, 0, .35); overflow: hidden; }
.meet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--g500), var(--gold)); }
.meet-title { margin: 0 0 18px; font: 300 clamp(30px, 5vw, 42px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.meet-row { display: grid; gap: 0 14px; }
.fld { display: block; margin-bottom: 14px; }
.fld > span { display: block; margin-bottom: 6px; font: 700 12px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--g600); }
.fld input, .fld select, .fld textarea { width: 100%; font: 500 16px/1.4 var(--body); color: var(--ink); background: #fff; border: 1px solid var(--g200); border-radius: 12px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.fld textarea { resize: vertical; min-height: 120px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--g500); box-shadow: 0 0 0 3px rgba(107, 123, 64, .18); }
.fld input::placeholder { color: var(--g300); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--g700); cursor: pointer; }
.consent input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--g500); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ts:not(:empty) { margin-top: 14px; }
.meet .btn.wide { margin-top: 18px; }
.meet .btn:disabled { opacity: .7; cursor: wait; }
.form-status { margin: 12px 0 0; min-height: 1.4em; font-size: 14px; color: var(--g700); }
.form-status.good { color: var(--g600); font-weight: 700; }
.form-status.bad { color: #b3261e; font-weight: 700; }
@media (min-width: 640px) { .meet-row { grid-template-columns: 1fr 1fr; } .meet { padding: 34px 32px 26px; } }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; } .contact-intro { padding-top: 8px; } }

/* ---------- контакти ---------- */
.sec { position: relative; padding: 18vh var(--gutter); }
.wrap.narrow { max-width: 720px; margin: 0 auto; }
.contact .wrap { background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 24px; padding: 30px 22px; box-shadow: 0 30px 60px rgba(45, 53, 27, .12); }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 700 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.kicker::before { content: ""; width: 28px; height: 1.5px; background: var(--gold); }
.h2 { margin: 0 0 18px; font: 300 clamp(36px, 9vw, 72px)/1.02 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.body-lg { margin: 0; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.65; color: var(--g700); }
.rows { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.rows a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .3s, padding .35s var(--ease); }
.rows a:hover { background: rgba(107, 123, 64, .07); padding-left: 10px; }
.rows .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--g100); }
.rows .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--g700); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rows .ic svg .fill { fill: var(--g700); stroke: none; }
.rows b { display: block; font: 700 15px/1.3 var(--body); }
.rows span.sub { display: block; font-size: 13px; color: var(--g600); word-break: break-all; }
.rows .go { width: 9px; height: 9px; border-top: 1.5px solid var(--g500); border-right: 1.5px solid var(--g500); transform: rotate(45deg); margin-right: 6px; }
.more { margin-top: 26px; }
.more-title { margin: 0 0 4px; font: 700 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--g600); }
.more a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; transition: color .3s, padding .35s var(--ease); }
.more a:hover { color: var(--g500); padding-left: 6px; }
.more a small { font: 700 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); flex: none; }
.finale { text-align: center; padding: 22vh var(--gutter) calc(30px + env(safe-area-inset-bottom)); text-shadow: 0 1px 24px rgba(246, 247, 241, .9); }
.finale-mark { width: 58px; fill: var(--g500); margin: 0 auto 26px; display: block; }
.motto { margin: 0; font: 300 clamp(40px, 11vw, 96px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--g900); }
.motto-note { margin: 12px 0 0; color: var(--g700); font-size: 14px; }
.motto-note:empty { display: none; }
.foot { margin: 16vh 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--g700); }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 30; padding: 12px 18px; border-radius: 12px;
  background: var(--g900); color: var(--g50); font: 700 14px/1 var(--body); opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.js .reveal { opacity: 0; transform: translateY(26px); }
.no-gl { background: linear-gradient(180deg, #dfe9ee 0%, var(--g50) 60%) fixed; }
.no-gl #gl { display: none; }

@media (min-width: 720px) {
  :root { --gutter: 40px; }
  .hero { justify-content: center; padding-top: 120px; }
  .portrait { --pw: min(40vw, 46vh, 330px); }
  .cta { display: flex; flex-wrap: wrap; }
  .cta .btn-primary { grid-column: auto; }
  .ch-card { padding: 36px 34px 32px; margin: 0; }
  .ch-items { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .chapter:nth-of-type(even) .ch-card { margin-left: auto; }
  .contact .wrap { padding: 44px 40px; }
  .scroll-cue { display: flex; position: absolute; left: var(--gutter); bottom: 34px; align-items: center; gap: 14px; font: 700 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--g600); text-decoration: none; }
  .scroll-cue i { width: 1.5px; height: 46px; background: linear-gradient(var(--g500), transparent); position: relative; overflow: hidden; }
  .scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1.5px; height: 40%; background: var(--gold); animation: drip 2.2s var(--ease) infinite; }
  @keyframes drip { to { top: 110%; } }
  .foot { flex-direction: row; justify-content: center; gap: 18px; }
}
@media (min-width: 1000px) {
  /* десктоп: портретът е вдясно, около 70% от височината на екрана */
  .portrait { --pw: min(52.5vh, 36vw); position: absolute; right: max(6vw, calc(50vw - 600px)); top: 64px; bottom: 0; margin: auto 0; height: calc(var(--pw) * 4 / 3); }
}
@media (min-width: 1100px) {
  .hero { padding-left: 8vw; }
  .chapter { padding-left: 8vw; padding-right: 8vw; }
  .veil { background: radial-gradient(70% 95% at 0% 70%, rgba(246, 247, 241, .92) 0%, rgba(246, 247, 241, 0) 62%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .btn-primary::after, .dot, .scroll-cue i::after { animation: none; }
}
@media (min-width: 720px) { .ch-buditel .ch-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .contact-grid { grid-template-rows: auto 1fr; } .contact-grid > .meet { grid-column: 2; grid-row: 1 / span 2; } .contact-grid > .contact-links { grid-column: 1; grid-row: 2; } }

/* ---------- „Екипът зад reNOSEvate“ (умалено копие на секцията от страницата на гимназията) ---------- */
.rt { padding: 4px 20px 22px; }
.rt .story-kicker { margin: 18px 0 0; }
.rt-title { margin: 10px 0 6px; font: 800 21px/1.2 var(--body); letter-spacing: -.01em; color: #23252E; }
.rt-lead { margin: 0; font-size: 14px; line-height: 1.55; color: #4a4f5c; }
.rt-label { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font: 700 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #0068FF; }
.rt-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F44F7A; box-shadow: 0 0 0 3px rgba(244, 79, 122, .2); }
.rt-person { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.rt-person img, .rt-ico { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #EEF3FB; }
.rt-ico { display: grid; place-items: center; color: #0068FF; }
.rt-ico svg { width: 24px; height: 24px; }
.rt-person b { display: block; font: 700 15px/1.25 var(--body); color: #23252E; }
.rt-person span { display: block; font-size: 12.5px; line-height: 1.35; color: #0050d6; font-weight: 600; }
.rt-person small { display: block; font-size: 12px; color: #7a8090; margin-top: 2px; }
.rt-lead-person { padding: 10px; border-radius: 14px; background: rgba(0, 104, 255, .06); border: 1px solid rgba(0, 104, 255, .14); }
.rt-lead-person img { width: 60px; height: 60px; }
.rt-lead-person { grid-template-columns: 60px 1fr; }
.rt-mentors { display: grid; gap: 10px; }
.rt-members { list-style: none; margin: 0; padding: 4px 0 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 16px 12px; }
.rt-members li { display: grid; gap: 4px; }
.rt-members b { font: 700 13px/1.2 var(--body); color: #23252E; margin-top: 10px; }
.rt-members small { font-size: 11.5px; color: #7a8090; }
/* знаме на прът: 12 ивици от едно SVG, вълна с фазово отместване (същата техника като на страницата) */
.rt-wave { position: relative; display: flex; width: 54px; height: 36px; filter: drop-shadow(0 4px 6px rgba(35, 37, 46, .18)); transform-origin: 0 50%;
  transition: transform 900ms cubic-bezier(.34, 1.56, .64, 1), opacity 400ms ease-out; }
.rt-wave::before { content: ""; position: absolute; left: -6px; top: -6px; bottom: -16px; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #B9C4D6, #8A91A0); }
.rt-wave::after { content: ""; position: absolute; left: -7.5px; top: -9px; width: 6px; height: 6px; border-radius: 50%; background: #B9C4D6; }
.rt-wave i { position: absolute; top: 0; left: calc(var(--i) * 4.5px); width: 4.9px; height: 100%; background-image: var(--flag); background-size: 54px 36px; background-repeat: no-repeat;
  background-position: calc(var(--i) * -4.5px) 0; animation: rt-wave 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.14s); animation-play-state: paused; }
.rt-wave i::after { content: ""; position: absolute; inset: 0; background: rgba(20, 22, 30, .16); opacity: 0; animation: rt-shade 2.6s ease-in-out infinite; animation-delay: inherit; animation-play-state: inherit; }
.rt-wave.is-live i { animation-play-state: running; }
.rt-members:not(.is-up) .rt-wave { transform: scaleX(.12); opacity: 0; }
.rt-members.is-up li:nth-child(2) .rt-wave { transition-delay: 120ms; }
.rt-members.is-up li:nth-child(3) .rt-wave { transition-delay: 240ms; }
.rt-members.is-up li:nth-child(4) .rt-wave { transition-delay: 360ms; }
.rt-members.is-up li:nth-child(5) .rt-wave { transition-delay: 480ms; }
@keyframes rt-wave { 0%, 100% { transform: translateY(calc(var(--amp) * -1px)); } 50% { transform: translateY(calc(var(--amp) * 1px)); } }
@keyframes rt-shade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (min-width: 640px) { .rt-mentors { grid-template-columns: 1fr 1fr; } .rt-members { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .rt-wave i, .rt-wave i::after { animation: none; } }
.rt .story-kicker { text-transform: none; letter-spacing: .04em; font-size: 12px; }