/* =========================================================
   SKUBIQ — Peak Season Ready
   Premium monochrome landing page.
   Palette: Black #0A0A0A · White #FFFFFF · Red #E10600
   Sharp corners · Monospace uppercase small text · No gradients · No glow
   ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

:root {
  --black:   #000000;
  --white:   #FFFFFF;
  --red:     #EB0B1F;
  --red-hover: #C70A1A;

  --grey-50:   #F5F5F5;
  --grey-100:  #F5F5F5;
  --grey-200:  #E5E5E5;
  --grey-300:  #B5B5B5;
  --grey-400:  #B5B5B5;
  --grey-500:  #6B6B6B;
  --grey-700:  #1A1A1A;

  /* ---------------------------------------------------------------
     LAYOUT SYSTEM — single shared container used by every section.
     Max-width 1320px (within the 1280–1360 enterprise range).
     Gutter scales from 20px on phones to 56px on wide desktops.
     The headline, paragraph, ticker, and (on non-hero pages) the
     whole section sit inside this container so the logo, nav, hero
     copy and footer all share one left/right edge.
     --------------------------------------------------------------- */
  --max-w: 1320px;
  --pad-x: clamp(20px, 5vw, 56px);

  /* ---------------------------------------------------------------
     SPACING SCALE — 8px base. Use these tokens instead of arbitrary
     pixel values so every section feels mathematically aligned.
     --------------------------------------------------------------- */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8: 128px;

  /* ---------------------------------------------------------------
     TYPE SCALE — hierarchy from eyebrow (smallest) to display
     (largest). clamp() lets values shrink on short viewports while
     never blowing up on ultrawide.
     --------------------------------------------------------------- */
  --fs-eyebrow:   12px;
  --fs-nav:       13px;
  --fs-button:    13px;
  --fs-ticker:    11px;
  --fs-body-sm:   14px;
  --fs-body:      17px;
  --fs-body-lg:   18px;
  --fs-h3:        clamp(24px, 2.4vw, 32px);
  --fs-h2:        clamp(32px, 3.6vw, 48px);
  --fs-h1:         clamp(48px, 5.5vw, 76px);

  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Oswald', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  /* Shared content container — the SINGLE source of truth for the
     left/right page edge. Every section, header, footer and the
     hero copy sit inside this so the logo, nav, hero text, CTAs and
     ticker all align to the same x position at every viewport.
     width 100% with max-width 1320px means full-bleed backgrounds
     can still span the viewport (set them on the parent section),
     while the content itself never exceeds 1320px and is centred. */
  width: 100%;
  max-width: var(--max-w);
  padding-inline: var(--pad-x);
}

/* =========================================================
   SECTION COLOUR STATES — three reusable classes.
   Apply ONE of these to every <section> wrapper. They define
   the background, text colour, eyebrow colour, and the heading
   + body type colour for that surface. All other section rules
   inherit from these and stay scoped to their own selectors.

   No gradients, no shadows. Sharp corners. 4.5:1 contrast for
   body text, 3:1 for large text (headings 18px+ bold or 24px+).

   Section rhythm:
     #000 hero → #000 story → #fff customers → #000 platform
     → #fff industries → #000 pricing → #EB0B1F cta → #000 footer
   No two neighbours share a colour, except hero+story (both #000).
   ========================================================= */
/* Smooth scroll for in-page anchors (topbar menu, footer links).
   DISABLED on the story carousel (a ScrollTrigger-pinned element)
   because the browser's smooth-scroll fights GSAP's scroll hijack. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.has-pinned-carousel) { scroll-behavior: smooth; }
}

body {
  /* Perspective is set per-card (via .platform-card / .plan) instead of
     globally on <body>. A global 3D context was forcing every section
     and every video element into a 3D rendering tree at page load —
     noticeable jank on the carousel. */
}

