/* ========================================================================== */
/* 01) RESET & ROOT TOKENS                                                    */
/* ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* Colors */
  --bg: #0a0f0f;
  --panel: rgba(255, 255, 255, .04);
  --border: rgba(255, 255, 255, .12);
  --text: #e8efe9;
  --muted: #a2b3ab;
  --accent: #8F00FF;

  /* Effects */
  --shadow: 0 20px 60px rgba(0, 0, 0, .45);

  /* Hero / chat layout */
  --chat-h: clamp(360px, 46vh, 520px);
  --chat-visible: calc(var(--chat-h) / 2);
  --hero-pad-bottom: calc(var(--chat-visible) + 32px);

  /* Beams */
  --beam-color: #8F00FF;
  --beam-hot: #D29CFF;
  --beam-w: 4px;
  --flare-w: 26%;
  --flare-soft: 26px;

  /* Particles */
  --mint: #00ffc3;
  --particleA: rgba(255, 242, 0, 0.948);
  --particleB: rgba(225, 0, 255, 0.55);
  --particleC: rgb(255, 255, 255);
}

/* Register custom property for rotation (used by conic glow sweeps) */
@property --rotate {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}


/* ========================================================================== */
/* 02) BASE PAGE                                                              */
/* ========================================================================== */

html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font-family: "Montserrat", sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -10%, #0d101a 0%, transparent 60%),
    radial-gradient(1000px 600px at 10% 10%, #140e26 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 5%, #1a0f2e 0%, transparent 60%),
    var(--bg);
}


/* ========================================================================== */
/* 03) GLOBAL DECOR: GLOWS, STARS, SCROLLBAR                                  */
/* ========================================================================== */

/* Ambient glows */
.glow-layer {
  position: fixed;
  inset: -20vmax;
  pointer-events: none;
  filter: blur(70px);
  opacity: .3;
}

.glow-1 {
  background: radial-gradient(circle at 50% 20%, rgba(143, 0, 255, .28), transparent 40%);
}

.glow-2 {
  background: radial-gradient(circle at 90% 10%, rgba(143, 0, 255, .15), transparent 45%);
}

.glow-3 {
  background: radial-gradient(circle at 10% 0%, rgba(143, 0, 255, .12), transparent 45%);
}

.bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.bg-glow--top {
  background: radial-gradient(600px 220px at 50% 0%, rgba(143, 0, 255, .20), transparent 60%);
  mix-blend-mode: screen;
}

.bg-glow--left {
  background: radial-gradient(420px 320px at 0% 50%, rgba(143, 0, 255, .14), transparent 60%);
}

.bg-glow--right {
  background: radial-gradient(420px 320px at 100% 50%, rgba(143, 0, 255, .14), transparent 60%);
}

/* Starfield layers */
.stars {
  position: fixed;
  inset: -50vh 0 0 0;
  z-index: 0;
  width: 2px;
  height: 2px;
  pointer-events: none;
  border-radius: 50%;
  background: var(--particleA);
  filter: drop-shadow(0 0 4px var(--mint));
  animation: floatY linear infinite;
  transform: translateY(0);
}

.stars::after {
  content: "";
  position: absolute;
  top: 100vh;
  left: 0;
  width: 2px;
  height: 2px;
  background: inherit;
  border-radius: 50%;
  box-shadow: inherit;
}

/* Depth layers */
.stars-1 {
  opacity: .55;
  animation-duration: 70s;
  box-shadow:
    20vw 10vh var(--particleA), 35vw 5vh var(--particleA), 50vw 12vh var(--particleA),
    65vw 8vh var(--particleA), 80vw 14vh var(--particleA), 90vw 18vh var(--particleA),
    5vw 25vh var(--particleA), 18vw 28vh var(--particleA), 31vw 22vh var(--particleA),
    44vw 26vh var(--particleA), 57vw 21vh var(--particleA), 73vw 24vh var(--particleA),
    86vw 27vh var(--particleA), 8vw 38vh var(--particleA), 23vw 33vh var(--particleA),
    39vw 37vh var(--particleA), 52vw 32vh var(--particleA), 67vw 35vh var(--particleA),
    79vw 39vh var(--particleA), 93vw 34vh var(--particleA),
    12vw 48vh var(--particleA), 27vw 45vh var(--particleA), 41vw 50vh var(--particleA),
    56vw 47vh var(--particleA), 71vw 52vh var(--particleA), 84vw 49vh var(--particleA),
    96vw 53vh var(--particleA);
}

