/* =========================================================
   HURAK WEB — v2 hero
   Title fonts: Clash Display / Archivo / Anton / Bebas / Oswald /
                Chakra Petch / Rajdhani / Exo 2 / Orbitron / Bricolage
   Logo + body fonts switchable. All free (Google OFL / Fontshare).
   ========================================================= */

/* ---------- THEMES (10 dark, bold) ---------- */
/* 1 — Navy / Yellow (синьо-жовта) (kept) */
:root[data-theme="navyyellow"] {
  --bg:#080c1a; --bg-2:#0e1430; --text:#eef1f8; --text-dim:#8b93ad;
  --accent:#ffd23f; --accent-ink:#10131f; --swirl-a:#ffd23f; --swirl-b:#2748a0; --stroke:#ffffff;
}
/* brand secondary accent — the logo's red "1" (used for index numbers / caret) */
:root{--red:#DC0000}
/* 2 — Mono / White */
:root[data-theme="mono"] {
  --bg:#0a0a0a; --bg-2:#141414; --text:#f5f5f5; --text-dim:#8f8f8f;
  --accent:#ffffff; --accent-ink:#0a0a0a; --swirl-a:#ffffff; --swirl-b:#555555; --stroke:#ffffff;
}
/* 3 — Midnight / Sky (bright blue) */
:root[data-theme="sky"] {
  --bg:#08101a; --bg-2:#0d1626; --text:#eef3f8; --text-dim:#8694a8;
  --accent:#38bdf8; --accent-ink:#04101a; --swirl-a:#38bdf8; --swirl-b:#1e4d80; --stroke:#ffffff;
}
/* 4 — Obsidian / Lavender */
:root[data-theme="lavender"] {
  --bg:#0b0a12; --bg-2:#12101f; --text:#f1eff8; --text-dim:#948fab;
  --accent:#b39dff; --accent-ink:#0a0814; --swirl-a:#b39dff; --swirl-b:#4a3a8a; --stroke:#ffffff;
}
/* 5 — Deep / Spring Green */
:root[data-theme="spring"] {
  --bg:#06120c; --bg-2:#0a1c12; --text:#ecf6ef; --text-dim:#88a895;
  --accent:#4ade80; --accent-ink:#04140a; --swirl-a:#4ade80; --swirl-b:#1a5e38; --stroke:#ffffff;
}
/* 6 — Carbon / Peach */
:root[data-theme="peach"] {
  --bg:#110c08; --bg-2:#1a130b; --text:#f6efe9; --text-dim:#a89684;
  --accent:#ffb38a; --accent-ink:#160d06; --swirl-a:#ffb38a; --swirl-b:#7a4520; --stroke:#ffffff;
}
/* 7 — Ink / Fuchsia */
:root[data-theme="fuchsia"] {
  --bg:#0d0710; --bg-2:#160a1a; --text:#f4eef7; --text-dim:#9f8ea8;
  --accent:#e879f9; --accent-ink:#110618; --swirl-a:#e879f9; --swirl-b:#5e2a7a; --stroke:#ffffff;
}
/* 8 — Bronze / Copper */
:root[data-theme="copper"] {
  --bg:#110d09; --bg-2:#1a130c; --text:#f4ede6; --text-dim:#a59685;
  --accent:#e0915f; --accent-ink:#150d07; --swirl-a:#e0915f; --swirl-b:#6e3f1f; --stroke:#ffffff;
}
/* 9 — Black / Ruby */
:root[data-theme="ruby"] {
  --bg:#0d0709; --bg-2:#160a0e; --text:#f6eef0; --text-dim:#a98e95;
  --accent:#ff3366; --accent-ink:#160509; --swirl-a:#ff3366; --swirl-b:#6e1a35; --stroke:#ffffff;
}
/* 10 — Deep / Seafoam */
:root[data-theme="seafoam"] {
  --bg:#07110f; --bg-2:#0b1a17; --text:#eaf6f3; --text-dim:#84a6a0;
  --accent:#5eead4; --accent-ink:#04140f; --swirl-a:#5eead4; --swirl-b:#145a50; --stroke:#ffffff;
}

/* ---------- TITLE FONT (switchable) ---------- */
/* per-font: family, weight, stroke width, tracking, size multiplier */
:root{--font-display:"Clash Display";--fw-display:700;--stroke-w:1.5px;--track:-.01em;--fs-mul:1;
      --font-logo:"Unbounded";--font-body:"Inter";--fw-body:300}
:root[data-font="clash"]    {--font-display:"Clash Display";--fw-display:700;--stroke-w:1.5px;--track:-.01em;--fs-mul:1}
:root[data-font="unbounded"]{--font-display:"Unbounded";--fw-display:700;--stroke-w:1.5px;--track:.01em;--fs-mul:.78}

/* ---------- LOGO FONT ---------- */
:root[data-logo="unbounded"]{--font-logo:"Unbounded"}
:root[data-logo="clash"]    {--font-logo:"Clash Display"}

/* ---------- BODY / SUBHEADING FONT (light weight) ---------- */
/* Cyrillic-capable + Clash/Unbounded for comparison */
:root[data-body="inter"]       {--font-body:"Inter";--fw-body:300}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font-family:var(--font-body),"Inter",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:var(--accent);color:var(--accent-ink)}

