/* ==========================================================================
   Mirnova - Auros style
   Ported from the "Mirnova Auros Style.dc.html" design canvas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --color-liquid-abyss: #120D2E;
  --color-liquid-deep: #0C0823;
  /* channel lists, for the token colours that are needed at partial alpha */
  --color-liquid-abyss-rgb: 18, 13, 46;
  --color-liquid-deep-rgb: 12, 8, 35;
  --color-liquid-kelp: #2A2059;
  --color-liquid-kelp-hover: #352A70;
  --color-liquid-mist: #F0EDFF;
  --color-platinum: #ffffff;
  --color-silver-mist: #C0BBD8;
  --color-ash: #f2f2f2;
  --color-slate-deep: #707777;
  --color-lavender-phosphor: #E0CCFF;

  --gradient-bioluminescent-gradient: linear-gradient(90deg, rgb(139, 92, 246) 0%, rgb(196, 181, 253) 100%);
  --gradient-aurora-gradient: linear-gradient(90deg, rgb(196, 181, 253) 0%, rgb(238, 233, 255) 26.25%, rgb(255, 253, 250) 47.57%, rgb(216, 180, 254) 88.96%);

  --radius-cards: 16px;
  --radius-buttons: 6px;

  /* The canvas leaves this token for the host page to supply. */
  --page-max-width: 1200px;

  --nav-height: 80px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-liquid-abyss);
  color: var(--color-silver-mist);
  font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--color-silver-mist); text-decoration: none; }
a:hover { color: #ffffff; }

::selection { background: rgba(139, 92, 246, .45); color: var(--color-platinum); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-liquid-kelp); border-radius: 8px; }
::-webkit-scrollbar-track { background: var(--color-liquid-deep); }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes popUp { from { opacity: 0; transform: translateY(90px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes navIn { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }

@keyframes ringSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ringSpinR { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes ringPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .5; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: .9; }
}
@keyframes orbitDot { to { transform: rotate(360deg); } }
@keyframes nodeGlow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

@keyframes introVeil { 0%, 74% { transform: translateY(0); } 100% { transform: translateY(-101%); } }
@keyframes introMark {
  0% { opacity: 0; transform: scale(.4); }
  30% { opacity: 1; transform: scale(1.18); }
  45%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes introWord { 0%, 25% { opacity: 0; letter-spacing: .8em; } 55%, 100% { opacity: 1; letter-spacing: .3em; } }
@keyframes introLine { 0%, 30% { transform: scaleX(0); } 65%, 100% { transform: scaleX(1); } }

@keyframes glowDrift1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(130px, -90px) scale(1.18); }
  100% { transform: translate(-70px, 70px) scale(.92); }
}
@keyframes glowDrift2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-150px, 80px) scale(1.22); }
  100% { transform: translate(90px, -60px) scale(.9); }
}
@keyframes circDrift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(26px, -34px); }
  66% { transform: translate(-20px, 22px); }
}

/* --------------------------------------------------------------------------
   Scroll-driven reveals
   Where view() timelines are unsupported the animation resolves to a 0s
   fill-both run, so the element simply renders in its final state.
   -------------------------------------------------------------------------- */
.reveal {
  animation: rise both;
  animation-timeline: view();
  animation-range: entry 5% entry 45%;
}
.reveal--tight { animation-range: entry 5% entry 42%; }
.reveal--wide { animation-range: entry 0% entry 40%; }

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */
.shell { max-width: var(--page-max-width); margin: 0 auto; }

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-silver-mist);
}

.footnote {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-liquid-mist);
}

.mark {
  flex: none;
  display: inline-block;
  stroke: var(--color-liquid-mist);
}