.stars-2 {
  width: 3px;
  height: 3px;
  opacity: .7;
  background: var(--particleB);
  filter: drop-shadow(0 0 5px rgba(0, 255, 195, .5));
  animation-duration: 50s;
  box-shadow:
    8vw 12vh currentColor, 16vw 19vh currentColor, 26vw 11vh currentColor,
    34vw 17vh currentColor, 46vw 13vh currentColor, 58vw 16vh currentColor,
    69vw 11vh currentColor, 77vw 19vh currentColor, 88vw 15vh currentColor,
    5vw 29vh currentColor, 14vw 27vh currentColor, 25vw 31vh currentColor,
    37vw 28vh currentColor, 49vw 33vh currentColor, 61vw 29vh currentColor,
    72vw 30vh currentColor, 83vw 27vh currentColor, 94vw 31vh currentColor,
    10vw 44vh currentColor, 22vw 41vh currentColor, 33vw 46vh currentColor,
    45vw 42vh currentColor, 57vw 45vh currentColor, 68vw 43vh currentColor,
    79vw 47vh currentColor, 91vw 44vh currentColor;
}

.stars-3 {
  width: 4px;
  height: 4px;
  opacity: .8;
  background: var(--particleC);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35));
  animation-duration: 35s;
  box-shadow:
    7vw 9vh currentColor, 19vw 6vh currentColor, 28vw 10vh currentColor,
    42vw 7vh currentColor, 55vw 12vh currentColor, 66vw 8vh currentColor,
    79vw 11vh currentColor, 92vw 9vh currentColor,
    11vw 23vh currentColor, 24vw 21vh currentColor, 36vw 25vh currentColor,
    48vw 22vh currentColor, 62vw 26vh currentColor, 75vw 23vh currentColor,
    88vw 27vh currentColor,
    15vw 38vh currentColor, 29vw 35vh currentColor, 43vw 40vh currentColor,
    57vw 36vh currentColor, 70vw 41vh currentColor, 85vw 37vh currentColor;
}

/* Global scrollbar */
::-webkit-scrollbar {
  width: 12px;
  background: #0a0a0a;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background: linear-gradient(180deg, #200030, #0a0a0a);
  -webkit-box-shadow: inset 0 0 6px rgba(143, 0, 255, 0.3);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(180deg, #8F00FF, #ffd90060);
  box-shadow:
    0 0 6px #FFD700,
    0 0 12px #8F00FF,
    inset 0 0 4px rgba(255, 255, 255, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a020ff, #ffea007c);
  box-shadow:
    0 0 8px #FFD700,
    0 0 16px #8F00FF,
    inset 0 0 6px rgba(255, 255, 255, 0.5);
}


/* ========================================================================== */
/* 04) HEADER & BUTTONS                                                       */
/* ========================================================================== */

.site-header {
  position: sticky;
  top: 24px;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

.header-shell {
  width: min(1100px, 96vw);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.header-cta {
  display: flex;
  justify-content: end;
}

.brand-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(143, 0, 255, .45));
}

.site-header img {
  width: 34px;
}

/* Buttons */
.btn {
  appearance: none;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 400;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  font-family: "Montserrat", sans-serif;
}

.btn-primary {
  border-color: rgba(143, 0, 255, .40);
}

.btn-primary:hover {
  box-shadow: 0 0 0 2px rgba(143, 0, 255, .25);
  border-color: var(--accent);
}


/* ========================================================================== */
/* 05) HERO / TITLE SECTION                                                   */
/* ========================================================================== */

header img {
  width: 40px;
  filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 4px #8F00FF);
  animation: logoGlow 3s ease-in-out infinite alternate;
}

.title-section {
  position: relative;
  /* required for absolute positioning */
  background: url("assets/background-hero.jpg") center center / cover no-repeat;
}

/* common styling for extra images */
.extra-image {
  position: absolute;
  pointer-events: auto;
  /* enable hover */
  z-index: 10;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

/* Hover effect: grow + glow */
.extra-image:hover {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 12px #8F00FF);
}

/* Mobile: show center image only */
@media (max-width: 767px) {
  .center-image {
    display: block;
    bottom: 10px;
    right: 10px;
    width: 350px;
    /* increased size */
    height: auto;
  }

  .right-image {
    display: none;
  }
}

/* Desktop: show right-bottom image only */
@media (min-width: 768px) {
  .right-image {
    display: block;
    bottom: 10px;
    right: 10px;
    width: 450px;
    /* increased size */
    height: auto;
  }

  .center-image {
    display: none;
  }
}



.title-section {
  position: relative;
  /* overflow: hidden;   */
}

.title-section video.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
}




.title-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.80);
  z-index: 1;
}

