html {
  scroll-behavior: smooth;
  background: #000;
}

body {
  background: #000;
  color: #fff;
  overflow-x: hidden;
  text-rendering: optimizeSpeed;
}

/* ========================================================== */
/* ============== LOCKED TYPE SCALE (5 sizes) =============== */
/* ========================================================== */
/* Use ONLY these five classes for text sizing on the research */
/* site. Any new section, card, label, paragraph must pick     */
/* exactly one of them. No arbitrary text-[Npx] or text-xl/2xl */
/* sizes. No gray text — primary is white, secondary is an     */
/* accent color (sky / cyan / gradient already in this file).  */
/* ---------------------------------------------------------- */
/* Headings — pure white, bolder */
.t-hero {
  font-size: 56px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.t-h1 {
  font-size: 36px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #ffffff !important;
}

.t-h2 {
  font-size: 20px !important;
  line-height: 1.30 !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* Secondary text (description, subtext, subtitle, meta) — softer white, same weight 400 */
.t-body {
  font-size: 15px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: #ffffffcf !important;
}

.t-meta {
  font-size: 14px !important;
  line-height: 1.40 !important;
  font-weight: 400 !important;
  color: #ffffffcf !important;
}

/* ---------------------------------------------------------- */
/* GLOBAL SIZE CRUSH                                          */
/* Every Tailwind size utility (and its sm:/md:/lg:/xl:      */
/* responsive variants) is pinned to one of the five tiers.  */
/* This means existing markup automatically conforms without */
/* hand-editing every <p>, <h2>, <span>.                     */
/* ---------------------------------------------------------- */

/* Tier 1 — meta size (12px). Weight + color set by description rule below. */
.text-xs,
.sm\:text-xs,
.md\:text-xs,
.lg\:text-xs,
.xl\:text-xs,
.text-\[9px\],
.text-\[10px\],
.text-\[10\.5px\],
.text-\[11px\],
.text-\[11\.5px\] {
  font-size: 14px !important;
  line-height: 1.40 !important;
}

/* Tier 2 — body size (15px). Weight + color set by description rule below. */
.text-sm,
.sm\:text-sm,
.md\:text-sm,
.lg\:text-sm,
.xl\:text-sm,
.text-base,
.sm\:text-base,
.md\:text-base,
.lg\:text-base,
.xl\:text-base,
.text-\[12px\],
.text-\[12\.5px\],
.text-\[13px\],
.text-\[13\.5px\],
.text-\[14px\],
.text-\[14\.5px\],
.text-\[15px\],
.text-\[16px\] {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* Tier 3 — h2 / card title (20px) */
.text-lg,
.sm\:text-lg,
.md\:text-lg,
.lg\:text-lg,
.xl\:text-lg,
.text-xl,
.sm\:text-xl,
.md\:text-xl,
.lg\:text-xl,
.xl\:text-xl,
.text-\[17px\],
.text-\[18px\],
.text-\[19px\],
.text-\[20px\] {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.30 !important;
}

/* Tier 4 — h1 / section heading (36px) */
.text-2xl,
.sm\:text-2xl,
.md\:text-2xl,
.lg\:text-2xl,
.xl\:text-2xl,
.text-3xl,
.sm\:text-3xl,
.md\:text-3xl,
.lg\:text-3xl,
.xl\:text-3xl,
.text-4xl,
.sm\:text-4xl,
.md\:text-4xl,
.lg\:text-4xl,
.xl\:text-4xl,
.text-\[1\.5rem\],
.text-\[1\.6rem\],
.text-\[1\.8rem\],
.text-\[2rem\],
.text-\[22px\],
.text-\[24px\],
.text-\[26px\],
.text-\[28px\],
.text-\[30px\],
.text-\[32px\],
.text-\[34px\],
.text-\[36px\],
.text-\[40px\] {
  font-size: 36px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
}

/* Tier 5 — hero (56px) */
.text-5xl,
.sm\:text-5xl,
.md\:text-5xl,
.lg\:text-5xl,
.xl\:text-5xl,
.text-6xl,
.sm\:text-6xl,
.md\:text-6xl,
.lg\:text-6xl,
.xl\:text-6xl,
.text-7xl,
.sm\:text-7xl,
.md\:text-7xl,
.lg\:text-7xl,
.xl\:text-7xl,
.text-\[42px\],
.text-\[44px\],
.text-\[48px\],
.text-\[52px\],
.text-\[56px\],
.text-\[64px\] {
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}

/* ---------------------------------------------------------- */
/* TITLE vs DESCRIPTION SPLIT                                 */
/* Headings (h1–h6) stay pure white + bold.                   */
/* Paragraphs / spans / divs / lis (any with text-* utility)  */
/* become the softer secondary shade at weight 400.           */
/* Selectors with element+attribute have specificity 11, so   */
/* they beat plain .text-sm class selectors (10).             */
/* ---------------------------------------------------------- */

/* All description-style elements — uniform color + weight.
   Exempt elements with text-transparent (gradient text) so they keep
   their natural inherited weight / colour. */
p[class*="text-"]:not(.text-transparent),
span[class*="text-"]:not(.text-transparent),
div[class*="text-"]:not(.text-transparent),
li[class*="text-"]:not(.text-transparent),
blockquote[class*="text-"]:not(.text-transparent) {
  color: #ffffffcf !important;
  font-weight: 400 !important;
}

/* Headings — always pure white, never get demoted */
h1[class],
h2[class],
h3[class],
h4[class],
h5[class],
h6[class] {
  color: #ffffff !important;
}

/* …UNLESS the element is using gradient text. Force transparent fill
   AND background-clip:text so the gradient shows through. Also inherit
   font-weight + size from parent — so a gradient span inside an <h2>
   keeps the heading weight (600) and isn't demoted to description weight. */
.text-transparent.bg-clip-text,
.bg-clip-text.text-transparent,
span.text-transparent,
.text-transparent[class*="bg-gradient"] {
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Lock Font Awesome icons to their correct font + weight. Other rules
   above could otherwise demote .fa-solid <i> to weight 400, which makes
   the glyph render as an X/box placeholder. */
i.fa-solid,
i.fas,
.fa-solid::before,
.fas::before {
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 900 !important;
}

i.fa-regular,
i.far,
.fa-regular::before,
.far::before {
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 400 !important;
}

i.fa-brands,
i.fab,
.fa-brands::before,
.fab::before {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* Headings without an explicit font-weight class default to 600
   (Tailwind's preflight resets headings to inherit, which would
   make them weight 400 and indistinguishable from descriptions). */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

/* ---------------------------------------------------------- */
/* GLOBAL COLOR CRUSH                                         */
/* Any gray / faded-white Tailwind utility → secondary white. */
/* (Headings, h-tags, override this via the rules above.)     */
/* ---------------------------------------------------------- */
.text-gray-100,
.text-gray-200,
.text-gray-300,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-slate-100,
.text-slate-200,
.text-slate-300,
.text-slate-400,
.text-slate-500,
.text-zinc-100,
.text-zinc-200,
.text-zinc-300,
.text-zinc-400,
.text-zinc-500,
.text-neutral-100,
.text-neutral-200,
.text-neutral-300,
.text-neutral-400,
.text-neutral-500,
.text-stone-100,
.text-stone-200,
.text-stone-300,
.text-stone-400,
.text-stone-500,
.text-white\/40,
.text-white\/45,
.text-white\/50,
.text-white\/55,
.text-white\/60,
.text-white\/65,
.text-white\/75,
.text-white\/80,
.text-white\/85,
.text-white\/90 {
  color: #ffffffcf !important;
}

/* Heading color overrides the gray crush above too */
h1[class*="text-gray"],
h1[class*="text-slate"],
h1[class*="text-white\\/"],
h2[class*="text-gray"],
h2[class*="text-slate"],
h2[class*="text-white\\/"],
h3[class*="text-gray"],
h3[class*="text-slate"],
h3[class*="text-white\\/"],
h4[class*="text-gray"],
h4[class*="text-slate"],
h4[class*="text-white\\/"],
h5[class*="text-gray"],
h5[class*="text-slate"],
h5[class*="text-white\\/"],
h6[class*="text-gray"],
h6[class*="text-slate"],
h6[class*="text-white\\/"] {
  color: #ffffff !important;
}

/* ---------------------------------------------------------- */
/* CUSTOM CLASSES already in this file — pin to the scale.    */
/* (Their original rules are above; these !important rules    */
/*  win because they come later in source order.)             */
/* ---------------------------------------------------------- */
.heading,
.svc-heading,
.platform-heading {
  font-size: 36px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  letter-spacing: -0.015em !important;
}

/* TITLES — pure white, bolder weight */
/* Card titles (20px) */
.svc-item-title,
.pcard-title,
.platform-bar-bold,
.vcard-title,
.svc-center-text,
.platform-pill-line2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.30 !important;
  color: #ffffff !important;
}

/* Stat numbers — kept smaller (15px) to fit inline next to label */
.svc-stat-num {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.30 !important;
  color: #ffffff !important;
}

/* DESCRIPTIONS / SUB-TEXT — softer white, lighter weight */
/* DESCRIPTIONS / SUB-TEXT (15px) */
.svc-item-desc,
.vcard-desc,
.pcard-desc,
.platform-subtext,
.svc-subtext,
.platform-pill-line1 {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #ffffffcf !important;
}

/* Stat label — kept compact inline next to the number */
.svc-stat-label {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #ffffffcf !important;
}

/* META / EYEBROW / BADGE */
.platform-eyebrow span,
.svc-eyebrow span,
.svc-num-badge {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.40 !important;
  color: #ffffffcf !important;
}

/* Mobile reduction stays */
@media (max-width: 640px) {

  .t-hero,
  .text-5xl,
  .text-6xl,
  .text-7xl,
  .sm\:text-5xl,
  .md\:text-5xl,
  .lg\:text-5xl,
  .text-\[42px\],
  .text-\[48px\],
  .text-\[56px\],
  .text-\[64px\] {
    font-size: 38px !important;
  }

  .t-h1,
  .text-2xl,
  .text-3xl,
  .text-4xl,
  .sm\:text-2xl,
  .md\:text-3xl,
  .lg\:text-4xl,
  .heading,
  .svc-heading,
  .platform-heading {
    font-size: 26px !important;
  }

  .t-h2,
  .text-lg,
  .text-xl,
  .svc-item-title,
  .pcard-title,
  .platform-bar-bold {
    font-size: 18px !important;
  }

  .t-body,
  .text-sm,
  .text-base,
  .svc-item-desc,
  .pcard-desc,
  .platform-subtext,
  .svc-subtext {
    font-size: 14px !important;
  }
}

/* Force every section to pure black baseline (cards/glass on top can still tint) */
section {
  background-color: #000;
}

/* PREVENT IMAGE GAP + IMPROVE RENDER */
img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ------GLOBAL COLOUR CHANGE---- */
:root {
  --primary-color: #ffffff;
  /* white */
  --secondary-color: #38bdf8;
  /* sky-400 brand blue */
}

.primary-text {
  color: var(--primary-color);
}

.primary-bg {
  background-color: var(--primary-color);
}

.primary-border {
  border-color: var(--primary-color);
}

.secondary-text {
  color: var(--secondary-color);
}

.secondary-bg {
  background-color: var(--secondary-color);
}

.secondary-border {
  border-color: var(--secondary-color);
}

/* ================= TYPOGRAPHY SYSTEM ================= */

/* Base */
body {
  font-size: 14px;
  /* same as text-sm */
}

/* ================= GLOBAL HEADING FONT ================= */
/* Bricolage Grotesque applied to every heading / title-style element.
   Body text, descriptions, and list items stay on the default Poppins. */
h1,
h2,
h3,
h4,
h5,
h6,
.heading,
.svc-heading,
.platform-heading,
#changingText,
.pcard-title,
.vcard-title,
.svc-item-title,
.svc-center-text,
.svc-stat-num,
.platform-bar-bold,
.platform-pill-line2 {
  font-family: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
  font-optical-sizing: auto;
}

.heading {
  font-size: clamp(24px, 3.2vw, 35px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #ffffff;
}

/* Subheading (optional if needed) */
.subheading {
  font-size: 20px;
  font-weight: 500;
}

/* Body text */
.text-body {
  font-size: 14px;
  line-height: 1.6;
}

/* Card titles */
.card-title {
  font-size: 14px;
  font-weight: 500;
}

/* Buttons */
.btn-text {
  font-size: 14px;
  font-weight: 500;
}

/* Navbar & links */
.nav-text {
  font-size: 14px;
  font-weight: 500;
}

/* Hide scrollbar */
#testimonialTrack {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* marquee animation */
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  display: inline-block;
  animation: marquee 15s linear infinite;
}

/* MAIN LAYOUT */
.tech-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* BOX */
.tech-box {
  width: 38%;
  padding: 14px;
  border-radius: 14px;
  background: #0b0b0b;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.08);
  position: relative;
  z-index: 2;
}

/* ICON GRID */
.tech-icons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ICON ITEM (IMPORTANT) */
.tech-icons img {
  width: 38px;
  height: 38px;
  padding: 6px;
  background: #050505;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  transition: 0.3s;
}

.tech-icons img:hover {
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
  border-color: rgba(56, 189, 248, 0.8);
}

/* CENTER BOX */
.tech-center {
  position: relative;
  z-index: 3;
}

.tech-core {
  width: 120px;
  height: 120px;
  border-radius: 18px;
  background: linear-gradient(145deg, #1a1a1a, #000);
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.10);
}

/* CONNECTOR LINES */
.line-left,
.line-right {
  position: absolute;
  top: 50%;
  height: 2px;
  width: 18%;
  z-index: 1;
}

.line-left {
  left: 22%;
  background: linear-gradient(to right, transparent, #38bdf8, transparent);
}

.line-right {
  right: 22%;
  background: linear-gradient(to left, transparent, #38bdf8, transparent);
}

/* MOBILE LINES */
.line-top,
.line-bottom {
  display: none;
  position: absolute;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, #38bdf8, transparent);
}

.line-top {
  top: -60px;
  height: 60px;
}

.line-bottom {
  bottom: -60px;
  height: 60px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {

  .tech-main {
    flex-direction: column;
    gap: 30px;
    position: relative;
  }

  .tech-box {
    width: 100%;
  }

  /* REMOVE DESKTOP LINES */
  .line-left,
  .line-right,
  .line-top,
  .line-bottom {
    display: none;
  }

  /* 🔥 SINGLE CONTINUOUS LINE */
  .tech-main::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 80px;
    /* starts below top box */
    bottom: 80px;
    /* ends above bottom box */
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        transparent,
        #38bdf8,
        #38bdf8,
        transparent);
    z-index: 1;
  }

  /* KEEP CONTENT ABOVE LINE */
  .tech-box,
  .tech-center {
    position: relative;
    z-index: 2;
  }

}

/* =====  CTA ===== */

/* BACKGROUND IMAGE */
.cta-bg {
  background: url("images/cta.webp") center/cover no-repeat;
  position: relative;
}

/* OPTIONAL DARK OVERLAY (improves text visibility) */
.cta-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  /* adjust 0.1–0.3 if needed */
}

/* KEEP TEXT ABOVE */
.cta-bg * {
  position: relative;
  z-index: 2;
}

/* ---------------------- */
/* contact us form  */
/* ---------------------- */
.form-input {
  transition: all 0.2s ease;
}

.form-input:focus {
  border-color: rgba(255, 255, 255, 0.5);
}

select {
  background-color: black;
}

/* REMOVE MOBILE GAP COMPLETELY */
.topbar {
  position: relative;
  z-index: 51;
}

.header-fix {
  margin-top: -1px;
  /* kills the gap */
}

/* REMOVE SUBPIXEL RENDER LINE */
@media (max-width: 1024px) {
  .header-fix {
    backdrop-filter: none !important;
    background: #000 !important;
  }
}

/* ================= FAQ ================= */
/* FIX ACTIVE BUTTON FORCE */
.faq-filter.bg-white {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* FAQ list scroll area — thin custom scrollbar */
.faq-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.faq-scroll::-webkit-scrollbar {
  width: 6px;
}

.faq-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.faq-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.faq-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.45);
}


/* GPU ACCELERATION */
.swiper,
.swiper-wrapper,
.swiper-slide,
.tech-box,
.tech-core,
.animate-marquee {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* SMOOTHER RENDERING */
* {
  -webkit-tap-highlight-color: transparent;
}

/* REDUCE HEAVY REPAINTS */
.tech-box {
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.10);
}

.tech-core {
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.12);
}

/* ================================================================== */
/* ================= TECHNOLOGIES — auto-scroll marquee ============= */
/* ================================================================== */

.tech-scroll-wrap {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.tech-scroll-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  will-change: transform;
}

.tech-scroll-track img {
  width: 38px;
  height: 38px;
  padding: 6px;
  background: #050505;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.30);
  flex-shrink: 0;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.25));
}

