/* ============================================================
   sections.css — Layout for each part of the page
   (nav, hero, cards, feature rows, image slots, footer)
   ============================================================ */

/* ------------------------------------------------------------
   NAVBAR
   ------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(11, 18, 21, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 80px;
}
.nav__logo img { height: 26px; width: auto; }

/* Right-hand group: links + CTA, pushed to the far right */
.nav__right {
  margin-left: auto;            /* pushes this whole group right; logo stays left */
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav__links {
  display: flex;
  gap: var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.nav__links a { color: var(--text-on-dark-muted); transition: color var(--dur) var(--ease); }
.nav__links a:hover { color: var(--text-on-dark); }
.nav__actions { display: flex; gap: var(--space-2); align-items: center; }

/* Hamburger toggle (hidden on desktop) */
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px; transition: transform var(--dur) var(--ease);
}
.nav__toggle span::before { transform: translateY(-7px); }
.nav__toggle span::after  { transform: translateY(5px); }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* track can't exceed viewport -> no overflow */
  align-content: center;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
  overflow: hidden;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;   /* allow this flex item to shrink below its content width */
}
.hero__eyebrow {
  font-size: 0.75rem;  /* 12px */
  font-weight: var(--fw-bold);
  color: var(--color-ink);            /* dark, as in the design */
  letter-spacing: 0.01em;
  /* Frosted pill: gives the dark + red letters a consistent, readable
     background instead of fighting the gradient behind them. */
  align-self: center;                 /* shrink-wrap to the text, stay centered */
  padding: 0.45em 1em;
  border-radius: 999px;
  background: rgb(255, 255, 255);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}
/* The brand "K" letters glow red in the eyebrow... */
.hero__eyebrow .brand-k { color: var(--color-brand-red); }
/* ...and read as a brighter, bolder white inside the subtitle */
.hero__subtitle .brand-k { color: #fff; font-weight: var(--fw-bold); }

.hero__title {
  max-width: min(12em, 100%);  /* wraps to 2 lines: "Evaluate and Optimize" / "Your Content" */
  text-wrap: normal;           /* greedy wrap to match the design's line break */
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.hero__subtitle {
  max-width: min(52ch, 100%);  /* cap line length, but never wider than screen */
  color: rgba(255,255,255,0.92);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
}
.hero__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }

/* Hero product screenshot, floating below the headline.
   The figure is now just a centring wrapper — the card styling lives on the
   dashboard image so the floating chips can sit OUTSIDE its rounded corners. */
.hero__media {
  width: 100%;
  max-width: min(880px, 100%);
  min-width: 0;   /* let the wrapper (and its image) shrink to fit */
  margin-top: var(--space-4);
}

/* The stage is the positioning context for every layer. Everything is placed
   relative to this box, which is exactly the size of the dashboard. */
.hero__stage {
  position: relative;
  width: 100%;
}

/* The main dashboard: the centre anchor. Keeps the card look (rounded +
   shadow) the figure used to have. */
.hero__dashboard {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: var(--color-light);
  position: relative;
  z-index: 2;   /* above the "emotionality" layer, below nothing else */
}

/* Every floating chip shares these basics. Widths are a % of the stage so the
   whole composition scales together as the screen shrinks. */
.hero__float {
  position: absolute;
  height: auto;
  z-index: 3;   /* float above the dashboard... */
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
  pointer-events: none;   /* decorative — never intercept clicks */
  /* Frosted glass: blurs the gradient / dashboard showing through the
     chip's transparent areas, so they read as translucent cards. */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
}

/* --- LEFT side --------------------------------------------------------- */
/* Platform Preference: upper-left, peeking past the dashboard edge */
.hero__float--platform {
  width: 27%;
  top: 30%;
  left: -11%;
}
/* Top Interest Drivers: mid-left, slightly further out */
.hero__float--interest {
  width: 32%;
  top: 58%;
  left: -14%;
}

/* --- RIGHT side -------------------------------------------------------- */
/* Emotion chart (the tall "Total Reactions" donut card): upper-right */
.hero__float--emotion {
  width: 25%;
  top: 16%;
  right: -12%;
}
/* The three sentiment pills stack down the lower-right */
.hero__float--lover  { width: 18%; top: 64%; right: -17%; }
.hero__float--casual { width: 16%; top: 72%; right: -14%; }
.hero__float--hater  { width: 18%; top: 80%; right: -17%; }

/* Total Emotionality: BEHIND the dashboard, peeking out the left side */
.hero__float--emotionality {
  width: 38%;
  top: -6%;
  left: -16%;
  z-index: 1;   /* the only layer below the dashboard */
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.30));
}