.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--radius-buttons);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn--aurora { color: #222222; background: var(--gradient-aurora-gradient); }
.btn--aurora:hover { color: #222222; filter: brightness(1.04); }
.btn--kelp { color: var(--color-platinum); background: var(--color-liquid-kelp); }
.btn--kelp:hover { background: var(--color-liquid-kelp-hover); color: var(--color-platinum); }

.actions {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.section-title {
  margin: 20px 0 0;
  font-size: clamp(36px, 4.5vw, 61px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--color-platinum);
  text-wrap: balance;
}

.panel {
  max-width: var(--page-max-width);
  margin: 0 auto;
  border-radius: var(--radius-cards);
  background: var(--color-liquid-deep);
  text-align: center;
}
.panel p {
  margin: 24px auto 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-silver-mist);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Intro veil
   -------------------------------------------------------------------------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: linear-gradient(180deg, #0C0823, #120D2E);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: introVeil 2.4s cubic-bezier(.83, 0, .17, 1) both;
}
.intro__mark {
  width: 58px;
  height: 56px;
  stroke: url(#markGradient);
  filter: drop-shadow(0 0 30px rgba(139, 92, 246, .75));
  animation: introMark 1.6s cubic-bezier(.2, .7, .2, 1) both;
}
.intro__word {
  font-weight: 500;
  font-size: clamp(20px, 3.6vw, 27px);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--color-platinum);
  animation: introWord 1.7s ease both;
}
.intro__rule {
  width: 220px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8B5CF6, #D8B4FE, transparent);
  animation: introLine 1.8s cubic-bezier(.2, .7, .2, 1) both;
}
.intro__tag {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--color-silver-mist);
  animation: introWord 2s ease both;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 var(--gutter);
  background: linear-gradient(180deg, rgba(var(--color-liquid-deep-rgb), .85), rgba(var(--color-liquid-abyss-rgb), 0));
  backdrop-filter: blur(10px);
  animation: navIn .7s cubic-bezier(.2, .7, .2, 1) 2.35s both;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--color-platinum); }
.brand .mark { width: 24px; height: 23px; }
.brand__word {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-platinum);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav__links a:hover { color: var(--color-platinum); }
.nav .btn { padding: 12px 22px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 120px 24px 90px;
}
.hero__glow-a {
  top: -16%; left: -12%; width: 760px; height: 760px;
  background: radial-gradient(circle, rgba(139, 92, 246, .5), transparent 65%);
  filter: blur(80px);
  animation: glowDrift1 26s ease-in-out infinite alternate;
}
.hero__glow-b {
  top: 4%; right: -16%; width: 820px; height: 820px;
  background: radial-gradient(circle, rgba(196, 181, 253, .22), transparent 62%);
  filter: blur(90px);
  animation: glowDrift2 32s ease-in-out infinite alternate;
}
.hero__glow-c {
  bottom: -26%; left: 26%; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(216, 180, 254, .14), transparent 62%);
  filter: blur(90px);
  animation: glowDrift1 38s ease-in-out infinite alternate-reverse;
}
.hero__sphere {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(150vw, 860px);
  height: min(150vw, 860px);
  opacity: .85;
  pointer-events: none;
}
.ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.ring--pulse {
  width: min(160vw, 920px); height: min(160vw, 920px);
  border: 1px solid rgba(196, 181, 253, .14);
  animation: ringPulse 7s ease-in-out infinite;
}
.ring--dash {
  width: min(140vw, 780px); height: min(140vw, 780px);
  border: 1px dashed rgba(139, 92, 246, .4);
  animation: ringSpin 46s linear infinite;
}
.ring--outer {
  width: min(178vw, 1060px); height: min(178vw, 1060px);
  border: 1px solid rgba(216, 180, 254, .1);
  animation: ringSpinR 70s linear infinite;
}
.ring--outer span {
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #D8B4FE;
  box-shadow: 0 0 14px #D8B4FE;
}
.orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: min(140vw, 780px);
  height: min(140vw, 780px);
  margin: calc(min(140vw, 780px) / -2) 0 0 calc(min(140vw, 780px) / -2);
  animation: orbitDot 24s linear infinite;
  pointer-events: none;
}
.orbit span {
  position: absolute;
  top: -3px; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #C4B5FD;
  box-shadow: 0 0 12px #C4B5FD;
}
.hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 52% at 50% 50%, transparent 38%, #120D2E 88%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__eyebrow { animation: rise .9s cubic-bezier(.2, .7, .2, 1) 1.95s both; }
.hero__title {
  animation: rise 1s cubic-bezier(.2, .7, .2, 1) 2.1s both;
  margin: 28px 0 0;
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.046em;
  color: var(--color-platinum);
  text-wrap: balance;
}
.hero__lede {
  animation: rise 1s cubic-bezier(.2, .7, .2, 1) 2.25s both;
  margin: 28px 0 0;
  max-width: 560px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-silver-mist);
  text-wrap: pretty;
}
.hero .actions { animation: rise 1s cubic-bezier(.2, .7, .2, 1) 2.4s both; }
.hero__footnote { animation: rise 1s cubic-bezier(.2, .7, .2, 1) 2.55s both; margin-top: 44px; }