.tech-scroll-track img:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
}

@keyframes techScrollLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes techScrollRight {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.tech-scroll-left {
  animation: techScrollLeft 28s linear infinite;
}

.tech-scroll-right {
  animation: techScrollRight 28s linear infinite;
}

.tech-scroll-wrap:hover .tech-scroll-track {
  animation-play-state: paused;
}

/* Strengthen center core glow */
.tech-core {
  position: relative;
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.20),
    0 0 40px rgba(56, 189, 248, 0.12),
    inset 0 0 18px rgba(56, 189, 248, 0.08) !important;
  animation: techCorePulse 3s ease-in-out infinite;
}

@keyframes techCorePulse {

  0%,
  100% {
    box-shadow:
      0 0 18px rgba(56, 189, 248, 0.20),
      0 0 40px rgba(56, 189, 248, 0.12),
      inset 0 0 18px rgba(56, 189, 248, 0.08);
  }

  50% {
    box-shadow:
      0 0 26px rgba(56, 189, 248, 0.35),
      0 0 60px rgba(56, 189, 248, 0.20),
      inset 0 0 22px rgba(56, 189, 248, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-scroll-track {
    animation: none;
  }

  .tech-core {
    animation: none;
  }
}

/* ================================================================== */
/* ================= VALUE CARDS (post-hero scroller) =============== */
/* ================================================================== */

.vcard-track-wrap {
  overflow: hidden;
  width: 100%;
}

.vcard-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* CARD */
.vcard {
  position: relative;
  width: 280px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s ease;
}

.vcard:hover {
  border-color: rgba(196, 181, 253, 0.30);
}

/* FULL BG IMAGE */
.vcard-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.vcard:hover .vcard-bg-img {
  transform: scale(1.06);
}

/* DARK OVERLAY — left clearer, right darker for text legibility */
.vcard-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.10) 0%,
      rgba(0, 0, 0, 0.55) 45%,
      rgba(0, 0, 0, 0.88) 100%);
  z-index: 1;
}

