/* ============================================================
   CINEZED — dark theme, rounded, liquid metal
   ============================================================ */

/* ------------------------------------------------------------
   TERMINA — заглавният шрифт (Rene Bieder, платен, през Adobe Fonts)

   Правилният начин с твоя абонамент е Web Project в Adobe Fonts:
   получаваш един ред <link> и семейството се казва "termina".
   Стъпките са в assets/fonts/TERMINA.md

   @font-face блоковете отдолу стоят ИЗКЛЮЧЕНИ. Включи ги само
   ако имаш лиценз да качиш .woff2 файловете сам — иначе браузърът
   вика четири липсващи файла при всяко зареждане.

@font-face{
  font-family:'Termina';
  src:url('../assets/fonts/Termina-Light.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Termina';
  src:url('../assets/fonts/Termina-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Termina';
  src:url('../assets/fonts/Termina-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Termina';
  src:url('../assets/fonts/Termina-Demi.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
------------------------------------------------------------ */

:root{
  /* --- dark surfaces, each step a real elevation --- */
  --bg:#08080a;
  --surface:#111114;
  --surface-2:#17171c;
  --surface-3:#1e1e24;
  --line:#26262e;
  --line-2:#1c1c22;

  /* --- text, all checked against --bg for 4.5:1 --- */
  --text:#f4f4f6;
  --text-2:#a8a8b3;
  --text-3:#8b8b96;

  /* --- the one accent, lifted for dark backgrounds --- */
  --red:#ffffff;
  --red-soft:#e6e7ea;
  --red-deep:#c9cbd1;
  --red-wash:rgba(255,255,255,.07);
  --red-line:rgba(255,255,255,.34);

  /* --- metal --- */
  --metal-1:#5a5a66;
  --metal-2:#c8c8d4;
  --metal-3:#2a2a33;

  /* --- rounding scale --- */
  --r-xs:8px;
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-xl:34px;
  --r-pill:999px;

  /* „termina" е името, което идва от Adobe Fonts;
     'Termina' е името от локалните .woff2 файлове.
     Archivo с широка ос + Sora са безплатният заместник. */
  --display:'termina','Termina','Archivo','Sora',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* стеснен шрифт за списъците — чете се като стартов протокол */
  --list:'Barlow Condensed','Archivo',system-ui,sans-serif;
  /* числа и технически надписи — същият шрифт като заглавията,
     за да няма пет различни характера на една страница */
  --tech:'termina','Termina','Archivo','Sora',system-ui,sans-serif;
  --term:'Share Tech Mono','IBM Plex Mono',ui-monospace,monospace;
  --modern:'termina','Termina','Archivo','Sora',system-ui,sans-serif;

  --w-light:300;
  --w-reg:400;
  --w-med:500;

  --bar-h:74px;
  --ease:cubic-bezier(.22,1,.36,1);
  /* спира плавно, без да превишава: истинските неща не подскачат */
  --spring:cubic-bezier(.22,1,.36,1);
  --gut:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
/* докато Termina я няма, Archivo се разтяга до нейната ширина */
h1,h2,h3,h4,.hdr-link-t,.eyebrow,.mono,.btn{font-stretch:118%}
html{-webkit-text-size-adjust:100%;background:var(--bg)}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;height:100vh}

a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* focus ring — 2px, 3:1 against every surface it lands on */
:focus-visible{
  outline:2px solid var(--red-soft);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.wrap{max-width:1400px;margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.muted{color:var(--text-3)}
.accent{color:var(--red)}

/* ============================================================
   INTRO — video + 0→100 ring
   ============================================================ */

#intro{
  position:fixed;inset:0;z-index:9000;
  background:#050505;
  display:flex;align-items:center;justify-content:center;
  cursor:wait;
}
#intro.intro-done{display:none}

#intro .intro-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;
}
#intro .intro-video.fit-contain{object-fit:contain}

#intro .intro-fallback{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,#141414 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,#141414 0 1px,transparent 1px 64px),
    #050505;
}

#intro::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.30) 0%,rgba(0,0,0,.42) 45%,rgba(0,0,0,.72) 100%);
}

.intro-ui{
  position:absolute;inset:0;z-index:2;
  color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.5);
  pointer-events:none;
  padding:var(--gut);
  display:flex;flex-direction:column;justify-content:space-between;
}

.intro-top{display:flex;justify-content:space-between;align-items:flex-start}
.intro-mark{
  font-family:var(--display);font-weight:var(--w-med);
  font-size:clamp(18px,2vw,24px);letter-spacing:.14em;
}
.intro-meta{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-align:right;line-height:1.9}

.intro-bottom{display:flex;align-items:flex-end;justify-content:center}
.intro-status{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-align:center}

