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

:root {
  --violet: #6C21DC;
  --violet-lt: #B683F7;
  --violet-deep: #3A1178;
  --violet-ink: #1B0B36;
  --orange: #F29100;
  --orange-lt: #FFB03F;
  --ink: #08050E;
  --muted: #605A6E;
  --paper: #F3F1F8;
  --muted-lt: #A79EBD;
  --line: rgba(8, 5, 14, .12);
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --e: cubic-bezier(.22, .61, .36, 1);
  --nav: 86px;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth
}

body {
  font-family: var(--sans);
  background: #fff;
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

a {
  color: inherit;
  text-decoration: none
}

ul {
  list-style: none
}

h1,
h2,
h3 {
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 700
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px
}

.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px)
}

/* ===== slim nav ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background .35s var(--e),
    border-color .35s var(--e), color .35s var(--e);
  border-bottom: 1px solid transparent;
  color: #fff
}

.nav.solid {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
  color: var(--ink)
}

.nav__in {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%
}

.logo {
  display: flex;
  align-items: center;
  gap: 13px
}

.logo .mark {
  height: 42px;
  width: auto
}

.logo .wordmark {
  height: 24px;
  width: auto
}

.foot .logo .mark {
  height: 46px
}

.foot .logo .wordmark {
  height: 26px
}

.nav__links {
  display: flex;
  gap: 4px;
  margin-left: auto;
  font-size: .95rem
}

.nav__links a {
  padding: 9px 15px;
  border-radius: 999px;
  opacity: .75;
  transition: opacity .2s var(--e), background .2s var(--e)
}

.nav__links a:hover {
  opacity: 1;
  background: rgba(127, 127, 127, .14)
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--orange);
  color: #17110a;
  font-weight: 600;
  font-size: .94rem
}

.cta:hover {
  background: var(--orange-lt)
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: inherit
}

.burger i,
.burger i::before,
.burger i::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px
}

.burger i {
  position: relative
}

.burger i::before,
.burger i::after {
  content: "";
  position: absolute;
  left: 0
}

.burger i::before {
  top: -6px
}

.burger i::after {
  top: 6px
}

/* ===== hero: full height ===== */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--paper);
  background: radial-gradient(48rem 34rem at 20% 0%, rgba(108, 33, 220, .5), transparent 60%),
    radial-gradient(34rem 26rem at 90% 20%, rgba(242, 145, 0, .18), transparent 60%),
    linear-gradient(180deg, #0E0620, #08050E)
}

.hero__in {
  text-align: center;
  padding: calc(var(--nav) + 40px) clamp(20px, 4vw, 40px) 80px;
  max-width: 980px
}

.hero .eyebrow {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--violet-lt)
}

.hero h1 {
  font-size: clamp(2.3rem, 6.4vw, 5.2rem);
  margin: 24px 0 22px
}

.hero p {
  color: var(--muted-lt);
  font-size: 1.1rem;
  max-width: 56ch;
  margin-inline: auto
}

.hero__acts {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  border: 1px solid transparent;
  transition: all .22s var(--e)
}

.btn--o {
  background: var(--orange);
  color: #17110a
}

.btn--o:hover {
  background: var(--orange-lt)
}

.btn--g {
  border-color: rgba(182, 131, 247, .4);
  color: var(--paper)
}

.btn--g:hover {
  background: rgba(108, 33, 220, .25);
  border-color: var(--violet-lt)
}

/* ===== pinned pillar panels ===== */
.pillar {
  border-top: 1px solid var(--line)
}

.pillar__in {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 80px);
  padding-block: clamp(48px, 7vw, 90px)
}

.pillar__stick {
  position: sticky;
  top: calc(var(--nav) + 48px);
  align-self: start
}

.pillar__n {
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--violet)
}

.pillar h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  margin: 16px 0 18px
}

.pillar__stick p {
  color: var(--muted);
  max-width: 42ch
}

.pillar__stick .btn {
  margin-top: 24px;
  background: var(--ink);
  color: #fff;
  padding: 13px 24px
}

.pillar__stick .btn:hover {
  background: var(--violet)
}

.detail {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 18px
}

.detail:first-child {
  border-top: 1px solid var(--line)
}

.detail .d {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--violet-lt);
  margin-top: 9px
}

.detail h3 {
  font-size: 1.14rem;
  margin-bottom: 7px
}

.detail p {
  color: var(--muted);
  font-size: .95rem
}

.pillar--dark {
  background: var(--ink);
  color: var(--paper);
  border-top: 0
}

.pillar--dark .pillar__stick p,
.pillar--dark .detail p {
  color: var(--muted-lt)
}

.pillar--dark .detail,
.pillar--dark .detail:first-child {
  border-color: rgba(243, 241, 248, .14)
}

.pillar--dark .pillar__n {
  color: var(--orange)
}

.pillar--dark .pillar__stick .btn {
  background: var(--orange);
  color: #17110a
}

