/* =========================================================================
   JANA Advertising — 2026 brand theme
   Palette, type and components derived from "JANA ADV. Brand Guide Line".
   Written with CSS logical properties so one sheet serves both RTL and LTR.
   ========================================================================= */

:root {
  /* --- brand colours, straight from the guideline ---------------------- */
  --jana-magenta: #f824af;
  --jana-purple: #650360;
  --jana-mint: #00f2be;
  --jana-white: #fefefe;
  --jana-black: #000000;

  /* --- derived surfaces ------------------------------------------------ */
  --bg: #06000a;
  --bg-soft: #0d0212;
  --surface: #14041c;
  --surface-2: #1d0829;
  --surface-3: #290b39;
  --line: rgba(248, 36, 175, 0.16);
  --line-soft: rgba(254, 254, 254, 0.08);

  --text: #fefefe;
  --text-muted: #b9a7c4;
  --text-dim: #8b7a97;

  /* --- signature gradients --------------------------------------------- */
  --grad-brand: linear-gradient(100deg, var(--jana-magenta) 0%, var(--jana-purple) 100%);
  --grad-brand-soft: linear-gradient(100deg, rgba(248, 36, 175, 0.18), rgba(101, 3, 96, 0.18));
  --grad-mint: linear-gradient(100deg, var(--jana-mint) 0%, #00a98a 100%);
  --grad-text: linear-gradient(95deg, var(--jana-magenta) 10%, #ff7fd4 55%, var(--jana-mint) 130%);
  --grad-surface: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 60%, var(--bg) 100%);

  --glow-magenta: 0 0 40px rgba(248, 36, 175, 0.35);
  --glow-mint: 0 0 32px rgba(0, 242, 190, 0.3);

  /* --- typography ------------------------------------------------------ */
  --font-latin: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-arabic: "Almarai", "Tajawal", "GE SS Two", system-ui, sans-serif;

  /* --- rhythm ----------------------------------------------------------- */
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 12px;
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --nav-h: 78px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[lang="ar"] { --font-ui: var(--font-arabic); }
html[lang="en"] { --font-ui: var(--font-latin); }

/* ============================================================ base =========*/

* { box-sizing: border-box; }

/* `clip` rather than `hidden`: it contains the sideways spill from Bootstrap's
   wide `g-5` gutters (whose negative row margins exceed .container padding on
   narrow screens) without turning the root into a scroll container, which
   would break the sticky navbar. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* The whole page sits on a soft brand aurora rather than flat black. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70rem 45rem at 82% -10%, rgba(101, 3, 96, 0.55), transparent 62%),
    radial-gradient(52rem 38rem at 6% 8%, rgba(248, 36, 175, 0.18), transparent 60%),
    radial-gradient(46rem 40rem at 50% 108%, rgba(0, 242, 190, 0.07), transparent 62%),
    var(--bg);
}

h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { font-weight: 600; letter-spacing: -0.02em; }

a { color: var(--jana-mint); text-decoration: none; transition: color 0.25s var(--ease); }
a:hover { color: var(--jana-magenta); }

p { color: var(--text-muted); }

img { max-width: 100%; height: auto; }

::selection { background: var(--jana-magenta); color: #fff; }

/* Scrollbar picks up the brand instead of the OS default. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--grad-brand); border-radius: 99px; }

:focus-visible {
  outline: 2px solid var(--jana-mint);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ========================================================= typography ======*/

.display-hero {
  font-size: clamp(2.1rem, 5.6vw, 4.15rem);
  line-height: 1.18;
  font-weight: 800;
  margin: 0 0 1.15rem;
}

.section-title {
  font-size: clamp(1.65rem, 3.4vw, 2.7rem);
  margin: 0 0 1rem;
}

.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead-muted {
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  color: var(--text-muted);
  max-width: 62ch;
}

/* Small mint eyebrow with a leading dot — lifted from the profile deck. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jana-mint);
  margin-bottom: 0.9rem;
}
.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jana-mint);
  box-shadow: var(--glow-mint);
}

.section { padding-block: var(--section-y); position: relative; }
.section-head { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* Thin brand rule used between major bands. */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--jana-magenta), var(--jana-purple), transparent);
  opacity: 0.5;
}

/* ============================================================ buttons ======*/

.btn-jana,
.btn-jana-ghost,
.btn-jana-mint {
  --btn-py: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: var(--btn-py) 1.85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.97rem;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.25s, border-color 0.25s;
}