.intro-ring{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(168px,25vw,236px);aspect-ratio:1;
}
.ring-svg{width:100%;height:100%;display:block;overflow:visible}
.ring-svg line{stroke:#fff;stroke-linecap:round}
.ring-svg line.lead{stroke:var(--red)}
.ring-num{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:var(--w-reg);
  font-size:clamp(30px,4.4vw,46px);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.ring-num sup{font-size:.34em;font-weight:var(--w-reg);vertical-align:super;margin-left:.14em;opacity:.7}

/* ============================================================
   ИЗХОД ОТ ИНТРОТО — ПЛАВНО ИЗБЛЕДНЯВАНЕ
   Прозрачността се кара кадър по кадър от js/intro.js, заедно
   със зума на сайта отдолу — затова двете не могат да се
   разминат.
   ============================================================ */

#intro.exit{pointer-events:none}
#intro.exit .intro-ui{opacity:0;transition:opacity .3s var(--ease)}

/* този слой вече не се ползва */
#gate{display:none !important}

body.intro-armed #site-header,
body.intro-armed main,
body.intro-armed #site-footer,
body.intro-armed .corner-tags{
  opacity:var(--site-o,0);
  transform:scale(var(--site-k,1.035));
  transform-origin:50% 50%;
}

@media (prefers-reduced-motion:reduce){
  body.intro-armed #site-header,
  body.intro-armed main,
  body.intro-armed #site-footer,
  body.intro-armed .corner-tags{opacity:1;transform:none}
}

/* ============================================================
   LIQUID METAL BUTTONS
   Every button carries a CSS metal surface. One shared WebGL
   layer (js/liquid-button.js) rides on top of whichever button
   the pointer is on — browsers cap WebGL contexts, so one
   canvas per button is not an option.
   ============================================================ */

/* the rotating angle behind the metal rim */
@property --rim-a{syntax:'<angle>';inherits:false;initial-value:0deg}

.btn,
button:not([data-play]):not(.cdel):not(.modal-close):not(.vbtn){
  position:relative;
  isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;
  min-height:46px;
  border:none;
  border-radius:var(--r-pill);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-2);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  /* the fill stays dark — the metal lives on the edge */
  background:
    radial-gradient(120% 160% at 50% -30%,#1c1c21 0%,#0d0d10 55%),
    #0d0d10;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 30px -16px rgba(0,0,0,1);
  transition:
    color .35s var(--ease),
    transform .18s var(--spring),
    box-shadow .4s var(--ease);
}

/* --- the liquid metal rim ---
   a conic sweep painted only in the 1px border band, via a
   mask that punches out the middle. The warm stop is the
   glint that gives it the molten feel. */
.btn::before,
button:not([data-play]):not(.cdel):not(.modal-close):not(.vbtn)::before{
  content:'';position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--rim-a),
    rgba(255,255,255,.06) 0deg,
    rgba(232,232,240,.85) 42deg,
    rgba(240,242,248,.95) 68deg,
    rgba(255,255,255,.30) 96deg,
    rgba(120,120,132,.14) 150deg,
    rgba(255,255,255,.70) 214deg,
    rgba(198,200,214,.42) 262deg,
    rgba(90,90,100,.10) 310deg,
    rgba(255,255,255,.06) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  animation:rimTurn 9s linear infinite;
  transition:opacity .35s var(--ease);
}
@keyframes rimTurn{to{--rim-a:360deg}}

/* soft light the rim throws underneath */
.btn::after,
button:not([data-play]):not(.cdel):not(.modal-close):not(.vbtn)::after{
  content:'';position:absolute;left:14%;right:14%;bottom:-5px;height:12px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.22),transparent 72%);
  filter:blur(5px);opacity:.5;pointer-events:none;
  transition:opacity .4s var(--ease);
}

.btn:hover,
button:not([data-play]):not(.cdel):not(.modal-close):not(.vbtn):hover{
  color:var(--text);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 16px 40px -18px rgba(0,0,0,1);
}
.btn:hover::after,
button:not([data-play]):not(.cdel):not(.modal-close):not(.vbtn):hover::after{opacity:.9}
.btn:active,
button:not([data-play]):not(.cdel):not(.modal-close):not(.vbtn):active{
  transform:translateY(1px) scale(.99);
}