.section--black {
  /* Layered "transparent black" depth — a faint red glow top-right and
     bottom-left, plus a top-to-bottom gradient so the surface is never
     a flat slab. Gives the post-carousel section that "transparent,
     modern 3D" feel. */
  background:
    radial-gradient(900px 600px at 92% -8%,  rgba(235, 11, 31, 0.12) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(700px 500px at 4% 108%,  rgba(235, 11, 31, 0.07) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
  color: #FFFFFF;
  position: relative;
}
/* Full-viewport video surfaces (hero + story) get a plain flat black so
   the layered gradients + scanline don't burn GPU time painting behind a
   video that's covering them anyway. */
.section--black.hero,
.section--black.story {
  background: #000000;
}
.section--black.story { isolation: isolate; }
/* Scanline overlay removed — the per-frame paint cost on a full-viewport
   dark section was visible at load. The radial-gradient depth still
   gives the section the layered look without the extra compositing. */
.section--black > * { position: relative; z-index: 1; }

.section--white {
  background:
    radial-gradient(800px 500px at 100% 0%, rgba(235, 11, 31, 0.04) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  color: #000000;
}
.section--red {
  background: #EB0B1F;
  color: #FFFFFF;
}

/* ---- Headings, body, eyebrow colour per surface ---- */
.section--black .section-title { color: #FFFFFF; }
.section--black .section-sub   { color: #B5B5B5; }
.section--black .eyebrow-mono {
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section--black .eyebrow-mono::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--red);
}

.section--white .section-title { color: #000000; }
.section--white .section-sub   { color: #4a4a4a; }
.section--white .eyebrow-mono { color: var(--red); }

.section--red .section-title { color: #FFFFFF; }
.section--red .section-sub   { color: #FFFFFF; opacity: .9; }
.section--red .eyebrow-mono { color: #FFFFFF; }

/* Section-level borders that follow the colour rhythm.
   3px red line on white sections that follow a black section,
   1px translucent white line between two black areas. */
.section--white.section--after-black { border-top: 3px solid var(--red); }
.section--black + .section--black { border-top: 1px solid rgba(255,255,255,.12); }
.section--white + .section--white { border-top: 1px solid #E5E5E5; }

/* =========================================================
   SHARED MONOSPACE BUTTONS — sharp corners, 1px borders
   ========================================================= */
.btn-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 18px;
  border-radius: 0;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-mono.btn-lg { padding: 18px 24px; font-size: 13px; letter-spacing: .15em; }

.btn-mono.btn-solid {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.btn-mono.btn-solid:hover { background: var(--red); color: var(--white); border-color: var(--red); }

.btn-mono.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.55);
}
.btn-mono.btn-outline:hover { background: var(--red); color: var(--white); border-color: var(--red); }

.btn-mono.btn-outline-dark {
  background: transparent;
  color: var(--black);
  border-color: var(--grey-300);
}
.btn-mono.btn-outline-dark:hover { background: var(--red); color: var(--white); border-color: var(--red); }

.btn-mono.btn-red {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn-mono.btn-red:hover { background: var(--black); border-color: var(--black); }

/* Eyebrow (small monospace label) */
.eyebrow-mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 18px;
}
.eyebrow-red { color: var(--red); }

/* =========================================================
   TOP BAR — transparent over video, minimal
   ========================================================= */
/* .topbar {
  width: 100%;
  position: fixed;
  inset: 0 0 auto 0;

  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  height: 80px;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  border-bottom: 1px solid transparent;
}

.topbar-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--space-2);
  height: 100%;
} */
/* =========================================================
   SKUBIQ TOPBAR
   Logo = Left
   Navigation = True Center
   Actions = Right
   ========================================================= */

.topbar {
  width: 100%;
  position: fixed;
  inset: 0 0 auto 0;

  z-index: 1030;
  height: 80px;
  box-sizing: border-box;

  /* Remove Bootstrap/container side spacing */
  padding: 0 32px;

  background: transparent;
  border-bottom: 1px solid transparent;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}


/* =========================================================
   MAIN HEADER ROW
   ========================================================= */

.topbar-row {
  position: relative;

  width: 100%;
  max-width: none;

  height: 100%;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
}


/* =========================================================
   LOGO — LEFT
   ========================================================= */

.topbar-row .logo-link {
  position: relative;
  display: block;
  width: 180px;
  height: 50px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  z-index: 2;
}

.topbar-row .logo-img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 180px;
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.topbar-row .logo-on-dark {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}

.topbar.topbar--light .topbar-row .logo-on-dark {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 0.25s;
}

.topbar.topbar--light .topbar-row .logo-on-light {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}


/* =========================================================
   NAVIGATION — TRUE CENTER
   ========================================================= */

.topbar-nav {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 34px;

  margin: 0;
  padding: 0;

  white-space: nowrap;

  z-index: 1;
}


/* Individual navigation items */

.topbar-nav-item {
  position: relative;

  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;
}


/* Navigation buttons */

.topbar-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin: 0;
  padding: 8px 0;

  border: 0;
  background: transparent;

  color: #ffffff;

  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: .04em;
  text-transform: uppercase;

  cursor: pointer;

  white-space: nowrap;
}


/* Chevron */

.topbar-nav-link .bi-chevron-down {
  font-size: 10px;
  line-height: 1;

  transition: transform .2s ease;
}


/* Optional hover */

.topbar-nav-link:hover {
  color: #ffffff;
}

.topbar-nav-item:hover .bi-chevron-down {
  transform: translateY(1px);
}


/* =========================================================
   REGION
   ========================================================= */

.topbar-region-wrap {
  position: relative;

  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;
}

.topbar-region {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin: 0;
  padding: 8px 0;

  border: 0;
  background: transparent;

  color: #ffffff;

  font-size: 13px;
  font-weight: 700;

  line-height: 1;
  letter-spacing: .04em;

  cursor: pointer;
}

.topbar-region .bi-globe2 {
  font-size: 14px;
}

.topbar-region .bi-chevron-down {
  font-size: 10px;
}


/* =========================================================
   RIGHT SIDE — LOGIN + REQUEST DEMO
   ========================================================= */

.topbar-right {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 16px;

  margin-left: auto;
  padding: 0;

  z-index: 2;
}


/* =========================================================
   LOGIN
   ========================================================= */

.topbar-cta-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  min-width: 88px;

  padding: 0 22px;

  box-sizing: border-box;

  background: #ed1b2f;
  color: #ffffff;

  text-decoration: none;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: .06em;

  transition:
    background .2s ease,
    transform .2s ease;
}

.topbar-cta-red:hover {
  background: #d91428;
  color: #ffffff;
}


/* =========================================================
   REQUEST DEMO
   ========================================================= */

.topbar-right .btn-mono,
.topbar-right .sk-demo-trigger {
  height: 44px;

  padding: 0 26px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: .05em;
}


/* =========================================================
   LOGGED-IN ACCOUNT
   ========================================================= */

.topbar-account {
  position: relative;

  display: flex;
  align-items: center;
}

.topbar-account-btn {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  height: 44px;

  padding: 0 4px;

  border: 0;
  background: transparent;

  color: #ffffff;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}


/* =========================================================
   REMOVE UNWANTED CONTAINER BEHAVIOUR
   ========================================================= */

.topbar > .container,
.topbar .container.topbar-row {
  width: 100%;
  max-width: none;

  margin-left: 0;
  margin-right: 0;

  padding-left: 0;
  padding-right: 0;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 1200px) {
  .topbar {
    padding-left: 48px;
    padding-right: 48px;
  }

  .topbar-nav {
    gap: 38px;
  }
}


@media (min-width: 1440px) {
  .topbar {
    padding-left: 64px;
    padding-right: 64px;
  }

  .topbar-nav {
    gap: 42px;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .topbar {
    padding-left: 28px;
    padding-right: 28px;
  }

  .topbar-nav {
    gap: 22px;
  }

  .topbar-nav-link,
  .topbar-region {
    font-size: 12px;
  }

  .topbar-right {
    gap: 10px;
  }

  .topbar-right .btn-mono,
  .topbar-right .sk-demo-trigger {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {
  .topbar-nav {
    display: none;
  }

  .topbar {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 640px) {
  .topbar { height: 64px; }
}
.topbar.is-scrolled {
  background: rgba(10,10,10,.82);
  border-bottom-color: rgba(255,255,255,.08);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}


.topbar-right {
  display: flex;
  align-items: center;
  /* The right slot of the header row — flex-end inside the .topbar-row.
     Anchors LOGIN + REQUEST DEMO to the right edge of the shared 1320px
     container. `justify-content: flex-end` is explicit (matching the
     request: logo flex-start, nav centred, buttons flex-end). */
  justify-content: flex-end;
  /* 16px between LOGIN and REQUEST DEMO so the pair reads as a
     matched CTA cluster. */
  gap: var(--space-2);
}

/* =========================================================
   PRIMARY NAV — Products / Solutions / Resources + Region
   Sits between the logo and the existing button group. Hidden
   on tablet/mobile (≤1080px) — all items live in the MENU drawer
   there.
   ========================================================= */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  /* The middle slot of the header row.
        • flex: 1 1 auto  — expand to fill the gap left by the surrounding
                              logo (.logo-link at flex-start) and the
                              right-side actions (.topbar-right at
                              flex-end).
        • justify-content: center — centres PRODUCTS / SOLUTIONS /
                                    RESOURCES / IN horizontally inside
                                    the slot.
        • min-width: 0  — lets the nav actually shrink in tight viewports
                            instead of overflowing. */
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  margin-right: var(--space-1);
}
.topbar-nav-item { position: relative; }
.topbar-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  /* Poppins 600 13px uppercase. Reads as a polished enterprise menu. */
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease;
}
.topbar-nav-link:hover,
.topbar-nav-link:focus-visible { color: var(--red); }
.topbar-nav-link .bi { font-size: 10px; transition: transform .15s ease; }
.topbar-nav-item:hover .topbar-nav-link .bi,
.topbar-nav-link[aria-expanded="true"] .bi { transform: rotate(180deg); }

/* Region selector — globe + "IN" + caret. Plain-text chrome so it
   stays visually distinct from the boxed CTA buttons next to it. */
.topbar-region {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  letter-spacing: .06em;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease;
}
.topbar-region:hover,
.topbar-region:focus-visible { color: var(--red); }
.topbar-region .bi-globe2 { font-size: 14px; }
.topbar-region .bi-chevron-down { font-size: 9px; }

/* Region picker popup — mirrors the old navbar's country picker.
   Anchored under the globe button, dark glass card matching the
   landing topbar palette. */
.topbar-region-wrap { position: relative; }
.region-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  background: rgba(10,10,10,.96);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 16px 16px;
  z-index: 90;
  box-shadow: 0 18px 38px -10px rgba(0,0,0,.6);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  color: #fff;
  /* Slide-in animation */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.region-dropdown:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}
.region-dropdown[hidden] { display: none; }
.region-dropdown-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.region-dropdown-headline {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.region-dropdown-headline strong { font-weight: 600; }
.region-dropdown-headline .badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}
.region-dropdown-headline .badge.badge-manual { background: rgba(13,202,240,.18); color: #6edff6; }
.region-dropdown-headline .badge.badge-account { background: rgba(255,255,255,.16); }
.region-dropdown-headline .badge.badge-ip { background: rgba(40,167,69,.22); color: #6fdc8c; }
.region-dropdown-region {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.region-select {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
    linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.region-select:focus {
  outline: none;
  border-color: var(--red);
  background-color: rgba(255,255,255,.10);
}
.region-select option {
  background: #0A0A0A;
  color: #fff;
}
.region-dropdown-foot {
  font-size: 10px;
  color: rgba(255,255,255,.4);
  font-family: var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.region-dropdown-foot .bi { color: rgba(40,167,69,.7); }
.region-apply {
  width: 100%;
  margin-top: 10px;
  background: var(--red);
  color: #fff;
  border: 0;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
/* When the topbar scrolls onto a LIGHT section (topbar--light class
   added by the JS observer), invert the popup palette so it stays
   legible on white. */
.topbar--light .region-dropdown {
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.12);
  color: #0A0A0A;
  box-shadow: 0 18px 38px -10px rgba(0,0,0,.18);
}
.topbar--light .region-dropdown-title,
.topbar--light .region-dropdown-foot { color: rgba(0,0,0,.5); }
.topbar--light .region-dropdown-headline { color: #0A0A0A; }
.topbar--light .region-select {
  background: #fff;
  border-color: rgba(0,0,0,.18);
  color: #0A0A0A;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,.55) 50%, transparent 50%);
}
.topbar--light .region-select option { background: #fff; color: #0A0A0A; }
.topbar--light .region-dropdown-headline .badge {
  background: rgba(0,0,0,.08);
  color: rgba(0,0,0,.7);
}
.topbar--light .region-dropdown-headline .badge.badge-manual { background: rgba(13,202,240,.18); color: #055160; }
.topbar--light .region-dropdown-headline .badge.badge-account { background: rgba(0,0,0,.10); }
.topbar--light .region-dropdown-headline .badge.badge-ip { background: rgba(40,167,69,.18); color: #0f5132; }

/* Dropdown panel — slides out under the parent link on hover or
   keyboard focus. Sits above the rest of the page (z 70 = same as
   the topbar). */
.topbar-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: rgba(10,10,10,.96);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 0;
  z-index: 70;
  display: none;
  flex-direction: column;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.5);
}
.topbar-nav-item:hover .topbar-dropdown,
.topbar-nav-item:focus-within .topbar-dropdown,
.topbar-nav-link[aria-expanded="true"] + .topbar-dropdown { display: flex; }
.topbar-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 6px 0;
}
.topbar-dropdown-label {
  display: block;
  padding: 6px 18px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.topbar-dropdown a .bi {
  display: inline-block;
  width: 16px;
  margin-right: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  vertical-align: -2px;
}
.topbar-dropdown a.is-disabled {
  color: rgba(255,255,255,.4);
  cursor: default;
  pointer-events: none;
}
.topbar-dropdown a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s ease, background .12s ease;
}
.topbar-dropdown a:last-child { border-bottom: 0; }
.topbar-dropdown a:hover,
.topbar-dropdown a:focus-visible { color: var(--red); background: rgba(255,255,255,.04); }

/* =========================================================
   ACCOUNT MENU (signed-in)
   Same dropdown panel + trigger chrome as the primary nav,
   but always visible (not hidden behind the ≤1080px rule that
   collapses .topbar-nav into the MENU drawer).
   ========================================================= */
.topbar-account { position: relative; }
.topbar-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease;
}
.topbar-account-btn:hover,
.topbar-account-btn:focus-visible { color: var(--red); }
.topbar-account-btn .bi-chevron-down { font-size: 10px; transition: transform .15s ease; }
.topbar-account-btn[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.topbar-account-btn .bi-person-circle { font-size: 14px; }

.topbar-account-menu { right: 0; left: auto; min-width: 240px; }
.topbar-account:hover .topbar-account-menu,
.topbar-account:focus-within .topbar-account-menu,
.topbar-account-btn[aria-expanded="true"] + .topbar-account-menu { display: flex; }

/* Light-bar inversion, matching .topbar--light .topbar-nav-link. */
.topbar.topbar--light .topbar-account-btn { color: var(--black); }
.topbar.topbar--light .topbar-account-btn:hover,
.topbar.topbar--light .topbar-account-btn:focus-visible { color: var(--red); }

/* On narrow viewports, the nav collapses into the MENU drawer. */
@media (max-width: 1080px) {
  .topbar-nav { display: none; }
}
/* Mobile: tighten the topbar height to 64px so the logo and CTAs
   sit comfortably in the available space without cramping. */
@media (max-width: 768px) {
  .topbar { height: 64px; }
  .topbar-row { gap: var(--space-2); }
}

/* LOGIN CTA — brand-red fill, white text. Same height (40px) and
   chrome (Poppins 600 13px uppercase, sharp corners, 12px gap to
   REQUEST DEMO) so the two buttons sit on the same baseline.
   Hover: red turns black. 44px height + sharp corners reads as a
   premium enterprise CTA. */
.topbar-cta-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  border: 0;
  height: 44px;
  padding: 0 22px;
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.topbar-cta-red:hover,
.topbar-cta-red:focus-visible {
  background: var(--black);
  color: var(--white);
}

/* REQUEST DEMO inside the topbar — 44px tall, white fill with
   black text. Same chrome as LOGIN (Poppins 600 13px uppercase,
   sharp corners) and 12px gap to the LOGIN button so the pair
   reads as a matched CTA cluster. Hover: white turns red with
   white text. */
.topbar-right .btn-mono.btn-solid {
  height: 44px;
  padding: 0 22px;
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.topbar-right .btn-mono.btn-solid:hover,
.topbar-right .btn-mono.btn-solid:focus-visible {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
/* Mobile: shrink the LOGIN + REQUEST DEMO cluster to 36px and 11px
   so the two fit alongside the 28px logo on a 390px viewport
   without overflowing. Goes AFTER the desktop rules so the
   cascade picks the mobile values at small widths. */
@media (max-width: 768px) {
  .topbar-cta-red {
    height: 36px;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: .05em;
  }
  .topbar-right .btn-mono.btn-solid {
    height: 36px;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: .05em;
  }
  .topbar-right { gap: var(--space-1); }
}

/* Current-season pill — shows in the topbar so the active theme is obvious */
.topbar-season {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(225,6,0,.08);
  white-space: nowrap;
}
.topbar-season::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--red);
  display: inline-block;
}
.topbar-season:hover { border-color: var(--white); }

@media (max-width: 520px) {
  .topbar-season { display: none; } /* tiny screens: rely on the hero eyebrow + switcher */
}

.menu-drawer {
  position: fixed;
  inset: 80px 0 auto 0;
  /* Sits directly below the topbar (inset 80px from the top to match
     the new 80px topbar height), so it only has to beat page content —
     including Bootstrap sticky elements. */
  z-index: 1025;
  background: rgba(10,10,10,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--pad-x) var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.menu-drawer[hidden] { display: none !important; }
.menu-drawer a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.menu-drawer a:hover { color: var(--red); }
/* Region indicator inside the mobile drawer — sits alongside the
   other links but uses the brand-red text + globe icon so it's
   obvious at a glance which country is selected. */
.menu-drawer-region {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}
.menu-drawer-region .bi { font-size: 16px; }

.hero {
  position: relative;
  /* Exactly one viewport tall. Use `100svh` (small viewport) on
     mobile browsers where the URL bar inflates `100vh`. The
     flex column packs two rows: top spacer (topbar height) and
     hero-copy (flexes to fit the headline + paragraph). Everything
     fits inside the first viewport
     at common laptop sizes (1280×720, 1366×768, 1440×900). */
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Direct children of .hero (hero-image, hero-overlay, hero-spacer,
   hero-copy) sit above the dark background. Specific
   z-indices below override the catch-all. */
.hero > * { position: relative; z-index: 1; }
/* The hero background image — a real <img> so the browser can preload it,
   report intrinsic dimensions, and the section never depends on a CSS
   background hack. Paints under the overlay (z-index 1 from `.hero > *`).
   Hero is now exactly 100vh tall, so the image fills the visible viewport. */
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Override the `.hero > *` rule so the image sits at z-index 0 — below
     the overlay (1) and the copy (2). */
  z-index: 0;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Fade the video in over the poster once it can play. If the video
     404s, .is-ready is never added and the poster stays on display. */
  opacity: 0;
  transition: opacity .5s ease;
}
.hero-video.is-ready { opacity: 1; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.55);
  z-index: 1;
  pointer-events: none;
}

/* Top spacer — clears the fixed topbar so the hero's first content
   row sits below it. Matches the topbar height at every breakpoint
   (80px desktop, 64px mobile). */
.hero-spacer {
  flex: 0 0 80px;
}
@media (max-width: 768px) {
  .hero-spacer { flex-basis: 64px; }
}

/* Main hero copy column. Anchored to the lower-middle of the hero
   area (around 55–60% from the top) so the headline reads as the
   dominant visual element with intentional negative space above it.
   The .hero-copy itself is a full-width flex wrapper with NO
   horizontal padding/margin/max-width — all of those are provided by
   the inner `.container` (shared with the topbar and the trust
   strip) so the logo, season label, headline, paragraph and trust
   text share one left edge at every viewport. */
.hero-copy {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;       /* required so flex children can shrink */
}
/* The actual content (eyebrow, h1, paragraph) lives inside a
   shared `.container` so it sits in the same 1320px max-width slot
   as the topbar and trust strip. The vertical rhythm follows the
   8/16/24/32/48 spacing scale: eyebrow → 16px → headline → 24px →
   paragraph. */
.hero-copy-inner {
  display: flex;
  flex-direction: column;
  /* Keep the bottom of the inner column clear of the trust strip at
     any viewport. padding-bottom on .hero-copy would push the whole
     copy up; doing it on .hero-copy-inner instead keeps the trust
     strip pinned to the bottom of the hero at all heights. */
  padding-bottom: clamp(48px, 8vh, 96px);
}
.hero-copy-inner > .eyebrow-mono + .hero-title { margin-top: var(--space-2); }
.hero-copy-inner > .hero-title + .hero-paragraph { margin-top: var(--space-3); }

/* Subtle legibility overlay — a vertical gradient at the bottom
   of the hero image, BELOW the text. Sits between the image and
   the copy. Helps the white text stay legible against the dark
   video still without darkening the whole hero. The 55% fade-out
   keeps the upper part of the image clean and reveals the warehouse
   detail; the heavier bottom 30% guarantees the headline stays
   high-contrast against busy logistics elements. */
.hero-legibility {
  position: absolute;
  inset: auto 0 0 0;
  height: 65%;
  background: linear-gradient(to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,0) 65%);
  pointer-events: none;
  z-index: 2;
}

/* Hero eyebrow — small uppercase label with a red accent dash.
   Uses Poppins 500 (not monospace) so it reads as part of the
   enterprise design system, not code chrome. */
.hero-copy .eyebrow-mono {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0;
}
.hero-copy .eyebrow-mono::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--red);
}
/* Hero headline — Oswald 500, large but controlled. max-width
   ~14ch guarantees the headline wraps to exactly two lines on
   desktop ("EVERY SUPPLY CHAIN PROBLEM." + "ONE PLATFORM.") without
   awkward third-line breaks. clamp() lets it shrink on short
   viewports while never exceeding 84px on ultrawide. */
.hero-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.04;
  margin: 0;
  color: var(--white);
  /* Controlled max-width keeps the headline from looking randomly
     wrapped. `min(960px, 100%)` is wide enough to fit "EVERY SUPPLY
     CHAIN PROBLEM." on one line at the headline's 76px size, so the
     natural break lands on the period — the second sentence ("ONE
     PLATFORM.") wraps onto its own line at every viewport. On
     narrow screens the 100% cap lets the headline shrink to the
     container width. */
  max-width: min(960px, 100%);
}
/* Hero paragraph — narrower than the headline, comfortable line
   height, white at 85% so it sits one notch below the headline
   without disappearing. */
.hero-paragraph {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  color: rgba(255,255,255,.85);
  margin: 0;
  max-width: 50ch;
  line-height: 1.6;
}

/* Optional scroll cue — a tiny 1px × 40px white line at 40% opacity
   placed at the right end of the copy block. Gentle 2.4s up-and-down
   animation. Hidden for users who prefer reduced motion.

   The cue sits inside .hero-copy which is now full-viewport-width.
   On screens wider than 1440px, the .container is centred with
   max-width 1440px, so the cue's right edge has to track that
   container rather than the viewport edge. The max() picks the
   smaller of the two values: on wide screens it tracks the centred
   container's right edge (50% - 720 + 48 = viewport-right offset);
   on screens ≤ 1440px it falls back to the container padding. */
.hero-scroll-cue {
  display: block;
  position: absolute;
  right: max(var(--pad-x), calc(50% - var(--max-w) / 2 + var(--pad-x)));
  bottom: 0;
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.4);
  transform-origin: 50% 0;
  animation: hero-scroll-cue-anim 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-scroll-cue-anim {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50%      { transform: translateY(8px); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { display: none; }
}
@keyframes hero-scroll-cue-anim {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50%      { transform: translateY(8px); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { display: none; }
}

/* Mobile (≤768px): headline shrinks and the scroll cue is hidden. */
@media (max-width: 768px) {
  .hero-copy-inner { padding-bottom: clamp(40px, 8vh, 72px); }
  .hero-copy .eyebrow-mono { font-size: 11px; letter-spacing: .12em; }
  .hero-title {
    font-size: clamp(34px, 9vw, 48px);
    line-height: 1.05;
    max-width: 100%;
  }
  .hero-paragraph { font-size: var(--fs-body-sm); max-width: 100%; }
  .hero-scroll-cue { display: none; }
}

/* =========================================================
   HORIZONTAL VIDEO STORY — pinned full-viewport, scrubbed by scroll
   ========================================================= */
.story {
  position: relative;
  background: var(--black);
  color: var(--white);
  /* Pinned height provided by GSAP; on mobile we override this below */
}
.story-pin {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.story-track {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  width: 600vw; /* 6 panels × 100vw each, expanded by JS */
  will-change: transform;
}

.story-panel {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  height: 100svh;            /* mobile-friendly viewport unit (iOS Safari) */
  width: 100vw;
  overflow: hidden;
  /* Solid dark fallback so the panel is never transparent while the
     WebP poster streams in. The gradient adds a little depth, and the
     <img> overlay (z-index 0) paints over it as soon as it decodes. */
  background-color: #050608;
  background-image: linear-gradient(180deg, #14171a 0%, #050608 100%);
  isolation: isolate;
}

/* The actual panel photo — a real <img> element so the browser can
   preload it, honour loading=lazy, decode async, and the panel never
   depends on a CSS-`::before` opacity gate to show its picture. */
.story-panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  background: #050608;       /* placeholder while the bitmap streams in */
}
.story-panel video,
.story-panel .story-panel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;                /* on top of the still, below the overlay */
  opacity: 0;
  transition: opacity .35s ease;
}
.story-panel video.is-ready,
.story-panel .story-panel-video.is-ready { opacity: 1; }
.story-panel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);   /* ~50% black to keep copy readable */
  z-index: 2;
}
.story-panel-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 0 var(--pad-x) clamp(72px, 9vh, 110px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.story-step {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--red);
  font-weight: 500;
  text-transform: uppercase;
}
.story-panel-title {
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  max-width: 760px;
  color: var(--white);
}
.story-panel-benefit {
  font-size: clamp(14px, 1.05vw, 16px);
  color: rgba(255,255,255,.78);
  max-width: 520px;
  margin: 0;
  line-height: 1.55;
}

/* Progress bar + counter + eyebrow (overlays) */
.story-progress {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.12);
  z-index: 5;
}
.story-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--red);
  transition: width .05s linear;
}
.story-counter {
  position: absolute;
  top: 80px; right: var(--pad-x);
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.7);
}
.story-eyebrow {
  position: absolute;
  top: 80px; left: var(--pad-x);
  z-index: 5;
  color: rgba(255,255,255,.6);
  margin-bottom: 0;
}

/* Mobile: native horizontal scroll-snap, no pinning */
@media (max-width: 768px) {
  .story-pin { height: 100vh; }
  .story-track {
    width: auto;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .story-track::-webkit-scrollbar { display: none; }
  .story-panel { scroll-snap-align: start; }
  .story-counter, .story-eyebrow { top: 70px; }
}

/* =========================================================
   STATS — white section, big numbers
   ========================================================= */
.stats {
  background: var(--white);
  color: var(--black);
  padding: clamp(64px, 8vw, 110px) 0;
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
}
.stats .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-value {
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--black);
}
.stat-unit { color: var(--red); font-weight: 400; }
.stat-label {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--grey-500);
}

/* =========================================================
   SECTION HEAD — used by platform, industries, pricing
   ========================================================= */
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.1;
  margin: 0 0 18px;
}
.section-sub {
  font-family: var(--font-sans);
  font-size: 17px;
  color: var(--grey-500);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 400;
}

/* =========================================================
   REVEAL ANIMATIONS — light fade-up / scale-in on scroll
   Activated by adding .reveal (and an optional delay / variant)
   to any element. A single IntersectionObserver in script.js
   toggles .is-visible. Honors prefers-reduced-motion.

   DEFAULT STATE: elements are fully visible. The hidden state is
   gated behind `body.js-ready` so the page never paints blank
   while JS is still parsing the season file or setting up the
   IntersectionObserver. If JS is slow, the page is visible.
   ========================================================= */
.reveal {
  /* Visible by default — no flash-of-invisible on refresh */
  opacity: 1;
  transform: none;
}
/* Once JS confirms it has booted, the observer hides elements that
   haven't been revealed yet, then animates them in as they enter the
   viewport. The `js-ready` class is added by boot.js before the
   observer is constructed (see script.js). */
body.js-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .55s cubic-bezier(.22, .61, .36, 1),
    transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
body.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
body.js-ready .reveal--scale {
  transform: translate3d(0, 0, 0) scale(.985);
}
body.js-ready .reveal--scale.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}
body.js-ready .reveal--glide {
  /* A slightly softer glide — used on the big section headings */
  transition-duration: .7s;
}
body.js-ready .reveal--delay-1 { transition-delay:  40ms; }
body.js-ready .reveal--delay-2 { transition-delay:  80ms; }
body.js-ready .reveal--delay-3 { transition-delay: 120ms; }
body.js-ready .reveal--delay-4 { transition-delay: 160ms; }
body.js-ready .reveal--delay-5 { transition-delay: 200ms; }
body.js-ready .reveal--delay-6 { transition-delay: 240ms; }
body.js-ready .reveal--delay-7 { transition-delay: 280ms; }
body.js-ready .reveal--delay-8 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  body.js-ready .reveal,
  body.js-ready .reveal--scale,
  body.js-ready .reveal--glide {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* Override section-sub colour per surface (defined above). */

/* =========================================================
   PLATFORM — one card per active product (DB-driven)
   Layout fills the container with even gaps and equal card heights.
   Four colour variants cycle via .platform-card--{white,red,dark}.
   ========================================================= */
.platform {
  /* background comes from .section--black */
  color: #FFFFFF;
  padding: clamp(56px, 7vw, 100px) 0 clamp(40px, 5vw, 72px);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
@media (max-width: 768px) { .platform { padding: clamp(40px, 8vw, 56px) 0 clamp(32px, 6vw, 48px); } }

.platform .container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.platform .section-head { text-align: center; margin-bottom: 56px; }

.card-grid {
  display: grid;
  gap: 20px;
}
.platform-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
  gap: 28px;
}
@media (max-width: 768px) { .platform-grid { gap: 20px; } }

/* ----- CARD BASE ----- */
.platform-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 36px 32px;
  border: 1px solid #E5E5E5;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  font-family: 'Poppins', sans-serif;
  box-shadow: none;
  transition: transform 200ms ease,
              background-color 200ms ease,
              border-color 200ms ease,
              border-top-width 200ms ease,
              color 200ms ease;
  outline: none;
}
.platform-card .num {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .02em;
}
.platform-card .icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0;
  flex: 0 0 44px;
  font-size: 22px;
  line-height: 1;
}
.platform-card .icon-tile .bi {
  font-size: 22px;
  line-height: 1;
}
.platform-card h3 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.platform-card p {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  /* Up to ~5 lines; descriptions longer than this are clipped with an ellipsis
     so cards stay aligned even if DB text grows. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.platform-card .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #E5E5E5;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
.platform-card .more .more-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

/* Top row — number on the left, icon tile on the right */
.platform-card { display: grid; }
.platform-card .num       { grid-area: num; align-self: start; }
.platform-card .icon-tile { grid-area: icon; justify-self: end; }
.platform-card h3         { grid-area: title; }
.platform-card p          { grid-area: desc; margin-top: 12px; }
.platform-card .more      { grid-area: more; margin-top: auto; }
.platform-card {
  grid-template-columns: 1fr 44px;
  grid-template-areas:
    "num   icon"
    "title title"
    "desc  desc"
    "more  more";
  row-gap: 18px;
  column-gap: 12px;
}

/* ----- VARIANT 1 & 3: WHITE ----- */
.platform-card--white {
  background: #FFFFFF;
  color: #000000;
  border-color: #E5E5E5;
  border-top: 3px solid #EB0B1F;
}
.platform-card--white .num,
.platform-card--white .more,
.platform-card--white .more .more-arrow { color: #EB0B1F; }
.platform-card--white .icon-tile {
  background: #FFFFFF;
  color: #EB0B1F;
  border: 1px solid #E5E5E5;
}
.platform-card--white .more { border-top-color: #E5E5E5; }

/* ----- VARIANT 2: RED ----- */
.platform-card--red {
  background: #EB0B1F;
  color: #FFFFFF;
  border-color: #EB0B1F;
  border-top: 3px solid #EB0B1F;
}
.platform-card--red .num,
.platform-card--red .more,
.platform-card--red .more .more-arrow { color: #FFFFFF; }
.platform-card--red .icon-tile {
  background: #FFFFFF;
  color: #EB0B1F;
}
.platform-card--red .more { border-top-color: rgba(255,255,255,.3); }

/* ----- VARIANT 4: BLACK ----- */
.platform-card--dark {
  background: #111111;
  color: #FFFFFF;
  border-color: #333333;
  border-top: 3px solid #EB0B1F;
}
.platform-card--dark .num,
.platform-card--dark .more,
.platform-card--dark .more .more-arrow { color: #EB0B1F; }
.platform-card--dark .icon-tile {
  background: #EB0B1F;
  color: #FFFFFF;
}
.platform-card--dark .more { border-top-color: rgba(255,255,255,.2); }

/* ----- HOVER & FOCUS — modern 3D lift ----- */
.platform-card {
  /* 3D layer — cards physically rise out of the surface on hover.
     `perspective` is set on the same element so the 3D effect works
     without needing a perspective ancestor on <body>. */
  perspective: 1200px;
  transform-style: preserve-3d;
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
  will-change: transform;
}
.platform-card:hover,
.platform-card:focus-visible {
  transform: translateY(-8px) translateZ(18px);
  box-shadow:
    0 24px 48px -16px rgba(0,0,0,.45),
    0 8px 16px -8px rgba(235, 11, 31, .25);
}
.platform-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.platform-card:hover .more .more-arrow,
.platform-card:focus-visible .more .more-arrow {
  transform: translateX(6px);
}
/* WHITE → red border + thicker top border */
.platform-card--white:hover,
.platform-card--white:focus-visible {
  border-color: #EB0B1F;
  border-top-width: 6px;
}
/* RED → black background */
.platform-card--red:hover,
.platform-card--red:focus-visible {
  background: #000000;
  border-color: #000000;
}
/* DARK → red background */
.platform-card--dark:hover,
.platform-card--dark:focus-visible {
  background: #EB0B1F;
  border-color: #EB0B1F;
}

@media (prefers-reduced-motion: reduce) {
  .platform-card,
  .platform-card .more .more-arrow { transition: none; }
  .platform-card:hover,
  .platform-card:focus-visible { transform: none; box-shadow: none; }
  .platform-card:hover .more .more-arrow,
  .platform-card:focus-visible .more .more-arrow { transform: none; }
}

/* Breakpoints: 4 cols from 1200, 2 cols from 640 to 1199, 1 col under 640.
   The auto-fit grid already collapses correctly, but these caps match the spec. */
@media (max-width: 1199.98px) {
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .platform-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ABOUT SKUBIQ — product video carousel
   ========================================================= */
.about-skubiq {
  /* Deep slate — slightly lighter than the hero so the section reads
     as its own surface while still sitting in the dark rhythm. */
  background: #111111;
  color: #FFFFFF;
  /* Tighter vertical padding so the section hugs its content rather
     than floating in empty black space. */
  padding: clamp(48px, 6vw, 80px) 0;
  position: relative;
}
.about-skubiq::after {
  /* Soft red glow top-right to keep the section in visual conversation
     with the platform / pricing surfaces above and below. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 92% -8%, rgba(235, 11, 31, 0.10) 0%, rgba(0,0,0,0) 60%);
}
.about-skubiq > * { position: relative; z-index: 1; }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  /* Wider container — the image is now bigger so the copy column has
     room to breathe too. */
  max-width: 1480px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* ── Media column ── */
.about-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-carousel {
  width: 100%;
  max-width: 760px;
}
.about-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 56px rgba(0,0,0,.45);
}
.about-video-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.about-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 14px;
}
.about-carousel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.about-carousel-button:hover,
.about-carousel-button:focus-visible {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}
.about-carousel-count {
  min-width: 52px;
  color: rgba(255,255,255,.72);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-align: center;
}

/* ── Copy column ── */
.about-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
}
.about-copy .eyebrow-mono {
  /* Red eyebrow, small caps, letter-spaced — matches the section-head
     eyebrow rhythm used on platform / pricing / industries. */
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
}
.about-copy .eyebrow-mono::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--red);
  margin-right: 12px;
  vertical-align: middle;
}
.about-headline {
  font-family: var(--font-heading);
  /* Larger headline — matches the visual weight of the other section
     titles now that the section is shorter. */
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 500;
  text-transform: none;
  letter-spacing: .005em;
  line-height: 1.1;
  margin: 0;
  color: #FFFFFF;
}
.about-lede {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  margin: 4px 0 0;
  color: #E5E5E5;
}
.about-body {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
  color: #B5B5B5;
}

/* ── Mobile: stack image above text ── */
@media (max-width: 880px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 48px);
    text-align: left;
  }
  .about-media { order: 1; }
  .about-copy  { order: 2; }
}

/* =========================================================
   INDUSTRIES — text grid, matches platform-card container + gap
   ========================================================= */
.industries {
  /* background comes from .section--white */
  padding: clamp(48px, 6vw, 88px) 0 clamp(48px, 6vw, 88px);
}
/* Same container chrome as the platform cards above: max-width 1440
   with the same horizontal padding rhythm. The industries grid then
   lines up exactly under the platform cards. */
.industries > .container {
  max-width: 1440px;
  padding-inline: clamp(20px, 4vw, 48px);
}
/* Bigger headline — same uppercase Oswald rhythm but with more weight
   for visual presence on this section. */
.industries .section-title {
  font-size: clamp(32px, 4vw, 52px);
}
.industries-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Real gap between cards (matches the platform-card rhythm). The
     previous `gap: 0` design relied on touching borders which made
     the grid feel like a spreadsheet — the new gap gives each card
     its own space, matching the visual language of the platform
     cards above. */
  gap: 28px;
}
@media (max-width: 1199.98px) {
  .industries-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 639.98px) {
  .industries-list { grid-template-columns: 1fr; gap: 16px; }
}
.industries-list li {
  position: relative;
  /* Card chrome mirrors .platform-card--white: 1px grey border +
     3px brand-red top accent that is always visible. */
  border: 1px solid #E5E5E5;
  border-top: 3px solid var(--red);
  /* Bigger interior padding — gives the larger fonts room to breathe
     and makes each cell feel more substantial. */
  padding: clamp(28px, 2.4vw, 40px) clamp(24px, 2.2vw, 36px);
  background: #FFFFFF;
  perspective: 1200px;
  transition:
    background-color .15s ease,
    transform .25s cubic-bezier(.22,.61,.36,1);
  transform-style: preserve-3d;
}
.industries-list li:hover,
.industries-list li:focus-within {
  background: #FAFAFA;
  transform: translateZ(6px);
}
.industries-list .ind-num {
  font-family: var(--font-mono);
  font-size: clamp(12px, .9vw, 13px);
  letter-spacing: .22em;
  color: var(--red);
  display: block;
  margin-bottom: 14px;
}
.industries-list h3 {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
}
.industries-list p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--grey-500);
  line-height: 1.55;
  max-width: 32ch;
}