/* --------------------------------------------------------------------------
   Statement
   -------------------------------------------------------------------------- */
.statement {
  position: relative;
  padding: clamp(100px, 16vw, 180px) var(--gutter);
  overflow: hidden;
}
.statement__glow-a {
  top: 20%; left: -14%; width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(139, 92, 246, .4), transparent 64%);
  filter: blur(85px);
  animation: glowDrift2 30s ease-in-out infinite alternate;
}
.statement__glow-b {
  bottom: -20%; right: -10%; width: 680px; height: 680px;
  background: radial-gradient(circle, rgba(216, 180, 254, .16), transparent 62%);
  filter: blur(85px);
  animation: glowDrift1 36s ease-in-out infinite alternate;
}
.statement__ring {
  position: absolute;
  top: 18%; right: 14%;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5);
  animation: circDrift 14s ease-in-out infinite;
  pointer-events: none;
}
.statement__disc {
  position: absolute;
  top: 26%; right: 9%;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  opacity: .9;
  animation: circDrift 11s ease-in-out infinite reverse;
  pointer-events: none;
}
.statement__spark {
  position: absolute;
  bottom: 16%; left: 8%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gradient-aurora-gradient);
  box-shadow: 0 0 22px rgba(196, 181, 253, .8);
  animation: circDrift 12s ease-in-out infinite;
  pointer-events: none;
}
.statement__title {
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
  text-align: center;
  font-size: clamp(34px, 5.2vw, 72px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.04em;
  color: var(--color-platinum);
  text-wrap: balance;
}
.statement__title em { font-style: normal; color: var(--color-lavender-phosphor); }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */
.stats { position: relative; padding: 68px var(--gutter); overflow: hidden; }
.stats__eyebrow { text-align: center; }
.stats__title {
  margin: 20px auto 0;
  text-align: center;
  max-width: 640px;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--color-platinum);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 56px;
}
.stat {
  padding: 44px 36px;
  border-radius: var(--radius-cards);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
}
.stat__label { font-size: 13px; font-weight: 500; letter-spacing: .055em; text-transform: uppercase; }
.stat__value { font-size: clamp(56px, 6vw, 86px); font-weight: 500; line-height: 1; letter-spacing: -.046em; }
.stat--aurora { background: var(--gradient-aurora-gradient); }
.stat--aurora .stat__label { color: #222; }
.stat--aurora .stat__value { color: #111; }
.stat--kelp { background: var(--color-liquid-kelp); }
.stat--kelp .stat__label { color: var(--color-liquid-mist); }
.stat--kelp .stat__value { color: var(--color-lavender-phosphor); }

/* --------------------------------------------------------------------------
   Collaborations carousel
   -------------------------------------------------------------------------- */
.collab { margin-top: 64px; scroll-margin-top: calc(var(--nav-height) + 24px); }
.collab__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  flex-wrap: wrap;
}
.collab__title {
  margin: 14px 0 0;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--color-platinum);
}
.collab__nav { display: flex; gap: 8px; }
.collab__arrow {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-buttons);
  background: var(--color-liquid-kelp);
  border: 1px solid rgba(196, 181, 253, .18);
  color: var(--color-platinum);
  font-size: 16px;
  cursor: pointer;
  transition: background .25s;
}
.collab__arrow:hover { background: var(--color-liquid-kelp-hover); }
.collab__viewport { overflow: hidden; border-radius: var(--radius-cards); margin-top: 28px; }
.collab__track { display: flex; }
.collab__slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: clamp(36px, 5vw, 56px);
  background: var(--color-liquid-kelp);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  align-items: center;
}
.collab__sector {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-lavender-phosphor);
}
.collab__name {
  margin-top: 18px;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--color-platinum);
}
.collab__name--italic { font-style: italic; }