/* the shared WebGL metal, masked into the same rim band */
.lm-layer{
  position:absolute;inset:0;z-index:1;
  border-radius:inherit;
  padding:1px;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity .45s var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.lm-layer.on{opacity:.85}
.lm-layer canvas{width:100%!important;height:100%!important;display:block;border-radius:inherit}

/* click ripple — sits inside the dark fill */
.lm-ripple{
  position:absolute;border-radius:50%;
  pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 40%,transparent 70%);
  transform:translate(-50%,-50%) scale(0);
  animation:lmRipple .62s var(--ease) forwards;
}
@keyframes lmRipple{
  to{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* red variant — the rim turns molten red, the fill stays dark */
.btn.red,
.btn.on{
  color:#e8e8ee;
  background:
    radial-gradient(120% 160% at 50% -30%,#232329 0%,#0d0d10 55%),
    #0d0d10;
}
.btn.red::before,
.btn.on::before{
  background:conic-gradient(from var(--rim-a),
    rgba(115,115,115,.10) 0deg,
    rgba(164,164,164,.95) 42deg,
    rgba(219,219,219,.98) 68deg,
    rgba(125,125,125,.45) 96deg,
    rgba(63,63,63,.16) 150deg,
    rgba(180,180,180,.85) 214deg,
    rgba(86,86,86,.50) 262deg,
    rgba(44,44,44,.12) 310deg,
    rgba(115,115,115,.10) 360deg);
}
.btn.red::after,
.btn.on::after{
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.22),transparent 72%);
}
.btn.red:hover,
.btn.on:hover{color:#fff}

.btn.wide{width:100%;padding:18px 26px}
.btn.sm{padding:11px 20px;font-size:9px;min-height:40px}

/* small icon-ish controls keep their own look */
[data-play],.cdel,.modal-close{background:none;border:none}

/* ============================================================
   HEADER
   ============================================================ */

/* Прозрачен: съдържанието минава под него, без линия и без фон.
   z-index:600 работи само ако родителят не си е направил свой
   слой — затова #site-header по-долу също се вдига. */
#site-header{position:relative;z-index:600}

.hdr{
  position:fixed;top:0;left:0;right:0;z-index:600;
  height:var(--bar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gut);
  background:transparent;
  border-bottom:none;
  pointer-events:none;
}
.hdr > *{pointer-events:auto}

.hdr-left{display:flex;align-items:center;gap:2px}

/* пряк път към началната страница, до трите черти */
.homebtn{
  width:42px;height:42px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);
  color:var(--text-2);
  transition:color .3s var(--ease),background .3s var(--ease),transform .3s var(--spring);
}
.homebtn svg{
  width:19px;height:19px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.homebtn:hover{color:var(--text);background:rgba(255,255,255,.06);transform:translateY(-1px)}

/* Единствената връзка в хедъра. Кантът е тънък, буквите —
   разредени: същият език като надписите по картите. */
.hdr-link{
  position:relative;
  display:inline-flex;align-items:center;gap:9px;
  height:38px;padding:0 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  overflow:hidden;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--spring);
}
.hdr-link-t{
  font-family:var(--term);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-2);
  transition:color .35s var(--ease);
}
.hdr-link-go{
  font-size:12px;line-height:1;color:var(--text-3);
  transform:translateX(-3px);opacity:0;
  transition:transform .4s var(--ease),opacity .35s var(--ease),color .35s;
}
/* бликът минава веднъж при посочване, не в кръг */
.hdr-link::after{
  content:"";position:absolute;top:-60%;left:-60%;
  width:45%;height:220%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:rotate(10deg);opacity:0;
  transition:left .7s var(--ease),opacity .3s;
}
.hdr-link:hover{
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.07);
  transform:translateY(-1px);
}
.hdr-link:hover .hdr-link-t{color:var(--text)}
.hdr-link:hover .hdr-link-go{transform:translateX(0);opacity:1;color:var(--text)}
.hdr-link:hover::after{left:130%;opacity:1}

@media (max-width:540px){
  .hdr-link{height:34px;padding:0 12px;gap:7px}
  .hdr-link-t{font-size:9.5px;letter-spacing:.18em}
}

.hdr-logo{
  font-family:var(--display);font-weight:var(--w-med);
  font-size:clamp(17px,1.9vw,22px);letter-spacing:.16em;
  position:absolute;left:50%;transform:translateX(-50%);
  white-space:nowrap;
  display:flex;align-items:center;
}

/* ------------------------------------------------------------
   Логото се изрязва от файла така, че да се показва САМО
   надписът — мотото отдолу в картинката остава извън кадъра.
   Числата идват от измерване на logo-white.png (2560x2560):
   надписът е на x 216..2426, y 1104..1363
------------------------------------------------------------ */
.logo-mark{
  --src-x:216; --src-y:1104;
  --src-w:2210; --src-h:259;
  --k:calc(var(--logo-h) / var(--src-h));
  display:block;
  width:calc(var(--src-w) * var(--k));
  height:var(--logo-h);
  background-image:url('../assets/logo-white.png');
  background-repeat:no-repeat;
  background-size:calc(2560 * var(--k)) calc(2560 * var(--k));
  background-position:calc(var(--src-x) * var(--k) * -1) calc(var(--src-y) * var(--k) * -1);
}
.hdr-logo .logo-mark{--logo-h:clamp(14px,1.6vw,18px)}

/* ------------------------------------------------------------
   ЦЯЛОТО ЛОГО — надписът ЗАЕДНО с мотото под него.
   Мерките са от самия файл: непрозрачните пиксели са
   x 216..2424, y 1104..1540 в 2560x2560.
------------------------------------------------------------ */
.logo-full{
  --src-x:216; --src-y:1104;
  --src-w:2208; --src-h:436;
  --k:calc(var(--logo-h) / var(--src-h));
  display:block;
  width:calc(var(--src-w) * var(--k));
  height:var(--logo-h);
  background-image:url('../assets/logo-white.png');
  background-repeat:no-repeat;
  background-size:calc(2560 * var(--k)) calc(2560 * var(--k));
  background-position:calc(var(--src-x) * var(--k) * -1) calc(var(--src-y) * var(--k) * -1);
}

.cart-btn{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:10px 14px;border-radius:var(--r-pill);
  min-height:44px;
  transition:background .3s var(--ease);
}
.cart-btn:hover{background:var(--surface-2)}
.cart-btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.cart-count{
  min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--red);color:#08080a;
  font-family:var(--mono);font-size:10px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.cart-count.zero{background:var(--surface-3);color:var(--text-3)}

/* ============================================================
   HOME
   ============================================================ */

.pagetop{padding-top:var(--bar-h)}

.hero{
  min-height:calc(100svh - var(--bar-h));
  display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,5vw,60px) var(--gut);
}
.hero-stage{
  position:relative;
  width:min(430px,82vw);aspect-ratio:9/16;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:0 50px 110px -60px rgba(0,0,0,1);
}
.hero-stage video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-stage .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--text-3);text-align:center;padding:24px}

.hero-side{
  position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--text-3);
  writing-mode:vertical-rl;
}
.hero-side.l{left:calc(var(--gut) * .45)}
.hero-side.r{right:calc(var(--gut) * .45);transform:translateY(-50%) rotate(180deg)}