/* CONTENT — sits on right side */
.vcard-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px 10px 48%;
}

/* ICON */
.vcard-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--secondary-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary-color) 35%, transparent);
}

.vcard-icon i {
  font-size: 11px;
  color: var(--secondary-color);
}

/* TITLE */
.vcard-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
}

/* DESC */
.vcard-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================================== */
/* ================= PLATFORM SECTION =============================== */
/* ================================================================== */

/* TOP ROW */
.platform-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

/* EYEBROW */
.platform-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.platform-eyebrow span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}

.platform-eyebrow-line {
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.20);
}

/* HEADING */
.platform-heading {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.08);
}

.platform-accent {
  color: var(--secondary-color);
  text-shadow: 0 0 32px color-mix(in srgb, var(--secondary-color) 35%, transparent);
}

/* SUBTEXT */
.platform-subtext {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.65;
  max-width: 440px;
  margin: 0;
}

/* ORBIT */
.platform-orbit-wrap {
  flex-shrink: 0;
  width: 380px;
  filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.04));
}

.platform-orbit-svg {
  width: 100%;
  height: auto;
  opacity: 0.85;
}

/* CARDS GRID */
.platform-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

/* SINGLE CARD */
.pcard {
  position: relative;
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px 20px 0 20px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 28px rgba(255, 255, 255, 0.02),
    0 4px 24px rgba(0, 0, 0, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.40);
}

.pcard:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: #101010;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 40px rgba(255, 255, 255, 0.04),
    0 8px 40px rgba(0, 0, 0, 0.70),
    0 2px 8px rgba(0, 0, 0, 0.50);
}

/* TOP ROW inside card */
.pcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}

/* ICON CIRCLE */
.pcard-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    0 0 16px rgba(255, 255, 255, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.50);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.pcard:hover .pcard-icon-wrap {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    0 0 28px rgba(255, 255, 255, 0.12),
    0 2px 12px rgba(0, 0, 0, 0.60);
}

.pcard-icon-wrap i {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.82);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}

/* NUMBER */
.pcard-num {
  font-size: 36px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.22);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* TITLE ROW with dot connector */
.pcard-divider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.pcard-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.pcard-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.20);
}

/* THIN LINE UNDER TITLE */
.pcard-title-line {
  width: 28px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.18);
  margin-bottom: 14px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.12);
}

/* DESC */
.pcard-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.81);
  line-height: 1.65;
  margin: 0;
  flex: 1;
  text-align: justify;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* BOTTOM ILLUSTRATION */
.pcard-illus {
  margin-top: auto;
  width: 100%;
  height: 110px;
  display: flex;
  align-items: flex-end;
}

.pcard-illus svg {
  width: 100%;
  height: 100%;
}

