/* ============================================================
   components.css — styles grouped by page section.
   Each block maps 1:1 to a <section> in index.html.
   ============================================================ */

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.nav__links { justify-self: center; }
.nav__logo { justify-self: start; }
.nav__actions { justify-self: end; display: flex; align-items: center; gap: var(--sp-3); }
.nav__logo img { height: 30px; width: auto; }
.nav__links { display: flex; gap: var(--sp-8); }
.nav__links a {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-faint); transition: color .15s ease;
}
.nav__links a:hover { color: var(--c-muted); }

/* Hamburger button */
.nav__toggle {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: 0; cursor: pointer;
  width: 36px; height: 36px; padding: 6px;
}
.nav__toggle span {
  display: block; width: 100%; height: 1.5px;
  background: var(--c-faint); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
/* X state when open */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed; top: 72px; left: 0; right: 0; z-index: 49;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-6) var(--gutter);
  transform: translateY(-8px); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-nav.is-open {
  transform: translateY(0); opacity: 1;
}
.mobile-nav nav { display: flex; flex-direction: column; gap: var(--sp-4); }
.mobile-nav a {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-faint); transition: color .15s ease;
}
.mobile-nav a:hover { color: var(--c-muted); }

@media (max-width: 720px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .mobile-nav { display: block; }
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--sp-16); }
.hero__grid {
  display: grid; gap: var(--sp-12);
  grid-template-columns: 1fr 1fr; align-items: center;
}
.hero__title {
  font-size: clamp(1.25rem, 7vw, 2rem);
  line-height: 1.35;
  letter-spacing: .1em;
  margin-bottom: var(--sp-6);
}
.hero__lead { font-size: 1.05rem; max-width: 42ch; margin-bottom: var(--sp-6); color: var(--c-faint); }
.hero__lead strong { color: var(--c-muted); font-weight: 600; }
.hero__cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.hero__note { font-size: var(--fs-xs); color: var(--c-faint); }
.hero__media {
  background: var(--c-dark); border-radius: var(--r-lg);
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-card);
  overflow: hidden; position: relative;
}
.hero__media iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }

/* ---------- Partner logos ---------- */
.partners { border-top: 1px solid var(--c-line); overflow: hidden; }
.partners__row { padding-block: var(--sp-8); overflow: hidden; }
.partners__track {
  display: flex; align-items: center; gap: var(--sp-8);
  justify-content: space-between; flex-wrap: wrap; width: 100%;
}
.partners__track img { height: 22px; width: auto; opacity: .5; filter: grayscale(1); flex-shrink: 0; }
/* Hide the duplicate set on desktop */
.partners__track img:nth-child(n+7) { display: none; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 760px) {
  .partners__track {
    justify-content: flex-start; flex-wrap: nowrap;
    width: max-content;
    animation: marquee 22s linear infinite;
  }
  .partners__track img:nth-child(n+7) { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; }
}