/* ============================================================
   HOME REEL — филмите, подредени един под друг
   Уголемяват се към центъра на екрана и се фокусират
   спрямо курсора, като през визьор на камера.
   ============================================================ */

/* ---------- ОТКРИВАЩОТО ВИДЕО ----------
   Първото, което се вижда. Логото стои в средата, цяло —
   с мотото под надписа. */
.hero-top{
  position:relative;
  height:100svh;
  margin-top:calc(var(--bar-h) * -1);   /* минава под прозрачния хедър */
  overflow:hidden;
  background:#050505;
}
.hero-top video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;
  /* Сайтът е черно-бял, значи и откриващият кадър е черно-бял.
     Истинската работа - портфолиото и рийлсите - остава в цвят,
     защото това е стоката. Тук видеото е декор.
     Искаш го цветно? Махни реда filter отдолу. */
  filter:grayscale(1) contrast(1.06);
}
/* лека винетка: логото трябва да се чете върху всеки кадър */
.hero-top::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 50%,rgba(0,0,0,.34) 0%,rgba(0,0,0,.10) 55%,transparent 78%),
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 24%,transparent 68%,rgba(0,0,0,.6) 100%);
}
.hero-top .mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;display:flex;justify-content:center;width:min(76vw,900px);
}
.hero-top .logo-full{
  --logo-h:clamp(56px,10vw,132px);
  filter:drop-shadow(0 6px 34px rgba(0,0,0,.55));
}
.hero-top-cue{
  position:absolute;left:50%;bottom:clamp(34px,6vh,64px);
  transform:translateX(-50%);z-index:2;
}

/* ---------- HERO: видео на цял екран, върви непрекъснато ---------- */
.hero-reel{
  position:relative;
  height:100svh;
  margin-top:calc(var(--bar-h) * -1);   /* минава под прозрачния хедър */
  overflow:hidden;
  background:#050505;
}
/* когато откриващото видео е преди него, героят не се вдига */
.hero-top + .hero-reel{margin-top:0}
.hero-reel video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;
}
.hero-reel video.fit-contain{object-fit:contain}
.hero-reel .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  color:var(--text-3);text-align:center;padding:24px;
}
/* лека винетка, за да се четат надписите отгоре */
.hero-reel::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 22%,transparent 70%,rgba(0,0,0,.75) 100%);
}
/* Долу на героя стои само указателят за скрол. Логото е махнато —
   то си има място в хедъра и във футъра, трети път е излишно и
   само стои пред кадъра. */
.hero-mark{
  position:absolute;left:50%;bottom:clamp(46px,8vh,86px);
  transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}

.wordmark{
  display:flex;justify-content:center;
  padding:clamp(50px,10vw,120px) var(--gut) clamp(30px,5vw,60px);
}
.wordmark .logo-mark{--logo-h:clamp(38px,7.5vw,86px)}

.reel{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(50px,9vw,130px);
  padding:clamp(20px,4vw,50px) var(--gut) clamp(70px,12vw,150px);
}

/* Курсорът командва: кадърът под него расте и светва,
   останалите се смаляват и потъмняват. */
.reel-item{
  position:relative;
  --s:1; --dim:.34; --blur:0px;
  width:min(760px,100%);
  transform:scale(var(--s));
  transition:transform .45s var(--ease);
  will-change:transform;
}

.reel-stage{
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  filter:brightness(var(--dim)) blur(var(--blur));
  transition:filter .45s var(--ease),border-color .45s var(--ease);
}
/* контурът светва заедно с кадъра — така фокусът личи и когато
   видеото е тъмно или още не е качено */
.reel-item.in-focus .reel-stage{border-color:rgba(255,255,255,.34)}

/* докато няма видео файл: ясно четима плочка, за да се вижда
   подредбата и ефектът да има върху какво да действа */
.reel-stage .ph{
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.022) 0 12px, transparent 12px 24px),
    var(--surface-2);
}
.reel-stage .ph::before{
  content:'';position:absolute;inset:14px;
  border:1px dashed rgba(255,255,255,.10);border-radius:var(--r);
}
.reel-stage.r169{aspect-ratio:16/9}
.reel-stage.r916{aspect-ratio:9/16;width:min(420px,100%);margin:0 auto}
.reel-item:has(.r916) .reel-holder{width:min(420px,100%);margin:0 auto}
.reel-stage video{width:100%;height:100%;object-fit:cover;display:block}
.reel-stage .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  color:var(--text-3);text-align:center;padding:20px;
}

/* ъгловите скоби — визьорът се появява върху кадъра под курсора */
/* стои извън .reel-stage, защото stage реже всичко извън себе си.
   Появява се плавно само когато курсорът е върху кадъра. */
/* обвивка само около кадъра — скобите се мерят спрямо нея,
   за да не обхващат и надписа отдолу */
.reel-holder{position:relative}

