/* ============================================
   Header / Nav
   ============================================ */
.bor-b{
  border-bottom: 1px solid var(--border);
  position: relative;
}
.bor-b .container:before,
.pricing .container:before,
.mission .container:before,
.layers .container:before,
.team .container:before,
.research .container.bor-b:before,
.partner .container:before,
.testimonial .container:before,
.not-list .container:before,
.final-cta .container:before,
.site-footer .container:before {
  content:" ";
  position: absolute;
  width:9px;
  height:9px;
  left:-5px;
  top:-5px;
  background: #E4E4E4;
  z-index: 20;
  border-radius: 50%;
  border:2px solid #fff;
}
.bor-b .container:after,
.pricing .container:after,
.mission .container:after,
.layers .container:after,
.team .container:after,
.research .container.bor-b:after,
.partner .container:after,
.testimonial .container:after,
.not-list .container:after,
.final-cta .container:after,
.site-footer .container:after {
  content:" ";
  position: absolute;
  width:9px;
  height:9px;
  right:-5px;
  top:-5px;
  background: #E4E4E4;
  z-index: 20;
  border-radius: 50%;
  border:2px solid #fff;
}

.bor-t{
  border-top: 1px solid var(--border);
}
   .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: var(--sp-4);
}
section{
  position: relative;
}
.site-header__row {
  padding-inline: 0;
  border:none;
}

.navbar {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  background: rgba(11, 11, 16, 0.65);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-6);
  box-shadow: var(--shadow-pill), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

.navbar__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  display: flex;
  align-items: center;
  margin-right: auto;
}
.navbar__logo {
  display: block;
  height: 22px;
  width: auto;
}
/* flex-shrink:0 — between the mobile menu breakpoint and ~900px the nav
   links + CTA fill the row, and a shrinkable img gets squeezed narrower
   while height stays 24px, distorting the lockup. */
.brand-logo {
  display: block;
  height: 24px;
  max-height: 24px;
  width: auto;
  flex-shrink: 0;
}
.navbar__brand { flex-shrink: 0; }

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.navbar__links a {
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: color 0.2s ease;
}
.navbar__links a:hover { color: var(--white); }

.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.navbar__toggle span {
  width: 18px;
  height: 2px;
  background: var(--white);
  margin-inline: auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--hero-black);
  border-radius: var(--r-md);
  margin-top: var(--sp-2);
  padding: 0 var(--sp-4);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.mobile-menu.is-open { max-height: 420px; padding: var(--sp-4); }
.mobile-menu a:not(.btn) {
  color: rgba(255,255,255,0.85);
  padding: var(--sp-3) var(--sp-2);
  font-weight: 600;
  border-radius: var(--r-sm);
}
.mobile-menu a:not(.btn):hover { background: rgba(255,255,255,0.06); }
.mobile-menu .btn { margin-top: var(--sp-2); justify-content: center; }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  padding-bottom: 0;
  /* Decorative crystals are intentionally positioned past the viewport edges.
     Clipping them here (rather than relying on html{overflow-x:hidden}, which
     iOS Safari ignores when body isn't clipped) kills mobile horizontal scroll.
     Safe: the hero has no position:sticky descendants. */
  overflow-x: clip;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 100%;
  overflow: hidden;
}
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, #17173a 0%, transparent 60%);
  pointer-events: none;
}
/* Grain overlay — a tiny tiled SVG feTurbulence texture, not an image
   asset, so it costs nothing to load. Explicit small viewBox + high
   baseFrequency keeps each grain a couple CSS px, so it reads as fine
   static instead of soft cloud-like blobs at a stretched tile size. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* Each column is its own gradient facet — angle and tone cycle through an
   8-wide palindrome (172°→196°→172°) so the strip reads as a faceted
   surface rather than one flat sweep, and stays balanced as more columns
   get added on wider viewports instead of just stretching the same 8. */
