/* ============================================================
   ZENOS - Home Page Styles
   ============================================================ */

/* --- Hero --- */
.hero {
  min-height: calc(100vh + 4px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-top: var(--nav-height);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Soft-fade the ambient glow at the bottom edge so the hero
     dissolves smoothly into the next dark section instead of
     creating a hard horizontal seam. */
  mask-image: linear-gradient(to bottom, black 0, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0, black 70%, transparent 100%);
}

.hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(123, 112, 251, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(84, 255, 224, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(184, 112, 251, 0.08) 0%, transparent 40%);
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(123, 112, 251, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 112, 251, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: var(--space-2xl) 0;
}

.hero__label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: fadeUp 0.6s 0.3s forwards;
}

.hero h1 {
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: fadeUp 0.6s 0.5s forwards;
}

.hero h1 span {
  color: var(--cyan);
}

.hero__sub {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
  opacity: 0;
  color: rgba(246, 246, 246, 0.65);
  max-width: 640px;
  margin-bottom: var(--space-lg);
  animation: fadeUp 0.6s 0.7s forwards;
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.6s 0.9s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero SVG animation container */
.hero__visual {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 45%;
  max-width: 640px;
  /* Fix the "slot" aspect so the layout stays stable; the canvas inside
     bleeds beyond this to give the cube room to rotate without clipping. */
  aspect-ratio: 640 / 400;
  z-index: 1;
  opacity: 0.9;
}

@media (max-width: 991px) {
  .hero__visual {
    position: relative;
    width: 100%;
    max-width: 420px;
    /* The canvas inside is 1:1 and positioned at top:50%/translateY(-50%),
       so it extends ~30% above and below this box. A 640/400 slot (1.6)
       clips the canvas top & bottom — on mobile, match the canvas ratio
       so the full cube fits without being cut off by .hero { overflow: hidden }. */
    aspect-ratio: 1 / 1;
    right: auto;
    top: auto;
    transform: none;
    margin-top: var(--space-lg);
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
  }
}

/* Interactive hero wireframe (v3 Z-extruded + cube + game model cycle).
   Canvas renderer — edge colours are set in main.js, not here. */
.hero__hud {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.hero__hud.is-dragging { cursor: grabbing; }

.hero__hud-canvas {
  /* Canvas is vertically centred in the hero__visual slot and taller than
     it, so the cube's close-corner swell during rotation never clips
     the drawing without pushing the hero layout around. */
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  display: block;
}

/* --- How It Works --- */
.how-it-works {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* Break the diagram out of the .container padding so the fixed-width
   flow has room to center (container is 1280 max-width minus gutters,
   but the flow needs the full 1280 to render). */
.how-it-works__diagram {
  max-width: 100vw;
  margin-top: var(--space-xl);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: visible;
  padding: 0 var(--space-md) 0.5rem;
}

/* ============================================================
   Flow diagram — horizontal pipeline with dropdown trees.
   Fixed 1280 × 640 coordinate space. HTML cards carry text +
   chipped shapes; a single SVG layer behind carries only the
   connector lines + animated particles.
   ============================================================ */
.flow {
  position: relative;
  width: 1280px;
  height: 640px;
  margin: 0 auto;
}

.flow__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Tier labels */
.flow__tier {
  position: absolute;
  top: 85px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.flow__tier-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--grey);
}
.flow__tier-name {
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-tint);
}

/* Node base — two-layer clip-path for a crisp 45° chip on every
   node regardless of its aspect ratio. ::before = border layer,
   ::after = fill inset by 1px so the border shows evenly.
   Each node variant picks its own colours below. */
.flow__node {
  position: absolute;
  z-index: 1;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* top-align content inside every node */
  background: transparent;
  isolation: isolate;
}
.flow__node::before,
.flow__node::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.flow__node::before {
  inset: 0;
  z-index: -2;
  clip-path: polygon(
    16px 0, 100% 0, 100% calc(100% - 16px),
    calc(100% - 16px) 100%, 0 100%, 0 16px
  );
}
.flow__node::after {
  inset: 1px;
  z-index: -1;
  clip-path: polygon(
    15px 0, 100% 0, 100% calc(100% - 15px),
    calc(100% - 15px) 100%, 0 100%, 0 15px
  );
}

.flow__node--default::before { background: rgba(123, 112, 251, 0.35); }
.flow__node--default::after  { background: rgba(123, 112, 251, 0.03); }

.flow__node--extract::before { background: rgba(123, 112, 251, 0.6); }
.flow__node--extract::after  { background: rgba(123, 112, 251, 0.09); }

.flow__node--product::before { background: rgba(84, 255, 224, 0.4); }
.flow__node--product::after  { background: rgba(84, 255, 224, 0.04); }

/* Node typography */
.flow__tag {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.flow__tag--purple { color: var(--purple-tint); }
.flow__tag--cyan   { color: var(--cyan); }

.flow__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.625rem;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}
.flow__title--purple { color: var(--purple); }
.flow__title--cyan   { color: var(--cyan); }

/* Subtitle — eyebrow above the title, title-case */
.flow__subtitle {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-stretch: 100%;
  font-size: 0.875rem;
  letter-spacing: 0.015em;
}
.flow__subtitle--purple { color: rgba(177, 170, 253, 0.85); }
.flow__subtitle--cyan   { color: rgba(84, 255, 224, 0.85); }

.flow__sub {
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(246, 246, 246, 0.6);
}

/* Node placements on the main horizontal axis (y = 250) */
.flow__node--game    { left: 40px;  top: 160px; width: 220px; height: 180px; align-items: center; text-align: center; }
.flow__node--extract { left: 310px; top: 160px; width: 300px; height: 180px; align-items: center; text-align: center; }
.flow__node--vtx     { left: 660px; top: 160px; width: 220px; height: 150px; align-items: center; text-align: center; }
.flow__node--twins   { left: 930px; top: 160px; width: 280px; height: 150px; align-items: center; text-align: center; }

/* Game chips */
.flow__chips {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 0.4rem 0.5rem;
  margin-top: 0.8rem;
}
.flow__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.8rem;
  min-width: 60px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-stretch: 125%;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-tint);
  background: transparent;
}
/* Small chip tokens inside flow nodes — two-layer clip-path to keep
   the corner 45° on short chips of varying widths. */