.btn-jana {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(248, 36, 175, 0.85);
}
.btn-jana:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(248, 36, 175, 0.95); }

/* Sheen sweep — direction-aware so it always travels with the text. */
.btn-jana::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -120%;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-20deg);
  transition: inset-inline-start 0.65s var(--ease);
}
.btn-jana:hover::after { inset-inline-start: 130%; }

.btn-jana-ghost {
  background: rgba(254, 254, 254, 0.03);
  border-color: rgba(248, 36, 175, 0.5);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn-jana-ghost:hover {
  border-color: var(--jana-magenta);
  color: var(--jana-magenta);
  transform: translateY(-2px);
  box-shadow: var(--glow-magenta);
}

.btn-jana-mint {
  background: transparent;
  border-color: var(--jana-mint);
  color: var(--jana-mint);
}
.btn-jana-mint:hover { background: var(--jana-mint); color: #04120f; transform: translateY(-2px); }

.btn-sm-jana { --btn-py: 0.6rem; padding-inline: 1.3rem; font-size: 0.88rem; }

/* The markup uses bi-arrow-left, which already points "forward" in RTL.
   In LTR forward is rightwards, so the glyph is mirrored there instead.
   translateX(4px) after scaleX(-1) moves the arrow along its own flipped
   axis, which is still visually forward. */
.dir-arrow { display: inline-block; transition: transform 0.3s var(--ease); }
html[dir="ltr"] .dir-arrow { transform: scaleX(-1); }

.btn-jana:hover .dir-arrow,
.btn-jana-ghost:hover .dir-arrow,
.service-link:hover .dir-arrow { transform: translateX(4px); }

html[dir="ltr"] .btn-jana:hover .dir-arrow,
html[dir="ltr"] .btn-jana-ghost:hover .dir-arrow,
html[dir="ltr"] .service-link:hover .dir-arrow { transform: scaleX(-1) translateX(4px); }

/* ============================================================= navbar ======*/

.jana-topbar {
  background: linear-gradient(90deg, var(--jana-purple), #2a0128);
  font-size: 0.83rem;
  color: rgba(254, 254, 254, 0.85);
  padding-block: 0.42rem;
  border-bottom: 1px solid var(--line);
}
.jana-topbar a { color: rgba(254, 254, 254, 0.85); }
.jana-topbar a:hover { color: var(--jana-mint); }

.jana-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: var(--nav-h);
  background: rgba(6, 0, 10, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.jana-nav.is-stuck {
  background: rgba(6, 0, 10, 0.94);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 40px -22px rgba(248, 36, 175, 0.7);
}

.jana-nav .navbar-brand img { height: 42px; width: auto; }

.jana-nav .nav-link {
  color: var(--text) !important;
  font-weight: 600;
  font-size: 0.96rem;
  padding-inline: 0.95rem !important;
  position: relative;
  opacity: 0.86;
  transition: opacity 0.25s, color 0.25s;
}
.jana-nav .nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0.95rem;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: var(--origin, left);
  transition: transform 0.3s var(--ease);
}
html[dir="rtl"] .jana-nav .nav-link::after { --origin: right; }
.jana-nav .nav-link:hover,
.jana-nav .nav-link.active { opacity: 1; }
.jana-nav .nav-link:hover::after,
.jana-nav .nav-link.active::after { transform: scaleX(1); }

.navbar-toggler {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  color: var(--text);
}
.navbar-toggler:focus { box-shadow: none; }

/* Language switch pill */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.36rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(254, 254, 254, 0.04);
  transition: all 0.25s var(--ease);
}
.lang-switch:hover { color: var(--jana-mint); border-color: var(--jana-mint); }

/* =============================================================== hero ======*/

.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}

/* The wave-lines motif is injected as SVG by main.js.
   The vertical fade lives in the per-path stroke opacity rather than a CSS
   mask — masking an animated layer forces a full-size offscreen repaint. */
.hero-waves {
  position: absolute;
  inset-block: 0;
  inset-inline-end: -8%;
  width: min(78%, 1100px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  overflow: hidden;
}
html[dir="ltr"] .hero-waves { transform: scaleX(-1); }
/* The generated paths run past the viewBox on purpose (so the ribbon bleeds
   off both edges); the SVG must clip them or the page gains a scrollbar. */
.hero-waves svg { width: 100%; height: 100%; display: block; overflow: hidden; }

/* Slow drift on the whole ribbon: one composited transform, no repaint. */
/* No `will-change` here: the animation promotes the layer while it runs, and
   declaring it permanently keeps a large composited layer alive for the life
   of the page. */
.wave-group {
  animation: waveDrift 22s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}
@keyframes waveDrift {
  from { transform: translate3d(0, -14px, 0) scaleY(0.97); }
  to   { transform: translate3d(0, 14px, 0) scaleY(1.03); }
}

.hero-inner { position: relative; z-index: 2; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(248, 36, 175, 0.07);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 1.4rem;
}
.hero-badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--jana-mint);
  box-shadow: var(--glow-mint);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } }

/* Bordered stat/claim box, matching the deck's outlined callouts. */
.claim-box {
  display: inline-block;
  border: 1px solid var(--jana-magenta);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.3rem;
  background: rgba(101, 3, 96, 0.22);
  line-height: 1.55;
}
.claim-box strong { color: var(--jana-white); display: block; font-weight: 700; }
.claim-box span { color: var(--jana-mint); font-size: 0.94rem; }

.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.scroll-hint i { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ========================================================= video hero ======*/

/* The film is the hero. Nothing is layered over the middle of the frame: the
   controls sit in the bottom band, where the veil below already darkens the
   picture, so the footage is never fighting text for the same pixels. */
.hero-film {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: min(100svh, 880px);
  overflow: hidden;
  background: var(--bg);
}

.hero-film-media { position: absolute; inset: 0; z-index: 0; }
.hero-film-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The nav is transparent until it sticks, so a bright opening frame would
   otherwise swallow the logo. */
.hero-film-top {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 230px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 0, 10, 0.85), transparent);
}

.hero-film-veil {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 58%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg) 3%, rgba(6, 0, 10, 0.72) 40%, transparent);
}

.hero-film-bar {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding-block-end: clamp(2rem, 5vw, 3.75rem);
}

.hero-film-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.hero-film-tools { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

/* The heading is hidden from sight, never from the document: it is the page's
   only <h1>, and the video carries no text a crawler or a screen reader can
   read. Mirrors Bootstrap's .visually-hidden. */
.hero-film-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The wave motif is only for the state where the film is gone. */
.hero-film .hero-waves { display: none; }

/* --- fallback: no file, corrupt encode, or play() refused ----------------
   main.js sets this. The hero turns back into the typographic one instead of
   leaving a black rectangle with two buttons floating in it. */
.hero-film.is-fallback {
  align-items: center;
  min-height: min(92vh, 900px);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.hero-film.is-fallback .hero-film-media,
.hero-film.is-fallback .hero-film-top,
.hero-film.is-fallback .hero-film-veil { display: none; }
.hero-film.is-fallback .hero-waves { display: block; }

.hero-film.is-fallback .hero-film-bar {
  align-items: flex-start;
  padding-block-end: 0;
}
.hero-film.is-fallback .hero-film-copy {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 2rem;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  flex-basis: 100%;
  max-width: 62ch;
}
.hero-film.is-fallback .hero-film-copy .lead-muted { margin-bottom: 0; }

@media (max-width: 767.98px) {
  .hero-film { min-height: min(86svh, 680px); }
  .hero-film-bar {
    justify-content: flex-start;
    /* Clears the fixed WhatsApp button, which parks itself in this exact
       corner and would otherwise sit on top of the primary call to action. */
    padding-block-end: 5.5rem;
  }
  .hero-film-actions { width: 100%; }
  .hero-film-actions .btn-jana,
  .hero-film-actions .btn-jana-ghost { flex: 1 1 auto; justify-content: center; }
}

.sound-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(6, 0, 10, 0.55);
  backdrop-filter: blur(6px);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.sound-btn:hover { color: var(--jana-mint); border-color: var(--jana-mint); transform: translateY(-2px); }
.sound-btn i { font-size: 1.05rem; }
.sound-btn[aria-pressed="true"] { color: var(--jana-mint); border-color: var(--jana-mint); }

/* ============================================================== cards ======*/

.jana-card {
  position: relative;
  height: 100%;
  background: var(--grad-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.75rem;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
/* Gradient hairline that lights up along the top edge on hover. */
.jana-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: var(--origin, left);
  transition: transform 0.45s var(--ease);
}
html[dir="rtl"] .jana-card::before { --origin: right; }
.jana-card:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: 0 26px 60px -30px rgba(248, 36, 175, 0.75);
}
.jana-card:hover::before { transform: scaleX(1); }

.jana-card h3 { font-size: 1.16rem; margin: 0 0 0.55rem; }
.jana-card p { font-size: 0.94rem; margin: 0; line-height: 1.8; }

.card-icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: 1.15rem;
  background: var(--grad-brand-soft);
  border: 1px solid var(--line);
  color: var(--jana-magenta);
  transition: all 0.4s var(--ease);
}
.jana-card:hover .card-icon {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--glow-magenta);
}