.hero__bg-col {
  display: block;
  height: 100%;
  background: linear-gradient(172deg, var(--hero-black) 0%, var(--hero-indigo) 38%, var(--hero-blue-deep) 68%, var(--hero-blue) 100%);
  animation: hero__bg-shimmer 7s ease-in-out infinite;
  animation-delay: 0s;
}
.hero__bg-col:nth-child(8n+2) {
  background: linear-gradient(180deg, var(--hero-black) 0%, #1b1f52 38%, #202c9e 68%, var(--hero-blue) 100%);
  animation-delay: 0.4s;
}
.hero__bg-col:nth-child(8n+3) {
  background: linear-gradient(188deg, var(--hero-black) 0%, var(--hero-indigo) 38%, var(--hero-blue-deep) 68%, var(--hero-blue-bright) 100%);
  animation-delay: 0.8s;
}
.hero__bg-col:nth-child(8n+4) {
  background: linear-gradient(196deg, var(--hero-black) 0%, #1b1f52 38%, #202c9e 68%, var(--hero-blue) 100%);
  animation-delay: 1.2s;
}
.hero__bg-col:nth-child(8n+5) {
  background: linear-gradient(196deg, var(--hero-black) 0%, var(--hero-indigo) 38%, var(--hero-blue-deep) 68%, var(--hero-blue-bright) 100%);
  animation-delay: 1.6s;
}
.hero__bg-col:nth-child(8n+6) {
  background: linear-gradient(188deg, var(--hero-black) 0%, #1b1f52 38%, #202c9e 68%, var(--hero-blue) 100%);
  animation-delay: 2s;
}
.hero__bg-col:nth-child(8n+7) {
  background: linear-gradient(180deg, var(--hero-black) 0%, var(--hero-indigo) 38%, var(--hero-blue-deep) 68%, var(--hero-blue-bright) 100%);
  animation-delay: 2.4s;
}
.hero__bg-col:nth-child(8n) {
  background: linear-gradient(172deg, var(--hero-black) 0%, #1b1f52 38%, #202c9e 68%, var(--hero-blue) 100%);
  animation-delay: 2.8s;
}

@keyframes hero__bg-shimmer {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.22) saturate(1.3); }
}

.hero__crystal {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.45));
  transform-origin: 50% 50%;
}
.hero__crystal--tr {
  top: -150px;
  left: 50%;
  margin-left: 250px;
  width: min(55vw, 650px);
  animation: crystal-sway-a 16s ease-in-out infinite;
}
.hero__crystal--bl {
  left: 50%;
  margin-left: -950px;
  bottom: -150px;
  width: min(55vw, 675px);
  animation: crystal-sway-b 24s ease-in-out infinite;
}

@keyframes crystal-sway-a {
  0%, 100% { rotate: 190deg; }
  50% { rotate: 170deg; }
}
@keyframes crystal-sway-b {
  0%, 100% { rotate: -8deg; }
  50% { rotate: 10deg; }
}

.hero__content {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.container.hero__content{
  padding: 220px var(--gutter) 180px;
  border:none
}

.hero__title {
  display: flex;
  justify-content: center;
}
.hero__title-logo {
  display: block;
  width: clamp(320px, 45vw, 700px);
  height: auto;
}

.hero__subtitle {
  margin-top: var(--sp-8);
  max-width: 54ch;
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.86);
  line-height: var(--lh-normal);
}
.hero__subtitle strong { color: var(--white); font-weight: 700; }

.hero__actions {
  margin-top: var(--sp-10);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.hero__social-proof {
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-8);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.hero__social-proof p { color: rgba(255,255,255,0.85); font-size: var(--fs-sm); }
.hero__social-proof strong { color: var(--white); }

/* Floating card, bottom-right of the hero — sits outside .hero__content's
   centered column (absolute against .hero itself, like the crystals) so it
   can anchor to a screen corner instead of the centered copy block. */
.hero__coach-card {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(20px, 4vw, 56px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: 340px;
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-card);
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero__coach-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(17,17,20,0.06), 0 20px 40px -12px rgba(17,17,20,0.22);
}
.hero__coach-card:hover .btn-link svg {
  transform: translateX(3px);
}
.hero__coach-photo {
  height: 100px;
  flex: none;
}
.hero__coach-copy p {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-2);
}
.hero__coach-copy p strong { color: var(--ink); }
.hero__coach-copy .hero__coach-link {
  font-size: 0.6875rem;
  gap: 4px;
}

.avatar-stack { display: flex; }
.avatar-stack img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  margin-left: -10px;
}
.avatar-stack img:first-child { margin-left: 0; }