.reel-frame{
  position:absolute;inset:0;
  pointer-events:none;
  opacity:0;
  transform:scale(.985);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.reel-item.in-focus .reel-frame{opacity:1;transform:scale(1)}
.reel-frame .c{
  position:absolute;width:24px;height:24px;
  border:1.5px solid rgba(255,255,255,.92);
}
.reel-frame .tl{top:-16px;left:-16px;border-right:none;border-bottom:none}
.reel-frame .tr{top:-16px;right:-16px;border-left:none;border-bottom:none}
.reel-frame .bl{bottom:-16px;left:-16px;border-right:none;border-top:none}
.reel-frame .br{bottom:-16px;right:-16px;border-left:none;border-top:none}

.reel-meta{
  display:flex;align-items:baseline;gap:clamp(12px,2vw,22px);
  padding:16px 4px 0;flex-wrap:wrap;
  opacity:var(--metaop,.45);
  transition:opacity .45s var(--ease);
}
.reel-meta .reel-title{
  font-family:var(--list);font-weight:400;
  font-size:clamp(17px,2.4vw,26px);letter-spacing:.03em;text-transform:uppercase;
}

/* (Старата REACH секция е махната — на нейно място е кръгът
   с Reels. Стиловете му са в css/fx.css.) */

/* дребните надписи в ъглите на екрана */
.corner-tags{
  position:fixed;inset:auto 0 0 0;z-index:300;
  display:flex;justify-content:space-between;
  padding:0 var(--gut) 18px;
  pointer-events:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  color:var(--text-3);text-transform:uppercase;
  mix-blend-mode:difference;
}

@media (max-width:760px){
  .reel{gap:clamp(40px,10vw,70px)}
  .reel-item{--s:1 !important}
  .reel-frame .c{width:14px;height:14px}
  .corner-tags{font-size:8px;padding-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .reel-item{transform:none !important;opacity:1 !important}
  .reel-stage{filter:none !important}
}

/* section shell */
.sec{padding:clamp(56px,9vw,132px) 0;border-top:1px solid var(--line)}
.sec.on-panel{background:var(--surface);border-radius:var(--r-xl);margin:0 var(--gut);border-top:none;padding-left:0;padding-right:0}
.sec.on-panel > .wrap{padding-left:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,4vw,56px);flex-wrap:wrap}
.sec-head h2{
  font-family:var(--display);font-weight:var(--w-reg);
  font-size:clamp(28px,5vw,60px);line-height:1.02;letter-spacing:-.012em;text-transform:uppercase;
}
.sec-head p{max-width:44ch;color:var(--text-2);font-size:15px}

.eyebrow-red,
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:16px;
}
.eyebrow-red{color:var(--red)}
.eyebrow-red::before{content:'';width:26px;height:1px;background:var(--red)}
/* неутралният вариант — началната страница е без червено */
.eyebrow{color:var(--text-3)}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--text-3)}

/* portfolio */
.pf{display:grid;grid-template-columns:1fr 1.62fr;gap:clamp(14px,2vw,28px);align-items:start}
.pf-item{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pf-item video{width:100%;height:100%;object-fit:cover}
.pf-v{aspect-ratio:9/16}
.pf-h{aspect-ratio:16/9}
.pf-cap{display:flex;justify-content:space-between;padding:14px 4px 0;gap:14px}
.pf-cap strong{font-family:var(--display);font-weight:var(--w-med);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.pf-item .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--text-3);text-align:center;padding:20px}

.badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;flex:none;
  border:1px solid var(--line);color:var(--text-2);background:var(--surface-2);
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge.live{color:var(--red-soft);border-color:var(--red-line);background:var(--red-wash)}
.badge.live::before{
  background:var(--red);
  animation:pulseDot 2.4s var(--ease) infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(115,115,115,.5)}
  70%{box-shadow:0 0 0 7px rgba(115,115,115,0)}
  100%{box-shadow:0 0 0 0 rgba(115,115,115,0)}
}
.badge.soon{color:var(--text-3)}

/* ============================================================
   EVENT LIST
   ============================================================ */

.evsection{background:var(--surface);border-radius:var(--r-xl);margin:0 var(--gut)}
.evsection-in{padding-top:clamp(34px,5vw,60px);padding-bottom:clamp(40px,6vw,76px)}

.evlist-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:clamp(16px,2vw,24px);
  border-bottom:1px solid var(--line);
}
.evlist-head h2{
  font-family:var(--display);font-weight:var(--w-reg);
  font-size:clamp(20px,2.6vw,30px);letter-spacing:-.01em;text-transform:uppercase;
}

/* Списък, а не бутони: редовете са разделени с тънка линия,
   без кутии и без фон. Тежестта носи типографията. */
.evlist{display:flex;flex-direction:column;border-top:1px solid var(--line)}

.ev{
  display:grid;
  grid-template-columns:48px 1fr auto auto;
  gap:clamp(12px,2.4vw,32px);
  align-items:baseline;
  border-bottom:1px solid var(--line);
  padding:clamp(18px,2.4vw,28px) clamp(4px,1vw,12px);
  transition:transform .45s var(--ease),background .35s var(--ease),color .3s var(--ease);
}
.ev:hover{background:rgba(255,255,255,.025);transform:translateX(clamp(10px,1.6vw,18px))}
.ev.is-soon{opacity:.42}
.ev.is-soon:hover{transform:none;background:none}

.ev-idx{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text-3)}
.ev-main{min-width:0}
.ev-name{
  display:block;
  font-family:var(--list);font-weight:400;
  font-size:clamp(22px,4vw,50px);line-height:1;letter-spacing:.01em;text-transform:uppercase;
  transition:color .3s var(--ease);
}
.ev:hover .ev-name{color:#fff}
.ev-sub{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--text-3);margin-top:10px}
.ev-meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text-3);text-align:right;white-space:nowrap;line-height:1.9}
.ev-right{display:flex;align-items:center;gap:clamp(12px,2vw,22px)}
.ev-go{font-size:18px;color:var(--text-3);transition:transform .4s var(--ease),color .3s}
.ev:hover .ev-go{transform:translateX(8px);color:var(--text)}

