/* ============================================================
   Braiten — brand stylesheet
   Brand colors: Yellow #F3DD81 · Pale blue #D8F0FB
   Vivid blue #3BB2EB (icon tiles & arrows, as on live site)
   Text #1D1D1F · Grey #636363 · White #FFFFFF
   Headings: Hedvig Letters Serif · Body: Inter
   ============================================================ */

:root {
  --yellow:  #F3DD81;   /* brand */
  --sky:     #D8F0FB;   /* brand — pale blue (glow / accent) */
  --blue:    #3BB2EB;   /* vivid blue used for icon tiles & arrows (as on live site) */
  --ink:     #1D1D1F;   /* text */
  --grey:    #636363;   /* secondary text */
  --white:   #FFFFFF;

  --radius-lg: 40px;
  --radius-md: 24px;
  --radius-sm: 16px;

  --maxw: 1200px;
  --pad: 24px;

  --serif: "Hedvig Letters Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --apple: cubic-bezier(0.16, 1, 0.3, 1);   /* long, smooth Apple-style ease-out */
  --apple-slow: cubic-bezier(0.19, 1, 0.22, 1);   /* stronger, longer decelerating tail */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;   /* in-page anchors stop below the sticky header, not under it */
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 12px 14px 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--light { background: var(--white); color: var(--ink); box-shadow: 0 6px 20px -10px rgba(0,0,0,.25); }
.btn--light:hover { box-shadow: 0 14px 30px -12px rgba(0,0,0,.35); }

.btn__circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  transition: transform .35s var(--ease);
}
.btn--light:hover .btn__circle { transform: translateX(4px); }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { width: 24px; height: 24px; }
.logo__word { font-family: var(--serif); font-size: 22px; color: var(--ink); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 20px 0;
  background: rgba(255,255,255,0);
  transition: background-color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  padding: 12px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 8px 0 56px; }
.hero__card {
  position: relative;
  background: var(--yellow);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 50px);
  display: grid;
  grid-template-columns: 1.26fr 1fr;   /* heading still fits 2 lines; orbit gets a bit more room */
  gap: 24px;
  align-items: center;
  overflow: hidden;
  min-height: 480px;
  /* Apple-style depth: tight close shadow + large soft ambient shadow */
  box-shadow: 0 4px 12px rgba(0,0,0,.04), 0 34px 74px -38px rgba(0,0,0,.22);
}
.hero__title {
  font-size: clamp(34px, 5.4vw, 64px);   /* matches Framer's 64px — wraps to 2 lines */
  line-height: 1.08;   /* slightly open so the two highlight boxes show a small gap */
  color: var(--ink);
}
.hero__sub {
  margin: 22px 0 32px;
  max-width: 30ch;
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(29,29,31,.82);
}

/* ---------- Orbit (solar system) ---------- */
.orbit {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  container-type: inline-size;   /* enables cqi units so orbits scale with the box */
}
.orbit__rings { position: absolute; inset: 0; display: grid; place-items: center; }
.ring {
  position: absolute;
  border: 1.5px solid rgba(255,255,255,.55);
  /* subtle superellipse to match Framer exactly: corner radius ~7% > side (bulge 1.07) */
  border-radius: 41%;
}
/* sizes & fading opacities measured from the live site (480px reference box) */
/* ring diameters = 2 × each avatar orbit radius, so the path runs through photo centers */
.ring--1 { width: 32%; height: 32%; border-color: rgba(255,255,255,.70); }
.ring--2 { width: 59%; height: 59%; border-color: rgba(255,255,255,.55); }
.ring--3 { width: 85%; height: 85%; border-color: rgba(255,255,255,.40); }
.orbit--mini .ring--1 { width: 48%; height: 48%; }
.orbit--mini .ring--2 { width: 86%; height: 86%; }

/* pulsing central chat icon (the "sun") — sits BELOW the photos so the
   revolving avatars ride over it, while the halo pulse still glows from behind */
.orbit__core {
  position: relative; z-index: 2;
  width: 64px; height: 64px;    /* ~size of the largest avatar, so it sits among the pros, not over them */
  border-radius: 24px;          /* squircle (~37%) matching the Framer chat tile */
  background: var(--blue);
  display: grid; place-items: center;
  box-shadow: 0 16px 30px -12px rgba(59,178,235,.7);
  animation: corePulse 3.4s ease-in-out infinite;
}
.orbit__core svg { width: 40px; height: 40px; }   /* glyph scaled down with the tile */
.orbit--mini .orbit__core { width: 62px; height: 62px; border-radius: 23px; }
/* radar halo that pings outward — z-index 1 keeps it BELOW the core (z-index 2)
   and the photos (z-index 3), so the pulse always renders underneath, never over them */