.container{width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* =========================================================
   ANIMATED BACKGROUND
   ========================================================= */
/* interactive constellation lines — more expressive */
.bg-net{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.7;
  -webkit-mask:linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 22%, #000 50%);
          mask:linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 22%, #000 50%);}

.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, color-mix(in srgb,var(--text) 6%,transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--text) 6%,transparent) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(120% 80% at 30% 40%, #000 0%, transparent 70%);
          mask:radial-gradient(120% 80% at 30% 40%, #000 0%, transparent 70%);
  opacity:.5;animation:gridDrift 24s linear infinite;
}
@keyframes gridDrift{to{background-position:64px 64px}}

/* UA FX — azure horizon glow (toggle) */
.fx-horizon-layer{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:
    radial-gradient(120% 60% at 50% 114%, color-mix(in srgb,#2b6fff 60%, transparent) 0%, transparent 62%),
    radial-gradient(100% 55% at 50% -14%, color-mix(in srgb,#1f54cc 30%, transparent) 0%, transparent 55%);}
:root.fx-horizon .fx-horizon-layer{opacity:.55}

.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 25% 60%, transparent 35%, color-mix(in srgb,var(--bg) 88%,transparent) 100%);
}

/* =========================================================
   HEADER
   ========================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;padding:clamp(14px,2vw,22px) 0;
  transition:transform .4s cubic-bezier(.4,0,.2,1), background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;}

/* ---- header scroll behavior (switchable via data-scrollhdr) ----
   JS sets .nav--solid (scrolled past top) and .nav--hidden (scrolling down);
   each mode below opts into the classes it uses. */
:root[data-scrollhdr="glass"] .nav.nav--solid,
:root[data-scrollhdr="both"]  .nav.nav--solid{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:color-mix(in srgb,var(--text) 9%,transparent);
  box-shadow:0 12px 34px -20px rgba(0,0,0,.65);
}
:root[data-scrollhdr="hide"] .nav.nav--hidden,
:root[data-scrollhdr="both"] .nav.nav--hidden{ transform:translateY(-100%) }
/* never hide the bar while the fullscreen menu is open */
.nav.is-open.nav--hidden{ transform:none }
.nav__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}

.brand{display:flex;align-items:flex-end;gap:10px;font-weight:800;justify-self:start;grid-column:1}
.brand__mark{width:18.34px;height:17px;display:flex;margin-bottom:3.45px}
.brand__mark svg,.brand__mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand__name{font-family:var(--font-logo),"Space Grotesk",sans-serif;
  font-size:1.34rem;font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--text)}
.brand__accent{color:var(--accent)}
/* logo wordmark weight toggle (switcher: data-logow) */
:root[data-logow="bold"]   .brand__name{font-weight:700}
:root[data-logow="medium"] .brand__name{font-weight:500}
:root[data-logow="thin"]   .brand__name{font-weight:400}

.nav__links{display:flex;align-items:center;gap:30px;justify-self:center;grid-column:2}
.nav__links a{
  font-size:.92rem;font-weight:500;color:var(--text-dim);
  letter-spacing:.01em;position:relative;padding:6px 0;transition:color .25s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--accent);transition:width .28s ease;
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{width:100%}

.nav__right{display:flex;align-items:center;gap:14px;justify-self:end;grid-column:3}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:inherit;font-weight:600;font-size:.95rem;letter-spacing:.01em;
  cursor:pointer;border:none;border-radius:0;
  padding:13px 24px;transition:transform .2s ease, box-shadow .25s ease, background .25s, color .25s;
  white-space:nowrap;
}
.btn--lg{padding:18px 34px;font-size:1.02rem}
.btn-ico{display:inline-flex;align-items:center;justify-content:center}
.btn-ico svg{width:1.15em;height:1.15em;display:block}
.btn svg{transition:transform .25s ease}
.btn:hover svg{transform:translateX(4px)}

.btn--solid{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px color-mix(in srgb,var(--accent) 60%,transparent)}

.btn--ghost{background:transparent;color:var(--text);border:1px solid color-mix(in srgb,var(--text) 22%,transparent)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* header CTA — generous padding (FENIX-style) */
/* hero state: neutral ghost (keep the hero button as the single accent) */
.nav__cta{padding:15px 34px;font-size:.94rem;
  background:transparent;color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 24%,transparent);box-shadow:none}
.nav__cta:hover{background:transparent;border-color:var(--accent);color:var(--accent);
  transform:translateY(-2px);box-shadow:none}
/* scrolled state: becomes the accented persistent CTA */
.is-scrolled .nav__cta{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.is-scrolled .nav__cta:hover{color:var(--accent-ink);
  box-shadow:0 14px 40px -10px color-mix(in srgb,var(--accent) 60%,transparent)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;z-index:5;min-height:100vh;display:flex;align-items:center}
.hero__inner{display:flex;flex-direction:column;justify-content:center;
  align-items:stretch;width:100%;min-height:100vh;
  padding-top:clamp(80px,12vh,120px);padding-bottom:clamp(60px,10vh,100px)}

/* ---- title: HURAK left, WEB centered & overlapping ---- */
.hero__title{
  font-family:var(--font-display),"Inter",system-ui,sans-serif;
  font-weight:var(--fw-display);line-height:.8;letter-spacing:var(--track);
  text-transform:uppercase;width:100%;position:relative;
}
.hero__title-line{display:block}

/* size adapts to BOTH width and height (min of vw / vh) */
.hero__title-line.is-outline{
  color:transparent;
  -webkit-text-stroke:var(--stroke-w) color-mix(in srgb,var(--stroke) 62%,transparent);
  font-size:clamp(2.6rem, calc(min(20vw, 30vh) * var(--fs-mul)), calc(16rem * var(--fs-mul)));
  text-align:left;position:relative;
}
/* cursor reveal — fill the letter bodies with brand color under the cursor
   (soft / diffuse / sprayed — not a sharp concentrated blob) */
.hero__title-line.is-outline::before{
  content:attr(data-text);
  position:absolute;left:0;top:0;
  color:var(--accent);
  -webkit-text-stroke:0;
  pointer-events:none;
  opacity:.8;
  filter:blur(5px);
  text-shadow:0 0 50px color-mix(in srgb,var(--accent) 38%, transparent),
              0 0 100px color-mix(in srgb,var(--accent) 22%, transparent);
  -webkit-mask:radial-gradient(circle var(--spot,200px) at var(--mx,-700px) var(--my,-700px),
                rgba(0,0,0,.6) 0%, rgba(0,0,0,.34) 36%, rgba(0,0,0,.14) 58%, rgba(0,0,0,.04) 74%, transparent 88%);
          mask:radial-gradient(circle var(--spot,200px) at var(--mx,-700px) var(--my,-700px),
                rgba(0,0,0,.6) 0%, rgba(0,0,0,.34) 36%, rgba(0,0,0,.14) 58%, rgba(0,0,0,.04) 74%, transparent 88%);
}
.hero__title-line.is-solid{
  color:var(--text);
  font-size:clamp(2.7rem, calc(min(20.5vw, 31vh) * var(--fs-mul)), calc(16.5rem * var(--fs-mul)));
  width:fit-content;width:-moz-fit-content;
  margin-inline:auto;            /* centered on screen */
  margin-top:-.15em;             /* slight overlap up into HURAK (half) */
  position:relative;z-index:2;
}

/* flying "U"/"A" letters for the UA→HURAK reveal (intro variant uaweb) */
.fly{
  position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:1;transform-origin:left center;
  color:var(--accent);line-height:.8;letter-spacing:var(--track);will-change:transform,opacity;
  font-size:clamp(2.6rem, calc(min(20vw,30vh) * var(--fs-mul)), calc(16rem * var(--fs-mul)));
}

/* ---- lower block: aligned to WEB's left edge (default) or to HURAK's left ---- */
.hero__lower{margin-top:clamp(20px,3.5vh,42px);margin-left:var(--web-left,0)}
:root[data-align="left"] .hero__lower{margin-left:0}
.hero__sub{
  max-width:560px;font-weight:var(--fw-body,300);font-size:clamp(1rem,1.3vw,1.2rem);
  line-height:1.6;color:color-mix(in srgb,var(--text) 52%,var(--text-dim));
  margin-bottom:clamp(24px,3.2vh,38px);
}
.hero__sub .u{text-transform:uppercase;letter-spacing:.02em;color:color-mix(in srgb,var(--text) 70%,var(--text-dim))}
/* subheading case toggle */
:root[data-subcase="caps"] .hero__sub{text-transform:uppercase;letter-spacing:.02em}

/* typewriter caret */
.type-text{color:var(--text)}
.type-caret{display:inline-block;height:0.96em;margin-left:5px;vertical-align:baseline;
  animation:caretBlink 1s steps(1) infinite}
.type-caret svg{height:100%;width:auto;display:block}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.type-caret{display:none}}

.hero__actions{display:flex;flex-wrap:wrap;gap:14px}

.hero__scroll{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--text-dim);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
}
.hero__scroll i{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);
  animation:scrollLine 1.8s ease-in-out infinite}
