/* =========================================================
   Influmind Media — Apple design language
   Tokens sourced from DESIGN-apple.md
   ========================================================= */

:root {
  /* Brand & accent */
  --primary: #0066cc;
  --primary-focus: #0071e3;
  --primary-on-dark: #2997ff;

  /* Surface */
  --canvas: #ffffff;
  --canvas-parchment: #f5f5f7;
  --surface-pearl: #fafafc;
  --surface-tile-1: #272729;
  --surface-tile-2: #2a2a2c;
  --surface-black: #000000;

  /* Text */
  --ink: #1d1d1f;
  --body-on-dark: #ffffff;
  --body-muted: #cccccc;
  --ink-muted-80: #333333;
  --ink-muted-48: #7a7a7a;

  /* Hairlines */
  --hairline: #e0e0e0;
  --divider-soft: #f0f0f0;

  /* Shadow — the single system product shadow */
  --product-shadow: 0 5px 30px 3px rgba(0, 0, 0, 0.22);

  /* Radii */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;

  /* Spacing */
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 17px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 80px;

  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  --maxw: 980px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--canvas);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: var(--primary); text-decoration: none; }

/* =========================================================
   GLOBAL NAV
   ========================================================= */
/* floating glassmorphism navbar */
.global-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 92%);
  height: 58px;
  z-index: 100;
  border-radius: 20px;
  color: var(--body-on-dark);
  background: rgba(8, 12, 22, 0.55);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, top 0.35s ease;
}
.global-nav.is-scrolled {
  top: 10px;
  background: rgba(8, 12, 22, 0.78);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 200, 150, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.global-nav__inner {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  height: 100%;
  padding: 0 14px 0 18px;
  display: flex;
  align-items: center;
  gap: var(--s-lg);
}
.global-nav__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--body-on-dark);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.global-nav__brand img { width: 28px; height: 28px; border-radius: 7px; }

.global-nav__links {
  list-style: none;
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.global-nav__links a {
  color: #e6ebf2;
  font-size: 13px;
  letter-spacing: -0.1px;
  opacity: 0.82;
  transition: opacity 0.2s, color 0.2s;
}
.global-nav__links a:hover { opacity: 1; color: #fff; }
.global-nav__links a[aria-current="page"] { opacity: 1; color: #8ff0d4; }
.global-nav__links a:active { opacity: 1; }

.global-nav__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 26px;
}

.global-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
}
.global-nav__toggle span {
  display: block;
  height: 1.5px;
  width: 18px;
  background: var(--body-on-dark);
  transition: transform 0.25s, opacity 0.25s;
}
.global-nav__toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.global-nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.global-nav__toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  transition: transform 0.12s ease, background 0.2s ease;
}
.btn:active { transform: scale(0.96); }

/* premium gradient primary */
.btn--pill {
  background: linear-gradient(135deg, #00C896 0%, #0A84FF 100%);
  background-size: 160% 160%;
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  padding: 12px 24px;
  box-shadow: 0 8px 24px rgba(10, 132, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, background-position 0.5s ease;
}
.btn--pill:hover {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 14px 36px rgba(0, 200, 150, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn--pill:active { transform: scale(0.96); }

/* glass secondary */
.btn--pill-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #e6ebf2;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  font-size: 17px;
  padding: 11px 23px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.25s ease, background 0.3s ease, border-color 0.3s ease;
}
.btn--pill-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 200, 150, 0.45);
  transform: translateY(-2px);
}
.btn--pill-ghost:active { transform: scale(0.96); }
.btn--sm { font-size: 13px; padding: 7px 16px; }
.btn--lg {
  font-size: 18px;
  font-weight: 300;
  padding: 14px 30px;
}
.btn:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }

/* =========================================================
   TILES (full-bleed alternating sections)
   ========================================================= */
.tile {
  padding: var(--s-section) 22px;
}
.tile--light { background: var(--canvas); color: var(--ink); }
.tile--parchment { background: var(--canvas-parchment); color: var(--ink); }
.tile--dark { background: var(--surface-tile-1); color: var(--body-on-dark); }

.tile__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.center { text-align: center; }
.center-row { justify-content: center; }

/* =========================================================
   TYPOGRAPHY HELPERS
   ========================================================= */
.hero__headline {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.28px;
}
.display-lg {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.display-md {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.374px;
}
.tagline { font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: -0.231px; }
.lead {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink-muted-80);
}
.lead--narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
.body { font-size: 17px; line-height: 1.47; }
.body-lg { font-size: 19px; line-height: 1.5; color: var(--ink-muted-80); }

.on-dark { color: var(--body-on-dark) !important; }
.on-dark-muted { color: var(--body-muted) !important; }

.eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--s-sm);
}
.eyebrow--dark { color: var(--primary-on-dark); }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding-top: 96px; padding-bottom: 96px; }
.hero .tile__inner { text-align: center; }
.hero__logo {
  width: 320px;
  max-width: 80%;
  margin: 0 auto var(--s-xl);
}

/* ---------- Dark premium hero ---------- */
.hero--dark {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 760px at 50% 115%, #061226 0%, #020617 55%, #000814 100%),
    #000814;
  color: #fff;
}
.hero--dark .hero__logo {
  width: 108px;
  /* drop-shadow follows the icon's rounded shape (no square box behind transparent png) */
  filter: drop-shadow(0 8px 28px rgba(34, 197, 94, 0.38));
}
.hero--dark .hero__headline { color: #ffffff; }
.hero--dark .lead { color: #aab4c5; }
.hero--dark .platforms__label { color: #6b7689; }
.hero--dark .btn--pill-ghost { color: #7cc6ff; border-color: rgba(124, 198, 255, 0.5); }
.hero--dark .btn--pill-ghost:hover { background: rgba(124, 198, 255, 0.08); }

.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero--dark .tile__inner { position: relative; z-index: 1; }

/* aurora sweep — large blended radial blobs, slowest layer */
.hero__aurora {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 46% at 22% 28%, rgba(0, 200, 150, 0.30), transparent 70%),
    radial-gradient(42% 52% at 82% 22%, rgba(10, 132, 255, 0.26), transparent 72%),
    radial-gradient(46% 56% at 62% 92%, rgba(0, 200, 150, 0.20), transparent 72%),
    radial-gradient(40% 50% at 14% 86%, rgba(10, 132, 255, 0.18), transparent 72%);
  filter: blur(50px);
  will-change: transform, opacity;
  animation: auroraDrift 19s ease-in-out infinite;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1);      opacity: 0.9; }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1);      opacity: 0.9; }
}

/* glowing gradient orbs — emerald + electric blue, each its own speed */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  will-change: transform, opacity;
}
.orb--emerald {
  width: 480px; height: 480px; background: #00C896;
  top: -140px; left: -90px;
  animation: orbFloat1 15s ease-in-out infinite;
}
.orb--teal {
  width: 400px; height: 400px; background: #00C896;
  bottom: -160px; left: 36%;
  opacity: 0.3;
  animation: orbFloat2 20s ease-in-out infinite;
}
.orb--blue {
  width: 520px; height: 520px; background: #0A84FF;
  top: -120px; right: -130px;
  opacity: 0.36;
  animation: orbFloat3 17s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%,100% { transform: translate3d(0,0,0) scale(1);     opacity: 0.4; }
  50%     { transform: translate3d(60px,50px,0) scale(1.08); opacity: 0.5; }
}
@keyframes orbFloat2 {
  0%,100% { transform: translate3d(0,0,0) scale(1);      opacity: 0.3; }
  50%     { transform: translate3d(-50px,-40px,0) scale(1.12); opacity: 0.42; }
}
@keyframes orbFloat3 {
  0%,100% { transform: translate3d(0,0,0) scale(1);      opacity: 0.36; }
  50%     { transform: translate3d(-40px,60px,0) scale(1.06); opacity: 0.46; }
}

/* keep the centre darker so the headline stays the focal point */
.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 52% 46% at 50% 42%, rgba(2, 6, 23, 0.78) 0%, rgba(2, 6, 23, 0.35) 45%, transparent 75%);
  pointer-events: none;
}

/* subtle film grain for premium depth (~5%) */
.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* faint dotted grid for depth */
.hero__grid {
  position: absolute;
  inset: -2px;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 80%);
}

/* floating marketing elements */
.float {
  position: absolute;
  opacity: 0.16;
  will-change: transform;
}
.float--chart { width: 150px; top: 16%;  left: 7%;  animation: drift1 16s ease-in-out infinite; }
.float--bars  { width: 92px;  bottom: 16%; left: 12%; animation: drift2 19s ease-in-out infinite; }
.float--heart { width: 50px;  top: 24%;  right: 12%; animation: drift3 14s ease-in-out infinite; }
.float--play  { width: 60px;  bottom: 20%; right: 9%; animation: drift1 21s ease-in-out infinite; }
.float--chat  { width: 52px;  top: 12%;  left: 44%;  animation: drift2 17s ease-in-out infinite; }
.float--arrow { width: 48px;  bottom: 26%; right: 30%; animation: drift3 15s ease-in-out infinite; }
.float--ring  { width: 64px;  top: 30%;  left: 26%;  animation: drift1 23s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(4deg); } }
@keyframes drift2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(18px); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-16px); } }

@media (max-width: 640px) {
  .float--chat, .float--ring, .float--arrow { display: none; }
  .orb { filter: blur(70px); }
  .hero__aurora { filter: blur(40px); }
}
@media (prefers-reduced-motion: reduce) {
  .orb, .float, .hero__aurora { animation: none; }
}

