/* =========================
   INDEX HOME PAGE
   ========================= */
/* ---------- Base shell tweaks ---------- */
.tron-shell{
  width: min(1280px, 94vw);
  margin: 0 auto;
  padding: 3.5rem 0 4rem; /* under nav */
  position: relative;
  z-index: 2;
}

/* ---------- Full-bleed HERO STAGE ---------- */
.heroStage{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  min-height: clamp(560px, 72vh, 820px);
  display: grid;
  align-items: end;

  margin-top: -1.5rem;
  margin-bottom: 2.25rem;

  overflow: hidden;
  border-bottom: 1px solid rgba(0,255,255,0.12);
}

.heroStage__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(1.02);
}

.heroStage__img,
.heroStage__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

/* overlay: vignette + tron glow + “scanline noise” */
.heroStage__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(1200px 700px at 30% 30%, rgba(0,255,255,0.14), transparent 55%),
    radial-gradient(900px 520px at 80% 22%, rgba(0,140,255,0.12), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.62) 100%);
}

.heroStage__overlay::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.10;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events:none;
}

.heroStage__content{
  position: relative;
  z-index: 2;
  width: min(1280px, 94vw);
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 34px);
  padding-bottom: clamp(22px, 3.2vw, 44px);
}

/* ---------- HERO MODULE (panel inside hero stage) ---------- */
.home-hero.tron-panel{
  border-radius: 20px;
  border: 1px solid rgba(0,255,255,0.18);
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(14px);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    0 0 36px rgba(0,255,255,0.10);
  padding: clamp(18px, 3vw, 32px);
}

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

/* typographic punch */
.home-kicker{
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: .85rem;
  color: rgba(0,255,255,0.92);
}

.home-title{
  margin: .7rem 0 .85rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(1.8rem, 2.9vw + 1rem, 3.25rem);
  line-height: 1.05;
  color: rgba(0,255,255,0.95);
  text-shadow: 0 0 12px rgba(0,255,255,0.18);
}

.home-sub{
  margin: 0 auto 1.25rem;
  max-width: 72ch;
  line-height: 1.75;
  font-size: 1.2rem;
  color: rgba(255,255,255,0.82);
}

/* CTAs */
.home-ctas{
  display:flex;
  justify-content:center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: .7rem;
}

.home-ctas .home-pill{
  border: 0px solid transparent;
}

.home-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .45rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(0,255,255,0.28);
  background: rgba(0,255,255,0.06);
  box-shadow: 0 0 22px rgba(0,255,255,0.10);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  text-decoration:none;
}

.home-pill:hover{
  transform: translateY(-2px);
  background: rgba(0,255,255,0.09);
  border-color: rgba(0,255,255,0.50);
  box-shadow: 0 0 30px rgba(0,255,255,0.14);
}

.home-store{
  height: 56px;
  width: auto;
  display:block;
}

.home-micro{
  margin-top: 1rem;
  color: rgba(255,255,255,0.70);
  font-weight: 700;
  letter-spacing: .02em;
}

.home-dot{
  display:inline-block;
  width:.5rem;
  height:.5rem;
  border-radius:999px;
  background: rgba(0,255,255,0.95);
  box-shadow: 0 0 12px rgba(0,255,255,0.35);
  margin: 0 .35rem;
}

/* divider between copy and slider (combined-but-separated feel) */
.home-hero__divider{
  height: 1px;
  margin: clamp(16px, 2.2vw, 22px) auto;
  width: min(980px, 100%);
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.78), rgba(0,140,255,0.38), rgba(0,255,255,0.78), transparent);
  box-shadow: 0 0 16px rgba(0,255,255,0.18);
  opacity: .95;
}

/* ---------- FEATURE SLIDER (carousel feel) ---------- */
.home-hero__slider{
  border-radius: 18px;
  padding: 1rem;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(0,255,255,0.12);
  box-shadow: inset 0 0 18px rgba(0,255,255,0.06);
}

/* viewport peek so it reads like a carousel */
.tron-slider__viewport{
  overflow: hidden;
  border-radius: 16px;
  padding: 0;
}

@media (max-width: 720px){
  .tron-slider__viewport{ padding: 0 6%; }
}