.title-section>* {
  position: relative;
  z-index: 1;
}




.hero {
  position: relative;
  max-height: 100svh;
  height: 100svh;
  /* exact viewport height */
  max-width: 1100px;
  margin: 0 auto;
  /* center horizontally */
  padding: 0 20px var(--hero-pad-bottom);
  background-color: transparent;
  text-align: left;

}


.rating {
  position: relative;
  display: flex;
  gap: 8px;
  font-size: 16px;
  align-items: center;
  justify-content: flex-start;
  color: var(--muted);
  margin-bottom: 20px;
}

.stars {
  letter-spacing: 4px;
  color: var(--accent);
}

.title {
  position: absolute;
  left: 50%;
  top: 25%;
  z-index: 20;
  display: block;
  padding-left: 10px;
  align-items: center;
  width: 80vw;
  transform: translateX(-50%);
  color: #efe8ff;
  font-size: clamp(34px, 6.2vw, 64px);
  line-height: 1.05;
}

.title-strong {
  color: #fff;
  font-weight: 800;
  font-size: clamp(34px, 6.2vw, 48px);
}

/* .title,
.title-strong {
  font-size: clamp(34px, 6.2vw, 56px);
} */

.subtitle {
  margin: 6px 0 18px;
  /* Remove auto margins for left alignment */
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(14px, 2.2vw, 18px);
  text-align: left;
  /* Ensure text aligns left within container */
}

.hero-cta {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 20px;
  font-size: 16px;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(143, 0, 255, .45);
  background: radial-gradient(80% 120% at 50% 0%, rgba(143, 0, 255, .22), rgba(255, 255, 255, .02));
}

.arrow {
  transform: translateY(1px);
}

.trial-note {
  color: var(--muted);
  font-size: 13px;
  opacity: .85;
}

/* Bottom vignette lines */
.edge-line {
  position: fixed;
  bottom: 0;
  height: 3px;
  width: 50vw;
  pointer-events: none;
  z-index: 5;
  opacity: .45;
  filter: blur(1.2px);
  mix-blend-mode: multiply;
}

.edge-line--left {
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .75) 100%);
}

.edge-line--right {
  right: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .75) 100%);
}


/* ========================================================================== */
/* 06) CHAT PANEL + BEAMS                                                     */
/* ========================================================================== */

/* Chat panel container within hero */
.chat-panel-section {
  position: absolute;
  left: 50%;
  bottom: -25%;
  /* half overlaps hero bottom */
  z-index: 20;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 50%;
  /* Takes 50% of hero height */
  transform: translateX(-50%);
}


/* Edge beams (left & right) */
.beam-line {
  --beamW: 15vw;
  position: relative;
  width: 15vw;
  height: clamp(10px, 20vh, 20px);
  transform: translateY(-50%);
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: visible;
}

.beam-line.left {
  left: 0;
}

.beam-line.right {
  right: 0;
}

/* Beam trumpet body */
.beam-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 120px at 100% 50%,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .70) 20%,
      rgba(143, 0, 255, .50) 55%,
      rgba(143, 0, 255, .22) 78%,
      rgba(143, 0, 255, 0) 100%),
    linear-gradient(270deg,
      rgba(255, 255, 255, .55) 0%,
      rgba(143, 0, 255, .35) 40%,
      rgba(143, 0, 255, .18) 70%,
      rgba(143, 0, 255, 0) 100%);
  filter: blur(6px) saturate(115%);
}

.beam-line.right::before {
  background:
    radial-gradient(120px 120px at 0% 50%,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .70) 20%,
      rgba(143, 0, 255, .50) 55%,
      rgba(143, 0, 255, .22) 78%,
      rgba(143, 0, 255, 0) 100%),
    linear-gradient(90deg,
      rgba(255, 255, 255, .55) 0%,
      rgba(143, 0, 255, .35) 40%,
      rgba(143, 0, 255, .18) 70%,
      rgba(143, 0, 255, 0) 100%);
}

/* Light pass sweep */
.beam-line::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 240px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, .18) 35%,
      rgba(255, 255, 255, .60) 50%,
      rgba(255, 255, 255, .18) 65%,
      transparent 100%);
  filter: blur(2px);
  opacity: .9;
}

.beam-line.left::after {
  left: -240px;
  animation: sweep-ltr 3.8s linear infinite;
}

.beam-line.right::after {
  right: -240px;
  animation: sweep-rtl 3.8s linear infinite;
}