/* Hero entrance — staggered fade-up on load */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.hero__logo,
.hero__brand,
.hero__headline,
.hero__subhead,
.hero .lead,
.hero .cta-row {
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero__logo     { animation-delay: 0.05s; }
.hero__brand    { animation-delay: 0.12s; }
.hero__headline { animation-delay: 0.22s; }
.hero__subhead  { animation-delay: 0.32s; }
.hero .lead     { animation-delay: 0.42s; }
.hero .cta-row  { animation-delay: 0.57s; }

.hero__subhead {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-top: var(--s-md);
  color: #d6dee9;
}
.hero--dark .hero__subhead { color: #e6ebf2; }
@media (max-width: 640px) { .hero__subhead { font-size: 18px; } }

.hero__brand {
  font-family: "Poppins", var(--font);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: var(--s-lg);
  color: #36a6c4; /* fallback if background-clip:text unsupported */
  background: linear-gradient(100deg, #4fae5a 0%, #3fb6a8 35%, #36a6c4 65%, #4a9fd6 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* run entrance fade-up AND the gradient shimmer together */
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards,
             brandShimmer 6s ease-in-out 0.12s infinite;
}
@keyframes brandShimmer {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}
@media (max-width: 640px) { .hero__brand { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) {
  .hero__brand {
    animation: fadeUp 0.9s ease 0.12s forwards;
    background-position: 0% center;
  }
}
.hero .lead { margin: var(--s-lg) auto 0; max-width: 640px; }
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  margin-top: var(--s-xl);
}
.hero .cta-row { justify-content: center; }

/* Platforms strip */
.platforms {
  margin-top: var(--s-xxl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-md);
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.62s forwards;
}
.platforms__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-muted-48);
}
/* ---- Seamless infinite logo marquee ---- */
.marquee {
  width: 100%;
  max-width: 1100px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: 60px; /* equal spacing makes both halves symmetric → seamless */
  opacity: 0.9;
}
.brand-lockup .bi {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}
.brand-lockup span {
  font-family: "Poppins", var(--font);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.3px;
  color: #c7d0de;
  white-space: nowrap;
}

/* move left by exactly one full set (half the doubled track) — no pause, no jump */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Hero showcase photo resting on surface */
.hero__showcase {
  margin: var(--s-xxl) auto 0;
  max-width: 900px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--product-shadow);
}
.hero__showcase img {
  width: 100%;
  height: 440px;
  object-fit: cover;
}

/* Photo-backed tiles */
.has-bg { position: relative; overflow: hidden; }
.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg) center/cover no-repeat;
  opacity: 0.22;
  transform: scale(1.05);
  z-index: 0;
}
.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,22,0.82), rgba(20,20,22,0.92));
  z-index: 0;
}
.has-bg .tile__inner { position: relative; z-index: 1; }

/* =========================================================
   STATS
   ========================================================= */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xl);
  margin-top: var(--s-xxl);
}
.stat { text-align: center; }
.stat__num {
  display: block;
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.5px;
  color: #fff;
}
.stat__plus { color: var(--primary-on-dark); }
.stat__label {
  display: block;
  margin-top: var(--s-sm);
  font-size: 17px;
  color: var(--body-muted);
}

/* =========================================================
   SPLIT (service rows)
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--s-xxl);
}
.split--reverse .split__text { order: 2; }
.split--reverse .split__visual { order: 1; }
.split__text .eyebrow { margin-top: 0; }
.split__text h3 { margin-bottom: var(--s-md); }

.split__visual { display: flex; justify-content: center; margin: 0; }
.split__visual img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--product-shadow);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.split__visual:hover img { transform: translateY(-6px) scale(1.01); }

/* small colored brand icon inside chips */
.chip-ic { flex: 0 0 auto; margin-right: 7px; }
.chip-row li { display: inline-flex; align-items: center; }
.glyph {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  background: var(--surface-pearl);
  color: var(--primary);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.glyph:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--product-shadow); }
.glyph svg { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.glyph:hover svg { transform: scale(1.06); }
.tile--dark .glyph { background: var(--surface-tile-2); color: var(--primary-on-dark); }
.tile--dark .glyph.on-dark { color: var(--primary-on-dark); }

.chip-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s-lg);
}
.chip-row li {
  font-size: 14px;
  letter-spacing: -0.224px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  color: var(--ink);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.chip-row li:hover { transform: translateY(-2px); border-color: var(--primary); }
.chip-row--dark li {
  background: var(--surface-tile-2);
  border-color: #3a3a3c;
  color: var(--body-on-dark);
}

/* =========================================================
   TWO-UP (who we work with)
   ========================================================= */
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-lg);
  margin-top: var(--s-xxl);
  text-align: left;
}
.two-up__card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.two-up__card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); }
.two-up__card h4 { margin-bottom: var(--s-sm); }
.two-up__card .body { color: var(--ink-muted-80); }