/* gap between slides -> carousel rail */
.tron-slider__track{
  display: flex;
  gap: 0;
  transform: translateX(0);
  transition: transform 420ms ease;
  will-change: transform;
}

/* card-like slides */
.tron-slide{
  flex: 0 0 100%;
  padding: 0;
  opacity: .78;
  transform: scale(.985);
  transition: opacity 200ms ease, transform 200ms ease;
}

@media (max-width: 720px){
  .tron-slide{ flex-basis: 90%; }
}

.tron-slide.is-active{
  opacity: 1;
  transform: scale(1);
}

/* Set a consistent responsive frame height */
.tron-frame--media{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,255,255,0.18);
  box-shadow: 0 0 20px rgba(0,255,255,0.10);

  height: clamp(220px, 32vw, 360px);
}

/* Fill the frame, crop if needed */
.tron-frame--media img{
  width: 100%;
  height: 100%;
  object-fit: cover;     
  display: block;
}

/* caption */
.tron-caption--center{
  text-align: center;
  margin-top: .95rem;
}

.tron-caption--center h2{
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

.tron-caption--center p{
  margin: 0;
  color: rgba(255,255,255,0.70);
  line-height: 1.65;
}

/* controls */
.tron-slider__controls{
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
}

.tron-nav{
  height: 44px;
  width: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,255,255,0.22);
  background: rgba(0,255,255,0.06);
  color: rgba(0,255,255,0.95);
  box-shadow: 0 0 18px rgba(0,255,255,0.10);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.tron-nav:hover{
  transform: translateY(-2px);
  background: rgba(0,255,255,0.09);
  box-shadow: 0 0 26px rgba(0,255,255,0.14);
}

.tron-dots{
  display:flex;
  justify-content:center;
  gap:.55rem;
  flex-wrap:wrap;
}

.tron-dotbtn{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,255,0.35);
  background: rgba(0,255,255,0.10);
  box-shadow: 0 0 10px rgba(0,255,255,0.10);
  cursor: pointer;
  padding: 0;
}

.tron-dotbtn[aria-selected="true"]{
  background: rgba(0,255,255,0.92);
  box-shadow: 0 0 14px rgba(0,255,255,0.35);
}

/* ---------- COD-style FEATURE STRIP (tiles rail) ---------- */
.strip{
  margin: 0 0 2.1rem;
}

.strip__head{
  margin-bottom: 1rem;
  text-align: left;
}

