@font-face { font-family: "Manrope"; src: url("fonts/Manrope_500Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope_800ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("fonts/Unbounded_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #070406; --surface: #140b10; --surface2: #1e1018; --text: #f0dccb; --muted: #b59f93; --line: #3a2430;
  --accent: #c21a24; --accent-hi: #e8454f; --on-accent: #fff; --glow: rgba(232, 69, 79, .55);
  --mx: 50vw; --my: 40vh;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 1.05rem/1.6 "Manrope", system-ui, sans-serif; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--accent-hi); }
h1, h2, h3 { font-family: "Unbounded", "Manrope", sans-serif; font-weight: 700; line-height: 1.15; margin: 0 0 .8rem; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.9rem, 8.2vw, 4.4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.35rem, 5vw, 2.2rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }
.wrap { width: min(1080px, 100% - 2rem); margin-inline: auto; position: relative; z-index: 1; }
section { padding: clamp(2.8rem, 8vw, 5.5rem) 0; border-top: 1px solid var(--line); position: relative; }
.eyebrow { color: var(--accent-hi); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--glow); }
.lead { font-size: clamp(1.05rem, 3.6vw, 1.25rem); max-width: 46rem; }
.muted { color: var(--muted); }

/* филмово зърно + виньетка върху целия сайт */
body::before { content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
body::after { content: ""; position: fixed; inset: 0; z-index: 99; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)); }

/* навигация */
header.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); font-family: "Unbounded", sans-serif; font-size: .85rem; }
.brand img { width: 2.4rem; height: 2.4rem; border-radius: 50%; }
header.top nav { margin-left: auto; display: flex; gap: .2rem; }
header.top nav a { color: var(--text); text-decoration: none; padding: .55rem .75rem; border-radius: 8px; white-space: nowrap; font-size: .95rem; }
header.top nav a:hover { background: var(--surface2); }
header.top nav a.cta { background: var(--accent); color: var(--on-accent); font-weight: 800; box-shadow: 0 0 18px -4px var(--glow); }
.burger { display: none; margin-left: auto; width: 2.8rem; height: 2.8rem; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; padding: 0; }
.burger span, .burger span::before, .burger span::after { display: block; width: 1.3rem; height: 2px; background: var(--text); margin: auto; position: relative; transition: transform .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded=true] span { background: transparent; }
.burger[aria-expanded=true] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded=true] span::after { transform: translateY(-6px) rotate(-45deg); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.4rem; background: var(--accent); color: var(--on-accent); border: 2px solid var(--accent); border-radius: 10px; font: 800 1rem "Manrope", sans-serif; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; box-shadow: 0 0 0 0 var(--glow); }
.btn:hover { background: var(--accent-hi); border-color: var(--accent-hi); box-shadow: 0 0 26px -2px var(--glow); transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--text); }
.btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
:focus-visible { outline: 3px solid var(--accent-hi); outline-offset: 2px; }