/* ------------------------------------------------------------
   HERO ENTRANCE ANIMATION
   The image "constructs itself" when the hero scrolls INTO VIEW:
   the dashboard rises from the bottom, then the chips fan in from
   their respective sides — all fading 0 -> 100% opacity.

   A small script (in index.html) adds `.is-visible` to the stage the
   moment it appears on screen, which is what kicks the animation off.
   Until then the layers sit hidden so nothing flashes early.
   ------------------------------------------------------------ */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(70px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-from-left {
  from { opacity: 0; transform: translateX(-90px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hero-from-right {
  from { opacity: 0; transform: translateX(90px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Start state: every layer is hidden until the hero is on screen. */
.hero__dashboard,
.hero__float {
  opacity: 0;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* smooth ease-out */
  animation-fill-mode: both;
}

/* The animations only run once the stage has `.is-visible`. */
/* 1) Dashboard rises first */
.hero__stage.is-visible .hero__dashboard {
  animation-name: hero-rise; animation-delay: 0.1s;
}
/* 2) Then the chips fan in from their sides, lightly staggered */
.hero__stage.is-visible .hero__float--platform     { animation-name: hero-from-left;  animation-delay: 0.5s; }
.hero__stage.is-visible .hero__float--interest     { animation-name: hero-from-left;  animation-delay: 0.65s; }
.hero__stage.is-visible .hero__float--emotionality { animation-name: hero-from-left;  animation-delay: 0.8s; }
.hero__stage.is-visible .hero__float--emotion      { animation-name: hero-from-right; animation-delay: 0.5s; }
.hero__stage.is-visible .hero__float--lover        { animation-name: hero-from-right; animation-delay: 0.65s; }
.hero__stage.is-visible .hero__float--casual       { animation-name: hero-from-right; animation-delay: 0.8s; }
.hero__stage.is-visible .hero__float--hater        { animation-name: hero-from-right; animation-delay: 0.95s; }

/* Accessibility: honour users who ask for less motion (WCAG 2.3.3).
   They see the finished composition immediately, with no sliding. */
@media (prefers-reduced-motion: reduce) {
  .hero__dashboard,
  .hero__float {
    animation-name: none !important;
    opacity: 1;
    transform: none;
  }
}

/* On smaller screens the chips would crowd / overflow the dashboard, so we
   tuck them away and let the dashboard stand on its own. */
@media (max-width: 768px) {
  .hero__float { display: none; }
}

/* ------------------------------------------------------------
   SCROLL REVEAL  (applies to every section)
   Each section starts hidden + nudged, then eases into place the
   first time it scrolls into view. A script adds `.is-visible`.
   Default motion is a gentle rise from the bottom; add the
   `--left` / `--right` modifier class to slide in from a side.
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal--left  { transform: translateX(-56px); }
.reveal--right { transform: translateX(56px); }

/* Final, settled state */
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Accessibility: no sliding for reduced-motion users — show in place. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   GENERIC IMAGE SLOT
   Reserves space (via aspect-ratio) so layout doesn't jump
   before the image loads. Shows a labelled placeholder when
   the image is missing.
   ------------------------------------------------------------ */
.media {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.media img { width: 100%; height: 100%; object-fit: contain; }

/* Dashed placeholder shown behind/instead of a missing image */
.media--placeholder {
  display: grid;
  place-items: center;
  border: 1.5px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-small);
  text-align: center;
  padding: var(--space-3);
}
.media--placeholder code {
  display: inline-block;
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--color-accent);
}

/* ------------------------------------------------------------
   TWO-COLUMN FEATURE ROW  (text + media side by side)
   ------------------------------------------------------------ */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.feature--reverse .feature__media { order: -1; } /* media on the left */
.feature__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.feature__media { min-width: 0; }  /* let chart images shrink, never force overflow */
.feature__title { font-size: var(--fs-h2); }
.feature__text { color: var(--text-on-dark-muted); max-width: min(52ch, 100%); }

/* ------------------------------------------------------------
   CARD GRID  (reusable cards, auto-reflow)
   ------------------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-3);
}
.card {
  background: var(--color-surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: rgba(157,123,224,0.4); }
.card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(157,123,224,0.12);
  margin-bottom: var(--space-1);
}
.card__icon img { width: 28px; height: 28px; }
.card__title { font-size: var(--fs-h3); }
.card__text { color: var(--text-on-dark-muted); font-size: var(--fs-small); line-height: var(--lh-loose); }

/* ------------------------------------------------------------
   GLASS CARD GRID  ("first party data is: Accurate / Relevant / Tactical")
   Frosted-glass cards: translucent fill + backdrop blur + a lit
   hairline edge. The SVG icons already carry their own glass look,
   so they sit directly on the card (no icon tile here).
   ------------------------------------------------------------ */

/* A slightly larger, centered heading for this section.
   The head is allowed to use the full content width so the two
   forced lines have room (the default 760px box is too narrow
   for this large type and would force extra wraps). */
.glass-section .section-head { max-width: min(1040px, 100%); }
.glass-section .section-head h2 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3rem);
  line-height: var(--lh-tight);
  text-wrap: balance;   /* even line lengths if it ever re-wraps */
}
/* Keep the supporting paragraph at a comfortable reading width */
.glass-section .section-head .lead {
  color: var(--text-on-dark-muted);
  max-width: min(52ch, 100%);
  margin-inline: auto;
}
.glass-section .section-head .lead strong { color: #fff; font-weight: var(--fw-bold); }

.glass-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.glass-card {
  position: relative;
  isolation: isolate;             /* keeps the glow layer behind the content */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  /* 1) translucent fill so the page shows through */
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  /* 2) lit hairline edge */
  border: 1px solid rgba(255,255,255,0.10);
  /* 3) frost the background behind the card + soft top highlight & shadow */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* faint colored glow in the top-left corner, behind icon + text */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 80% at 0% 0%, rgba(157,123,224,0.14), transparent 58%);
  pointer-events: none;
}
.glass-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.22);
}
.glass-card__icon { width: 48px; height: 48px; }
.glass-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.glass-card__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.glass-card__text {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
}
.glass-card__text strong { color: #fff; font-weight: var(--fw-bold); }

/* Stack to one column on small screens */
@media (max-width: 860px) {
  .glass-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   "A DIFFERENTIATED APPROACH" — LIGHT BENTO SECTION
   ------------------------------------------------------------
   A light (white) section dropped into the dark page. Because the
   global default text color is white-on-dark, we flip text to dark
   inside this section. Layout is a "bento" grid: one wide card on
   top, two cards side-by-side below.
   ------------------------------------------------------------ */
.approach-light {
  background: #f4f5fa;            /* light cool-white surface */
  color: var(--color-ink);       /* dark text for the whole section */
}
.approach-light .section-head h2   { color: var(--color-ink); }
.approach-light .section-head .lead { color: var(--text-muted); }
.approach-light .section-head .btn  { margin-top: var(--space-2); }

/* Dark CTA button (black bg / white text) for use on light backgrounds */
.btn--dark { background-color: var(--color-ink); color: #fff; }
.btn--dark:hover { background-color: #000; }

/* Bento grid: 2 columns; the wide card spans both */
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.bento__wide { grid-column: 1 / -1; }

/* Shared card shell */
.bento-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(11, 18, 21, 0.10);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  overflow: hidden;              /* clips images that bleed to the corner */
}
.bento-card__title {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.bento-card__text {
  color: var(--text-muted-2);    /* #53555a — medium gray body text */
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
}
.bento-card__text strong { color: var(--color-ink); font-weight: var(--fw-bold); }

/* Top wide card: text on the left, chart image on the right.
   Trimmed vertical padding so the card sits shorter (the chart keeps
   its full size — only the top/bottom breathing room is reduced). */
.bento-card--split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: center;
  padding-block: clamp(1rem, 0.5rem + 1vw, 1.5rem);
}
.bento-card--split .bento-card__media img { width: 100%; height: auto; }

/* Bottom cards: text on the left, image anchored to the bottom-right
   corner (and clipped by the card's overflow: hidden). */
.bento-card--corner { min-height: 320px; }
.bento-card--corner .bento-card__title { max-width: 80%; }
.bento-card--corner .bento-card__text  { max-width: 50%; }
.bento-card--corner .bento-card__media {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  max-width: 340px;
}
.bento-card--corner .bento-card__media img {
  width: 100%;
  height: auto;
  border-top-left-radius: var(--radius-md);  /* soft inner corner where it meets the card */
}

/* Stack everything on small screens (image drops below the text) */
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card--split { grid-template-columns: 1fr; }
  .bento-card--corner { min-height: 0; }
  .bento-card--corner .bento-card__title,
  .bento-card--corner .bento-card__text { max-width: 100%; }
  .bento-card--corner .bento-card__media {
    position: static;
    width: 100%;
    max-width: 360px;
    margin-top: var(--space-3);
  }
}

/* ------------------------------------------------------------
   CASE STUDIES — split intro + interactive category grid
   ------------------------------------------------------------
   Left = intro copy. Right = a frosted-glass category grid.
   Three cards open a pure-CSS modal (toggled by hidden checkboxes,
   the same trick the mobile nav uses); four are muted + inert.
   ------------------------------------------------------------ */

/* Two-column split: intro on the left, card grid on the right */
.case-studies__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 1rem + 5vw, 5rem);
  align-items: center;
}

.case-studies__intro { max-width: 42ch; }
.case-studies__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: var(--space-3) 0;
  text-wrap: balance;
}
.case-studies__text { color: var(--text-on-dark-muted); line-height: var(--lh-loose); }
.case-studies__text strong { color: #fff; font-weight: var(--fw-bold); }

/* Outlined pill badge ("Case Studies") */
.pill {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: #fff;
}

/* 6-column grid produces the irregular 2 / 3 / 2 rows */
.case-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}
.case-card--adv      { grid-column: span 3; }
.case-card--creator  { grid-column: span 3; }
.case-card--filmtv   { grid-column: span 2; }
.case-card--music    { grid-column: span 2; }
.case-card--politics { grid-column: span 2; }
.case-card--sports   { grid-column: span 3; }
.case-card--gaming   { grid-column: span 3; }

/* Glass card shell (same frosted recipe as .glass-card) */
.case-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 150px;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    var(--shadow-card);
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.case-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.24);
}
.case-card__icon { width: 52px; height: 52px; }
.case-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.case-card__label { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

/* Expand glyph, parked in the top-right corner */
.case-card__expand {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--dur) var(--ease);
}
.case-card__expand svg { width: 100%; height: 100%; }
.case-card:hover .case-card__expand { color: #fff; }

/* Disabled cards: same glass shell, muted + non-interactive */
.case-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.case-card.is-disabled:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.10);
}

