/* Layout */
.container {
  width: 100%;
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.container--narrow {
  max-width: var(--content-width);
}

/* Sections */
section {
  padding: var(--space-2xl) 0;
  background: var(--color-bg);
  background-image: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 40%, var(--color-bg) 60%, var(--_accent-glow, rgba(0, 224, 255, 0.15)) 100%);

  border-top: solid 1px var(--color-surface);

  background-position: top center;

}

section .container .text-center h1 {
  color: var(--color-primary);
}

section.theme-light {
  background-color: var(--color-bg);
  background-image: linear-gradient(135deg, var(--color-surface-light) 0%, var(--color-bg) 40%, var(--color-bg) 60%, var(--color-surface-light) 100%);
  background-blend-mode: normal;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}



.story-arc {

  border-radius: var(--radius-6xl);
  margin-top: calc(var(--space-2xl) * -1);
  margin-bottom: calc(var(--space-2xl) * -1);
  padding-bottom: var(--space-4xl);
  padding-top: var(--space-4xl);
  background-color: var(--color-bg);
  z-index: 1;

  position: relative;
  overflow: clip;

  border-top: 1px solid rgba(255, 255, 255, .05);


}

.story-arc.theme-deep-dark {
  background-color: rgba(10, 10, 10, 1) !important;
  background-image: linear-gradient(135deg, var(--_accent-glow) 0%, rgba(10, 10, 10, 1) 40%, rgba(0, 0, 0, 1) 100%) !important;

}

.story-arc,
.story-arc.theme-dark {

  background: var(--color-bg);
  background-image: linear-gradient(135deg, var(--_accent-glow) 0%, var(--color-bg) 50%, var(--_accent-glow) 100%);

}

.story-arc.theme-light {
  background-color: var(--color-bg);
  background-image: linear-gradient(135deg, var(--color-surface-light) 0%, var(--color-bg) 40%, var(--color-bg) 60%, var(--color-surface-light) 100%);
}

/* Darkening + vignette overlay for story-arcs that carry a background image
   (e.g. the casino-games header). Sits above the bg image, below the content
   (.accent-hue .container is z-index:1). Gradients are from the Figma export;
   inset:0 scales them to the element instead of the Figma's fixed 1725×692. */
.story-arc--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.341028) 8.59%, rgba(0, 0, 0, 0) 17.2%),
    radial-gradient(143.13% 65.32% at 48.03% 29.41%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%), rgba(0,0,0,.3);
}

.story-arc section {

  background: none;
  border: none;

}

section.theme-light.animated-grid-bg::before,
.theme-light .animated-grid-bg::before {
  filter: invert(1);
  mix-blend-mode: normal;

}

section.ai-section {

  background-image: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 40%, rgba(255, 0, 212, 0.15) 75%, rgba(0, 224, 255, 0.2) 100%);

  background-blend-mode: normal;

}

section.accent-background .card .btn.btn-secondary:hover {
  background: transparent;
}

section.accent-background {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary);
  background-image: linear-gradient(135deg, var(--color-surface-elevated) -100%, var(--color-primary) 60%);
  background-blend-mode: luminosity;

  border-top: solid 1px var(--color-border-light);

}

/* Reusable animated grid background class */
.animated-grid-bg {
  position: relative;
  overflow: hidden;
}

/* Carousel sections need clip (not hidden) so position:sticky still works.
   overflow:clip visually prevents overflow without creating a scroll container. */
.animated-grid-bg.carousel-section {
  overflow: clip;
}

.animated-grid-bg-atlas::after {
  content: '  ';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;

  width: 100%;
  height: 100%;

  display: block;

  /* Repeating grid background - static */
  background-image: url('../images/grid.svg');
  background-repeat: repeat;

  background-position: top left;

  /* Atlas-inspired shimmer mask using SVG with particle effects */
  -webkit-mask-image: url('../images/atlas-mask.svg');
  mask-image: url('../images/atlas-mask.svg');

  /* Tile the mask to create seamless pattern */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* Size the mask to fill the entire element */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;


  /* Position the mask */
  -webkit-mask-position: left top;
  mask-position: left top;

  /* Attempt at standard property if supported, or just keep webkit */
  /* No CSS animation needed - SVG animates itself! */
  opacity: .5;

  /* mix-blend-mode: plus-lighter; */

  z-index: 100;

  /* box-shadow:
    inset 0 0 200px 40px rgba(255, 0, 212, 0.55),
    inset 0 0 120px 20px rgba(0, 224, 255, 0.65),
    inset 0 0 40px 0 rgba(0, 224, 255, 0.7); */
}