.card-mint .card-icon { color: var(--jana-mint); }
.card-mint:hover .card-icon { background: var(--grad-mint); color: #04120f; }

/* -- service card with image ------------------------------------------- */

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.service-card:hover {
  transform: translateY(-7px);
  border-color: var(--line);
  box-shadow: 0 30px 70px -34px rgba(248, 36, 175, 0.85);
}

.service-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.service-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.5s;
  filter: saturate(0.85) brightness(0.85);
}
.service-card:hover .service-media img { transform: scale(1.07); filter: saturate(1.1) brightness(1); }
.service-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 4, 28, 0.96) 4%, rgba(20, 4, 28, 0.25) 48%, transparent 78%);
}

.service-tag {
  position: absolute;
  z-index: 2;
  inset-block-start: 0.85rem;
  inset-inline-start: 0.85rem;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: rgba(101, 3, 96, 0.85);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

.service-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.service-body h3 { font-size: 1.13rem; margin: 0 0 0.5rem; }
.service-body p { font-size: 0.92rem; flex: 1; margin: 0 0 1.15rem; }

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--jana-mint);
}
.service-link:hover { color: var(--jana-magenta); }

/* -- filter pills ------------------------------------------------------- */

.filter-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.25rem; }
.filter-pill {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(254, 254, 254, 0.03);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.filter-pill:hover { color: var(--text); border-color: var(--line); }
.filter-pill.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px -12px rgba(248, 36, 175, 0.9);
}

/* -- portfolio tile ------------------------------------------------------ */

.work-tile {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-soft);
}
.work-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), filter 0.5s;
  filter: saturate(0.9);
}
.work-tile:hover img { transform: scale(1.08); filter: saturate(1.15); }

.work-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem;
  background: linear-gradient(to top, rgba(6, 0, 10, 0.95) 8%, rgba(101, 3, 96, 0.35) 52%, transparent 80%);
  opacity: 0.92;
  transition: opacity 0.4s;
}
.work-tile:hover .work-overlay { opacity: 1; }
.work-overlay .work-cat {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jana-mint);
  margin-bottom: 0.3rem;
}
.work-overlay h3 { font-size: 1.05rem; margin: 0 0 0.25rem; color: #fff; }
.work-overlay p { font-size: 0.86rem; margin: 0; color: rgba(254, 254, 254, 0.72); }

/* Tiles stay a uniform aspect ratio: Bootstrap's row/col grid is not masonry,
   so mixing tall and short tiles leaves ragged gaps under the short ones. */

/* ============================================================= offers ======*/

/* Each offer carries an accent so a page of several does not read as one
   undifferentiated block of magenta. */
.accent-magenta { --offer-a: var(--jana-magenta); --offer-a2: #ff7fd4; }
.accent-mint    { --offer-a: var(--jana-mint);    --offer-a2: #7cffe4; }
.accent-purple  { --offer-a: #a30f9d;             --offer-a2: var(--jana-magenta); }

/* -- announcement strip -------------------------------------------------- */

.offer-bar {
  position: relative;
  z-index: 1031;
  background: linear-gradient(100deg, var(--offer-a, var(--jana-magenta)), var(--jana-purple));
  color: #fff;
  font-size: 0.9rem;
}
.offer-bar[hidden] { display: none !important; }

.offer-bar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.55rem;
}

.offer-bar-text {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.offer-bar-text strong { font-weight: 700; }

.offer-bar-badge {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  padding: 0.1rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.offer-bar-time {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  opacity: 0.9;
  white-space: nowrap;
}

.offer-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: #1a0320;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.34rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: transform 0.25s var(--ease);
}
.offer-bar-cta:hover { color: #1a0320; transform: translateY(-1px); }

.offer-bar-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  padding: 0.25rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.offer-bar-close:hover { color: #fff; }

/* -- badge on a service card --------------------------------------------- */

.service-offer {
  position: absolute;
  z-index: 2;
  inset-block-start: 0.85rem;
  inset-inline-end: 0.85rem;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #10010c;
  background: linear-gradient(100deg, var(--offer-a), var(--offer-a2));
  box-shadow: 0 6px 18px -8px var(--offer-a);
}

/* -- wide band ------------------------------------------------------------ */

.offer-band {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 120% at 85% 0%, color-mix(in srgb, var(--offer-a) 30%, transparent), transparent 70%),
    var(--grad-surface);
  padding: 2rem 1.9rem;
}

.offer-band-waves {
  position: absolute;
  inset-block: 0;
  inset-inline-end: -20%;
  width: 75%;
  opacity: 0.5;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.offer-band-waves svg { width: 100%; height: 100%; display: block; }

.offer-band-body { position: relative; z-index: 2; }
.offer-band h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin: 0.85rem 0 0.6rem; }
.offer-band p { font-size: 0.95rem; margin: 0 0 1.4rem; max-width: 52ch; }

.offer-band-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* -- shared chips --------------------------------------------------------- */

.offer-chip {
  display: inline-block;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #10010c;
  background: linear-gradient(100deg, var(--offer-a), var(--offer-a2));
}

.offer-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-muted);
}
.offer-countdown.urgent { color: var(--offer-a, var(--jana-magenta)); }

/* -- card on /offers ------------------------------------------------------ */

.offer-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--grad-surface);
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.offer-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(100deg, var(--offer-a), var(--offer-a2));
}
.offer-card:hover {
  transform: translateY(-5px);
  border-color: var(--line);
  box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--offer-a) 70%, transparent);
}