/* ---------- Feature cards (Subscribe / Request / Enjoy) ---------- */
.steps__heading { display: block; text-align: center; padding-bottom: var(--sp-6); }
.steps { display: grid; gap: var(--sp-6); grid-template-columns: repeat(3, 1fr); }
.step {
  position: relative; min-height: 300px; padding: var(--sp-6);
  border-radius: var(--r-lg); color: #fff; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--shadow-card);
}
.step--blue   { background: radial-gradient(ellipse 100% 55% at 50% 0%, #c5f9ff 0%, #3cacf9 30%, #136ec8 55%, #1a257b 71%, #1c1254 88%, #1d003d 100%); }
.step--green  { background: radial-gradient(ellipse 100% 60% at 50% 0%, #d9ffc3 3%, #9bfb88 14%, #55bdc0 42%, #0f7bf7 70%, #0240d4 100%); }
.step--orange { background: radial-gradient(ellipse 100% 55% at 50% 0%, #fdf0ff 0%, #f8c5ff 16%, #f8b687 43%, #f7990f 70%, #f74b0f 100%); }
.step__icon { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 116%; height: auto; }
.step h3 { color: #fff; margin-bottom: var(--sp-2); }
.step p { color: #ecedef; font-size: var(--fs-body); }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 420px; }
  .step__icon { width: 105%; }
}

/* ---------- Highlight sweep animation ---------- */
.highlight-anim {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.08em 0.3em;
  line-height: 1.5;
  background: linear-gradient(var(--c-accent), var(--c-accent)) no-repeat left center / 0% 100%;
  transition: background-size 0.7s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease 0.5s;
  color: inherit;
}
.highlight-anim.is-visible {
  background-size: 100% 100%;
  color: #fff;
}

/* ---------- Transparent / public ---------- */
.transparent__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; margin-bottom: var(--sp-24); }
@media (min-width: 861px) {
  .transparent__grid { grid-template-columns: 0.75fr 1fr; }
  .transparent__grid > div:last-child { padding-left: 20px; }
}
.transparent h2 { margin-bottom: var(--sp-4); }
.transparent p { max-width: 48ch; color: var(--c-faint); }
.transparent__art { aspect-ratio: 16/10; border-radius: var(--r-lg); background: var(--c-dark); overflow: hidden; position: relative; }
.transparent__art iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.4); width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .transparent__grid { grid-template-columns: 1fr; } }

/* ---------- Results / stats ---------- */
.results { background: linear-gradient(to bottom, #ffffff, #f5f5f7); border-radius: var(--r-lg); border: 1px solid #ebecee; }
.results__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; padding: var(--sp-12); }
.results__stats .eyebrow { display: block; margin-bottom: var(--sp-6); }
.results__stat {
  font-size: 1.5rem;
  text-transform: uppercase;
  line-height: 1.5;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.results__stat:last-child { border-bottom: 1px solid var(--c-line); }
.results__num   { font-family: var(--font-display); font-weight: 700; color: var(--c-ink); }
.results__label { font-family: var(--font-display); font-weight: 500; color: var(--c-muted); }
.results__cluster img { width: 100%; max-width: 360px; margin-inline: auto; }
@media (max-width: 760px) { .results__grid { grid-template-columns: 1fr; } }

/* ---------- Membership benefits ---------- */
.benefits__head { text-align: center; max-width: 68ch; margin: 0 auto var(--sp-12); }
.benefits__head .eyebrow { display: block; margin-bottom: var(--sp-3); }
.benefits__track-wrap { overflow: hidden; position: relative; }
.benefits__track-wrap::before,
.benefits__track-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
  display: none;
}
.benefits__track-wrap::before { left: 0;  background: linear-gradient(to right, #fff 40%, transparent); }
.benefits__track-wrap::after  { right: 0; background: linear-gradient(to left,  #fff 40%, transparent); }
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
/* Hide duplicate cards on desktop */
.benefits__grid article[aria-hidden="true"] { display: none; }
.benefit {
  background: linear-gradient(to bottom, #ffffff, #f5f5f7); border: 1px solid #ebecee;
  border-radius: var(--r-md); padding: var(--sp-8); text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.benefit img { height: 40px; margin: 0 auto var(--sp-4); }
.benefit h3 { margin-bottom: var(--sp-2); }
.benefit p { font-size: var(--fs-sm); }
@media (max-width: 760px) {
  .benefits__track-wrap::before,
  .benefits__track-wrap::after { display: block; }
  .benefits__grid {
    display: flex; flex-wrap: nowrap; gap: var(--sp-4);
    width: max-content;
    animation: marquee 28s linear infinite;
  }
  .benefits__grid article[aria-hidden="true"] { display: block; }
  .benefit { width: 240px; flex-shrink: 0; }
}

/* ---------- Types of design + pricing ---------- */
.offer__pills-track-wrap {
  overflow: hidden; margin-bottom: var(--sp-12);
  position: relative;
}
.offer__pills-track-wrap::before,
.offer__pills-track-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.offer__pills-track-wrap::before { left: 0;  background: linear-gradient(to right, #fff 40%, transparent); }
.offer__pills-track-wrap::after  { right: 0; background: linear-gradient(to left,  #fff 40%, transparent); }
.offer__pills {
  display: flex; flex-wrap: nowrap; gap: 20px;
  width: max-content;
  animation: marquee 22s linear infinite;
}
.pill {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-body); padding: .625em 1.4em; border-radius: var(--r-pill);
  border: 1px solid #ebecee;
  background: linear-gradient(to bottom, #ffffff, #f5f5f7);
  color: var(--c-muted); cursor: default; white-space: nowrap;
}

.offer__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-6); align-items: stretch; }
.offer__aside { display: grid; gap: var(--sp-6); }
.note-card { border: 1px solid #ebecee; border-radius: var(--r-md); padding: var(--sp-6); background: linear-gradient(to bottom, #ffffff, #f5f5f7); }
.note-card img { height: 28px; margin-bottom: var(--sp-3); }
.note-card h3 { margin-bottom: var(--sp-2); }
.note-card p { font-size: var(--fs-sm); }

.pricing {
  background: linear-gradient(to bottom, #3c3c3c, #131313);
  color: #fff; border-radius: var(--r-lg); padding: var(--sp-8);
  border: 1px solid #3c3c3c;
}
.pricing__label {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase;
  color: #fff; margin-bottom: var(--sp-2);
}
.pricing__amount {
  font-family: var(--font-display); font-weight: 500;
  font-size: 2.5rem; margin: 0 0 var(--sp-6);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.pricing__amount span { font-size: var(--fs-body); color: var(--c-faint); letter-spacing: .1em; text-transform: uppercase; }
.pricing__features {
  background: rgba(232,232,232,.05); border: 1px solid #3c3c3c;
  border-radius: 11px; padding: var(--sp-6); margin-bottom: var(--sp-6);
}
.pricing__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-6); list-style: disc; }
.pricing__list li { font-size: var(--fs-sm); color: #fff; margin-left: var(--sp-4); }
.pricing .btn { width: 100%; }
.pricing__note { font-size: var(--fs-sm); color: #abafbb; margin-top: var(--sp-3); }
@media (max-width: 860px) {
  .offer__grid { grid-template-columns: 1fr; }
  .pricing__list { grid-template-columns: 1fr; }
  .pricing { order: -1; }
}

/* ---------- Build for everyone ---------- */
.public__head { text-align: center; margin-bottom: var(--sp-12); }
.live-badge { display: inline-flex; align-items: center; gap: var(--sp-2); }
.live-badge img { height: 30px; }
.public__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.public__cols h3 { margin-bottom: var(--sp-2); color: var(--c-muted); }
.public__cols p { font-size: var(--fs-sm); color: var(--c-faint); }
@media (max-width: 760px) { .public__head { grid-template-columns: 1fr; } .public__cols { grid-template-columns: 1fr; } }

/* ---------- FAQ + contact ---------- */
.faq__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--sp-12); align-items: start; }
.faq h2 { margin-bottom: var(--sp-8); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-6) 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: .03em;
  text-transform: uppercase; color: var(--c-ink-soft); text-align: left;
}
.faq__q::after { content: "⌄"; font-size: 1.2em; color: var(--c-faint); transition: transform .2s ease; }
.faq__q[aria-expanded="true"]::after { transform: rotate(180deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.faq__a p { padding-bottom: var(--sp-6); font-size: var(--fs-sm); max-width: 60ch; }

.contact-card {
  position: sticky; top: 96px;
  background: radial-gradient(ellipse 100% 55% at 50% 0%, #fdf0ff 0%, #f8c5ff 16%, #f8b687 43%, #f7990f 70%, #f74b0f 100%); color: #fff;
  border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--shadow-card);
}
.contact-card img { height: 34px; margin-bottom: var(--sp-6); }
.contact-card .eyebrow { color: rgba(255,255,255,.85); }
.contact-card h3 { color: #fff; font-size: var(--fs-h2); margin: var(--sp-2) 0 var(--sp-6); }
.contact-card .btn { width: 100%; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } .contact-card { position: static; } }

/* ============================================================
   About page (about.html) — blocks in page order.
   ============================================================ */

/* ---------- Placeholder media (swap for real <img> when ready) ---------- */
.placeholder {
  width: 100%;
  background: #e8e9ec;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder::after {
  content: "IMAGE";
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--c-faint);
}
.placeholder--wide { aspect-ratio: 936 / 350; }
.placeholder--card { aspect-ratio: 443 / 285; border-radius: var(--r-sm); }

/* ---------- About: intro ---------- */
.about-intro { padding-block: var(--sp-12) var(--sp-24); }
.about-intro .placeholder { margin-bottom: var(--sp-8); }
.about-intro__hero { width: 100%; border-radius: var(--r-sm); margin-bottom: var(--sp-16); object-fit: cover; }
.about-intro__title {
  font-size: 2rem;          /* 32px — matches Figma */
  line-height: 1.35;
  letter-spacing: .1em;
  margin-bottom: var(--sp-6);
}
.about-intro__lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;        /* 24px — matches Figma */
  line-height: 1.5;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ---------- About: services offered ---------- */
.about-services { text-align: center; }
.about-services .eyebrow { display: block; margin-bottom: var(--sp-8); }
.about-services__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); }
.about-services__cols ul {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-h3); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-muted); line-height: 1.5;
}
@media (max-width: 760px) { .about-services__cols { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---------- About: experience ---------- */
.about-exp__grid { display: grid; grid-template-columns: 1fr 1.07fr; gap: var(--sp-12); align-items: center; }
.about-exp h2 { margin-bottom: var(--sp-4); }
.about-exp p { color: var(--c-faint); max-width: 48ch; }
@media (max-width: 860px) { .about-exp__grid { grid-template-columns: 1fr; } }

/* ---------- About: constitution ---------- */
.about-constitution h2 { margin-bottom: var(--sp-8); }
.about-constitution .placeholder { margin-bottom: var(--sp-8); }
.about-constitution__img { width: 100%; display: block; border-radius: var(--r-md); margin-bottom: var(--sp-8); }
.about-constitution p { color: var(--c-faint); max-width: 100%; margin-bottom: var(--sp-8); }

/* ---------- About: the team ---------- */
.about-team h2 { margin-bottom: var(--sp-8); }
.about-team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.about-team__member .placeholder { margin-bottom: var(--sp-4); }
.about-team__portrait { width: 100%; display: block; border-radius: var(--r-md); margin-bottom: var(--sp-4); }
.about-team__member h3 {
  font-size: var(--fs-h2); font-weight: 500;
  letter-spacing: .1em; color: var(--c-muted);
  margin-bottom: var(--sp-3);
}
.about-team__member p { color: var(--c-faint); }
@media (max-width: 760px) { .about-team__grid { grid-template-columns: 1fr; } }

/* ---------- Projects page ---------- */
.projects-page { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.projects-page__coming-soon {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-faint);
}

/* ---------- Contact page ---------- */
.contact-page { padding-block: var(--sp-12) var(--sp-24); }
.contact-page__title {
  font-size: 2rem;
  line-height: 1.75;
  letter-spacing: .1em;
  margin-bottom: var(--sp-12);
}
.contact-page__list {
  display: flex;
  flex-direction: column;
  gap: 2.75rem; /* 44px */
}
.contact-page__item {
  display: flex;
  flex-direction: column;
  gap: 1.1875rem; /* 19px */
}
.contact-page__item .eyebrow {
  font-size: var(--fs-body);
  letter-spacing: .1em;
}
.contact-page__item a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.contact-page__item a:hover { color: var(--c-ink); }

/* ---------- About: closing CTA ---------- */
.about-cta { text-align: center; }
.about-cta__title { font-size: var(--fs-display); line-height: 1.75; margin: 0 auto var(--sp-8); }
.about-cta__actions { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--c-line); padding-block: var(--sp-16); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-8); }
.footer__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}
.footer__logo img { height: 34px; }
.footer__copy { font-size: var(--fs-xs); color: var(--c-faint); }
.footer h3 { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--c-muted); margin-bottom: var(--sp-4); }
.footer__links li { margin-bottom: var(--sp-2); }
.footer__links a { font-size: var(--fs-sm); color: var(--c-muted); }
.footer__links a:hover { color: var(--c-ink); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__logo { grid-column: 1 / -1; } }

/* ============================================================
   Dark mode — component overrides
   ============================================================ */

/* Partner logos — swap to dark variants via CSS content, remove light-mode filter */
[data-theme="dark"] .p-cnbc       { content: url("../assets/icons/partners/dark/cnbc.svg"); }
[data-theme="dark"] .p-coindesk   { content: url("../assets/icons/partners/dark/coindesk.svg"); }
[data-theme="dark"] .p-solana     { content: url("../assets/icons/partners/dark/solana.svg"); }
[data-theme="dark"] .p-techcrunch { content: url("../assets/icons/partners/dark/techcrunch.svg"); }
[data-theme="dark"] .p-espn       { content: url("../assets/icons/partners/dark/espn.svg"); }
[data-theme="dark"] .p-prime      { content: url("../assets/icons/partners/dark/prime-gaming.svg"); }
[data-theme="dark"] .partners__track img { opacity: 1; filter: none; }

/* Header / nav */
[data-theme="dark"] .site-header {
  background: rgba(0,0,0,.88);
}
[data-theme="dark"] .mobile-nav {
  background: rgba(15,17,23,.97);
}

/* Logos — swap to dedicated dark variant */
[data-theme="dark"] .site-logo {
  content: url("../assets/icons/pe-logo-dark.svg");
}


/* Results card */
[data-theme="dark"] .results {
  background: linear-gradient(to bottom, #1c1f28, #141720);
  border-color: var(--c-line);
}

/* Benefit cards */
[data-theme="dark"] .benefit {
  background: linear-gradient(to bottom, #1c1f28, #141720);
  border-color: var(--c-line);
}

/* Note cards */
[data-theme="dark"] .note-card {
  background: linear-gradient(to bottom, #1c1f28, #141720);
  border-color: var(--c-line);
}

/* Design-type pills */
[data-theme="dark"] .pill {
  background: linear-gradient(to bottom, #1c1f28, #141720);
  border-color: var(--c-line);
}

/* Fade overlays for carousels — must match surface bg */
[data-theme="dark"] .benefits__track-wrap::before { background: linear-gradient(to right, var(--c-surface) 40%, transparent); }
[data-theme="dark"] .benefits__track-wrap::after  { background: linear-gradient(to left,  var(--c-surface) 40%, transparent); }
[data-theme="dark"] .offer__pills-track-wrap::before { background: linear-gradient(to right, var(--c-surface) 40%, transparent); }
[data-theme="dark"] .offer__pills-track-wrap::after  { background: linear-gradient(to left,  var(--c-surface) 40%, transparent); }

/* Placeholder blocks */
[data-theme="dark"] .placeholder {
  background: #1c1f28;
  border-color: var(--c-line);
}

/* btn--light on dark bg */
[data-theme="dark"] .btn--light {
  background: #1c1f28;
  color: var(--c-ink);
  border-color: var(--c-line);
}
[data-theme="dark"] .btn--light:hover { border-color: var(--c-muted); }
[data-theme="dark"] .contact-card .btn--light {
  background: #fff;
  color: #15171c;
  border-color: transparent;
}
[data-theme="dark"] .about-cta .btn--dark {
  background: #fff;
  color: #15171c;
  border-color: transparent;
  box-shadow: none;
}
[data-theme="dark"] .pricing {
  background: linear-gradient(to bottom, #1c1f28, #141720);
  border-color: var(--c-line);
}
[data-theme="dark"] .contact-page__item a { color: var(--c-muted); }