/* ---- Pure-CSS modal ----
   Hidden by default; a checked toggle (its matching checkbox) flips
   the sibling modal to display:flex. */
.case-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
#case-advertising:checked ~ .case-modal--adv,
#case-creator:checked ~ .case-modal--creator,
#case-filmtv:checked ~ .case-modal--filmtv {
  display: flex;
}

/* Lock the page scroll while any case-study modal is open.
   `:has()` lets us react to a checked toggle without any JavaScript —
   the whole page behind the modal stays frozen until it's closed. */
html:has(.case-toggle:checked) {
  overflow: hidden;
}

/* Dimmed, blurred backdrop — clicking it closes the modal */
.case-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 10, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

/* The dialog panel — light surface, two columns, matching the Figma modal. */
.case-modal__dialog {
  position: relative;
  width: min(1080px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-light);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  color: var(--color-ink);
  animation: case-modal-in var(--dur) var(--ease);
}
@keyframes case-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Soft brand gradient wash across the top, sitting behind the content */
.case-modal__wash {
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  pointer-events: none;
  border-radius: 24px 24px 0 0;
  background:
    radial-gradient(60% 70% at 0% 0%,  rgba(201, 21, 107, 0.16) 0%, transparent 60%),
    radial-gradient(55% 65% at 38% 0%, rgba(222, 73, 59, 0.13)  0%, transparent 60%),
    radial-gradient(60% 70% at 90% 0%, rgba(153, 72, 170, 0.14) 0%, transparent 60%);
}