.orbit__halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;   /* starts flush with the smaller core ... */
  border-radius: 24px;
  background: var(--sky);   /* pale-blue glow ripple */
  z-index: 1;
  animation: corePing 3.4s ease-out infinite;
}
.orbit--mini .orbit__halo { width: 62px; height: 62px; border-radius: 23px; }

/* each planet is a zero-size anchor at the exact centre; the img rides the orbit */
.planet {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; z-index: 3;   /* above the chat-icon core (z-index 2) */
  animation: orbit var(--dur, 30s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.planet img {
  position: absolute;
  max-width: none;   /* override global img{max-width:100%} vs the 0-width anchor */
  width: clamp(50px, 14cqi, 64px);
  height: clamp(50px, 14cqi, 64px);
  border-radius: 38%;   /* rounded square (squircle) — matches Framer, not a circle */
  object-fit: cover;
  transform: translate(-50%, -50%);   /* centre the photo on the orbit point */
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.35);
  border: 1.5px solid var(--white);   /* same thickness as the ring/path stroke */
}
.orbit--mini .planet img { width: clamp(46px, 17cqi, 62px); height: clamp(46px, 17cqi, 62px); }

/* revolve: rotate out to radius, then counter-rotate so faces stay upright */
@keyframes orbit {
  from { transform: rotate(0deg)   translateX(var(--r)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); }
}
@keyframes corePulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 16px 30px -12px rgba(59,178,235,.65); }
  50%      { transform: scale(1.08); box-shadow: 0 22px 46px -10px rgba(59,178,235,.95); }
}
/* scale 2.375 keeps the pulse's outer reach the same as before the core shrank
   (64px × 2.375 = 152px = the old 76px × 2) */
@keyframes corePing {
  0%   { transform: translate(-50%,-50%) scale(1);     opacity: .85; }
  70%  { transform: translate(-50%,-50%) scale(2.375); opacity: 0; }
  100% { transform: translate(-50%,-50%) scale(2.375); opacity: 0; }
}

/* ============================================================
   PILLARS
   ============================================================ */
.pillars { padding: 56px 0 56px; }
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pillar {
  padding: clamp(24px, 2.6vw, 34px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* same family as the hub cards, but lighter — a compact "overview" row */
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
  /* same soft, layered Apple-style shadow as the hero card, scaled lighter */
  box-shadow: 0 3px 8px rgba(0,0,0,.03), 0 24px 52px -34px rgba(0,0,0,.16);
  border-radius: 20px;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,.04), 0 34px 64px -34px rgba(0,0,0,.20);
}
/* wrapper handles the scroll-in entrance; the img handles hover — kept separate
   so the two transforms never fight each other */
.pillar__iconwrap {
  display: block;
  margin: 0 auto 22px;
  will-change: transform, opacity;
}
/* premium staggered spring scale-in as each pillar reveals */
.js .reveal .pillar__iconwrap {
  opacity: 0;
  transform: scale(.4) translateY(12px);
  transition: transform .8s cubic-bezier(.34,1.5,.42,1), opacity .5s ease;
}
.js .reveal.is-visible .pillar__iconwrap { opacity: 1; transform: none; }
.pillar:nth-child(2) .pillar__iconwrap { transition-delay: .12s; }
.pillar:nth-child(3) .pillar__iconwrap { transition-delay: .24s; }

.pillar__icon {
  display: block;
  width: 52px; height: 52px;   /* SVG carries its own blue squircle tile */
  border-radius: 24%;          /* matches the tile so the glow follows its shape */
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
}
/* refined hover: gentle lift + scale with a soft blue ambient glow */
.pillar:hover .pillar__icon {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 22px 38px -16px rgba(59,178,235,.55), 0 6px 14px -8px rgba(59,178,235,.4);
}
.pillar__title { font-size: 26px; margin-bottom: 8px; }
.pillar__text { color: var(--grey); font-size: 17px; max-width: 30ch; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
/* overflow-x:clip lets the photo/text reveal fly in from far off the side
   without ever creating a horizontal scrollbar (esp. on mobile). Clip (not
   hidden) keeps vertical flow + card shadows intact and doesn't break sticky. */
.steps { padding: 56px 0 56px; }
.steps__list { display: flex; flex-direction: column; gap: 28px; }
.step {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  background: var(--white);            /* crisp white — same family as hero card / pillars */
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 24px 50px -34px rgba(0,0,0,.28);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px);
  overflow: clip;   /* text reveal is clipped to the card → slides in from within it, never from outside (shadow renders outside the clip, unaffected) */
}
.step--reverse .step__media { order: 2; }
.step__media { border-radius: var(--radius-md); overflow: hidden; }   /* clips the sliding photo */
.step__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.step__title { font-size: clamp(26px, 3vw, 34px); margin-bottom: 12px; }
.step__text { color: var(--grey); font-size: 17px; max-width: 40ch; }