.animated-grid-bg-after::before {

  z-index: 200;

}

/* Ensure content stays above the grid */
.animated-grid-bg>* {
  position: relative;
  z-index: 1;
}

/* Ensure container stays above the grid */
section.accent-background .container {
  position: relative;
  z-index: 1;
}


section.accent-background * {


  color: var(--color-bg);

}

section.accent-background .btn.btn--primary {

  background-color: var(--color-bg-glass);
  color: var(--color-primary-dark);

}

section.accent-background .btn.btn--outline,
section.accent-background .btn.btn--secondary {
  background: transparent !important;
  border-color: var(--color-bg-glass);
  color: var(--color-bg-glass) !important;

}

section.accent-background .btn.btn--outline:hover,
section.accent-background .btn.btn--secondary:hover {
  background-color: var(--color-bg-glass) !important;
  color: var(--color-text) !important;
}




/* ================================================================
   STATIC BENTO GRID
   A contained, grid-locked layout. No hover lifts. No noise.
   Inspired by world-class bento implementations (Shopify et al.)
   ================================================================ */

.static-cards-section {
  /* padding: var(--space-4xl) var(--space-2xl) var(--space-6xl); */
}

.static-cards-grid {
  --bento-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--bento-cols), 1fr);
  gap: 16px;
}

/* Bento Grid Column Helper Classes */
.bento-2-cols {
  --bento-cols: 2;
}

