/* =========================================================
   TUKUTUKU — LANDING PAGE ONLY (index.php)
   Adapted visual language from mineskiglobal.com:
   bold full-bleed color bands, chunky uppercase display type,
   stacked solid-color service bars, a client logo wall,
   scroll-cue chevrons between bands, centered footer lockup.

   Palette restricted to BLUE + YELLOW + WHITE (no black, no red, no pink)
   per explicit request. Scoped entirely under body.landing-mineski so
   the other pages (which share css/style.css) are never affected.
   ========================================================= */

body.landing-mineski {
  /* Palette matched to the TukuTuku Credential deck: bright sky-blue,
     yellow, and pink/magenta as the three brand accents (--navy/--red
     already carry the shared pink/yellow tokens from style.css — we
     only widen --bg-elev/--grad here and leave --red/--red-lite at
     their style.css pink defaults so badges, tags, quote-bands, and
     stat-blocks read as pink again, exactly like the deck). */
  --bg-elev:    #eaf7ff;
  --grad:       linear-gradient(100deg, var(--red) 0%, #ffffff 45%, var(--navy) 100%);
  --grad-soft:  linear-gradient(100deg, rgba(41,182,246,.16), rgba(255,201,75,.18));

  /* extra tokens just for this page's full-bleed bands — sampled
     directly from the credential deck's slide backgrounds (a bright
     cyan-sky blue), not a deep navy. */
  --land-blue-deep: #0f6fa8;
  --land-blue:       #29b6f6;
  --land-blue-lite:  #7dd8ff;
  --land-yellow:     #ffc94b;
  --land-yellow-deep:#e8a900;
}

/* ---------- wipe every hardcoded pink literal the shared stylesheet uses ---------- */
body.landing-mineski ::selection { background: var(--land-blue); color: #fff; }
body.landing-mineski .brand:hover .brand__logo,
body.landing-mineski .brand__mark { filter: drop-shadow(0 0 10px rgba(41,182,246,.35)); }
body.landing-mineski .nav-link--cta:hover { box-shadow: 0 0 22px rgba(255,79,160,.5); }
body.landing-mineski .card:hover { box-shadow: 0 22px 46px -26px rgba(41,182,246,.3); }
body.landing-mineski .card__num { -webkit-text-stroke: 1px rgba(41,182,246,.55); }
body.landing-mineski .card--cta {
  background: linear-gradient(150deg, rgba(255,79,160,.10), rgba(255,201,75,.14));
  border-color: rgba(255,79,160,.25);
}
body.landing-mineski .tag-list--service li { color: var(--red); border-color: rgba(255,79,160,.3); }
body.landing-mineski .work:hover { box-shadow: 0 26px 52px -28px rgba(255,79,160,.28); }
body.landing-mineski .work__client { color: var(--red); }
body.landing-mineski .contact-list a { color: var(--red); }
body.landing-mineski .contact-list a:hover { color: #d81b78; text-shadow: 0 0 14px rgba(255,79,160,.3); }
body.landing-mineski .footer__nav a:hover { color: var(--land-yellow); }
body.landing-mineski .about-split__mark img { filter: drop-shadow(0 0 26px rgba(41,182,246,.32)); }
body.landing-mineski .cat-header__title span { color: var(--red); }

/* ---------- chunky Mineski-style display type ---------- */
body.landing-mineski h1,
body.landing-mineski h2,
body.landing-mineski h3 { font-weight: 800; letter-spacing: 0; }
body.landing-mineski .section-title { font-size: clamp(2.5rem, 7.4vw, 4.3rem); font-weight: 800; }
body.landing-mineski .hero__title { font-weight: 800; }
body.landing-mineski .cat-header__title { font-weight: 800; }

/* ---------- full-bleed band helper ---------- */
body.landing-mineski .band-blue,
body.landing-mineski .band-blue-deep,
body.landing-mineski .band-yellow {
  position: relative;
  z-index: 0;
  isolation: isolate;
}
body.landing-mineski .band-blue::before,
body.landing-mineski .band-blue-deep::before,
body.landing-mineski .band-yellow::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  z-index: -1;
}
body.landing-mineski .band-blue::before      { background: linear-gradient(165deg, var(--land-blue) 0%, var(--land-blue-deep) 100%); }
body.landing-mineski .band-blue-deep::before { background: var(--land-blue-deep); }
body.landing-mineski .band-yellow::before    { background: linear-gradient(165deg, var(--land-yellow) 0%, var(--land-yellow-deep) 100%); }

/* scroll-cue chevron reused at the base of full-bleed bands */
body.landing-mineski .band-blue,
body.landing-mineski .band-blue-deep,
body.landing-mineski .band-yellow { padding-bottom: calc(clamp(66px, 10vw, 112px) + 30px); }
body.landing-mineski .band-blue::after,
body.landing-mineski .band-blue-deep::after,
body.landing-mineski .band-yellow::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 18px;
  width: 14px; height: 14px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid rgba(255,255,255,.55);
  border-bottom: 2px solid rgba(255,255,255,.55);
  animation: cue 2s var(--ease) infinite;
}
body.landing-mineski .band-yellow::after {
  border-right-color: rgba(58,31,46,.55);
  border-bottom-color: rgba(58,31,46,.55);
}

/* text on dark blue bands */
body.landing-mineski .band-blue .section-tag,
body.landing-mineski .band-blue-deep .section-tag {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff;
}
body.landing-mineski .band-blue .section-title,
body.landing-mineski .band-blue-deep .section-title,
body.landing-mineski .band-blue h2,
body.landing-mineski .band-blue-deep h2 { color: #fff; }
body.landing-mineski .band-blue .section-lede,
body.landing-mineski .band-blue-deep .section-lede { color: rgba(255,255,255,.82); }
/* NOTE: scoped to .band-blue-deep only (not .band-blue) — #services uses
   .band-blue but holds plain light cards (intro card--cta, product cards)
   that must keep their normal dark-on-light text; only the "Why TukuTuku"
   band-blue-deep section needs light-on-dark card styling. */
body.landing-mineski .band-blue-deep .card {
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.055));
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 18px 40px -26px rgba(2,16,34,.6);
}
body.landing-mineski .band-blue-deep .card:hover {
  border-color: rgba(255,255,255,.65);
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
}
body.landing-mineski .band-blue-deep .card__title { color: #fff; }
body.landing-mineski .band-blue-deep .card p { color: rgba(255,255,255,.75); }
body.landing-mineski .band-blue .spirit-banner__copy p,
body.landing-mineski .band-blue-deep .spirit-banner__copy p { color: rgba(255,255,255,.85); }
body.landing-mineski .band-blue .event-types__label,
body.landing-mineski .band-blue-deep .event-types__label { color: rgba(255,255,255,.75); }
body.landing-mineski .band-blue .tag-list--service li,
body.landing-mineski .band-blue-deep .tag-list--service li {
  color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32);
}
body.landing-mineski .band-blue .catalog-card,
body.landing-mineski .band-blue-deep .catalog-card { background: #fff; border-color: rgba(255,255,255,.4); }

/* ---------- OUR SPIRIT: plain white section, blue cards ----------
   Was a full-bleed blue band with white cards; flipped per request so
   the section itself reads as a plain white section (matches the rest
   of the page's white sections, dot-texture glow included) while the
   three spirit-card columns keep the brand blue as their own accent. */
body.landing-mineski #spirit .spirit-card {
  background: linear-gradient(165deg, var(--land-blue) 0%, var(--land-blue-deep) 100%);
}
body.landing-mineski #spirit .spirit-card p { color: rgba(255,255,255,.88); }