/* Apple-style side load: as each card reveals, the photo glides into its frame
   from the side it sits on and settles (subtle zoom-out keeps edges filled),
   while the text drifts in from the opposite side. --from: -1 = photo on left. */
.step { --from: -1; }
.step--reverse { --from: 1; }
/* .js prefix raises specificity above the base `.js .reveal` rule so the card's
   own fade matches its slower contents */
.js .step.reveal { transition: opacity 1.15s var(--apple), transform 1.15s var(--apple); }

.js .step .step__media img {
  /* photo pushes in from its side, from further out; scale keeps the frame
     filled (17% slide needs >=1.34 zoom to avoid a bare edge mid-glide) */
  transform: translateX(calc(var(--from) * 22%)) scale(1.48);
  transition: transform 1.5s var(--apple);
}
.js .step.is-visible .step__media img { transform: none; }

.js .step .step__body {
  opacity: 0;
  transform: translateX(calc(var(--from) * -140px));   /* text slides in from the opposite side; clipped to the card so it comes from within, not off-screen */
  transition: opacity 1.15s var(--apple), transform 1.15s var(--apple);
  transition-delay: .15s;
}
.js .step.is-visible .step__body { opacity: 1; transform: none; }

/* gentle desktop hover zoom, kept snappy and above the reveal's settled state */
@media (hover: hover) {
  .step.is-visible:hover .step__media img {
    transform: scale(1.04);
    transition: transform .8s var(--ease);
  }
}

/* ============================================================
   INFRASTRUCTURE
   ============================================================ */
.infra { padding: 56px 0 80px; }
.infra__card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 460px;   /* wide, short banner — the original proportion */
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  /* clear downward shadow (light from above) — strong enough to read under the
     large dark card, bottom-weighted like the other cards */
  box-shadow: 0 18px 36px -12px rgba(0,0,0,.24), 0 44px 80px -28px rgba(0,0,0,.32);
}
.infra__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 40%;   /* crops are pre-framed on the man; slight top bias protects his head */
}
.infra__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(29,29,31,0) 20%, rgba(29,29,31,.82) 100%);
}
.infra__content { padding: clamp(28px, 4vw, 56px); color: var(--white); max-width: 620px; }
.infra__title { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; color: var(--white); }
.infra__text { margin: 16px 0 28px; font-size: clamp(16px, 1.4vw, 19px); color: rgba(255,255,255,.9); }

/* ============================================================
   FOOTER
   ============================================================ */
/* light, compact footer on white — matches the live site (no yellow bar) */
.site-footer {
  position: relative;
  background: var(--white);
  padding: 44px 0 30px;
  margin-top: 24px;
}
/* slim brand accent hairline (yellow → pale blue) */
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--yellow) 0%, var(--sky) 100%);
}
.footer__grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer__left { display: flex; flex-direction: column; }
.footer__tag { margin: 12px 0 0; font-family: var(--serif); font-size: 18px; color: var(--ink); }
.footer__legal { display: flex; gap: 28px; margin-top: 22px; font-size: 15px; }
.footer__legal a { color: var(--grey); transition: color .25s var(--ease); }
.footer__legal a:hover { color: var(--ink); }
.footer__contact { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.footer__label { color: var(--grey); }
.footer__contact a { color: var(--ink); transition: color .25s var(--ease); }
.footer__contact a:hover { color: var(--blue); }
.footer__copy { margin-top: 36px; font-size: 13px; color: rgba(29,29,31,.55); }

/* right column: contact + follow */
.footer__right { display: flex; flex-direction: column; gap: 22px; }
.footer__follow { display: flex; flex-direction: column; gap: 10px; }
/* circular social icon — outlined at rest, fills brand-blue on hover */
.social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12); color: var(--ink);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.social svg { width: 19px; height: 19px; fill: currentColor; }
.social:hover {
  background: var(--blue); border-color: var(--blue); color: var(--white);
  transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(59,178,235,.6);
}
.social:active { transform: translateY(0); }

/* ============================================================
   LEGAL PAGES (Terms / Privacy)
   ============================================================ */