/* Close button (minimize icon, top-right) */
.case-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.case-modal__close:hover { background: rgba(11, 18, 21, 0.06); }
.case-modal__close svg { width: 22px; height: 22px; }

/* Two-column content grid (text/chart on the left, methodology/results right) */
.case-modal__grid {
  position: relative;   /* above the wash */
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}

.case-modal__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* Outlined category pill */
.case-modal__tag {
  align-self: flex-start;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-loose);
}

.case-modal__title {
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem);  /* up to 48px */
  font-weight: var(--fw-semibold);
  line-height: 1.12;
  color: var(--color-ink);
}

.case-modal__overview {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-loose);
  color: var(--color-ink);
}
.case-modal__overview strong { font-weight: var(--fw-semibold); }

/* Chart image */
.case-modal__chart {
  margin-top: var(--space-2);
  filter: drop-shadow(-10px 6px 24px rgba(0, 0, 0, 0.10));
}
.case-modal__chart img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Right column: Methodology + Results */
.case-modal__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-5);   /* drops it to align under the heading, per the design */
}
.case-modal__block { display: flex; flex-direction: column; gap: var(--space-1); }
.case-modal__block-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}
.case-modal__block-label svg { width: 16px; height: 16px; color: var(--color-brand-red); }
.case-modal__block-text {
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  line-height: var(--lh-loose);
  color: var(--color-ink);
}
.case-modal__block-text strong { font-weight: var(--fw-medium); }
.case-modal__divider {
  border: 0;
  border-top: 1px solid rgba(11, 18, 21, 0.1);
  margin: 0;
  width: 100%;
}