/* =========================================================
   ABOUT
   ========================================================= */
.about { max-width: 820px; }
.about__lead {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.4px;
  text-align: center;
  margin: var(--s-md) 0 var(--s-lg);
}
.about__body { text-align: center; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-xl);
  margin-top: var(--s-xxl);
}
.contact__links a {
  color: var(--primary-on-dark);
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.contact__links a:hover { opacity: 0.85; transform: translateY(-1px); }
.link-ic { flex: 0 0 auto; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  padding: 64px 22px 32px;
}
.footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: var(--s-xxl);
}
.footer__brand img { width: 40px; height: 40px; border-radius: var(--r-sm); margin-bottom: var(--s-md); }
.footer__tag { font-size: 14px; color: var(--ink-muted-48); }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-lg);
}
.footer__col h5 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.224px;
  color: var(--ink);
  margin-bottom: var(--s-sm);
}
.footer__col a {
  display: block;
  color: var(--ink-muted-80);
  font-size: 14px;
  line-height: 2.2;
}
.footer__legal {
  max-width: 1100px;
  margin: var(--s-xxl) auto 0;
  padding-top: var(--s-lg);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-xs);
  font-size: 12px;
  color: var(--ink-muted-48);
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Staggered reveal for the stats row */
.stats__grid .stat:nth-child(2) { transition-delay: 0.12s; }
.stats__grid .stat:nth-child(3) { transition-delay: 0.24s; }
.stat__plus { transition: transform 0.3s ease; }
.stat:hover .stat__plus { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
  .hero__logo, .hero__headline, .hero .lead, .hero .cta-row { opacity: 1; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1023px) {
  .hero__headline { font-size: 48px; }
}

@media (max-width: 833px) {
  .global-nav__links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    border-radius: 18px;
    background: rgba(8, 12, 22, 0.92);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    padding: 8px 18px 14px;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
    margin-left: 0;
  }
  .global-nav__links.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .global-nav__links a { display: block; padding: 13px 0; font-size: 15px; opacity: 1; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .global-nav__links li:last-child a { border-bottom: none; }
  .global-nav__right { margin-left: auto; }
  .global-nav__toggle { display: flex; }

  .hero__headline { font-size: 40px; }
  .display-lg { font-size: 34px; }
  .display-md { font-size: 28px; }
  .lead { font-size: 24px; }

  .split { grid-template-columns: 1fr; gap: var(--s-xl); text-align: center; }
  .split--reverse .split__text,
  .split--reverse .split__visual { order: 0; }
  .split .chip-row { justify-content: center; }
  .glyph { width: 180px; height: 180px; }
  .split__visual img { height: 300px; }
  .hero__showcase img { height: 320px; }
}

@media (max-width: 640px) {
  .tile { padding: 56px 20px; }
  .hero { padding-top: 64px; padding-bottom: 64px; }
  .hero__headline { font-size: 32px; }
  .display-lg { font-size: 28px; }
  .lead { font-size: 21px; }
  .stats__grid { grid-template-columns: 1fr; gap: var(--s-xl); }
  .stat__num { font-size: 52px; }
  .two-up { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: var(--s-xl); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .cta-row .btn { width: 100%; }
  .contact__links { gap: var(--s-md); flex-direction: column; }
  .split__visual img { height: 240px; }
  .hero__showcase img { height: 220px; }
  .platforms__list li { width: 48px; height: 48px; }
  .platforms__list svg { width: 32px; height: 32px; }
}

@media (max-width: 419px) {
  .hero__headline { font-size: 28px; }
}

/* =========================================================
   HOW WE WORK PAGE
   (reuses global tokens, dark hero palette & components)
   ========================================================= */
:root {
  --hw-navy: #020617;
  --hw-navy-2: #060d1d;
  --hw-black: #000814;
  --emerald: #00C896;
  --eblue: #0A84FF;
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.09);
}

.page-dark { background: var(--hw-black); }

/* shared dark section */
.hw-section {
  position: relative;
  padding: var(--s-section) 22px;
  background: var(--hw-black);
  color: #fff;
  overflow: hidden;
}
.hw-section--alt {
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(10, 132, 255, 0.07), transparent 60%),
    radial-gradient(800px 500px at 10% 100%, rgba(0, 200, 150, 0.07), transparent 60%),
    var(--hw-navy);
}
.tile__inner--narrow { max-width: 820px; }

.hw-head { margin-bottom: var(--s-xxl); }
.hw-head .display-lg { margin-top: 6px; }
.hw-head .lead { margin-top: var(--s-md); }