/* ============================================
   Layers stepper
   ============================================ */
.layers {
  border-top: 1px solid rgba(17, 17, 20, 0.06);
  position: relative;
  z-index: 2;
  /* Normal in-flow section height: the stepper is click-driven, so there is
     no pinned/scrubbed scroll range to reserve space for. */
}
.layers__sticky {
  position: static;
}

.layers__stage {
  padding-block: 24px 32px;
}

/* Holds the sequence card in the page flow. */
.layers__card-slot {
  position: relative;
  width: 100%;
  /* aspect-ratio at a capped container width gives a fixed pixel height
     regardless of viewport height — on a tall screen that's shorter than
     the available space no matter what max-height allows, leaving a gap
     below it. Driving height off the viewport directly instead means it
     always fills what's actually left after the header/heading/padding,
     on any screen height; object-fit:cover on the image absorbs the
     resulting aspect variation. */
  aspect-ratio: 16 / 9;
  max-height: min(calc(100vh - 250px), 620px);
  border-radius: var(--r-lg);
  background: var(--bg-lavender-2) center / cover no-repeat;
}

/* The sequence card itself, filling its slot. */
.layers__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  z-index: 1;
}

/* Two stacked <img> layers, alternating which is on top — a frame's src
   is only ever written to the one currently hidden underneath, then it's
   raised once decoded. The visible layer's own src is never touched while
   it's showing, so there is no moment where the on-screen image is mid-swap
   (the failure mode that caused a blank/see-through flash on a fast scroll:
   this holds regardless of decode timing, unlike gating on decode() alone). */
.layers__frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
}
.layers__frame.is-front { opacity: 1; z-index: 1; }
/* Spans the whole image card, width-capped and centered exactly like every
   .container (base.css). Nothing to click here. */
.layers__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  max-width: var(--container);
  margin-inline: auto;
  pointer-events: none;
}

/* All 7 layers, always visible, in the page flow below the visual. */
.layers__list-wrap {
  padding-block: var(--sp-8);
}
.layers__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
}
/* Each card takes a band of the pink-amethyst spectrum: deep violet core out
   through orchid, rose and warm quartz. --lh/--ls/--ll drive one shared
   gradient/glow recipe so hues stay in family. */
.layers__point {
  --lh: 268; --ls: 55%; --ll: 26%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background-color: hsl(var(--lh) var(--ls) var(--ll));
  background-image:
    radial-gradient(120% 90% at 8% 0%, hsl(var(--lh) 70% 62% / 0.5) 0%, transparent 58%),
    radial-gradient(100% 80% at 100% 100%, hsl(calc(var(--lh) + 26) 72% 52% / 0.42) 0%, transparent 62%),
    linear-gradient(155deg, hsl(var(--lh) 58% 34% / 0.95), hsl(calc(var(--lh) - 14) 46% 15% / 0.98)),
    var(--noise-bg-soft);
  background-size: auto, auto, auto, var(--noise-size) var(--noise-size);
  background-blend-mode: screen, screen, normal, overlay;
  border: 1px solid hsl(var(--lh) 60% 78% / 0.26);
  box-shadow:
    inset 0 1px 0 hsl(var(--lh) 80% 90% / 0.3),
    inset 0 -30px 60px -30px hsl(calc(var(--lh) + 20) 70% 60% / 0.35),
    0 18px 44px -18px hsl(var(--lh) 60% 20% / 0.6);
  transition: transform 420ms var(--ease-premium, ease), box-shadow 420ms var(--ease-premium, ease);
}
.layers__point:nth-child(1) { --lh: 262; --ls: 52%; --ll: 22%; }
.layers__point:nth-child(2) { --lh: 276; --ls: 50%; --ll: 24%; }
.layers__point:nth-child(3) { --lh: 292; --ls: 46%; --ll: 26%; }
.layers__point:nth-child(4) { --lh: 310; --ls: 44%; --ll: 27%; }
.layers__point:nth-child(5) { --lh: 328; --ls: 46%; --ll: 28%; }
.layers__point:nth-child(6) { --lh: 344; --ls: 44%; --ll: 28%; }
.layers__point:nth-child(7) { --lh: 356; --ls: 40%; --ll: 27%; }