/* Brand logos, reversed for the kelp ground. Heights are tuned per brand so the
   wordmarks read at a comparable optical size, not a comparable box. */
.collab__logo {
  display: block;
  margin-top: 18px;
  height: var(--logo-h, 48px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.collab__logo--ege { --logo-h: 66px; }
.collab__logo--esolar { --logo-h: 38px; }
.collab__logo--isnuug { --logo-h: 46px; }
.collab__logo--corevac { --logo-h: 46px; }
.collab__logo--nps { --logo-h: 68px; }
.collab__logo--trillic { --logo-h: 40px; }
.collab__line { margin: 0; font-size: 16px; line-height: 1.4; color: var(--color-silver-mist); text-wrap: pretty; }
.collab__tag {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, .55);
}
.collab__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.collab__dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .4s;
  background: rgba(196, 181, 253, .25);
}
.collab__dot[aria-current='true'] { width: 26px; background: var(--gradient-bioluminescent-gradient); }

/* --------------------------------------------------------------------------
   Services timeline
   -------------------------------------------------------------------------- */
.services {
  position: relative;
  padding: 68px var(--gutter);
  scroll-margin-top: var(--nav-height);
  overflow: hidden;
}
.services__glow {
  top: 30%; right: -14%; width: 660px; height: 660px;
  background: radial-gradient(circle, rgba(196, 181, 253, .14), transparent 62%);
  filter: blur(85px);
  animation: glowDrift2 36s ease-in-out infinite alternate;
}
.services__title { max-width: 720px; }
.timeline { position: relative; max-width: 1020px; margin: 64px auto 0; padding: 6px 0; }
.timeline__rail {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(196, 181, 253, .12);
}
.timeline__progress {
  position: absolute;
  left: 50%; top: 0;
  width: 2px;
  height: 0;
  transform: translateX(-50%);
  background: var(--gradient-bioluminescent-gradient);
  box-shadow: 0 0 16px rgba(139, 92, 246, .8);
}
.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  padding: 30px 0;
}
.tl-row__dot {
  position: absolute;
  left: 50%; top: 44px;
  transform: translateX(-50%);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #2A2059;
  border: 2px solid rgba(196, 181, 253, .3);
  transition: background .4s, box-shadow .4s, border-color .4s;
  z-index: 1;
}
.tl-row__dot.is-on {
  background: #C4B5FD;
  border-color: #C4B5FD;
  box-shadow: 0 0 16px rgba(196, 181, 253, .9);
}
.tl-row__step {
  grid-row: 1;
  align-self: start;
  margin-top: 38px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-silver-mist);
}
.tl-row__card {
  grid-row: 1;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 38px 32px;
  border-radius: var(--radius-cards);
  background: var(--color-liquid-kelp);
  transition: background .3s, transform .3s;
  animation: popUp .9s cubic-bezier(.2, .7, .2, 1) both;
  animation-timeline: view();
  animation-range: entry 0% entry 42%;
}
.tl-row__card:hover { background: var(--color-liquid-kelp-hover); transform: translateY(-6px); }
.tl-row--left .tl-row__step { grid-column: 2; justify-self: start; }
.tl-row--left .tl-row__card { grid-column: 1; }
.tl-row--right .tl-row__step { grid-column: 1; justify-self: end; }
.tl-row--right .tl-row__card { grid-column: 2; }
.tl-row__glyph { width: 56px; height: 56px; flex: none; }
.tl-row__glyph .orbit-ring,
.tl-row__glyph .orbit-mote { transform-origin: 32px 32px; }
.tl-row__glyph .core { animation: nodeGlow 3s ease-in-out infinite; }
.tl-row:nth-child(1) .orbit-ring { animation: orbitDot 18s linear infinite; }
.tl-row:nth-child(1) .orbit-mote { animation: orbitDot 7s linear infinite; }
.tl-row:nth-child(2) .orbit-ring { animation: orbitDot 24s linear infinite reverse; }
.tl-row:nth-child(2) .orbit-mote { animation: orbitDot 9.5s linear infinite; }
.tl-row:nth-child(3) .orbit-ring { animation: orbitDot 30s linear infinite; }
.tl-row:nth-child(3) .orbit-mote { animation: orbitDot 12s linear infinite; }
.tl-row:nth-child(4) .orbit-ring { animation: orbitDot 36s linear infinite reverse; }
.tl-row:nth-child(4) .orbit-mote { animation: orbitDot 14.5s linear infinite; }
.tl-row__name {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1;
  color: var(--color-platinum);
}
.tl-row__copy {
  margin: 13px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-silver-mist);
  text-wrap: pretty;
}
.tl-row__badge {
  width: 32px; height: 32px;
  flex: none;
  border-radius: var(--radius-buttons);
  background: rgba(58, 45, 120, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-platinum);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Trillic
   -------------------------------------------------------------------------- */
.trillic {
  position: relative;
  padding: 68px var(--gutter);
  scroll-margin-top: var(--nav-height);
  overflow: hidden;
}
.trillic__glow {
  top: -18%; right: -10%; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(139, 92, 246, .34), transparent 64%);
  filter: blur(85px);
  animation: glowDrift1 30s ease-in-out infinite alternate;
}
.trillic .panel { padding: clamp(48px, 8vw, 120px) clamp(24px, 5vw, 80px); }
.trillic .section-title { margin: 24px auto 0; max-width: 820px; }
.trillic .panel p { max-width: 560px; }