.pillar--dark .pillar__stick .btn:hover {
  background: var(--orange-lt)
}

/* ===== stacking work cards ===== */
.stack {
  padding-block: clamp(50px, 7vw, 90px) 0
}

.stack__head {
  max-width: 620px;
  margin-bottom: 34px
}

.stack__head h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  margin-bottom: 14px
}

.stack__head p {
  color: var(--muted)
}

.sticky-card {
  position: sticky;
  top: calc(var(--nav) + 30px);
  margin-bottom: 22px
}

.sc {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 330px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 30px 60px -40px rgba(8, 5, 14, .5)
}

.sc__art {
  position: relative
}

.sc__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

}

.sc__art span {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-size: 3.4rem;
  color: rgba(243, 241, 248, .9);
  text-shadow: 0 0 40px rgba(182, 131, 247, .6)
}

.sc__b {
  padding: clamp(26px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px
}

.sc__tag {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--violet)
}

.sc__b h3 {
  font-size: clamp(1.3rem, 2.3vw, 1.9rem)
}

.sc__b p {
  color: var(--muted);
  font-size: .95rem
}

.sc__meta {
  display: flex;
  gap: 26px;
  margin-top: 8px;
  font-size: .82rem;
  color: var(--muted)
}

.sc__meta b {
  display: block;
  color: var(--ink);
  font-size: 1.25rem;
  letter-spacing: -.03em
}

.ph-a {
  background: radial-gradient(circle at 30% 25%, rgba(242, 145, 0, .3), transparent 55%), linear-gradient(135deg, #3A1178, #1B0B36)
}

.ph-b {
  background: radial-gradient(circle at 70% 30%, rgba(182, 131, 247, .4), transparent 55%), linear-gradient(135deg, #2A0F5C, #3A1178)
}

.ph-c {
  background: radial-gradient(circle at 50% 70%, rgba(242, 145, 0, .34), transparent 55%), linear-gradient(160deg, #1B0B36, #0E0620)
}

.ph-d {
  background: radial-gradient(circle at 20% 80%, rgba(182, 131, 247, .36), transparent 55%), linear-gradient(120deg, #6C21DC, #3A1178)
}

/* ===== proof + cta ===== */
.proof {
  padding-block: clamp(60px, 8vw, 110px);
  border-top: 1px solid var(--line);
  margin-top: 40px
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px
}

.q {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: border-color .3s var(--e), transform .35s var(--e)
}

.q:hover {
  border-color: var(--violet-lt);
  transform: translateY(-4px)
}

.q blockquote {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 16px
}

.q figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--muted)
}

.av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep))
}

.av--o {
  background: linear-gradient(135deg, var(--orange), #B86E00)
}

.av--l {
  background: linear-gradient(135deg, var(--violet-lt), var(--violet))
}

.end {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(60px, 9vw, 120px) 0;
  text-align: center
}

.end h2 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  max-width: 18ch;
  margin-inline: auto
}

.end p {
  color: var(--muted-lt);
  max-width: 50ch;
  margin: 20px auto 32px
}

.end .acts {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap
}

.foot {
  background: #05030A;
  color: var(--muted-lt);
  padding: 44px 0 26px
}

.foot__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px
}

.foot h4 {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 12px
}

.foot li {
  margin-bottom: 8px
}

.foot a {
  font-size: .88rem
}

.foot a:hover {
  color: var(--violet-lt)
}

.foot p {
  font-size: .88rem;
  margin-top: 12px;
  max-width: 32ch
}

.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
  list-style: none
}

.foot .foot__social li {
  margin: 0
}

.foot .foot__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(243, 241, 248, .18);
  color: var(--muted-lt);
  transition: color .2s var(--e), border-color .2s var(--e), transform .2s var(--e)
}

.foot .foot__social a:hover,
.foot .foot__social a:focus-visible {
  color: var(--violet-lt);
  border-color: var(--violet-lt);
  transform: translateY(-2px)
}

.foot__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor
}

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: .76rem;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(243, 241, 248, .14)
}

[data-r] {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .6s var(--e), translate .6s var(--e);
  transition-delay: calc(var(--i, 0)*70ms)
}

[data-r].in {
  opacity: 1;
  translate: 0 0
}