/* Crystal facet sheen: a slow, self-contained drift. Time-based only — no
   scroll listener, no scroll coupling. */
.layers__point::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 38%, hsl(var(--lh) 90% 92% / 0.16) 48%, transparent 58%),
    linear-gradient(75deg, transparent 44%, hsl(calc(var(--lh) + 30) 90% 88% / 0.1) 52%, transparent 62%);
  animation: layerSheen 14s var(--ease-premium, ease-in-out) infinite alternate;
}
.layers__point:nth-child(even)::before { animation-duration: 18s; animation-delay: -6s; }
@keyframes layerSheen {
  from { transform: translate3d(-12%, -6%, 0) rotate(-2deg); }
  to   { transform: translate3d(12%, 6%, 0) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .layers__point::before { animation: none; }
}
.layers__point:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 hsl(var(--lh) 80% 92% / 0.4),
    inset 0 -30px 60px -30px hsl(calc(var(--lh) + 20) 75% 65% / 0.45),
    0 26px 56px -20px hsl(var(--lh) 65% 18% / 0.7);
}
.layers__step-num {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 1.6rem;
  padding-inline: 0.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--white);
  background: linear-gradient(
    135deg,
    hsl(var(--lh) 80% 85% / 0.22) 0%,
    hsl(var(--lh) 70% 72% / 0.14) 100%
  );
  border: 1px solid hsl(var(--lh) 85% 92% / 0.35);
  box-shadow:
    inset 0 1px 0 hsl(var(--lh) 90% 96% / 0.35),
    0 4px 12px -4px hsl(var(--lh) 50% 15% / 0.35);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
}
/* The step badge is absolutely positioned in the top-right, so the heading
   reserves room for it instead of running underneath. */
.layers .layers__point h3 {
  font-size: var(--fs-h3);
  color: var(--white);
  margin-bottom: var(--sp-3);
  padding-right: 3.5rem;
  text-wrap: pretty;
}
/* Wins over .layers .container.bor-b p, which paints body copy dark ink. */
.layers .container.bor-b .layers__point p { color: hsl(var(--lh) 40% 94% / 0.88); margin-top: 0; max-width: none; }


/* On the widest screens the 7 cards read best as 4 + 3 rather than an even
   auto-fit row count. */
@media (min-width: 1100px) {
  .layers__grid { grid-template-columns: repeat(4, 1fr); }
  .layers__point:nth-child(5) { grid-column: 1 / span 1; }
}


/* ============================================
   Logo strip
   ============================================ */
.logos .container{ padding-block: var(--sp-8);}
.logos__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: var(--sp-6);
  column-gap: var(--sp-6);
  align-items: center;
}
.logos__grid li { display: flex; justify-content: center; min-width: 0; }
.logo-mark {
  max-width: 100%;
  min-height: 60px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.logo-mark:hover { opacity: 1; filter: grayscale(0); }

.logos__more {
  margin-top: var(--sp-4);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* ============================================
   Pricing / pitch
   ============================================ */
.pricing {
  position: relative;
}
/* Responsive art: --hill-bg resolves to the smallest variant that still
   covers the viewport, so phones don't download the 1728px wide file. */
:root {
  --hill-bg: url("../assets/images/ai-hill-bg-800.webp");
}
@media (min-width: 700px) {
  :root {
    --hill-bg: url("../assets/images/ai-hill-bg-1200.webp");
  }
}
@media (min-width: 1100px) {
  :root {
    --hill-bg: url("../assets/images/ai-hill-bg-1728.webp");
  }
}
.pricing .container {
  background-image: var(--noise-bg), var(--hill-bg);
  background-position: 0 0, bottom center;
  background-size: var(--noise-size) var(--noise-size), cover;
  background-repeat: repeat, no-repeat;
  background-blend-mode: overlay, normal;
}

.pricing__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-16);
  align-items: stretch;
}
.pricing .container{ padding-block: var(--sp-16);}
.pricing__copy { max-width: 56ch; }
.pricing__lede { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-snug); margin-bottom: var(--sp-5); }
.pricing__lede strong { font-weight: 700; }
.pricing__copy p {  color: var(--ink-soft); margin-bottom: var(--sp-5); }
.pricing__copy p strong { font-weight: 700; color: var(--ink); }
.pricing__copy .btn { margin-top: var(--sp-8); }