/* hero tweaks */
.hw-hero { padding-top: 120px; padding-bottom: 90px; }
.hw-hero .hero__headline { max-width: 920px; margin-left: auto; margin-right: auto; }
.hw-hero .eyebrow { margin-bottom: var(--s-md); }

/* interactive phase rail in hero */
.phase-rail {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: var(--s-xxl) auto 0;
  max-width: 760px;
}
.phase-rail li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.phase-rail li:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 200, 150, 0.6);
  background: rgba(0, 200, 150, 0.08);
}
.phase-rail__num {
  font-family: "Poppins", var(--font);
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(120deg, var(--emerald), var(--eblue));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.phase-rail__label { font-size: 14px; color: #cdd7e5; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding: 8px 0; }
.timeline__line {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.timeline__fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--emerald), var(--eblue));
  box-shadow: 0 0 16px rgba(0, 200, 150, 0.6);
  border-radius: 2px;
  transition: height 0.15s linear;
}

.tl-step { position: relative; width: 50%; padding: 16px 48px; box-sizing: border-box; }
.tl-step:nth-of-type(odd) { left: 0; }
.tl-step:nth-of-type(even) { left: 50%; }

.tl-marker {
  position: absolute;
  top: 22px;
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Poppins", var(--font);
  font-weight: 700; font-size: 16px;
  color: #cfe9e0;
  background: var(--hw-navy);
  border: 1px solid var(--glass-border);
  z-index: 2;
  transition: transform 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.tl-step:nth-of-type(odd) .tl-marker { right: -25px; }
.tl-step:nth-of-type(even) .tl-marker { left: -25px; }
.tl-step.is-visible .tl-marker {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--emerald), var(--eblue));
  box-shadow: 0 0 0 5px rgba(0, 200, 150, 0.12), 0 8px 24px rgba(10, 132, 255, 0.35);
  transform: scale(1.06);
}

/* ---------- Glass cards ---------- */
.glass-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease;
}
.glass-card:hover { transform: translateY(-5px); border-color: rgba(0, 200, 150, 0.35); }
.glass-card__glow {
  position: absolute;
  top: -40%; right: -30%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(0, 200, 150, 0.22), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.tl-step__icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--emerald), var(--eblue));
  box-shadow: 0 8px 24px rgba(0, 200, 150, 0.3);
  margin-bottom: var(--s-md);
}
.tl-step__title { font-size: 23px; font-weight: 700; letter-spacing: -0.4px; color: #fff; margin-bottom: 10px; }
.tl-step__desc { font-size: 16px; line-height: 1.55; color: #aeb9c9; }

.deliverables {
  list-style: none;
  margin-top: var(--s-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}
.deliverables li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: #d4dce7;
  line-height: 1.5;
}
.deliverables li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--emerald);
  border-bottom: 2px solid var(--emerald);
  transform: rotate(-45deg);
}