/* ============================================================
   RACE TABLE — на компютър списъкът е таблица със колони
   и заглавен ред, като стартов протокол. На телефон редовете
   се разгъват един под друг.
   ============================================================ */

.evtable{border-top:1px solid var(--line)}

.evrow{
  display:grid;
  grid-template-columns:56px minmax(0,2.1fr) minmax(0,1.4fr) 118px 104px 82px auto;
  gap:clamp(10px,1.6vw,26px);
  align-items:center;
  padding:clamp(13px,1.5vw,18px) clamp(4px,1vw,12px);
  border-bottom:1px solid var(--line-2);
  transition:background .3s var(--ease),transform .4s var(--ease);
}

/* заглавният ред: само етикети, без линия отдолу */
.evrow.head{
  border-bottom:1px solid var(--line);
  padding-top:0;padding-bottom:14px;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  color:var(--text-3);text-transform:uppercase;
}
.evrow.head:hover{background:none;transform:none}

a.evrow:hover{background:rgba(255,255,255,.03);transform:translateX(clamp(8px,1.4vw,16px))}
.evrow.is-soon{opacity:.4}
a.evrow.is-soon:hover{background:none;transform:none}

.evrow .c-idx{font-family:var(--mono);font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.evrow .c-name{
  font-family:var(--list);font-weight:400;
  font-size:clamp(19px,2.4vw,30px);line-height:1.05;letter-spacing:.01em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .3s var(--ease);
}
a.evrow:hover .c-name{color:#fff}
.evrow .c-loc,
.evrow .c-disc,
.evrow .c-date,
.evrow .c-riders{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.evrow .c-date,
.evrow .c-riders{font-variant-numeric:tabular-nums}
.evrow .c-riders{text-align:right}
.evrow .c-status{display:flex;justify-content:flex-end}

@media (max-width:900px){
  .evrow{
    grid-template-columns:1fr auto;
    row-gap:8px;
    padding:16px clamp(4px,1vw,12px);
  }
  .evrow.head{display:none}          /* на телефон заглавният ред е излишен */
  .evrow .c-idx{display:none}
  .evrow .c-name{grid-column:1/3;white-space:normal}
  .evrow .c-loc{grid-column:1/2}
  .evrow .c-disc{display:none}
  .evrow .c-date{grid-column:2/3;text-align:right}
  .evrow .c-riders{grid-column:1/2}
  .evrow .c-status{grid-column:2/3}
}

/* ============================================================
   EVENT PAGE
   ============================================================ */

.pagehead{padding:clamp(40px,7vw,96px) 0 clamp(26px,4vw,52px)}
.pagehead h1{
  font-family:var(--display);font-weight:var(--w-light);
  font-size:clamp(34px,8vw,104px);line-height:.98;letter-spacing:-.015em;text-transform:uppercase;
}
.pagehead .lede{max-width:52ch;margin-top:20px;color:var(--text-2);font-size:clamp(15px,1.6vw,17px)}
.crumbs{display:flex;gap:10px;align-items:center;margin-bottom:18px;color:var(--text-3);flex-wrap:wrap}
.crumbs a:hover{color:var(--red)}

.searchwrap{
  padding:clamp(24px,4vw,44px) 0 clamp(30px,5vw,56px);
  background:var(--surface);border-radius:var(--r-xl);margin:0 var(--gut);
}
.searchwrap > .wrap{padding-left:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px)}
.searchform{
  display:flex;align-items:stretch;max-width:760px;margin:18px auto 0;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:6px 6px 6px 26px;
  transition:border-color .3s var(--ease),box-shadow .35s var(--ease);
}
.searchform:focus-within{border-color:var(--red-line);box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.searchform .pfx{display:flex;align-items:center;font-family:var(--display);font-weight:var(--w-reg);font-size:clamp(22px,3.4vw,36px);color:var(--red);padding-right:10px}
.searchform input{
  flex:1;border:none;outline:none;background:none;
  font-family:var(--display);font-weight:var(--w-reg);
  font-size:clamp(22px,3.4vw,36px);letter-spacing:0;
  padding:8px 0;color:var(--text);min-width:0;
}
.searchform input::placeholder{color:var(--text-3)}
.search-hint{text-align:center;margin-top:16px;color:var(--text-3)}

.resbar{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding:clamp(26px,4vw,48px) 0 clamp(16px,2vw,26px)}
.resbar h2{font-family:var(--display);font-weight:var(--w-reg);font-size:clamp(20px,3.2vw,38px);letter-spacing:-.01em;text-transform:uppercase}
.resbar h2 b{font-weight:var(--w-reg);color:var(--red)}

.empty{padding:clamp(50px,9vw,110px) 0;text-align:center}
.empty h3{font-family:var(--display);font-weight:var(--w-reg);font-size:clamp(20px,3.4vw,36px);letter-spacing:-.01em;text-transform:uppercase;margin-bottom:14px}
.empty p{color:var(--text-2);max-width:46ch;margin:0 auto}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2.4vw,32px);padding-bottom:clamp(40px,6vw,80px)}

.vcard{
  border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .3s,box-shadow .4s var(--ease),transform .35s var(--ease);
}
.vcard:hover{border-color:rgba(255,255,255,.18);transform:translateY(-3px);box-shadow:0 28px 56px -36px rgba(0,0,0,1)}
.vcard.picked{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 24px 50px -34px rgba(255,255,255,.22)}

/* player + watermarks */
/* Всички прегледи са 3:4 — един и същ размер за целия ред,
   независимо дали клипът е хоризонтален или вертикален.
   Кадърът се пълни до ръба. */
.vplayer{position:relative;background:#000;overflow:hidden;aspect-ratio:3/4;cursor:pointer}
.vplayer video{width:100%;height:100%;object-fit:cover;background:#000}
.vplayer .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#5a5a5a;text-align:center;padding:18px;background:#0d0d0d}

/* докато тегли файла — тънка лента, за да се вижда че нещо става */
.vplayer.loading::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:loadSweep 1.1s linear infinite;
}
@keyframes loadSweep{
  0%{background-position:-40% 0}
  100%{background-position:140% 0}
}

/* Водният знак е ЛОГОТО, не текст. Ползва същото изрязване на
   logo-white.png като хедъра и футъра (.logo-mark), затова
   всеки преглед носи бранда, а не просто надпис. */
.wm{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.wm-tile{
  position:absolute;inset:-55%;
  display:grid;grid-template-columns:repeat(3,1fr);
  align-content:space-around;justify-items:center;gap:clamp(26px,6.5vw,52px) 12px;
  transform:rotate(-24deg);
}
.wm-tile .logo-mark{
  --logo-h:10px;
  opacity:.55;
  /* тъмен кант отдолу: върху светъл кадър бялото лого изчезва,
     ако няма на какво да стъпи */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.85)) drop-shadow(0 0 6px rgba(0,0,0,.5));
}
.wm-big{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);
}
.wm-big .logo-mark{
  --logo-h:clamp(20px,4.4vw,34px);opacity:.34;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));
}
.wm-corner{position:absolute;top:12px;left:14px}
.wm-corner .logo-mark{
  --logo-h:11px;opacity:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.9));
}
.wm-badge{
  position:absolute;top:12px;right:14px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  color:rgba(255,255,255,.62);text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* custom controls */
/* Прегледът не се пипа: никакви контроли, никакво превъртане,
   никакво сваляне. Клипът се върти на цикъл под водния знак и
   курсорът минава през него, все едно е картинка. */
.vplayer video,
.vplayer iframe{pointer-events:none;user-select:none;-webkit-user-select:none}
.vplayer video::-webkit-media-controls{display:none !important}

/* плейърът на Bunny, когато BUNNY.mode е 'iframe' */
.vplayer iframe{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;background:#000;
}
/* статична миниатюра, докато плочката е извън кадър —
   плейърът се закача едва когато влезе в изгледа */
.iframe-poster{
  position:absolute;inset:0;background:#0d0d0d center/cover no-repeat;
}
.vbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:4px;flex:1}
.vbody h3{font-family:var(--display);font-weight:var(--w-med);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.vbody .vmeta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text-3)}
.vfoot{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}