.price-card {
  position: relative;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-10);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
}
@media (min-width: 1025px) {
  .price-card {
    padding: var(--sp-12) var(--sp-12);
  }
}

.price-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: max-content;
  background: var(--accent-blue);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
}
.price-card__price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-xxl, 3.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-8);
}
.price-card__price span {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 0.4em;
}

.price-card__list {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  margin-bottom: var(--sp-6);
}
.price-card__list li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-blue);
}
.price-card__cta { margin-top: auto; width: 100%; justify-content: center; }

.price-card__cta--primary {
  --btn-radius: var(--r-md);
  padding-block: 18px;
  border-radius: var(--r-md);
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 12px 28px -10px rgba(23, 23, 26, 0.22);
}
.price-card__cta--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(23, 23, 26, 0.28); }
.price-card__cta--primary:hover svg { transform: translateX(4px); }

.price-card__cta--secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.price-card__cta--secondary:hover {
  color: var(--ink);
  background-color: rgba(17, 17, 20, 0.04);
}
.price-card__cta--secondary svg { flex: none; transition: transform 0.2s ease; }
.price-card__cta--secondary:hover svg { transform: translateX(3px); }

/* ============================================
   Mission quote
   ============================================ */
.mission .container {
  padding: var(--sp-20) var(--sp-6);
}
.mission__quote {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink-soft);
  line-height: var(--lh-normal);
}
.mission__quote p + p {
  margin-top: var(--sp-4);
}
.mission__subtitle {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}

/* ============================================
   Team
   ============================================ */
.team .container {
  position: relative;
}

.team__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin-inline: calc(var(--sp-6) * -1);
  padding-block: var(--sp-8) var(--sp-12);
  position: relative;
}

.team__divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  transform: translateX(-50%);
  z-index: 1;
}

.team-card {
  padding-inline: var(--sp-6);
  padding-top: 0;
}
.team-card:hover .team-card__photo {
  box-shadow: 0 24px 48px -18px rgba(17, 17, 20, 0.28);
}
.team-card:not(:last-child) {
  position: relative;
  border-right: none;
}
.team-card:not(:last-child)::before,
.team-card:not(:last-child)::after {
  content: none;
}
/* Registers --gradient-angle as a real <angle>, so the browser can
   interpolate it natively via the transition below — script.js just writes
   the raw target value on every mousemove/mouseleave, no manual easing
   loop needed, and entry/exit both animate identically regardless of how
   fast the cursor crosses in from outside the element. */