/* Chat panel */
.chat-panel {
  z-index: 1;
  width: 100vw;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background-color: #000;
  background: linear-gradient(180deg, rgba(10, 10, 14, 0.70), rgba(10, 10, 14, 0.55));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(143, 0, 255, 0.10),
    0 0 80px rgba(143, 0, 255, 0.16) inset,
    0 0 20px rgba(144, 0, 255, 0.321),
    0 0 40px rgba(144, 0, 255, 0.359),
    0 0 60px rgba(144, 0, 255, 0.211);
  animation: glow-border .8s infinite alternate;
}

/* Chat panel rim glows */
.chat-panel::before,
.chat-panel::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
}

.chat-panel::before {
  background: radial-gradient(10% 10% at 50% 50%, rgba(143, 0, 255, .18), transparent 60%);
  filter: blur(12px);
}

.chat-panel::after {
  background: conic-gradient(from 0deg,
      rgba(143, 0, 255, 0) 0%,
      rgba(143, 0, 255, .35) 12%,
      rgba(143, 0, 255, 0) 25%,
      rgba(143, 0, 255, .35) 37%,
      rgba(143, 0, 255, 0) 50%,
      rgba(143, 0, 255, .35) 62%,
      rgba(143, 0, 255, 0) 75%,
      rgba(143, 0, 255, .35) 87%,
      rgba(143, 0, 255, 0) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 100%);
  filter: blur(16px) saturate(10%);
  animation: spin 14s linear infinite;
  opacity: .55;
}

/* Chat content grid */
.chat-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .7fr 1.15fr;
  gap: 16px;
  padding: 20px;
}

/* Ghost bubbles */
.ghost-stack {
  display: grid;
  gap: 14px;
  align-content: center;
}

.ghost-bubble {
  color: var(--text);
  font-size: 13px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  backdrop-filter: blur(8px);
}

.ghost--wide {
  width: min(280px, 90%);
}

.ghost--mid {
  width: min(220px, 85%);
}

.ghost--short {
  width: min(160px, 70%);
}

.ghost--empty {
  color: transparent;
}

.ghost--empty::after {
  content: "";
  display: block;
  height: 12px;
  border-radius: 999px;
  opacity: .55;
  background: linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08));
}

.ghost--cut {
  transform: translateX(28px);
}

.ghost--cut-left {
  transform: translateX(-36px);
}

.ghost--cut-right {
  transform: translateX(36px);
}

.ghost-stack--right {
  justify-items: end;
  text-align: right;
}

.ghost--align-right {
  text-align: right;
}

/* Orb */
.chat-center {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 180px;
}

.orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(143, 0, 255, .35), rgba(143, 0, 255, .08) 55%, transparent 60%);
  box-shadow: 0 0 36px rgba(143, 0, 255, .35), inset 0 0 26px rgba(143, 0, 255, .30);
}

.orb-core {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  animation: crystalPulse 4s ease-in-out infinite;
}

.orb-core img.crystal-core {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(143, 0, 255, .7)) drop-shadow(0 0 16px rgba(143, 0, 255, .5));
}

.orb-core img {
  width: 40px;
}

/* Spacer for reveal */
.reveal-spacer {
  height: calc(var(--chat-h) - var(--chat-visible) + 80px);
}


/* ========================================================================== */
/* 07) ABOUT (LED BINARY)                                                     */
/* ========================================================================== */
.disply-none {
  display: none !important;
}


.about-head {
  position: relative;
  z-index: 3;
  display: flex;
  /* enable flexbox */
  flex-direction: column;
  /* stack elements vertically */
  justify-content: center;
  /* vertical centering */
  align-items: center;
  /* horizontal centering */
  text-align: center;
  max-width: 1100px;
  padding: 20px;
  margin: calc(15% + 50px) auto 0;
  /* gap based on chat panel height */
}

.about-head h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(24px, 4.6vw, 34px);
  text-shadow: 0 0 6px rgba(255, 255, 255, .12), 0 0 12px rgba(143, 0, 255, .18);
}
/* Tablet */
@media screen and (max-width: 900px) {
  .about-head {
    margin: calc(50% + 60px) auto 0; /* slightly more gap */
  }

    .beam-line {
top: 2%;  }
}

/* Mobile */
@media screen and (max-width: 600px) {
  .about-head {
    margin: calc(50% + 70px) auto 0; /* more gap below chat panel */
  }

   .center-image {
    width: 300px;

  }

}