.offer-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.offer-card h2 { font-size: 1.25rem; margin: 0 0 0.7rem; }
.offer-card p { font-size: 0.94rem; margin: 0 0 1.2rem; flex: 1; }

.offer-service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 1.2rem;
}
.offer-service-link:hover { color: var(--jana-mint); }

.offer-card-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
}
.offer-until { font-size: 0.82rem; color: var(--text-dim); }

@media (max-width: 767.98px) {
  .offer-bar-inner { flex-wrap: wrap; gap: 0.5rem; }
  .offer-bar-text { order: 1; width: 100%; font-size: 0.85rem; }
  .offer-bar-cta { order: 2; }
  .offer-bar-close { order: 3; margin-inline-start: auto; }
  .offer-band { padding: 1.6rem 1.35rem; }
}

/* ================================================= animated promo banner ===*/

.promo-section { padding-block: clamp(2.5rem, 5vw, 4rem); }

.promo {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
}

/* Every slide occupies the same grid cell, so the stage is as tall as the
   tallest offer and the page never reflows when one rotates in. */
.promo-stage { display: grid; }

.promo-slide {
  grid-area: 1 / 1;
  position: relative;
  min-height: 260px;
  padding: clamp(1.9rem, 4vw, 3.2rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 130% at 85% 0%, color-mix(in srgb, var(--offer-a) 26%, transparent), transparent 72%),
    var(--grad-surface);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.99);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), visibility 0s linear 0.7s;
}
.promo-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* A slow drifting colour cloud — the only thing that moves continuously, and
   it is one composited transform rather than a repaint. */
.promo-aurora {
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(38% 46% at 22% 38%, color-mix(in srgb, var(--offer-a) 46%, transparent), transparent 70%),
    radial-gradient(34% 40% at 74% 66%, color-mix(in srgb, var(--offer-a2) 34%, transparent), transparent 70%);
  filter: blur(26px);
  opacity: 0.55;
  animation: promoDrift 17s ease-in-out infinite alternate;
}
@keyframes promoDrift {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.12); }
}

.promo-waves {
  position: absolute;
  inset-block: 0;
  inset-inline-end: -6%;
  width: min(62%, 760px);
  opacity: 0.4;
  pointer-events: none;
  overflow: hidden;
}
html[dir="ltr"] .promo-waves { transform: scaleX(-1); }
.promo-waves svg { width: 100%; height: 100%; display: block; overflow: hidden; }

/* A single light sweep on entry — it reads as the banner "landing" rather
   than as a loop, so it never becomes wallpaper noise. */
