/* ==========================================================================
   SECTION 08 — WHITE-LABEL STUDIO
   Split Stage: Brand & Identity Copy + Glass Spiral Helix with Orbiting Bead
   over Kinetic Typography Stack
   ========================================================================== */

.tbx-s08 {
  --bg: #050505;
  --ink: #f4f4f4;
  --accent: #ee8a24;
  --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --pad: clamp(1.5rem, 5vw, 5rem);

  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  column-gap: clamp(1.5rem, 3vw, 4rem);
  padding: var(--pad);
  padding-inline: max(var(--pad), calc((100% - 1720px) / 2));
  background:
    radial-gradient(ellipse 26% 40% at 0% 25%, rgba(150, 70, 15, 0.45), transparent 70%),
    radial-gradient(ellipse 26% 35% at 0% 100%, rgba(120, 55, 10, 0.3), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  box-sizing: border-box;
  width: 100%;
}

.tbx-s08, .tbx-s08 * {
  box-sizing: border-box;
}

.tbx-s08 .copy {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.tbx-s08 .brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(2rem, 6vh, 4.5rem);
}

.tbx-s08 .brand svg {
  width: 46px;
  height: auto;
  flex: none;
}

.tbx-s08 .brand b {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #FFFFFF;
}

.tbx-s08 .brand b i {
  font-style: normal;
  color: var(--accent);
}

.tbx-s08 .brand span {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  margin-top: 0.35rem;
  color: #cfcfcf;
}

.tbx-s08 .title,
.tbx-s08 h2,
.tbx-s08 h1 {
  font-family: var(--font-venera, 'Venera', 'Venara', sans-serif);
  font-size: clamp(1.6rem, 2.7vw, 3rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.025em;
  white-space: nowrap;
  margin: 0;
}

.tbx-s08 .title span,
.tbx-s08 h2 span,
.tbx-s08 h1 span {
  display: block;
  padding-bottom: 0.06em;
  color: #fff;
}

.tbx-s08 .title span:first-child,
.tbx-s08 h2 span:first-child,
.tbx-s08 h1 span:first-child {
  background: linear-gradient(90deg, #bcbcbc, #f2f2f2 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tbx-s08 .title span:last-child,
.tbx-s08 h2 span:last-child,
.tbx-s08 h1 span:last-child {
  background: linear-gradient(90deg, #e0916a, #f5be98 55%, #e0916a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.tbx-s08 .lede {
  margin-top: clamp(1.3rem, 3vh, 2rem);
  max-width: 38rem;
  font-family: var(--font-lausanne, 'Lausanne', sans-serif);
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  line-height: 1.65;
  color: #e6e6e6;
  font-weight: 400;
}

.tbx-s08 .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
}

.tbx-s08 .btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  height: 3.5rem;
  padding: 0 2rem;
  border-radius: 99px;
  font: 600 1rem var(--font);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s;
}

.tbx-s08 .btn:not(.primary) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgba(18, 20, 24, 0.28);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.35);
}

.tbx-s08 .btn:not(.primary)::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 38%, transparent 62%);
  pointer-events: none;
}

.tbx-s08 .btn:not(.primary):hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.tbx-s08 .btn.primary {
  background: #fff;
  color: #111;
  border-color: #fff;
  padding: 0 0.5rem 0 2rem;
}

.tbx-s08 .btn .dot {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: #111;
  transition: transform 0.3s;
}

.tbx-s08 .btn.primary:hover .dot {
  transform: translateX(3px);
}

.tbx-s08 .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.tbx-s08 .stage {
  position: relative;
  z-index: 1;
  min-width: 0;
  align-self: center;
  width: 100%;
}

.tbx-s08 .rows {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 700;
  font-size: 80px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  white-space: nowrap;
  user-select: none;
  padding-block: 0.5em;
  width: 100%;
}

.tbx-s08 .rows div {
  width: max-content;
  color: transparent;
  background: linear-gradient(180deg, #8d8d8d, #3c3c3c);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: var(--o, 0.5);
  transform: translateX(var(--x, 0));
}

.tbx-s08 .rows div.hot {
  background: none;
  color: #fff;
  opacity: 1;
}

.tbx-s08 .rows div.hot em {
  font-style: normal;
  color: var(--accent);
}

.tbx-s08 canvas {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  z-index: 2;
  pointer-events: none;
}

.tbx-s08 .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 900px) {
  .tbx-s08 {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
    padding-bottom: 3rem;
  }
  .tbx-s08 .brand {
    margin-bottom: 2rem;
  }
}

@media (max-width: 420px) {
  .tbx-s08 .btn {
    height: 3.1rem;
    font-size: 0.92rem;
    padding: 0 1.3rem;
  }
  .tbx-s08 .btn.primary {
    padding: 0 0.4rem 0 1.3rem;
  }
  .tbx-s08 .btn .dot {
    width: 2.2rem;
    height: 2.2rem;
  }
}