/* начало: прожектор + скрити думи */
.hero { border-top: 0; min-height: min(86vh, 760px); display: flex; align-items: center; overflow: hidden; isolation: isolate; background:
  radial-gradient(ellipse at 80% 0%, rgba(194, 26, 36, .3), transparent 55%), linear-gradient(#0d0509, var(--bg)); }
.hero .skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: -1; opacity: .9; }
.hero .skyline path { fill: #0e0709; stroke: #2a1219; stroke-width: 2; }
.hero .skyline .win { fill: #ffb25b; opacity: 0; animation: win 6s infinite; }
@keyframes win { 0%, 8%, 100% { opacity: 0; } 12%, 70% { opacity: .85; } 74% { opacity: .2; } 78% { opacity: .85; } }
.secrets { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: radial-gradient(circle 170px at var(--mx) var(--my), #000 0, transparent 100%); mask-image: radial-gradient(circle 170px at var(--mx) var(--my), #000 0, transparent 100%); }
.secrets b { position: absolute; font-family: "Unbounded", sans-serif; color: var(--accent-hi); font-size: clamp(.9rem, 3vw, 1.5rem); letter-spacing: .12em; text-shadow: 0 0 14px var(--glow); white-space: nowrap; }
.dark { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle 260px at var(--mx) var(--my), transparent 0, rgba(0, 0, 0, .55) 100%); }
.hero h1 .acc { color: var(--accent-hi); }
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-t); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.glitch::before { color: #3fe0ff; transform: translate(-2px, 0); clip-path: inset(0 0 100% 0); animation: gl1 5s infinite; mix-blend-mode: screen; }
.glitch::after { color: var(--accent-hi); transform: translate(2px, 0); clip-path: inset(0 0 100% 0); animation: gl2 5s infinite; mix-blend-mode: screen; }
@keyframes gl1 { 0%, 90%, 100% { clip-path: inset(0 0 100% 0); } 92% { clip-path: inset(10% 0 60% 0); } 94% { clip-path: inset(55% 0 20% 0); } 96% { clip-path: inset(0 0 100% 0); } }
@keyframes gl2 { 0%, 91%, 100% { clip-path: inset(0 0 100% 0); } 93% { clip-path: inset(60% 0 10% 0); } 95% { clip-path: inset(20% 0 55% 0); } 97% { clip-path: inset(0 0 100% 0); } }
.tag { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--accent); color: var(--accent-hi); border-radius: 999px; padding: .25rem .9rem; font-weight: 800; font-size: .82rem; margin-bottom: 1rem; }
.tag i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent-hi); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .15; } }
.hint { color: var(--muted); font-size: .85rem; margin-top: 1.4rem; }

/* разкриване при превъртане */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s, transform .7s; }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-top: 1.5rem; }
.grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid.four { grid-template-columns: 1fr; } }
.card { background: linear-gradient(160deg, var(--surface), var(--surface2)); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem; position: relative; transition: border-color .25s, transform .25s, box-shadow .25s; }
.card:hover { border-color: var(--accent); box-shadow: 0 10px 40px -18px var(--glow); }
.card .n { font-family: "Unbounded", sans-serif; color: var(--accent-hi); font-size: 1.7rem; display: block; margin-bottom: .4rem; text-shadow: 0 0 16px var(--glow); }
.card p { margin: 0; color: var(--muted); }