@media (max-width:900px) {
  :root {
    --nav: 74px
  }

  .logo .mark {
    height: 36px
  }

  .logo .wordmark {
    height: 20px
  }

  .cta {
    padding: 10px 18px;
    font-size: .86rem
  }

  .nav__links {
    display: none
  }

  .burger {
    display: grid;
    margin-left: auto
  }

  .nav.open .nav__links {
    display: flex;
    position: absolute;
    top: var(--nav);
    left: 12px;
    right: 12px;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 26px 52px -30px rgba(8, 5, 14, .5);
    color: var(--ink)
  }

  .nav.open .nav__links a {
    padding: 12px 14px;
    font-size: 1rem;
    opacity: 1;
    color: var(--ink)
  }

  .pillar__in {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .pillar__stick {
    position: static
  }

  .sc {
    grid-template-columns: 1fr
  }

  .sc__art {
    min-height: 190px
  }

  .sticky-card {
    position: static
  }

  .proof__grid {
    grid-template-columns: 1fr
  }

  .foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:640px) {
  :root {
    --nav: 70px
  }

  .nav__in {
    gap: 10px
  }

  .logo {
    gap: 9px
  }

  .logo .mark {
    height: 32px
  }

  .logo .wordmark {
    height: 18px
  }

  .cta {
    padding: 9px 15px;
    font-size: .8rem
  }

  .burger {
    width: 40px;
    height: 40px
  }

  .foot .logo .mark {
    height: 40px
  }

  .foot .logo .wordmark {
    height: 23px
  }

  .foot__grid {
    grid-template-columns: 1fr
  }
}

@media (max-height:520px) and (orientation:landscape) {
  .hero {
    min-height: auto;
    padding-block: 40px
  }

  .hero__in {
    padding-top: calc(var(--nav) + 20px);
    padding-bottom: 40px
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition-duration: .001ms !important
  }

  [data-r] {
    opacity: 1 !important;
    translate: none !important
  }

  .sticky-card,
  .pillar__stick {
    position: static
  }
}

/* ==========================================================================
   INNER PAGES — shared chrome
   ========================================================================== */
.nav__links a[aria-current="page"] {
  opacity: 1;
  color: var(--violet);
  background: rgba(108, 33, 220, .12)
}

.nav:not(.solid) .nav__links a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, .16)
}

.phead {
  padding: calc(var(--nav) + clamp(40px, 6vw, 64px)) 0 clamp(34px, 5vw, 54px);
  background: linear-gradient(180deg, rgba(108, 33, 220, .10), rgba(108, 33, 220, 0));
  border-bottom: 1px solid var(--line)
}

.crumb {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 16px
}

.crumb a {
  color: var(--violet)
}

.crumb a:hover {
  text-decoration: underline
}

.phead h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  max-width: 19ch
}

.phead .lead {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 58ch;
  margin-top: 18px
}

.sec {
  padding: clamp(48px, 7vw, 90px) 0
}

.sec--line {
  border-top: 1px solid var(--line)
}

.sec--dark {
  background: var(--ink);
  color: var(--paper)
}

.sec--dark .shead p,
.sec--dark .lead {
  color: var(--muted-lt)
}

.shead {
  max-width: 640px;
  margin-bottom: clamp(26px, 4vw, 42px)
}

.shead h2 {
  font-size: clamp(1.55rem, 3.2vw, 2.4rem);
  margin-bottom: 12px
}

.shead p {
  color: var(--muted)
}

.shead--mid {
  margin-inline: auto;
  text-align: center
}

.anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px
}

.anchors a {
  font-size: .84rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: all .22s var(--e)
}

.anchors a:hover {
  border-color: var(--violet);
  color: var(--violet);
  background: rgba(108, 33, 220, .06)
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px
}

.chips span {
  font-size: .76rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px
}

.sec--dark .chips span {
  color: var(--muted-lt);
  border-color: rgba(243, 241, 248, .18)
}

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px
}

.fbtn {
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: all .22s var(--e)
}

.fbtn:hover {
  color: var(--ink);
  border-color: var(--violet-lt)
}

.fbtn[aria-pressed="true"] {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff
}

.fcount {
  margin-left: auto;
  font-size: .84rem;
  color: var(--muted)
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.pcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  transition: border-color .3s var(--e), transform .35s var(--e), box-shadow .35s var(--e)
}

.pcard:hover {
  border-color: var(--violet-lt);
  transform: translateY(-5px);
  box-shadow: 0 26px 52px -34px rgba(108, 33, 220, .55)
}

.pcard.hide {
  display: none
}

.pcard.pop {
  animation: pop .34s var(--e)
}

/* no fill-mode: `both` would pin
   opacity at 1 and override the scroll reveal on first load */
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.art {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden
}

.art span {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-size: 2.6rem;
  color: rgba(243, 241, 248, .9);
  text-shadow: 0 0 34px rgba(182, 131, 247, .6);
  transition: scale .55s var(--e)
}

.art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.pcard:hover .art span {
  scale: 1.14
}

.pcard__b {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1
}

.pcard__tag {
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--violet)
}

.pcard h3 {
  font-size: 1.1rem
}

.pcard p {
  font-size: .9rem;
  color: var(--muted)
}

.pcard .btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 10px 18px;
  font-size: .84rem;
  background: transparent;
  border-color: var(--line);
  color: var(--ink)
}

.pcard .btn:hover {
  border-color: var(--violet);
  color: var(--violet)
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6, 3, 12, .78);
  backdrop-filter: blur(5px);
  display: none;
  padding: clamp(14px, 4vw, 40px);
  overflow-y: auto
}