.promo-sheen {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(254, 254, 254, 0.11), transparent);
  opacity: 0;
}
.promo-slide.is-active .promo-sheen { animation: promoSheen 1.5s var(--ease) 0.25s 1; }
@keyframes promoSheen {
  0%   { opacity: 0; transform: translateX(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(340%); }
}
html[dir="rtl"] .promo-slide.is-active .promo-sheen { animation-name: promoSheenRtl; }
@keyframes promoSheenRtl {
  0%   { opacity: 0; transform: translateX(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-340%); }
}

/* Inactive slides keep their wave drift and aurora paused: five banners all
   animating off-screen cost real frames on a phone. */
.promo-slide:not(.is-active) .wave-group,
.promo-slide:not(.is-active) .promo-aurora { animation-play-state: paused; }

.promo-body {
  position: relative;
  z-index: 2;
  max-width: 62ch;
}
.promo-chip { margin-bottom: 1rem; }
.promo-title {
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1.35;
  margin: 0 0 0.7rem;
}
.promo-text {
  font-size: clamp(0.92rem, 1.4vw, 1.02rem);
  color: var(--text-muted);
  margin: 0 0 1.5rem;
  max-width: 54ch;
}
.promo-foot {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

/* The contents rise in after the slide itself, staggered, so the eye lands on
   the headline before the button. */
.promo-slide.is-active .promo-chip,
.promo-slide.is-active .promo-title,
.promo-slide.is-active .promo-text,
.promo-slide.is-active .promo-foot { animation: promoRise 0.65s var(--ease) both; }
.promo-slide.is-active .promo-chip  { animation-delay: 0.08s; }
.promo-slide.is-active .promo-title { animation-delay: 0.16s; }
.promo-slide.is-active .promo-text  { animation-delay: 0.24s; }
.promo-slide.is-active .promo-foot  { animation-delay: 0.32s; }
@keyframes promoRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.promo-controls {
  position: absolute;
  z-index: 3;
  inset-block-end: 1.1rem;
  inset-inline-end: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.promo-dots { display: flex; align-items: center; gap: 0.45rem; }
.promo-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(254, 254, 254, 0.28);
  cursor: pointer;
  transition: width 0.4s var(--ease), background 0.3s;
}
.promo-dot:hover { background: rgba(254, 254, 254, 0.55); }
.promo-dot.is-active {
  width: 26px;
  background: linear-gradient(100deg, var(--jana-magenta), var(--jana-mint));
}

.promo-toggle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(6, 0, 10, 0.5);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.promo-toggle:hover { color: var(--jana-mint); border-color: var(--jana-mint); }

.promo-progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  background: rgba(254, 254, 254, 0.08);
  z-index: 3;
}
.promo-progress span {
  display: block;
  height: 100%;
  width: 0;
  transform-origin: inline-start;
  background: linear-gradient(100deg, var(--jana-magenta), var(--jana-mint));
}
.promo-progress span.run { animation: promoBar var(--promo-ms, 6500ms) linear forwards; }
.promo.is-paused .promo-progress span.run { animation-play-state: paused; }
@keyframes promoBar { from { width: 0; } to { width: 100%; } }

.promo-more { text-align: center; margin-top: 1.4rem; }
.offers-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}
.offers-link:hover { color: var(--jana-mint); }

@media (max-width: 767.98px) {
  .promo-slide { min-height: 0; padding-block-end: 3.4rem; }
  .promo-waves { opacity: 0.22; width: 100%; inset-inline-end: -20%; }
  .promo-controls { inset-inline: 1.2rem auto; inset-block-end: 1rem; }
}

/* ==================================================== client logo wall =====*/

.brands-section { overflow: hidden; }

/* The window: clips the strip and fades it out at the screen edges. The mask
   must live here, not on the moving strip — on the strip its 7% would fall
   4000px away, nowhere near the edge the visitor can see. */