/* platforms inside step 05 */
.step-platforms { margin-top: var(--s-lg); padding-top: var(--s-md); border-top: 1px solid var(--glass-border); }
.step-platforms__label { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: #7f8ba0; }
.step-platforms__list { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.step-platforms__list li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #cdd7e5; }

/* ---------- Responsibilities ---------- */
.resp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
.resp-card__title { font-size: 14px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: var(--s-md); }
.resp-card__title--you { color: var(--emerald); }
.resp-card__title--we { color: var(--eblue); }
.resp-card__title--result {
  background: linear-gradient(120deg, var(--emerald), var(--eblue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.resp-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.resp-list li { position: relative; padding-left: 24px; font-size: 16px; color: #dce3ee; }
.resp-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--emerald), var(--eblue));
}
.resp-card--result { display: flex; flex-direction: column; justify-content: center; }
.resp-card__result-text { font-size: 19px; line-height: 1.45; color: #fff; font-weight: 600; letter-spacing: -0.3px; }

/* ---------- Roadmap ---------- */
.roadmap {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-lg);
  position: relative;
}
.roadmap__step {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease;
}
.roadmap__step:hover { transform: translateY(-5px); border-color: rgba(10, 132, 255, 0.4); }
.roadmap__week {
  display: inline-block;
  font-family: "Poppins", var(--font);
  font-weight: 700; font-size: 13px;
  color: #04121f;
  background: linear-gradient(135deg, var(--emerald), var(--eblue));
  padding: 5px 12px; border-radius: var(--r-pill);
  margin-bottom: var(--s-md);
}
.roadmap__dot {
  position: absolute; top: 30px; right: 24px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 12px var(--emerald);
}
.roadmap__title { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: -0.3px; }
.roadmap__desc { font-size: 14px; line-height: 1.55; color: #aeb9c9; }

/* ---------- FAQ ---------- */
.faq { margin-top: var(--s-xl); }
.faq__item { border-bottom: 1px solid var(--glass-border); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer;
  padding: 22px 4px;
  text-align: left;
  font-family: var(--font);
  font-size: 18px; font-weight: 600; letter-spacing: -0.3px;
  color: #eef2f8;
}
.faq__icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--emerald); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq__icon::before { width: 14px; height: 2px; }
.faq__icon::after { width: 2px; height: 14px; }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq__a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq__a p { padding: 0 4px 22px; font-size: 16px; line-height: 1.6; color: #aeb9c9; }

/* ---------- Final CTA ---------- */
.hw-cta { padding-top: 90px; padding-bottom: 90px; }

/* ---------- Responsive ---------- */
@media (max-width: 833px) {
  .timeline__line { left: 22px; }
  .tl-step,
  .tl-step:nth-of-type(odd),
  .tl-step:nth-of-type(even) { width: 100%; left: 0; padding: 12px 0 12px 60px; }
  .tl-step:nth-of-type(odd) .tl-marker,
  .tl-step:nth-of-type(even) .tl-marker { left: -3px; right: auto; }
  .resp-grid { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .deliverables { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr; }
  .tl-step__title { font-size: 20px; }
  .faq__q { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline__fill { transition: none; }
}

/* =========================================================
   CAREERS PAGE
   (reuses global tokens, dark hero palette & glass cards)
   ========================================================= */

/* "We're Hiring" badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  margin-bottom: var(--s-lg);
  border-radius: var(--r-pill);
  background: rgba(0, 200, 150, 0.1);
  border: 1px solid rgba(0, 200, 150, 0.4);
  color: #8ff0d4;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.badge__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 10px var(--emerald);
  animation: badgePulse 2.4s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* ---------- Open positions ---------- */
.positions { display: flex; flex-direction: column; gap: var(--s-lg); }

.job-card { padding: 30px 32px; }
.job-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-md);
}
.job-card__dept {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--eblue);
  margin-bottom: 6px;
}
.job-card__title { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: #fff; }
.job-card__apply { flex: 0 0 auto; }

.job-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: var(--s-lg) 0;
  padding: var(--s-md) 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
.job-meta li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 15px;
  color: #e3e9f2;
  font-weight: 600;
}
.job-meta li span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #7f8ba0;
}

.job-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.job-skills span {
  font-size: 13px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: #cdd7e5;
}

.job-card__toggle {
  margin-top: var(--s-lg);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--emerald);
  padding: 0;
  transition: opacity 0.2s ease;
}
.job-card__toggle:hover { opacity: 0.8; }

.job-card__details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.job-block { margin-top: var(--s-lg); }
.job-block:first-child { margin-top: var(--s-md); }
.job-block h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 10px;
}
.job-block p { font-size: 16px; line-height: 1.6; color: #aeb9c9; }
.job-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.job-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.5;
  color: #d4dce7;
}
.job-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--emerald);
  border-bottom: 2px solid var(--emerald);
  transform: rotate(-45deg);
}

/* 5-step process roadmap */
.roadmap--process { grid-template-columns: repeat(5, 1fr); }

/* ---------- Why work with us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-lg);
}
.why-card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--emerald), var(--eblue));
  box-shadow: 0 8px 24px rgba(0, 200, 150, 0.28);
  margin-bottom: var(--s-md);
}
.why-card__title { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; color: #fff; margin-bottom: 8px; }
.why-card__desc { font-size: 15px; line-height: 1.55; color: #aeb9c9; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .roadmap--process { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .roadmap--process { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .job-card { padding: 24px 22px; }
  .job-card__head { flex-direction: column; }
  .job-card__title { font-size: 22px; }
}

/* =========================================================
   PRICING PAGE
   (reuses global tokens, dark hero palette & glass cards)
   ========================================================= */
.pricing-hero { padding-top: 116px; padding-bottom: 90px; }
.pricing-hero .badge { margin-bottom: var(--s-md); }
.pricing-hero .hw-head { margin-bottom: var(--s-xl); }

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: var(--s-lg);
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: 34px 32px;
  text-align: left;
  height: 100%;
}
.price-card__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
  line-height: 1.2;
}