@media screen and (max-width: 480px) {
  .about-head {
    margin: calc(55% + 70px) auto 0; /* more gap below chat panel */
  }
     .center-image {
    width: 250px;

  }
}

.about-sub {
  margin: 0 auto;
  max-width: 720px;
  color: var(--muted);
  /* same muted gray */
  font-size: 14px;
  text-align: center;
}

.led-about {
  position: relative;
  max-width: 1100px;
  margin: 30px auto 96px;
  padding: 0 20px;
  text-align: center;
}

.led-about .about-line {
  margin-top: 18px;
  font-size: clamp(14px, 2.2vw, 18px);
}

.led-about .panel--single {
  position: relative;
  width: 100%;
  height: clamp(280px, 44vw, 460px);
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  opacity: .62;
  isolation: isolate;
}

.led-about .panel--single canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0, 0, 0, 0) 100%);
  mask: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0, 0, 0, 0) 100%);
}

.led-about .panel--single::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 16px;
  pointer-events: none;
  border: 1px solid rgba(143, 0, 255, .55);
  box-shadow: 0 0 10px rgba(143, 0, 255, .45), 0 0 22px rgba(143, 0, 255, .28), inset 0 0 40px rgba(143, 0, 255, .12);
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, 0) 100%);
  mask: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, 0) 100%);
}

.led-about .panel--single::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 1;
  border-radius: 14px;
  pointer-events: none;
  background:
    radial-gradient(60% 20% at 50% 0%, rgba(143, 0, 255, .18), transparent 70%),
    radial-gradient(70% 15% at 50% 100%, rgba(143, 0, 255, .10), transparent 70%);
  mix-blend-mode: screen;
}

.led-about .led-fade {
  display: none !important;
}

.led-stage img {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 100;
  width: 40vw;
  transform: translate(-50%, 0);
  filter: brightness(0.75);
}


/* ========================================================================== */
/* 08) MODELS GRID                                                            */
/* ========================================================================== */

.models {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: calc(8% + 50px) auto 0;
  padding: 0 20px;
}

.models::before {
  content: "";
  position: absolute;
  inset: -40px -10vw -40px -10vw;
  pointer-events: none;
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(143, 0, 255, .10), transparent 60%),
    radial-gradient(800px 420px at 10% 30%, rgba(143, 0, 255, .06), transparent 70%),
    radial-gradient(800px 420px at 90% 30%, rgba(143, 0, 255, .06), transparent 70%);
  mix-blend-mode: screen;
  filter: blur(20px);
}

.models-head {
  text-align: center;
  margin-bottom: 22px;
}

.models-head h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(24px, 4.6vw, 34px);
  text-shadow: 0 0 6px rgba(255, 255, 255, .12), 0 0 12px rgba(143, 0, 255, .18);
}

.models-sub {
  margin: 0 auto;
  max-width: 720px;
  color: var(--muted);
  font-size: 14px;
}

.models-grid {
  display: grid;
  gap: 16px;
  margin-top: 40px;
  grid-template-columns: repeat(4, 1fr);
}

.model-card {
  position: relative;
  overflow: hidden;
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .35),
    inset 0 0 40px rgba(143, 0, 255, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.model-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  filter: blur(12px);
  opacity: .45;
  background: conic-gradient(from 0deg,
      rgba(143, 0, 255, 0) 0%,
      rgba(143, 0, 255, .35) 12%,
      rgba(143, 0, 255, 0) 25%,
      rgba(143, 0, 255, .35) 37%,
      rgba(143, 0, 255, 0) 50%,
      rgba(143, 0, 255, .35) 62%,
      rgba(143, 0, 255, 0) 75%,
      rgba(143, 0, 255, .35) 87%,
      rgba(143, 0, 255, 0) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 100%);
}

.model-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 255, 0, 0.23);
  box-shadow:
    0 20px 50px rgba(255, 234, 0, 0.068),
    inset 0 0 60px rgba(226, 242, 1, 0.037),
    0 0 30px rgba(222, 255, 5, 0.086);
}

.model-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  color: #fff;
  font-size: 20px;
  border-radius: 12px;
  background: radial-gradient(70% 70% at 50% 50%, rgba(143, 0, 255, .35), rgba(143, 0, 255, .12));
  box-shadow: 0 0 16px rgba(143, 0, 255, .35), inset 0 0 10px rgba(255, 255, 255, .20);
}

.model-card h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 16px;
  letter-spacing: .2px;
}

.model-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}


/* ========================================================================== */
/* 09) MARKET (COMING SOON)                                                   */
/* ========================================================================== */