.flow__chip::before,
.flow__chip::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.flow__chip::before {
  inset: 0;
  z-index: -2;
  background: rgba(123, 112, 251, 0.45);
  clip-path: polygon(
    6px 0, 100% 0, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 0 100%, 0 6px
  );
}
.flow__chip::after {
  inset: 1px;
  z-index: -1;
  background: rgba(123, 112, 251, 0.08);
  clip-path: polygon(
    5px 0, 100% 0, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 0 100%, 0 5px
  );
}
/* "Any Game" summary chip sits centered below the 2×2 grid */
.flow__chip--wide {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 0.35rem 1rem;
}

/* Dropdown tree branch labels (VTX outputs + Game Twins applications).
   Set per-instance `left` / `top` inline for each label. */
.flow__app {
  position: absolute;
  z-index: 1;
  transform: translateY(-50%);
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}
.flow__app--accent { color: var(--purple); }
.flow__app__prefix {
  font-family: var(--font-heading);
  font-weight: 500;
  font-stretch: 125%;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: rgba(84, 255, 224, 0.55);
  margin-right: 0.4rem;
}
.flow__app--accent .flow__app__prefix { color: rgba(123, 112, 251, 0.55); }

/* UE5 Plugin note at the top of the Applications trunk */
.flow__apps-note {
  position: absolute;
  left: 1050px;
  top: 338px;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-light);
}
.flow__apps-note strong {
  font-weight: 900;
  color: var(--cyan);
  margin-right: 0.3rem;
}