/* BOTTOM BAR */
.platform-bar {
  display: flex;
  align-items: center;
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 28px;
  flex-wrap: wrap;
  gap: 20px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 32px rgba(255, 255, 255, 0.02),
    0 4px 28px rgba(0, 0, 0, 0.50),
    0 1px 4px rgba(0, 0, 0, 0.35);
}

/* LEFT */
.platform-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 220px;
}

.platform-bar-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 14px rgba(255, 255, 255, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.45);
}

.platform-bar-icon i {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.78);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.22));
}

.platform-bar-tagline {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #ffffffcf !important;
  margin: 0 0 2px 0;
}

.platform-bar-bold {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

/* VERTICAL DIVIDER */
.platform-bar-divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.06);
}

/* PILLS */
.platform-bar-pills {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.platform-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
}

.platform-bar-sep {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.platform-pill-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 10px rgba(255, 255, 255, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.40);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.platform-pill:hover .platform-pill-icon {
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 18px rgba(255, 255, 255, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.50);
}

.platform-pill-icon i {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.18));
}

.platform-pill-line1 {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.3;
}

.platform-pill-line2 {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .platform-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-orbit-wrap {
    width: 260px;
  }
}

@media (max-width: 640px) {
  .platform-top {
    flex-direction: column;
  }

  .platform-orbit-wrap {
    display: none;
  }

  /* Make the 4 cards horizontally scrollable on mobile so each card
     can have a comfortable readable size instead of being squished. */
  .platform-cards {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 12px !important;
    padding: 4px 16px 12px !important;
    margin: 0 -16px !important;
    /* break out of section padding */
    scrollbar-width: none;
  }

  .platform-cards::-webkit-scrollbar {
    display: none;
  }

  .pcard {
    flex: 0 0 80% !important;
    /* show ~1.25 cards at a time */
    max-width: 280px !important;
    scroll-snap-align: start;
    padding: 18px 16px !important;
  }

  .pcard-title {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .pcard-desc {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  .pcard-num {
    font-size: 18px !important;
  }

  .platform-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .platform-bar-divider {
    width: 100%;
    height: 1px;
  }

  .platform-pill {
    padding: 8px 0;
  }

  .platform-bar-sep {
    display: none;
  }
}

/* ================================================================== */
/* ================= PLATFORM CARD ICON COLOR GLOWS ================= */
/* ================================================================== */

/* CARD 1 — Blue + Cyan */
.pcard--1 .pcard-icon-wrap {
  border-color: rgba(99, 179, 237, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(147, 210, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 14px rgba(56, 178, 172, 0.22),
    0 0 30px rgba(66, 153, 225, 0.16),
    0 0 55px rgba(99, 179, 237, 0.10),
    0 2px 10px rgba(0, 0, 0, 0.55);
}

.pcard--1:hover .pcard-icon-wrap {
  border-color: rgba(99, 179, 237, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(147, 210, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 20px rgba(56, 178, 172, 0.35),
    0 0 45px rgba(66, 153, 225, 0.28),
    0 0 75px rgba(99, 179, 237, 0.16),
    0 2px 14px rgba(0, 0, 0, 0.65);
}

.pcard--1 .pcard-icon-wrap i {
  color: rgba(190, 235, 255, 0.92);
  filter:
    drop-shadow(0 0 4px rgba(99, 179, 237, 0.80)) drop-shadow(0 0 12px rgba(56, 178, 172, 0.50));
}

/* CARD 2 — Violet + Purple */
.pcard--2 .pcard-icon-wrap {
  border-color: rgba(167, 139, 250, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(196, 181, 253, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 14px rgba(167, 139, 250, 0.22),
    0 0 30px rgba(139, 92, 246, 0.16),
    0 0 55px rgba(124, 58, 237, 0.10),
    0 2px 10px rgba(0, 0, 0, 0.55);
}

.pcard--2:hover .pcard-icon-wrap {
  border-color: rgba(167, 139, 250, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(196, 181, 253, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 20px rgba(167, 139, 250, 0.38),
    0 0 45px rgba(139, 92, 246, 0.28),
    0 0 75px rgba(124, 58, 237, 0.16),
    0 2px 14px rgba(0, 0, 0, 0.65);
}

.pcard--2 .pcard-icon-wrap i {
  color: rgba(225, 215, 255, 0.92);
  filter:
    drop-shadow(0 0 4px rgba(167, 139, 250, 0.80)) drop-shadow(0 0 12px rgba(139, 92, 246, 0.50));
}

/* CARD 3 — Emerald + Teal */
.pcard--3 .pcard-icon-wrap {
  border-color: rgba(52, 211, 153, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(110, 231, 183, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 14px rgba(52, 211, 153, 0.22),
    0 0 30px rgba(16, 185, 129, 0.16),
    0 0 55px rgba(5, 150, 105, 0.10),
    0 2px 10px rgba(0, 0, 0, 0.55);
}

.pcard--3:hover .pcard-icon-wrap {
  border-color: rgba(52, 211, 153, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(110, 231, 183, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 20px rgba(52, 211, 153, 0.36),
    0 0 45px rgba(16, 185, 129, 0.26),
    0 0 75px rgba(5, 150, 105, 0.14),
    0 2px 14px rgba(0, 0, 0, 0.65);
}

.pcard--3 .pcard-icon-wrap i {
  color: rgba(187, 247, 208, 0.92);
  filter:
    drop-shadow(0 0 4px rgba(52, 211, 153, 0.80)) drop-shadow(0 0 12px rgba(16, 185, 129, 0.50));
}

/* CARD 4 — Amber + Orange */
.pcard--4 .pcard-icon-wrap {
  border-color: rgba(251, 191, 36, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(253, 224, 132, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 14px rgba(251, 191, 36, 0.22),
    0 0 30px rgba(245, 158, 11, 0.16),
    0 0 55px rgba(234, 88, 12, 0.10),
    0 2px 10px rgba(0, 0, 0, 0.55);
}

.pcard--4:hover .pcard-icon-wrap {
  border-color: rgba(251, 191, 36, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(253, 224, 132, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 20px rgba(251, 191, 36, 0.36),
    0 0 45px rgba(245, 158, 11, 0.26),
    0 0 75px rgba(234, 88, 12, 0.14),
    0 2px 14px rgba(0, 0, 0, 0.65);
}

.pcard--4 .pcard-icon-wrap i {
  color: rgba(254, 240, 138, 0.92);
  filter:
    drop-shadow(0 0 4px rgba(251, 191, 36, 0.80)) drop-shadow(0 0 12px rgba(245, 158, 11, 0.50));
}

/* ================================================================== */
/* ================= SERVICES SECTION =============================== */
/* ================================================================== */

.svc-section {
  background: #000;
  padding: 48px 0 0 0;
  overflow: hidden;
}

/* EYEBROW */
.svc-eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.svc-eyebrow span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
}

.svc-eyebrow-line {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.20);
}

/* HEADING */
.svc-heading-wrap {
  text-align: center;
  margin-bottom: 52px;
  padding: 0 20px;
}

.svc-heading {
  font-size: clamp(24px, 3.2vw, 35px);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0 0 14px 0;
  font-style: normal;
}

.svc-subtext {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.70;
  margin: 0;
}

/* MAIN 3-COL LAYOUT */
.svc-main {
  display: grid;
  grid-template-columns: 1fr 480px 1fr;
  align-items: center;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 40px;
  gap: 0;
}

/* COLUMNS */
.svc-col {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.svc-col--left {
  align-items: flex-end;
}

.svc-col--right {
  align-items: flex-start;
  gap: 56px;
}

/* ITEM */
.svc-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svc-item--left {
  align-items: flex-end;
}

.svc-item--right {
  align-items: flex-start;
}

/* BODY */
.svc-item-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 290px;
}

.svc-item-body--right {
  flex-direction: row-reverse;
}

/* ICON */
.svc-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.11);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.50),
    0 0 14px rgba(255, 255, 255, 0.04),
    0 2px 10px rgba(0, 0, 0, 0.55);
}

.svc-icon-wrap i {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.80);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.22));
}

/* TEXT */
.svc-item-text {
  padding-top: 2px;
}

.svc-item-text--right {
  text-align: right;
}

.svc-item-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.svc-item-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.81);
  line-height: 1.65;
  margin: 0;
  max-width: 210px;
}

/* CONNECTOR */
.svc-connector {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.svc-connector--left {
  flex-direction: row;
  justify-content: flex-end;
}

.svc-connector--right {
  flex-direction: row;
  justify-content: flex-start;
}

.svc-num-badge {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.48);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.svc-dash-line {
  flex: 1;
  min-width: 40px;
  height: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
}

/* GLOWING END DOT */
.svc-end-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 10px rgba(255, 255, 255, 0.60),
    0 0 22px rgba(255, 255, 255, 0.28),
    0 0 40px rgba(255, 255, 255, 0.12);
}

/* CENTER TEXT */
.svc-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

/* WRAPPER that holds glow + ring together */
.svc-center-ring-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SOFT WHITE GLOW — behind the circle */
.svc-center-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.08) 25%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(255, 255, 255, 0.015) 65%,
      transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* DOTTED CIRCLE BORDER */
.svc-center-ring {
  position: relative;
  z-index: 1;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: svc-ring-spin 18s linear infinite;

  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.08),
    inset 0 0 24px rgba(255, 255, 255, 0.04);
}

/* counter-rotate text so it stays upright */
.svc-center-text {
  animation: svc-ring-spin-reverse 18s linear infinite;
}

@keyframes svc-ring-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes svc-ring-spin-reverse {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

/* BOLD CENTER TEXT — animation defined in ring block above */
.svc-center-text {
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.45;
  text-align: center;
  margin: 0;
  letter-spacing: -0.02em;
}

/* STATS BAR */
.svc-stats-bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 52px;
  border-radius: 16px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding: 22px 56px;
  background: #0a0a0a;
  box-shadow:
    0 0 30px rgba(56, 189, 248, 0.10),
    0 0 60px rgba(56, 189, 248, 0.05),
    inset 0 1px 0 rgba(56, 189, 248, 0.08);
}

/* CSS custom property registration so the angle is animatable */
@property --svc-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ROTATING GLOWING BORDER — conic gradient that travels around the card */
.svc-stats-bar::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  --svc-border-angle: 0deg;
  background: conic-gradient(from var(--svc-border-angle),
      transparent 0deg,
      transparent 240deg,
      rgba(56, 189, 248, 0.30) 290deg,
      rgba(56, 189, 248, 0.95) 330deg,
      rgba(56, 189, 248, 0.30) 350deg,
      transparent 360deg);
  animation: svcBorderSpin 5s linear infinite;
  pointer-events: none;
}

/* Inner mask — covers everything but the 1px ring at the edge */
.svc-stats-bar::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: calc(16px - 1px);
  background: #0a0a0a;
  pointer-events: none;
}

@keyframes svcBorderSpin {
  to {
    --svc-border-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-stats-bar::before {
    animation: none;
  }
}

.svc-stat {
  display: flex;
  align-items: center;
  gap: 16px;
}

.svc-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 12px rgba(255, 255, 255, 0.03),
    0 2px 8px rgba(0, 0, 0, 0.50);
}

.svc-stat-icon i {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.18));
}

.svc-stat-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.svc-stat-num {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.01em;
}

.svc-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.36);
  line-height: 1.35;
}