.modal.on {
  display: grid;
  place-items: start center
}

.modal__box {
  position: relative;
  width: min(760px, 100%);
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  animation: mIn .28s var(--e) both
}

@keyframes mIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.99)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.modal__art {
  position: relative;
  aspect-ratio: 16/8
}

.modal__art span {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-size: 3.4rem;
  color: rgba(243, 241, 248, .9);
  text-shadow: 0 0 40px rgba(182, 131, 247, .6)
}

.modal__b {
  padding: clamp(22px, 3.4vw, 38px)
}

.modal__b h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin: 10px 0 18px
}

.modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line)
}

.modal__meta span {
  display: block;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 3px
}

.modal__meta b {
  font-size: .92rem;
  font-weight: 600
}

.modal__b>p {
  color: var(--muted)
}

.modal__out {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(108, 33, 220, .07);
  border-left: 3px solid var(--orange);
  font-size: .94rem
}

.modal__x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(8, 5, 14, .7);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1
}

.modal__x:hover {
  background: var(--violet)
}

/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.feature {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 26px;
  background: #fff
}

.feature .art {
  aspect-ratio: auto;
  min-height: 260px;
  height: 100%
}

.feature__b {
  padding: clamp(24px, 3.4vw, 40px);
  align-self: center
}

.feature__b h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  margin: 12px 0 12px
}

.feature__b p {
  color: var(--muted)
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  font-size: .76rem;
  color: var(--muted)
}

.meta .tag {
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--violet)
}

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  transition: border-color .3s var(--e), transform .35s var(--e)
}

.post:hover {
  border-color: var(--violet-lt);
  transform: translateY(-4px)
}

.post__b {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1
}

.post h3 {
  font-size: 1.04rem
}

.post h3 a:hover {
  color: var(--violet)
}

.post p {
  font-size: .88rem;
  color: var(--muted)
}

.post .art {
  display: block;
  overflow: hidden;
}

.post .art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post:hover .art img {
  transform: scale(1.05);
}

.rlink {
  margin-top: auto;
  font-size: .86rem;
  font-weight: 600;
  color: var(--violet);
  display: inline-flex;
  gap: 7px;
  transition: gap .3s var(--e)
}

.post:hover .rlink,
.feature:hover .rlink {
  gap: 13px
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px)
}

.split p {
  color: var(--muted);
  margin-bottom: 14px
}

.values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px
}

.value {
  border-left: 2px solid var(--violet);
  padding: 2px 0 2px 20px
}

.value h3 {
  font-size: 1.06rem;
  margin-bottom: 7px
}

.value p {
  color: var(--muted);
  font-size: .92rem
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.stat b {
  display: block;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.045em
}

.stat span {
  font-size: .84rem;
  color: var(--muted)
}

.sec--dark .stat span {
  color: var(--muted-lt)
}

.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.member {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  transition: border-color .3s var(--e), transform .35s var(--e)
}

.member:hover {
  border-color: var(--violet-lt);
  transform: translateY(-4px)
}

.member__art {
  aspect-ratio: 1/1;
  display: grid;
  place-items: center
}

.member__art b {
  font-size: 1.6rem;
  color: rgba(243, 241, 248, .92);
  letter-spacing: .06em
}

.member__b {
  padding: 18px
}

.member h3 {
  font-size: 1.02rem;
  margin-bottom: 3px
}

.member .role {
  font-size: .86rem;
  color: var(--muted);
  margin-bottom: 10px
}

.member .pill {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  color: var(--violet);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px
}

.tl {
  position: relative;
  padding-left: 0;
  margin: 0;
  list-style: none
}

.step {
  position: relative
}

.step::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--line)
}

.step:first-child::before {
  top: 36px
}

/* start on the first dot */
.step:last-child::before {
  bottom: calc(100% - 36px)
}

/* stop on the last dot */
.sec--dark .step::before {
  background: rgba(243, 241, 248, .16)
}

.step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0
}

.step__n {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--violet);
  font-weight: 700;
  font-size: .88rem;
  position: relative;
  z-index: 1
}

.sec--dark .step__n {
  background: var(--ink);
  border-color: rgba(243, 241, 248, .22);
  color: var(--violet-lt)
}

.step:last-child .step__n {
  border-color: var(--orange);
  color: var(--orange)
}

.step h3 {
  font-size: 1.1rem;
  margin-bottom: 6px
}

.step p {
  color: var(--muted)
}

.sec--dark .step p {
  color: var(--muted-lt)
}

.roles {
  display: grid;
  gap: 12px
}

.role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color .3s var(--e), background .3s var(--e)
}

.role-row:hover {
  border-color: var(--violet-lt);
  background: rgba(108, 33, 220, .04)
}

.role-row h3 {
  font-size: 1.04rem
}