/* sticky bundle bar */
/* Лентата носи и клас .lq заради стъклото, а .lq слага
   position:relative. glass.css се зарежда след този файл, значи
   при равна специфичност щеше да победи и лентата да падне в
   потока — затова тук е с двоен клас. */
.bundlebar,
.bundlebar.lq{
  position:fixed;left:var(--gut);right:var(--gut);bottom:clamp(12px,2vw,22px);z-index:500;
  background:rgba(23,23,28,.86);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  color:var(--text);
  transform:translateY(calc(100% + 40px));transition:transform .55s var(--spring);
  box-shadow:0 30px 70px -40px rgba(0,0,0,1);
}
.bundlebar.up{transform:translateY(0)}
/* мигва веднъж, когато четвъртият клип е донесъл целия пакет */
.bundlebar.flash{animation:barFlash .9s var(--ease)}
@keyframes barFlash{
  0%{box-shadow:0 30px 70px -40px rgba(0,0,0,1),0 0 0 0 rgba(255,255,255,.5)}
  35%{box-shadow:0 30px 70px -40px rgba(0,0,0,1),0 0 0 3px rgba(240,242,248,.45)}
  100%{box-shadow:0 30px 70px -40px rgba(0,0,0,1),0 0 0 0 rgba(255,255,255,0)}
}
.bundlebar .inner{
  max-width:1400px;margin:0 auto;padding:16px clamp(18px,2.5vw,30px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.bundlebar .bl{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.bundlebar .bprice{font-family:var(--display);font-weight:var(--w-reg);font-size:clamp(19px,2.6vw,28px)}
.bundlebar .bwas{font-family:var(--mono);font-size:12px;color:var(--text-3);text-decoration:line-through}
.bundlebar .bnudge{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--red-soft)}

/* price ladder */
.ladder{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  margin-top:clamp(20px,3vw,36px);background:var(--surface);
}
.ladder .tier{padding:clamp(18px,2.4vw,28px);border-right:1px solid var(--line);transition:background .3s}
.ladder .tier:last-child{border-right:none}
.ladder .tier.active{background:var(--red-wash)}
.ladder .tier.active .t-lbl{color:var(--red-soft)}
.ladder .tier.active .t-price{color:var(--red-soft)}
.ladder .t-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--text-3);margin-bottom:10px}
.ladder .t-price{font-family:var(--display);font-weight:var(--w-reg);font-size:clamp(22px,3vw,32px)}
.ladder .t-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;margin-top:6px;color:var(--text-3)}

