/* ==========================================================================
   Creatorby theme stylesheet
   Design tokens are injected as CSS custom properties in layout/theme.liquid
   from the Theme Editor color/typography settings — edit colors there, not here.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  position: relative;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: var(--font-body-weight, 400);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
}
/* Animated galaxy background: a procedural canvas starfield (see theme.js).
   Flies continuously toward the camera with no fixed loop point, so unlike
   a rendered video clip it never has a visible seam. */
.galaxy-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: var(--color-bg);
}
.galaxy-bg__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Fallback static starfield/nebula — only shown if canvas isn't supported
   or the user prefers reduced motion (see theme.js). */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  display: none;
  z-index: -3;
}
body.no-bg-video::before { display: block; }
body::before {
  background-image:
    radial-gradient(38% 32% at 18% 12%, rgba(124,92,252,.40) 0%, transparent 70%),
    radial-gradient(34% 28% at 85% 22%, rgba(91,61,214,.34) 0%, transparent 70%),
    radial-gradient(40% 34% at 22% 88%, rgba(124,92,252,.30) 0%, transparent 70%),
    radial-gradient(32% 30% at 92% 92%, rgba(255,79,216,.14) 0%, transparent 70%),
    radial-gradient(60% 50% at 50% 50%, rgba(6,3,12,0) 0%, rgba(6,3,12,.45) 100%);
  background-repeat: no-repeat;
  animation: galaxy-drift 48s ease-in-out infinite alternate;
}
@keyframes galaxy-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.03); }
}
@keyframes galaxy-twinkle {
  0%   { opacity: .55; }
  50%  { opacity: 1; }
  100% { opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

h1, h2, h3, h4, .h-font {
  font-family: var(--font-heading), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: var(--font-heading-weight, 700);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.skip-to-content {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-to-content:focus { left: 0; }

/* Layout helpers -------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: 24px;
}
.section { padding-block: clamp(48px, 7vw, 96px); }
.section--tight { padding-block: clamp(32px, 5vw, 64px); }
.section-bg-alt { background: transparent; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--color-primary);
  display: inline-block;
}

.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-title { font-size: clamp(30px, 4vw, 46px); color: var(--color-text); }
.section-title em, .accent-text {
  font-style: normal;
  color: var(--color-primary);
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-sub {
  margin-top: 14px;
  color: var(--color-text-muted);
  font-size: 17px;
  max-width: 58ch;
}
.section-head.center .section-sub { margin-inline: auto; }
/* Slightly larger supporting copy across the homepage. */
.section-sub { font-size: 18px; }
.feature-grid + .section-sub, .section-head .section-sub { font-size: 18px; }
.hero__sub { font-size: 19px; }
.showcase p { font-size: 18px; }
.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

/* Buttons ----------------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: calc(var(--radius) * 0.7);
  font-weight: 700;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, #8658ed 0%, #9b6cff 52%, #ad7cf1 100%);
  color: #fff;
  box-shadow: 0 10px 28px -12px rgba(155, 108, 255, .62);
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 34px -10px rgba(155, 108, 255, .72);
}
.btn-ghost {
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-ghost:hover { border-color: var(--color-primary); }
.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-icon { transition: transform .15s ease; }
.btn:hover .btn-icon { transform: translateX(3px); }
/* Explicit size so this icon can never stretch to fill the button (it has
   no width/height of its own) — same class of bug fixed above for the
   language-switcher chevron, guarded here now that buttons can be
   width:100% (e.g. inside the mobile nav panel). */
.btn-icon svg { width: 16px; height: 16px; }

/* Header -------------------------------------------------------------- */
/* Fixed at the top of the viewport at all times (not sticky — fixed is not
   affected by any ancestor's overflow/transform, so it can never fail to
   stay pinned). body gets a matching padding-top (set via JS, see
   theme.js) so page content isn't hidden underneath it.
   No background/border at the very top of the page; a light translucent
   background + blur fades in (.is-scrolled, toggled via JS) once the page
   has been scrolled, so text doesn't stay unreadably bare over content. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}
body { padding-top: var(--header-h, 84px); }
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}
/* Wraps the nav links + language switcher/account/CTA together so the mobile
   toggle can reveal all of them as one panel instead of the actions row
   staying permanently visible in the top bar (that's what used to overflow
   the viewport and push the CTA button off-screen). On desktop this is just
   a flex row splitting the space between the nav links and the actions. */
.site-nav-panel { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 24px; min-width: 0; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: none;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 14.5px;
  transition: color .15s ease, filter .15s ease;
}
.site-nav a:hover,
.site-nav a.is-active {
  background: linear-gradient(120deg, var(--color-primary), var(--color-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-pink) 55%, transparent));
}

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .account-link,
.header-actions .account-component {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 8px;
}
.header-actions .account-link:hover { color: var(--color-text); }
.header-actions .account-component {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.header-actions shopify-account {
  --shopify-account-signed-in-avatar-size: 34px;
  --shopify-account-signed-in-avatar-color-background: var(--color-primary);
  --shopify-account-signed-in-avatar-color-text: var(--color-text);
}
.mobile-account-component { display: none; margin-left: auto; }
.mobile-account-component shopify-account {
  --shopify-account-signed-in-avatar-size: 34px;
  --shopify-account-signed-in-avatar-color-background: var(--color-primary);
  --shopify-account-signed-in-avatar-color-text: var(--color-text);
}

.lang-switcher { position: relative; }
.lang-switcher__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
}
/* The chevron icon has no width/height attribute of its own (it's sized by
   its viewBox everywhere else it's used); without an explicit size here it
   could stretch to fill the button once the button became full-width on
   mobile, ballooning into a huge circle instead of a small pill. */
.lang-switcher__toggle svg { width: 12px; height: 12px; flex: none; }
.lang-switcher__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 6px;
  min-width: 140px;
  display: none;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.6);
}
.lang-switcher.is-open .lang-switcher__panel { display: block; }
.lang-switcher__panel button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--color-text-muted);
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.lang-switcher__panel button:hover { background: var(--color-bg-alt); color: var(--color-text); }
.lang-switcher__panel button[aria-current="true"] { color: var(--color-primary); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 9px;
  color: var(--color-text);
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  /* Everything (nav links + language/account/CTA) collapses into one
     scrollable dropdown panel below the bar, so the top bar itself only
     ever holds the logo + hamburger and can never overflow horizontally. */
  .site-nav-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    padding: 10px;
    max-height: calc(100vh - var(--header-h, 84px));
    overflow-y: auto;
  }
  .site-header.is-nav-open .site-nav-panel { display: flex; }
  .site-nav-panel .site-nav { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .site-nav a { padding: 12px 14px; }
  .mobile-account-component { display: inline-flex; align-items: center; }
  .nav-toggle { display: inline-flex; }

  .site-nav-panel .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--color-border);
  }
  .site-nav-panel .header-actions .account-link,
  .site-nav-panel .header-actions .account-component {
    padding: 12px 14px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-align: center;
    justify-content: center;
  }
  .site-nav-panel .header-actions .account-link span { display: inline; }
  .site-nav-panel .header-actions .lang-switcher { width: 100%; }
  .site-nav-panel .header-actions .lang-switcher__toggle { width: 100%; justify-content: center; }
  .site-nav-panel .header-actions .lang-switcher__panel { left: 0; right: 0; width: 100%; }
  .site-nav-panel .header-actions .btn { width: 100%; justify-content: center; }
}