@keyframes scrollLine{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}
  50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* =========================================================
   SWITCHERS (temporary tooling)
   ========================================================= */
.switchers{position:fixed;right:20px;bottom:20px;z-index:30;
  display:flex;flex-direction:column-reverse;align-items:flex-end;gap:12px}

/* floating contact button (messenger-style FAB) */
/* hero state: subtle outline (doesn't compete with the hero button) */
.switchers__toggle{
  position:relative;width:58px;height:58px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:color-mix(in srgb,var(--bg-2) 90%,transparent);color:var(--text);
  border:1.5px solid color-mix(in srgb,var(--text) 24%,transparent);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.switchers__toggle svg{width:27px;height:27px;position:relative;z-index:1}
.switchers__toggle:hover{transform:translateY(-3px) scale(1.05);border-color:var(--accent);color:var(--accent)}
.switchers__toggle:active{transform:translateY(-1px) scale(1.0)}
.switchers__toggle::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:2px solid var(--accent);opacity:0;animation:none;
}
/* scrolled state: full accent + pulse (becomes the persistent contact) */
.is-scrolled .switchers__toggle{
  background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  box-shadow:0 12px 30px -8px color-mix(in srgb,var(--accent) 60%,transparent),0 6px 16px rgba(0,0,0,.45);
}
.is-scrolled .switchers__toggle:hover{
  box-shadow:0 18px 42px -8px color-mix(in srgb,var(--accent) 72%,transparent),0 6px 16px rgba(0,0,0,.5)}