.role-row span {
  font-size: .84rem;
  color: var(--muted)
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.cgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(30px, 5vw, 60px);
  align-items: start
}

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px
}

.field {
  margin-bottom: 18px
}

.field label {
  display: block;
  font-size: .86rem;
  font-weight: 600;
  margin-bottom: 7px
}

.field label i {
  color: var(--orange);
  font-style: normal
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: .96rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color .2s var(--e), box-shadow .2s var(--e)
}

.field textarea {
  min-height: 150px;
  resize: vertical
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--violet-lt)
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(108, 33, 220, .14)
}

.field .err {
  display: none;
  color: #C0392B;
  font-size: .8rem;
  margin-top: 6px
}

.field.bad input,
.field.bad select,
.field.bad textarea {
  border-color: #C0392B
}

.field.bad .err {
  display: block
}

.fnote {
  font-size: .8rem;
  color: var(--muted);
  margin-top: 14px
}

.fstatus {
  display: none;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 14px;
  margin-bottom: 20px;
  background: rgba(108, 33, 220, .08);
  border-left: 3px solid var(--orange);
  font-size: .94rem
}

.fstatus.on {
  display: block
}

.clist li {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line)
}

.clist li:first-child {
  padding-top: 0
}

.clist .ico {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(108, 33, 220, .10);
  color: var(--violet);
  font-size: 1rem
}

.clist span {
  display: block;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px
}

.clist a,
.clist p {
  font-size: .98rem;
  font-weight: 500
}

.clist a:hover {
  color: var(--violet)
}

.quickcta {
  margin-top: 24px;
  display: grid;
  gap: 10px
}

/* ==========================================================================
   LEGAL
   ========================================================================== */
.legal {
  max-width: 70ch
}

.legal h2 {
  font-size: 1.2rem;
  margin: 32px 0 10px
}

.legal h2:first-child {
  margin-top: 0
}

.legal p,
.legal li {
  color: var(--muted);
  margin-bottom: 12px
}

.legal ul {
  padding-left: 20px;
  list-style: disc
}

.legal li {
  margin-bottom: 8px
}

/* ==========================================================================
   INNER PAGES — responsive
   ========================================================================== */
@media (max-width:960px) {

  .pgrid,
  .posts,
  .team {
    grid-template-columns: repeat(2, 1fr)
  }

  .feature,
  .cgrid,
  .split {
    grid-template-columns: 1fr
  }

  .feature .art {
    min-height: 210px
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 20px
  }

  .values {
    grid-template-columns: 1fr
  }
}

@media (max-width:640px) {

  .pgrid,
  .posts,
  .team,
  .frow {
    grid-template-columns: 1fr
  }

  .fcount {
    margin-left: 0;
    width: 100%
  }

  .modal__box {
    border-radius: 16px
  }

  .step {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px
  }

  .step::before,
  .tl::after {
    left: 17px
  }

  .step:first-child::before {
    top: 33px
  }

  .step:last-child::before {
    bottom: calc(100% - 33px)
  }

  .tl::after {
    top: 33px
  }

  .step__n {
    width: 34px;
    height: 34px;
    font-size: .8rem
  }

  .anchors a {
    flex: 1 1 auto;
    text-align: center
  }
}

/* ==========================================================================
   MOTION — reveal variants, page-head intro, progress bar, micro-interactions
   ========================================================================== */

/* the base reveal now carries scale / rotate / filter too, so variants work */
[data-r] {
  transition: opacity .6s var(--e), translate .6s var(--e), scale .6s var(--e),
    rotate .6s var(--e), filter .6s var(--e)
}

[data-r="left"] {
  translate: -42px 0
}

[data-r="right"] {
  translate: 42px 0
}

[data-r="zoom"] {
  translate: 0 18px;
  scale: .93
}

[data-r="blur"] {
  translate: 0 20px;
  filter: blur(10px)
}

[data-r="tilt"] {
  translate: 0 34px;
  rotate: 2deg;
  scale: .97;
  transform-origin: 50% 100%
}

[data-r="rise"] {
  translate: 0 30px;
  scale: .98
}

/* higher specificity than any variant above, so landing always wins */
[data-r].in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  rotate: 0deg;
  filter: none
}

/* ---- page head: plays on load, no scroll needed ---- */
.phead {
  position: relative;
  overflow: hidden
}

.phead>* {
  position: relative;
  z-index: 1
}

.phead::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -40%;
  right: -10%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(108, 33, 220, .22), transparent 62%);
  animation: drift 22s ease-in-out infinite alternate
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1)
  }

  to {
    transform: translate3d(-9%, 7%, 0) scale(1.16)
  }
}

@keyframes headIn {
  from {
    opacity: 0;
    translate: 0 24px
  }

  to {
    opacity: 1;
    translate: 0 0
  }
}

.phead .crumb {
  animation: headIn .7s var(--e) backwards
}

.phead h1 {
  animation: headIn .75s var(--e) .08s backwards
}

