:root {
  --bg: #000;
  --white: #fff;
  --grad: linear-gradient(90deg, #fff 0%, #a9b8ff 35%, #7d8cff 55%, #d78bf0 80%, #f0a6e8 100%);
  --btn-grad: linear-gradient(90deg, #5b7cff, #b583f5);
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

/* ---------- Navigation ---------- */
.site-header {
  position: fixed;                 /* stays at the top while scrolling */
  top: 0; left: 0; right: 0;
  z-index: 20;
}
.navbar { padding: 0.9rem 0; }
.brand-logo {
  width: 150px; height: 150px;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
.navbar .nav-link {
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  font-weight: 500;
}
.navbar .nav-link:hover { color: #a9b8ff; }

.btn-prism {
  background: var(--btn-grad);
  border: 0;
  color: #fff;
  border-radius: 50rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  white-space: nowrap;
}
.btn-prism:hover { color: #fff; filter: brightness(1.12); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: #000 url("../../img/hero-bg.jpg") center / cover no-repeat;
  overflow: hidden;
  isolation: isolate;
}

.hero-person {
  position: absolute;
  /*left: 3%; bottom: 0;*/
  left: 8%; bottom: 0;
  /*height: 88%;*/
  height: 110%;
  width: auto;
  max-width: 45%;
  object-fit: contain;
  object-position: bottom left;
  mix-blend-mode: normal;
  z-index: -1;
  filter: drop-shadow(0 0 40px rgba(0, 0, 0, .6));
}

/* Crystal P cropped out of the logo (black bg blends away) */
.hero-crystal {
  position: absolute;
  /*right: -2%; bottom: -4%;*/
  right: -2%; bottom: -8%;
  width: clamp(280px, 38vw, 560px);
  aspect-ratio: 1 / 0.72;
  object-fit: cover;
  object-position: 50% 28%;
  mix-blend-mode: screen;
  z-index: -1;
  -webkit-mask-image: radial-gradient(ellipse at 55% 50%, #000 55%, transparent 80%);
          mask-image: radial-gradient(ellipse at 55% 50%, #000 55%, transparent 80%);
}

.hero-inner { position: relative; z-index: 2; padding-top: 7rem; padding-bottom: 5rem; }

.hero-title {
  font-weight: 800;
  font-size: clamp(3.5rem, 8vw, 9.2rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0;
}
.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-sub {
  font-weight: 800;
  font-size: clamp(1.4rem, 2.8vw, 4.4rem);
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.6rem;
}
.hero-tag { font-size: clamp(1rem, 1.5vw, 2.25rem); margin-bottom: 0.7rem; }
.hero-text {

  font-size: 0.95rem;
  max-width: 480px;
  line-height: 1.45;
  margin-bottom: 1.6rem;
}

.hero-link {
  display: inline-flex; align-items: center;
  color: #fff; text-decoration: none;
  font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.hero-link-dot {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #4560d8;
  margin-right: -14px;
  flex-shrink: 0;
}
.hero-link-dot::before { /* line passing through the dot */
  content: "";
  position: absolute; top: 50%; left: -14px;
  width: 36px; height: 1px; background: #fff;
}
.hero-link-text { position: relative; z-index: 1; padding-left: 0; }
.hero-link:hover .hero-link-dot { background: #6a82ff; }

.scroll-indicator {
  position: absolute;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  width: 18px; height: 28px;
  border: 1.5px solid #fff; border-radius: 10px;
}
.scroll-indicator span {
  position: absolute; top: 6px; left: 50%;
  width: 3px; height: 6px; margin-left: -1.5px;
  background: #fff; border-radius: 2px;
  animation: scroll-dot 1.6s infinite;
}
@keyframes scroll-dot {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(8px); }
}

/* ---------- Tablet & below ---------- */
@media (max-width: 991.98px) {
  .site-header { background: rgba(0, 0, 0, .65); }
  .brand-logo { width: 100px; height: 100px; }
  .navbar-collapse { padding: 1rem 0 1.2rem; }
  .navbar .nav-link { padding: 0.7rem 0; font-size: 0.8rem; }
  .btn-prism { margin-top: .6rem; }

  .hero { align-items: flex-end; min-height: 100vh; }
  .hero-person {
    left: 50%; transform: translateX(-50%);
    height: 55%; max-width: 90%;
    opacity: .55;
  }
  .hero-crystal { width: 55vw; right: -8%; opacity: .85; }
  .hero-inner { padding-top: 6rem; padding-bottom: 5rem; }
  .hero-content { text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
}

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
  .hero-person { height: 48%; opacity: .5; }
  .hero-crystal { width: 75vw; right: -20%; bottom: 0; opacity: .7; }
  .hero-title { font-size: 3.6rem; }
  .hero-text { font-size: 0.82rem; }
  .scroll-indicator { display: none; }
}

/* ---------- Founder's Message ---------- */
/* One continuous background behind founder, about and vision & mission */
.shared-bg {
  background: #0b1126 url("../../img/founder-bg.jpg") center top / cover no-repeat;
}
.founder {
  position: relative;
  padding: 7rem 0;
}
.founder-eyebrow {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.founder-eyebrow span {
  width: 30px; height: 2px;
  background: linear-gradient(90deg, #5b7cff, #b583f5);
}
.founder-title {
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 2.2rem;
}
.founder-quote {
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  padding: 1rem 0 1rem 2.4rem;
  margin: 0;
  max-width: 700px;
}
.founder-quote p {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.6rem;
}
.founder-name {
  display: flex; align-items: center; flex-wrap: wrap;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  font-weight: 500;
}
.founder-name .line { width: 64px; height: 1px; background: #fff; margin-right: 1.1rem; }
.founder-name .sep { margin: 0 0.7rem; }
.founder-photo {
  width: 100%;
  aspect-ratio: 4 / 4.7;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

@media (max-width: 991.98px) {
  .founder { padding: 4.5rem 0; }
  .founder-photo { aspect-ratio: 4 / 4.2; object-position: top; }
}
@media (max-width: 575.98px) {
  .founder { padding: 3.5rem 0; }
  .founder-quote { padding-left: 1.2rem; }
  .founder-name .line { width: 36px; margin-right: .7rem; }
}

/* ---------- About Us ---------- */
.about {
  position: relative;
  padding: 4.5rem 0 5rem;
  overflow: hidden;
}
.about-eyebrow { margin-bottom: 2rem; }
.about-title {
  font-weight: 800;
  /* one size for GAMING., STORIES. and POSSIBILITIES.: the longest word fits the text column, so cqw = column width */
  font-size: clamp(2rem, 4.2vw, 4rem);                   /* fallback for browsers without container units */
  font-size: clamp(1.7rem, 10cqw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin: 0;
}
.about-subtitle {
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  letter-spacing: -0.04em;
  margin: 0.3rem 0 0;
}
.about-rule { border-color: rgba(255, 255, 255, .6); opacity: .5; margin: 2rem 0; }
.about-text {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 2rem;
}
.btn-lg-pill { padding: 1.1rem 2.6rem; font-size: 0.78rem; }

.about-media { position: relative; padding-bottom: 5rem; }
.about-main {
  width: 100%;
  aspect-ratio: 1.43 / 1;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.about-small {
  position: absolute;
  left: 6%; bottom: 0;
  width: 42%;
  aspect-ratio: 1 / 1.15;
  object-fit: cover;
  border: 10px solid #1d2a55;
  border-radius: 22px;
  transform: rotate(-7deg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

.about-cards { margin-top: 2.5rem; }
.about-card {
  height: 100%;
  text-align: center;
  padding: 1.8rem 1rem 1.6rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  transition: transform .25s, background .25s;
}
.about-card:hover { transform: translateY(-4px); }
.about-card.active { background: #0a38c8; border-color: #2a55e0; }
.about-card i { font-size: 2rem; line-height: 1; display: block; margin-bottom: .8rem; }
.about-card.active i { color: #fff; }
.about-card h4 {
  font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 .35rem;
}
.about-card p { font-size: 0.85rem; margin: 0; color: rgba(255, 255, 255, .7); }

@media (min-width: 992px) {
  .about-row { position: relative; }
  .about-media-col { padding-top: 0; }
  .about-media { margin-top: 4.5rem; }
  .about-title { margin-top: -1rem; }
}
@media (max-width: 991.98px) {
  .about { padding: 4rem 0; }
  .about-media { max-width: 560px; margin: 0 auto; }
  .about-eyebrow { margin-bottom: 1.2rem; }
}
@media (max-width: 575.98px) {
  .about-media { padding-bottom: 3.5rem; }
  .about-small { border-width: 6px; border-radius: 16px; }
  .btn-lg-pill { width: 100%; text-align: center; }
}

/* ---------- Vision & Mission ---------- */
.vm {
  position: relative;
  padding: 4rem 0 5rem;
}
.vm-title {
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.04em;
  margin: 0 0 2rem;
}
.vm-card {
  height: 100%;
  padding: 1.6rem 2.4rem 2rem;
  background: linear-gradient(135deg, rgba(30, 48, 100, .65), rgba(14, 22, 56, .75));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
  /* (no backdrop blur: it made scrolling choppy) */
}
.vm-card h3 { font-size: 1.3rem; font-weight: 700; margin: 1.1rem 0 .6rem; }
.vm-card p {
  font-size: 0.92rem; line-height: 1.6;
  color: rgba(255, 255, 255, .85);
  margin: 0;
}
.vm-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 55px; height: 55px; border-radius: 50%;
  font-size: 1.5rem; color: #fff;
}
.vm-icon-purple { background: #a05cf5; }
.vm-icon-blue { background: #4a78f5; }

@media (max-width: 991.98px) {
  .vm { padding: 3.5rem 0; }
}
@media (max-width: 575.98px) {
  .vm-card { padding: 1.4rem 1.4rem 1.6rem; }
}

/* ---------- Brands ---------- */
.brands {
  padding: 5rem 0 6rem;
  overflow: hidden;
}
/* One continuous background behind brands, team, awards and testimonials */
.unified-bg {
  background:
    radial-gradient(ellipse 70% 22% at 50% 44%, rgba(14, 50, 170, .55) 0%, transparent 100%),
    radial-gradient(ellipse 60% 14% at 50% 24%, rgba(12, 30, 110, .45) 0%, transparent 100%),
    linear-gradient(180deg, #0b1126 0%, #09123a 22%, #07196a 42%, #081247 62%, #0a1030 82%, #0e1329 100%);
}
.brands-title {
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  letter-spacing: -0.04em;
  margin: 0 0 2.5rem;
}
.deco { position: absolute; pointer-events: none; }

.board-wrap {
  position: relative; height: 100%; min-height: 220px;
  overflow: hidden; /* chips and cards stay inside the board, clipped at its edges */
  border-radius: 12px;
}
.board {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.chip-orange   { width: 17%; top: -3%; left: -1%; transform: rotate(-12deg); }
.card-refund   { width: 15%; top: -2%; right: -1%; transform: rotate(32deg); border-radius: 8px; }
.card-deb      { width: 17%; bottom: -3%; left: -1%; transform: rotate(-32deg); border-radius: 8px; }
.chip-green    { width: 13%; bottom: 2%; right: 4%; }
.chip-gold     { width: 11%; bottom: -4%; right: -2%; filter: blur(2px); opacity: .6; }

.brand-card {
  position: relative;
  height: 100%;
  padding: 3rem 2.8rem;
  display: flex; flex-direction: column; justify-content: center;
  background: #090a66 url("../../img/brand-card-bg.png") center / cover no-repeat;
  border-radius: 12px;
}
.brand-name {
  font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  letter-spacing: -0.04em;
  margin: 0.4rem 0 1.8rem;
}
.brand-tag { font-weight: 600; font-size: 0.95rem; margin-bottom: .3rem; }
.brand-text { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,.88); margin-bottom: 1.8rem; }
.brand-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-outline-prism {
  border: 1px solid #fff; color: #fff;
  border-radius: 50rem;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.85rem 1.8rem;
}
.btn-outline-prism:hover { background: #fff; color: #0a1030; }
.bc-chip { width: 90px; top: 12%; right: 6%; transform: rotate(-8deg); z-index: 1; }
.bc-chip-back { width: 70px; top: 4%; right: 8%; filter: blur(3px); opacity: .8; }

@media (max-width: 991.98px) {
  .brands { padding: 3.5rem 0 4rem; }
  .board { height: auto; aspect-ratio: 1.63 / 1; }
  .brand-card { padding: 2.4rem 2rem; }
  .bc-chip { width: 80px; }
  .bc-chip-back { width: 60px; }
}
@media (max-width: 575.98px) {
  .brand-card { padding: 7rem 1.4rem 2rem; justify-content: flex-start; }
  .bc-chip { right: 8%; top: 1.5rem; }
  .bc-chip-back { top: 1rem; }
  .brand-actions .btn { width: 100%; text-align: center; }
  .chip-gold { display: none; }
}

/* ---------- Team ---------- */
.team {
  padding: 4.5rem 0 5rem;
}
.team-title {
  font-weight: 700;
  font-size: 4.2rem;
  letter-spacing: -0.04em;
  margin: 0 0 2rem;
}
.team-track {
  --team-gap: 1.1rem;
  /* slider: cards sit in one row and scroll sideways (arrows, swipe, trackpad or the auto-advance) */
  display: flex; flex-wrap: nowrap; justify-content: flex-start;
  gap: var(--team-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 1.5rem .2rem 1.8rem; margin: -1.5rem -.2rem -1.8rem;   /* room for the card glow, which the scroller would otherwise clip */
}
.team-track::-webkit-scrollbar { display: none; }
.team-card { flex: 0 0 calc((100% - 3 * var(--team-gap)) / 4); min-width: 0; scroll-snap-align: start; }   /* desktop: four cards in view */
.team-card {
  background: rgba(8, 20, 70, .85);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: .45rem .45rem 1.3rem;
}
.team-photo { overflow: hidden; border-radius: 6px; }
/* placeholder portrait (until a real photo is added): same proportions as the photos */
.team-initials {
  width: 100%; aspect-ratio: 1 / 1.2;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, rgba(120, 150, 255, .5), rgba(30, 48, 130, .85) 70%), #0b1650;
  transition: transform .5s ease;
}
.team-initials span { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em; color: rgba(255, 255, 255, .9); }
.team-card:hover .team-initials { transform: scale(1.06); }
.team-card img {
  width: 100%;
  aspect-ratio: 1 / 1.2;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform .5s ease;
}
.team-card:hover img { transform: scale(1.06); }
.team-card h3 { font-size: 1.05rem; font-weight: 700; margin: 1.1rem 0 .25rem 1rem; }
.team-card p { font-size: .85rem; margin: 0 0 0 1rem; color: rgba(255, 255, 255, .8); }

.team-progress {
  width: min(410px, 70%);
  height: 3px;
  margin: 2rem auto 0;
  background: rgba(255, 255, 255, .15);
  border-radius: 3px;
  overflow: hidden;
}
.team-progress span {
  display: block; height: 100%; width: 50%;
  background: linear-gradient(90deg, #5b7cff, #b583f5);
  transition: margin-left .15s;
}

/* Tablet and below */
@media (max-width: 991.98px) {
  .team { padding: 3.5rem 0 4rem; }
}

/* ---------- Awards ---------- */
.awards {
  padding: 4.5rem 0 5.5rem;
}
.awards-title {
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  letter-spacing: -0.04em;
  margin: 0 0 2rem;
}
.award-card {
  position: relative;
  height: 100%;
  min-height: 290px;
  padding: 2rem 2.6rem 2.2rem;
  background: linear-gradient(135deg, rgba(30, 48, 100, .6), rgba(10, 16, 44, .8));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
}
.award-card h3 { font-size: 1.6rem; font-weight: 700; margin: 1.4rem 0 .8rem; }
.award-card p {
  font-size: .92rem; line-height: 1.7;
  color: rgba(255, 255, 255, .85);
  margin: 0; max-width: 340px;
}
.award-card .vm-icon i { font-size: 1.4rem; }
.award-cert {
  position: absolute;
  top: 12px; right: 16px;
  width: 40%; max-width: 220px;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}

@media (max-width: 991.98px) {
  .awards { padding: 3.5rem 0 4rem; }
  .award-card p { max-width: 55%; }
}
@media (max-width: 575.98px) {
  .award-card { padding: 1.4rem 1.4rem 1.8rem; }
  .award-cert { position: static; display: block; width: 100%; max-width: none; margin-bottom: 1.2rem; }
  .award-card p { max-width: none; }
}

/* ---------- Testimonials ---------- */
.testimonials {
  padding: 3.5rem 0 0;
}
.testi-title {
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  letter-spacing: -0.04em;
  margin: 0 0 2rem;
}
.testi-main {
  height: 100%;
  padding: 3rem 4rem 2.6rem;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 88px 88px,
    radial-gradient(ellipse at 15% 20%, #0c3fe0 0%, transparent 55%),
    radial-gradient(ellipse at 60% 105%, #0c3fe0 0%, transparent 50%),
    #0a2a9c;
}
.testi-quote-mark {
  display: block;
  font-size: 7rem; font-weight: 800; line-height: .8;
  height: 3.6rem;
  color: #f5a03c;
}
.testi-text {
  font-size: clamp(1.3rem, 2.3vw, 1.9rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 1.4rem 0 2.2rem;
}
.testi-author { display: flex; align-items: center; gap: 1rem; }
.testi-author img {
  width: 58px; height: 58px; border-radius: 50%;
  object-fit: cover; object-position: top;
  border: 2px solid #fff; background: #fff;
}
.testi-author h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.testi-author p { font-size: .85rem; margin: 0; color: rgba(255,255,255,.8); }

.press-list {
  height: 100%;
  padding: .9rem;
  background: #232c50;
  border-radius: 8px;
  display: flex; flex-direction: column; gap: .8rem;
}
.press-item {
  flex: 1;
  display: flex; align-items: center; gap: 1.6rem;
  padding: .8rem 1.4rem;
  background: #0b1550;
  border-radius: 6px;
}
.press-num {
  flex: 0 0 4.2rem;
  font-size: 5rem; font-weight: 300; line-height: 1;
  color: #6b7aa6;
  letter-spacing: -0.04em;
}
.press-item h4 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .4rem; }
.press-item p { font-size: 1rem; line-height: 1.5; margin: 0; color: rgba(255,255,255,.65); max-width: 280px; }

@media (max-width: 991.98px) {
  .testimonials { padding: 3rem 0 0; }
  .testi-main { padding: 2.4rem 2rem 2.2rem; }
}
@media (max-width: 575.98px) {
  .testi-main { padding: 2rem 1.4rem; }
  .testi-quote-mark { font-size: 5.5rem; height: 2.8rem; }
  .press-item { gap: 1rem; padding: .9rem 1rem; }
  .press-num { flex-basis: 3rem; font-size: 3.4rem; }
}

/* ---------- Journey ---------- */
.journey {
  position: relative;
  z-index: 2;
  padding: 0.5rem 0 0;
  background:
    linear-gradient(180deg, #0e1329 0%, #0e1329 25%, rgba(14,19,41,.6) 100%),
    #0e1329 url("../../img/hero-bg.jpg") center bottom / cover no-repeat;
}
.journey-box {
  position: relative;
  transform: translateY(50%); /* lower half sits inside the footer */
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  max-width: none; /* same full-container width as the brands section */
  margin: 0 auto;
  padding: 3.2rem 1.5rem 2.2rem;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 0% 0%, #3f64d8 0%, transparent 45%),
    radial-gradient(ellipse at 100% 0%, #3258c8 0%, transparent 40%),
    radial-gradient(ellipse at 50% 115%, #3a5cc8 0%, transparent 50%),
    #0a1450;
}
.journey-title {
  font-weight: 700;
  font-size: clamp(2rem, 4.8vw, 5.4rem);
  letter-spacing: -0.045em;
  margin: .3rem 0 .4rem;
}
.journey-sub { font-size: 1rem; margin-bottom: 1.8rem; }
.journey-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
}
.journey-actions .btn { padding: 1.05rem 2.6rem; font-size: .72rem; }
.journey-note { font-size: .72rem; color: rgba(255,255,255,.8); margin: 1.6rem 0 0; }

@media (max-width: 991.98px) {
  .journey-actions .btn { padding: 1rem 1.8rem; }
}
@media (max-width: 575.98px) {
  .journey-box { padding: 2.4rem 1.1rem 1.8rem; border-radius: 16px; }
  .journey-actions { flex-direction: column; }
  .journey-actions .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer {
  --footer-logo-w: 300px;               /* keep in step with .footer-logo width */
  position: relative;
  /* half of the journey box (set by main.js) + normal top spacing */
  padding-top: calc(var(--journey-half, 8.5rem) + 3rem);
  background: #1c2550 url("../../img/founder-bg.jpg") center / cover no-repeat;
  overflow: hidden;
}
.footer-logo {
  /*width: 230px; max-width: 100%;*/
  width: 300px; max-width: 100%;
  aspect-ratio: 1 / .75;
  object-fit: cover; object-position: center 40%;
  mix-blend-mode: screen;
  display: block;
}
.footer-head {
  font-size: .95rem; font-weight: 500;
  letter-spacing: .02em; text-transform: uppercase;
  margin-bottom: .9rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a {
  color: #fff; text-decoration: none;
  font-size: 1.4rem; font-weight: 600;
}
.footer-links a:hover, .footer-legal a:hover { color: #a9b8ff; }
.footer-cta { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: .6rem; }
.footer-contact {
  display: block;
  color: rgba(255,255,255,.65);
  font-size: 1.1rem; margin-bottom: .3rem;
}
a.footer-contact[href^="mailto"] { text-decoration: underline; }

.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  padding: 0;
  /*font-size: .7rem;*/
  font-size: 1rem;
}

@media (min-width: 992px) {
  /* copyright starts under the logo; the legal links start under "Ready to start?" (same grid columns as the footer top) */
  .footer-bottom > span:first-child { margin-left: calc((100% + 1.5rem) / 12); }   /* same left edge as the logo column */
  .footer-legal { width: calc((100% + 1.5rem) / 4 - 1.5rem); }
}
/* the logo picture has a little empty space on its left; indent the text to meet the visible logo */
.footer-bottom > span:first-child { margin-left: 0; }
.footer-legal { --legal-mr: 11rem; margin-right: var(--legal-mr); }
.footer-legal a { color: #fff; text-decoration: none; }
.footer-legal i { font-style: normal; margin: 0 .7rem; }

.footer-watermark {
  font-weight: 800;
  font-size: clamp(1.4rem, 10.6vw, 14rem);   /* fallback; the script below fits it exactly to the screen width */
  line-height: .85;
  letter-spacing: -0.05em;
  text-align: center;
  white-space: nowrap;
  margin: 2.5rem 0 -0.12em;
  color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 95%);
  -webkit-background-clip: text; background-clip: text;
  user-select: none;
}

@media (max-width: 991.98px) {
  .site-footer { --footer-logo-w: 180px; }
  .footer-logo { width: 180px; }
  .footer-bottom { margin-top: 2.5rem; }
}
@media (max-width: 575.98px) {
  .site-footer { padding-top: calc(var(--journey-half, 11rem) + 2.2rem); }
  .site-footer { --footer-logo-w: 150px; }
  .footer-logo { width: 150px; }
  .footer-cta { font-size: 1.6rem; }
  .footer-bottom { flex-direction: column; }
}

/* ---------- Founder portrait: gentle violet light along the edge ---------- */
@property --edge-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.founder-photo-wrap { position: relative; border-radius: 14px; }
.founder-photo-wrap::before { /* light travelling slowly around the edge */
  content: "";
  position: absolute; inset: -2px;
  border-radius: 16px;
  padding: 2px;
  background: conic-gradient(from var(--edge-angle),
    rgba(167, 108, 255, 0) 0deg,
    rgba(167, 108, 255, .9) 50deg,
    rgba(200, 160, 255, 0) 110deg,
    rgba(167, 108, 255, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: edge-spin 9s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.founder-photo-wrap::after { /* soft violet halo that breathes */
  content: "";
  position: absolute; inset: 0;
  border-radius: 14px;
  box-shadow: 0 0 40px 2px rgba(150, 90, 255, .28);
  animation: edge-glow 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes edge-spin { to { --edge-angle: 360deg; } }
@keyframes edge-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .founder-photo-wrap::before, .founder-photo-wrap::after { animation: none; }
}

/* ---------- Brands: board game -> app transition ---------- */
.omt-stage { position: relative; height: 100%; }
.omt-stage .board-wrap { transform-origin: 30% 50%; will-change: transform; }

.omt-phone {
  position: absolute; z-index: 3;
  right: 5%; bottom: -7%;
  width: 25%; min-width: 96px;
  aspect-ratio: 9 / 18.5;
  padding: 5px;
  border-radius: 24px;
  background: linear-gradient(160deg, #2a3570, #0a1030);
  box-shadow: 0 0 0 1px rgba(170,190,255,.45), 0 18px 50px rgba(0,0,0,.55), 0 0 40px rgba(90,120,255,.35);
  opacity: 0; transform: translateX(45%) rotate(4deg);
}
.omt-screen { position: relative; width: 100%; height: 100%; border-radius: 19px; overflow: hidden; background: #0a2a6a; }
.omt-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(2.7); }
.omt-screen::before { /* notch */
  content: ""; position: absolute; z-index: 2; top: 5px; left: 50%;
  width: 30%; height: 4px; margin-left: -15%; border-radius: 4px; background: #05081c;
}
.omt-screen::after { /* screen glow sweep */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 30%, rgba(160,190,255,.35) 50%, transparent 70%);
  transform: translateY(-100%);
}
.omt-spark { /* light carrying the board's energy over to the phone */
  position: absolute; z-index: 2; left: 38%; top: 46%;
  width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(140,170,255,.55) 40%, transparent 70%);
  filter: blur(2px); opacity: 0; pointer-events: none;
}

/* the logo, cropped from the real game board */
.omt-logo {
  display: block; width: 138px; height: 66px; margin-bottom: 1.2rem;
  border-radius: 10px;
  background: #0a3d9e url("../../img/board.png") -344px -218px / 826px auto no-repeat;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.brands-closing {
  text-align: center; margin: 2.6rem 0 0;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em;
  color: rgba(255,255,255,.92);
}

/* gentle floating of the game pieces (always on) */
.chip-orange { animation: omt-float 6s ease-in-out infinite; }
.card-refund { animation: omt-float 7s ease-in-out -2s infinite; }
.card-deb    { animation: omt-float 8s ease-in-out -4s infinite; }
.chip-green  { animation: omt-float 6.5s ease-in-out -1s infinite; }
@keyframes omt-float { 50% { translate: 0 -6px; } }

/* 10-second loop, started when the section scrolls into view */
.omt-stage.is-armed.in-view .board-wrap { animation: omt-board 10s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-phone { animation: omt-phone 10s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-screen::after { animation: omt-screen-glow 10s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-spark { animation: omt-spark 10s ease-in-out infinite; }

@keyframes omt-board {
  0%, 36%   { transform: none; filter: none; }
  50%, 84%  { transform: translateX(-9%) scale(.86); filter: brightness(.8); }
  96%, 100% { transform: none; filter: none; }
}
@keyframes omt-phone {
  0%, 38%   { opacity: 0; transform: translateX(45%) rotate(4deg); }
  52%, 84%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateX(45%) rotate(4deg); }
}
@keyframes omt-screen-glow {
  0%, 52%   { transform: translateY(-100%); }
  70%       { transform: translateY(100%); }
  100%      { transform: translateY(100%); }
}
@keyframes omt-spark {
  0%, 36% { opacity: 0; left: 38%; transform: scale(.5); }
  44%     { opacity: 1; transform: scale(1); }
  54%     { opacity: 0; left: 78%; transform: scale(.6); }
  100%    { opacity: 0; left: 78%; }
}

@media (max-width: 991.98px) {
  .omt-phone { width: 24%; right: 4%; bottom: -5%; }
}
@media (max-width: 575.98px) {
  .omt-phone { width: 30%; bottom: -8%; border-radius: 18px; padding: 4px; }
  .omt-screen { border-radius: 14px; }
  .omt-stage { padding-bottom: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .chip-orange, .card-refund, .card-deb, .chip-green { animation: none; }
  .omt-stage.is-armed .board-wrap { transform: none; }
  .omt-stage.is-armed .omt-phone { opacity: 1; transform: none; animation: none !important; }
  .omt-stage.is-armed.in-view * { animation: none !important; }
}

/* ---------- Brands: bolder board -> app transition ---------- */
.omt-stage { perspective: 1500px; isolation: isolate; }
.omt-stage::before { /* aura behind the whole stage */
  content: ""; position: absolute; z-index: -1; inset: -10% -6%;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(74,120,255,.5), transparent 60%),
    radial-gradient(ellipse at 85% 60%, rgba(167,108,255,.45), transparent 55%);
  filter: blur(36px); opacity: .45;
}

/* shockwave ring + pieces flying from the board into the phone */
.omt-ring {
  position: absolute; z-index: 2; left: 40%; top: 50%;
  width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%;
  border: 2px solid rgba(190,205,255,.9);
  box-shadow: 0 0 30px rgba(120,150,255,.8), inset 0 0 30px rgba(120,150,255,.5);
  opacity: 0; pointer-events: none;
}
.omt-fly { position: absolute; z-index: 4; opacity: 0; pointer-events: none; width: 11%; }
.omt-fly.f1 { --x0: 6%;  --y0: 62%; }
.omt-fly.f2 { --x0: 52%; --y0: 18%; width: 9%; }
.omt-fly.f3 { --x0: 18%; --y0: 4%;  width: 10%; border-radius: 6px; }
.omt-fly.f4 { --x0: 40%; --y0: 66%; width: 9%; }

/* live app UI on the phone screen */
.omt-ui {
  position: absolute; inset: 0; z-index: 1; opacity: 0;
  background: linear-gradient(180deg, rgba(6,14,60,.88), rgba(8,30,110,.72));
  display: flex; flex-direction: column; align-items: center; padding: 16% 8% 8%;
}
.omt-pill {
  font-size: clamp(.5rem, .9vw, .8rem); font-weight: 700; color: #7dffb0;
  background: rgba(40,200,120,.18); border: 1px solid rgba(125,255,176,.5);
  padding: .15em .7em; border-radius: 50rem;
}
.omt-candles {
  position: absolute; left: 10%; right: 10%; bottom: 12%; height: 45%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 4%;
}
.omt-candles i {
  flex: 1; height: 100%; border-radius: 2px;
  background: linear-gradient(180deg, #7dffb0, #1fbf74);
  transform-origin: bottom; transform: scaleY(.25);
}
.omt-candles i:nth-child(even) { background: linear-gradient(180deg, #ff9a8a, #e24a3a); }
.omt-line { position: absolute; left: 10%; bottom: 14%; height: 45%; width: 80%; overflow: visible; }
.omt-line polyline {
  fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px #fff);
}

/* ---- timeline (10s loop, started in view) ---- */
.omt-stage.is-armed.in-view::before { animation: omt-aura 10s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-ring { animation: omt-ring 10s ease-out infinite; }
.omt-stage.is-armed.in-view .omt-fly { animation: omt-fly 10s ease-in infinite; }
.omt-stage.is-armed.in-view .omt-fly.f2 { animation-delay: .18s; }
.omt-stage.is-armed.in-view .omt-fly.f3 { animation-delay: .36s; }
.omt-stage.is-armed.in-view .omt-fly.f4 { animation-delay: .54s; }
.omt-stage.is-armed.in-view .omt-ui { animation: omt-ui 10s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-candles i { animation: omt-candle 10s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-candles i:nth-child(2) { animation-delay: .1s; }
.omt-stage.is-armed.in-view .omt-candles i:nth-child(3) { animation-delay: .2s; }
.omt-stage.is-armed.in-view .omt-candles i:nth-child(4) { animation-delay: .3s; }
.omt-stage.is-armed.in-view .omt-candles i:nth-child(5) { animation-delay: .4s; }
.omt-stage.is-armed.in-view .omt-candles i:nth-child(6) { animation-delay: .5s; }
.omt-stage.is-armed.in-view .omt-candles i:nth-child(7) { animation-delay: .6s; }
.omt-stage.is-armed.in-view .omt-line polyline { animation: omt-draw 10s ease-in-out infinite; }
.omt-stage.is-armed.in-view .board-wrap { animation: omt-board3d 10s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-phone { animation: omt-phone3d 10s ease-in-out infinite; }

@keyframes omt-aura { 0%, 34%, 94%, 100% { opacity: .45; } 50%, 80% { opacity: 1; } }
@keyframes omt-ring {
  0%, 34% { opacity: 0; transform: scale(.2); }
  37%     { opacity: 1; }
  52%, 100% { opacity: 0; transform: scale(4.5); }
}
@keyframes omt-fly {
  0%, 34% { left: var(--x0); top: var(--y0); opacity: 0; transform: scale(1) rotate(0deg); }
  38%     { opacity: 1; }
  54%     { left: 80%; top: 52%; opacity: 1; transform: scale(.3) rotate(260deg); }
  58%, 100% { left: 80%; top: 52%; opacity: 0; transform: scale(.05) rotate(300deg); }
}
@keyframes omt-ui { 0%, 52% { opacity: 0; } 58%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes omt-candle {
  0%, 54% { transform: scaleY(.2); }
  62% { transform: scaleY(.9); } 68% { transform: scaleY(.45); }
  74% { transform: scaleY(1); } 80% { transform: scaleY(.6); }
  90%, 100% { transform: scaleY(.2); }
}
@keyframes omt-draw { 0%, 56% { stroke-dashoffset: 1; } 74%, 84% { stroke-dashoffset: 0; } 92%, 100% { stroke-dashoffset: 1; } }
@keyframes omt-board3d {
  0%, 34% { transform: none; filter: none; }
  50%, 84% { transform: translateX(-10%) scale(.84) rotateY(16deg); filter: brightness(.75); }
  96%, 100% { transform: none; filter: none; }
}
@keyframes omt-phone3d {
  0%, 36% { opacity: 0; transform: translateX(50%) rotateY(-28deg) rotate(4deg); }
  54% { opacity: 1; transform: translateY(-4px) scale(1.04); }
  60%, 84% { opacity: 1; transform: none; box-shadow: 0 0 0 1px rgba(170,190,255,.6), 0 18px 50px rgba(0,0,0,.55), 0 0 70px rgba(110,140,255,.65); }
  94%, 100% { opacity: 0; transform: translateX(50%) rotateY(-28deg) rotate(4deg); }
}

/* the flagship card: floating chips + a shine sweeping over the main button */
.bc-chip { animation: omt-bob 5s ease-in-out infinite; }
.bc-chip-back { animation: omt-bob 6s ease-in-out -2s infinite; }
@keyframes omt-bob { 50% { translate: 0 -8px; } }
.brand-actions .btn-prism { position: relative; overflow: hidden; }
.brand-actions .btn-prism::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: omt-shine 4.5s ease-in-out 1s infinite;
}
@keyframes omt-shine { 0%, 55% { transform: translateX(-160%) skewX(-18deg); } 85%, 100% { transform: translateX(380%) skewX(-18deg); } }

@media (max-width: 575.98px) {
  .omt-fly { width: 14%; }
  .omt-ring { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-chip, .bc-chip-back, .brand-actions .btn-prism::after { animation: none; }
  .omt-fly, .omt-ring { display: none; }
  .omt-ui { opacity: 1; }
  .omt-candles i { transform: scaleY(.6); }
  .omt-line polyline { stroke-dashoffset: 0; }
}

/* =====================================================================
   WOW LAYER – every section
   (all motion is switched off for prefers-reduced-motion; the scripts
   only add these classes when motion is allowed)
   ===================================================================== */

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 2000;
  width: 100%; height: 3px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #5ef0ff, #9a7bff, #ff7be0);
  box-shadow: 0 0 12px rgba(154, 123, 255, .8);
  pointer-events: none;
}

/* ---------- generic scroll reveals ---------- */
body .rv {
  opacity: 0; translate: 0 38px;
  transition: opacity .95s ease var(--rv-d, 0s),
              translate 1s cubic-bezier(.2, .75, .2, 1) var(--rv-d, 0s),
              scale 1s cubic-bezier(.2, .75, .2, 1) var(--rv-d, 0s),
              filter .95s ease var(--rv-d, 0s);
}
body .rv-left   { translate: -60px 0; }
body .rv-right  { translate: 60px 0; }
body .rv-scale  { translate: 0 20px; scale: .9; }
body .rv-title  { translate: 0 30px; filter: blur(12px); }
body .rv-card3d { translate: 0 60px; scale: .9; filter: blur(4px); }
body .rv.rv-in  { opacity: 1; translate: 0 0; scale: 1; filter: none; }

/* ---------- Testimonial slider ---------- */
.testi-slides { display: grid; }
.testi-slide {
  grid-area: 1 / 1; margin: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.testi-slide.is-active { opacity: 1; visibility: visible; }
.testi-initials {
  flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, #5b7cff, #b583f5);
  border: 2px solid #fff;
}
.testi-controls { display: flex; align-items: center; gap: 1rem; margin-top: 1.8rem; }
.testi-nav {
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .4);
  transition: background .25s, color .25s, transform .25s;
}
.testi-nav:hover { background: #fff; color: #0a2a9c; transform: scale(1.08); }
.testi-dots { display: flex; align-items: center; gap: .5rem; }
.testi-dots button {
  position: relative; overflow: hidden;
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 9px;
  background: rgba(255, 255, 255, .35); cursor: pointer;
  transition: width .35s ease, background .3s;
}
.testi-dots button.is-active { width: 34px; }
.testi-dots button::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  transform: scaleX(0); transform-origin: left;
}
.testi-dots button.is-active::after { transform: scaleX(1); }
#testiSlider.is-playing .testi-dots button.is-active::after { animation: testi-fill var(--testi-ms, 6500ms) linear forwards; }
@keyframes testi-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .testi-slide, .testi-nav, .testi-dots button { transition: none; }
  #testiSlider.is-playing .testi-dots button.is-active::after { animation: none; }
}

/* ---------- 1. HERO ---------- */
.hero-a { animation: hero-a-in 1.2s cubic-bezier(.2, .7, .2, 1) var(--hd, 0s) backwards; }
@keyframes hero-a-in { from { opacity: 0; translate: 0 28px; filter: blur(8px); } }
.hero-person.hero-a, .hero-crystal.hero-a { animation-name: hero-img-in; animation-duration: 1.6s; }
@keyframes hero-img-in { from { opacity: 0; scale: 1.07; } }
.hero-crystal.hero-a {
  animation: hero-img-in 1.6s ease-out var(--hd, 0s) backwards, crystal-float 8s ease-in-out 1.8s infinite;
}
@keyframes crystal-float {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.035); filter: brightness(1.3) saturate(1.25); }   /* breathes around the prism, so the light stays attached to it */
}
.hero-person  { translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -8px); transition: translate .5s ease-out; }
.hero-crystal { transform-origin: 60% 41%; }   /* no mouse-parallax on the crystal: the light is anchored to its prism */
.hero-title .gradient-text { background-size: 260% 100%; animation: grad-flow 5s ease-in-out infinite alternate; }

.hero-rays {
  position: absolute; z-index: -1; right: -12%; bottom: -34%;
  width: clamp(460px, 62vw, 920px); aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(150, 170, 255, 0) 0deg 8deg, rgba(150, 170, 255, .26) 11deg, rgba(200, 140, 255, 0) 15deg 26deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 66%);
          mask-image: radial-gradient(circle, #000 0%, transparent 66%);
  mix-blend-mode: screen; pointer-events: none;
  animation: hero-spin 46s linear infinite;
}
@keyframes hero-spin { to { transform: rotate(360deg); } }
.hero-particles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-particles span {
  position: absolute; bottom: -10px; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 8px 1px rgba(159, 176, 255, .9);
  animation: p-rise var(--dur, 12s) linear var(--dl, 0s) infinite;
}
@keyframes p-rise {
  0%   { opacity: 0; translate: 0 0; }
  10%  { opacity: .9; }
  90%  { opacity: .5; }
  100% { opacity: 0; translate: var(--dx, 0) -105vh; }
}

/* ---------- 2. FOUNDER ---------- */
.founder-quote { position: relative; border-left-color: transparent; }
.founder-quote::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, #5ef0ff, #9a7bff, rgba(255, 123, 224, 0));
  box-shadow: 0 0 14px rgba(154, 123, 255, .8);
}
.founder-quote.fx-arm::before { transform: scaleY(0); transform-origin: top; transition: transform 1.6s cubic-bezier(.3, .7, .2, 1) .3s; }
.founder-quote.fx-arm.fx-in::before { transform: scaleY(1); }
.founder-quote.fx-arm .founder-name .line { transform: scaleX(0); transform-origin: left; transition: transform 1s ease 1.6s; }
.founder-quote.fx-arm.fx-in .founder-name .line { transform: scaleX(1); }
.founder-photo-wrap { position: relative; transform: translateY(calc(var(--par, 0) * 1px)); will-change: transform; }   /* transform = no layout work while scrolling */

/* word-by-word reveal (used by the founder quote and the testimonial) */
.w {
  display: inline-block; opacity: 0; translate: 0 .55em; filter: blur(7px);
  transition: opacity .7s ease calc(var(--i) * 38ms), translate .8s cubic-bezier(.2, .75, .2, 1) calc(var(--i) * 38ms),
              filter .7s ease calc(var(--i) * 38ms);
}
.words-in .w { opacity: 1; translate: 0 0; filter: none; }

/* ---------- 4. TEAM ---------- */
.team-track { perspective: 1200px; }
.team-card { position: relative; overflow: hidden; transition: transform .25s ease-out, box-shadow .35s; will-change: transform; }
.team-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .18), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.team-card:hover { box-shadow: 0 22px 50px rgba(40, 70, 220, .45); }
.team-card:hover::after { opacity: 1; }
.team-card h3 { transition: translate .3s ease; }
.team-card:hover h3 { translate: 6px 0; }

/* ---------- 5. AWARDS ---------- */
.award-card .vm-icon { position: relative; animation: trophy-bob 3.4s ease-in-out infinite; }
.award-card .vm-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(170, 150, 255, .7); animation: trophy-ring 2.8s ease-out infinite;
}
.award-card:nth-child(2) .vm-icon, .col-xl-5 + .col-xl-5 .award-card .vm-icon { animation-delay: .6s; }
@keyframes trophy-bob { 50% { translate: 0 -5px; } }
@keyframes trophy-ring { 0% { box-shadow: 0 0 0 0 rgba(170, 150, 255, .7); } 100% { box-shadow: 0 0 0 24px rgba(170, 150, 255, 0); } }
.award-cert { animation: cert-float 6s ease-in-out infinite; transition: scale .4s ease; }
.award-card:hover .award-cert { scale: 1.08; }
@keyframes cert-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -6px; rotate: 1.2deg; } }
.award-card { transition: box-shadow .4s, border-color .4s; }
.award-card:hover { box-shadow: 0 0 40px rgba(110, 140, 255, .3); border-color: rgba(170, 190, 255, .4); }
.spark {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; z-index: 5; pointer-events: none;
  box-shadow: 0 0 8px currentColor; animation: spark-fly 1.3s ease-out forwards;
}
@keyframes spark-fly { from { opacity: 1; translate: 0 0; scale: 1; } to { opacity: 0; translate: var(--dx) var(--dy); scale: .2; } }

/* ---------- 6. TESTIMONIALS ---------- */
.testi-main { position: relative; overflow: hidden; animation: grid-drift 14s linear infinite; }
.testi-main > * { position: relative; z-index: 1; }
.testi-main::before { /* drifting glow */
  content: ""; position: absolute; z-index: 0; width: 70%; aspect-ratio: 1; left: -10%; top: -20%;
  background: radial-gradient(circle, rgba(90, 140, 255, .55), transparent 65%);
  filter: blur(30px); animation: orb-drift 11s ease-in-out infinite alternate;
}
@keyframes grid-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 88px 88px, 88px 88px, 0 0, 0 0; }
}
@keyframes orb-drift { to { translate: 70% 60%; } }
.testi-quote-mark { animation: quote-pop 4.5s ease-in-out infinite; transform-origin: 20% 80%; }
@keyframes quote-pop { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(-5deg); text-shadow: 0 0 30px rgba(245, 160, 60, .7); } }
.testi-author img { animation: avatar-ring 3s ease-out infinite; }
@keyframes avatar-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
.press-item { animation: press-glow 9s ease-in-out infinite; }
.press-item:nth-child(2) { animation-delay: 3s; }
.press-item:nth-child(3) { animation-delay: 6s; }
.press-item .press-num { animation: press-num 9s ease-in-out infinite; }
.press-item:nth-child(2) .press-num { animation-delay: 3s; }
.press-item:nth-child(3) .press-num { animation-delay: 6s; }
@keyframes press-glow {
  0%, 28%, 100% { background: #0b1550; box-shadow: none; }
  8%, 20% { background: #14258f; box-shadow: 0 0 30px rgba(80, 110, 255, .5); }
}
@keyframes press-num { 0%, 28%, 100% { color: #6b7aa6; } 8%, 20% { color: #fff; text-shadow: 0 0 22px rgba(160, 190, 255, .9); } }

/* ---------- 7. JOURNEY ---------- */
.journey-box { overflow: hidden; animation: j-float 6s ease-in-out infinite; }
.journey-box > * { position: relative; z-index: 1; }
.journey-box::before { /* slowly turning aurora */
  content: ""; position: absolute; z-index: 0; inset: -70%;
  background: conic-gradient(from 0deg, transparent 0 52%, rgba(110, 150, 255, .4) 68%, rgba(200, 120, 255, .4) 84%, transparent 100%);
  animation: hero-spin 16s linear infinite; pointer-events: none;
}
@keyframes j-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.journey-title .gradient-text { background-size: 260% 100%; animation: grad-flow 4s ease-in-out infinite alternate; }
.journey-actions .btn-prism { animation: btn-pulse 2.6s ease-out infinite; }
@keyframes btn-pulse { 0% { box-shadow: 0 0 0 0 rgba(120, 140, 255, .65); } 100% { box-shadow: 0 0 0 20px rgba(120, 140, 255, 0); } }

/* ---------- 8. FOOTER ---------- */
.footer-logo { animation: logo-float 7s ease-in-out infinite; }

/* spectrum rays converging into the prism logo */
.footer-logo-wrap { position: relative; display: block; width: fit-content; max-width: 100%; }
.footer-rays {
  position: absolute; z-index: 2; left: 52%; top: 36%;
  width: 190%; aspect-ratio: 1; transform: translate(-50%, -50%);
  overflow: visible; pointer-events: none; mix-blend-mode: screen;
}
.footer-rays .ray-base { stroke-width: 1.2; opacity: .35; }
.footer-rays .ray-comet {
  stroke-width: 3.2; stroke-linecap: round;
  stroke-dasharray: .16 2; stroke-dashoffset: .16; opacity: 0;
  filter: drop-shadow(0 0 5px currentColor);
}
.footer-rays .ray-core { fill: #fff; opacity: 0; filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 24px #9fb0ff); }
.footer-rays .ray-ring { fill: none; stroke: #fff; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

.footer-logo-wrap.in-view .ray-comet { animation: ray-in 6s cubic-bezier(.5, .05, .6, 1) var(--rd, 0s) infinite; }
.footer-logo-wrap.in-view .ray-core  { animation: ray-core 6s ease-in-out infinite; }
.footer-logo-wrap.in-view .ray-ring  { animation: ray-ring 6s ease-out infinite; }
.footer-logo-wrap.in-view .footer-logo { animation: logo-float 7s ease-in-out infinite, logo-absorb 6s ease-in-out infinite; }
@keyframes ray-in {
  0%   { stroke-dashoffset: .16; opacity: 0; }
  8%   { opacity: 1; }
  52%  { stroke-dashoffset: -1; opacity: 1; }
  56%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes ray-core {
  0%, 44%, 100% { opacity: 0; transform: scale(.4); }
  56% { opacity: 1; }
  66% { opacity: 0; }
}
@keyframes ray-ring {
  0%, 52% { opacity: 0; transform: scale(1); }
  55% { opacity: .9; }
  80%, 100% { opacity: 0; transform: scale(12); }
}
@keyframes logo-absorb {
  0%, 46%, 100% { filter: brightness(1); }
  58% { filter: brightness(1.55) saturate(1.3) drop-shadow(0 0 18px rgba(170, 150, 255, .9)); }
}
@keyframes logo-float { 50% { translate: 0 -8px; } }
.footer-links a { display: inline-block; transition: translate .25s ease, color .25s; }
.footer-links a:hover { translate: 8px 0; }
.footer-watermark {
  background:
    linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 95%);
  -webkit-background-clip: text; background-clip: text;
  animation: wm-shine 6s ease-in-out 1.2s infinite;
}
@keyframes wm-shine { 0% { background-position: -150% 0, 0 0; } 55%, 100% { background-position: 250% 0, 0 0; } }

@media (max-width: 991.98px) {
  body .rv-left, body .rv-right { translate: 0 38px; }       /* no sideways slide on small screens */
  .hero-rays { right: -30%; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .hero-rays, .hero-particles { display: none; }
  .testi-main, .journey-box, .footer-logo, .footer-watermark { animation: none; }
  .footer-logo-wrap.in-view .footer-logo, .footer-logo-wrap.in-view .ray-comet,
  .footer-logo-wrap.in-view .ray-core, .footer-logo-wrap.in-view .ray-ring { animation: none; }
  .award-card .vm-icon, .award-card .vm-icon::after, .award-cert, .press-item, .press-item .press-num,
  .testi-quote-mark, .testi-author img, .journey-actions .btn-prism { animation: none; }
}

/* gradient that slowly flows through highlighted words (hero, journey) */
@keyframes grad-flow { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* ---------- Light flow: seven spectrum rays running down the whole page ---------- */
body { position: relative; }
#lightFlow {
  position: absolute; left: 0; top: 0; z-index: 5;
  pointer-events: none;            /* normal blending: a blend mode over the whole page made scrolling choppy */
}
#lightFlow path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#lightFlow .lf-glow { stroke: var(--c); stroke-width: 9; opacity: .13; }
#lightFlow .lf-core { stroke: var(--c); stroke-width: 1.8; opacity: .85; }
#lightFlow .lf-run  { stroke: #fff; stroke-width: 3; stroke-dasharray: 4 120; animation: lf-dash var(--sp, 3s) linear infinite; }
@keyframes lf-dash { to { stroke-dashoffset: -124; } }
#lightFlow .lf-node { fill: #fff; filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px var(--c)); animation: lf-pulse 3s ease-in-out infinite; }
#lightFlow .lf-land { fill: var(--c); opacity: .45; }
@keyframes lf-pulse { 50% { opacity: .55; } }
/* the three About branches are drawn bolder so they read clearly */
#lightFlow .lf-core.lf-thick { stroke-width: 2.8; opacity: 1; }
#lightFlow .lf-glow.lf-thick { stroke-width: 11; opacity: .2; }
/* each theme brightens in its own colour when its branch arrives */
.about-card i, .about-card h4 { transition: filter .9s ease, text-shadow .9s ease; }
.about-card.lf-lit i { filter: drop-shadow(0 0 10px var(--c)); }
.about-card.lf-lit h4 { text-shadow: 0 0 16px color-mix(in srgb, var(--c) 80%, transparent); }

/* panels illuminated when the light reaches them */
.about-card, .vm-card { transition: box-shadow 1s ease, border-color 1s ease, background .25s, transform .25s; }
.about-card.lf-lit, .vm-card.lf-lit {
  box-shadow: 0 0 44px 2px color-mix(in srgb, var(--c) 55%, transparent),
              inset 0 0 28px color-mix(in srgb, var(--c) 18%, transparent);
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
}

/* ---------- Hero on mobile: photo on top, text underneath ---------- */
@media (max-width: 767.98px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; }
  .hero-person {
    position: static;                 /* back into the flow, above the text */
    display: block;
    width: 88%; max-width: 420px; height: auto;
    aspect-ratio: 736 / 830;          /* trims the empty space above the head */
    margin: 6.75rem auto 0;           /* clears the fixed menu bar (about 93px tall) with a little space */
    object-fit: cover; object-position: bottom center;
    opacity: 1; transform: none; left: auto; bottom: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
  .hero-inner { padding-top: .5rem; padding-bottom: 5rem; }
}

/* ---------- Hero: seven rays emerge from the logo's prism and flow downward ---------- */
#lightFlow .lf-emerge {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: lf-grow 1.9s cubic-bezier(.25, .7, .2, 1) var(--ed, 0s) forwards;
}
#lightFlow.lf-emerged .lf-emerge { animation: none; stroke-dashoffset: 0; }
@keyframes lf-grow { to { stroke-dashoffset: 0; } }
/* soft burst of light at the prism: ignites, then breathes */
#lightFlow .lf-prism {
  transform-box: fill-box; transform-origin: center;
  animation: lf-prism-in 1.2s ease-out .1s backwards, lf-prism-breathe 3.6s ease-in-out 1.3s infinite;
}
@keyframes lf-prism-in { from { opacity: 0; transform: scale(.2); } }
@keyframes lf-prism-breathe { 50% { opacity: .65; transform: scale(1.25); } }

/* ---------- Light journey: sections 06-09 ---------- */
/* portraits, award displays and editorial blocks catch a little of the light as it passes */
/* The light's glow on the team cards, award displays and editorial blocks follows the scroll: --lit goes from 0
   (light not here yet) to 1 (light has passed) as the light travels by, so the glow rises gradually and stays soft. */
.team-card {
  box-shadow: 0 0 calc(30px * var(--lit, 0)) rgba(110, 140, 255, calc(.3 * var(--lit, 0))),
              inset -16px 0 22px -16px rgba(150, 175, 255, calc(.4 * var(--lit, 0)));
}
.award-card {
  box-shadow: 0 0 calc(36px * var(--lit, 0)) rgba(255, 214, 140, calc(.2 * var(--lit, 0))),
              inset 0 0 calc(22px * var(--lit, 0)) rgba(255, 214, 140, calc(.07 * var(--lit, 0)));
  border-color: rgba(255, 224, 170, calc(.13 + .32 * var(--lit, 0)));
}
.testi-main, .press-list {
  box-shadow: 0 0 calc(36px * var(--lit, 0)) rgba(100, 130, 255, calc(.28 * var(--lit, 0)));
  transition: box-shadow .5s ease;
}
/* a single golden sheen sweeps across each award card as the light reaches it */
.award-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 235, 190, .2) 50%, transparent 65%) 130% 0 / 260% 100% no-repeat;
}
.award-card.lf-lit::after { animation: award-sheen 2.2s ease-out .15s 1 both; }
@keyframes award-sheen { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 0; background-position: -30% 0; } }
/* the halo over each certificate breathes very gently */
#lightFlow .lf-halo { animation: lf-halo 5s ease-in-out infinite; }
@keyframes lf-halo { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .award-card.lf-lit::after { animation: none; } }

/* ---------- Sticky navigation bar ---------- */
/* The bar eases from its full size to a compact one *as you scroll*: --nav-p (0 -> 1) is set by the script in
   main.js and smoothed frame by frame, so the logo, padding, background and shadow all change together
   gradually instead of jumping at one scroll position. */
html { scroll-padding-top: 96px; }                       /* in-page links stop below the bar */
.site-header {
  --nav-p: 0;
  --logo-full: 150px; --logo-compact: 76px;
  --nav-bg-min: 0;                                       /* background strength at the very top */
  --nav-bg-max: .92;
  --nav-pad-full: .9rem; --nav-pad-compact: .35rem;
  background: rgba(5, 8, 22, calc(var(--nav-bg-min) + (var(--nav-bg-max) - var(--nav-bg-min)) * var(--nav-p)));
  /* no backdrop blur: it is expensive to repaint while scrolling, so the bar uses a slightly denser tint instead */
  box-shadow: 0 6px 24px rgba(0, 0, 0, calc(.35 * var(--nav-p)));
}
.site-header .navbar { padding: calc(var(--nav-pad-full) + (var(--nav-pad-compact) - var(--nav-pad-full)) * var(--nav-p)) 0; }
.site-header .brand-logo {
  width: calc(var(--logo-full) + (var(--logo-compact) - var(--logo-full)) * var(--nav-p));
  height: calc(var(--logo-full) + (var(--logo-compact) - var(--logo-full)) * var(--nav-p));
}

/* Team cards lighten up as the light ray passes them (--lit rises while the ray is level with a card, then settles) */
.team-card {
  background-image: linear-gradient(rgba(190, 210, 255, calc(.13 * var(--lit, 0))), rgba(190, 210, 255, calc(.13 * var(--lit, 0))));
}
.team-card img, .team-card .team-initials { filter: brightness(calc(1 + .14 * var(--lit, 0))) saturate(calc(1 + .1 * var(--lit, 0))); }
.team-card img, .team-card .team-initials { transition: transform .5s ease, filter .6s ease; }

/* "Stories Worth Sharing": the slider card and the press list lighten up as the ray passes, like the team cards */
.testi-main, .press-list {
  filter: brightness(calc(1 + .1 * var(--lit, 0)));
  transition: box-shadow .5s ease, filter .6s ease;
}
.press-list {
  background-image: linear-gradient(rgba(190, 210, 255, calc(.1 * var(--lit, 0))), rgba(190, 210, 255, calc(.1 * var(--lit, 0))));
}

/* "Our Universe of Brands": the whole section is gently lit as the light passes through it
   (the wash sits behind the content, so no text or image is covered) */
.brands { position: relative; }
.brands > .container-fluid { position: relative; z-index: 1; }
.brands::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 58% 52%, rgba(255, 140, 40, .36), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(255, 120, 30, .15) 45%, transparent 100%);
  opacity: var(--lit, 0);
  transition: opacity .6s ease;
}

/* "Stories Worth Sharing": the whole section is gently lit as the light passes, behind the content */
.testimonials { position: relative; }
.testimonials > .container-fluid { position: relative; z-index: 1; }
.testimonials::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(120, 150, 255, .22), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(150, 170, 255, .09) 50%, transparent 100%);
  opacity: var(--lit, 0);
  transition: opacity .6s ease;
}

/* "The People Behind the Possibilities": the whole section is softly illuminated as the light passes
   (the wash sits behind the content, so text and portraits stay fully readable) */
.team { position: relative; }
.team > .container-fluid { position: relative; z-index: 1; }
.team::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 60% at 50% 55%, rgba(120, 150, 255, .2), transparent 72%),
    radial-gradient(ellipse 45% 40% at 22% 30%, rgba(167, 108, 255, .1), transparent 75%),
    linear-gradient(180deg, transparent 0%, rgba(150, 170, 255, .08) 50%, transparent 100%);
  opacity: var(--lit, 0);
  transition: opacity .6s ease;
  will-change: opacity;
}

/* "Stories Worth Sharing": a soft violet glow around the heading, quote mark, story card and press list,
   driven by the same --lit value as the light's pass (no new animation) */
.testi-title {
  text-shadow: 0 0 calc(28px * var(--lit, 0)) rgba(167, 108, 255, calc(.55 * var(--lit, 0))),
               0 0 calc(60px * var(--lit, 0)) rgba(167, 108, 255, calc(.3 * var(--lit, 0)));
}
.testi-quote-mark { text-shadow: 0 0 calc(22px * var(--lit, 0)) rgba(167, 108, 255, calc(.6 * var(--lit, 0))); }
.testi-main, .press-list {
  box-shadow: 0 0 calc(38px * var(--lit, 0)) rgba(167, 108, 255, calc(.3 * var(--lit, 0))),
              inset 0 0 calc(24px * var(--lit, 0)) rgba(167, 108, 255, calc(.08 * var(--lit, 0)));
}
.testimonials::before {
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(167, 108, 255, .2), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(167, 108, 255, .08) 50%, transparent 100%);
}

/* ---------- Brands: smoother board -> app transition ----------
   Same 10-second loop, re-timed: every move eases in and out, the board and the phone overlap while
   swapping, nothing overshoots or snaps, and the costly brightness filter on the board is gone. */
.omt-stage .board-wrap, .omt-stage .omt-phone, .omt-stage .omt-fly { will-change: transform, opacity; backface-visibility: hidden; }
.omt-stage.is-armed.in-view .omt-fly { animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
.omt-stage.is-armed.in-view .omt-ring { animation-timing-function: cubic-bezier(.2, .6, .3, 1); }

@keyframes omt-board3d {
  0%, 28%  { transform: none; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  52%, 84% { transform: translateX(-10%) scale(.85) rotateY(14deg); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  98%, 100% { transform: none; }
}
@keyframes omt-phone3d {
  0%, 30%  { opacity: 0; transform: translateX(46%) rotateY(-24deg) rotate(3deg) scale(.96); animation-timing-function: cubic-bezier(.3, 0, .15, 1); }
  58%, 84% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.45, 0, .6, 1); }
  98%, 100% { opacity: 0; transform: translateX(46%) rotateY(-24deg) rotate(3deg) scale(.96); }
}
@keyframes omt-fly {
  0%, 32%   { left: var(--x0); top: var(--y0); opacity: 0; transform: scale(1) rotate(0deg); }
  38%       { opacity: 1; }
  56%       { left: 80%; top: 52%; opacity: 1; transform: scale(.3) rotate(200deg); }
  62%, 100% { left: 80%; top: 52%; opacity: 0; transform: scale(.05) rotate(240deg); }
}
@keyframes omt-ring {
  0%, 34%   { opacity: 0; transform: scale(.2); }
  38%       { opacity: .9; }
  58%, 100% { opacity: 0; transform: scale(4.5); }
}
@keyframes omt-aura { 0%, 28%, 98%, 100% { opacity: .45; } 56%, 84% { opacity: 1; } }
@keyframes omt-ui   { 0%, 52% { opacity: 0; } 64%, 82% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes omt-candle {
  0%, 56% { transform: scaleY(.2); }
  66% { transform: scaleY(.85); } 72% { transform: scaleY(.5); }
  78% { transform: scaleY(.95); } 84% { transform: scaleY(.6); }
  94%, 100% { transform: scaleY(.2); }
}
@keyframes omt-draw { 0%, 60% { stroke-dashoffset: 1; } 76%, 84% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 1; } }

/* ---------- Team slider controls ---------- */
.team-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.team-controls .team-progress { flex: 1 1 auto; width: auto; max-width: 410px; margin: 0; }
.team-nav {
  flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .35);
  transition: background .25s, color .25s, transform .25s, opacity .25s;
}
.team-nav:hover:not(:disabled) { background: #fff; color: #0a2a9c; transform: scale(1.08); }
.team-nav:disabled { opacity: .3; cursor: default; }

/* ---------- Scroll performance ----------
   These keep scrolling smooth: no large filters or blurs re-painted on every frame, and animations that
   run endlessly are paused while their section is off-screen. */
.testi-main, .press-list { filter: none; }                       /* big brightness filters were costly; the soft wash + glow remain */
body .rv-title, body .rv-card3d { filter: none; }                /* reveal with opacity + movement only (no blur) */
.brands::before, .testimonials::before { will-change: opacity; }
.hero-paused .hero-rays, .hero-paused .hero-particles span, .hero-paused .hero-crystal,
.hero-paused .scroll-indicator span { animation-play-state: paused; }

/* paused while the page scrolls (see "is-scrolling" in main.js): the decorative loops, the light's running dots, glows */
html.is-scrolling *, html.is-scrolling *::before, html.is-scrolling *::after { animation-play-state: paused !important; }
/* the light's nodes and halos: a plain colour instead of a filter (filters on a page-tall graphic are costly) */
#lightFlow .lf-node { filter: none; stroke: var(--c); stroke-opacity: .45; stroke-width: 7; }
#lightFlow .lf-halo { animation: none; }

/* ---------- Brands: airy, uncluttered layout ----------
   A clean showcase (board + phone, two small chips outside the board) beside open typography, with plenty
   of white space between the heading, the showcase, the text and the closing line. */
.brands { padding: 7rem 0 7.5rem; }
.brands .brands-title { margin-bottom: .6rem; }
.brands-row { margin-top: 4.5rem; }

.omt-stage { padding: 1.6rem 1.6rem 3.4rem 1.6rem; }
.omt-stage .board-wrap { border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.omt-stage .board { border-radius: 18px; }
.omt-stage .omt-phone { right: 1%; bottom: 1%; width: 21%; min-width: 92px; }
.bx-chip { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.bx-chip-a { width: 10%; top: 0; left: 0; transform: rotate(-14deg); animation: omt-float 6s ease-in-out infinite; }
.bx-chip-b { width: 8%; bottom: 4%; left: 1%; transform: rotate(10deg); animation: omt-float 7s ease-in-out -2s infinite; }

.bx-copy { padding-left: 1rem; }
.bx-copy .omt-logo { margin-bottom: 1.6rem; }
.bx-copy .founder-eyebrow { margin-bottom: 1rem; }
.bx-name {
  font-size: clamp(2.4rem, 4.2vw, 3.8rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 1.4rem;
}
.bx-tag { font-size: 1.15rem; font-weight: 600; margin: 0 0 1.2rem; }
.bx-text { font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, .78); max-width: 34rem; margin: 0 0 2.6rem; }
.bx-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.bx-actions .btn { padding: 1rem 2rem; }
.bx-actions .btn-prism { position: relative; overflow: hidden; }
.bx-actions .btn-prism::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: omt-shine 4.5s ease-in-out 1s infinite;
}

.bx-closing { margin-top: 6.5rem; text-align: center; }
.bx-rule { display: block; width: 64px; height: 2px; margin: 0 auto 1.8rem; border-radius: 2px; background: linear-gradient(90deg, #5b7cff, #b583f5); }
.bx-closing .brands-closing { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: -0.01em; }

/* Brands: the game's cards sit just outside the board's corners (a little room around the board keeps them clear of it) */
.omt-stage { padding: 2.2rem 2.2rem 3.6rem 2.2rem; }
.bx-card { position: absolute; z-index: 3; pointer-events: none; border-radius: 8px; box-shadow: 0 12px 26px rgba(0, 0, 0, .45); }
.bx-card-a { width: 12%; top: 0; right: 0; transform: rotate(12deg); animation: omt-float 7s ease-in-out -1s infinite; }
.bx-card-b { width: 13%; bottom: 7%; left: 0; transform: rotate(-11deg); animation: omt-float 8s ease-in-out -3s infinite; }
.bx-chip-b { bottom: 1%; left: 30%; }

/* ---------- Brands: the board game gradually becomes the app ----------
   One registered number, --m (0 = physical board game, 1 = digital app), drives every part of the transition,
   so the board, the phone frame, the app screen, the game pieces and the captions all change together
   in one continuous, eased motion instead of one thing swapping for another. */
@property --m { syntax: "<number>"; inherits: true; initial-value: 0; }

.omt-stage { --m: 0; }
.omt-stage.is-armed.in-view { animation: omt-morph 13s infinite; }
@keyframes omt-morph {
  0%, 12%   { --m: 0; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  44%, 76%  { --m: 1; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  94%, 100% { --m: 0; }
}

.omt-morph-wrap { filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .5)); }
.omt-morph {
  position: relative; width: 100%; aspect-ratio: 1.627 / 1; overflow: hidden;
  /* the board narrows to a portrait "phone" window in the middle as --m goes 0 -> 1 */
  clip-path: inset(0 calc(var(--m) * 36%) 0 calc(var(--m) * 36%) round calc(18px + var(--m) * 26px));
}
.omt-board {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1 + var(--m) * 1.25));                 /* zooms in on the centre of the board, like entering the game */
  opacity: calc(1 - var(--m) * .8);
}
/* the app screen appears inside the phone window */
.omt-stage .omt-morph .omt-ui,
.omt-stage.is-armed.in-view .omt-morph .omt-ui {
  left: 36%; right: 36%; top: 0; bottom: 0; inset-inline: 36%;
  opacity: clamp(0, calc((var(--m) - .55) * 2.5), 1);
  animation: none;
}
/* the phone's frame and notch fade in around that window */
.omt-bezel {
  position: absolute; top: 0; bottom: 0; left: calc(var(--m) * 36%); right: calc(var(--m) * 36%);
  border-radius: calc(18px + var(--m) * 26px);
  border: 5px solid rgba(26, 36, 100, .96);
  box-shadow: inset 0 0 0 1px rgba(170, 190, 255, .5);
  opacity: clamp(0, calc((var(--m) - .35) * 2), 1); pointer-events: none;
}
.omt-bezel::before {
  content: ""; position: absolute; top: 5px; left: 50%; width: 24%; height: 5px; margin-left: -12%;
  border-radius: 5px; background: #05081c;
}
/* the app's own motion while the phone is open */
.omt-stage.is-armed.in-view .omt-morph .omt-candles i { animation: omt-candle13 13s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-morph .omt-candles i:nth-child(2) { animation-delay: .1s; }
.omt-stage.is-armed.in-view .omt-morph .omt-candles i:nth-child(3) { animation-delay: .2s; }
.omt-stage.is-armed.in-view .omt-morph .omt-candles i:nth-child(4) { animation-delay: .3s; }
.omt-stage.is-armed.in-view .omt-morph .omt-candles i:nth-child(5) { animation-delay: .4s; }
.omt-stage.is-armed.in-view .omt-morph .omt-candles i:nth-child(6) { animation-delay: .5s; }
.omt-stage.is-armed.in-view .omt-morph .omt-candles i:nth-child(7) { animation-delay: .6s; }
.omt-stage.is-armed.in-view .omt-morph .omt-line polyline { animation: omt-draw13 13s ease-in-out infinite; }
@keyframes omt-candle13 {
  0%, 40% { transform: scaleY(.2); }
  48% { transform: scaleY(.85); } 54% { transform: scaleY(.5); }
  60% { transform: scaleY(.95); } 66% { transform: scaleY(.6); }
  72% { transform: scaleY(.9); } 80%, 100% { transform: scaleY(.2); }
}
@keyframes omt-draw13 { 0%, 42% { stroke-dashoffset: 1; } 56%, 76% { stroke-dashoffset: 0; } 88%, 100% { stroke-dashoffset: 1; } }

/* the physical game pieces dissolve into the app, and come back when the app returns to the board */
.bx-chip, .bx-card { opacity: calc(1 - var(--m) * 1.3); scale: calc(1 - var(--m) * .5); }
/* soft aura behind the whole showcase brightens as it becomes digital */
.omt-stage.is-armed.in-view::before { animation: none; opacity: calc(.4 + var(--m) * .6); }
/* a single ripple of light as the transformation begins */
.omt-ring { left: 50%; }
.omt-stage.is-armed.in-view .omt-ring { animation: omt-ring13 13s ease-out infinite; }
@keyframes omt-ring13 {
  0%, 16% { opacity: 0; transform: scale(.2); }
  20% { opacity: .8; }
  42%, 100% { opacity: 0; transform: scale(4.5); }
}

/* captions: "Physical board game" fades into "Digital app experience" and back */
.omt-caption { position: absolute; left: 0; right: 0; bottom: .6rem; margin: 0; text-align: center; height: 1.3em; pointer-events: none; }
.omt-caption span {
  position: absolute; left: 0; right: 0; top: 0;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.omt-caption .cap-a { opacity: calc(1 - var(--m) * 2); }
.omt-caption .cap-b { opacity: calc(var(--m) * 2 - 1); }

@media (prefers-reduced-motion: reduce) {
  .omt-stage.is-armed.in-view, .omt-stage.is-armed.in-view .omt-ring,
  .omt-stage.is-armed.in-view .omt-morph .omt-candles i, .omt-stage.is-armed.in-view .omt-morph .omt-line polyline { animation: none; }
}

/* "Milestones That Inspire Us": the whole section lightens up as the light passes, behind the content */
.awards { position: relative; }
.awards > .container-fluid { position: relative; z-index: 1; }
.awards::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 214, 140, .14), transparent 72%),
    radial-gradient(ellipse 80% 60% at 50% 55%, rgba(120, 150, 255, .18), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(150, 170, 255, .08) 50%, transparent 100%);
  opacity: var(--lit, 0);
  transition: opacity .6s ease;
  will-change: opacity;
}

/* Team slider: the progress bar sits on the left and both arrow buttons are grouped on the right */
.team-controls { justify-content: flex-start; }
.team-controls .team-progress { order: 0; }
.team-controls .team-prev { order: 1; margin-left: auto; }
.team-controls .team-next { order: 2; }

/* ---------- Brands: the phone's app screen (a proper, complete chart) ---------- */
.omt-morph .omt-ui { justify-content: flex-start; padding: 15% 9% 7%; gap: .3rem; }
.omt-delta { font-size: clamp(.45rem, .75vw, .7rem); font-weight: 700; color: #7dffb0; letter-spacing: .02em; }
.omt-chart { width: 100%; height: auto; margin-top: .4rem; overflow: visible; }
.omt-grid line { stroke: rgba(255, 255, 255, .13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.omt-curve {
  fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px rgba(125, 255, 176, .7));
}
.omt-area { opacity: 0; }
.omt-dot { fill: #fff; opacity: 0; filter: drop-shadow(0 0 4px #7dffb0); }
.omt-dot-ring { fill: none; stroke: #7dffb0; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.omt-bars { margin-top: auto; width: 100%; height: 17%; display: flex; align-items: flex-end; gap: 4%; }
.omt-bars i {
  flex: 1; height: 100%; border-radius: 2px; transform-origin: bottom; transform: scaleY(.25);
  background: linear-gradient(180deg, rgba(125, 255, 176, .75), rgba(31, 191, 116, .5));
}
.omt-bars i:nth-child(3n) { background: linear-gradient(180deg, rgba(255, 154, 138, .75), rgba(226, 74, 58, .5)); }

.omt-stage.is-armed.in-view .omt-curve { animation: omt-curve13 13s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-area { animation: omt-area13 13s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-dot { animation: omt-dot13 13s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-dot-ring { animation: omt-ring-dot13 13s ease-out infinite; }
.omt-stage.is-armed.in-view .omt-bars i { animation: omt-candle13 13s ease-in-out infinite; }
.omt-stage.is-armed.in-view .omt-bars i:nth-child(2) { animation-delay: .08s; }
.omt-stage.is-armed.in-view .omt-bars i:nth-child(3) { animation-delay: .16s; }
.omt-stage.is-armed.in-view .omt-bars i:nth-child(4) { animation-delay: .24s; }
.omt-stage.is-armed.in-view .omt-bars i:nth-child(5) { animation-delay: .32s; }
.omt-stage.is-armed.in-view .omt-bars i:nth-child(6) { animation-delay: .4s; }
.omt-stage.is-armed.in-view .omt-bars i:nth-child(7) { animation-delay: .48s; }
.omt-stage.is-armed.in-view .omt-bars i:nth-child(8) { animation-delay: .56s; }
@keyframes omt-curve13 { 0%, 44% { stroke-dashoffset: 1; } 60%, 78% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 1; } }
@keyframes omt-area13  { 0%, 50% { opacity: 0; } 64%, 78% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes omt-dot13   { 0%, 58% { opacity: 0; } 62%, 78% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes omt-ring-dot13 { 0%, 60% { opacity: 0; transform: scale(1); } 64% { opacity: .9; } 74%, 100% { opacity: 0; transform: scale(2.6); } }

@media (prefers-reduced-motion: reduce) {
  .omt-curve { stroke-dashoffset: 0; }
  .omt-area, .omt-dot { opacity: 1; }
  .omt-bars i { transform: scaleY(.6); animation: none; }
}

/* Team slider: no progress bar; the two arrows sit at the top right, level with the "People Behind Prism" label */
.team .row > .col-12 { position: relative; }
.team .founder-eyebrow { min-height: 42px; }           /* the label row is as tall as the arrows, so the heading never runs under them */
.team-controls { position: absolute; top: 0; right: 0; margin: 0; gap: .6rem; justify-content: flex-end; }

/* Team: the arrows sit on the same line as the heading, at the right, centred on the heading text */
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.team-head .team-title { margin: 0; flex: 1 1 auto; min-width: 0; }
.team-head .team-controls { position: static; flex: 0 0 auto; margin: 0; }
.team .founder-eyebrow { min-height: 0; }

/* Team: the arrows sit directly below the heading, left-aligned with it (all screen sizes) */
.team-head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.2rem; }
.team-head .team-title { flex: 0 0 auto; width: 100%; }
.team-head .team-controls { justify-content: flex-start; gap: .6rem; }

/* ---------- About: the three cards are tabs; each one swaps the heading and the text ---------- */
.about-panels { display: grid; container-type: inline-size; }
.about-panel {
  grid-area: 1 / 1;                       /* all panels share one cell: the tallest sets the height, so nothing below moves */
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .75, .2, 1), visibility .45s;
}
.about-panel.is-active { opacity: 1; visibility: visible; transform: none; }
.about-panel .btn-lg-pill { margin-bottom: 0; }

.about-card { cursor: pointer; user-select: none; }
.about-card:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
/* the selected tab takes its own colour (blue / violet / orange) */
.about-card.active {
  background: color-mix(in srgb, var(--c) 62%, #050a30);
  border-color: var(--c);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--c) 30%, transparent);
}
.about-card.active i { color: #fff !important; }
.about-card:not(.active):hover { background: rgba(255, 255, 255, .12); }

@media (prefers-reduced-motion: reduce) { .about-panel { transition: none; transform: none; } }

/* ---------- About: the left images change with the selected tab ---------- */
.about-media { display: grid; }
.about-set { display: contents; }                 /* the images keep their exact frame, tilt and overlap */
.about-media .about-main { grid-area: 1 / 1; }
.about-media .about-main, .about-media .about-small {
  opacity: 0;
  transition: opacity .6s ease;
}
.about-set.is-active .about-main, .about-set.is-active .about-small { opacity: 1; }
.about-set:not(.is-active) .about-small { transition-delay: 0s; }
.about-set.is-active .about-small { transition-delay: .12s; }       /* the small photo follows the large one */
.about-set:not(.is-active) .about-main { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .about-media .about-main, .about-media .about-small { transition: none; } }



/* Possibilities tab: the small photo (a roughly square picture) is framed on the woman and the arrows */
.about-small-12 { object-position: 50% 30%; }