@media (min-width: 901px) {

  /* Auto-span orphaned cards logically in a 2 column bento */
  .bento-2-cols>*:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.bento-3-cols {
  --bento-cols: 3;
}

.bento-4-cols {
  --bento-cols: 4;
}

@media (min-width: 901px) {
  .bento-span-2 {
    grid-column: span 2;
  }

  .bento-span-3 {
    grid-column: span 3;
  }

  .bento-span-4 {
    grid-column: span 4;
  }

  .bento-row-span-2 {
    grid-row: span 2;
  }
}

/* Core Layout Protection: Prevent Implicit Track Bleeding */
@media (max-width: 1200px) and (min-width: 901px) {

  /* For grids that fall back to 2 cols at this width (no explicit bento-X-cols),
     cap larger spans so they don't spawn implicit auto-columns. Scoped via
     :not() so bento-3-cols / bento-4-cols keep their natural spans. */
  .static-cards-grid:not([class*="bento-"]) .bento-span-3,
  .static-cards-grid:not([class*="bento-"]) .bento-span-4 {
    grid-column: span 2 !important;
  }

  /* Utility class to explicitly force an orphaned card to safely span 2 columns on tablet without breaking desktop natural flow */
  .tablet-span-all {
    grid-column: 1 / -1 !important;
  }
}

/* Force grid override logic flatly on pure mobile */
@media (max-width: 900px) {

  .bento-span-2,
  .bento-span-3,
  .bento-span-4 {
    grid-column: span 1 !important;
  }
}

/* Hero card spans all columns */
.static-card--hero {
  grid-column: 1 / -1;
}

/* ── Base card ── */
.static-card {
  position: relative;
  isolation: isolate;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  /* Card background natively blends from a mathematically lighter HSL value down to the base color, avoiding all alpha rendering artifacts! */
  background:
    radial-gradient(100% 100% at 50% 0%, var(--sc-bg-highlight, #153033) 0%, var(--sc-bg, #061a1c) 75%);

  /* Glass edge */
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);

  transition: box-shadow 0.2s ease;
}

/* Brighten the edge and the glare on hover */
.static-card:hover {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ── Hero card: landscape, content left · device right ── */
.static-card--hero {
  flex-direction: row;
  align-items: stretch;
  min-height: 624px;
}

.static-card--hero .static-card__content {
  flex: 0 0 44%;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.static-card--hero .static-card__device {
  flex: 1;
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
  margin: 40px 0 40px 0;
  /* Add margin so hero image doesn't hit the border */
  min-width: 0;
  overflow: hidden;
}

.static-card--hero img.static-card__device {
  object-fit: contain;
  object-position: right bottom;
  margin: 0;
}

/* ── Sub-cards: portrait, device fills top, text anchored to bottom ── */
.static-card:not(.static-card--hero) {
  min-height: auto;
  justify-content: flex-start;
}

.static-card:not(.static-card--hero) .static-card__content {
  padding: 32px;
  position: relative;
  z-index: 3;
}

/* Device image — shown in full, padded slightly from top/sides */
.static-card:not(.static-card--hero) .static-card__device {
  position: relative;
  inset: auto;
  bottom: auto;
  height: auto;
  width: 100%;
  aspect-ratio: 1012 / 664;
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Gradient scrim: fades device image into the card bg */
.static-card:not(.static-card--hero) .static-card__device::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Scrim goes from card bg solid at bottom → transparent ~50% up using zero-alpha base color */
  background: linear-gradient(to top,
      var(--sc-bg, #061a1c) 0%,
      var(--sc-bg, #061a1c) 38%,
      rgba(6, 26, 28, 0) 64%);
  pointer-events: none;
  display: none;
}

.static-card.static-card--feature {
  min-height: 364px;
  justify-content: flex-start;
}

.static-card.static-card--feature::after {
  display: none;
}

.static-card--feature .static-card__content {
  padding: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.static-card--feature.c-align-center .static-card__content,
.static-card--feature.c-align-top .static-card__content,
.static-card--feature.c-align-bottom .static-card__content {
  flex: none;
}

.static-card--feature .mt-auto {
  margin-top: auto;
}

/* ── Content Alignment Helpers ── */
.static-card.c-align-top {
  justify-content: flex-start !important;
}

.static-card.c-align-center {
  justify-content: center !important;
}

.static-card.c-align-bottom {
  justify-content: flex-end !important;
}

/* Hero card desktop wrapper alignment overrides */
.static-card--hero.c-align-top .static-card__content {
  justify-content: flex-start !important;
}

.static-card--hero.c-align-center .static-card__content {
  justify-content: center !important;
}

.static-card--hero.c-align-bottom .static-card__content {
  justify-content: flex-end !important;
}

/* ── Image attachment system ──
   Utility classes on .static-card:
     img-right | img-left    → horizontal layout (text + image side by side)
     img-bottom | img-top    → vertical layout   (text above/below image)
     img-contain             → object-fit: contain instead of cover
   Wrap visuals in .static-card__media. Zero padding — image fills edge-to-edge.
   Text and imagery never overlap.
   On mobile, horizontal layouts collapse to vertical.
*/

.static-card__media {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.static-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
 .static-card.img-contain .static-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: top center !important;
}
}

.static-card__media > *:not(img, picture) {
  display: block;
  width: 100%;
  height: 100%;
}

.static-card__media > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.static-card.img-contain .static-card__media img {
  object-fit: cover;
  object-position: bottom right;
}

/* Horizontal attachment */
.static-card.img-right { flex-direction: row !important; }
.static-card.img-left  { flex-direction: row-reverse !important; }

.static-card.img-right > .static-card__content,
.static-card.img-left  > .static-card__content {
  flex: 0 0 50%;
  max-width: 50%;
}

.static-card.img-right > .static-card__media,
.static-card.img-left  > .static-card__media {
  flex: 1 1 0%;
}

/* Vertical attachment */
.static-card.img-bottom { flex-direction: column !important; }
.static-card.img-top    { flex-direction: column-reverse !important; }

.static-card.img-bottom > .static-card__content,
.static-card.img-top    > .static-card__content {
  flex: 0 0 auto;
}

.static-card.img-bottom > .static-card__media,
.static-card.img-top    > .static-card__media {
  flex: 1 1 0%;
}

/* Content slot becomes a flex column so c-align-* can drive internal alignment */
.static-card:is(.img-right, .img-left, .img-bottom, .img-top) > .static-card__content {
  display: flex;
  flex-direction: column;
}

/* Neutralise card-level justify-content — alignment moves into the content slot */
.static-card:is(.img-right, .img-left, .img-bottom, .img-top):is(.c-align-top, .c-align-center, .c-align-bottom) {
  justify-content: flex-start !important;
}

.static-card:is(.img-right, .img-left, .img-bottom, .img-top).c-align-center > .static-card__content {
  justify-content: center;
}

.static-card:is(.img-right, .img-left, .img-bottom, .img-top).c-align-bottom > .static-card__content {
  justify-content: flex-end;
}

/* Mobile: horizontal collapses to vertical */
@media (max-width: 900px) {
  .static-card.img-right,
  .static-card.img-left {
    flex-direction: column !important;
  }

  .static-card.img-right > .static-card__content,
  .static-card.img-left  > .static-card__content {
    flex: 0 0 auto;
    max-width: none;
  }

  .static-card:is(.img-right, .img-left, .img-bottom, .img-top) > .static-card__media {
    flex: 0 0 auto;
    min-height: 240px;
    aspect-ratio: 4 / 3;
    width: 100%;
  }
}

/* ── Typography ── */
.static-card .card__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-accent, var(--color-primary));
  margin-bottom: 14px;
  opacity: 0.9;
}

.static-card .card__title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  /* color: #fff; */
  margin-bottom: 10px;
  text-wrap: balance;
}

/* Hero title can be larger */
.static-card--hero .card__title {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 800;
  margin-bottom: 14px;
}

.static-card .card__description {
  font-size: 15px;
  line-height: 1.6;
  /* Muted — not harsh white, not invisible */
  color: rgba(157, 171, 173, 1);
  color: var(--color-text);
  text-wrap: pretty;
  max-width: 420px;
}

/* CTA links inside cards */
.static-card .btn {
  margin-top: 28px;
}

/* ── Device image sources — same as carousel ── */
.static-card__device.card-hub {
  background-image: url(../images/owner-studio/v4/hub.png);
}

.static-card__device.card-product {
  background-image: url(../images/owner-studio/v4/product.webp);
}

.static-card__device.card-acquisition {
  background-image: url(../images/owner-studio/v4/acquisition.webp);
}

.static-card__device.card-operations {
  background-image: url(../images/owner-studio/v4/operations.webp);
}

/* ── Game-verticals bento (casino-games): full-width Originals hero + 2 columns.
   Each card's art is a full-bleed `cover` background layered OVER the themed
   surface gradient (so transparent parts of the art still read as a card), with
   the text overlaid on top. --bento-cols (not .bento-2-cols) avoids the
   orphan-span rule that would blow the last card full-width. */
.game-verticals {
  --bento-cols: 2;
}

.game-verticals .static-card {
  background-image:
    var(--card-art, none),
    radial-gradient(100% 100% at 50% 0%, var(--sc-bg-highlight, #153033) 0%, var(--sc-bg, #061a1c) 75%);
  background-size: cover, cover;
  background-position: var(--card-art-pos, center), center;
  background-repeat: no-repeat, no-repeat;
}

.game-verticals .static-card.card-originals {
  --card-art: url(../images/games/game-verticals-originals.png);
  --card-art-pos: right center;
}

.game-verticals .static-card.card-slots {
  --card-art: url(../images/games/game-verticals-slot-games.png);
  --card-art-pos: center top;
}

.game-verticals .static-card.card-crash {
  --card-art: url(../images/games/game-verticals-crash-games.png);
  --card-art-pos: center;
}

/* Sub-cards: real height so the cover art reads; text anchored to the bottom. */
.game-verticals .static-card:not(.static-card--hero) {
  min-height: 460px;
  justify-content: flex-end;
}

/* Hero: text occupies the left column, art fills the card behind/to the right. */
.game-verticals .static-card--hero {
  min-height: 360px;
}

.game-verticals .static-card--hero .static-card__content {
  justify-content: center;
}

/* ── Mobile: banner cards ──────────────────────────────────────────────────
   The vertical art is wide/landscape (Originals is 2.6:1); `cover` on a narrow
   portrait card zoomed it to an unreadable, cropped sliver (game cards bled off
   the left edge; the slots panel looked like empty boxes) and the desktop
   `margin-top:400px` inline hack opened a huge empty band above the copy.
   On mobile instead show the WHOLE illustration `contain`ed in a top band
   (aspect-locked via padding-top %), with the copy on the dark surface below. */
@media (max-width: 900px) {
  .game-verticals .static-card {
    min-height: 0 !important;
    background-size: contain, cover;         /* art contained · gradient fills */
    background-position: top center, center;
  }

  /* neutralise the desktop 400px push (inline style) so copy hugs the art */
  .game-verticals .static-card .static-card__content {
    margin-top: 0 !important;
  }

  /* reserve the exact art band per card (height = width × img aspect ratio),
     a hair taller than the art so a thin dark gap sits above the copy. */
  .game-verticals .static-card.card-originals { padding-top: 40%; }  /* 2716×1044 */
  .game-verticals .static-card.card-slots     { padding-top: 80%; }  /* 1322×1044 */
  .game-verticals .static-card.card-crash     { padding-top: 80%; }  /* 1322×1044 */
}

/* ── Tablet (loose): hero stacks, sub-cards go 2-col ── */
@media (max-width: 1200px) {

  /* Hero: stack vertically, give the device a fixed height */
  .static-card--hero {
    flex-direction: column;
    min-height: 0;
  }

  .static-card--hero .static-card__content {
    flex: none;
    padding: 40px 40px 36px;
    justify-content: flex-start;
  }

  .static-card--hero .static-card__device {
    flex: none;
    height: 364px;
    margin: 0 0 32px 0;
    background-size: contain;
    background-position: center center;
  }

  .static-card--hero img.static-card__device {
    height: auto;
    max-height: 400px;
    margin: 0;
  }

  /* Sub-cards: 2-col grid — each card has real width.
     Skip grids that opt into an explicit bento column count, so
     bento-3-cols / bento-4-cols can keep their own template. */
  .static-cards-grid:not([class*="bento-"]) {
    grid-template-columns: repeat(2, 1fr);
  }

  .static-card:not(.static-card--hero) {
    min-height: auto;
  }
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .static-cards-section {
    padding: var(--space-3xl) 0 var(--space-4xl) 0;
  }

  .static-cards-grid,
  .static-cards-grid:not([class*="bento-"]) {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .static-card--hero {
    flex-direction: column;
    min-height: 0;
  }

  .static-card--hero .static-card__content {
    flex: none;
    padding: 32px 24px 28px;
  }

  .static-card--hero .static-card__device {
    height: 286px;
    margin: 24px 0 0 0;
    background-size: contain;
    background-position: center center;
  }

  .static-card:not(.static-card--hero) {
    min-height: auto;
  }

  /* Legacy fallback: any remaining absolute-positioned card images */
  .static-card > img:not(.static-card__media > img) {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 240px;
    object-fit: contain !important;
    object-position: right bottom;
    margin-top: auto;
  }
}



/* ================================================================
   ACCENT-HUE HELPER
   ================================================================
   Apply to any .static-cards-section (or carousel-section) to
   tint the section and all its cards with a single HSL accent.

   Usage:
     <section class="static-cards-section accent-hue"
              style="--accent-h:175; --accent-s:55%; --accent-l:18%;">

   Variables:
     --accent-h   Hue  (0–360)
     --accent-s   Saturation  ("55%")
     --accent-l   Lightness   ("18%")   ← use dark values for dark themes

   What gets tinted automatically:
     • Section bg glow (radial, subtle)
     • Card background (slightly lighter than section)
     • Card scrim gradient
     • card__label text colour
     • Hover edge highlight
   ================================================================ */

/* Derive the working colours from accent (hue/tint) × theme (polarity).
   ─────────────────────────────────────────────────────────────────────────
   The accent is set per block via --accent-h/s/l; the *direction* of every
   derivation comes from the active theme's deltas (--sc-l-* / --sc-s-* /
   --sc-a-*, defined in variables.css). theme-dark nudges surfaces a little
   ABOVE the accent lightness; theme-light pushes them toward white and darkens
   the text — same formula, opposite polarity.

   This is declared on BOTH the theme classes AND .accent-hue on purpose, so
   every theme boundary re-establishes the tokens for its own subtree. Each
   inner var() resolves on the element that declares the property, so the
   tokens always recompute from the NEAREST theme's deltas combined with that
   block's own accent. That's what makes the themes composable: a high-contrast
   dark bento or carousel nested inside a light arc (or the reverse) gets the
   correct surfaces automatically, with no per-element overrides. */
.theme-dark,
.theme-light,
.accent-hue {
  --_accent-mid: hsl(var(--accent-h, 220), var(--accent-s, 55%), calc(var(--accent-l, 22%) + var(--sc-l-mid, 0%)));
  --_accent-text: hsl(var(--accent-h, 220), var(--accent-s, 55%), calc(var(--accent-l, 22%) + var(--sc-l-text, 32%)));
  --_accent-glow: hsla(var(--accent-h, 220), var(--accent-s, 55%), calc(var(--accent-l, 22%) + var(--sc-l-glow, 20%)), var(--sc-a-glow, 0.5));

  /* Card bg blends from a brighter top highlight down to the body colour */
  --sc-bg: hsl(var(--accent-h, 220), var(--accent-s, 55%), calc(var(--accent-l, 22%) + var(--sc-l-bg, 4%)));
  --sc-bg-highlight: hsl(var(--accent-h, 220), calc(var(--accent-s, 55%) + var(--sc-s-highlight, -10%)), calc(var(--accent-l, 22%) + var(--sc-l-highlight, 14%)));
  --sc-accent: var(--_accent-text);
}

.accent-hue {
  position: relative;
}

/* Composability: a themed surface nested inside a story-arc paints its own
   background (from its own --color-bg) so it can contrast with the arc — e.g.
   a dark bento/carousel inside a light arc, or vice-versa. Higher specificity
   than `.story-arc section { background: none }` below, so it wins. */
.story-arc .theme-dark,
.story-arc .theme-light {
  background-color: var(--color-surface);
}

/* Section glow — a very dim wash, not the aurora-borealis effect */
.accent-hue::before {
  /* content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 100% 50% at 50% 0%,
        hsla(var(--accent-h, 220), var(--accent-s, 55%), var(--accent-l, 22%), 0.3) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0; */
}

.accent-hue .container {
  position: relative;
  z-index: 1;
}


/* Scrim on sub-cards uses the card's own zero-alpha formula for perfect Apple-like blending */
.accent-hue .static-card:not(.static-card--hero)::after {
  background: linear-gradient(to top,
      var(--sc-bg) 0%,
      var(--sc-bg) 38%,
      hsla(var(--accent-h, 220), var(--accent-s, 55%), calc(var(--accent-l, 22%) + 4%), 0) 64%);
}


/* ================================================================
   SECTION HEADER 
   ================================================================
   Left: eyebrow label + large thin heading
   Right: lead sentence with inline underlined CTA link
   ================================================================ */

.sc-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 40px;
}

.sc-section-header__left {
  flex: 0 1 55%;
}

.sc-section-header__right {
  flex: 0 1 38%;
  padding-bottom: 6px;
  /* optical alignment with heading baseline */
}

/* Eyebrow: tiny, tinted, all-caps */
.sc-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* color: var(--sc-accent, var(--_accent-text, var(--color-primary))); */
  margin-bottom: 16px;
}

.accent-hue .static-card .sc-eyebrow {
  filter: brightness(1.8);
}

.accent-hue .static-card .card__label {
  color: var(--_accent-text);
  filter: brightness(2);
}

.text-accent-highlight {
  background: linear-gradient(
    90deg,
    hsl(var(--accent-h, 220), calc(var(--accent-s, 55%) + 30%), calc(var(--accent-l, 22%) + 40%)) 0%,
    hsl(calc(var(--accent-h, 220) + 40), calc(var(--accent-s, 55%) + 40%), calc(var(--accent-l, 22%) + 65%)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* background-clip:text paints the gradient only inside the inline box, so with
     a tight heading line-height the g/y/p/j descenders fall below the box and get
     chopped. Extend the paint box below the baseline (and clone it per wrapped
     line) so the tails are always painted. Inline vertical padding does not alter
     line layout, so this is purely a paint fix — no reflow. */
  padding-bottom: 0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Section heading: large, very thin — designed to contrast with card title weight */
.sc-heading {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;

  margin: 0;
}

/* Lead text in right column */
.sc-lead {
  font-size: 16px;
  line-height: 1.65;

  margin: 0;
}

/* Inline CTA link — underlined, same muted color, brightens on hover */
.sc-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(157, 171, 173, 0.45);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
  white-space: nowrap;
}

.sc-link:hover {
  /* color: #fff; */
  text-decoration-color: rgba(255, 255, 255, 0.7);
}

/* Force sub-cards to flex-column so device is at top, content at bottom */
.static-cards-grid .static-card:not(.static-card--hero) {
  flex-direction: column;
}

/* Mobile header stacks */
@media (max-width: 900px) {
  .sc-section-header {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
    align-items: flex-start;
    text-align: left;
  }

  .sc-section-header__left,
  .sc-section-header__right {
    flex: none;
  }

  .sc-heading {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .container{

    padding:0 var(--space-sm);
  }
}


/* =================================================================
   Easy to Operate — Parallax Background
   ================================================================= */

.easy-to-operate-parallax {
  position: relative;
  overflow: visible;
  padding: 180px 0 60px 0;
  min-height: 600px;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  
}

.easy-to-operate-stage {
  position: absolute;
  top: -100px;
  bottom: -100px;
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  background: url('../images/wildfans-product-operating.webp') center top / cover no-repeat;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  border-radius: var(--radius-6xl);
  mask: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) calc(100% - 200px), rgba(255,255,255,0) 100%);
}

.easy-to-operate-parallax .sc-section-header__left,
.easy-to-operate-parallax .sc-section-header__right {
  position: relative;
  z-index: 1;
  will-change: transform;
}

@media (max-width: 900px) {
  .easy-to-operate-parallax {
    padding: 80px 0;

    align-items: center;
  }

  .easy-to-operate-stage {
    top: -60px;
    bottom: -60px;
  }
}