.phead .lead {
  animation: headIn .7s var(--e) .18s backwards
}

.phead .anchors {
  animation: headIn .7s var(--e) .28s backwards
}

/* ---- scroll progress ---- */
.prog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  background: linear-gradient(90deg, var(--violet), var(--orange))
}

/* ---- counters ---- */
.stat b {
  font-variant-numeric: tabular-nums
}

/* ---- timeline: the connector fills as you scroll through it ---- */
.tl::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 36px;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  z-index: 0;
  height: var(--fill, 0px);
  background: linear-gradient(var(--violet-lt), var(--orange));
  transition: height .15s linear
}

/* ---- micro-interactions ---- */
.anchors a {
  transition: all .22s var(--e)
}

.anchors a:hover {
  transform: translateY(-2px)
}

.fbtn {
  transition: all .22s var(--e), transform .18s var(--e)
}

.fbtn:hover {
  transform: translateY(-2px)
}

.value {
  transition: border-color .3s var(--e)
}

.value:hover {
  border-left-color: var(--orange)
}

.role-row {
  transition: border-color .3s var(--e), background .3s var(--e), transform .3s var(--e)
}

.role-row:hover {
  transform: translateX(5px)
}

.clist .ico {
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background .3s var(--e)
}

.clist li:hover .ico {
  transform: rotate(-8deg) scale(1.1);
  background: rgba(242, 145, 0, .16)
}

.member__art b {
  transition: scale .45s cubic-bezier(.34, 1.56, .64, 1)
}

.member:hover .member__art b {
  scale: 1.14
}

.detail {
  transition: transform .3s var(--e)
}

.detail:hover {
  transform: translateX(4px)
}

.detail .d {
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .3s var(--e)
}

.detail:hover .d {
  transform: scale(1.5);
  background: var(--orange)
}

.chips span {
  transition: color .25s var(--e), border-color .25s var(--e), transform .25s var(--e)
}

.chips span:hover {
  color: var(--violet);
  border-color: var(--violet-lt);
  transform: translateY(-2px)
}

.sec--dark .chips span:hover {
  color: var(--orange);
  border-color: var(--orange)
}

.field label {
  transition: color .2s var(--e)
}

.field:focus-within label {
  color: var(--violet)
}

.legal h2 {
  position: relative;
  padding-left: 16px
}

.legal h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet)
}

@media (prefers-reduced-motion:reduce) {
  [data-r] {
    scale: none !important;
    rotate: none !important;
    filter: none !important
  }

  .phead::after,
  .phead .crumb,
  .phead h1,
  .phead .lead,
  .phead .anchors {
    animation: none !important
  }

  .prog {
    display: none
  }

  .tl::after {
    height: 0 !important;
    transition: none
  }
}

/* ==========================================================================
   PILL NAVBAR — index.html only
   Added as its own selectors. The .nav block further up is untouched, so the
   other seven pages keep the navbar they already had.
   ========================================================================== */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(16px, 4vw, 28px);
  /* solid is the DEFAULT, so every inner page looks like the old navbar with
     no flash of white-on-white while the script is still loading */
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background .35s var(--e), border-color .35s var(--e), color .35s var(--e);
  animation: barDrop .7s var(--e) backwards;
  /* backwards, not both: leaves no
                                                 lingering transform on a fixed bar */
}

/* only the home page carries --hero, and only it starts invisible */
.top-bar--hero {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  color: #fff;
}

.top-bar--hero.solid {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
  color: var(--ink);
}

@keyframes barDrop {
  from {
    opacity: 0;
    transform: translateY(-18px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.pill-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
}

.top-bar .logo {
  flex: 0 0 auto;
  margin-right: auto
}

.top-bar .logo img {
  transition: transform .3s var(--e)
}

.top-bar .logo:hover img {
  transform: scale(1.03)
}

.pill-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
}

.pill-glider {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  width: 0;
  border-radius: 999px;
  background: rgba(108, 33, 220, .10);
  pointer-events: none;
  z-index: 0;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1),
    width .45s cubic-bezier(.34, 1.56, .64, 1);
  will-change: transform;
  /* never width — that forces a relayout each frame */
}

.pill-links a {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: color .25s var(--e);
}

.pill-links a:hover,
.pill-links a:focus-visible,
.pill-links a.is-active {
  color: var(--violet)
}

.pill-links a.is-active {
  font-weight: 600
}

/* while the home bar is still invisible, flip to the light-on-dark palette */
.top-bar--hero:not(.solid) .pill-glider {
  background: rgba(255, 255, 255, .18)
}

.top-bar--hero:not(.solid) .pill-links a {
  color: rgba(255, 255, 255, .78)
}

.top-bar--hero:not(.solid) .pill-links a:hover,
.top-bar--hero:not(.solid) .pill-links a:focus-visible,
.top-bar--hero:not(.solid) .pill-links a.is-active {
  color: #fff
}

.pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  background: var(--violet);
  flex: 0 0 auto;
  transition: background .22s var(--e), transform .18s var(--e);
}

.pill-cta:hover {
  background: var(--violet-deep);
  transform: translateY(-2px)
}

.pill-cta:active {
  transform: translateY(0)
}

.pill-cta svg {
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1)
}

.pill-cta:hover svg {
  transform: translateX(3px)
}

/* the original pill bar had no mobile state — seven links in a nowrap flex row
   ran ~90px past a 390px screen. Same collapse pattern as the other pages. */
.pill-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  cursor: pointer;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  transition: color .35s var(--e), border-color .35s var(--e);
}

.pill-burger i,
.pill-burger i::before,
.pill-burger i::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background .2s var(--e);
}

.pill-burger i {
  position: relative
}

.pill-burger i::before,
.pill-burger i::after {
  content: "";
  position: absolute;
  left: 0
}

.pill-burger i::before {
  top: -6px
}

.pill-burger i::after {
  top: 6px
}

.top-bar.open .pill-burger i {
  background: transparent
}

.top-bar.open .pill-burger i::before {
  transform: translateY(6px) rotate(45deg)
}

.top-bar.open .pill-burger i::after {
  transform: translateY(-6px) rotate(-45deg)
}

@media (max-width:980px) {
  .pill-nav {
    gap: 12px
  }

  .pill-burger {
    display: grid
  }

  .pill-links {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 26px 52px -30px rgba(8, 5, 14, .5);
    opacity: 0;
    visibility: hidden;
    translate: 0 -10px;
    transition: opacity .24s var(--e), translate .24s var(--e), visibility 0s linear .24s;
    max-height: calc(100dvh - var(--nav) - 36px);
    overflow-y: auto;
  }

  .top-bar.open .pill-links {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s
  }

  /* the dropdown is a white card in both states, so its links stay dark */
  .pill-links a,
  .top-bar--hero:not(.solid) .pill-links a {
    display: block;
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: 12px;
    color: var(--muted)
  }

  .pill-links a.is-active,
  .top-bar--hero:not(.solid) .pill-links a.is-active {
    color: var(--violet);
    background: rgba(108, 33, 220, .08)
  }

  .pill-glider {
    display: none
  }
}

@media (max-width:640px) {
  .pill-cta {
    padding: 10px 16px;
    font-size: .82rem
  }

  .pill-burger {
    width: 40px;
    height: 40px
  }
}

@media (prefers-reduced-motion:reduce) {
  .top-bar {
    animation: none
  }

  .pill-glider {
    transition: none
  }
}

/* ---- contact form: honeypot + error state ---- */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0
}

.fstatus--err {
  background: rgba(192, 57, 43, .07);
  border-left-color: #C0392B
}

.fstatus a {
  color: var(--violet);
  font-weight: 600;
  text-decoration: underline
}

.fstatus code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: rgba(8, 5, 14, .07);
  padding: 1px 5px;
  border-radius: 5px
}

[data-send][disabled] {
  opacity: .6;
  cursor: progress
}

/* ==========================================================================
   ARTICLE PAGES
   ========================================================================== */
.amet {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin-top: 22px;
  font-size: .84rem;
  color: var(--muted)
}

.amet__by {
  font-weight: 600;
  color: var(--ink)
}

.amet__by::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--violet);
  margin-left: 20px;
  vertical-align: middle
}

.agrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(30px, 5vw, 64px);
  align-items: start
}

/* the reading column */
.abody {
  max-width: 70ch;
  min-width: 0;
  font-size: 1.04rem;
  line-height: 1.75
}

.abody>p {
  margin-bottom: 20px;
  color: #241E32
}

.abody h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  margin: 44px 0 16px;
  scroll-margin-top: calc(var(--nav) + 24px)
}

.abody h2:first-child {
  margin-top: 0
}

.abody ul,
.abody ol {
  margin: 0 0 22px 22px;
  display: grid;
  gap: 9px
}

.abody ul {
  list-style: disc
}

.abody ol {
  list-style: decimal
}

.abody li {
  color: #241E32;
  padding-left: 4px
}

.abody li::marker {
  color: var(--violet)
}

.abody b {
  font-weight: 600;
  color: var(--ink)
}

.abody a {
  color: black;
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 2px
}

.abody code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: rgba(108, 33, 220, .08);
  color: var(--violet-deep);
  padding: 2px 6px;
  border-radius: 6px
}

.abody pre {
  background: var(--ink);
  color: #E6E1F2;
  padding: 20px 22px;
  border-radius: 14px;
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 24px;
  font-size: .88rem;
  line-height: 1.6
}

.abody pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: 1em
}

.abody blockquote {
  margin: 0 0 24px;
  padding: 18px 22px;
  border-left: 3px solid var(--orange);
  background: rgba(242, 145, 0, .06);
  border-radius: 0 14px 14px 0;
  font-size: 1rem
}