.svc-stat-sep {
  width: 2px;
  height: 48px;
  align-self: center;
  background: linear-gradient(to bottom, transparent 0%, rgba(56, 189, 248, 0.85) 50%, transparent 100%);
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.55);
  border-radius: 2px;
  position: relative;
  z-index: 1;
}

/* Global-reach section pills — explicit 12px (overrides the meta-tier 14px) */
.global-pill,
.global-pill * {
  font-size: 12px !important;
}

/* ----------------------------------------------------------
   HERO SECTION — fluid, zoom-stable across every laptop.
   Uses clamp() with vw so every dimension scales with viewport
   width. No fixed pixel paddings, no breakpoint jumps. Looks
   identical at 100% / 110% / 125% browser zoom on any laptop
   from 1280px to 1920px+ wide.
   ---------------------------------------------------------- */
.hero-section {
  padding-top: clamp(72px, 10vh, 140px);
  padding-bottom: clamp(48px, 8vh, 110px);
  min-height: 88vh;
}

.hero-section .hero-heading {
  font-size: clamp(26px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
  min-height: auto !important;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* The block under the heading scales the same way */
.hero-section .text-body,
.hero-section p {
  font-size: clamp(13px, 1.1vw, 16px) !important;
}

/* Thesis-step card numbers — faded with a soft sky-blue glow */
.thesis-step-num {
  color: rgba(255, 255, 255, 0.18) !important;
  text-shadow:
    0 0 6px rgba(56, 189, 248, 0.45),
    0 0 18px rgba(56, 189, 248, 0.25);
}

/* Thesis-step card descriptions — always exactly 2 lines, with a soft
   fade on the bottom edge (replaces the underline divider visually). */
.thesis-step-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, rgba(0, 0, 0, 0.55) 100%);
  mask-image: linear-gradient(to bottom, #000 60%, rgba(0, 0, 0, 0.55) 100%);
}

/* Glowing divider used by Research Support stacked cards.
   Vertical on desktop (between intro + tiles), horizontal on mobile (above tiles). */
.rse-divider {
  position: relative;
}

.rse-divider::before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(56, 189, 248, 0.55), transparent);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
}

@media (min-width: 1024px) {
  .rse-divider::before {
    left: 0;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, transparent, rgba(56, 189, 248, 0.55), transparent);
  }
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .svc-main {
    grid-template-columns: 1fr 400px 1fr;
    padding: 0 28px;
  }

  .svc-stats-bar {
    padding: 24px 44px;
  }

  .svc-item-body {
    max-width: 240px;
  }
}