/* Mobile tuning for the hero -------------------------------------------- */
@media (max-width: 640px) {
  .hero { padding-block: clamp(48px, 14vw, 84px); }
}

/* Logo ------------------------------------------------------------------ */
/* The ring artwork sits behind and around the "C" of "Creatorby" (per the
   reference logo) rather than as a separate icon block beside the text. */
.logo-link { position: relative; display: inline-flex; align-items: center; color: var(--color-text); }
.logo-mark {
  position: absolute;
  left: -13px;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}
.logo-mark svg, .logo-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-word { position: relative; z-index: 1; font-family: var(--font-heading); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.logo-word .accent {
  background: linear-gradient(120deg, var(--color-primary), var(--color-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.creatorby-wordmark { display: block; width: 142px; height: auto; }
.showcase__frame .creatorby-wordmark { width: min(240px, 72%); }

/* Hero -------------------------------------------------------------------*/
.hero {
  position: relative;
  overflow: visible;
  padding-block: clamp(64px, 12vw, 140px);
  background: transparent;
}
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
.hero__inner { position: relative; max-width: 680px; }
.hero__title { font-size: clamp(42px, 6.4vw, 76px); color: var(--color-text); }
.hero__title .accent-text { display: block; }
.hero__sub { margin-top: 22px; font-size: 18px; color: var(--color-text-muted); max-width: 46ch; }
.hero__actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero__meta {
  display: flex;
  gap: 22px;
  margin-top: 40px;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero__meta li { display: flex; align-items: center; gap: 8px; }
.hero__meta li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Hero visual: a floating device-mockup card plus a starburst discount
   badge, replacing the empty right-hand side of the hero on desktop. */
.hero__visual { position: relative; display: none; justify-self: center; width: 100%; max-width: 440px; }
.device-mock {
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: calc(var(--radius) * 1.3);
  padding: 22px;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.6);
  animation: hero-float 5.5s ease-in-out infinite;
}
.device-mock__bar { display: flex; gap: 6px; margin-bottom: 18px; }
.device-mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); }
.device-mock__bar span:first-child { background: var(--color-primary); }
.device-mock__list { display: flex; flex-direction: column; gap: 12px; }
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

.hero__badge {
  position: absolute;
  top: -22px;
  right: -8px;
  width: 108px;
  height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-pink));
  box-shadow: 0 20px 44px -14px color-mix(in srgb, var(--color-pink) 65%, transparent);
  clip-path: polygon(50% 0%, 61% 20%, 82% 12%, 78% 35%, 100% 40%, 84% 55%, 96% 75%, 74% 74%, 68% 96%, 50% 80%, 32% 96%, 26% 74%, 4% 75%, 16% 55%, 0% 40%, 22% 35%, 18% 12%, 39% 20%);
  animation: hero-badge-float 4s ease-in-out infinite;
}
.hero__badge-num { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1; }
.hero__badge-label { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; margin-top: 2px; }
@keyframes hero-badge-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-12px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .device-mock, .hero__badge { animation: none; }
}

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .hero__visual { display: block; }
}