@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 135deg;
}
.team-card__photo {
  position: relative;
  overflow: visible;
  max-height: 290px;
  height: 290px;
  border-radius: var(--r-lg);
  /* Noise sits behind the portrait — background layers always paint
     beneath an element's own descendants, so the <img> (a real child of
     this element) sits above it with no z-index needed. */
  background-image: var(--noise-bg), linear-gradient(var(--gradient-angle, 135deg), var(--hero-black) 0%, var(--hero-indigo) 45%, var(--hero-blue) 100%);
  background-size: var(--noise-size) var(--noise-size), auto;
  background-repeat: repeat, no-repeat;
  background-blend-mode: overlay, normal;
  transition: --gradient-angle 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.team-card__photo img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: auto;
  height: 120%;
  max-width: none;
  object-fit: contain;
}
.team-card__body { padding: var(--sp-4) 0; }
.team-card__body h3 { font-size: var(--fs-lg); }
.team-card__role { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.team-card__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
.social-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
a.social-icon:hover, a.social-icon:focus-visible {
  color: var(--ink, #101014);
  border-color: currentColor;
}
.team-card__bio { margin-top: var(--sp-3); color: var(--ink-soft); font-size: var(--fs-sm); max-width: 46ch; }

/* ============================================
   Dot-grid CTA band
   ============================================ */
.cta-band {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cta-band .container{
  padding-block: var(--sp-24);
  background-image: var(--noise-bg-soft), linear-gradient(180deg, var(--accent-periwinkle), var(--accent-periwinkle-white));
  background-size: var(--noise-size) var(--noise-size), auto;
  background-repeat: repeat, no-repeat;
  background-blend-mode: overlay, normal;
}
.cta-band__globe {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: min(92vw, calc(var(--container) - 100px));
  height: 100%;
}
.cta-band__actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  width: 100%;
}

/* ============================================
   Research
   ============================================ */

.research .container.bor-b:not(:last-child),
.layers .container.bor-b:not(:last-child) {
  padding-block: var(--sp-16) var(--sp-6);
  padding-bottom: var(--sp-12);
}
.research .container.bor-b p,
.layers .container.bor-b p {
  margin-top: var(--sp-4);
  margin-bottom: 0;
  max-width: 56ch;
  color: var(--ink-soft);
}
.layers__copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.layers__copy p {
  max-width: none;
}
.research__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin-inline: calc(var(--sp-6) * -1);
}
.research-card {
  display: block;
  padding-inline: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-10);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.research-card:hover {
  background-color: var(--bg-lavender-2);
}
.research-card:not(:last-child) {
  position: relative;
  border-right: 1px solid var(--border);
}
.research-card:not(:last-child)::before,
.research-card:not(:last-child)::after {
  content: " ";
  position: absolute;
  width: 9px;
  height: 9px;
  background: #E4E4E4;
  z-index: 20;
  border-radius: 50%;
  border: 2px solid #fff;
  right: -5px;
}
.research-card:not(:last-child)::before {
  top: -5px;
}
.research-card:not(:last-child)::after {
  bottom: -5px;
}
.research-card__icon {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 48px;
}
.research-card__icon img,
.research-card__icon-svg {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.research-card:hover .research-card__icon img,
.research-card:focus-visible .research-card__icon img,
.research-card:hover .research-card__icon-svg,
.research-card:focus-visible .research-card__icon-svg {
  transform: scale(1.02) translateY(-4px);
}
.research-card__icon-svg .icon-dash {
  stroke-dashoffset: 0;
}
@keyframes icon-dash-march {
  to { stroke-dashoffset: -8px; }
}
.research-card:hover .research-card__icon-svg .icon-dash,
.research-card:focus-visible .research-card__icon-svg .icon-dash {
  animation: icon-dash-march 0.5s linear infinite;
}
.research-card h3 { font-size: 1.05rem; margin-bottom: var(--sp-2); }
.research-card p { color: var(--text-muted); font-size: var(--fs-sm); }

.research-card__arrow-svg {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.3em;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.research-card__arrow-svg path {
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.research-card:hover .research-card__arrow-svg,
.research-card:focus-visible .research-card__arrow-svg {
  opacity: 1;
}

/* ============================================
   Workshop partner
   ============================================ */
.partner {
  background: var(--bg-lavender-2) var(--hill-bg) bottom center / cover no-repeat;
  position: relative;
}
.partner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #FBE3DA 130px, #FBE3DA 150px);
  pointer-events: none;
  z-index: 10;
}
.partner h2 {
  padding-inline: var(--gutter);
}
.partner .container.bor-b {
  padding-top: var(--sp-16);
  padding-bottom: 0;
  padding-inline: 0;
  border: none;
}
.partner__copy {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin-inline: 0;
  margin-top: var(--sp-10);
}
.partner__copy p {
  color: var(--ink-soft);
  margin-bottom: 0;
  padding-inline: var(--sp-6);
}
.partner__copy strong { color: var(--ink); font-weight: 700; }
.partner__screenshot {
  margin-top: 64px;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* clip-path's -130px inset on 3 sides is the bleed budget the shadow
     below needs to sit in — bottom stays flush at 0 so it still cuts off
     flat into .partner::after's fade rather than showing shadow past it. */
  box-shadow:
    0 4px 12px rgba(17, 17, 20, 0.15),
    0 50px 100px -25px rgba(74, 77, 171, 0.45),
    0 70px 140px -30px rgba(17, 17, 20, 0.5);
  clip-path: inset(-130px -130px 0px -130px);
}
.partner__screenshot img,
.partner__screenshot svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   Testimonial
   ============================================ */

.testimonial .container.bor-b:not(:last-child) {
  padding-block: var(--sp-16) var(--sp-6);
  padding-bottom: var(--sp-12);
}
.testimonial .container.bor-b:not(:last-child) p {
  margin-top: var(--sp-4);
  margin-bottom: 0;
}
.testimonial .container.bor-b:last-child {
  padding: 0;
}

.testimonial__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line, rgba(0, 0, 0, 0.08));
}

.testimonial__grid > .testimonial__slide:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.testimonial__slide {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8);
  align-items: start;
  margin: 0;
  padding: var(--sp-10) var(--sp-8);
  background-color: #f3f3f6;
  background-image: var(--noise-bg), radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
  background-size: var(--noise-size) var(--noise-size), auto;
  background-repeat: repeat, no-repeat;
  background-blend-mode: overlay, normal;
}