.is-scrolled .switchers__toggle::before{animation:fabPulse 2.4s ease-out infinite}
@keyframes fabPulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.is-scrolled .switchers__toggle::before{animation:none}}
.switchers__body{display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  padding:12px;border-radius:0;max-width:360px;
  background:color-mix(in srgb,var(--bg-2) 90%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  backdrop-filter:blur(10px);}
.switchers.is-collapsed .switchers__body{display:none}

.sw-row{display:flex;flex-direction:column;align-items:flex-end;gap:5px;width:100%}
.sw-label{font-family:"Inter",sans-serif;font-size:.64rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);align-self:flex-start}

.fontpick{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.fontpick button{
  font-family:"Inter",sans-serif;font-size:.7rem;font-weight:500;cursor:pointer;
  padding:6px 12px;border-radius:0;color:var(--text-dim);
  background:color-mix(in srgb,var(--bg) 60%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 12%,transparent);transition:.16s;
}
.fontpick button:hover{color:var(--text);border-color:color-mix(in srgb,var(--text) 30%,transparent)}
.fontpick button.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}

.iconpick{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:300px}
.iconpick button{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:0;cursor:pointer;color:var(--text-dim);
  background:color-mix(in srgb,var(--bg) 60%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 12%,transparent);transition:.16s}