/* Stat / feature checklist band ------------------------------------------*/
.stat-band {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 30px clamp(20px, 4vw, 40px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.stat-band__figure { font-size: clamp(26px, 3vw, 34px); font-family: var(--font-heading); font-weight: 800; color: var(--color-text); }
.stat-band__figure span { color: var(--color-primary); }
.stat-band__label { color: var(--color-text-muted); font-size: 14px; margin-top: 4px; max-width: 32ch; }
.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 24px;
}
.checklist li { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text); font-size: 14.5px; font-weight: 600; }
.checklist--split {
  flex: 1;
  min-width: 280px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  column-gap: 48px;
}
@media (max-width: 480px) {
  .checklist--split { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
.checklist li svg { flex: none; width: 18px; height: 18px; color: var(--color-primary); margin-top: 1px; }

/* Placeholder poster gradients (cycled when a block has no custom color) --*/
.grad-1 { --card-gradient: linear-gradient(155deg, #7C5CFC, #241a4d); }
.grad-2 { --card-gradient: linear-gradient(155deg, #4C8CFC, #16233f); }
.grad-3 { --card-gradient: linear-gradient(155deg, #FC7CE0, #3a1a3d); }
.grad-4 { --card-gradient: linear-gradient(155deg, #3ED598, #16352c); }
.grad-5 { --card-gradient: linear-gradient(155deg, #FFB648, #3d2a10); }
.grad-6 { --card-gradient: linear-gradient(155deg, #6D6AFF, #1c1a3a); }

/* Auto-scrolling rows (movie teaser, platforms, sport, genres) -----------
   The Liquid template renders the card list twice back-to-back; theme.js
   drives the track's transform from there (slow ambient auto-drift, plus
   mouse-wheel scrubbing instead of a hover-pause), wrapping the position at
   half the track's width so the 2nd copy lines up exactly where the 1st one
   started and the loop reads as endless. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { transform: none !important; }
}
/* Higher-specificity overrides (beat .movie-grid's grid layout and
   .platform-strip's manual overflow-scroll at every breakpoint) so these
   rows lay out as a single flowing strip instead of wrapping into a grid. */
.movie-grid.marquee__track { display: flex; width: max-content; grid-template-columns: none; }
.movie-grid.marquee__track .movie-card { width: 190px; flex: none; }
.platform-strip.marquee__track { display: flex; width: max-content; overflow-x: visible; }
.sport-grid.marquee__track { display: flex; width: max-content; grid-template-columns: none; }
.sport-grid.marquee__track .sport-card { width: 190px; flex: none; }
.channel-rows { display: flex; flex-direction: column; gap: 18px; }
.channel-track.marquee__track { display: flex; width: max-content; gap: 18px; }
.channel-track.marquee__track .channel-card { width: 280px; flex: none; }

/* Movie / genre / sport cards --------------------------------------------*/
.movie-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) { .movie-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .movie-grid { grid-template-columns: repeat(2, 1fr); } }

.movie-card {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: calc(var(--radius) * 0.85);
  overflow: hidden;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  isolation: isolate;
}
.movie-card::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--card-gradient, linear-gradient(155deg, var(--color-primary), var(--color-bg-alt)));
  z-index: -2;
}
.movie-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,4,12,.85) 100%);
  z-index: -1;
}
.movie-card__index { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.75); background: rgba(0,0,0,.35); padding: 3px 7px; border-radius: 6px; }
.movie-card__title { color: #fff; font-weight: 800; font-size: 14.5px; }
.movie-card__meta { color: rgba(255,255,255,.7); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }

.genre-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 900px) { .genre-grid { grid-template-columns: repeat(2, 1fr); } }
.genre-card {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  transition: border-color .15s ease, transform .15s ease;
}
.genre-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.genre-card__index { color: var(--color-text-muted); font-size: 12px; font-weight: 700; }
.genre-card__name { font-weight: 800; font-size: 18px; margin-top: 14px; }

.sport-cta-row { display: flex; justify-content: center; margin-bottom: 28px; }
.movie-cta-row { display: flex; justify-content: center; margin-top: 28px; }

.sport-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .sport-grid { grid-template-columns: repeat(2, 1fr); } }
.sport-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  isolation: isolate;
}
.sport-card::before { content: ""; position: absolute; inset: 0; background: var(--card-gradient); z-index: -2; }
.sport-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(4,3,10,.9) 100%); z-index: -1; }
.sport-card__cat { color: rgba(255,255,255,.7); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.sport-card__name { color: #fff; font-weight: 800; font-size: 17px; margin-top: 4px; }

.channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .channel-grid { grid-template-columns: 1fr; } }
.channel-card {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 20px;
}
.channel-card__badge {
  width: 48px; height: 48px; flex: none;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}
.channel-card__badge svg { width: 20px; height: 20px; flex: none; }
.channel-card__cat { color: var(--color-text-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.channel-card__name { font-weight: 800; font-size: 16px; margin-top: 2px; }
.channel-card__play {
  margin-left: auto; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #8658ed 0%, #9b6cff 52%, #ad7cf1 100%);
  display: flex; align-items: center; justify-content: center;
}
.channel-card__play svg { width: 14px; height: 14px; color: #fff; }

/* Platforms ---------------------------------------------------------------*/
.platform-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.platform-strip::-webkit-scrollbar { display: none; }
.platform-chip {
  flex: none;
  min-width: 150px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.platform-chip__abbr { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-text-muted); }
.platform-chip__name { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 6px; }

.showcase { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; margin-top: 56px; }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } }
.showcase__frame {
  aspect-ratio: 3/4;
  border-radius: 28px;
  border: 1px solid var(--color-border);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--color-primary) 55%, transparent), var(--color-bg-alt) 72%);
  display: flex; align-items: center; justify-content: center;
}
.showcase__frame .logo-word { font-size: 34px; }
/* The ring icon is position:absolute, anchored to the nearest positioned
   ancestor — normally .logo-link in the header. Here it's wrapped in a
   plain .logo-link span instead (see sections/platforms.liquid) purely to
   give it that same anchor; without it the ring had nothing to position
   against and drifted off to the page's top-left corner. Scaled up to match
   the larger wordmark used in this frame (34px vs. the header's 19px). */
.showcase__frame .logo-mark { width: 68px; height: 68px; left: -22px; }
.showcase-eyebrow { color: var(--color-primary); font-weight: 800; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.showcase h3 { font-size: clamp(26px, 3.4vw, 38px); margin-top: 12px; }
.showcase p { color: var(--color-text-muted); margin-top: 14px; max-width: 46ch; }
.showcase__copy { max-width: 620px; }
.showcase__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.showcase__text-link { color: var(--color-text); font-weight: 700; border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 65%, transparent); padding-block: 6px; }
.showcase__text-link:hover { color: var(--color-primary); }
.showcase__frame--execution { aspect-ratio: 4/5; padding: clamp(18px, 3vw, 34px); overflow: hidden; background: radial-gradient(circle at 20% 5%, rgba(255,79,216,.18), transparent 34%), radial-gradient(circle at 80% 82%, rgba(124,92,252,.3), transparent 38%), rgba(15,10,28,.88); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 30px 80px -50px rgba(155,108,255,.8); }
.execution-preview { width: 100%; padding: clamp(18px, 3vw, 30px); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(12,8,24,.86); box-shadow: 0 24px 70px rgba(0,0,0,.38); transform: rotate(-1.2deg); }
.execution-preview__top { display: flex; align-items: center; gap: 10px; color: var(--color-text); font-weight: 800; }
.execution-preview__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg,#8658ed,#ad7cf1); }
.execution-preview__date { margin-left: auto; padding: 5px 8px; border-radius: 999px; color: #c8b8ff; background: rgba(124,92,252,.16); font-size: 11px; }
.execution-preview__progress { height: 7px; margin: 24px 0; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.execution-preview__progress span { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8658ed,#ff6ec7); box-shadow: 0 0 16px rgba(255,110,199,.55); }
.execution-preview__summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.execution-preview__summary div { padding: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.035); }
.execution-preview__summary strong,.execution-preview__summary small { display: block; }
.execution-preview__summary strong { font-size: 25px; }
.execution-preview__summary small { margin-top: 4px; color: var(--color-text-muted); }
.execution-preview__list { display: grid; gap: 10px; margin-top: 18px; }
.execution-preview__list span { display: flex; align-items: center; gap: 10px; padding: 13px; border-radius: 12px; color: var(--color-text-muted); background: rgba(255,255,255,.035); font-size: 13px; }
.execution-preview__list i,.mock-missions i { width: 17px; height: 17px; flex: none; border: 1px solid rgba(255,255,255,.22); border-radius: 5px; }
.execution-preview__list .is-done i,.mock-missions .is-done i { border-color: #9b6cff; background: #9b6cff; box-shadow: inset 0 0 0 4px #1a122b; }

/* Products page --------------------------------------------------------- */
.products-page { padding-top: clamp(72px, 9vw, 120px); }
.products-hero { max-width: 780px; margin: 0 auto clamp(54px, 7vw, 92px); text-align: center; }
.products-hero .eyebrow { justify-content: center; }
.products-hero h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.04; letter-spacing: -.045em; }
.products-hero > p:last-child { max-width: 62ch; margin: 22px auto 0; color: var(--color-text-muted); font-size: 18px; }
.product-story { position: relative; display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.25fr); gap: clamp(32px,6vw,76px); align-items: center; min-height: 670px; margin-bottom: clamp(42px,6vw,84px); padding: clamp(28px,5vw,70px); border: 1px solid rgba(255,255,255,.1); border-radius: 32px; overflow: hidden; background: linear-gradient(145deg,rgba(26,17,44,.9),rgba(10,7,18,.88)); box-shadow: 0 36px 100px -70px rgba(155,108,255,.9), inset 0 1px rgba(255,255,255,.05); }
.product-story::before { content:""; position:absolute; width:480px; height:480px; border-radius:50%; filter:blur(30px); opacity:.16; pointer-events:none; }
.product-story--app::before { top:-260px; right:-100px; background:#ff4fd8; }
.product-story--execution::before { bottom:-280px; left:-120px; background:#7c5cfc; }
.product-story--execution .product-story__copy { order: 2; }
.product-story--execution .product-slider { order: 1; }
.product-story__copy { position: relative; z-index: 1; }
.product-story__number { display:inline-grid; place-items:center; width:44px; height:44px; margin-bottom:26px; border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#c4b5ff; background:rgba(124,92,252,.1); font-weight:800; }
.product-story h2 { margin-top: 12px; font-size: clamp(32px,4.2vw,52px); line-height: 1.05; letter-spacing: -.035em; }
.product-story__copy > p:not(.showcase-eyebrow) { margin-top:18px; color:var(--color-text-muted); font-size:17px; line-height:1.75; }
.product-story__features { display:grid; gap:10px; margin:24px 0 30px; padding:0; list-style:none; }
.product-story__features li { display:flex; align-items:center; gap:10px; color:var(--color-text); font-weight:600; }
.product-story__features li::before { content:"✓"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#8658ed,#ad7cf1); font-size:12px; }
.product-slider { position:relative; z-index:1; min-width:0; }
.product-slider__viewport { position:relative; min-height:510px; border:1px solid rgba(255,255,255,.11); border-radius:24px; overflow:hidden; background:rgba(8,5,16,.9); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.product-slide { min-height:510px; padding:clamp(20px,3vw,34px); animation:product-slide-in .45s ease both; }
.product-slide[hidden] { display:none; }
@keyframes product-slide-in { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
.product-slide__caption { position:absolute; left:clamp(20px,3vw,34px); right:clamp(20px,3vw,34px); bottom:clamp(20px,3vw,34px); padding:18px 20px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(17,11,30,.82); backdrop-filter:blur(14px); }
.product-slide__caption strong,.product-slide__caption span { display:block; }
.product-slide__caption strong { font-size:17px; }
.product-slide__caption span { margin-top:5px; color:var(--color-text-muted); font-size:13px; }
.product-slider__controls { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:18px; }
.product-slider__controls > button { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--color-border); border-radius:50%; color:var(--color-text); background:rgba(23,15,38,.86); cursor:pointer; }
.product-slider__controls > button:hover { border-color:var(--color-primary); color:#c8b8ff; }
.product-slider__dots { display:flex; align-items:center; gap:8px; }
.product-slider__dots button { width:8px; height:8px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.2); cursor:pointer; transition:width .2s ease,background .2s ease; }
.product-slider__dots button.is-active { width:28px; background:linear-gradient(90deg,#8658ed,#ff6ec7); }
.mock-app__bar,.mock-execution__head { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.035); }
.mock-app__bar > span { width:12px; height:12px; border-radius:4px; background:linear-gradient(135deg,#8658ed,#ff6ec7); }
.mock-app__bar small,.mock-execution__head span { margin-left:auto; color:#c4b5ff; }
.mock-calendar,.mock-composer,.mock-metrics,.mock-missions,.mock-weeks,.mock-week-score,.mock-gentle { margin-top:22px; }
.mock-calendar__head { display:flex; align-items:center; justify-content:space-between; color:var(--color-text-muted); }
.mock-calendar__head span { padding:6px 10px; border-radius:999px; background:rgba(124,92,252,.14); color:#c4b5ff; font-size:11px; }
.mock-calendar__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:14px; }
.mock-calendar__grid i { aspect-ratio:1; border:1px solid rgba(255,255,255,.055); border-radius:6px; background:rgba(255,255,255,.02); }
.mock-calendar__grid .has-post { background:linear-gradient(145deg,rgba(124,92,252,.75),rgba(91,61,214,.45)); box-shadow:0 0 18px rgba(124,92,252,.2); }
.mock-calendar__grid .is-pink { background:linear-gradient(145deg,rgba(255,79,216,.65),rgba(124,92,252,.5)); }
.mock-composer { display:grid; grid-template-columns:.8fr 1.2fr; gap:16px; }
.mock-composer__media { display:grid; place-items:center; min-height:210px; border:1px dashed rgba(196,181,255,.3); border-radius:18px; color:#c4b5ff; background:linear-gradient(145deg,rgba(124,92,252,.08),rgba(255,79,216,.08)); font-size:36px; }
.mock-composer__fields { display:grid; align-content:start; gap:13px; }
.mock-composer__fields i { height:42px; border-radius:10px; background:rgba(255,255,255,.055); }
.mock-composer__fields i:nth-child(2) { height:84px; }
.mock-composer__fields button,.mock-gentle button { padding:12px; border:0; border-radius:10px; color:#fff; background:linear-gradient(135deg,#8658ed,#ad7cf1); font-weight:800; }
.mock-metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mock-metrics > div { padding:16px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.03); }
.mock-metrics small,.mock-metrics strong,.mock-metrics em { display:block; }
.mock-metrics strong { margin-top:8px; font-size:25px; }.mock-metrics em { color:#72e6b1; font-style:normal; font-size:12px; }
.mock-metrics .mock-chart { grid-column:1/-1; display:flex; align-items:end; gap:9px; height:120px; }
.mock-chart i { flex:1; height:42%; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#ad7cf1,#5b3dd6); }.mock-chart i:nth-child(2){height:66%}.mock-chart i:nth-child(3){height:54%}.mock-chart i:nth-child(4){height:82%}.mock-chart i:nth-child(5){height:72%}.mock-chart i:nth-child(6){height:94%;background:linear-gradient(180deg,#ff6ec7,#8658ed)}
.mock-missions { display:grid; gap:12px; }.mock-missions div { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.03); }.mock-missions span{flex:1}.mock-missions b{color:var(--color-text-muted);font-size:12px}
.mock-weeks { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }.mock-weeks i{height:34px;border-radius:9px;background:rgba(255,255,255,.055)}.mock-weeks .done{background:rgba(124,92,252,.55)}.mock-weeks .current{outline:2px solid #ff6ec7;background:rgba(255,79,216,.22)}
.mock-week-score { display:flex; align-items:center; gap:20px; padding:20px; border:1px solid rgba(255,255,255,.07); border-radius:16px; background:rgba(255,255,255,.03); }.mock-week-score > span{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:conic-gradient(#9b6cff var(--score),rgba(255,255,255,.08) 0);position:relative}.mock-week-score > span::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#100a1d}.mock-week-score b{position:relative}.mock-week-score strong,.mock-week-score small{display:block}.mock-week-score small{margin-top:5px;color:var(--color-text-muted)}
.mock-gentle { padding:26px; border:1px solid rgba(255,255,255,.07); border-radius:18px; text-align:center; background:radial-gradient(circle at 50% 0,rgba(124,92,252,.18),transparent 62%); }.mock-gentle > span{font-size:34px;color:#c4b5ff}.mock-gentle h3{margin-top:10px}.mock-gentle p{margin:10px auto 18px;color:var(--color-text-muted);font-size:14px;max-width:35ch}.mock-gentle button{padding-inline:18px}
@media (max-width: 900px) { .product-story { grid-template-columns:1fr; min-height:0; }.product-story--execution .product-story__copy,.product-story--execution .product-slider { order:initial; }.product-slider__viewport,.product-slide{min-height:480px;} }
@media (max-width: 560px) { .product-story{padding:22px;border-radius:22px}.product-slider__viewport{min-height:440px}.product-slide{min-height:440px;padding:16px}.product-slide__caption{left:16px;right:16px;bottom:16px}.mock-composer{grid-template-columns:1fr}.mock-composer__media{min-height:110px}.mock-metrics .mock-chart{height:90px}.mock-weeks{grid-template-columns:repeat(4,1fr)} }

/* Feature grid (Vorteile) --------------------------------------------------*/
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card { border: 1px solid var(--color-border); background: var(--color-bg-alt); border-radius: var(--radius); padding: 26px; }
.feature-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.feature-card__icon svg { width: 22px; height: 22px; flex: none; }
.feature-card h3 { font-size: 18px; }
.feature-card p { margin-top: 8px; color: var(--color-text-muted); font-size: 18px; }

/* Testimonials --------------------------------------------------------------*/
.testi-head { text-align: center; }
.testi-stars { color: var(--color-accent); letter-spacing: 3px; font-size: 15px; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .testi-grid { grid-template-columns: 1fr; } }
.testi-card { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius); padding: 22px; }
.testi-card__head { display: flex; align-items: center; justify-content: space-between; }
.testi-card__name { font-weight: 800; font-size: 14.5px; }
.testi-card__check { width: 18px; height: 18px; color: var(--color-success); }
.testi-card__stars { color: var(--color-accent); font-size: 13px; margin-top: 6px; letter-spacing: 2px; }
.testi-card p { margin-top: 12px; color: var(--color-text-muted); font-size: 14px; }
.testi-card.is-hidden { display: none; }

.testi-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; }
.testi-dot {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: var(--color-border); cursor: pointer;
  transition: background .2s ease, transform .2s ease, width .2s ease;
}
.testi-dot:hover { background: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); }
.testi-dot.is-active { width: 24px; border-radius: 5px; background: linear-gradient(120deg, var(--color-primary), var(--color-pink)); }

/* Language / region pills ---------------------------------------------------*/
.lang-region { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .lang-region { grid-template-columns: 1fr; } }
.lang-region h3 { font-size: clamp(28px, 3.6vw, 40px); }
.lang-region p { color: var(--color-text-muted); margin-top: 14px; max-width: 40ch; }
.pill-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 560px) { .pill-columns { grid-template-columns: 1fr; } }
.pill-group__label { color: var(--color-primary); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.pill-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.pill { border: 1px solid var(--color-border); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--color-text); background: var(--color-surface); }

/* CTA banner ----------------------------------------------------------------*/
.cta-banner { text-align: center; }
.cta-banner .section-title { max-width: 640px; margin-inline: auto; }
.cta-banner .section-sub { margin-inline: auto; }
.cta-banner__actions { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* Footer ---------------------------------------------------------------------*/
.site-footer { border-top: 1px solid var(--color-border); padding-block: 56px 28px; background: transparent; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand p { color: var(--color-text-muted); font-size: 14px; margin-top: 12px; max-width: 34ch; }
.footer-col-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px;
  background: linear-gradient(120deg, var(--color-primary), var(--color-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--color-text-muted); font-size: 14px; transition: color .2s ease; }
.footer-col a:hover { color: var(--color-pink); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Forms ------------------------------------------------------------------------*/
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--color-bg-alt-solid);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--color-text);
  font-size: 14.5px;
  font-family: inherit;
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--color-primary); }
.field textarea { resize: vertical; min-height: 130px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form-note { font-size: 13px; color: var(--color-text-muted); margin-top: 10px; }
.form-success {
  background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface));
  border: 1px solid var(--color-success);
  color: var(--color-text);
  padding: 16px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 14.5px;
}
.form-errors {
  background: color-mix(in srgb, #ff5c5c 16%, var(--color-surface));
  border: 1px solid #ff5c5c;
  color: var(--color-text);
  padding: 16px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 14.5px;
}
.form-errors ul { margin-top: 6px; }
.form-errors li { list-style: disc; margin-left: 18px; }

/* Contact page -------------------------------------------------------------------*/
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; margin-top: 44px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-cards { display: flex; flex-direction: column; gap: 16px; }
.contact-card {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.contact-card__label { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.contact-card__title { font-weight: 800; font-size: 17px; margin-top: 8px; }
.contact-card__meta { color: var(--color-text-muted); font-size: 13.5px; margin-top: 4px; }
.contact-card__link { color: var(--color-primary); font-weight: 700; font-size: 13.5px; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; }
.contact-card__num { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--color-primary); }
.contact-form-panel { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); }

/* FAQ accordion -----------------------------------------------------------------*/
.faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); overflow: hidden; }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  text-align: left;
  color: var(--color-text);
  font-weight: 700;
  font-size: 15.5px;
  padding: 18px 20px;
  cursor: pointer;
}
.faq-item__icon { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 20px; line-height: 1; -webkit-user-select: none; user-select: none; transition: transform .2s ease; }
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item__a-inner { padding: 0 20px 20px; color: var(--color-text-muted); font-size: 14.5px; max-width: 68ch; }

/* Setup page ------------------------------------------------------------------*/
.setup-layout { display: grid; grid-template-columns: 300px 1fr; gap: 28px; margin-top: 44px; align-items: start; }
@media (max-width: 860px) {
  .setup-layout { grid-template-columns: 1fr; }
  /* position:sticky on the device list caused it to render on top of the
     step panel below it on some mobile browsers once the layout collapsed
     to a single column — turn it back into a normal, non-sticky block there. */
  .setup-nav { position: static; top: auto; }
}
.setup-nav { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius); padding: 14px; position: sticky; top: 96px; }
.setup-nav__label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); padding: 8px 10px 12px; }
.setup-nav button svg { width: 18px; height: 18px; flex: none; color: var(--color-text-muted); }
.setup-nav button.is-active svg { color: var(--color-primary); }
.setup-nav button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 12px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 4px;
}
.setup-nav button:hover { color: var(--color-text); }
.setup-nav button.is-active { background: var(--color-bg-alt); border-color: var(--color-primary); color: var(--color-text); }
.setup-nav button .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); flex: none; }
.setup-nav button.is-active .dot { background: var(--color-primary); }

.setup-panel { display: none; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); }
.setup-panel.is-active { display: block; }
.setup-panel__eyebrow { color: var(--color-primary); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.setup-panel h3 { font-size: 24px; margin-top: 10px; }
.setup-steps { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.setup-step { display: flex; gap: 16px; }
.setup-step__num {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
  font-weight: 800;
  font-size: 13.5px;
  display: flex; align-items: center; justify-content: center;
}
.setup-step p { color: var(--color-text-muted); font-size: 14.5px; padding-top: 4px; }
.setup-help {
  margin-top: 48px;
  text-align: center;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 40px 24px;
}
.setup-help h3 { font-size: 22px; }
.setup-help p { color: var(--color-text-muted); margin-top: 8px; }
.setup-help .btn { margin-top: 20px; }

/* Pricing page ------------------------------------------------------------------*/
.pricing-toggle { display: inline-flex; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 5px; gap: 4px; }
.pricing-toggle button {
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 14px 40px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
.pricing-toggle { position: relative; }
.pricing-toggle button { position: relative; z-index: 1; transition: color .35s ease; }
.pricing-toggle button.is-active { background: none; color: #fff; }
.pricing-toggle__thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #8658ed 0%, #9b6cff 52%, #ad7cf1 100%);
  box-shadow: 0 0 22px rgba(155, 108, 255, .46), 0 0 8px rgba(134, 88, 237, .52);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), width .45s cubic-bezier(.22, 1, .36, 1);
  z-index: 0;
}
.pricing-toggle__badge {
  font-size: 10.5px;
  font-weight: 800;
  background: var(--color-accent);
  color: #2b0a24;
  padding: 2px 7px;
  border-radius: 999px;
}
.pricing-toggle-wrap { display: flex; justify-content: center; margin-bottom: 72px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

.price-card {
  position: relative;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  border-radius: calc(var(--radius) * 1.1);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.price-card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: var(--color-pink);
  box-shadow: 0 20px 44px -20px color-mix(in srgb, var(--color-pink) 55%, transparent);
}
.price-card.is-featured { border-color: var(--color-primary); background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 16%, transparent), color-mix(in srgb, var(--color-surface) 45%, transparent) 60%); }
.price-card__badge {
  position: absolute;
  top: -16px; left: 26px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-pink));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: 999px;
  letter-spacing: .02em;
  animation: badge-glow 2.2s ease-in-out infinite;
}
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--color-pink) 55%, transparent); }
  50%      { box-shadow: 0 4px 24px -2px color-mix(in srgb, var(--color-pink) 90%, transparent), 0 0 14px color-mix(in srgb, var(--color-primary) 60%, transparent); }
}
.price-card__name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: linear-gradient(120deg, var(--color-primary), var(--color-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
.price-card__users-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.price-card__users {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  transition: color .25s ease, transform .25s ease;
  transform-origin: left center;
  display: inline-block;
}
.price-card__tagline {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  background: linear-gradient(120deg, var(--color-primary), var(--color-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-pink) 45%, transparent));
}
.price-card:hover .price-card__users {
  background: linear-gradient(120deg, var(--color-primary), var(--color-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: scale(1.06);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-pink) 55%, transparent));
}
.price-card:hover .price-card__amount {
  background: linear-gradient(120deg, var(--color-primary), var(--color-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: scale(1.04);
}
.price-card__price-row { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.price-card__amount {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 800;
  display: inline-block;
  transform-origin: left center;
  transition: transform .25s ease;
}
.price-card__period { color: var(--color-text-muted); font-size: 14px; font-weight: 600; }
.price-card__save-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.price-card__save {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: none;
  color: var(--color-success);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 2px;
  border-radius: 999px;
}
.price-card__save--glow {
  color: #fff;
  gap: 7px;
}
.price-card__save-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 70%, transparent);
  animation: save-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes save-dot-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-success) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 0%, transparent); }
}
.price-card__note { color: var(--color-text-muted); font-size: 13px; margin-top: 10px; min-height: 18px; }
.price-card ul.checklist { margin-top: 26px; margin-bottom: 26px; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 11px; }
.price-card .btn { margin-top: auto; }