.testimonial__stars {
  color: var(--accent-star);
  font-size: 1.15rem;
  letter-spacing: 4px;
  margin-bottom: var(--sp-4);
}

.testimonial__slide p {
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.55;
  margin-bottom: var(--sp-6);
}

.testimonial__slide footer cite {
  font-style: normal;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

.testimonial__slide footer span {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  display: block;
}

.testimonial__photo {
  width: 120px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ============================================
   What this is NOT
   ============================================ */


.not-list {
  padding-block: 0;
}
.not-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border);
}
.not-list .container.bor-b {
  border-bottom: none;
  padding-block: var(--sp-16);
}
.not-list__diagram {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Wide enough that the 320px absolutely-positioned crystal (below) sits
     entirely in the gutter, clear of both columns' cards — a gap sized to
     the divider alone would put the crystal on top of whichever card
     happened to be nearest the middle. */
  gap: 380px;
}
.not-list__col-heading {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-5);
}
.not-list__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.not-list__item-wrap {
  width: 100%;
  will-change: transform;
}
/* One vertical rule straight down the middle, the full height of the two
   columns (touching the heading row at the top and the last card at the
   bottom) — same corner-dot treatment as the divider between .team-card
   columns (see team-card:not(:last-child) above), just spanning the whole
   diagram instead of one card's height. */
.not-list__divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  transform: translateX(-50%);
}
.not-list__divider::before,
.not-list__divider::after {
  content: " ";
  position: absolute;
  left: -4px;
  width: 9px;
  height: 9px;
  background: #E4E4E4;
  z-index: 20;
  border-radius: 50%;
  border: 2px solid #fff;
}
.not-list__divider::before { top: -5px; }
.not-list__divider::after { bottom: -5px; }
/* Crystal sits dead center of the whole diagram, layered above the divider
   line rather than sharing space in the grid. Centered with negative
   margins, not a translate(-50%,-50%) — the cursor-parallax script (below)
   writes its own translate3d(...) straight to this element's inline
   style on every frame, which fully replaces rather than composes with
   whatever transform CSS set, so any centering done via transform here
   would get silently clobbered the instant the parallax script runs. */
.not-list__hub {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: -160px 0 0 -160px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.not-list__hub img {
  display: block;
}

.not-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  width: 100%;
  background: var(--bg-lavender-2);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.not-list__item:hover {
  animation-play-state: paused;
  background-color: var(--bg-lavender-3);
  box-shadow: 0 4px 12px rgba(30, 70, 214, 0.08);
}
.not-list__x {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-red);
  color: var(--accent-red);
  font-size: 0.65rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.not-list__check {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-blue);
  color: var(--accent-blue);
  font-size: 0.65rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}

/* Organic float wobble, same per-item animations as before — just no
   longer paired with an orbit position, since items sit in a plain column
   now rather than scattered around the hub. */
.not-list__item--1 .not-list__item { animation: float-rotate-a 8s ease-in-out infinite; }
.not-list__item--2 .not-list__item { animation: float-rotate-b 9s ease-in-out -1.5s infinite; }
.not-list__item--3 .not-list__item { animation: float-rotate-c 11s ease-in-out -0.5s infinite; }
.not-list__item--4 .not-list__item { animation: float-rotate-d 10s ease-in-out -2s infinite; }
.not-list__item--5 .not-list__item { animation: float-rotate-b 12s ease-in-out -3.5s infinite; }
.not-list__item--6 .not-list__item { animation: float-rotate-a 10s ease-in-out -5s infinite; }
.not-list__item--7 .not-list__item { animation: float-rotate-c 9s ease-in-out -1s infinite; }
.not-list__item--8 .not-list__item { animation: float-rotate-d 8s ease-in-out -4s infinite; }
.not-list__item--9 .not-list__item { animation: float-rotate-a 11s ease-in-out -2.5s infinite; }
.not-list__item--10 .not-list__item { animation: float-rotate-b 10s ease-in-out -0.5s infinite; }
.not-list__item--11 .not-list__item { animation: float-rotate-c 12s ease-in-out -3s infinite; }
.not-list__item--12 .not-list__item { animation: float-rotate-d 9s ease-in-out -5.5s infinite; }