@media (max-width: 820px) {
  .svc-section {
    padding: 36px 0 0 0;
  }

  .svc-heading-wrap {
    margin-bottom: 36px;
    padding: 0 18px;
  }

  .svc-main {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 18px;
  }

  .svc-col {
    gap: 28px;
  }

  .svc-col--right {
    gap: 28px;
  }

  .svc-center {
    order: -1;
    padding: 8px 0 16px 0;
  }

  .svc-col--left,
  .svc-col--right {
    align-items: flex-start;
  }

  .svc-item--left,
  .svc-item--right {
    align-items: flex-start;
  }

  .svc-item-body,
  .svc-item-body--right {
    max-width: 100%;
    flex-direction: row;
  }

  .svc-item-text--right {
    text-align: left;
  }

  .svc-item-desc {
    max-width: 100%;
  }

  .svc-connector {
    display: none;
  }

  /* center ring scales down */
  .svc-center-ring {
    width: 240px;
    height: 240px;
  }

  .svc-center-glow {
    width: 360px;
    height: 360px;
  }

  .svc-center-text {
    padding: 0 18px;
  }

  .svc-stats-bar {
    margin-top: 36px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
    border-radius: 14px;
    max-width: calc(100% - 36px);
  }

  .svc-stat-sep {
    display: none;
  }

  .svc-stat {
    width: 100%;
  }
}

/* Tiny phones (≤ 380px) */
@media (max-width: 380px) {
  .svc-section {
    padding: 28px 0 0 0;
  }

  .svc-heading-wrap {
    margin-bottom: 28px;
    padding: 0 14px;
  }

  .svc-subtext {
    font-size: 12.5px;
  }

  .svc-main {
    padding: 0 14px;
    gap: 22px;
  }

  .svc-col,
  .svc-col--right {
    gap: 22px;
  }

  .svc-icon-wrap {
    width: 44px;
    height: 44px;
  }

  .svc-icon-wrap i {
    font-size: 15px;
  }

  .svc-item-title {
    font-size: 14px;
  }

  .svc-item-desc {
    font-size: 11.5px;
  }

  .svc-center {
    padding: 4px 0 8px 0;
  }

  .svc-center-ring {
    width: 200px;
    height: 200px;
  }

  .svc-center-glow {
    width: 280px;
    height: 280px;
  }

  .svc-center-text {
    font-size: 13px;
    padding: 0 14px;
  }

  .svc-stats-bar {
    padding: 14px;
    gap: 12px;
    max-width: calc(100% - 28px);
  }

  .svc-stat {
    gap: 12px;
  }

  .svc-stat-icon {
    width: 40px;
    height: 40px;
  }

  .svc-stat-num {
    font-size: 14px;
  }

  .svc-stat-label {
    font-size: 10.5px;
  }
}

/* ================================================================== */
/* ================= RESEARCH SUPPORT ECOSYSTEM ===================== */
/* ================================================================== */


/* ================================================================== */
/* ================= MOBILE RESPONSIVE OVERHAUL ===================== */
/* ================================================================== */
/* Section-by-section mobile fixes. Built incrementally — each section
   we tackle gets its own well-defined block. Currently:
     - Universal overflow guard
     - .announce-bar  (top contact banner)
     - header.site-header  (sticky nav)
     - #home / .hero-section
*/

/* Site brand-gradient button — replaces every flat white CTA pill
   with the brand cyan→sky→blue gradient. The class is intentionally
   high-specificity (.btn-brand on any element) so it wins against
   Tailwind's bg-white. Text + icons stay white. */