/* намерена бележка */
.tx { margin-top: 2rem; border: 1px solid var(--accent); border-radius: 14px; background: #0c0508; padding: 1.2rem; box-shadow: 0 0 40px -18px var(--glow) inset, 0 0 40px -20px var(--glow); }
.tx-h { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; color: var(--accent-hi); font: 700 .8rem "Manrope"; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.2rem; }
.eq i { width: 4px; background: var(--accent-hi); height: 30%; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .15s; } .eq i:nth-child(3) { animation-delay: .3s; } .eq i:nth-child(4) { animation-delay: .45s; } .eq i:nth-child(5) { animation-delay: .6s; }
@keyframes eq { 50% { height: 100%; } }
.tx-b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(.9rem, 3.3vw, 1.05rem); min-height: 7.5em; white-space: pre-wrap; color: #ffd9bd; }
.tx-b::after { content: "▌"; animation: blink 1s infinite; color: var(--accent-hi); }

/* игри */
.games { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 1.6rem; }
.game { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; overflow: hidden; }
.game::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); }
.game h3 { font-size: 1.35rem; margin: .3rem 0 0; }
.game .meta { display: grid; gap: .25rem; margin: .4rem 0 1rem; font-size: .95rem; color: var(--muted); }
.game .meta b { color: var(--text); }
.game .btn { margin-top: auto; width: 100%; }
.badge { align-self: flex-start; font-size: .76rem; font-weight: 800; padding: .15rem .65rem; border-radius: 999px; background: var(--surface2); border: 1px solid var(--line); }
.badge.open { border-color: #2f9e5e; color: #7be0a4; }
.badge.soon { border-color: #b88a2a; color: #f0c261; }
.count { font-family: "Unbounded", sans-serif; color: var(--accent-hi); font-size: 1rem; }


/* попъп за записване */
dialog { width: min(520px, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border: 1px solid var(--accent); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 0 80px -10px var(--glow); overflow: auto; }
dialog::backdrop { background: rgba(0, 0, 0, .8); backdrop-filter: blur(4px); }
dialog[open] { animation: pop .25s ease-out; }
@keyframes pop { from { transform: translateY(14px) scale(.97); opacity: 0; } }
.dlg { padding: clamp(1.1rem, 5vw, 1.8rem); display: grid; gap: 1rem; }
.dlg-h { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.dlg-h h2 { margin: 0; font-size: 1.25rem; }
.dlg-h small { color: var(--accent-hi); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; display: block; margin-bottom: .3rem; }
.x { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.x:hover { border-color: var(--text); }
label { display: grid; gap: .35rem; font-weight: 700; font-size: .95rem; }
input, select, textarea { font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1.5px solid var(--line); border-radius: 10px; padding: .8rem .9rem; width: 100%; min-height: 3rem; }
input:focus, select:focus { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }
input[aria-invalid=true] { border-color: var(--accent-hi); }
.stepper { display: grid; grid-template-columns: 3rem 1fr 3rem; gap: .5rem; }
.stepper button { border: 1.5px solid var(--line); background: var(--bg); color: var(--text); border-radius: 10px; font-size: 1.4rem; cursor: pointer; min-height: 3rem; }
.stepper button:hover { border-color: var(--accent); }
.stepper input { text-align: center; font-weight: 800; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 500; }
.check input { width: 1.4rem; height: 1.4rem; min-height: 0; margin-top: .15rem; flex: none; accent-color: var(--accent); }
.check small { display: block; color: var(--muted); }
.hp { position: absolute; left: -9999px; }
#msg { margin: 0; padding: .8rem 1rem; border-radius: 10px; display: none; font-weight: 700; }
#msg.ok { display: block; background: rgba(47, 158, 94, .15); border: 1px solid #2f9e5e; }
#msg.err { display: block; background: rgba(194, 26, 36, .18); border: 1px solid var(--accent); }
.done { text-align: center; padding: 1rem 0; }
.done .tick { font-size: 3rem; color: #7be0a4; }


@media (max-width: 760px) {
  .burger { display: block; }
  header.top nav { position: fixed; inset: 3.6rem 0 auto 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--accent); padding: .6rem 1rem 1rem; transform: translateY(-120%); transition: transform .25s; max-height: calc(100dvh - 3.6rem); overflow: auto; }
  header.top nav.open { transform: none; }
  header.top nav a { padding: .95rem .5rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  header.top nav a.cta { margin-top: .8rem; text-align: center; border-radius: 10px; border: 0; }
  .brand span { font-size: .78rem; }
  .btns .btn { flex: 1 1 100%; }
  .hero { min-height: 0; padding-top: 3rem; padding-bottom: 5rem; }
  .hero .skyline { height: 26%; }
}
@media (max-width: 380px) { .brand span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, .glitch::before, .glitch::after, .eq i, .tag i, .skyline .win { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
}

/* цени */
.plans { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); margin-top: 1.8rem; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; }
.plan:hover { transform: none; }
.plan-h { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.plan h3 { margin: 0; font-size: 1rem; }
.plan .amt { font: 700 1.55rem/1.1 "Unbounded", sans-serif; white-space: nowrap; }
.plan .unit { color: var(--muted); font-size: .88rem; min-height: 1.3em; }
.plan ul { list-style: none; margin: .8rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .55rem; font-size: .95rem; color: var(--muted); }
.plan li { padding-left: 1.6rem; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-hi); font-weight: 800; }
.plan.feat { border-color: var(--accent); box-shadow: 0 0 34px -18px var(--glow); }
.plan .flag { position: absolute; top: -.7rem; right: 1.2rem; background: var(--accent); color: var(--on-accent); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .7rem; border-radius: 999px; }

/* контакти */
.contact-box { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .contact-box { grid-template-columns: 1fr 1.15fr; gap: 3rem; } }
.clist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.clist a, .clist .row { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--text); min-height: 3.6rem; }
.clist a:hover { border-color: var(--accent); background: var(--surface2); }
.ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 10px; display: grid; place-items: center; background: rgba(194, 26, 36, .14); color: var(--accent-hi); }
.ico svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.clist small { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.clist b { font-weight: 700; overflow-wrap: anywhere; }

/* футър */
footer.site { background: #050304; border-top: 1px solid var(--line); padding: 3.2rem 0 0; }
.f-grid { display: grid; gap: 2rem; grid-template-columns: 1.5fr 1fr 1fr; }
.f-brand img { height: 3.2rem; width: auto; margin-bottom: .8rem; }
.f-brand p { max-width: 24rem; font-size: .95rem; }
footer h4 { font: 800 .74rem "Manrope", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--text); margin: 0 0 1rem; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); text-decoration: underline; }
.f-bar { border-top: 1px solid var(--line); margin-top: 2.5rem; padding: 1.2rem 0 1.8rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; font-size: .85rem; color: var(--muted); }
@media (max-width: 760px) { .f-grid { grid-template-columns: 1fr 1fr; } .f-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .f-grid { grid-template-columns: 1fr; } }
footer li { color: var(--muted); }

/* ================= ХОРЪР СЛОЙ ================= */
:root { --bg: #050204; --blood: #a3121b; }
body { background: var(--bg); }
body::after { animation: vig 1.8s ease-in-out infinite; background: radial-gradient(ellipse at center, transparent 45%, rgba(60, 0, 6, .55) 80%, rgba(0, 0, 0, .8)); }
@keyframes vig { 0%, 100% { opacity: .85; } 14% { opacity: 1; } 28% { opacity: .85; } 42% { opacity: .97; } }

/* интро при отваряне */
#intro { position: fixed; inset: 0; z-index: 300; background: #000; display: grid; place-items: center; padding: 1.5rem; text-align: center; transition: opacity .5s, filter .5s; }
html.no-js #intro { display: none; }
#intro.out { opacity: 0; filter: contrast(3) brightness(2); pointer-events: none; }
.in-noise { position: absolute; inset: -50%; opacity: .22; animation: grain .25s steps(5) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.in-box { position: relative; display: grid; gap: 1.4rem; justify-items: center; max-width: 34rem; }
.in-small { margin: 0; font: 800 .8rem "Manrope"; letter-spacing: .3em; color: #ff6a58; animation: blink 1s infinite; }
.in-line { margin: 0; min-height: 4.6em; font: 700 clamp(1.3rem, 6.5vw, 2.4rem)/1.25 "Unbounded", sans-serif; text-transform: uppercase; color: var(--text); text-shadow: 2px 0 #3fe0ff, -2px 0 var(--accent-hi); white-space: pre-line; }
.in-line::after { content: "▌"; animation: blink 1s steps(1) infinite; color: var(--accent-hi); }
.in-btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* кадър на камера, мигаща светлина, очи в тъмното */
.vf { position: absolute; inset: 1rem; z-index: -1; pointer-events: none; font: 700 .75rem ui-monospace, Menlo, monospace; letter-spacing: .12em; color: rgba(240, 220, 203, .7); }
.vf i { position: absolute; width: 1.4rem; height: 1.4rem; border: 2px solid rgba(240, 220, 203, .55); }
.vf i:nth-of-type(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; } .vf i:nth-of-type(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.vf i:nth-of-type(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; } .vf i:nth-of-type(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.vf-rec { position: absolute; left: 2rem; top: .3rem; color: #ff4a3c; animation: blink 1s steps(1) infinite; }
.vf-tc { position: absolute; right: 2rem; top: .3rem; }
.vf-ch { position: absolute; left: 2rem; bottom: .3rem; }
.lights { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #000; opacity: 0; animation: lights 11s infinite; }
@keyframes lights { 0%, 39% { opacity: 0; } 40% { opacity: .8; } 40.6% { opacity: 0; } 41.4% { opacity: .55; } 42% { opacity: 0; } 88% { opacity: 0; } 88.4% { opacity: .9; } 89% { opacity: .1; } 89.5% { opacity: .85; } 90.5% { opacity: 0; } }
.eyes-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.eyes { position: absolute; display: flex; gap: .55rem; opacity: 0; animation: eyes 17s infinite; }
.eyes i { width: 16px; height: 7px; border-radius: 50%; background: radial-gradient(ellipse, #ffd9a0 8%, #e8454f 50%, transparent 72%); box-shadow: 0 0 14px 2px rgba(232, 69, 79, .7); transform-origin: center; }
@keyframes eyes { 0%, 58% { opacity: 0; } 60% { opacity: 1; } 64% { opacity: 1; } 65% { opacity: 1; transform: scaleY(.1); } 66% { transform: scaleY(1); } 72% { opacity: 1; } 73.5% { opacity: 0; } 100% { opacity: 0; } }

/* кръв по горния ръб: локва, капещи струи със сгъстени краища и падащи капки */
header.top { overflow: visible; }
header.top::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 76px; pointer-events: none; transform-origin: top; animation: ooze 9s ease-in-out infinite alternate; opacity: .62;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='128' viewBox='0 0 720 128'><defs><linearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='128'><stop offset='0' stop-color='%23630a11'/><stop offset='.4' stop-color='%237c0e16'/><stop offset='1' stop-color='%23560910'/></linearGradient></defs><path d='M0 0H720V12 Q690 25 660 18 Q630 20 600 13 Q570 28 540 21 Q510 23 480 16 Q450 24 420 17 Q390 23 360 16 Q330 24 300 17 Q270 23 240 16 Q210 24 180 17 Q150 19 120 12 Q90 28 60 21 Q30 23 0 16Z' fill='url(%23g)'/><path d='M35 9 C35 32,37 56,34 64 A6 6 0 1 0 46 64 C43 56,45 32,45 9Z M114.5 9 C114.5 15,116 23,114 29 A4.5 4.5 0 1 0 122 29 C120 23,121.5 15,121.5 9Z' fill='url(%23g)'/><path d='M170 9 C170 47,173 87,170 97 A7 7 0 1 0 182 97 C179 87,182 47,182 9Z' fill='url(%23g)'/><path d='M258 9 C258 23,260 40,257 47 A5 5 0 1 0 267 47 C264 40,266 23,266 9Z' fill='url(%23g)'/><path d='M327 9 C327 10,328 12,326 18 A4 4 0 1 0 334 18 C332 12,333 10,333 9Z M392.5 9 C392.5 40,395 72,392 81 A6.5 6.5 0 1 0 404 81 C401 72,403.5 40,403.5 9Z M466.5 9 C466.5 18,468 29,466 35 A4.5 4.5 0 1 0 474 35 C472 29,473.5 18,473.5 9Z M529.5 9 C529.5 53,532 100,529 110 A7.5 7.5 0 1 0 543 110 C540 100,542.5 53,542.5 9Z' fill='url(%23g)'/><path d='M608 9 C608 26,610 46,607 53 A5.2 5.2 0 1 0 617 53 C614 46,616 26,616 9Z' fill='url(%23g)'/><path d='M673 9 C673 14,674 20,672 26 A4 4 0 1 0 680 26 C678 20,679 14,679 9Z' fill='url(%23g)'/><ellipse cx='37.9' cy='61.0' rx='1.3' ry='3.3' fill='white' opacity='.28'/><ellipse cx='116.4' cy='27.2' rx='1.0' ry='2.5' fill='white' opacity='.28'/><ellipse cx='173.6' cy='93.5' rx='1.5' ry='3.9' fill='white' opacity='.28'/><ellipse cx='260.2' cy='44.5' rx='1.1' ry='2.8' fill='white' opacity='.28'/><ellipse cx='328.6' cy='16.0' rx='0.9' ry='2.2' fill='white' opacity='.28'/><ellipse cx='395.7' cy='78.2' rx='1.4' ry='3.6' fill='white' opacity='.28'/><ellipse cx='468.4' cy='33.2' rx='1.0' ry='2.5' fill='white' opacity='.28'/><ellipse cx='533.4' cy='106.8' rx='1.6' ry='4.1' fill='white' opacity='.28'/><ellipse cx='610.2' cy='50.2' rx='1.1' ry='2.9' fill='white' opacity='.28'/><ellipse cx='674.6' cy='24.0' rx='0.9' ry='2.2' fill='white' opacity='.28'/></svg>") repeat-x top left / 400px auto;
  -webkit-mask-image: linear-gradient(#000 25%, transparent 96%); mask-image: linear-gradient(#000 25%, transparent 96%); }
header.top::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 110px; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='200' viewBox='0 0 720 200'><g fill='%23700c14'><path d='M40 11.2 C40.8 15.4,44.2 17.9,44.2 21.3 A4.2 4.2 0 1 1 35.8 21.3 C35.8 17.9,39.2 15.4,40 11.2Z'/><path d='M118 88.7 C118.6 91.7,121.0 93.5,121.0 95.9 A3 3 0 1 1 115.0 95.9 C115.0 93.5,117.4 91.7,118 88.7Z'/><path d='M176 139.5 C177.0 144.5,181.0 147.5,181.0 151.5 A5 5 0 1 1 171.0 151.5 C171.0 147.5,175.0 144.5,176 139.5Z'/><path d='M262 52.9 C262.7 56.3,265.4 58.3,265.4 61.0 A3.4 3.4 0 1 1 258.6 61.0 C258.6 58.3,261.3 56.3,262 52.9Z'/><path d='M398 110.8 C398.9 115.2,402.4 117.8,402.4 121.3 A4.4 4.4 0 1 1 393.6 121.3 C393.6 117.8,397.1 115.2,398 110.8Z'/><path d='M470 3.7 C470.6 6.7,473.0 8.5,473.0 10.9 A3 3 0 1 1 467.0 10.9 C467.0 8.5,469.4 6.7,470 3.7Z'/><path d='M536 158.7 C537.1 164.1,541.4 167.3,541.4 171.6 A5.4 5.4 0 1 1 530.6 171.6 C530.6 167.3,534.9 164.1,536 158.7Z'/><path d='M612 72.4 C612.7 76.0,615.6 78.2,615.6 81.1 A3.6 3.6 0 1 1 608.4 81.1 C608.4 78.2,611.3 76.0,612 72.4Z'/><path d='M330 134.1 C330.6 136.9,332.8 138.6,332.8 140.8 A2.8 2.8 0 1 1 327.2 140.8 C327.2 138.6,329.4 136.9,330 134.1Z'/><path d='M676 34.5 C676.5 37.1,678.6 38.7,678.6 40.8 A2.6 2.6 0 1 1 673.4 40.8 C673.4 38.7,675.5 37.1,676 34.5Z'/></g></svg>") repeat-x 0 0 / 400px auto; animation: fall 6s linear infinite;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
@keyframes ooze { from { transform: scaleY(.86); } to { transform: scaleY(1.04); } }
@keyframes fall { from { background-position: 0 -20px; } to { background-position: 0 90px; } }

/* трепкащи заглавия, туптящ бутон */
section h2, .eyebrow { animation: neon 8s infinite; text-shadow: 0 0 22px rgba(232, 69, 79, .28); }
@keyframes neon { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .45; } 94% { opacity: 1; } 95% { opacity: .25; } 96% { opacity: 1; } }
.hero .btn:not(.ghost) { animation: heart 1.8s infinite; }
@keyframes heart { 0%, 56%, 100% { transform: scale(1); } 14% { transform: scale(1.05); } 28% { transform: scale(1); } 42% { transform: scale(1.035); } }
.hero { background: radial-gradient(ellipse at 80% 0%, rgba(194, 26, 36, .38), transparent 55%), radial-gradient(ellipse at 20% 110%, rgba(120, 0, 10, .4), transparent 60%), linear-gradient(#0a0306, var(--bg)); }
.hero h1 { text-shadow: 0 0 30px rgba(194, 26, 36, .45); }
.tag { animation: blink 2.4s steps(1) infinite; }

/* внезапен срив на картината */
body.burst main, body.burst header.top { animation: shake .22s steps(2); filter: hue-rotate(-14deg) saturate(1.7) contrast(1.15); }
body.burst .hero h1 { text-shadow: 3px 0 #3fe0ff, -3px 0 var(--accent-hi); }
@keyframes shake { 0% { transform: translate(-3px, 1px); } 50% { transform: translate(3px, -1px); } 100% { transform: translate(0); } }

/* бутон за звук */
.snd { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--accent); background: rgba(10, 3, 6, .85); color: var(--text); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 20px -4px var(--glow); }
.snd svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snd .w { display: none; } .snd[aria-pressed=true] .w { display: block; } .snd[aria-pressed=true] .x { display: none; }
.snd[aria-pressed=true] { background: var(--accent); }

@media (max-width: 760px) { .vf { inset: .6rem; font-size: .66rem; } .vf-tc { display: none; } .snd { bottom: .8rem; right: .8rem; } }
@media (prefers-reduced-motion: reduce) {
  .in-noise, .in-small, .lights, .eyes, header.top::after, header.top::before, section h2, .eyebrow, .hero .btn, .tag, body::after, .vf-rec, .in-line::after { animation: none; }
  .eyes { opacity: 0; }
}

/* въпроси: акордеон вместо стандартния details */
.faq { display: grid; gap: .7rem; margin-top: 1rem; }
.qa { position: relative; background: linear-gradient(160deg, var(--surface), var(--surface2)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.qa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .35; transition: opacity .25s, box-shadow .25s; }
.qa.open { border-color: var(--accent); box-shadow: 0 0 34px -18px var(--glow); }
.qa.open::before { opacity: 1; box-shadow: 0 0 12px var(--glow); }
.qa h4 { margin: 0; font: inherit; }
.qa button { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.1rem 1.05rem 1.3rem; background: none; border: 0; color: var(--text); font: 700 1.02rem/1.35 "Manrope", sans-serif; text-align: left; cursor: pointer; min-height: 3.4rem; }
.qa button:hover .qn { text-shadow: 0 0 12px var(--glow); }
.qn { font: 700 .8rem "Unbounded", sans-serif; color: var(--accent-hi); letter-spacing: .08em; flex: none; }
.qt { flex: 1; }
.pm { flex: none; position: relative; width: 1.1rem; height: 1.1rem; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--accent-hi); border-radius: 2px; transition: transform .3s; }
.pm::after { transform: rotate(90deg); }
.qa.open .pm::after { transform: rotate(0); }
.qa.open .pm::before { transform: rotate(180deg); }
.ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; visibility: hidden; }
.ans > div { overflow: hidden; }
.ans p { white-space: pre-line; margin: 0; padding: 0 1.3rem 1.2rem 3.3rem; color: var(--muted); }
.qa.open .ans { grid-template-rows: 1fr; visibility: visible; }
@media (max-width: 480px) { .ans p { padding-left: 1.3rem; } .qa button { gap: .7rem; padding-left: 1.1rem; } }

/* интро: един бутон */
.in-enter { min-height: 3.4rem; padding-inline: 2rem; font-size: 1.05rem; animation: heart 1.8s infinite; }

.rec-dot { color: #ff4a3c; animation: blink 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

/* календар за резервация */
.cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.cal-h b { text-transform: capitalize; font-size: 1.05rem; }
.cal-nav { width: 2.6rem; height: 2.6rem; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); border-radius: 10px; font-size: 1.4rem; cursor: pointer; }
.cal-nav:hover:not(:disabled) { border-color: var(--accent); } .cal-nav:disabled { opacity: .3; cursor: default; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.cal .dow { text-align: center; font-size: .72rem; color: var(--muted); font-weight: 800; padding: .2rem 0; text-transform: uppercase; }
.cal button, .cal .off { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; font: inherit; font-weight: 700; }
.cal .off { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.cal button { border: 1.5px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; }
.cal button.free { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.cal button:hover { border-color: var(--accent-hi); }
.cal button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
.times { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.times .lbl { flex-basis: 100%; color: var(--muted); font-size: .9rem; }
.times button { min-height: 2.8rem; padding: .4rem 1rem; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); font: 800 .95rem inherit; cursor: pointer; }
.times button:hover { border-color: var(--accent-hi); } .times button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
.times .pick { flex-basis: 100%; color: var(--accent-hi); font-weight: 800; }