.brand-marquee {
  overflow: hidden;
  /* Must be on THIS element, not on the strip inside it. An over-wide child of
     an RTL block is anchored to the right edge and overflows leftwards, so the
     strip would start already scrolled off and the animation would drag the
     empty tail into view. Declaring LTR here fixes the origin at the left. */
  direction: ltr;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* The strip: two identical tracks side by side. Shifting it by half its width
   lands the second track exactly where the first began, so the restart is
   invisible. Runs LTR in both languages — a logo row has no reading order,
   and the maths stays identical either way. */
.brand-marquee-inner {
  display: flex;
  width: max-content;
  animation: brandScroll 46s linear infinite;
}
@keyframes brandScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Reading a logo should not be a chase. */
.brand-marquee:hover .brand-marquee-inner { animation-play-state: paused; }

.brand-track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-inline: clamp(1.25rem, 2.5vw, 2.25rem);
  margin: 0;
  list-style: none;
  flex: 0 0 auto;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-item { display: flex; justify-content: center; }

.brand-link {
  display: grid;
  place-items: center;
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius-sm);
}

.brand-item img {
  width: clamp(112px, 12vw, 150px);
  height: auto;
  display: block;
  /* Colour logos are levelled to the page first, then allowed their own
     colour on hover — otherwise a dozen unrelated palettes fight each other
     and the wall reads as clutter. */
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease), transform 0.35s var(--ease);
}
.brand-link:hover img,
.brand-link:focus-visible img {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}
a.brand-link:focus-visible { outline: 2px solid var(--jana-mint); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  /* No scrolling wall. The first track becomes an ordinary wrapped row and
     the duplicate — which exists only to hide the loop seam — goes away. */
  .brand-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .brand-marquee-inner { width: auto; animation: none; }
  .brand-track { flex-wrap: wrap; justify-content: center; }
  .brand-track[aria-hidden="true"] { display: none; }
}

/* ============================================================== stats ======*/