.abody blockquote b {
  color: var(--ink)
}

.aend {
  margin-top: 46px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(108, 33, 220, .07), transparent)
}

.aend p {
  margin-bottom: 18px;
  color: var(--muted)
}

.aend b {
  color: var(--ink)
}

/* sticky sidebar */
.aside {
  position: sticky;
  top: calc(var(--nav) + 28px);
  display: grid;
  gap: 18px
}

.toc,
.tocbox {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px
}

.toc__t {
  display: block;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 14px
}

.toc ul {
  display: grid;
  gap: 11px
}

.toc a {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.4;
  display: block;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  transition: color .22s var(--e), border-color .22s var(--e)
}

.toc a:hover {
  color: var(--violet);
  border-left-color: var(--violet)
}

.toc a.on {
  color: var(--violet);
  border-left-color: var(--violet);
  font-weight: 600
}

.tocbox p {
  font-size: .92rem;
  font-weight: 600;
  margin-bottom: 10px
}

/* prev / next */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.pager__side {
  display: block;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color .3s var(--e), transform .3s var(--e), background .3s var(--e)
}

.pager__side:hover {
  border-color: var(--violet-lt);
  transform: translateY(-3px);
  background: rgba(108, 33, 220, .04)
}

.pager__side span {
  display: block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 8px
}

.pager__side b {
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: -.02em
}

.pager__side--next {
  text-align: right;
  grid-column: 2
}

.pager__all {
  margin-top: 24px
}

/* the card artwork is a link now */
.post .art,
.feature .art {
  display: block
}

.feature__b h2 a:hover,
.post h3 a:hover {
  color: var(--violet)
}

@media (max-width:960px) {
  .agrid {
    grid-template-columns: minmax(0, 1fr)
  }

  .aside {
    position: static;
    grid-template-columns: 1fr 1fr;
    display: grid
  }
}

@media (max-width:640px) {
  .aside {
    grid-template-columns: 1fr
  }

  .pager {
    grid-template-columns: 1fr
  }

  .pager__side--next {
    text-align: left;
    grid-column: 1
  }

  .abody pre {
    margin-inline: -4px;
    border-radius: 10px;
    font-size: .82rem
  }
}

/* ==========================================================================
   MERGED FROM site1.css — components added on your side
   ========================================================================== */

/* ---- PDF preview ---- */
.pdf-preview {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.pdf-preview__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.pdf-preview__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.pdf-preview__badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #29265b;
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pdf-preview__link:hover .pdf-preview__badge {
  opacity: 1;
}

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

/* ---- Testimonial marquee ---- */
.tm-marquee {
  padding: 100px 0;
  background: #fff;
  overflow: hidden;
}

/* Head */
.tm-marquee__head {
  max-width: 720px;
  margin: 0 auto 56px;
  padding: 0 24px;
  text-align: center;
}

.tm-marquee__eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--violet);
  font-weight: 600;
  margin-bottom: 14px;
}

.tm-marquee__title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #08050E;
  margin-bottom: 14px;
}

.tm-marquee__sub {
  font-size: 1.02rem;
  color: var(--muted);
}

/* Marquee rows */
.tm-marquee__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tm-marquee__row {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marquee 40s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.tm-marquee__row--reverse {
  animation-direction: reverse;
}

/* Run only while the section is on screen, pause on hover */
.tm-marquee.is-visible .tm-marquee__row {
  animation-play-state: running;
}

.tm-marquee__row:hover {
  animation-play-state: paused;
}

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

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

/* Pills */
.tm-pill {
  flex: 0 0 auto;
  padding: 18px 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  transition: border-color .3s var(--ease), transform .3s var(--ease),
    box-shadow .3s var(--ease);
}

.tm-pill:hover {
  border-color: var(--violet);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -18px rgba(108, 33, 220, .5);
}

.tm-pill blockquote {
  font-size: .92rem;
  color: var(--ink);
  font-style: italic;
}

/* Avatars */
.tm-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .72rem;
  color: #fff;
  flex: 0 0 auto;
  letter-spacing: .02em;
  margin-left: 8px;
}

.tm-avatar--v {
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
}

.tm-avatar--o {
  background: linear-gradient(135deg, var(--orange), #B86E00);
}

.tm-avatar--d {
  background: linear-gradient(135deg, var(--violet-deep), var(--violet-ink));
}

.tm-avatar--lt {
  background: linear-gradient(135deg, var(--violet-lt), var(--violet));
}

/* the marquee loops forever, so it has to stop for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .tm-marquee__row { animation: none !important; }
}

/* mobile tuning for the marquee (it shipped without any) */
@media (max-width: 640px) {
  .tm-marquee { padding: 70px 0; }
  .tm-marquee__head { margin-bottom: 40px; }
  .tm-marquee__row { animation-duration: 25s; }
  .tm-pill { padding: 14px 20px; }
  .tm-pill blockquote { font-size: .86rem; }
}