.pricing-plan-block[data-period="yearly"] .plan-monthly,
.pricing-plan-block[data-period="monthly"] .plan-yearly { display: none; }

/* Product / subscription select ---------------------------------------------------*/
.product-select { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius); padding: 26px; }
.selling-plan-options { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 22px; }
.selling-plan-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
}
.selling-plan-option:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.selling-plan-option input { accent-color: var(--color-primary); }
.selling-plan-option__price { font-weight: 800; }
.product-price-display { font-family: var(--font-heading); font-size: 34px; font-weight: 800; margin: 6px 0 4px; }

/* Account / order --------------------------------------------------------------------*/
.account-panel { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius); padding: 26px; margin-bottom: 22px; }
.account-panel h2 { font-size: 20px; }
.access-placeholder {
  margin-top: 16px;
  border: 1px dashed var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 12px;
  padding: 20px;
}
.access-placeholder__label { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); }
.access-placeholder p { color: var(--color-text-muted); font-size: 14px; margin-top: 6px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.status-pill.active { background: color-mix(in srgb, var(--color-success) 20%, transparent); color: var(--color-success); }
.status-pill.inactive { background: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text-muted); }
table.order-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.order-table th, table.order-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--color-border); font-size: 14px; }
table.order-table th { color: var(--color-text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }

.xtream-grid { display: grid; gap: 12px; margin-top: 14px; }
.xtream-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 14px; flex-wrap: wrap; }
.xtream-field__label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); min-width: 110px; }
.xtream-field__value { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; justify-content: flex-end; }
.xtream-field__value code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: var(--color-text); overflow-wrap: anywhere; }
.xtream-copy { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); cursor: pointer; flex-shrink: 0; }
.xtream-copy:hover { color: var(--color-primary); border-color: var(--color-primary); }
.xtream-copy svg { width: 15px; height: 15px; }
.xtream-copy.is-copied { color: var(--color-success); border-color: var(--color-success); }