/* Stack to a single column on tablet / mobile */
@media (max-width: 900px) {
  .case-modal__grid { grid-template-columns: 1fr; }
  .case-modal__side { padding-top: 0; }
}

/* Tablet: stack intro above the grid */
@media (max-width: 900px) {
  .case-studies__inner { grid-template-columns: 1fr; }
  .case-studies__intro { max-width: 60ch; }
}

/* Small screens: even 2-up grid, every card the same width */
@media (max-width: 620px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .case-card { grid-column: span 1 !important; }
}

/* ------------------------------------------------------------
   ADVANCED SERVICES & SDK — light sections, Lucide gradient icons
   ------------------------------------------------------------
   Light (off-white) surface dropped into the dark page. Cards are
   white with a hairline border; icons are Lucide line icons stroked
   with the shared #svc-grad red->gold gradient.
   ------------------------------------------------------------ */
.services-section {
  background: #f5f5fa;           /* soft off-white lavender surface */
  color: var(--color-ink);
}
/* The SDK block now lives inside the Advanced Services section. Re-create the
   gap the two stacked sections used to have between them. */
.sdk-block { margin-top: calc(var(--section-pad-y) * 2); }
/* Extra breathing room below the partner logos at the bottom of the section */
#advanced-services { padding-bottom: clamp(5rem, 3rem + 8vw, 10rem); }
.services-section .section-head { max-width: 760px; }
.services-section .section-head h2   { color: var(--color-ink); }
.services-section .section-head .lead { color: var(--text-muted); margin-inline: auto; }
.services-section .section-head .lead strong { color: var(--color-ink); font-weight: var(--fw-bold); }