/* Organic floating/rotation animations */
@keyframes float-rotate-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(4px, -6px) rotate(1deg); }
  50% { transform: translate(-3px, 5px) rotate(-0.5deg); }
  75% { transform: translate(-6px, -3px) rotate(0.5deg); }
}
@keyframes float-rotate-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-5px, 4px) rotate(-0.8deg); }
  50% { transform: translate(4px, -5px) rotate(0.6deg); }
  75% { transform: translate(5px, 3px) rotate(-0.4deg); }
}
@keyframes float-rotate-c {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(6px, 3px) rotate(0.5deg); }
  65% { transform: translate(-4px, -6px) rotate(-1deg); }
}
@keyframes float-rotate-d {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-3px, -5px) rotate(-0.6deg); }
  66% { transform: translate(5px, 4px) rotate(0.8deg); }
}

/* ============================================
   Final CTA
   ============================================ */
.final-cta {
  position: relative;
}
.final-cta .container {
  /* Ends at --bg-lavender-2, not pure --white — overlay blend is exactly a
     no-op against a true #fff base (the noise layer literally cannot show
     there, not just faintly), so a hair off pure white is what lets the
     grain render through this last stretch at all. */
  background-image: var(--noise-bg), linear-gradient(180deg, var(--bg-lavender-3) 0%, var(--bg-lavender-2) 85%);
  background-size: var(--noise-size) var(--noise-size), auto;
  background-repeat: repeat, no-repeat;
  background-blend-mode: overlay, normal;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(circle, rgba(17,17,20,0.05) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 20%, #000 40%, transparent 85%);
          mask-image: radial-gradient(ellipse 60% 80% at 50% 20%, #000 40%, transparent 85%);
}
.final-cta__content {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-24);
}


.video-mock {
  position: relative;
  margin-top: var(--sp-8);
  width: 220px;
  background: #17171a;
  border-radius: var(--r-md);
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.video-mock__tile {
  aspect-ratio: 4/3.2;
  border-radius: 8px;
  overflow: hidden;
}
.video-mock__tile img { width: 100%; height: 100%; object-fit: cover; }
.video-mock__self {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 44px;
  border-radius: 6px;
  background: #35353a;
  border: 1.5px solid #6fe0a6;
  display: flex; align-items: center; justify-content: center;
  color: #9a9aa4;
}

.final-cta p { margin-top: var(--sp-8); color: var(--ink-soft); max-width: 40ch; }
.final-cta .btn {
  margin-top: var(--sp-8);
  padding: 28px 52px;
  font-size: calc(var(--fs-label) * 1.5);
  gap: var(--sp-4);
}
.final-cta .btn svg {
  width: 21px;
  height: 21px;
}

/* ============================================
   Footer
   ============================================ */
.site-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-8);
}
.site-footer__links { display: flex; gap: var(--sp-6); }
.site-footer__links a { color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; }
.site-footer__links a:hover { color: var(--ink); }
.site-footer__copyright { color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 400; }

.site-footer__seam {
  height: 0;
  border-left: none;
  border-right: none;
}
.site-footer__seam-line {
  height: 1px;
  background: var(--border);
}
.site-footer__wordmark {
  width: 100%;
  padding:20px;
  overflow: hidden;
}
.footer-logo-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1780 / 190;
  touch-action: pan-y;
}
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-6);
  border-left: none;
  border-right: none;
}
.site-footer__bottom:before,
.site-footer__bottom:after {
  display: none;
}
.site-footer__credit {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 400;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}
.site-footer__credit a { color: inherit; font-weight: 600; }
.site-footer__credit a:hover { color: var(--ink); }
.site-footer__heart { color: #e0245e; }
.site-footer__logo img{ height: 48px; width: auto; display: block; }