/* Account dashboard ---------------------------------------------------------------*/
.account-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border: 1px solid var(--color-border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)), var(--color-surface));
  border-radius: var(--radius);
  padding: 26px;
  margin-top: 28px;
}
.account-hero__id { display: flex; align-items: center; gap: 16px; }
.account-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-pink));
  color: #fff; font-weight: 800; font-size: 19px; font-family: var(--font-heading);
}
.account-hero__meta { color: var(--color-text-muted); font-size: 13.5px; margin-top: 2px; }
.account-hero__stats { display: flex; gap: 10px; flex-wrap: wrap; }
.account-stat { text-align: center; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 18px; min-width: 92px; }
.account-stat__value { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-primary); }
.account-stat__label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 22px; }
.quick-action {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius); padding: 18px; transition: border-color .15s ease, transform .15s ease;
}
.quick-action:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.quick-action__icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 16%, transparent); color: var(--color-primary);
}
.quick-action__icon svg { width: 20px; height: 20px; }
.quick-action__title { font-weight: 700; font-size: 14.5px; }
.quick-action__text { color: var(--color-text-muted); font-size: 12.5px; margin-top: 2px; }

/* Account dashboard: channel guide grid ---------------------------------------------
   Cards lay out in a responsive grid (instead of a stacked list) and each one
   keeps only its own height when expanded (align-items:start), so opening one
   card doesn't stretch its row-neighbors to match. */