.legal { padding: 48px 0 88px; }
.legal__wrap { max-width: 800px; margin: 0 auto; }
.legal__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--grey); margin-bottom: 28px;
  transition: color .25s var(--ease);
}
.legal__back:hover { color: var(--ink); }
.legal__title { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; color: var(--ink); }
.legal__date { color: var(--grey); font-size: 14px; margin: 10px 0 40px; }
.legal h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2.4vw, 24px);
  margin: 40px 0 14px; color: var(--ink);
}
.legal h3 { font-size: 16px; font-weight: 600; margin: 26px 0 10px; color: var(--ink); }
.legal p { color: rgba(29,29,31,.86); font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; color: rgba(29,29,31,.86); }
.legal li { font-size: 16px; line-height: 1.6; margin-bottom: 7px; }
.legal a { color: var(--blue); }
.legal table {
  width: 100%; border-collapse: collapse; margin: 12px 0 22px; font-size: 15px;
  display: block; overflow-x: auto;
}
.legal th, .legal td {
  border: 1px solid rgba(0,0,0,.12); padding: 11px 14px;
  text-align: left; vertical-align: top; line-height: 1.55;
}
.legal th { background: rgba(243,221,129,.22); font-weight: 600; color: var(--ink); }
.legal td { color: rgba(29,29,31,.86); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* hidden-initial state only when JS is running (see .js flag in <head>);
   without JS every .reveal stays fully visible */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   KINETIC HEADINGS  (one-time line-by-line reveal)
   Each line rises from behind its own mask the first time it enters view.
   script.js reveals it once then stops observing, so it never replays on
   scroll-back (until a page reload). Without JS the lines are simply visible. */
.kinetic .line {
  display: block;
  overflow: hidden;        /* the mask each line rises out of */
  padding-bottom: .12em;   /* room for descenders (p, y) inside the mask ... */
  margin-bottom: -.12em;   /* ... pulled back so heading spacing is unchanged */
}
.js .kinetic .line > span {
  display: block;
  transform: translateY(115%);
  /* easeOutCubic spreads the motion across the duration (unlike expo, which
     front-loads it) so the slower rise is actually visible; applies to both
     the hero H1 and the Partner H2 */
  transition: transform var(--kin-dur, 1.6s) cubic-bezier(.33, 1, .68, 1);
}
.js .kinetic.is-shown .line > span { transform: none; }
.kinetic .line:nth-child(2) > span { transition-delay: var(--kin-stagger, .24s); }

/* Highlighted keyword (hero) — a brand-colour box wipes in behind one word
   once its line has settled. .hl__base is the always-readable word; .hl__fill is
   the boxed copy that wipes over it. Per-word --hl-delay staggers Mind then Life
   at reading pace; --hlbox / --hltext set the colours (set inline in the markup). */
.hl { position: relative; display: inline-block; margin-left: .06em; }
.hl__fill {
  position: absolute; left: -.12em; top: 0; padding: 0 .12em;
  color: var(--hltext); white-space: nowrap; isolation: isolate;
  /* no clip by default → without JS the finished highlight simply shows */
}
/* the box sits behind the text as a shorter, centred layer, so two stacked
   lines show a small gap between the blue backgrounds */
.hl__fill::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 1em;
  background: var(--hlbox); border-radius: 9px; z-index: -1;
}
.js .kinetic .hl__fill { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--apple-slow); transition-delay: var(--hl-delay, .85s); }
.js .kinetic.is-shown .hl__fill { clip-path: inset(0 0 0 0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  /* stacked hero: orbit on top, copy centered beneath it */
  .hero__card { grid-template-columns: 1fr; text-align: center; }
  .orbit { order: -1; max-width: 340px; }
  .hero__sub { margin-inline: auto; }
  .pillars__grid { grid-template-columns: 1fr; gap: 32px; }
  .step, .step--reverse { grid-template-columns: 1fr; }
  .step--reverse .step__media { order: 0; }
  /* mobile only: center the 3 hub cards' text (Partner tab & desktop untouched) */
  .step__body { text-align: center; }
  .step__text { margin-inline: auto; }
  .infra__card { min-height: 460px; }
}
@media (max-width: 560px) {
  :root { --radius-lg: 28px; --pad: 18px; }
  .hero__sub { max-width: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* freeze the orbit: planets stay spread at their offset angles, no motion */
  .planet { animation-play-state: paused; }
  .orbit__core { animation: none; }
  .orbit__halo { animation: none; opacity: 0; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .pillar__iconwrap { opacity: 1; transform: none; transition: none; }
  /* hub cards: no glide/drift — photo and text simply present */
  .step .step__media img,
  .step .step__body { opacity: 1; transform: none; transition: none; }
  /* kinetic headings: lines simply present, no rise */
  .js .kinetic .line > span { transform: none; transition: none; }
  /* highlight box: shown, no wipe */
  .js .kinetic .hl__fill { clip-path: inset(0 0 0 0); transition: none; }
  html { scroll-behavior: auto; }
}