/* ================================================================
   1. DESIGN TOKENS  ·  edit these to re-skin the whole page
   ================================================================ */
:root{
  /* Layout */
  --nav-h: 70px;
  --maxw: 1140px;
  --pad-x: clamp(1.25rem, 5vw, 3.25rem);
  --radius: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);
  /* The gap around the buy-CTA band, used four times: reviews → rule,
     rule → CTA, CTA → rule, rule → contact. Kept as one value so the four
     can never drift out of step; the mobile step-down overrides it once. */
  --cta-gap: clamp(4.5rem, 10vh, 7rem);

  /* Text colors */
  --starlight: #f6f3ff;   /* primary text (soft starlight white) */
  --haze:      #c8bfe8;   /* secondary text */
  --muted:     #9087b6;   /* captions / footer */
  --void:      #06040f;   /* deepest background fallback */

  /* Interactive accents (links, buttons, focus) */
  --teal: #2cd5ee;
  --pink: #f472b6;
  --grad-accent: linear-gradient(120deg, #2cd5ee 0%, #a855f7 48%, #f472b6 100%);

  /* Warm fire-toned accents, used in the "Get in touch" section + footer */
  --grad-fire: linear-gradient(120deg, #fde68a 0%, #f97316 50%, #dc2626 100%);
  --amber-haze:  #f0b878;   /* warm secondary text (replaces --haze in fire areas) */
  --amber-muted: #c98a55;   /* warm captions / footer (replaces --muted in fire areas) */

  /* Glass panels */
  --panel:     rgba(18,12,34,0.55);
  --panel-line: rgba(246,243,255,0.12);

  /* OPTIONAL: drop a real cosmic photo URL between the quotes to use
     it as the hero background instead of the generated starfield.
     e.g. url("https://images-assets.nasa.gov/.../nebula.jpg")
     Free high-res sources: images.nasa.gov, esahubble.org, unsplash.com/s/photos/galaxy */
  --hero-image: none;

  /* Typography — swap these two to re-font the whole site.
     --font-display  → titles only (hero title, section titles, popup title).
     --font-body     → everything else.
     Zen Kurenaido runs small for its em size, so body text is set a step
     larger than a neutral sans would be (see the sizes further down). */
  --font-display: "Sansation", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: "Zen Kurenaido", system-ui, -apple-system, Segoe UI, sans-serif;
}

/* ================================================================
   1b. LOCAL FONTS  ·  Sansation (titles) + Zen Kurenaido (body).
   The remaining faces are unused by the current theme but kept here
   so the two tokens above can be re-pointed at them at any time.
   A @font-face is only downloaded when something actually uses it.
   ================================================================ */
@font-face{
  font-family:"Advent Pro";
  src:url("assets/fonts/Advent_Pro/AdventPro-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Advent Pro";
  src:url("assets/fonts/Advent_Pro/AdventPro-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Ruda";
  src:url("assets/fonts/Ruda/Ruda-VariableFont_wght.ttf") format("truetype");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Sansation";
  src:url("assets/fonts/Sansation/Sansation-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Sansation";
  src:url("assets/fonts/Sansation/Sansation-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Sansation";
  src:url("assets/fonts/Sansation/Sansation-Italic.ttf") format("truetype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Victor Mono";
  src:url("assets/fonts/Victor_Mono/VictorMono-VariableFont_wght.ttf") format("truetype");
  font-weight:100 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Victor Mono";
  src:url("assets/fonts/Victor_Mono/VictorMono-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight:100 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Zen Kurenaido";
  src:url("assets/fonts/Zen_Kurenaido/ZenKurenaido-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ================================================================
   2. RESET & BASE
   ================================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100%;
  background:var(--void);
  color:var(--starlight);
  font-family:var(--font-body);
  font-size:clamp(1.14rem, 1.08rem + .28vw, 1.28rem);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
img{ max-width:100%; display:block; }
p{ letter-spacing:1.5px; }
main{ display:block; position:relative; z-index:1; }
a{ color:inherit; }
::selection{ background:rgba(168,85,247,.45); color:#fff; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:6px; }

/* Reusable eyebrow / kicker label */
.kicker{
  display:inline-block;
  font-size:.84rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--haze);
}

/* ================================================================
   3. SCROLL-DRIVEN BACKGROUND  ·  the signature element
   Five "phases" stacked full-screen; JS crossfades their opacity as
   you scroll, while each drifts slowly on its own for a living, flowing
   nebula. Colors for every phase live right here for easy editing.
   ================================================================ */
#bg{
  position:fixed; inset:0; z-index:-1;
  overflow:hidden;
  background:var(--void);
}
.phase{
  position:absolute;
  /* oversized so the drifting transform never exposes an edge */
  top:-20%; left:-20%; width:140%; height:140%;
  opacity:0;
  will-change:opacity, transform;
}

/* — Phase 0 · deep space (sits behind the hero starfield) — */
.phase--0{
  background:
    radial-gradient(40% 55% at 50% -8%,  #241159 0%, transparent 60%),
    radial-gradient(35% 45% at 82% 18%,  #2a1466 0%, transparent 55%),
    radial-gradient(45% 45% at 12% 78%,  #170b34 0%, transparent 55%),
    linear-gradient(180deg, #08051a 0%, #05030d 100%);
  animation:driftA 34s var(--ease) infinite;
}
/* — Phase 1 · deep purple → electric blue — */
.phase--1{
  background:
    radial-gradient(45% 50% at 20% 28%, #4c1d95 0%, transparent 58%),
    radial-gradient(50% 55% at 84% 68%, #3a0ca3 0%, transparent 58%),
    radial-gradient(40% 40% at 60% 8%,  #7c3aed 0%, transparent 50%),
    linear-gradient(160deg, #1b0a44 0%, #100a34 100%);
  animation:driftB 40s var(--ease) infinite;
}
/* — Phase 2 · electric blue → luminous teal — */
.phase--2{
  background:
    radial-gradient(48% 52% at 76% 24%, #1d4ed8 0%, transparent 58%),
    radial-gradient(52% 55% at 18% 72%, #0891b2 0%, transparent 58%),
    radial-gradient(40% 40% at 52% 50%, #2563eb 0%, transparent 45%),
    linear-gradient(160deg, #08235e 0%, #062c50 100%);
  animation:driftC 31s var(--ease) infinite;
}
/* — Phase 3 · teal → cosmic pink — */
.phase--3{
  background:
    radial-gradient(46% 50% at 24% 30%, #06b6d4 0%, transparent 55%),
    radial-gradient(52% 56% at 80% 66%, #db2777 0%, transparent 58%),
    radial-gradient(40% 40% at 56% 18%, #14b8a6 0%, transparent 45%),
    linear-gradient(160deg, #0a3d52 0%, #3a0f3a 100%);
  animation:driftA 43s var(--ease) infinite reverse;
}
/* — Phase 4 · FIRE — flame-orange → red → ember, settling into charred dark.
   Tweak to taste: brighten/raise the gold core (#fbbf24) for hotter flame tips,
   push the red toward #b91c1c for deeper coals, or darken the base (#160503)
   for a smokier footer. Keep the base dark so the footer text stays readable. */
.phase--4{
  background:
    radial-gradient(50% 52% at 70% 22%, #f97316 0%, transparent 55%),   /* bright flame-orange (the glow you liked) */
    radial-gradient(36% 40% at 38% 50%, #fbbf24 0%, transparent 46%),    /* gold-hot flame core */
    radial-gradient(54% 56% at 22% 66%, #dc2626 0%, transparent 58%),    /* deep red */
    radial-gradient(50% 54% at 62% 90%, #ea580c 0%, transparent 60%),    /* burnt-orange embers near the base */
    linear-gradient(165deg, #4a0f08 0%, #160503 100%);                   /* charred ember base */
  animation:driftB 37s var(--ease) infinite;
}

/* Autonomous "flow" — small, edge-safe transforms (no rotation) */
@keyframes driftA{ 0%,100%{transform:translate3d(0,0,0) scale(1)}     50%{transform:translate3d(2.5%,-2%,0) scale(1.07)} }
@keyframes driftB{ 0%,100%{transform:translate3d(0,0,0) scale(1.05)}  50%{transform:translate3d(-3%,2.5%,0) scale(1)} }
@keyframes driftC{ 0%,100%{transform:translate3d(-1.5%,1.5%,0) scale(1.04)} 50%{transform:translate3d(2%,-1%,0) scale(1.09)} }

/* Twinkling starfield, drawn by JS only while the hero is in view */
#stars{ position:absolute; inset:0; width:100%; height:100%; will-change:opacity; }

/* Film grain (kills gradient banding + adds premium texture) */
.bg-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
/* Soft vignette for focus + legibility */
.bg-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(4,2,12,.55) 100%);
}

/* Ghost trail (scroll afterimage) — soft white copies of the page content
   that smear behind it while scrolling. Built once by JS as real clones of
   <main>, colorized white by a STATIC filter; per frame only transform and
   opacity change, which the GPU compositor handles without repainting.
   They sit between the background (z:-1) and the content (main z:1). */
#ghosts{
  position:fixed; inset:0; z-index:0;
  overflow:hidden; pointer-events:none; visibility:hidden;
  contain:strict; isolation:isolate;
}
.ghost{
  position:absolute; inset:0; opacity:0;
  will-change:opacity, transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.ghost__inner{
  position:absolute; top:0; left:0; width:100%;
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
/* Clones must never run their own animations (would force re-raster) and
   reveal-on-scroll elements must always be visible inside a ghost. */
#ghosts *{ animation:none !important; transition:none !important; }
#ghosts .reveal{ opacity:1; transform:none; }

/* ================================================================
   4. SCROLL PROGRESS BAR
   ================================================================ */
#progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:var(--grad-accent);
  box-shadow:0 0 18px rgba(168,85,247,.6);
  z-index:200; pointer-events:none;
}

/* ================================================================
   5. NAVIGATION
   ================================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x);
}
/* The blurred bar background lives on a pseudo-element — NOT on .nav itself.
   A backdrop-filter (like transform/filter) on .nav would make the <header>
   a containing block for its fixed children, trapping the full-screen mobile
   menu inside the 70px bar the moment .is-scrolled is added on scroll.
   Keeping it on ::before leaves the menu free to fill the viewport. */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(8,5,20,.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(246,243,255,.08), 0 10px 34px rgba(4,2,12,.5);
  opacity:0; transition:opacity .4s var(--ease);
}
.nav.is-scrolled::before{ opacity:1; }
.nav__brand{
  font-weight:500; font-size:1.2rem; letter-spacing:.06em;
  text-decoration:none; color:var(--starlight);
  display:inline-flex; align-items:center; gap:.5rem;
  position:relative; z-index:2;
  min-width:0;   /* the brand, not the controls, absorbs any shortfall */
}
.nav__brand::before{
  content:""; flex:none;
  width:9px; height:9px; border-radius:50%;
  background:var(--grad-accent); box-shadow:0 0 12px rgba(168,85,247,.8);
}
/* Truncates rather than wrapping. The dot stays outside the clipped box, so
   its glow is never cut off by the overflow. */
.nav__brand-text{
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Right-hand cluster: the links, then the utility controls. Keeping them in
   one flex row means the music button aligns to the links' optical baseline on
   desktop and sits beside the hamburger on mobile, where the links themselves
   become a full-screen overlay. */
.nav__end{
  display:flex; align-items:center;
  gap:clamp(.9rem, 2vw, 1.6rem);
  position:relative; z-index:2;
  flex:none;   /* controls keep their size; the brand truncates instead */
}
.nav__links{ display:flex; align-items:center; gap:clamp(1.1rem, 2.6vw, 2.3rem); position:relative; z-index:1; }
.nav__link{
  position:relative;
  font-size:1.1rem; letter-spacing:.1em; font-weight:400;
  color:var(--haze); text-decoration:none;
  padding:.4rem 0; transition:color .3s var(--ease);
}
.nav__link:hover{ color:var(--starlight); }
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--grad-accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--starlight); }

/* Hamburger (hidden on desktop) */
.nav__toggle{
  display:none; position:relative; z-index:2;
  width:42px; height:42px; border:0; background:transparent; cursor:pointer;
  padding:0;
}
.nav__toggle span{
  position:absolute; left:9px; right:9px; height:2px; border-radius:2px;
  background:var(--starlight); transition:transform .35s var(--ease), opacity .25s;
}
.nav__toggle span:nth-child(1){ top:14px; }
.nav__toggle span:nth-child(2){ top:20px; }
.nav__toggle span:nth-child(3){ top:26px; }
body.nav-open .nav__toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .nav__toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav__toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ================================================================
   6. BUTTONS
   ================================================================ */
/* Sized for Zen Kurenaido, whose x-height is .406em against the .501em of the
   face this theme replaced — i.e. ~19% shorter lowercase at an identical
   font-size. Button labels are short and mostly lowercase Cyrillic, so they
   feel that difference the most and are set well above the old .92rem. */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-size:1.22rem; font-weight:500; letter-spacing:1.5px;
  padding:.95rem 1.85rem; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  background-repeat:no-repeat; background-origin:border-box;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s;
}
.btn--primary{
  background-image:var(--grad-accent); color:#160a26; font-weight:600;
  box-shadow:0 10px 30px rgba(168,85,247,.35);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 44px rgba(168,85,247,.5); }
.btn--ghost{
  color:var(--starlight); border-color:rgba(246,243,255,.28); background:rgba(246,243,255,.04);
}
.btn--ghost:hover{ transform:translateY(-2px); border-color:rgba(246,243,255,.6); background:rgba(246,243,255,.09); }
/* At 320px the contact panel leaves ~222px of content width, and the longest
   label ("Изпрати съобщение") wants ~239px at full size — it would shrink-wrap
   onto two lines. One step down keeps every pill on a single line. */
@media (max-width:420px){
  .btn{ font-size:1.1rem; padding:.85rem 1.4rem; }
}

/* ================================================================
   7. HERO
   ================================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 2rem) var(--pad-x) 5rem;
}
/* Optional real photo background (controlled by --hero-image token) */
.hero__photo{
  position:absolute; inset:0; z-index:0;
  background-image:var(--hero-image);
  background-size:cover; background-position:center;
}
.hero__scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(110% 90% at 50% 35%, transparent 55%, rgba(6,4,15,.6) 100%);
}
/* Wide enough for "нещо своеволно" (white-space:nowrap) at the largest step of
   the title clamp — Sansation is a good deal wider than the previous condensed
   face, and at 880px the line would break out of the box past ~1565px wide. */
.hero__content{ position:relative; z-index:1; max-width:min(1020px, 100%); }
.hero__title{
  font-family:var(--font-display);
  font-weight:400; font-size:clamp(2rem, 6.5vw, 7rem); line-height:.94;
  letter-spacing:5px; margin:1.4rem 0 0;
  text-wrap:balance; text-shadow:0 4px 60px rgba(0,0,0,.45);
}
.hero__title .accent{
  font-style:italic; font-weight:400;
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block; white-space:nowrap;
}
.distort-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  display:block;
}
.distort-letter{
  display:inline-block;
  transform-origin:50% 50%;
  will-change:transform, opacity;
}
.distort-letter--space{
  white-space:pre;
}
.hero__tagline{
  font-style:italic; font-weight:400;
  font-size:clamp(1.22rem, 2.6vw, 1.72rem); color:var(--haze);
  margin:1.6rem auto 0; max-width:34ch; text-wrap:balance;
  text-align:center;
}
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:2.6rem; }

/* Scroll cue */
.hero__cue{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  z-index:1; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--muted); font-size:.79rem; letter-spacing:.25em; text-transform:uppercase;
}
.hero__cue svg{ animation:bob 2.4s var(--ease) infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* ================================================================
   8. SECTIONS (shared)
   ================================================================ */
.section{ position:relative; padding:clamp(5rem, 12vh, 9rem) var(--pad-x); }
.section__inner{ max-width:var(--maxw); margin:0 auto; }
.section__head{ max-width:68ch; }
@media (min-width:1024px){
  #snippets .section__head{ max-width:none; }
  #snippets .section__title{ max-width:26ch; }
}
.section__title{
  font-family:var(--font-display);
  font-weight:400; font-size:clamp(2rem, 5.5vw, 3.5rem); line-height:1.14;
  letter-spacing:.01em; margin:.55rem 0 0; padding-bottom:.12em; text-wrap:balance;
}
.lede{ color:var(--haze); font-size:clamp(1.15rem, 1.55vw, 1.34rem); line-height:1.75; max-width:60ch; }

/* Reveal-on-scroll (disabled under reduced-motion further below) */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }

/* ---- About ---- */
.about{
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
  margin-top:2.5rem;
}
.about__portrait{
  position:relative; width:min(390px, 70vw); aspect-ratio:1; margin-inline:auto;
  border-radius:50%;
  /* real portrait — zoomed & positioned to centre the face in the circle */
  background:url("assets/author.jpg") 50% 105% / 185% no-repeat;
  box-shadow:0 0 0 1px rgba(246,243,255,.18), 0 0 60px rgba(168,85,247,.4);
}
.about__portrait::after{ /* soft outer halo */
  content:""; position:absolute; inset:-14px; border-radius:50%;
  background:radial-gradient(circle, rgba(168,85,247,.28), transparent 70%);
  z-index:-1;
}
.about__body p{ color:var(--starlight); margin:0 0 1.1rem; max-width:56ch; }
.about__body p:first-of-type{ font-size:1.26rem; }
.about__signature{
  font-style:italic; font-size:1.5rem;
  color:var(--starlight); margin-top:1.4rem;
}

/* ---- About the book (text left, portrait right) ---- */
.about--book{ grid-template-columns:1.15fr .85fr; }
.about--book .about__body{ order:1; }
.about__photo{
  order:2; position:relative; margin:0; align-self:center;
  width:min(360px, 82vw); margin-inline:auto;
}
.about__photo img{
  /* transparent book-cover mockup — render as-is, it carries its own glow & shadow */
  display:block; width:100%; height:auto;
}
.about__closer{
  font-size:1.45rem;
  color:var(--starlight); margin:.2rem 0 0;
}

/* ---- Book snippets / excerpts ---- */
.snippet-slider{
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center; gap:1rem; margin-top:2.6rem;
}
/* The reviews slider carries `hidden` until cards arrive, but an author
   `display:grid` beats the UA sheet's [hidden]{display:none} no matter the
   specificity, so the empty track and its arrows showed through anyway.
   Restore the attribute's meaning explicitly. */
.snippet-slider[hidden]{ display:none; }
.snippet-slider__viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:auto;
  scroll-snap-type:x proximity;
  scroll-padding-inline:0;
  overscroll-behavior-x:contain;
  padding:0.25rem 0 0.7rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.snippet-slider__viewport::-webkit-scrollbar{ display:none; }
.snippet-slider__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc(50% - .575rem);
  gap:1.15rem;
  align-items:stretch;
}
.snippet-slider__nav{
  width:46px; height:46px; border:1px solid rgba(246,243,255,.16);
  border-radius:50%; background:rgba(246,243,255,.08); color:var(--starlight);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .3s var(--ease), border-color .3s, background .3s, opacity .3s;
  box-shadow:0 12px 30px rgba(4,2,12,.2);
}
.snippet-slider__nav:hover{ transform:translateY(-2px); border-color:rgba(246,243,255,.35); background:rgba(246,243,255,.14); }
.snippet-slider__nav:disabled{ opacity:.36; cursor:not-allowed; transform:none; box-shadow:none; background:transparent; border-color:rgba(246,243,255,.08); }
.snippet-slider__nav svg{ width:20px; height:20px; }
.excerpt{
  position:relative; max-width:none; min-height:100%; margin:0;
  padding:clamp(1.2rem, 2.5vw, 1.7rem);
  scroll-snap-align:start;
  border-radius:22px; border:1px solid rgba(246,243,255,.14);
  background:linear-gradient(135deg, rgba(246,243,255,.09), rgba(246,243,255,.045));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 45px rgba(4,2,12,.32);
  display:flex; flex-direction:column; justify-content:flex-start;
  gap:1rem;
}

.excerpt {
  box-shadow: none;
}

.excerpt__mark{
  font-style:italic;
  font-size:3.4rem; line-height:1em; color:var(--pink); opacity:.6;
  display:block; height:1.2rem;
  margin:0 0 .65rem; padding-top:.2rem;
}
.excerpt blockquote{
  margin:0;
  font-style:italic; font-weight:400;
  font-size:clamp(1.22rem, 2.6vw, 1.6rem); line-height:1.42; letter-spacing:.07em;
  color:var(--starlight); text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.excerpt__meta{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:auto;
  font-size:.83rem; letter-spacing:.18em; text-transform:uppercase; color:var(--haze);
}

/* ---- Buy CTA band · the seam between "Reviews" and "Get in touch" ----
   Deliberately not a .section: no kicker, no title, no panel. It reads as a
   pause in the scroll rather than a sixth chapter, so the single action is the
   only thing to look at — and isolation is what buys it that weight, so it is
   given a full section's worth of air on both sides. */
.cta-band{
  position:relative;
  padding:var(--cta-gap) var(--pad-x);
  text-align:center;
}
/* Hairline seams that fade out at both ends — rules, not a box. The two are
   identical, and the band's symmetric padding-block sits the content exactly
   halfway between them. */
.cta-band::before,
.cta-band::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:min(var(--maxw), 100%); height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(246,243,255,.16) 24%, rgba(246,243,255,.16) 76%, transparent);
}
.cta-band::before{ top:0; }
.cta-band::after{ bottom:0; }
.cta-band__inner{
  position:relative;
  max-width:46ch; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
}
/* Soft aura so the band still feels like part of the nebula. Warm-toned to
   match the button and to start the hand-off into the fire-lit contact
   section. It must be an `ellipse … closest-side`: a `circle` in this 2:1 box
   is sized farthest-corner, so it is still opaque where it meets the top and
   bottom edges and clips into two hard horizontal lines. */
.cta-band__inner::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px, 110%); aspect-ratio:2 / 1;
  background:radial-gradient(ellipse closest-side at 50% 50%, rgba(249,115,22,.2), transparent 100%);
  pointer-events:none;
}
.cta-band__line{
  margin:0; color:var(--haze);
  font-size:clamp(1.15rem, 1.8vw, 1.38rem); line-height:1.55; text-wrap:balance;
}
/* One size up from a normal .btn — it is the only action in view */
.cta-band .btn{ padding:1.15rem 2.6rem; font-size:1.42rem; }
/* Same fire palette as "Изпрати съобщение" in the contact panel, so the two
   warm actions read as one pair. The glow is tighter than the default
   .btn--primary drop shadow: this button is a size up, and at 30px blur the
   shadow spread wider than the pill and hazed out around it. */
.cta-band .btn--primary{
  background-image:var(--grad-fire); color:#2a0e02;
  box-shadow:0 6px 18px rgba(249,115,22,.32);
}
.cta-band .btn--primary:hover{ box-shadow:0 9px 24px rgba(249,115,22,.44); }

/* The same gap the band uses internally, so all four steps across the CTA are
   identical: the two rules land exactly midway between the content they
   separate, with no lopsided side. */
#reviews{ padding-bottom:var(--cta-gap); }
#contact{ padding-top:var(--cta-gap); }

@media (max-width:820px){
  /* Overridden once, on the token — the band and both neighbours follow it
     together, so the four gaps stay equal at every width. */
  :root{ --cta-gap:clamp(3.25rem, 7vh, 4.5rem); }
  .cta-band .btn{ width:100%; max-width:22rem; justify-content:center; }
}
/* Matches the .btn step-down in section 6. It has to live here rather than up
   there: both rules are (0,2,0), so the base .cta-band .btn above would win on
   source order no matter what the media query said. */
@media (max-width:420px){
  .cta-band .btn{ font-size:1.26rem; padding:1rem 1.9rem; }
}

/* ---- Contact ---- */
.contact .section__inner{ max-width:760px; text-align:center; }
.panel{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--radius);
  padding:clamp(1.8rem, 4vw, 3.2rem);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(4,2,12,.55);
  margin-top:2.5rem;
}
.socials{ display:flex; justify-content:center; flex-wrap:wrap; gap:.8rem; margin:1.8rem 0; }
.social{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.65rem 1.1rem; border-radius:999px;
  border:1px solid var(--panel-line); background:rgba(246,243,255,.04);
  color:var(--starlight); text-decoration:none; font-size:.98rem;
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.social:hover{ transform:translateY(-2px); border-color:rgba(246,243,255,.5); background:rgba(246,243,255,.09); }
.social svg{ width:18px; height:18px; }

.divider{ height:1px; background:var(--panel-line); margin:2rem 0; }

.contact__email{
  font-style:italic; font-size:clamp(1.34rem,2.7vw,1.78rem);
  color:var(--starlight); text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.contact__email:hover{ border-color:#f97316; }

/* Warm, fire-toned palette inside the "Get in touch" panel */
.contact .lede,
.contact .field label,
.contact p{ color:var(--amber-haze); }
.contact .btn--primary{
  background-image:var(--grad-fire); color:#2a0e02;
  box-shadow:0 10px 30px rgba(249,115,22,.4);
}
.contact .btn--primary:hover{ box-shadow:0 16px 44px rgba(249,115,22,.55); }
.contact .field input::placeholder, .contact .field textarea::placeholder{ color:rgba(253,224,160,.8); }
.contact .field input:focus, .contact .field textarea:focus{
  border-color:#f97316; box-shadow:0 0 0 3px rgba(249,115,22,.18);
}

/* Contact form */
.form{ display:grid; gap:1rem; margin-top:1.8rem; text-align:left; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--haze); }
.field input, .field textarea{
  width:100%; font:inherit; color:var(--starlight);
  background:rgba(246,243,255,.04); border:1px solid var(--panel-line); border-radius:12px;
  padding:.85rem 1rem; transition:border-color .3s, box-shadow .3s; resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(44,213,238,.18);
}
.form .btn{ justify-self:start; }
/* Confirmation pill. Sized to its text rather than to the row, but capped at
   the container so it wraps instead of running off the side — as a plain block
   in the flex column under the reviews it was laid out at max-content and
   overflowed the section on narrow screens. */
.form__success{
  display:none;
  align-items:center; gap:.6rem;
  width:fit-content; max-width:100%;
  padding:.85rem 1.25rem; border-radius:1.4rem; margin-top:.5rem;
  background:rgba(44,213,238,.1); border:1px solid rgba(44,213,238,.35); color:var(--starlight);
  line-height:1.45; text-wrap:pretty;
  box-shadow:0 12px 30px rgba(4,2,12,.25);
}
/* Tick drawn as an inline SVG rather than a ✓ text glyph. Glyph content on a
   pseudo-element inherits -webkit-text-fill-color, which the distortion setup
   used to pin to transparent on this element — the badge rendered as an empty
   disc. That setup no longer touches hidden elements, but a painted shape
   sidesteps the whole class of inherited text-colour surprises, and matches the
   stroked SVG icons used elsewhere on the page. */
.form__success::before{
  content:'';
  flex:none; width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308222a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.form__success.show{ display:inline-flex; animation:successIn .45s var(--ease) both; }
/* Set while the pill retires itself a few seconds after appearing. */
.form__success.is-leaving{ animation:successOut .4s var(--ease) both; }
@keyframes successIn{
  from{ opacity:0; transform:translateY(12px) scale(.96); }
  to{ opacity:1; transform:none; }
}
@keyframes successOut{
  from{ opacity:1; transform:none; }
  to{ opacity:0; transform:translateY(-6px); }
}
@media (prefers-reduced-motion:reduce){
  .form__success.show, .form__success.is-leaving{ animation:none; }
}

/* Footer */
.footer{
  max-width:var(--maxw); margin:clamp(3rem,8vh,5rem) auto 0; padding-top:2rem;
  border-top:1px solid rgba(246,243,255,.08);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  color:var(--amber-haze); font-size:1.14rem; letter-spacing:.06em;
}
.footer a{ color:#f7d3a8; text-decoration:none; }
.footer a:hover{ color:#fbbf24; }

/* ================================================================
   9. RESPONSIVE
   ================================================================ */
/* The nav collapses earlier than the rest of the layout, and on its own
   breakpoint, because it is the widest fixed-size row on the page: a 27-char
   brand plus seven Bulgarian link labels plus the music button measure ~1010px
   in Zen Kurenaido, which only clears the available width from ~1103px up.
   Below that the bar would overrun rather than wrap, so the hamburger takes
   over while the section layouts below stay on the 820px breakpoint. */
@media (max-width:1150px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:2.2rem;
    background:rgba(6,4,14,.94); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
    transform:translateY(-100%); transition:transform .45s var(--ease);
  }
  body.nav-open{ overflow:hidden; }
  body.nav-open .nav__links{ transform:translateY(0); }
  .nav__link{ font-size:1.65rem; color:var(--starlight); }
}

@media (max-width:820px){
  .about{ grid-template-columns:1fr; text-align:center; }
  .about__body p{ margin-inline:auto; }

  .snippet-slider{ gap:.7rem; }
  .snippet-slider__nav{ width:42px; height:42px; }
  .snippet-slider__track{ grid-auto-columns:minmax(min(88vw, calc(100% - .75rem)), min(100%, 360px)); }
  .excerpt{ width:100%; max-width:100%; text-align:left; }
  /* The matching .review-card--wide step-down lives in section 11, next to the
     rule it overrides — both are (0,1,0), so from here it would lose on source
     order to the base rule further down the file. */

  .form__row{ grid-template-columns:1fr; }
  .footer{ justify-content:center; text-align:center; }
}

/* ================================================================
   10. ACCESSIBILITY · respect reduced-motion
   ================================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .phase{ animation:none !important; }
  .hero__cue svg{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ================================================================
   11. REVIEWS · cards + "add review" popup
   ================================================================ */
.reviews-slider{ margin-top:2.6rem; }
.review-card{
  min-height:100%;
  scroll-snap-align:start;
  padding:clamp(1.2rem, 2.5vw, 1.7rem);
  border-radius:22px; border:1px solid rgba(246,243,255,.14);
  background:linear-gradient(135deg, rgba(246,243,255,.09), rgba(246,243,255,.045));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  display:flex; flex-direction:column; gap:1rem;
}
/* Reviews of 800+ characters span both columns (full section width). */
.review-card--wide{ grid-column:span 2; }
/* Mobile shows one card per view, so a spanning card would be twice as wide as
   the slider viewport and its right half — text included — would be clipped by
   the viewport's overflow, out of reach of the arrows and the snap points.
   This step-down has to sit here rather than in the 820px block in section 9:
   both rules are (0,1,0), so from up there the base rule above would win on
   source order no matter what the media query said. */
@media (max-width:820px){
  .review-card--wide{ grid-column:auto; }
}
/* Blank column inserted by alignWideCards() in script.js so a double-width
   review always begins on an even column and can therefore fill the view
   exactly — or leave it entirely. Structural only: it holds a column open and
   paints nothing. */
.review-slot{ visibility:hidden; }
.review-card__head{ display:flex; align-items:center; gap:.9rem; }
.review-card__avatar{
  flex:none; width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:500;
  color:#160a26; background:var(--grad-accent);
  box-shadow:0 0 18px rgba(168,85,247,.45);
}
.review-card__name{
  margin:0;
  font-weight:500; font-size:1.18rem; letter-spacing:.01em; color:var(--starlight);
}
.review-card__stars{ font-size:.95rem; letter-spacing:.15em; color:var(--pink); }
.review-card__text{
  margin:0;
  font-style:italic; font-weight:400;
  font-size:1.2rem; line-height:1.55; color:var(--starlight);
  letter-spacing:.07em; white-space:pre-line;
}
.reviews-empty{ margin-top:2.2rem; color:var(--muted); font-style:italic; }
.reviews-actions{ margin-top:2.4rem; display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.reviews-actions .form__success{ margin-top:0; }

/* ---- Popup overlay ---- */
.popup-overlay{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:var(--pad-x);
  background:rgba(4,2,12,.7);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.popup-overlay.show{ opacity:1; visibility:visible; }
body.popup-open{ overflow:hidden; }

.popup-container{
  position:relative; width:min(560px, 100%);
  max-height:90vh; overflow-y:auto;
  margin-top:0;
  transform:translateY(22px); transition:transform .35s var(--ease);
}
.popup-overlay.show .popup-container{ transform:none; }
.popup-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem, 3.5vw, 2rem); letter-spacing:-.015em;
  margin:0 0 1.4rem; text-align:left;
}
.popup-close{
  position:absolute; top:1rem; right:1.1rem;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(246,243,255,.16); background:rgba(246,243,255,.06);
  color:var(--starlight); font-size:1.4rem; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.popup-close:hover{ transform:rotate(90deg); border-color:rgba(246,243,255,.4); background:rgba(246,243,255,.12); }
.popup-actions{ display:flex; justify-content:flex-end; gap:.8rem; margin-top:.4rem; }

/* ---- Star rating input ---- */
.star-rating{ display:flex; gap:.35rem; font-size:1.9rem; line-height:1; }
.star-rating .star{
  cursor:pointer; color:rgba(246,243,255,.25);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.star-rating .star:hover{ transform:scale(1.15); }
.star-rating .star.selected{
  color:transparent;
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text;
}
.char-count{ color:var(--muted); font-size:.84rem; letter-spacing:.06em; }

@media (max-width:820px){
  .popup-actions{ flex-direction:column-reverse; }
  .popup-actions .btn{ justify-content:center; }
}

/* ==================== BACKGROUND MUSIC TOGGLE ====================
   Lives in the nav's right-hand cluster (.nav__end). It carries no blur or
   drop shadow of its own — the nav bar already provides both — and it does not
   lift on hover the way the page's buttons do, because a control fixed in the
   bar should feel anchored rather than floating. z-index keeps it above the
   full-screen mobile menu, so the music stays controllable while it is open. */
.music-toggle{
  position:relative; z-index:2;
  flex:none;
  width:40px; height:40px;
  display:grid; place-items:center;
  padding:0;
  border-radius:50%;
  cursor:pointer;
  color:var(--haze);
  background:rgba(246,243,255,.04);
  border:1px solid var(--panel-line);
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.music-toggle:hover{
  color:var(--starlight);
  border-color:rgba(246,243,255,.34);
  background:rgba(246,243,255,.09);
}
.music-toggle:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.music-toggle svg{ width:20px; height:20px; }

/* Muted state: the two sound waves fade out and the slash strokes itself on
   from the top-left, so the icon transforms rather than swapping. The line is
   ~25.5 units long, so a 26-unit dash hides it completely when offset. */
.music-toggle__wave{ transition:opacity .25s var(--ease); }
.music-toggle__slash{
  stroke-dasharray:26;
  stroke-dashoffset:26;
  transition:stroke-dashoffset .32s var(--ease);
}
.music-toggle.is-muted{ color:var(--muted); }
.music-toggle.is-muted .music-toggle__wave{ opacity:0; }
.music-toggle.is-muted .music-toggle__slash{ stroke-dashoffset:0; }

@media (max-width:520px){
  .music-toggle{ width:38px; height:38px; }
  .music-toggle svg{ width:19px; height:19px; }
  /* Two controls now share the bar with a 27-character title, so the brand
     steps down here — it leaves less of the title to the ellipsis. */
  .nav__brand{ font-size:1.05rem; }
}
@media (prefers-reduced-motion:reduce){
  .music-toggle,
  .music-toggle__wave,
  .music-toggle__slash{ transition:none; }
}