/* "Evaluating" / "Optimizing" group labels */
.svc-group-label {
  text-align: center;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}
/* Extra breathing room above the "Optimizing" label */
.svc-group-label--gap { margin-top: var(--space-6); }

/* 3-column grid; the tall card spans both rows of the right column */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}
.svc-card--tall { grid-column: 3; grid-row: 1 / span 2; }

/* Shared card shell */
.svc-card {
  background: #fff;
  border: 1px solid rgba(11, 18, 21, 0.10);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}
.svc-card--wide { width: 100%; }

.svc-card__icon { display: block; width: 30px; height: 30px; margin-bottom: var(--space-3); }
.svc-card__icon svg { width: 100%; height: 100%; }

.svc-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
}
.svc-card__text {
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  color: var(--text-muted-2);
}
.svc-card__text strong { color: var(--color-ink); font-weight: var(--fw-bold); }

/* SDK partner-logo chips */
.svc-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.svc-logo {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(11, 18, 21, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  /* covers both the entrance pop and the hover lift */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.45s ease,
              box-shadow 0.25s ease;
}
.svc-logo img { width: 34px; height: 34px; object-fit: contain; }

/* Gentle lift on hover */
.svc-logo:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(11, 18, 21, 0.14);
}

/* ----- Staggered entrance for the logo chips -----
   The row's own reveal motion is neutralised so only the chips animate,
   each popping in just after the previous one. */
.svc-logos.reveal { opacity: 1; transform: none; }

.svc-logos .svc-logo {
  opacity: 0;
  transform: translateY(18px) scale(0.9);
}
.svc-logos.is-visible .svc-logo {
  opacity: 1;
  transform: none;
}
.svc-logos.is-visible .svc-logo:nth-child(1) { transition-delay: 0s; }
.svc-logos.is-visible .svc-logo:nth-child(2) { transition-delay: 0.06s; }
.svc-logos.is-visible .svc-logo:nth-child(3) { transition-delay: 0.12s; }
.svc-logos.is-visible .svc-logo:nth-child(4) { transition-delay: 0.18s; }
.svc-logos.is-visible .svc-logo:nth-child(5) { transition-delay: 0.24s; }
.svc-logos.is-visible .svc-logo:nth-child(6) { transition-delay: 0.30s; }
.svc-logos.is-visible .svc-logo:nth-child(7) { transition-delay: 0.36s; }
.svc-logos.is-visible .svc-logo:nth-child(8) { transition-delay: 0.42s; }

/* Accessibility: no motion for users who ask for less. */
@media (prefers-reduced-motion: reduce) {
  .svc-logos .svc-logo {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Tablet: 2 columns, tall card returns to normal flow */
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card--tall { grid-column: auto; grid-row: auto; }
}
/* Mobile: single column */
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   STAT / METRIC ROW
   ------------------------------------------------------------ */
.stats { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; }
.stat { text-align: center; }
.stat__num { font-size: clamp(2rem, 1.2rem + 3vw, 3rem); font-weight: var(--fw-bold); color: #fff; }
.stat__label { color: var(--text-on-dark-muted); font-size: var(--fs-small); }

/* ------------------------------------------------------------
   CONTACT / CTA + FOOTER
   ------------------------------------------------------------ */
.cta {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
}
.contact-form {
  width: 100%;
  max-width: 520px;
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
  text-align: left;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-small); color: var(--text-on-dark-muted); }
.field input,
.field textarea {
  background: var(--color-surface);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: #fff;
  transition: border-color var(--dur) var(--ease);
}
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--color-accent); }
.field textarea { resize: vertical; min-height: 110px; }
.contact-form .btn { width: 100%; height: 48px; }