/* Radial glows behind the Extract + Game Twins boxes */
.flow__glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(20px);
}
.flow__glow--purple {
  left: 310px; top: 140px; width: 300px; height: 220px;
  background: radial-gradient(ellipse at center, rgba(123,112,251,0.18) 0%, rgba(123,112,251,0) 70%);
}
.flow__glow--cyan {
  left: 930px; top: 140px; width: 280px; height: 220px;
  background: radial-gradient(ellipse at center, rgba(84,255,224,0.12) 0%, rgba(84,255,224,0) 70%);
}

/* Caption below the diagram */
.flow-caption {
  margin: 1.75rem auto 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(246, 246, 246, 0.5);
  letter-spacing: 0.02em;
}
.flow-caption strong { color: var(--cyan); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .flow__wires * { animation: none !important; }
}

/* --- Summary Sections --- */
.summary {
  padding: clamp(2.5rem, 5vw, 5rem) 0;
}

.summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.summary__card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md);
  color: var(--cyan);
}

.summary__card-icon * {
  stroke-width: 2;
}

.section--light .summary__card-icon {
  color: var(--purple);
}

/* --- Hard diagonal cuts between dark/light --- */
.section-cut {
  height: 80px;
  position: relative;
  z-index: 2;
}

.section-cut--to-light {
  background: var(--white);
  /* Px-based chip: 48×48 triangle cut from the top-left so the
     diagonal reads as a clean 45° at every viewport. Percentage
     values stretched into a steep slope on narrow phones. */
  clip-path: polygon(
    48px 0, 100% 0, 100% 100%, 0 100%, 0 48px
  );
  /* Overlap 1px above and below to cover subpixel seams — the old
     single margin-top:-1px left a hairline at the bottom edge on
     some zoom levels/devices. */
  margin-top: -1px;
  margin-bottom: -1px;
}

.section-cut--to-dark {
  background: var(--white);
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 48px),
    calc(100% - 48px) 100%, 0 100%
  );
  margin-top: -1px;
  margin-bottom: -1px;
}

/* ============================================================
   What We Offer (light + chipped, below hero, above How It Works)
   Two lanes as chipped light cards: Esports (cyan hover accent) +
   Technology (purple hover accent). Mirrors the nav dropdowns.
   ============================================================ */
.offerings {
  padding: 0;
}

.offerings__head {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.offerings__grid {
  display: grid;
  /* minmax(0, 1fr) instead of plain 1fr — a grid-item's default
     `min-width: auto` lets long/nowrap content push the track past
     the track size. Without this, wide child content (e.g. the
     Archivo 900 ESPORTS heading) can bleed past the viewport on
     mobile where the column is narrow. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.offerings__lane {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}

/* Oversized chip corners on the lane cards — the default 16px chip from the
   .chip-border-double utility reads as a tiny nick on these large panels. */
.offerings__lane.chip-border-double::before {
  clip-path: polygon(
    32px 0, 100% 0, 100% calc(100% - 32px),
    calc(100% - 32px) 100%, 0 100%, 0 32px
  );
}
.offerings__lane.chip-border-double::after {
  clip-path: polygon(
    30.5px 0, 100% 0, 100% calc(100% - 30.5px),
    calc(100% - 30.5px) 100%, 0 100%, 0 30.5px
  );
}

/* The lane isn't a button — only the header and item anchors are clickable.
   Suppress the default chip-border-double hover fill so hovering anywhere on
   the card doesn't make the whole thing read as interactive. Inner anchors
   keep their own hover treatment. */
.offerings__lane.chip-border-double--light:hover::before {
  background: rgba(123, 112, 251, 0.2);
}
.offerings__lane.chip-border-double--light:hover::after {
  background: linear-gradient(135deg, #F6F6F6, #EDE8FF);
}

.offerings__lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-dark);
  margin: 0 0 var(--space-sm);
  text-decoration: none;
  transition: border-color 220ms ease;
}

.offerings__lane-tag {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--black);
  margin: 0;
}

.offerings__lane-arrow {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--grey);
  transition: transform 220ms ease, color 220ms ease;
}