.market-soon {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 20px auto 120px;
  padding: 0 24px;
}

.market-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 26px;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  box-shadow:
    0 28px 70px rgba(0, 0, 0, .55),
    inset 0 0 36px rgba(143, 0, 255, .08);
  padding: 40px 32px 0 32px;
  transition: opacity .8s ease, transform .8s ease;
  animation: cardBreath 8s ease-in-out infinite;
}

.market-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

.market-card img {
  padding-top: 30px;
}

.market-head {
  text-align: center;
  margin-bottom: 22px;
}

.market-head h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(24px, 4.6vw, 34px);
  text-shadow: 0 0 6px rgba(255, 255, 255, .12), 0 0 12px rgba(143, 0, 255, .18);
}

.market-sub {
  margin: 0 auto;
  max-width: 760px;
  color: var(--muted);
  font-size: 15px;
}

/* Badge */
.badge.soon {
  display: inline-block;
  margin-left: 10px;
  color: #fff;
  font-size: 12px;
  letter-spacing: .2px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 12px rgba(143, 0, 255, .15), 0 0 12px rgba(143, 0, 255, .15);
}

/* Ticker */
.market-ticker {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  backdrop-filter: blur(6px);
  margin-top: 20px;
  --ticker-speed: 28s;
  /* adjust speed here */
}

.ticker-track {
  display: inline-flex;
  gap: 32px;
  padding: 12px 18px;
  width: max-content;
  /* don’t shrink to container */
  will-change: transform;
  /* smoother anim */
  animation: ticker-move var(--ticker-speed) linear infinite;
}

.ticker-track span {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

@keyframes ticker-move {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }

  /* track is duplicated via JS */
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
  }
}

/* CTA inside market card */
.market-cta {
  display: grid;
  place-items: center;
  gap: 12px;
  margin-top: 26px;
}

.market-cta .btn {
  opacity: .85;
  color: var(--text);
  font-weight: 400;
  padding: 12px 18px;
  border: 1px solid rgba(143, 0, 255, .40);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  transition: box-shadow .25s ease, border-color .25s ease;
  cursor: pointer; /* add this so it feels clickable */
}


.market-cta .btn:hover {
  box-shadow: 0 0 0 2px rgba(143, 0, 255, .25);
  border-color: var(--accent);
}

.market-cta .cta-note {
  color: var(--muted);
  font-size: 13px;
  opacity: .85;
}


/* ========================================================================== */
/* 10) FOOTER                                                                 */
/* ========================================================================== */

.site-footer {
  position: relative;
  z-index: 1;
  padding: 40px 20px 20px;
  text-align: center;
  background: transparent;
}

.footer-shell {
  max-width: 1100px;
  margin: 0 auto;
}

.footer-flex {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  /* space out left, center, right */
  align-items: center;
  /* vertically center all */
  flex-wrap: wrap;
  text-align: center;
}

.footer-left {
  flex: 1;
  min-width: 220px;
  text-align: left;
}

.footer-center {
  flex: 1;
  min-width: 220px;
  text-align: center;
}

.footer-right {
  flex: 1;
  min-width: 220px;
  text-align: right;
}