/* price block */
.price-amount { display: flex; align-items: baseline; gap: 12px; margin: var(--s-md) 0 var(--s-sm); }
.price-amount__main {
  font-family: "Poppins", var(--font);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(120deg, var(--emerald), var(--eblue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.price-amount__alt { font-size: 16px; color: #8b96a8; font-weight: 600; }
.price-card__desc { font-size: 16px; line-height: 1.55; color: #aeb9c9; margin-bottom: var(--s-lg); }

/* custom (featured) price replacement */
.price-custom { margin: var(--s-md) 0 var(--s-lg); }
.price-custom__head {
  font-family: "Poppins", var(--font);
  font-size: 22px; font-weight: 700; letter-spacing: -0.4px;
  background: linear-gradient(120deg, var(--emerald), var(--eblue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.price-custom__text { font-size: 16px; line-height: 1.55; color: #aeb9c9; }

/* highlight pill */
.price-pill {
  align-self: flex-start;
  font-size: 13px; font-weight: 700; letter-spacing: 0.4px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  color: #9ff0d8;
  background: rgba(0, 200, 150, 0.1);
  border: 1px solid rgba(0, 200, 150, 0.35);
  margin-bottom: var(--s-lg);
}
.price-pill--bright {
  color: #04121f;
  background: linear-gradient(135deg, var(--emerald), var(--eblue));
  border-color: transparent;
}

/* included list */
.price-list__head {
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: #7f8ba0; margin-bottom: var(--s-md);
}
.price-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--s-lg); }
.price-list--two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.price-list li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.5;
  color: #dce3ee;
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 4px;
  width: 13px; height: 8px;
  border-left: 2.5px solid var(--emerald);
  border-bottom: 2.5px solid var(--emerald);
  transform: rotate(-45deg);
}

/* note box */
.price-note {
  margin-top: auto;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  font-size: 15px; line-height: 1.5; color: #e3e9f2;
  margin-bottom: var(--s-lg);
}
.price-note--bright {
  background: rgba(10, 132, 255, 0.08);
  border-color: rgba(10, 132, 255, 0.3);
}

.price-card__cta { width: 100%; }

/* featured card emphasis */
.price-card--featured {
  border-color: rgba(0, 200, 150, 0.4);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 50px rgba(0, 200, 150, 0.12);
  position: relative;
}
.price-card--featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,200,150,0.7), rgba(10,132,255,0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.5;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.price-card__popular {
  align-self: flex-start;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #04121f;
  background: linear-gradient(135deg, var(--emerald), var(--eblue));
  padding: 6px 14px; border-radius: var(--r-pill);
  margin-bottom: var(--s-md);
  box-shadow: 0 6px 20px rgba(0, 200, 150, 0.35);
}

/* glowing border on hover (both cards) */
.price-card { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease; }
.price-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 200, 150, 0.55);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5), 0 0 50px rgba(0, 200, 150, 0.18);
}
.price-card--featured:hover::before { opacity: 1; }

/* bottom helper */
.pricing-foot {
  max-width: 620px;
  margin: var(--s-xxl) auto 0;
  text-align: center;
  padding: 30px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pricing-foot__title { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; color: #fff; margin-bottom: 8px; }
.pricing-foot__text { font-size: 16px; line-height: 1.55; color: #aeb9c9; margin-bottom: var(--s-lg); }
.btn--ghost-bright { color: #8ff0d4; border-color: rgba(0, 200, 150, 0.5); }
.btn--ghost-bright:hover { background: rgba(0, 200, 150, 0.08); transform: translateY(-1px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 560px; }
  .price-list--two { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .price-card { padding: 26px 22px; }
  .price-amount__main { font-size: 38px; }
}

/* =========================================================
   HOMEPAGE SPLIT HERO (premium two-column)
   ========================================================= */
.grad-text {
  background: linear-gradient(120deg, #00C896, #0A84FF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero--split .tile__inner { text-align: left; max-width: 1180px; }
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-split__left { max-width: 640px; }
.hero--split .hero__brand { font-size: 22px; margin-bottom: 14px; }
.hero--split .hero__headline {
  font-size: 58px;
  line-height: 1.05;
  text-align: left;
  margin-bottom: 0;
}
.hero--split .hero__subhead { text-align: left; font-size: 19px; white-space: nowrap; }
.hero--split .lead { margin-left: 0; margin-right: 0; }
.hero--split .cta-row { justify-content: flex-start; }

/* trust indicators */
.trust-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 30px;
}
.trust-row li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: #c2cdda;
}
.trust-row li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 14px; height: 9px;
  border-left: 2.5px solid #00C896;
  border-bottom: 2.5px solid #00C896;
  transform: rotate(-45deg);
}

/* right-side glass logo stage */
.hero-split__right { display: flex; justify-content: center; }
.hero-logo-stage {
  position: relative;
  width: clamp(220px, 26vw, 340px);
  aspect-ratio: 1;
  border-radius: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.hero-logo-stage::before {
  content: "";
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 150, 0.4), transparent 62%);
  filter: blur(50px);
  z-index: -1;
}
.hero-logo-mark {
  width: 56%;
  filter: drop-shadow(0 20px 45px rgba(0, 200, 150, 0.45));
  animation: heroLogoFloat 6s ease-in-out infinite;
}
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* entrance for the new hero pieces */
.hero--split .badge,
.hero-split__right,
.trust-row {
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero--split .badge { animation-delay: 0.05s; }
.hero-split__right { animation-delay: 0.3s; }
.trust-row { animation-delay: 0.62s; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .hero-split__left { max-width: none; }
  .hero--split .tile__inner { text-align: center; }
  .hero--split .hero__headline,
  .hero--split .hero__subhead { text-align: center; white-space: normal; }
  .hero--split .cta-row { justify-content: center; }
  .hero--split .badge { margin-left: auto; margin-right: auto; }
  .trust-row { justify-content: center; }
  .hero-split__right { order: -1; }
  .hero--split .hero__headline { font-size: 44px; }
}
@media (max-width: 560px) {
  .hero--split .hero__headline { font-size: 34px; }
  .hero-logo-stage { width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-mark { animation: none; }
}

/* =========================================================
   DARK BRAND UNIFICATION
   Converts all light/parchment sections + footer to the
   dark navy / emerald brand palette. Colors only — no layout,
   spacing, content, or structural changes.
   ========================================================= */

/* page base so no white shows in overscroll / gaps */
body { background: #000814; }

/* ---- Section backgrounds (alternating dark variations) ---- */
/* Section A — Deep Navy */
.tile--light {
  background:
    radial-gradient(900px 520px at 15% 8%, rgba(0, 200, 150, 0.06), transparent 60%),
    radial-gradient(900px 520px at 85% 92%, rgba(10, 132, 255, 0.06), transparent 60%),
    #020617;
  color: #cbd5e1;
}
/* Section B — Dark Blue gradient */
.tile--parchment {
  background:
    radial-gradient(1000px 600px at 82% 0%, rgba(10, 132, 255, 0.08), transparent 60%),
    linear-gradient(160deg, #061226 0%, #0A2540 100%);
  color: #cbd5e1;
}
/* Section C — Near Black */
.tile--dark {
  background:
    radial-gradient(800px 520px at 50% 0%, rgba(10, 132, 255, 0.05), transparent 60%),
    #000814;
  color: #fff;
}

/* "What We Do" intro — dark navy + subtle animated gradient + soft lighting */
#services {
  background:
    radial-gradient(720px 420px at 20% 0%, rgba(0, 200, 150, 0.10), transparent 60%),
    radial-gradient(720px 420px at 80% 100%, rgba(10, 132, 255, 0.10), transparent 60%),
    #020617;
  background-size: 150% 150%, 150% 150%, auto;
  animation: servicesGrad 24s ease-in-out infinite;
}
@keyframes servicesGrad {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; }
  50%      { background-position: 28% 18%, 72% 82%, 0 0; }
}

/* ---- Text on converted sections ---- */
.tile--light h1, .tile--light h2, .tile--light h3, .tile--light h4,
.tile--parchment h1, .tile--parchment h2, .tile--parchment h3, .tile--parchment h4 {
  color: #ffffff;
}
.tile--light .lead, .tile--parchment .lead,
.tile--light .body-lg, .tile--parchment .body-lg,
.tile--light .body, .tile--parchment .body {
  color: #aab4c5;
}
.tile--light .about__lead, .tile--parchment .about__lead { color: #ffffff; }
.tile--light .eyebrow, .tile--parchment .eyebrow { color: #2bd4a8; }

/* ---- Chips → dark glass ---- */
.tile--light .chip-row li, .tile--parchment .chip-row li {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #dce3ee;
}
.tile--light .chip-row li:hover, .tile--parchment .chip-row li:hover {
  border-color: rgba(0, 200, 150, 0.5);
}

/* ---- "Who we work with" cards → dark glassmorphism ---- */
.tile--parchment .two-up__card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tile--parchment .two-up__card h4 { color: #ffffff; }
.tile--parchment .two-up__card .body { color: #aab4c5; }
.tile--parchment .two-up__card:hover {
  border-color: rgba(0, 200, 150, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 200, 150, 0.12);
}

/* ---- Statistics section — ambient lighting + glass overlay ---- */
.stats.has-bg::after {
  background:
    radial-gradient(620px 430px at 18% 14%, rgba(0, 200, 150, 0.14), transparent 60%),
    radial-gradient(620px 430px at 82% 86%, rgba(10, 132, 255, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.85), rgba(0, 8, 20, 0.92));
}
.stats__grid {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  padding: 40px 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Footer → dark (applies on every page) ---- */
.footer {
  background: linear-gradient(180deg, #020617 0%, #000814 100%);
  color: #aab4c5;
}
.footer__col h5 { color: #ffffff; }
.footer__col a { color: #aab4c5; transition: color 0.2s ease; }
.footer__col a:hover { color: #ffffff; }
.footer__tag { color: #7f8ba0; }
.footer__legal { border-top-color: rgba(255, 255, 255, 0.08); color: #7f8ba0; }

@media (prefers-reduced-motion: reduce) {
  #services { animation: none; }
}