/* ============================================================
   CART
   ============================================================ */

.cartgrid{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(24px,4vw,60px);align-items:start;padding-bottom:clamp(50px,8vw,110px)}
.cgroup{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:18px;background:var(--surface)}
.cgroup-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.cgroup-h strong{font-family:var(--display);font-weight:var(--w-med);font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.cgroup-h .num{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--text-3)}
.crow{display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line-2)}
.crow:last-child{border-bottom:none}
.crow .cthumb{width:84px;aspect-ratio:16/9;background:#0b0b0d;border-radius:var(--r-xs);flex:none;position:relative;overflow:hidden}
.crow .cthumb span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:var(--w-med);font-size:8px;letter-spacing:.1em;color:rgba(255,255,255,.4)}
.crow .cinfo{flex:1;min-width:0}
.crow .cinfo h4{font-family:var(--display);font-weight:var(--w-med);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.crow .cinfo p{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text-3);margin-top:3px}
.crow .cdel{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text-3);
  padding:10px 12px;border-radius:var(--r-pill);min-height:40px;
  transition:color .25s,background .25s;
}
.crow .cdel:hover{color:var(--red);background:var(--red-wash)}
.gbundle{padding:16px 22px;background:var(--surface-2);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.gbundle .gtxt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text-2)}
.gbundle .gprice{font-family:var(--display);font-weight:var(--w-reg);font-size:19px}

.summary{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);
  position:sticky;top:calc(var(--bar-h) + 20px);
  background:var(--surface);
}
.summary h3{font-family:var(--display);font-weight:var(--w-reg);font-size:19px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:18px}
.sline{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:14px;color:var(--text-2)}
.sline.total{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;color:var(--text)}
.sline.total .v{font-family:var(--display);font-weight:var(--w-reg);font-size:28px}
.sline.save{color:var(--red-soft)}
.summary .btn{margin-top:20px}
.summary .fine{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--text-3);margin-top:14px;line-height:1.9}

.demo-note{
  border:1px solid var(--red-line);background:var(--red-wash);
  border-radius:var(--r-sm);
  padding:14px 16px;margin-top:16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;line-height:1.9;color:var(--red-soft);
}

/* ============================================================
   CONTENT PAGES
   ============================================================ */

.rich{max-width:70ch;padding-bottom:clamp(50px,8vw,110px)}
.rich p{margin-bottom:18px;color:var(--text-2);font-size:clamp(15px,1.6vw,17px)}
.rich h3{font-family:var(--display);font-weight:var(--w-reg);font-size:clamp(18px,2.2vw,24px);letter-spacing:.01em;text-transform:uppercase;margin:34px 0 12px}

.ctable{margin-bottom:clamp(40px,6vw,80px);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.ctable div{display:flex;justify-content:space-between;gap:20px;padding:18px clamp(18px,2.2vw,26px);border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.ctable div:last-child{border-bottom:none}
.ctable dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--text-3)}
.ctable dd{font-family:var(--display);font-weight:var(--w-reg);font-size:clamp(15px,2vw,19px);letter-spacing:.01em}

/* ============================================================
   FOOTER
   ============================================================ */

.ftr{border-top:1px solid var(--line);padding:clamp(40px,6vw,80px) 0 30px;margin-top:clamp(40px,6vw,90px)}
.ftr-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,64px)}
.ftr-mark{font-family:var(--display);font-weight:var(--w-light);font-size:clamp(34px,8vw,96px);line-height:.9;letter-spacing:-.01em}
.ftr-mark .logo-mark{--logo-h:clamp(26px,5vw,56px)}
/* мотото стои само тук, под голямото лого — не се повтаря другаде */
.ftr-tag{font-family:var(--display);font-weight:var(--w-reg);font-size:clamp(10px,1.2vw,13px);letter-spacing:.14em;color:var(--text-3);margin-top:14px}
.ftr-cols{display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap}
.ftr-col h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--text-3);margin-bottom:14px}
.ftr-col a,.ftr-col p{display:block;font-size:14px;color:var(--text-2);padding:3px 0;transition:color .25s}
.ftr-col a:hover{color:var(--red)}
.ftr-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);color:var(--text-3)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1000px){
  .cartgrid{grid-template-columns:1fr}
  .summary{position:static}
  .pf{grid-template-columns:1fr}
  .pf-v{max-width:420px}
}
@media (max-width:760px){
  :root{--bar-h:62px}
  .hdr-logo{font-size:16px}
  .cart-btn .lbl{display:none}
  .hero-side{display:none}
  .ev{grid-template-columns:1fr auto;row-gap:12px;padding:18px}
  .ev-idx{display:none}
  .ev-main{grid-column:1/3}
  .ev-meta{text-align:left;font-size:9px}
  .ev-right{justify-content:flex-end}
  .ev-go{display:none}
  .vgrid{grid-template-columns:1fr}
  .bundlebar .bnudge{display:none}
  .sec.on-panel,.evsection,.searchwrap{margin-left:0;margin-right:0;border-radius:var(--r-lg)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
  .badge.live::before{animation:none}
  .btn::before,button::before{display:none}
}