/* --------------------------------------------------------------------------
   Method
   -------------------------------------------------------------------------- */
.method { padding: 68px var(--gutter) 100px; scroll-margin-top: var(--nav-height); }
.method__title { max-width: 760px; }
.method__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 64px;
}
.method__card { padding: 36px; border-radius: var(--radius-cards); background: var(--color-liquid-kelp); }
.method__n { font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--color-lavender-phosphor); }
.method__t {
  margin-top: 18px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-platinum);
}
.method__d { margin: 12px 0 0; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--color-silver-mist); }

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  padding: 0 var(--gutter) 68px;
  scroll-margin-top: var(--nav-height);
  overflow: hidden;
}
.cta__glow-a {
  bottom: -24%; left: 10%; width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(216, 180, 254, .15), transparent 62%);
  filter: blur(90px);
  animation: glowDrift2 34s ease-in-out infinite alternate;
}
.cta__glow-b {
  top: -10%; right: 4%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(139, 92, 246, .3), transparent 64%);
  filter: blur(80px);
  animation: glowDrift1 28s ease-in-out infinite alternate-reverse;
}
.cta .panel { padding: 120px clamp(24px, 5vw, 80px); }
.cta .section-title { margin: 0 auto; max-width: 760px; }
.cta .panel p { max-width: 520px; }
.cta__footnote { margin-top: 32px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--color-liquid-deep); padding: 120px var(--gutter) 48px; }
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer .mark { width: 26px; height: 25px; }
.footer__links { display: flex; gap: 24px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.footer__links a:hover { color: var(--color-platinum); }
.footer__base {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-slate-deep);
}
.footer__base a { color: inherit; }
.footer__base a:hover { color: var(--color-silver-mist); }
.footer__strap { letter-spacing: .12em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Narrow viewports
   The canvas artboard is desktop-only; these rules keep the two-column
   timeline and the nav usable below tablet width.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .tl-row { grid-template-columns: 1fr; gap: 0; padding: 22px 0 22px 34px; }
  .tl-row__dot { left: 0; transform: none; top: 40px; }
  .timeline { padding-left: 0; }
  .timeline__rail,
  .timeline__progress { left: 6px; transform: none; }
  .tl-row--left .tl-row__step,
  .tl-row--right .tl-row__step {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 0 0 12px;
  }
  .tl-row--left .tl-row__card,
  .tl-row--right .tl-row__card { grid-column: 1; grid-row: 2; padding: 30px 24px; }
  .cta .panel { padding: 80px 24px; }
  .collab__logo { height: calc(var(--logo-h, 48px) * .82); }
}

@media (max-width: 520px) {
  .nav .btn { padding: 10px 14px; font-size: 11px; }
  .collab__head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}