.strip__title{
  margin: 0 0 .35rem;
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.75rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

.strip__sub{
  margin: 0;
  color: rgba(255,255,255,0.70);
  line-height: 1.6;
}

/* === FEATURE STRIP: make it a 4-up responsive grid (no horizontal rail) === */
.strip__rail{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;

  /* remove the horizontal rail behavior */
  grid-auto-flow: unset;
  grid-auto-columns: unset;

  overflow: visible;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior-x: auto;

  /* keep a little breathing room if you liked the old padding */
  padding: .75rem 0 1.35rem;
}

/* Make sure long text doesn’t blow up the grid */
.tile{
  min-width: 0;
}

/* Responsive breakpoints like tron-cards */
@media (max-width: 900px){
  .strip__rail{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  .strip__rail{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tile{
  scroll-snap-align: start;
  display: block;
  padding: 1.1rem;
  border-radius: 18px;
  text-decoration: none;

  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(0,255,255,0.14);
  backdrop-filter: blur(10px);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.45),
    0 0 22px rgba(0,255,255,0.08);

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tile:hover{
  transform: translateY(-3px);
  border-color: rgba(0,255,255,0.36);
  box-shadow:
    0 18px 54px rgba(0,0,0,0.55),
    0 0 30px rgba(0,255,255,0.12);
}

.tile__label{
  display:inline-block;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(0,255,255,0.22);
  background: rgba(0,255,255,0.06);
  color: rgba(0,255,255,0.95);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .72rem;
  margin-bottom: .75rem;
}

.tile__title{
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: .45rem;
}

.tile__meta{
  color: rgba(255,255,255,0.70);
  line-height: 1.6;
}

/* ---------- FEATURES / SECTIONS feel more “game landing page” ---------- */
.tron-section{
  margin-top: 2.75rem;
}

.tron-section__head{
  text-align: left;
  margin-bottom: 1rem;
  padding-left: .25rem;
}

.tron-h2{
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Make feature cards punchier */
/* 3-up layout for tron cards */
.tron-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;               /* space between cards */
  align-items: stretch;
}

/* Responsive: 2-up then 1-up */
@media (max-width: 900px){
  .tron-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .tron-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tron-card--small{
  padding: 1.25rem 1.35rem;
}

/* make icon + h3 sit on one line */
.tron-card--small{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "body body";
  column-gap: .6rem;
}

.tron-card--small .tron-icon{
  grid-area: icon;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(0,255,255,0.95);
}

.tron-card--small h3{
  grid-area: title;
  margin: 0;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  align-self: center;
}

.tron-card--small p{
  grid-area: body;
  margin-top: .55rem;
  line-height: 1.5;
}

.tron-card{
  border-radius: 18px;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(0,255,255,0.14);
  backdrop-filter: blur(10px);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.45),
    0 0 24px rgba(0,255,255,0.08);
}

.tron-card h3{
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Video card */
.tron-video__card{
  border-radius: 20px;
  padding: 1.25rem;
}

/* Responsive video frame */
.tron-video__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;          /* responsive */
  margin-top: 1rem;

  border-radius: 16px;
  overflow: hidden;              /* clips iframe to rounded corners */

  box-shadow:
    0 18px 48px rgba(0,0,0,.55),
    0 0 28px rgba(0,255,255,.12);
}

/* Make iframe fill container */
.tron-video__frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Coming soon featured banner */
.tron-split{
  border-radius: 20px;
}

.tron-split__img img{
  filter: drop-shadow(0 0 18px rgba(0,255,255,0.16));
}

/* Small screens: reduce hero height and spacing */
@media (max-width: 520px){
  .heroStage{
    min-height: 560px;
  }
  .home-title{
    letter-spacing: 0em;
  }
  .home-hero.tron-panel{
    padding: 18px;
  }
}

/* =========================
   ADA/WCAG polish for Home + Slider
   ========================= */

/* 1) Strong, consistent focus indicator */
:where(a, button, [role="button"], [tabindex]):focus-visible{
  outline: 3px solid rgba(0,255,255,0.95);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.55), 0 0 18px rgba(0,255,255,0.25);
}

/* Don’t remove outlines anywhere */
:where(a, button, input, textarea, select):focus{ outline: none; }
:where(a, button, input, textarea, select):focus-visible{
  outline: 3px solid rgba(0,255,255,0.95);
  outline-offset: 3px;
}

/* 2) Reduced motion: stop animated transitions for people who need it */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
  }
  .tron-slider__track{
    transition: none !important;
  }
  .tron-slide{
    transition: none !important;
  }
  .tron-nav,
  .home-pill,
  .tile{
    transition: none !important;
  }
  .tron-slider__progressFill{
    transition: none !important;
  }
}

/* 3) Progress bar (autoplay) */
.tron-slider__progress{
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(0,255,255,0.18);
  box-shadow: 0 0 14px rgba(0,255,255,0.10);
  margin: .65rem 0 .25rem;
}

.tron-slider__progressFill{
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: rgba(0,255,255,0.9);
  box-shadow: 0 0 14px rgba(0,255,255,0.25);
}

/* 4) Buttons hit-area: already 44x44 (good). Ensure dots also meet 44x44 */
.tron-dotbtn{
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
}

/* But keep the tiny dot visually inside */
.tron-dotbtn::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,255,0.35);
  background: rgba(0,255,255,0.10);
  box-shadow: 0 0 10px rgba(0,255,255,0.10);
}

.tron-dotbtn[aria-selected="true"]::before{
  background: rgba(0,255,255,0.92);
  box-shadow: 0 0 14px rgba(0,255,255,0.35);
}

/* 5) Improve text contrast over the hero background */
.heroStage__overlay{
  background:
    radial-gradient(1200px 700px at 30% 30%, rgba(0,255,255,0.14), transparent 55%),
    radial-gradient(900px 520px at 80% 22%, rgba(0,140,255,0.12), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.70) 100%);
}

/* 6) Ensure carousel reads as carousel (active slide highlight already in your CSS) */
.tron-slide[aria-hidden="true"]{
  opacity: .70;
}
.tron-slide[aria-hidden="false"]{
  opacity: 1;
}