.stat {
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: rgba(254, 254, 254, 0.02);
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.stat:hover { border-color: var(--line); transform: translateY(-4px); }
.stat .num {
  font-family: var(--font-latin);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .label { font-size: 0.88rem; color: var(--text-dim); margin-top: 0.5rem; }

/* ============================================================ process ======*/

.step {
  position: relative;
  height: 100%;
  padding: 1.75rem 1.6rem;
  border-radius: var(--radius);
  background: var(--grad-surface);
  border: 1px solid var(--line-soft);
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.step:hover { border-color: var(--line); transform: translateY(-5px); }
.step .step-no {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1.25rem;
  font-family: var(--font-latin);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(248, 36, 175, 0.16);
}
.step i { font-size: 1.7rem; color: var(--jana-mint); }
.step h3 { font-size: 1.08rem; margin: 0.9rem 0 0.45rem; }
.step p { font-size: 0.9rem; margin: 0; }

/* ======================================================= testimonials ======*/

.quote-card {
  height: 100%;
  padding: 1.9rem 1.75rem;
  border-radius: var(--radius);
  background: var(--grad-surface);
  border: 1px solid var(--line-soft);
  position: relative;
}
.quote-card::after {
  content: "\201C";
  position: absolute;
  inset-block-start: 0.1rem;
  inset-inline-end: 1.2rem;
  font-family: var(--font-latin);
  font-size: 5rem;
  line-height: 1;
  color: rgba(248, 36, 175, 0.18);
}
.quote-card .stars { color: var(--jana-mint); font-size: 0.85rem; margin-bottom: 0.85rem; letter-spacing: 2px; }
.quote-card blockquote { margin: 0 0 1.35rem; font-size: 0.98rem; color: var(--text-muted); line-height: 1.9; }
.quote-who { display: flex; align-items: center; gap: 0.85rem; }
.quote-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff; font-weight: 700;
  flex: 0 0 auto;
}
.quote-who .n { font-weight: 700; font-size: 0.95rem; }
.quote-who .r { font-size: 0.82rem; color: var(--text-dim); }

/* =============================================================== forms =====*/

.jana-form .form-label { font-size: 0.88rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.4rem; }

.jana-form .form-control,
.jana-form .form-select {
  background: rgba(254, 254, 254, 0.035);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.8rem 1.05rem;
  font-family: inherit;
  font-size: 0.96rem;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.jana-form .form-control::placeholder { color: var(--text-dim); }
.jana-form .form-control:focus,
.jana-form .form-select:focus {
  background: rgba(254, 254, 254, 0.055);
  border-color: var(--jana-magenta);
  box-shadow: 0 0 0 3px rgba(248, 36, 175, 0.16);
  color: var(--text);
}
.jana-form .form-select option { background: var(--surface-2); color: var(--text); }
.jana-form textarea.form-control { min-height: 140px; resize: vertical; }

.honeypot { position: absolute; inset-inline-start: -9999px; opacity: 0; pointer-events: none; }

.alert-jana {
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.15rem;
  font-size: 0.93rem;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.alert-jana.ok { background: rgba(0, 242, 190, 0.09); border-color: rgba(0, 242, 190, 0.45); color: var(--jana-mint); }
.alert-jana.bad { background: rgba(248, 36, 175, 0.09); border-color: rgba(248, 36, 175, 0.45); color: #ff8fd3; }

/* ============================================================= contact =====*/

.contact-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.contact-item .ci-icon {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--grad-brand-soft);
  border: 1px solid var(--line);
  color: var(--jana-mint);
  font-size: 1.15rem;
}
.contact-item .ci-label { font-size: 0.8rem; color: var(--text-dim); }
.contact-item .ci-value { font-weight: 700; color: var(--text); word-break: break-word; }
.contact-item a.ci-value:hover { color: var(--jana-magenta); }

.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  filter: grayscale(0.4) invert(0.9) hue-rotate(190deg) saturate(0.7);
  height: 300px;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================== footer =====*/

.jana-footer {
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(101, 3, 96, 0.22) 45%, rgba(6, 0, 10, 0.98));
  border-top: 1px solid var(--line);
  padding-block: 3.75rem 0;
  margin-top: var(--section-y);
}
.jana-footer h4 { font-size: 1rem; margin-bottom: 1.1rem; color: var(--text); }
.jana-footer ul { list-style: none; padding: 0; margin: 0; }
.jana-footer li { margin-bottom: 0.55rem; }
.jana-footer a { color: var(--text-muted); font-size: 0.93rem; }
.jana-footer a:hover { color: var(--jana-mint); padding-inline-start: 4px; }
.jana-footer .brand-logo { height: 52px; margin-bottom: 1.15rem; }

.footer-bottom {
  margin-top: 2.75rem;
  border-top: 1px solid var(--line-soft);
  padding-block: 1.35rem;
  font-size: 0.86rem;
  color: var(--text-dim);
}

.social-row { display: flex; gap: 0.65rem; flex-wrap: wrap; }
.social-btn {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--line-soft);
  background: rgba(254, 254, 254, 0.03);
  color: var(--text-muted);
  font-size: 1.08rem;
  transition: all 0.3s var(--ease);
}
.social-btn:hover {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px -12px rgba(248, 36, 175, 0.9);
}

/* ==================================================== floating actions =====*/

.float-stack {
  position: fixed;
  inset-block-end: 1.6rem;
  inset-inline-end: 1.6rem;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.float-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.35rem;
  border: 0;
  cursor: pointer;
  color: #fff;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.float-btn.wa { background: #25d366; box-shadow: 0 10px 28px -10px rgba(37, 211, 102, 0.85); }
.float-btn.top { background: var(--grad-brand); box-shadow: 0 10px 28px -10px rgba(248, 36, 175, 0.85); opacity: 0; pointer-events: none; }
.float-btn.top.show { opacity: 1; pointer-events: auto; }
.float-btn:hover { transform: translateY(-3px) scale(1.06); }

/* ============================================================ page head ====*/

.page-hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.page-hero .hero-waves { opacity: 0.5; inset-inline-end: -14%; width: min(60%, 780px); }

.crumbs { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.9rem; }
.crumbs a { color: var(--text-muted); }
.crumbs .sep { margin-inline: 0.5rem; opacity: 0.5; }

/* ======================================================= reveal on scroll ==*/

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================ responsive ===*/

@media (max-width: 991.98px) {
  .jana-nav .navbar-collapse {
    background: rgba(10, 1, 18, 0.98);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-top: 0.75rem;
    padding: 1rem 0.75rem;
  }
  .jana-nav .nav-link::after { display: none; }
  .hero-waves { opacity: 0.4; width: 120%; inset-inline-end: -30%; }
  .hero { min-height: auto; text-align: start; }
}

@media (max-width: 575.98px) {
  :root { --nav-h: 66px; }
  .btn-jana, .btn-jana-ghost, .btn-jana-mint { width: 100%; }
  .hero-actions { display: grid; gap: 0.7rem; }
  .float-stack { inset-inline-end: 1rem; inset-block-end: 1rem; }
  .float-btn { width: 46px; height: 46px; font-size: 1.2rem; }
}