/* text on yellow bands */
body.landing-mineski .band-yellow .section-tag {
  background: rgba(58,31,46,.1); border-color: rgba(58,31,46,.3); color: #3a1f2e;
}
body.landing-mineski .band-yellow .section-title,
body.landing-mineski .band-yellow h2 { color: #3a1f2e; }
body.landing-mineski .band-yellow .section-lede { color: rgba(58,31,46,.72); }
/* Cards on the yellow band inherited the site-wide .card style, a
   near-transparent dark tint meant to sit on white — on this orange/yellow
   gradient it barely read as a card at all (content blending into the
   background). Give these cards an opaque white surface instead, matching
   how every other colored band (blue, blue-deep) already gives its cards
   real contrast against the band. */
body.landing-mineski .band-yellow .card {
  background: #fff;
  border-color: rgba(58,31,46,.1);
  box-shadow: 0 18px 40px -24px rgba(58,31,46,.35);
}
body.landing-mineski .band-yellow .card:hover { border-color: rgba(58,31,46,.22); }
body.landing-mineski .band-yellow .card__num { -webkit-text-stroke-color: rgba(15,111,168,.5); }
body.landing-mineski .band-yellow .card p { color: rgba(58,31,46,.85); }
body.landing-mineski .band-yellow .card__title { color: #3a1f2e; }
body.landing-mineski .band-yellow .timeline__year { color: #0f6fa8; }
body.landing-mineski .band-yellow .timeline__rule { background: rgba(58,31,46,.18); }
body.landing-mineski .band-yellow .timeline__rule span { background: #3a1f2e; }
body.landing-mineski .band-yellow .timeline__text { color: rgba(58,31,46,.72); }
body.landing-mineski .band-yellow .timeline__text strong { color: #3a1f2e; }
body.landing-mineski .band-yellow .timeline__photo { background: rgba(255,255,255,.5); border-color: rgba(58,31,46,.15); }

/* decorative slogan badge clashes on colored bands — hide it there */
body.landing-mineski .band-blue .section-slogan,
body.landing-mineski .band-blue-deep .section-slogan,
body.landing-mineski .band-yellow .section-slogan { display: none; }

/* #selalu ADA CARA badge is now a link straight to Contact — style.css sets
   pointer-events:none on .section-slogan for the plain <img> version used
   elsewhere, so re-enable it here for the <a> wrapper and add a hover cue. */
body.landing-mineski a.section-slogan {
  pointer-events: auto;
  cursor: pointer;
  display: block;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
body.landing-mineski a.section-slogan:hover,
body.landing-mineski a.section-slogan:focus-visible {
  opacity: 1;
  transform: scale(1.08);
}
body.landing-mineski a.section-slogan img { display: block; width: 100%; height: auto; }

/* ---------- PLAIN SECTION ORNAMENT ----------
   .bg-layers (grid/orbs) is position:fixed to the viewport, so on a long
   page it only ever peeks through the outer gutters beside .section's
   max-width column — the column itself (where all the content sits)
   stayed flat white. This gives every plain white section (and the
   Clients marquee bar, which has no .section wrapper at all) its own
   on-brand corner glow + a faint dot texture that scrolls with the
   content, so no page reads as empty white as you scroll through it.
   Skipped on the colored bands, which already have their own full-bleed
   treatment. */
body.landing-mineski .section:not(.band-blue):not(.band-blue-deep):not(.band-yellow),
body.landing-mineski .marquee-wrap {
  background-image:
    radial-gradient(circle at 97% 4%, rgba(255,201,75,.18), transparent 40%),
    radial-gradient(circle at 3% 98%, rgba(41,182,246,.16), transparent 44%),
    radial-gradient(rgba(41,182,246,.10) 1.4px, transparent 1.4px);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: right top, left bottom, 0 0;
  background-size: 60% 60%, 55% 55%, 26px 26px;
}
@media (max-width: 640px) {
  body.landing-mineski .section:not(.band-blue):not(.band-blue-deep):not(.band-yellow),
  body.landing-mineski .marquee-wrap {
    background-size: 80% 40%, 80% 40%, 22px 22px;
  }
}

/* ---------- NAVBAR: always solid, never transparent-over-hero ---------- */
body.landing-mineski .navbar {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

/* New icon + "TukuTuku Production" wordmark are both white artwork — they
   read fine on the footer's dark blue on their own, but need a dark chip
   behind them here so they don't disappear against the (light) navbar. */
body.landing-mineski .brand__badge {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.landing-mineski .brand__icon-new {
  height: 30px;
  width: auto;
  display: block;
}
body.landing-mineski .footer__brand .brand__icon-new { height: 36px; }
body.landing-mineski .brand__mark--new { filter: none; }
body.landing-mineski .navbar .brand__badge {
  background: var(--land-blue-deep);
  padding: 9px 16px;
  border-radius: var(--r-pill);
}

/* ---------- HERO: bold full-bleed blue band, huge type, no photo/pink ---------- */
body.landing-mineski .hero-pin { position: relative; }
body.landing-mineski .hero-pin .hero {
  min-height: 100svh;
  /* Same crew photo used as the cover background in the TukuTuku Credentials
     deck (control-room, backstage silhouettes against monitors), given the
     same blue duotone treatment so it reads as one brand system with the
     deck rather than a random stock photo. The gradient sits above the
     photo (not blend-mode) so it matches the deck's flat color-overlay
     look exactly, and stays dark/legible enough for the white hero text. */
  background:
    linear-gradient(165deg, rgba(41,182,246,.82) 0%, rgba(15,111,168,.92) 100%),
    url('../img/hero-crew-control-room.jpg') center 30%/cover no-repeat;
}
/* Compact hero used on the feature pages split out of the landing page
   (overview/stories/services/portfolio/clients/contact-us.php) — same
   blue band treatment, no pinned scroll zoom. */
body.landing-mineski .hero--compact {
  background: linear-gradient(165deg, var(--land-blue) 0%, var(--land-blue-deep) 100%);
}

/* ---------- FEATURE-PAGE HERO ACCENTS ----------
   Every hero--compact page shared the exact same blue band, which made
   clicking through the nav feel repetitive. Each feature page now gets
   its own accent (still built from the same brand palette) so the page
   itself signals "you're somewhere new": Overview keeps the default
   brand blue, Services gets yellow/gold, Portfolio gets pink (its most
   colorful, creative-showcase page), Clients gets a deeper, calmer navy,
   and Contact gets a warm pink→yellow gradient to stand out as the final,
   call-to-action page. */
body.landing-mineski .hero--compact.hero--accent-yellow {
  background: linear-gradient(165deg, var(--land-yellow) 0%, var(--land-yellow-deep) 100%);
}
body.landing-mineski .hero--accent-yellow .hero__eyebrow {
  border-color: rgba(58,31,46,.3); background: rgba(58,31,46,.08); color: #3a1f2e;
}
body.landing-mineski .hero--accent-yellow .hero__title { color: #3a1f2e; }
body.landing-mineski .hero--accent-yellow .hero__title .accent { color: var(--land-blue-deep); }
body.landing-mineski .hero--accent-yellow .hero__desc { color: rgba(58,31,46,.75); }

body.landing-mineski .hero--compact.hero--accent-pink {
  background: linear-gradient(165deg, var(--red) 0%, #b81766 100%);
}
body.landing-mineski .hero--accent-pink .hero__title .accent { color: var(--land-yellow); }
/* The default translucent-white eyebrow pill was made for the blue/navy
   heroes; on this hot-pink gradient it nearly disappeared (white-on-white
   with a bright pink backdrop). Give it a darker tint so the pill itself
   stays visible, not just the text inside it. */
body.landing-mineski .hero--accent-pink .hero__eyebrow {
  border-color: rgba(58,10,35,.3); background: rgba(58,10,35,.24); color: #fff;
}

body.landing-mineski .hero--compact.hero--accent-deep {
  background: linear-gradient(165deg, var(--land-blue-deep) 0%, #073352 100%);
}

body.landing-mineski .hero--compact.hero--accent-warm {
  background: linear-gradient(120deg, var(--red) 0%, #e0538f 45%, var(--land-yellow) 100%);
}
body.landing-mineski .hero--accent-warm .hero__title .accent { color: #3a1f2e; }
/* Same fix as accent-pink: the pink→yellow gradient washes out a
   translucent-white pill almost completely. */
body.landing-mineski .hero--accent-warm .hero__eyebrow {
  border-color: rgba(58,10,35,.28); background: rgba(58,10,35,.22); color: #fff;
}

body.landing-mineski .hero__media--stage,
body.landing-mineski .hero__beams,
body.landing-mineski .hero__scrim { background: none; }
body.landing-mineski .hero__truss {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.25) 0 2px, transparent 2px 26px),
    linear-gradient(90deg, var(--land-yellow) 0%, #fff 100%);
  box-shadow: 0 12px 30px rgba(6,42,143,.35);
  border-bottom-color: rgba(255,255,255,.12);
}
body.landing-mineski .hero__grain { opacity: .05; }
body.landing-mineski .hero__eyebrow {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
}
body.landing-mineski .hero__title {
  color: #fff;
  font-size: clamp(3.1rem, 10vw, 7rem);
}
/* Feature-page heroes (hero--compact) keep a smaller, single-line-friendly
   title size instead of the huge landing-page display size above. */
body.landing-mineski .hero--compact .hero__title { font-size: clamp(2.4rem, 7vw, 4.4rem); }
body.landing-mineski .hero__title .accent { color: var(--land-yellow); }
body.landing-mineski .hero__desc { color: rgba(255,255,255,.85); }
body.landing-mineski .hero__actions .btn--ghost {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
body.landing-mineski .hero__actions .btn--ghost:hover { background: rgba(255,255,255,.18); border-color: #fff; }
body.landing-mineski .hero__actions .btn--primary { background: var(--land-yellow); color: #3a1f2e; }
body.landing-mineski .hero__actions .btn--primary:hover { background: #fff; box-shadow: 0 14px 38px -10px rgba(255,201,75,.7); }
body.landing-mineski .stats {
  background: #fff;
  border-color: rgba(15,111,168,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 48px -20px rgba(4,28,54,.45);
}
body.landing-mineski .stat__num { color: var(--land-blue-deep); }
body.landing-mineski .stat__label { color: #4a5c6b; }
/* ---------- hero title entrance ----------
   Every word (including the accent word, "meaningful") pops out from a
   small, centered state ("muncul dari dalam keluar"), staggered
   word-by-word via --word-i (set inline on each span in index.php).
   No scroll-driven zoom — the accent word sits flush with the rest of
   the title, same size and spacing, just colored differently. */
body.landing-mineski .hero__title .word {
  display: inline-block;
  transform-origin: center;
  transform: scale(.4);
  opacity: 0;
  transition: transform .7s var(--ease), opacity .7s var(--ease);
  transition-delay: calc(var(--word-i, 0) * .08s);
}
body.landing-mineski .hero__title.is-revealed .word {
  transform: scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  body.landing-mineski .hero__title .word {
    transition: none;
    opacity: 1;
    transform: none;
  }
}
body.landing-mineski .scroll-cue { color: rgba(255,255,255,.75); }
body.landing-mineski .scroll-cue:hover { color: var(--land-yellow); }
body.landing-mineski .scroll-cue__line { background: linear-gradient(180deg, transparent, var(--land-yellow)); }
body.landing-mineski #hero .section-slogan { display: none; }

/* ---------- CLIENT LOGO WALL ---------- */
body.landing-mineski .marquee-wrap {
  background-color: #ffffff;
  border-block-color: var(--line);
  padding-top: 44px;
}
body.landing-mineski .marquee-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .3em; color: var(--red);
}
body.landing-mineski .marquee__track li {
  background: linear-gradient(180deg, #ffffff, #f2f6ff);
  border-color: rgba(41,182,246,.15);
  box-shadow: 0 6px 16px rgba(41,182,246,.10);
}
body.landing-mineski .marquee__track li:hover { box-shadow: 0 10px 22px rgba(41,182,246,.18); }

/* ---------- SERVICES: stacked solid-color pill bars ---------- */
body.landing-mineski #services .card-grid--3 {
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 18px);
}
body.landing-mineski #services .card--cta,
body.landing-mineski #services .card-grid--3 .card {
  background: #ffffff;
  border: none;
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 38px) clamp(26px, 4vw, 46px);
}
body.landing-mineski #services .card-grid--3 .card:nth-child(2) { background: var(--land-yellow); }
body.landing-mineski #services .card-grid--3 .card:nth-child(2) .card__title,
body.landing-mineski #services .card-grid--3 .card:nth-child(2) p,
body.landing-mineski #services .card-grid--3 .card:nth-child(2) .tag-list li { color: #3a1f2e; }
body.landing-mineski #services .card-grid--3 .card:nth-child(2) .card__num { -webkit-text-stroke-color: rgba(58,31,46,.5); }
/* This card's own background is yellow (above), so the "gold" stat pill
   variant — also yellow by default — disappeared into it entirely. Give it
   a dark plum fill instead so it still reads as a pill on this one card. */
body.landing-mineski #services .card-grid--3 .card:nth-child(2) .stat-block--gold .stat-block__num {
  background: #3a1f2e; color: #fff; box-shadow: 0 10px 26px -14px rgba(58,31,46,.55);
}
body.landing-mineski #services .card__title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
body.landing-mineski #services .card:hover { transform: translateX(6px); box-shadow: 0 18px 40px -22px rgba(6,42,143,.5); }

/* ---------- NUMBERS ---------- */
/* Plain (uncolored) cards get a faint sky-blue tint; the --red (pink)
   and --gold (yellow) variants keep their solid style.css colors so the
   grid reads as the deck's alternating white / pink / yellow pattern. */
body.landing-mineski .numbers-grid__item:not(.numbers-grid__item--red):not(.numbers-grid__item--gold) {
  background: #f2f9ff; border-color: rgba(41,182,246,.15);
}
/* This was meant to color only the plain cards' numbers — it was
   accidentally winning over the --red/--gold variants' own style.css
   colors too (higher specificity), turning every number sky-blue even on
   the hot-pink card, which clashed instead of matching its own tile. */
body.landing-mineski .numbers-grid__item:not(.numbers-grid__item--red):not(.numbers-grid__item--gold) strong { color: var(--land-blue); }

/* ---------- CTA BAND: full-bleed blue ---------- */
body.landing-mineski .cta-band {
  position: relative; z-index: 0; isolation: isolate;
  max-width: none; padding-block: clamp(66px, 9vw, 100px); padding-inline: 0; margin-bottom: 0;
}
body.landing-mineski .cta-band::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  background: linear-gradient(165deg, var(--land-blue) 0%, var(--land-blue-deep) 100%);
  z-index: -1;
}
body.landing-mineski .cta-band__inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  border: none; border-radius: 0;
  background: none;
}
body.landing-mineski .cta-band__inner h2,
body.landing-mineski .cta-band__inner p { color: #fff; }
body.landing-mineski .cta-band__inner p { color: rgba(255,255,255,.82); }
body.landing-mineski .cta-band__inner .btn--primary { background: var(--land-yellow); color: #3a1f2e; box-shadow: none; }
body.landing-mineski .cta-band__inner .btn--primary:hover { background: #fff; }
body.landing-mineski .cta-band .section-slogan { display: none; }

/* ---------- CONTACT ---------- */
body.landing-mineski #contact .card { border-color: rgba(41,182,246,.20); }

/* ---------- FOOTER: centered lockup, deep blue, mineski-style ---------- */
body.landing-mineski .footer {
  background: var(--land-blue-deep);
  border-top: none;
}
body.landing-mineski .footer__inner {
  flex-direction: column;
  text-align: center;
  gap: 18px;
}
body.landing-mineski .footer__brand { display: flex; flex-direction: column; align-items: center; }
body.landing-mineski .footer__brand .brand__word { color: #fff; }
body.landing-mineski .footer__brand p { color: rgba(255,255,255,.65); }
body.landing-mineski .footer__nav { justify-content: center; color: rgba(255,255,255,.7); }
body.landing-mineski .footer__nav a:hover { color: var(--land-yellow); }
body.landing-mineski .footer__copy { border-top-color: rgba(255,255,255,.15); color: rgba(255,255,255,.45); }
body.landing-mineski .to-top { background: rgba(15,111,168,.92); border-color: rgba(255,255,255,.3); color: #fff; }
body.landing-mineski .to-top:hover { border-color: var(--land-yellow); color: var(--land-yellow); }

@media (prefers-reduced-motion: reduce) {
  body.landing-mineski .band-blue::after,
  body.landing-mineski .band-blue-deep::after,
  body.landing-mineski .band-yellow::after { animation: none; }
}