/* ---- Contact: split intro + two-panel booking card ---- */
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.contact__title {
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.375rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: #fff;
  text-wrap: balance;
}
.contact__text {
  color: var(--text-on-dark-muted);
  line-height: var(--lh-loose);
  max-width: 46ch;
  margin-top: var(--space-3);
}

/* The white card — single panel holding the form */
.booking-card {
  background: #fff;
  color: var(--color-ink);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.booking-card__form { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* CSS brand wordmark: VOL [red K] NO */
.vk-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: var(--fw-extrabold);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.vk-wordmark__k {
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  margin-inline: 1px;
  background: var(--color-brand-red);
  color: #fff;
  border-radius: 5px;
}

.booking-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  color: var(--color-ink);
  margin: var(--space-3) 0 var(--space-2);
}
.booking-card__meta {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.booking-card__meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.booking-card__meta svg { width: 18px; height: 18px; flex: none; }
.booking-card__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  color: var(--text-muted-2);
}

.booking-card__form-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.booking-form { display: grid; gap: var(--space-2); }
.booking-form .field label { color: var(--text-muted); }
/* Light-themed inputs (the card is white) — overrides the dark .field rule */
.booking-form .field input,
.booking-form .field textarea {
  background: #f5f5fa;
  border: 1px solid rgba(11, 18, 21, 0.14);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--color-ink);
}
.booking-form .field input:focus,
.booking-form .field textarea:focus {
  outline: none;
  border-color: var(--color-accent-strong);
}
.booking-form .field textarea { resize: vertical; min-height: 90px; }
.booking-form .btn { width: 100%; height: 48px; margin-top: var(--space-1); }

/* Stack intro above card on tablet; stack panels on mobile */
@media (max-width: 900px) {
  .contact__inner { grid-template-columns: 1fr; }
  .contact__text { max-width: 60ch; }
}

.footer {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: var(--space-3);
}
.footer__inner {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center; justify-content: space-between;
}
/* Left: Terms Of Use | Privacy Policy */
.footer__links {
  display: flex; align-items: center; gap: var(--space-2);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-small);
}
.footer__links a {
  color: var(--text-on-dark);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer__links a:hover { color: var(--color-accent); }
.footer__sep { color: var(--text-muted-2); }
/* Right: copyright */
.footer__copy { color: var(--text-on-dark-muted); font-size: var(--fs-small); margin: 0; }

/* ------------------------------------------------------------
   RESPONSIVE  (mobile-first base above; these scale UP)
   ------------------------------------------------------------ */

/* Below ~900px: stack two-column feature rows */
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature--reverse .feature__media { order: 0; } /* media back on top when stacked */
}

/* Below ~720px: collapse the whole right group (links + CTA) behind a toggle.
   The bar then shows just the logo and the hamburger. */
@media (max-width: 720px) {
  .nav__inner { justify-content: space-between; } /* logo left, hamburger right */
  .nav__toggle { display: block; }
  .nav__right { display: none; }                  /* hidden until opened        */

  /* When the toggle is checked, drop the right group down as a panel */
  .nav:has(.nav__menu:checked) .nav__right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    position: absolute;
    top: 80px; left: 0; right: 0;
    margin: 0;
    padding: var(--space-3) var(--container-pad) var(--space-4);
    background: rgba(11,18,21,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  /* Stack the links vertically inside the panel */
  .nav:has(.nav__menu:checked) .nav__links {
    flex-direction: column;
    gap: var(--space-3);
  }
  /* Make the Portal Login button full-width in the panel */
  .nav:has(.nav__menu:checked) .nav__actions .btn { width: 100%; }
}