.footer-copy {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.footer-disclaimer {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
}

.footer-links {
  display: flex;
  gap: 16px;
  min-width: 220px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-links a {
  color: var(--muted);
  font-size: 10px;
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}

.footer-links a:hover {
  color: #fff;
  text-shadow:
    0 0 1px rgba(255, 255, 255, .9),
    0 0 6px rgba(255, 255, 255, .7),
    0 0 14px rgba(143, 0, 255, .28);
}

.footer-divider {
  width: 80px;
  height: 1px;
  margin: 14px auto;
  background: rgba(255, 255, 255, .12);
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.social-link {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  text-shadow:
    0 0 0.5px rgba(255, 255, 255, .9),
    0 0 4px rgba(255, 255, 255, .55),
    0 0 10px rgba(143, 0, 255, .20);
  transition: text-shadow .25s ease, transform .25s ease;
}

.social-link:hover {
  transform: translateY(-2px);
  text-shadow:
    0 0 1px rgba(255, 255, 255, 1),
    0 0 6px rgba(255, 255, 255, .7),
    0 0 14px rgba(143, 0, 255, .28);
}


/* Mobile: reduce icon size */
@media (max-width: 480px) {
  .footer-social a svg {
    width: 16px;
    height: 16px;
    gap: 16px;
  }
}



/* ========================================================================== */
/* 11) TYPOGRAPHIC EFFECTS                                                    */
/* ========================================================================== */

.neon-soft {
  color: #fff;
  letter-spacing: .4px;
  text-shadow:
    0 0 0.5px rgba(255, 255, 255, .9),
    0 0 4px rgba(255, 255, 255, .55),
    0 0 10px rgba(143, 0, 255, .20);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .12));
}

/* Avoid extra glow on second line of title */
.title-strong {
  text-shadow: none;
}


/* ========================================================================== */
/* 12) ANIMATIONS (KEYFRAMES)                                                 */
/* ========================================================================== */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sweep-ltr {
  to {
    transform: translateX(calc(var(--beamW) + 480px));
  }
}

@keyframes sweep-rtl {
  to {
    transform: translateX(calc(-1 * (var(--beamW) + 480px)));
  }
}

@keyframes glow-border {
  0% {
    box-shadow:
      0 24px 70px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(143, 0, 255, 0.10),
      0 0 80px rgba(143, 0, 255, 0.16) inset,
      0 0 20px rgba(144, 0, 255, 0.321),
      0 0 40px rgba(144, 0, 255, 0.359),
      0 0 60px rgba(144, 0, 255, 0.211);
  }

  100% {
    box-shadow:
      0 24px 70px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(143, 0, 255, 0.20),
      0 0 90px rgba(143, 0, 255, 0.26) inset,
      0 0 30px rgba(144, 0, 255, 0.421),
      0 0 50px rgba(144, 0, 255, 0.459),
      0 0 70px rgba(144, 0, 255, 0.311);
  }
}

@keyframes logoGlow {
  0% {
    filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 3px #8F00FF);
  }

  100% {
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 6px #8F00FF);
  }
}

@keyframes neonSoftBreath {

  0%,
  100% {
    text-shadow:
      0 0 0.5px rgba(255, 255, 255, .9),
      0 0 4px rgba(255, 255, 255, .55),
      0 0 10px rgba(143, 0, 255, .20);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .12));
  }

  50% {
    text-shadow:
      0 0 0.5px rgba(255, 255, 255, 1),
      0 0 5px rgba(255, 255, 255, .65),
      0 0 12px rgba(143, 0, 255, .24);
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, .14));
  }
}

@keyframes floatY {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100vh);
  }
}

@keyframes cardBreath {

  0%,
  100% {
    box-shadow: 0 28px 70px rgba(0, 0, 0, .55), inset 0 0 36px rgba(143, 0, 255, .08);
  }

  50% {
    box-shadow: 0 32px 80px rgba(0, 0, 0, .65), inset 0 0 50px rgba(143, 0, 255, .14);
  }
}

@keyframes crystalPulse {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.08);
    filter: brightness(1.25);
  }
}

      .disply-none {
  display: flex !important;
}
/* ========================================================================== */
/* 13) REDUCED MOTION                                                         */
/* ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .neon-soft {
    animation: neonSoftBreath 6s ease-in-out infinite;
  }
}


/* ========================================================================== */
/* 14) RESPONSIVE                                                             */
/* ========================================================================== */

@media (min-width: 1900px) {
  .rating {
    padding-top: 120px;
  }
}

@media (max-width: 1400px) {

  .title {
    top: 5%;
    font-size: clamp(28px, 6.2vw, 50px);

  }
}

@media (max-width: 1020px) {
  .models-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .title {
    top: 5%;
    font-size: clamp(28px, 6.2vw, 50px);

  }
}

@media (max-width: 900px) {
  .chat-shell {
    grid-template-columns: 1fr;
  }
      .disply-none {
  display: none !important;
}

  .ghost--cut,
  .ghost--cut-left,
  .ghost--cut-right {
    transform: none;
  }

  .title {
    top: 5%;
    font-size: clamp(28px, 6.2vw, 45px);

  }

    .chat-shell {
    height: 480px;
    
  }
}

@media (max-width: 720px) {
  .models {
    margin: 64px auto 96px;
  }

  .models-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .market-card {
    padding: 28px 20px;
  }

  /* Footer stacking */
  .footer-flex {
    flex-direction: column;
    text-align: center;
  }

  .footer-left {
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }

  .title {
    justify-content: center;
    left: 50%;
    width: 90vw;

    top: 15%;
    font-size: clamp(26px, 6.2vw, 35px);

  }
}

@media (max-width: 768px) {
  .cta-note {

    padding-bottom: 1rem;
    /* Add bottom padding */

  }


}