/* =========================================================
   PRICING — four plans
   ========================================================= */
.pricing {
  /* background comes from .section--black */
  color: #FFFFFF;
  padding: clamp(56px, 7vw, 100px) 0 clamp(48px, 6vw, 88px);
}
.pricing-grid { grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 20px; }

.plan {
  position: relative;
  border: 1px solid var(--grey-200);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  color: #000000;
  border-top: 3px solid var(--red);
  perspective: 1200px;
  transform-style: preserve-3d;
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.plan:hover,
.plan:focus-within {
  transform: translateY(-6px) translateZ(12px);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.35);
}
.plan.is-featured:hover,
.plan.is-featured:focus-within {
  box-shadow: 0 20px 44px -12px rgba(235, 11, 31, .55);
}
.plan.is-featured {
  border-color: var(--red);
  background: #EB0B1F;
  color: #FFFFFF;
  border-top: 3px solid #EB0B1F;
  position: relative;
}
.plan-badge {
  position: absolute;
  top: -10px; left: 24px;
  background: #000000;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.plan h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: #6B6B6B;
}
.plan.is-featured h3 { color: #FFFFFF; }

.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
}
.plan-price .currency {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.plan-price .amount {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #000000;
}
.plan.is-featured .plan-price .amount { color: #FFFFFF; }
.plan-price .amount[style*="line-through"] { color: #B5B5B5; }
.plan-price .per {
  display: block;        /* move "/ N day(s)" onto its own small line under the price */
  width: 100%;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: #6B6B6B;
  line-height: 1.4;
}
.plan.is-featured .plan-price .per { color: rgba(255,255,255,.85); }

.plan-tag {
  margin: 12px 0 18px;
  font-size: 13px;
  color: #6B6B6B;
  line-height: 1.5;
}
.plan.is-featured .plan-tag { color: rgba(255,255,255,.85); }

.plan-meta {
  color: #6B6B6B !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px;
}
.plan.is-featured .plan-meta { color: rgba(255,255,255,.85) !important; }

.plan ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14px;
  color: #1A1A1A;
  flex: 1;
}
.plan.is-featured ul { color: #FFFFFF; }
.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.plan li::before {
  content: '';
  flex: none;
  width: 10px; height: 10px;
  margin-top: 6px;
  background: var(--red);
}
.plan.is-featured li::before { background: #FFFFFF; }

/* Card buttons. Default: black background, white text, hover red. */
.plan .btn-mono {
  width: 100%;
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}
.plan .btn-mono:hover {
  background: var(--red);
  color: #FFFFFF;
  border-color: var(--red);
}
/* Featured (red) card: white button with black text, hover black */
.plan.is-featured .btn-mono {
  background: #FFFFFF;
  color: #000000;
  border-color: #FFFFFF;
}
.plan.is-featured .btn-mono:hover {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}

.pricing-foot {
  text-align: center;
  margin-top: 30px;
  color: #B5B5B5;
  font-size: 13px;
}
.pricing-foot:first-of-type { color: #B5B5B5; }

/* Inline styles inside template add a small "Prices for: India" line; ensure it stays readable. */
.pricing .pricing-foot { color: #B5B5B5; font-size: 13px; }

/* =========================================================
   CTA BAND — grid-pattern, red headline + subtext + two buttons,
              vertically centered with generous breathing room.
   ========================================================= */
.cta-band {
  /* Override .section--white's radial + linear gradient with a flat
     white surface + subtle blueprint grid. The grid is two 1px
     gradient layers cross-blended so it stays cheap to paint and
     scales with the section's height. */
  background-color: #ffffff;
  background-image:
    linear-gradient(to right,  rgba(0,0,0,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.045) 1px, transparent 1px),
    radial-gradient(800px 500px at 100% 0%, rgba(235,11,31,0.04) 0%, rgba(255,255,255,0) 60%);
  background-size: 48px 48px, 48px 48px, auto;
  color: #000000;
  /* Generous top + bottom padding so the content block (headline,
     subtext, buttons) sits with clear breathing room above and
     below — never flush against the black band above or the black
     footer below. min-height + flex keeps the content visually
     centered when the viewport is tall. */
  padding: clamp(96px, 12vw, 160px) 0 clamp(96px, 12vw, 160px);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cta-band-inner {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}

.cta-band-title {
  font-family: var(--font-heading);
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0 auto 26px;
  color: var(--red);            /* brand-red headline, not black */
  text-transform: uppercase;
  max-width: 12ch;
}
.cta-band-sub {
  color: #3a3a3a;
  opacity: 1;
  margin: 0 auto 44px;
  max-width: 620px;
  line-height: 1.55;
  font-size: 17px;
  font-weight: 500;
}
.cta-band-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
/* First CTA: red filled (default .btn-red). Second CTA: outlined dark
   on the white background, picks up the red on hover/focus. */
.cta-band .btn-mono.btn-outline-dark {
  background: transparent;
  color: #000000;
  border-color: #000000;
}
.cta-band .btn-mono.btn-outline-dark:hover,
.cta-band .btn-mono.btn-outline-dark:focus-visible {
  background: var(--red);
  color: #FFFFFF;
  border-color: var(--red);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: #000000;
  color: #FFFFFF;
  /* 72px bottom padding so the season switcher (bottom right) never overlaps the
     footer text. The left side stays clear of the switcher too. */
  padding: 64px 0 72px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.footer-brand .footer-h { margin-top: 24px; }
.footer-about {
  margin: 0 0 18px;
  color: #B5B5B5;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
}
.footer-about strong {
  color: #E5E5E5;
  font-weight: 600;
}
.footer-h {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--red);
}
.footer-link-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.footer-col a {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: #E5E5E5;
  padding: 5px 0;
}
.footer-col a:hover { color: var(--red); }
.footer-mail {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #B5B5B5;
  margin: 0;
}
.footer-mail strong { color: #E5E5E5; font-weight: 500; }
.footer-mail a { color: inherit; }
.footer-mail a:hover { color: var(--red); }
.footer-subscribe-copy {
  margin: 0 0 22px;
  color: #B5B5B5;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
}
.footer-subscribe-form {
  position: relative;
  display: grid;
  gap: 12px;
}
.footer-subscribe-form .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.footer-subscribe-form input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  color: #FFFFFF;
  background: #111111;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 2px;
  font: 14px var(--font-sans);
}
.footer-subscribe-form input::placeholder { color: #A3A3A3; }
.footer-subscribe-form button {
  min-height: 46px;
  padding: 10px 16px;
  color: #FFFFFF;
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  font: 600 14px var(--font-sans);
  transition: background .2s ease, border-color .2s ease;
}
.footer-subscribe-form button:hover,
.footer-subscribe-form button:focus-visible {
  background: var(--red-hover);
  border-color: var(--red-hover);
}
.footer-social-heading {
  margin: 26px 0 12px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: #FFFFFF;
}
.socials { display: flex; gap: 8px; margin: 0; }
.social {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.15);
  font-family: var(--font-mono);
  font-size: 12px;
  color: #E5E5E5;
}
.social:hover { border-color: var(--red); color: var(--red); }
.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #B5B5B5;
}
.footer-bottom a { color: #B5B5B5; }
.footer-bottom a:hover { color: var(--red); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Tablet — industries collapses to 2 columns (was 3). The right-hand
   border on the 2nd, 4th, 6th cards is removed so the hairline grid
   stays clean. */
@media (max-width: 1080px) {
  .industries-list { grid-template-columns: repeat(2, 1fr); }
  .industries-list li:nth-child(4n) { border-right: 1px solid var(--grey-200); }
  .industries-list li:nth-child(2n) { border-right: none; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .stats .container { grid-template-columns: 1fr; gap: 36px; }
  .industries-list { grid-template-columns: repeat(2, 1fr); }
  .industries-list li:nth-child(3n) { border-right: 1px solid var(--grey-200); }
  .industries-list li:nth-child(2n) { border-right: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-link-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding-top: 100px; padding-bottom: 96px; }
}

@media (max-width: 520px) {
  /* On phones the LOGIN pill stays visible (it's now a primary CTA,
     not just a secondary chrome). Same for the nav and dropdown
     trigger — they collapse below 1080px (see the rule above). */
  .stats .container { grid-template-columns: 1fr; }
  .industries-list { grid-template-columns: 1fr; }
  .industries-list li { border-right: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn-mono { width: 100%; }
  .cta-band-actions .btn-mono { width: 100%; }
  /* On phones the section naturally fits the content; the 70vh
     floor would force a tall empty band on short screens. */
  .cta-band { min-height: 0; padding: clamp(64px, 14vw, 96px) 0 clamp(64px, 14vw, 96px); }
}

/* =========================================================
   REDUCED MOTION — skip horizontal scrub, stack panels
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .story-pin { height: auto; }
  .story-track {
    position: static;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    transform: none !important;
  }
  .story-panel { width: 100%; height: 70vh; flex: 0 0 auto; }
  .story-progress, .story-counter, .story-eyebrow { display: none; }
}


/* =========================================================
   SEASON SWITCHER — bottom-left dev tool
   To hide in production: add `.is-hidden` to #seasonSwitcher
   or remove the entire <aside> from index.html.
   Sharp corners, monospace uppercase, 1px borders, no glow.
   ========================================================= */
.season-switcher {
  position: fixed;
  right: 16px;
  bottom: 12px;
  /* Above .topbar (1030) — this is a floating overlay, not page chrome. */
  z-index: 1040;
  background: rgba(10,10,10,.96);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  color: var(--white);
  min-width: 260px;
  max-width: 320px;
  user-select: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}

.season-switcher.is-hidden,
.season-switcher.is-suppressed { display: none !important; }
/* `is-suppressed` is auto-applied by JS when the footer enters the
   viewport so the switcher never overlaps the CONNECT column. */

.season-switcher-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white);
  text-align: left;
}
.season-switcher-toggle:hover { color: var(--red); }
.season-switcher-chev {
  font-size: 11px;
  line-height: 1;
  transition: transform .15s ease;
  color: var(--red);
}
.season-switcher.is-collapsed .season-switcher-chev { transform: rotate(-90deg); }

.season-switcher-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 10px;
}
.season-switcher.is-collapsed .season-switcher-list { display: none; }

.season-tab {
  display: block;
  padding: 9px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  text-align: center;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
  line-height: 1.2;
}
.season-tab:hover {
  color: var(--white);
  border-color: var(--white);
  background: rgba(255,255,255,.08);
}
.season-tab.is-active {
  color: var(--red);
  border-color: var(--red);
  background: rgba(225,6,0,.08);
  font-weight: 600;
}
.season-tab.is-disabled {
  color: rgba(255,255,255,.28);
  cursor: not-allowed;
  border-color: rgba(255,255,255,.08);
  background: transparent;
  pointer-events: auto;        /* still receives clicks so we can prevent nav */
}
.season-tab.is-disabled:hover {
  color: rgba(255,255,255,.32);
  border-color: rgba(255,255,255,.10);
  background: transparent;
}

/* On small screens, full-width drawer pinned to bottom */
@media (max-width: 768px) {
  .season-switcher {
    left: 10px;
    right: 10px;
    bottom: 10px;
    min-width: 0;
    max-width: none;
  }
  .season-switcher-list { grid-template-columns: repeat(3, 1fr); }
  .season-tab { padding: 8px 6px; font-size: 10px; letter-spacing: .1em; }
}

/* =========================================================
   PRODUCTION HIDE — uncomment this single rule to hide the
   season switcher in production builds.
   (Or add `is-hidden` class in the HTML.)
   ========================================================= */
/* .season-switcher.is-hidden { display: none !important; } */
/* Official SKUBIQ logo (img-based replacement for the CSS-square logo tile) */





/* =========================================================
   CUSTOMERS — endless black-and-white customer-logo reel.
   ========================================================= */
.customers {
  /* background comes from .section--white */
  color: var(--black);
  padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px);
}

.sk-customers-strip {
  margin-top: 48px;
  padding: 0;
  background: transparent;
}

/* Viewport that hides the overflow and fades the edges */
.sk-customers-strip-window {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Flex track that holds two identical groups side by side. */
.sk-customers-strip-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  will-change: transform;
  animation-name: sk-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* ~10s per logo, but never faster than 45s total. */
  animation-duration: max(calc(var(--count, 9) * 10s), 45s);
}

/* One group of logos. Two groups (the second is a screen-reader
   hidden clone) form the full track and translate by -50%. */
.sk-customers-strip-group {
  display: flex;
  align-items: center;
  gap: 72px;
  flex-shrink: 0;
}

/* Individual logo tile. */
.sk-customers-strip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .15s ease;
}
.sk-customers-strip-item img {
  height: 64px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(100%) contrast(1.05);
  display: block;
}

/* Hover / keyboard focus pauses the animation AND de-grays the item. */
.sk-customers-strip-window:hover .sk-customers-strip-track,
.sk-customers-strip-window:focus-within .sk-customers-strip-track {
  animation-play-state: paused;
}
.sk-customers-strip-item:hover,
.sk-customers-strip-item:focus-visible {
  opacity: 1;
}

/* The loop: 0 → -50% (because the track is two groups, -50% lands
   exactly on the start of the second group = end of the first). */
@keyframes sk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mobile: smaller images and tighter spacing. */
@media (max-width: 768px) {
  .sk-customers-strip-track { gap: 48px; }
  .sk-customers-strip-group { gap: 48px; }
  .sk-customers-strip-item img { height: 48px; }
}

/* Reduced motion: no animation, no mask, items wrap. */
@media (prefers-reduced-motion: reduce) {
  .sk-customers-strip-window {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .sk-customers-strip-track {
    animation: none;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 48px;
    width: 100%;
  }
  .sk-customers-strip-group + .sk-customers-strip-group { display: none; }
}

/* Base logo sizing for footer and other non-header logos. The topbar
   pair uses fixed overlay dimensions in the header rules above. */
.logo-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;             /* never shrink */
  padding: 0;
  margin: 0;
  text-decoration: none;
}
.logo-img {
  display: block;
  /* Smaller logo height — 36px desktop (~168px wide at the 4.6:1
     aspect), 32px tablet, 28px mobile. Width follows from the
     aspect-ratio rule below. */
  height: 36px;
  width: auto;
  aspect-ratio: 1121 / 240;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Tablet: 641–1024px → 32px tall (~150px wide) */
@media (min-width: 641px) and (max-width: 1024px) {
  .logo-img { height: 32px; }
}
/* Mobile: ≤640px → 28px tall (~131px wide) */
@media (max-width: 640px) {
  .logo-img { height: 28px; }
}

/* The header logo pair cross-fades using the same .topbar--light state
   as the background theme. */

/* Footer logo — taller, kept clear of the page grid. */
.footer-brand .logo-img,
.sk-footer .logo-img {
  height: 48px;
}
@media (max-width: 640px) {
  .footer-brand .logo-img,
  .sk-footer .logo-img {
    height: 40px;
  }
}

/* When the topbar swaps to a light background, give it a light bar so
   the dark-lettering logo is legible. The swap is instant, no animation. */
.topbar.topbar--light {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--grey-200);
}
.topbar.topbar--light .btn-mono.btn-outline {
  color: var(--black);
  border-color: var(--grey-300);
}
.topbar.topbar--light .btn-mono.btn-outline:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.topbar.topbar--light .btn-mono.btn-solid {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.topbar.topbar--light .btn-mono.btn-solid:hover {
  background: var(--red);
  border-color: var(--red);
}
.topbar.topbar--light .topbar-season {
  color: var(--grey-500);
  border-color: var(--grey-300);
  background: rgba(235,11,31,.06);
}
/* The nav links and region picker default to white for the dark hero on the
   homepage. Pages without a hero (product, subpage, pricing, CMS) switch the
   topbar to `topbar--light`, so they need an explicit dark ink — otherwise
   PRODUCTS / SOLUTIONS / RESOURCES render white-on-white and disappear. */
.topbar.topbar--light .topbar-nav-link { color: var(--black); }
.topbar.topbar--light .topbar-nav-link:hover,
.topbar.topbar--light .topbar-nav-link:focus-visible { color: var(--red); }
.topbar.topbar--light .topbar-region { color: var(--black); }
.topbar.topbar--light .topbar-region:hover,
.topbar.topbar--light .topbar-region:focus-visible { color: var(--red); }
.topbar.topbar--light .topbar-region .bi { color: inherit; }
/* When over a red section, give the topbar a translucent red wash so the
   buttons (white) and logo (white) stay legible. Same white logo swap. */
.topbar.topbar--red {
  background: rgba(235,11,31,.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: rgba(0,0,0,.18);
}
.topbar.topbar--red .btn-mono.btn-outline {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.7);
}
.topbar.topbar--red .btn-mono.btn-outline:hover {
  background: #FFFFFF;
  color: var(--red);
  border-color: #FFFFFF;
}
.topbar.topbar--red .btn-mono.btn-solid {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}
.topbar.topbar--red .btn-mono.btn-solid:hover {
  background: #FFFFFF;
  color: #000000;
  border-color: #FFFFFF;
}
.topbar.topbar--red .topbar-season {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.5);
  background: rgba(0,0,0,.18);
}

/* =========================================================
   LEGAL PAGES (Terms of Service, Privacy Policy, etc.)
   Same chrome as the rest of the site — Oswald headings,
   Poppins body, the shared 1320px container, the 8/16/24/48
   spacing scale and the existing section rhythm.
   ========================================================= */
.legal-page {
  /* Background matches .section--white so legal pages sit in the
     light surface rhythm of the rest of the site (white between
     dark sections). Subtle radial + linear gradient echo the
     home page so it doesn't feel like a different site. */
  background:
    radial-gradient(800px 500px at 100% 0%, rgba(235, 11, 31, 0.04) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  color: var(--black);
  padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 8vw, 128px);
}
/* Page header — eyebrow + H1 + meta, sharing the same shared
   container used by every section so the page edges line up
   with the rest of the site. */
.legal-header {
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.legal-header .eyebrow-mono {
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.legal-header .eyebrow-mono::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--red);
  vertical-align: middle;
  margin-right: 12px;
}
.legal-header h1 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.05;
  color: var(--black);
}
.legal-header .legal-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin: 0;
}

/* Body — long-form text. Two-column at desktop is overkill for a
   legal document; a single column with a comfortable max-width
   keeps the line length readable. */
.legal-body {
  max-width: 880px;
}
.legal-body h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.15;
  color: var(--black);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--black);
}
.legal-body p {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: #2A2A2A;
}
.legal-body p strong { color: var(--black); }
.legal-body ul,
.legal-body ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
}
.legal-body li {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: #2A2A2A;
  margin-bottom: var(--space-1);
}
.legal-body a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-body a:hover { color: var(--black); }

/* In-page anchor links — give each H2 a stable scroll offset below
   the fixed topbar so the heading isn't hidden when jumping. */
.legal-body :target { scroll-margin-top: 96px; }

/* Mobile: tighter padding, slightly smaller headings. */
@media (max-width: 768px) {
  .legal-page { padding: var(--space-5) 0 var(--space-6); }
  .legal-header h1 { font-size: clamp(34px, 9vw, 48px); }
  .legal-body h2 { font-size: clamp(24px, 6vw, 32px); }
  .legal-body h3 { font-size: clamp(18px, 4.5vw, 22px); }
  .legal-body p,
  .legal-body li { font-size: var(--fs-body-sm); }
}