/* 7) Prevent focus ring getting clipped */
.home-hero.tron-panel,
.home-hero__slider{
  overflow: visible;
}

.tron-frame--media{ background: rgba(0,0,0,0.35); }

/* =========================
   SLIDER OVERRIDES (1 slide, no peek, no crop)
   ========================= */

/* Show ONLY one slide */
.tron-slider__viewport{
  padding: 0 !important;      /* removes peek */
  overflow: hidden;
}

.tron-slider__track{
  gap: 0 !important;          /* no gap */
}

.tron-slide{
  flex: 0 0 100% !important;  /* full width */
  opacity: 1 !important;
  transform: none !important;
}

/* ===== Consistent responsive media area WITHOUT cropping =====
   Use an aspect ratio so all slides have the same height.
   Pick a ratio that matches your screenshots best:
   - 16/9 is common
   - 4/3 is taller (often nicer for app screens)
*/
.tron-frame--media{
  width: 100%;
  aspect-ratio: 4 / 3;  /* try 4/3 first; change to 16/9 if you want shorter */
  height: auto;         /* important */
  display: grid;
  place-items: center;

  background: rgba(0,0,0,0.35); /* makes letterbox look intentional */
}

/* Show the ENTIRE image, centered, no crop */
.tron-frame--media img{
  width: 100%;
  height: 100%;
  object-fit: contain;         /* no cropping */
  object-position: center;
  display: block;
}

/* =========================================
   COMING SOON (this section only)
   + visual upgrade + Tron water gator
   ========================================= */

/* Section spacing + subtle band feel */
.tron-section.tron-section--tight{
  margin-top: 2.4rem;
}

/* Upgrade just this split card */
.tron-section.tron-section--tight .tron-card.tron-split{
  position: relative;
  overflow: hidden;
  border-radius: 22px;

  background:
    radial-gradient(900px 420px at 18% 25%, rgba(0,255,255,0.10), transparent 55%),
    radial-gradient(760px 360px at 86% 70%, rgba(255,105,180,0.08), transparent 58%),
    linear-gradient(135deg, rgba(0,0,0,0.58), rgba(0,0,0,0.40));

  border: 1px solid rgba(0,255,255,0.18);

  box-shadow:
    0 20px 70px rgba(0,0,0,0.55),
    0 0 26px rgba(0,255,255,0.12),
    inset 0 0 18px rgba(0,255,255,0.08);

  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;

  isolation: isolate; /* makes blend modes behave consistently */
}

/* Tron scan sheen across the whole card (subtle) */
.tron-section.tron-section--tight .tron-card.tron-split::before{
  content:"";
  position:absolute;
  inset:-60%;
  pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(0,255,255,0.08), transparent);
  transform: rotate(10deg);
  opacity: 0.22;
}

/* Layout polish */
.tron-section.tron-section--tight .tron-split__copy{
  padding: clamp(18px, 2.2vw, 28px);
  display: grid;
  align-content: center;
  gap: 0.7rem;
  border-left: 1px solid rgba(0,255,255,0.12);
}

.tron-section.tron-section--tight .tron-kicker{
  display: inline-flex;
  align-items: center;
  width: fit-content;

  padding: .35rem .7rem;
  border-radius: 999px;

  border: 1px solid rgba(255,105,180,0.35);
  background: rgba(255,105,180,0.08);

  color: rgba(255,255,255,0.88);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .75rem;

  box-shadow: 0 0 18px rgba(255,105,180,0.14);
}

.tron-section.tron-section--tight .tron-h2{
  margin: 0;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 0 14px rgba(0,255,255,0.16);
  font-size: 2rem;
}

.tron-lead{
  line-height: 1.7;
}

.tron-section.tron-section--tight .tron-lead{
  margin: 0;
  color: rgba(255,255,255,0.74);
}

/* =========================
   CTA row (THIS SECTION ONLY)
   Side-by-side store badges
   ========================= */

/* Keep them on one line (desktop/tablet) */
.tron-section.tron-section--tight .tron-cta{
  display: flex;
  align-items: center;        /* vertical centering */
  justify-content: center;    /* horizontal centering */
  gap: 0.85rem;
  flex-wrap: nowrap;
  margin-top: 2.4rem;
}