@media (max-width: 600px) {
    .disply-none {
  display: none !important;
}

  .chat-shell {
    height: 290px;
    
  }

  .ghost--empty {
    display: none;
  }

  .chat-center {
    min-height: 100px;
  }
  .title {
    justify-content: center;
    left: 50%;
    width: 90vw;

    top: 15%;
    font-size: clamp(24px, 6.2vw, 30px);

  }
}

@media (max-width: 480px) {
  .chat-shell {
    height: 270px;
  }



  .ghost--empty {
    display: none;
  }

  .chat-center {
    min-height: 100px;
  }

  /* .chat-panel-section {
    bottom: -15vh;
  } */
}

@media (max-width: 480px) {
  .cta-note {
    font-size: 12px;
    /* Even smaller for very small screens */
    padding-bottom: 0.8rem;
  }
}





/* ===== Watch Video Modal ===== */
.video-modal {
  width: min(900px, 92vw);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  color: var(--text);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .65), inset 0 0 30px rgba(143, 0, 255, .10);
  overflow: hidden;
}

.video-modal::backdrop {
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(4px);
}

.dialog-card {
  display: grid;
  gap: 12px;
  padding: 16px 16px 18px;
}

.dialog-title {
  margin: 0;
  font-size: 16px;
  color: #fff;
  opacity: .9;
  text-align: left;
}

.dialog-close {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  color: #fff;
  cursor: pointer;
}

.dialog-close:hover {
  box-shadow: 0 0 0 2px rgba(143, 0, 255, .25);
  border-color: var(--accent);
}

.dialog-video-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(143, 0, 255, .08);
}

.dialog-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

/* Optional: tidy spacing for the CTA icon */
.btn-cta svg {
  flex-shrink: 0;
  margin-right: 6px;
}


/* ===== Notify Popup Modal ===== */
.notify-modal {
  width: min(420px, 92vw);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: black;
  color: var(--text);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .65), inset 0 0 30px rgba(143, 0, 255, .10);
  overflow: hidden;
}

.notify-modal::backdrop {
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(4px);
}

.notify-modal .dialog-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  position: relative;
}

.notify-modal .dialog-title {
  margin: 0;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 6px rgba(255, 255, 255, .12), 0 0 12px rgba(143, 0, 255, .18);
}

.notify-modal .dialog-sub {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.notify-modal .dialog-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  color: #fff;
  cursor: pointer;
}

.notify-modal .dialog-close:hover {
  box-shadow: 0 0 0 2px rgba(143, 0, 255, .25);
  border-color: var(--accent);
}

.notify-form {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.notify-form input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 14px;
}

.notify-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(143, 0, 255, .25);
}

.notify-form button {
  border-radius: 12px;
  padding: 12px 18px;
}

.rating-copy {
  font-weight: bold;
  color: white;
}

.market-visual {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    max-width: 100%;
    height: auto;
  }
}



/* === Responsive Fixes === */

/* Mobile adjustments */
@media (max-width: 1000px) {

  .led-stage img {
    width: 65vw;
    /* bigger for mobile */

    bottom: -10px;
    /* slightly lower to center */
  }
}

@media (max-width: 720px) {

  /* Royal Drive Market image (reduce size on mobile) */
  .market-card img {
    width: 70%;
    /* shrink image */
    /* prevent too big */
    height: auto;
  }

  .market-card {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* Who I Am section character image (increase size on mobile) */
  .led-stage img {
    width: 75vw;
    /* bigger for mobile */
    max-width: 420px;
    bottom: -10px;
    /* slightly lower to center */
  }

  .market-soon {
    padding: 5px;
    margin: 50px auto 100px;
  }

  .ghost-bubble {
    padding: 8px;
    font-size: 13px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .market-card img {
    width: 60%;

  }

  .market-soon {
    padding: 5px;
    margin: 0px auto 70px;
  }


  .market-card {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .led-stage img {
    width: 85vw;
    max-width: 420px;
  }

  .ghost-bubble {
    padding: 8px;
    font-size: 11px;
  }
}

@media (max-width: 430px) {
  .notify-form {
    display: flex;
    gap: 6px;
    /* smaller gap */
    margin-top: 8px;
  }

  .notify-form input {
    flex: 1;
    padding: 8px 10px;
    /* reduced padding */
    border-radius: 8px;
    /* smaller corners */
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 12px;
    /* smaller text */
  }

  .notify-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1.5px rgba(143, 0, 255, .25);
    /* lighter focus */
  }

  .notify-form button {
    border-radius: 8px;
    padding: 8px 12px;
    /* smaller button */
    font-size: 12px;
    /* smaller text */
  }
}