.offerings__lane--cyan   .offerings__lane-head:hover { border-bottom-color: var(--cyan); }
.offerings__lane--purple .offerings__lane-head:hover { border-bottom-color: var(--purple); }
.offerings__lane--cyan   .offerings__lane-head:hover .offerings__lane-arrow { color: var(--purple); }
.offerings__lane--purple .offerings__lane-head:hover .offerings__lane-arrow { color: var(--purple); }
.offerings__lane-head:hover .offerings__lane-arrow { transform: translateX(4px); }

.offerings__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.offerings__list li + li {
  border-top: 1px solid var(--border-light);
}

.offerings__list a {
  display: block;
  padding: var(--space-sm) 0;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.offerings__list a:hover {
  opacity: 0.92;
}

.offerings__list h4 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: 1rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--black);
  margin: 0 0 0.25rem;
  transition: color 220ms ease;
}

.offerings__lane--cyan   .offerings__list a:hover h4 { color: var(--purple); }
.offerings__lane--purple .offerings__list a:hover h4 { color: var(--purple); }

.offerings__list p {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--grey);
  margin: 0;
}

@media (max-width: 767px) {
  .offerings__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
  .offerings__lane {
    padding: var(--space-md) var(--space-md) var(--space-sm);
  }
  /* Shrink the big ESPORTS/TECHNOLOGY lane heading on narrow phones
     so it doesn't force the lane track wider than the viewport. */
  .offerings__lane-tag {
    font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
  }
  .offerings__lane-head {
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-xs);
    gap: var(--space-sm);
  }
}

/* ============================================================
   Home-page CTA closer (after How It Works, before Partners)
   ============================================================ */
.home-cta {
  padding: var(--space-2xl) 0;
}

.home-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.home-cta__inner .label {
  display: inline-block;
  margin-bottom: var(--space-md);
}

.home-cta__inner h2 {
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3rem);
  margin: 0 0 var(--space-sm);
}

.home-cta__inner p {
  color: rgba(246, 246, 246, 0.7);
  margin: 0 0 var(--space-lg);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ============================================================
   Mobile / tablet: the .flow diagram is fixed at 1280×640 to
   keep pixel-positioned nodes aligned with their SVG connectors.
   Rather than horizontal-scrolling a 1280-wide diagram on a phone,
   we scale the whole flow down proportionally and collapse the
   parent's display height to match. Layout box stays 1280×640 —
   overflow: hidden on the parent clips the off-screen remainder.
   ============================================================ */
@media (max-width: 991px) {
  .how-it-works__diagram {
    max-width: 100vw;
    overflow: hidden;
    padding: 0;
    margin-top: var(--space-lg);
    /* proportional visual height. We scale against 1400 (not 1280) to
       leave room for the dropdown-tree labels which extend past the
       flow's 1280 box via nowrap text. 1400 / 640 ≈ 2.1875 */
    height: calc(100vw / 2.1875);
  }

  .flow {
    /* Divide length by length to get a unitless ratio that scale() accepts.
       `calc(100vw / 1280)` would resolve to a length, which is invalid.
       Divisor = 1400 ensures the right-edge labels don't clip. */
    transform: scale(calc(100vw / 1400px));
    transform-origin: top left;
    margin: 0;
  }
}

@media (max-width: 767px) {
  /* Tighten the How It Works wrapper once the diagram has been
     scaled down — the original clamped section-padding leaves
     too much empty space above/below the tiny diagram. */
  .how-it-works {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
}

@media (max-width: 767px) {
  /* Home hero: cap visual a touch smaller on small phones, keep the
     1:1 aspect from the ≤991 rule so the cube doesn't get clipped. */
  .hero__visual {
    max-width: min(88vw, 360px);
  }
  .hero__content {
    padding: var(--space-lg) 0 var(--space-md);
  }
  .hero__actions .btn {
    /* flex-basis: 0 so primary + secondary match width regardless of
       text length — `1 1 auto` grew each by its intrinsic size. */
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }
  /* Give the hero a little breathing room above the section cut so the
     1:1 canvas isn't pressed right up against the diagonal transition. */
  .hero {
    padding-bottom: var(--space-md);
  }
}