.channel-explorer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: start;
  gap: 14px;
  margin-top: 18px;
}
.channel-cat {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.channel-cat:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--color-primary) 55%, transparent); }
.channel-cat__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
}
.channel-cat__badge {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-pink));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--color-pink) 60%, transparent);
}
.channel-cat__name { display: block; font-weight: 800; font-size: 15.5px; }
.channel-cat__count { display: block; color: var(--color-text-muted); font-size: 12.5px; margin-top: 3px; }
.channel-cat__chevron { margin-left: auto; flex: none; width: 16px; height: 16px; color: var(--color-text-muted); transition: transform .2s ease; }
.channel-cat__chevron svg { width: 100%; height: 100%; }
.channel-cat.is-open .channel-cat__chevron { transform: rotate(180deg); }
.channel-cat.is-open { border-color: var(--color-primary); }
.channel-cat__body { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.channel-cat__body-inner { padding: 0 18px 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.channel-cat__chip { border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: var(--color-text-muted); background: var(--color-surface); }
@media (max-width: 480px) { .channel-explorer { grid-template-columns: 1fr; } }

/* Misc rich text page ---------------------------------------------------------------*/
.rte h2 { font-size: 26px; margin-top: 32px; }
.rte p { margin-top: 14px; color: var(--color-text-muted); }
.rte ul { margin-top: 14px; }
.rte li { list-style: disc; margin-left: 20px; color: var(--color-text-muted); }

.center-narrow { max-width: 640px; margin-inline: auto; text-align: center; }

/* V3: heading above the feature card, with two columns of three. */
.feature-summary__heading { margin: 0 0 48px; text-align: center; }
.feature-summary__card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); align-items: center; gap: 32px 48px; }
.feature-summary__intro { margin: 0; max-width: 32ch; color: var(--color-text-muted); font-size: 18px; line-height: 1.55; }
.feature-summary__list { min-width: 0; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 18px 40px; }
.feature-summary__list li { font-size: 16px; }
.feature-summary__list li svg { margin-top: 3px; }
.platform-chip--logo { width: max(150px, calc((var(--page-width) - 70px) / 6)); min-height: 100px; display: flex; align-items: center; justify-content: center; }
.platform-chip__logo { display: block; width: 48px; height: 48px; object-fit: contain; }
@media (max-width: 900px) {
  .feature-summary__card { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feature-summary__intro { max-width: 48ch; }
}
@media (max-width: 480px) {
  .feature-summary__list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 14px; }
  .feature-summary__heading { font-size: 28px; }
}

/* Homepage spacing and centered desktop navigation. */
[id$="__platforms"] .section-head > .eyebrow { font-size: 17px; }
@media (min-width: 1100px) {
  .site-header__bar { position: relative; }
  .site-nav { position: absolute; left: 50%; transform: translateX(-50%); }
  .site-nav-panel { justify-content: flex-end; }
}

/* Larger supporting labels; Channels stays at its existing 17px. */
.eyebrow, .showcase-eyebrow { font-size: 17px; }
.showcase-eyebrow { color: var(--color-primary) !important; }
.showcase-eyebrow::before { display: none; }
.contact-form-panel input[type="file"] { color: var(--color-text-muted); padding: 10px; }
.contact-form-panel input[type="file"]::file-selector-button { margin-right: 12px; padding: 10px 18px; border: 0; border-radius: 8px; background: linear-gradient(135deg, #8658ed 0%, #9b6cff 52%, #ad7cf1 100%); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 28px -12px rgba(155, 108, 255, .62); }

.footer-brand .footer-dedication { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }

.contact-form-panel .captcha-notice { margin-top: 14px; color: var(--color-text-muted); font-size: 12px; line-height: 1.6; text-align: center; }
.contact-form-panel .captcha-notice a { color: inherit; text-decoration: underline; }