/* Normalize badge sizing */
.tron-section.tron-section--tight .tron-cta .tron-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.65rem;

  border-radius: 999px;
  background: rgba(0,255,255,0.06);
  box-shadow: 0 0 22px rgba(0,255,255,0.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.tron-section.tron-section--tight .tron-cta .tron-pill:hover{
  transform: translateY(-2px);
  background: rgba(0,255,255,0.09);
  border-color: rgba(0,255,255,0.45);
  box-shadow: 0 0 34px rgba(0,255,255,0.14);
}

/* Consistent image height */
.tron-section.tron-section--tight .tron-cta .tron-store{
  height: 48px;
  width: auto;
  display: block;
}

/* Small screens: allow wrap + center */
@media (max-width: 768px){
  .tron-section.tron-section--tight .tron-cta {
    margin-top:0.75rem;
  }
}

@media (max-width: 420px){
  .tron-section.tron-section--tight .tron-cta{
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ========= GATOR IMAGE + TRON WATER ========= */

/* Image column container becomes the “tank” */
.tron-section.tron-section--tight .tron-split__img{
  position: relative;
  padding: clamp(16px, 2vw, 22px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Add a soft inner frame behind the gator */
.tron-section.tron-section--tight .tron-split__img::before{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 18px;

  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(0,255,255,0.14);

  box-shadow:
    inset 0 0 22px rgba(0,255,255,0.10),
    0 0 18px rgba(0,255,255,0.06);

  pointer-events:none;
  z-index: 0;
}

/* Gator image itself */
.tron-section.tron-section--tight .tron-split__img img{
  position: relative;
  z-index: 1;

  width: min(420px, 90%);
  height: auto;

  border-radius: 16px;
  display: block;

  /* Neon pop */
  filter:
    drop-shadow(0 0 10px rgba(0,255,255,0.18))
    drop-shadow(0 0 18px rgba(255,105,180,0.12));

  transform: translateZ(0);
}

/* Water caustics + shimmer (overlay) */
.tron-section.tron-section--tight .tron-split__img::after{
  content:"";
  position:absolute;
  inset:-35%;
  z-index: 2;
  pointer-events:none;

  background:
    radial-gradient(circle at 22% 30%, rgba(0,255,255,0.22), transparent 55%),
    radial-gradient(circle at 72% 55%, rgba(255,105,180,0.14), transparent 60%),
    radial-gradient(circle at 48% 80%, rgba(0,255,255,0.12), transparent 62%),

    repeating-linear-gradient(
      135deg,
      rgba(0,255,255,0.00) 0 18px,
      rgba(0,255,255,0.12) 18px 22px,
      rgba(255,105,180,0.07) 22px 26px,
      rgba(0,255,255,0.00) 26px 44px
    ),

    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.00) 0 3px,
      rgba(255,255,255,0.035) 3px 4px
    );

  mix-blend-mode: screen;
  opacity: 0.82;

  animation: tron-water-drift 6.8s linear infinite;
}

@keyframes tron-water-drift{
  0%   { transform: translate(-6%, -2%) rotate(0deg); }
  50%  { transform: translate(6%,  2%) rotate(8deg); }
  100% { transform: translate(-6%, -2%) rotate(0deg); }
}

/* Responsive: stack nicely */
@media (max-width: 900px){
  .tron-section.tron-section--tight .tron-card.tron-split{
    grid-template-columns: 1fr;
  }
  .tron-section.tron-section--tight .tron-split__copy{
    border-left: none;
    border-top: 1px solid rgba(0,255,255,0.12);
  }
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .tron-section.tron-section--tight .tron-split__img::after{
    animation: none !important;
  }
}

.home-micro{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem 0.9rem;
}

.home-micro__item{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  line-height: 1.2;
}

.home-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);

  display: inline-block;
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 567px){
  .home-micro{
    flex-direction: row;     /* keep horizontal flow */
    flex-wrap: wrap;         /* allow wrapping */
    justify-content: center;
    align-items: center;
    gap: 0.5rem 0.9rem;
  }

  .heroStage__content {
    padding: 25px 0;
  }
}

@media (max-width: 354px){
  .tron-dots{
    display: none;
  }

   /* center the two arrow buttons when dots are hidden */
  .tron-slider__controls{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
  }
}
/* =========================
   END OF INDEX HOME PAGE
   ========================= */