.btn-brand,
.btn-brand:visited,
a.btn-brand,
button.btn-brand {
  /* Slightly darker than the heading gradient (cyan-300 / sky-400 /
     blue-500) — bumped each stop one tier deeper for better contrast
     against white text. */
  background: linear-gradient(90deg, #22d3ee 0%, #0ea5e9 50%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35) !important;
  transition: filter .25s ease, box-shadow .25s ease, transform .25s ease;
}

.btn-brand:hover {
  filter: brightness(1.06) saturate(1.06);
  box-shadow: 0 12px 32px rgba(56, 189, 248, 0.45) !important;
  transform: translateY(-1px);
}

.btn-brand * {
  color: #ffffff !important;
}


/* ---------- UNIVERSAL : kill horizontal scroll only ---------- */
/* overflow-x: clip is preferred over hidden because it doesn't
   establish a scroll container — which means position: sticky on the
   header still works correctly on mobile browsers. Fall back to
   hidden for older browsers. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100vw;
}

/* Belt-and-braces: make the header truly stick on all devices */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li {
  overflow-wrap: break-word;
}


/* ====================  GLOBAL BLOB HIDER ========================== */
/* Hide *only* the decorative absolutely-positioned elements that have
   NEGATIVE position offsets — those are the ones bleeding past the
   viewport. Background images and full-bleed overlays (inset-0) are
   intentionally NOT matched, so the visual richness of each section
   is preserved on mobile. */
@media (max-width: 768px) {

  [class*="-top-1"][class*="absolute"][class*="pointer-events-none"],
  [class*="-top-2"][class*="absolute"][class*="pointer-events-none"],
  [class*="-top-3"][class*="absolute"][class*="pointer-events-none"],
  [class*="-top-4"][class*="absolute"][class*="pointer-events-none"],
  [class*="-bottom-1"][class*="absolute"][class*="pointer-events-none"],
  [class*="-bottom-2"][class*="absolute"][class*="pointer-events-none"],
  [class*="-bottom-3"][class*="absolute"][class*="pointer-events-none"],
  [class*="-left-1"][class*="absolute"][class*="pointer-events-none"],
  [class*="-left-2"][class*="absolute"][class*="pointer-events-none"],
  [class*="-left-3"][class*="absolute"][class*="pointer-events-none"],
  [class*="-right-1"][class*="absolute"][class*="pointer-events-none"],
  [class*="-right-2"][class*="absolute"][class*="pointer-events-none"],
  [class*="-right-3"][class*="absolute"][class*="pointer-events-none"] {
    display: none !important;
  }
}


/* ====================  TOPBAR (announcement) ====================== */
/* Hidden entirely on mobile — the contact + experts link is duplicated
   in the footer, so the screen real estate isn't worth the extra height. */
@media (max-width: 1023px) {
  .announce-bar {
    display: none !important;
  }
}


/* ====================  HEADER (sticky navbar) ===================== */
.site-header {
  /* Restrict header width to viewport so the sticky bar never widens
     the page even when desktop content peeks through. */
  width: 100%;
  max-width: 100vw;
}

@media (max-width: 1023px) {
  .site-header .site-header-inner {
    padding-top: 12px !important;
    padding-bottom: 6px !important;
  }

  .site-header .site-brand-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    white-space: nowrap;
  }

  .site-header .site-brand-logo {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
}

/* Mobile horizontal scroll nav (replaces the hamburger drawer) */
.mobile-nav-scroll {
  width: 100%;
  max-width: 100vw;
}

.mobile-nav-scroll-track {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.mobile-nav-scroll-track::-webkit-scrollbar {
  display: none;
}

.mobile-nav-link {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffffcf;
  transition: background-color .2s ease, color .2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:active,
.mobile-nav-link:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}


/* ====================  HERO SECTION  ============================== */
/* Build the hero from scratch on mobile so the desktop clamp() rules
   and 88vh min-height never apply on phones. */

/* Button text — long version is the default, short version hides.
   Classes intentionally do NOT contain the substring "text-" so the
   global span[class*="text-"] rule (which forces #ffffffcf) won't
   match and override the parent button's color. Used in hero CTAs
   and the "Need Help" call-to-action card. */
.btn-label-short {
  display: none;
}

.btn-label-full {
  display: inline;
}

@media (max-width: 768px) {
  .hero-section {
    min-height: auto !important;
    padding-top: 48px !important;
    padding-bottom: 28px !important;
    /* small buffer so rotating
                                           heading text doesn't shift
                                           the section below */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Heading reserves room for the taller rotating variant (3 lines
     of 24px / 1.25 line-height = 90px). When the shorter variant is
     showing, the empty space splits evenly above/below the text via
     flex centering — visually less noticeable than a single big gap. */
  .hero-section .hero-heading {
    min-height: 95px !important;
  }
}

@media (max-width: 380px) {

  /* iPhone SE / Fold */
  .hero-section .hero-heading {
    min-height: 100px !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .hero-section .hero-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  .hero-section .hero-sub {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    max-width: 100% !important;
  }

  /* Keep CTAs side-by-side, never stack. They auto-shrink instead. */
  .hero-section .hero-cta-row {
    gap: 10px !important;
    margin-top: 18px !important;
    flex-wrap: nowrap !important;
  }

  .hero-section .hero-cta-row>a {
    font-size: 13px !important;
    padding: 9px 16px !important;
  }

  .hero-section .hero-features {
    gap: 10px 14px !important;
    margin-top: 18px !important;
    font-size: 13px !important;
  }

  .hero-section .hero-features>div {
    font-size: 13px !important;
  }

  /* Hide the grid + scrim + side-fade decorative overlays on mobile.
     The video itself (.hero-video) stays visible — it's the main
     visual identity of the hero. */
  .hero-section .hero-decor {
    display: none !important;
  }
}

/* Narrow phones — swap any long button text for short labels.
   "Chat on WhatsApp" → "WhatsApp", "Explore Services" → "Services",
   "Call Us Now" → "Call Now". */
@media (max-width: 480px) {
  .hero-section .hero-heading {
    font-size: 22px !important;
  }

  .btn-label-full {
    display: none;
  }

  .btn-label-short {
    display: inline;
  }

  .hero-section .hero-cta-row>a {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }

  .hero-section .hero-sub {
    margin-top: 35px !important;
    margin-bottom: 15px !important;
  }
}


/* ====================  EXPLORE OUR RESEARCH SERVICES (4 cards) === */
/* On mobile, swap from a stacked grid to a horizontal scroller —
   each card is smaller, and the user swipes to see the rest. Matches
   the pattern used for .platform-cards above. */
@media (max-width: 768px) {
  .research-services-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 12px !important;
    padding: 4px 16px 12px !important;
    margin: 24px -16px 0 !important;
    /* break out of section padding */
    scrollbar-width: none;
  }

  .research-services-grid::-webkit-scrollbar {
    display: none;
  }

  /* Each card: about 78% of viewport width, hint that there's more by
     letting the next card peek in. */
  .research-services-grid>a {
    flex: 0 0 78% !important;
    max-width: 280px !important;
    scroll-snap-align: start;
  }

  /* Smaller image, tighter padding, smaller title + body */
  .research-services-grid>a>div:first-child {
    height: 130px !important;
    /* image block */
  }

  .research-services-grid>a>div:last-child {
    padding: 14px !important;
    /* content block */
  }

  .research-services-grid h3 {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .research-services-grid p {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
  }
}


/* ====================  JOURNEY CTA ("Start Your Research Journey") = */
@media (max-width: 768px) {
  .journey-cta {
    padding: 28px 18px !important;
    border-radius: 16px !important;
  }

  .journey-cta-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .journey-cta-buttons {
    gap: 8px !important;
    margin-top: 18px !important;
  }

  .journey-cta-buttons>a {
    font-size: 12.5px !important;
    padding: 8px 14px !important;
  }

  .journey-cta-trust {
    margin-top: 18px !important;
    gap: 6px 14px !important;
    justify-content: center !important;
  }

  .journey-cta-trust>div {
    font-size: 11px !important;
  }

  .journey-cta-trust>div>span {
    font-size: 11px !important;
  }
}


/* ====================  CTA CARD ("Need Help in Your Research") === */
@media (max-width: 768px) {
  .cta-card {
    padding: 28px 18px !important;
    gap: 18px !important;
  }

  .cta-card-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .cta-card-desc {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    margin-top: 12px !important;
    text-align: center !important;
    /* Description balanced across lines, no jagged width imbalance */
    text-wrap: balance;
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .cta-card a[href^="tel:"] {
    padding: 9px 18px !important;
    font-size: 12.5px !important;
  }
}


/* ====================  JOURNAL TRACKING — 5 STEP CARDS =========== */
/* Equal-height descriptions so every card visually balances at the
   same baseline, even when text length varies. */
@media (max-width: 768px) {
  .journal-steps-mobile>div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .journal-steps-mobile h3 {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-top: 4px !important;
  }

  .journal-steps-mobile p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    margin-top: 6px !important;
    min-height: 50px;
    /* enough for 3 lines on a 360px viewport */
    text-wrap: balance;
    text-align: center !important;
    max-width: 90%;
  }
}


/* ====================  SECTION DESCRIPTIONS — JUSTIFIED ========== */
/* Opt-in only. Add class="section-desc" to a paragraph to make it
   render justified on mobile. Everything else keeps its original
   text-alignment — no global side-effects. */
@media (max-width: 768px) {
  .section-desc {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
  }
}


/* Research-support tile labels — bypass the global type-scale crush
   (which would otherwise force these to 14px). Used in the three
   "Research Guidance / Technical Support / Publication Support" cards. */
.rse-tile-label {
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
}
@media (max-width: 768px) {
  .rse-tile-label {
    font-size: 10px !important;
  }
}


/* Hide the orbital diagram graphic on anything below desktop —
   the small surrounding UI labels aren't legible and the image
   takes too much vertical room on phones/tablets. */
@media (max-width: 1023px) {
  .platform-orbit-wrap {
    display: none !important;
  }

  .svc-center {
    display: none !important;
  }
}


/* ====================  PLATFORM BAR — TYPE SCALE (single source) =
   Overrides the global type-scale crush (which was forcing
   .platform-bar-bold and .platform-pill-line2 to the 20px h2 tier).
   Desktop sizes are now smaller and consistent; mobile sizes match. */

/* DESKTOP (≥ 769px) — same scale across all 4 pills */
@media (min-width: 769px) {
  .platform-bar-tagline {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
  }

  .platform-bar-bold {
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }

  .platform-pill-line1 {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
  }

  .platform-pill-line2 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }
}

/* MOBILE (≤ 768px) */
@media (max-width: 768px) {
  .platform-bar {
    padding: 14px !important;
    gap: 12px !important;
  }

  .platform-bar-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .platform-bar-icon i {
    font-size: 14px !important;
  }

  .platform-bar-tagline {
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
  }

  .platform-bar-bold {
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }

  /* 2-column grid. Each pill stretches to fill its cell so the icon
     sits flush at the cell's left edge — that way every pill (left
     OR right column) starts at the same visual offset within its
     column. */
  .platform-bar-pills {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 12px !important;
    width: 100%;
    align-items: center;
    justify-items: stretch !important;
  }

  .platform-pill {
    padding: 0 !important;
    gap: 10px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .platform-pill>div {
    text-align: left !important;
  }

  /* All 4 pills, all 2 lines: identical size, color, weight. */
  .platform-pill-line1,
  .platform-pill-line2 {
    font-size: 12.5px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  /* Hide the inline vertical separators — desktop-only. */
  .platform-bar-sep {
    display: none !important;
  }

  .platform-pill-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .platform-pill-icon i {
    font-size: 11px !important;
  }

  .platform-pill-line1 {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
  }

  .platform-pill-line2 {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
  }

  .platform-bar-sep {
    height: 24px !important;
  }
}


/* ----- Reduced-motion preference ----- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Additional Research Support — rotating sky ring + dots */
.ars-rotating-ring {
  animation: arsRingSpin 16s linear infinite;
  transform-origin: center;
  will-change: transform;
}

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

@media (prefers-reduced-motion: reduce) {
  .ars-rotating-ring {
    animation: none;
  }
}

/* Circular icon with glowing cyan arc on top-left */
.rse-arc-icon {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 18px rgba(56, 189, 248, 0.05),
    0 0 24px rgba(56, 189, 248, 0.08);
}

@media (min-width: 640px) {
  .rse-arc-icon {
    width: 64px;
    height: 64px;
  }
}

/* ================================================================== */
/* ================= THESIS WORKFLOW — sequential card pulse ======== */
/* ================================================================== */

@keyframes thesisPulse {

  0%,
  20%,
  100% {
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow:
      0 0 28px rgba(255, 255, 255, 0.04),
      0 0 60px rgba(255, 255, 255, 0.02) !important;
    transform: translateY(0);
  }

  10% {
    border-color: rgba(56, 189, 248, 0.65) !important;
    box-shadow:
      0 0 30px rgba(56, 189, 248, 0.35),
      0 0 70px rgba(56, 189, 248, 0.18),
      inset 0 0 30px rgba(56, 189, 248, 0.06) !important;
    transform: translateY(-3px);
  }
}

@keyframes thesisIconPulse {

  0%,
  20%,
  100% {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    transform: scale(1);
  }

  10% {
    background-color: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.65);
    color: rgb(186, 230, 253);
    transform: scale(1.12);
  }
}

.thesis-step {
  animation: thesisPulse 12s ease-in-out infinite;
  will-change: box-shadow, border-color, transform;
}

.thesis-step .thesis-step-icon {
  animation: thesisIconPulse 12s ease-in-out infinite;
  will-change: background-color, border-color, color, transform;
}

/* Staggered start so the highlight travels through the cards */
.thesis-step:nth-child(1),
.thesis-step:nth-child(1) .thesis-step-icon {
  animation-delay: 0s;
}

.thesis-step:nth-child(2),
.thesis-step:nth-child(2) .thesis-step-icon {
  animation-delay: 1s;
}

.thesis-step:nth-child(3),
.thesis-step:nth-child(3) .thesis-step-icon {
  animation-delay: 2s;
}

.thesis-step:nth-child(4),
.thesis-step:nth-child(4) .thesis-step-icon {
  animation-delay: 3s;
}

.thesis-step:nth-child(5),
.thesis-step:nth-child(5) .thesis-step-icon {
  animation-delay: 4s;
}

.thesis-step:nth-child(6),
.thesis-step:nth-child(6) .thesis-step-icon {
  animation-delay: 5s;
}

.thesis-step:nth-child(7),
.thesis-step:nth-child(7) .thesis-step-icon {
  animation-delay: 6s;
}

.thesis-step:nth-child(8),
.thesis-step:nth-child(8) .thesis-step-icon {
  animation-delay: 7s;
}

.thesis-step:nth-child(9),
.thesis-step:nth-child(9) .thesis-step-icon {
  animation-delay: 8s;
}

.thesis-step:nth-child(10),
.thesis-step:nth-child(10) .thesis-step-icon {
  animation-delay: 9s;
}

@media (prefers-reduced-motion: reduce) {

  .thesis-step,
  .thesis-step .thesis-step-icon {
    animation: none;
  }
}

/* ================================================================== */
/* ================= TESTIMONIALS — sequential card pulse =========== */
/* ================================================================== */

@keyframes testimonialPulse {

  0%,
  22%,
  100% {
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 0 0 rgba(56, 189, 248, 0) !important;
    transform: translateY(0);
  }

  10% {
    border-color: rgba(56, 189, 248, 0.55) !important;
    box-shadow:
      0 0 30px rgba(56, 189, 248, 0.22),
      0 0 70px rgba(56, 189, 248, 0.10) !important;
    transform: translateY(-4px);
  }
}

.testimonial-card {
  animation: testimonialPulse 14s ease-in-out infinite;
  will-change: box-shadow, border-color, transform;
}

.testimonial-card:nth-child(1) {
  animation-delay: 0s;
}

.testimonial-card:nth-child(2) {
  animation-delay: 2s;
}

.testimonial-card:nth-child(3) {
  animation-delay: 4s;
}

.testimonial-card:nth-child(4) {
  animation-delay: 6s;
}

.testimonial-card:nth-child(5) {
  animation-delay: 8s;
}

.testimonial-card:nth-child(6) {
  animation-delay: 10s;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-card {
    animation: none;
  }
}

/* ================================================================== */
/* ================= CTA DOT PATTERN (Start Your Journey) =========== */
/* ================================================================== */

.cta-dots {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.30) 1.2px, transparent 1.5px);
  background-size: 14px 14px;
  background-position: center;
}

.cta-dots--left {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 88%, transparent 100%);
}

.cta-dots--right {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 35%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to left, transparent 0%, #000 35%, #000 88%, transparent 100%);
}

/* The arc itself — conic gradient masked into a 1.5px ring */
.rse-arc-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 210deg,
      rgba(255, 255, 255, 0.06) 0deg,
      rgba(255, 255, 255, 0.95) 70deg,
      rgba(255, 255, 255, 0.60) 110deg,
      rgba(255, 255, 255, 0.06) 180deg,
      rgba(255, 255, 255, 0.06) 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.50));
}