.iconpick button svg{width:16px;height:16px}
.iconpick button:hover{color:var(--text);border-color:color-mix(in srgb,var(--text) 30%,transparent)}
.iconpick button.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}

.fxpick{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:300px}
.fxpick button{font-family:"Inter",sans-serif;font-size:.7rem;font-weight:500;cursor:pointer;
  padding:6px 12px;border-radius:0;color:var(--text-dim);
  background:color-mix(in srgb,var(--bg) 60%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 12%,transparent);transition:.16s}
.fxpick button:hover{color:var(--text);border-color:color-mix(in srgb,var(--text) 30%,transparent)}
.fxpick button.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}

.palette{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.palette button{
  width:22px;height:22px;border-radius:0;cursor:pointer;
  background:var(--sw);border:2px solid transparent;transition:transform .18s, border-color .18s;
}
.palette button:hover{transform:scale(1.18)}
.palette button.is-active{border-color:var(--text)}

/* =========================================================
   LOAD ANIMATIONS (intro) — variant via :root[data-anim], replayed by JS (.anim-run)
   ========================================================= */
@media (prefers-reduced-motion:reduce){ .anim-el{animation:none!important} }

:root.anim-run[data-anim] .anim-el{
  animation-fill-mode:both; animation-duration:.8s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-delay:calc(var(--i,0) * .09s);
}
:root.anim-run[data-anim="fadeup"] .anim-el{ animation-name:a-fadeup }
:root.anim-run[data-anim="blur"]   .anim-el{ animation-name:a-blur }
:root.anim-run[data-anim="scale"]  .anim-el{ animation-name:a-scale }
:root.anim-run[data-anim="slideL"] .anim-el{ animation-name:a-slideL }
:root.anim-run[data-anim="drop"]   .anim-el{ animation-name:a-drop }
:root.anim-run[data-anim="zoom"]   .anim-el{ animation-name:a-zoom }
:root.anim-run[data-anim="rise"]   .anim-el{ animation-name:a-rise }
:root.anim-run[data-anim="flip"]   .anim-el{ animation-name:a-flip; animation-duration:.9s }
:root.anim-run[data-anim="glow"]   .anim-el{ animation-name:a-glow; animation-duration:1s }
:root.anim-run[data-anim="spring"] .anim-el{ animation-name:a-spring; animation-duration:.95s; animation-timing-function:cubic-bezier(.34,1.56,.64,1) }

@keyframes a-fadeup{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes a-blur{from{opacity:0;filter:blur(16px)}to{opacity:1;filter:blur(0)}}
@keyframes a-scale{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes a-slideL{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes a-drop{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}}
@keyframes a-zoom{from{opacity:0;transform:scale(1.08);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes a-rise{from{opacity:0;clip-path:inset(110% 0 0 0);transform:translateY(20px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes a-flip{from{opacity:0;transform:perspective(900px) rotateX(-24deg);transform-origin:top center}to{opacity:1;transform:perspective(900px) rotateX(0)}}
@keyframes a-glow{0%{opacity:0;filter:brightness(2.6) blur(3px)}12%{opacity:1}18%{opacity:.35}30%{opacity:1;filter:brightness(1.6) blur(.5px)}100%{opacity:1;filter:none}}
@keyframes a-spring{0%{opacity:0;transform:translateY(44px)}60%{opacity:1}100%{opacity:1;transform:none}}

/* variant: UA → HURAK
   U & A start at letter R, slide apart to their own positions, fade to transparent;
   when they land, the full HURAK outline appears. (offsets set by JS) */
/* each flyer GROWS (scale .5→1) and moves straight to its own spot in HURAK;
   the yellow fades to transparent EVENLY (linear) over the whole move */
:root.anim-run[data-anim="uaweb"] .fly-u{ animation:fly-u-move 1.6s cubic-bezier(.33,0,.2,1) both, fly-fade 1.6s linear both }
:root.anim-run[data-anim="uaweb"] .fly-a{ animation:fly-a-move 1.6s cubic-bezier(.33,0,.2,1) both, fly-fade 1.6s linear both }
/* WEB grows together with UA */
:root.anim-run[data-anim="uaweb"] .is-solid{ animation:a-webgrow 1.6s cubic-bezier(.33,0,.2,1) both }
/* HURAK outline crossfades in as UA lands on its letters */
:root.anim-run[data-anim="uaweb"] .is-outline{ animation:a-fade .55s ease 1.15s both }
/* the rest appears only AFTER "HURAK WEB" is formed (~1.7s) so it doesn't distract */
:root.anim-run[data-anim="uaweb"] .brand,
:root.anim-run[data-anim="uaweb"] .nav__links,
:root.anim-run[data-anim="uaweb"] .nav__right{ animation:a-fadeup .7s cubic-bezier(.22,.61,.36,1) 1.75s both }
:root.anim-run[data-anim="uaweb"] .hero__lower{ animation:a-fadeup .7s cubic-bezier(.22,.61,.36,1) 1.9s both }
:root.anim-run[data-anim="uaweb"] .switchers__toggle{ animation:a-fadeup .6s cubic-bezier(.22,.61,.36,1) 2.05s both }

@keyframes fly-u-move{0%{transform:translateX(var(--u-start,0)) scale(.5)}100%{transform:translateX(var(--u-end,0)) scale(1)}}
@keyframes fly-a-move{0%{transform:translateX(var(--a-start,0)) scale(.5)}100%{transform:translateX(var(--a-end,0)) scale(1)}}
@keyframes a-webgrow{0%{transform:scale(.5)}100%{transform:scale(1)}}
@keyframes fly-fade{0%{opacity:1}100%{opacity:0}}
@keyframes a-fade{from{opacity:0}to{opacity:1}}

/* =========================================================
   BURGER (mobile)
   ========================================================= */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.25s}

/* ---- mobile drawer (hidden on desktop) ---- */
.nav__drawer{display:none}

@media (max-width:880px){
  .nav__links{display:none}
  .nav__cta{display:none}            /* hide header CTA → moves into drawer */
  .burger{display:flex}
  .nav{z-index:50}                       /* keep burger / X clickable above the fullscreen menu */
  .nav__drawer{display:none!important}   /* mobile uses the fullscreen overlay menu, not the dropdown */

  /* burger → X */
  .nav.is-open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav.is-open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

  /* thinner outline on mobile (desktop = 1.3px) */
  .hero__title-line.is-outline{-webkit-text-stroke-width:1px}
  /* WEB centered, HURAK left (overlap kept, halved) */
  .hero__title-line.is-solid{margin-top:-.12em}
  .hero__lower{margin-left:0 !important}
  .hero__title-line.is-outline,.fly{
    font-size:clamp(2.4rem, calc(min(21vw,26vh) * var(--fs-mul)), calc(8rem * var(--fs-mul)))}
  .hero__title-line.is-solid{
    font-size:clamp(2.5rem, calc(min(21.5vw,27vh) * var(--fs-mul)), calc(8.5rem * var(--fs-mul)))}
  .hero__scroll{display:none}
  .switchers__body{max-width:300px}
}
/* =========================================================
   HEADER VARIANT "burger" + FULLSCREEN MENU (compare toggle)
   data-header="desktop" → classic centered nav (default)
   data-header="burger"  → logo + burger at every width, fullscreen menu
   ========================================================= */
:root[data-header="burger"] .nav{z-index:50}
:root[data-header="burger"] .nav__inner{display:flex;justify-content:space-between}
:root[data-header="burger"] .nav__links{display:none}
:root[data-header="burger"] .nav__cta{display:none}
:root[data-header="burger"] .burger{display:flex}
:root[data-header="burger"] .nav__drawer{display:none !important}
/* burger → X (burger mode, all widths) */
:root[data-header="burger"] .nav.is-open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
:root[data-header="burger"] .nav.is-open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---- fullscreen overlay menu ---- */
.menu{
  position:fixed;inset:0;z-index:40;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,6vh,64px);
  padding:clamp(96px,15vh,160px) clamp(24px,7vw,110px) clamp(40px,7vh,80px);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb,var(--accent) 10%, transparent) 0%, transparent 52%),
    color-mix(in srgb,var(--bg) 90%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;
  transition:opacity .45s ease, visibility .45s ease;
}
@media (min-width:881px){:root[data-header="desktop"] .menu{display:none}} /* inert on desktop; on mobile the fullscreen menu replaces the dropdown */
.menu.is-open{opacity:1;visibility:visible}

.menu__links{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px)}
.menu__links a{
  position:relative;display:flex;align-items:baseline;gap:clamp(12px,1.4vw,24px);
  width:fit-content;width:-moz-fit-content;
  font-family:var(--font-display),"Inter",system-ui,sans-serif;font-weight:var(--fw-display);
  font-size:clamp(2.4rem,7vw,5.4rem);line-height:1.04;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--text);
  opacity:0;transform:translateY(40px);transition:color .25s ease;
}
.menu.is-open .menu__links a{opacity:1;transform:none;
  transition:color .25s ease,
    opacity .6s cubic-bezier(.22,.61,.36,1) var(--d,0s),
    transform .6s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.menu__links a:nth-child(1){--d:.10s}
.menu__links a:nth-child(2){--d:.17s}
.menu__links a:nth-child(3){--d:.24s}
.menu__links a:nth-child(4){--d:.31s}
.menu__links a:hover{color:var(--accent)}
.menu__txt{display:inline-block;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.menu__links a:hover .menu__txt{transform:translateX(16px)}
.menu__idx{font-family:var(--font-body),"Inter",sans-serif;font-size:clamp(.8rem,1vw,1rem);
  font-weight:500;color:var(--red);letter-spacing:.05em;align-self:flex-start;margin-top:.5em}

.menu__footer{display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  opacity:0;transform:translateY(24px)}
.menu.is-open .menu__footer{opacity:1;transform:none;
  transition:opacity .6s ease .38s, transform .6s ease .38s}
.menu__cta{flex:0 0 auto}
.menu__meta{display:flex;flex-direction:column;gap:8px;align-items:flex-end;margin-left:auto}
.menu__contact{font-size:1.05rem;font-weight:500;color:var(--text);transition:color .2s}
.menu__contact:hover{color:var(--accent)}
.menu__socials{display:flex;gap:18px}
.menu__socials a{font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--text-dim);transition:color .2s}
.menu__socials a:hover{color:var(--accent)}

body.menu-open{overflow:hidden}

@media (max-width:560px){
  .hero__actions{width:100%}
  .hero__actions .btn{flex:1;justify-content:center}
  .menu__footer{flex-direction:column;align-items:flex-start}
  .menu__meta{align-items:flex-start;margin-left:0}
}