/* ================================================================== */
/* ===================  MOBILE SCROLL PERFORMANCE  ================== */
/* ================================================================== */

/* ================================================================== */
/* ===================  CONTACT SECTION SLIDESHOW  ================== */
/* ================================================================== */

.contact-slide {
  opacity: 0;
  animation: contactSlideFade 20s infinite;
  will-change: opacity;
}

@keyframes contactSlideFade {
  0% {
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  24% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* GPU-promote the value-cards track and other continuously animating layers */
.vcard-track {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Hero video: keep it on its own layer so it doesn't repaint the page */
#heroVideo {
  transform: translateZ(0);
  will-change: transform;
}

/* Mobile-only relief: backdrop-blur and huge shadow blurs are the biggest
   sources of scroll jank on phone GPUs. Tone them down (or remove) on small
   viewports — desktop keeps the full effect. */
@media (max-width: 768px) {

  /* drop backdrop-blur entirely on mobile — repaint cost is brutal */
  .backdrop-blur-sm,
  .backdrop-blur,
  .backdrop-blur-md,
  .backdrop-blur-lg,
  .backdrop-blur-xl,
  [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Tame the giant ambient-glow radial gradients that repaint on every scroll */
  [class*="rounded-full"][class*="bg-[radial-gradient"] {
    opacity: 0.5;
  }

  /* Stop heavy filter/blur effects from re-running during scroll */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Disable the testimonial pulse + thesis pulse on mobile (constant repaints) */
  .thesis-step,
  .testimonial-card {
    animation: none !important;
  }
}

/* Respect users who explicitly want less motion */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}