/*
 * Home page. Every number here is measured from the Framer original at
 * 1440 / 810 / 390px (see site.css header). Each block is desktop first,
 * followed by Framer's tablet (<1200px) and phone (<810px) overrides.
 */

/* ================================================================== hero */
.hero {
  position: relative;
  height: 800px;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.hero-waves {
  position: absolute;
  inset: 0;
  background: url(/assets/img/hero-waves.svg) center / cover no-repeat;
  pointer-events: none;
}
/* The big dim disc behind the headline. Scales in on load, then fades and
   shrinks as you scroll (site.js sets --scroll 0→1). */
.hero-disc {
  position: absolute;
  left: 50%;
  top: -230px;
  width: 1127px;
  height: 1127px;
  border-radius: 1000px;
  background: #1c1c1c;
  opacity: calc(0.5 * (1 - var(--scroll, 0)));
  transform: translateX(-50%) scale(calc(1 - 0.2 * var(--scroll, 0)));
  pointer-events: none;
}
.hero-disc::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #4d4d4d;
  border-radius: inherit;
}
.js .hero-disc {
  animation: disc-in 0.7s linear both;
}
@keyframes disc-in {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.83);
  }
}
.hero-in {
  position: relative;
  padding-top: 110px;
}
.hero h1 {
  max-width: 870px;
  margin: 0 auto;
  font-size: 57px;
  line-height: 68.4px;
  font-weight: 800;
}
.hero-sub {
  max-width: 722px;
  margin: 10px auto 0;
  font-size: 20px;
  line-height: 34px;
  font-weight: 200;
}
.hero-cta {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}
.hero-cta a {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 27px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 21.6px;
  font-weight: 500;
  transition: transform 0.25s var(--ease-out);
}
.hero-cta a:hover {
  transform: scale(1.02);
}
.hero-cta .primary {
  background: #fff;
  color: var(--bg);
}
.hero-cta .secondary {
  background: var(--bg);
  --bd: rgba(255, 255, 255, 0.16);
}
.endorse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 57px;
  padding: 12px 15px;
  border-radius: 15px;
  font-size: 16px;
  line-height: 19.2px;
  font-weight: 700;
  transition:
    background 0.25s,
    transform 0.3s var(--ease-out);
}
.endorse:hover {
  background: rgba(150, 150, 150, 0.06);
  transform: scale(1.05);
}
.faces {
  display: flex;
}
.faces img {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  object-fit: cover;
}
.faces img + img {
  margin-left: -15px;
}
.endorse svg {
  width: 30px;
  height: 28px;
}
/* Framer placed the four chips at fixed x positions (108, 438, 731, 1025 at
   1440) with uneven icon-text gaps; reproduced with a fixed-track grid. */
.chips {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 66px;
  display: grid;
  grid-template-columns: 330px 293px 294px 1fr;
}
.chip:nth-child(3) {
  gap: 41px;
}
.chip:nth-child(4) {
  gap: 43px;
}
.chip {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 17px;
  line-height: 30.6px;
  letter-spacing: -0.2px;
}
.chip img {
  width: 56px;
  height: 56px;
}
@media (max-width: 1199px) {
  .hero {
    height: 600px;
  }
  .hero-disc {
    width: 579px;
    height: 579px;
    top: 10px;
  }
  .hero h1 {
    max-width: 729px;
    font-size: 50px;
    line-height: 60px;
  }
  .hero-sub {
    max-width: 620px;
  }
  .endorse {
    margin-top: 58px;
  }
  .chips {
    display: none;
  }
}
@media (max-width: 809px) {
  .hero {
    height: 448px;
  }
  .hero-disc {
    display: none;
  }
  .hero-in {
    padding-top: 50px;
  }
  .hero h1 {
    font-size: 32px;
    line-height: 38.4px;
  }
  /* Framer's phone headline: Decentralizing / Gold Custody / for the Digital Age */
  .hero h1 .gold {
    display: block;
  }
  .hero-sub {
    font-size: 14px;
    line-height: 26.6px;
  }
  .hero-cta a {
    height: 43px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 16.8px;
  }
  .endorse {
    margin-top: 30px;
    font-size: 13px;
    line-height: 15.6px;
  }
  .faces img {
    width: 30px;
    height: 30px;
  }
  .faces img + img {
    margin-left: -11px;
  }
}

/* ============================================================ foundation */
.foundation {
  display: grid;
  grid-template-columns: 492px 1fr;
  gap: 120px;
  align-items: start;
  max-width: 1200px;
  margin: 80px auto 0;
}
.features {
  display: grid;
  gap: 16px;
  padding-top: 26px;
}
/* The three cards are tabs that swap the text on the right. */
.feature {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  height: 88px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 20px;
  line-height: 36px;
  text-align: left;
  cursor: pointer;
  transition:
    height 0.5s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}
.feature img {
  width: 56px;
  height: 56px;
}
.feature[aria-selected='true'] {
  height: 97px;
  cursor: default;
  --bd: var(--gold-line);
  box-shadow: 0 4px 48px rgba(240, 178, 98, 0.3);
}
/* Framer morphs the panel height on swap (spring, ~0.6s); a short rise +
   fade reads the same. */
.feature-panel:not([hidden]) {
  animation: panel-in 0.6s var(--ease-out) both;
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.foundation h2 {
  font-size: 48px;
  line-height: 62.4px;
  letter-spacing: -0.8px;
}
.foundation p {
  margin-top: 24px;
  font-size: 20px;
  line-height: 36px;
  letter-spacing: -0.2px;
}
.foundation .btn-glow {
  margin-top: 48px;
}
@media (max-width: 1199px) {
  .foundation {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 0 43px;
  }
  .features {
    padding-top: 0;
  }
}
@media (max-width: 809px) {
  .foundation {
    gap: 30px;
    padding: 0 25px;
    margin-top: 35px;
    text-align: center;
  }
  .feature {
    gap: 24px;
    font-size: 15px;
    line-height: 27px;
    text-align: left;
  }
  .feature[aria-selected='true'] {
    height: 89px;
    gap: 14px;
  }
  .foundation h2 {
    font-size: 24px;
    line-height: 31.2px;
    letter-spacing: -0.5px;
  }
  .foundation p {
    font-size: 14px;
    line-height: 25.2px;
  }
  .foundation .btn-glow {
    margin-top: 30px;
  }
}

/* =============================================================== pillars */
.pillars {
  margin-top: 81px;
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}
.pillar {
  padding: 24px;
  border-radius: 16px;
}
.pillar:hover {
  --bd: #f0b262;
}
.pillar img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}
.pillar h3 {
  margin-top: 40px;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -1px;
}
.pillar p {
  margin-top: 12px;
  font-size: 18px;
  line-height: 32.4px;
  letter-spacing: -0.2px;
}
@media (max-width: 1199px) {
  .pillars {
    margin-top: 95px;
  }
  .pillars .h-section {
    padding-left: 30px;
  }
  .pillar-grid {
    padding: 0 51px;
  }
}
@media (max-width: 809px) {
  .pillars {
    margin-top: 42px;
  }
  .pillars .h-section {
    padding-left: 20px;
  }
  .pillar-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 20px;
  }
  .pillar p {
    font-size: 16px;
    line-height: 28.8px;
  }
}

/* ================================================================== defi */
.defi {
  margin-top: 73px;
}
.defi-grid {
  display: grid;
  /* Framer's item grid runs 21px past the content box; kept for identical wrapping. */
  grid-template-columns: 343px 832px;
  gap: 70px;
  align-items: center;
  margin-top: 83px;
}
.defi-img {
  width: 343px;
  height: 324px;
  object-fit: cover;
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(255, 145, 0, 0.25);
}
.defi-items {
  display: grid;
  grid-template-columns: 396px 412px;
  gap: 80px 24px;
}
.defi-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 24px;
  align-content: start;
}
.defi-item img {
  width: 56px;
  height: 56px;
  grid-row: span 2;
}
.defi-item h3 {
  font-size: 20px;
  line-height: 36px;
  letter-spacing: -0.2px;
}
.defi-item p {
  margin-top: 4px;
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: -0.2px;
}
@media (max-width: 1199px) {
  .defi {
    margin-top: 63px;
  }
  .defi .h-section {
    text-align: center;
  }
  .defi-grid {
    grid-template-columns: 1fr;
    gap: 70px;
    margin-top: 50px;
    justify-items: center;
  }
  .defi-img {
    width: 368px;
    height: 250px;
  }
  .defi-items {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 50px 24px;
  }
}
@media (max-width: 809px) {
  .defi {
    margin-top: 104px;
  }
  .defi .h-section {
    text-align: left;
  }
  .defi-grid {
    margin-top: 34px;
    gap: 82px;
  }
  .defi-img {
    width: 100%;
    height: 260px;
  }
  .defi-items {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
  }
  .defi-item {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 16px;
  }
  .defi-item img {
    grid-row: auto;
  }
  .defi-item h3 {
    font-size: 18px;
    line-height: 32.4px;
  }
  .defi-item p {
    margin-top: 0;
  }
}

/* ============================================================== articles */
.concepts {
  margin-top: 113px;
}
.concepts-head {
  display: flex;
  flex-direction: column;
}
.arrows {
  align-self: flex-end;
  display: flex;
  gap: 24px;
}
.arrows button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out);
}
.arrows button:hover {
  transform: scale(1.1);
}
.arrows img {
  width: 40px;
  height: 40px;
}
.slideshow {
  overflow: hidden;
  margin-top: 14px;
}
.slides {
  display: flex;
  gap: 28px;
  padding-left: 5px;
  will-change: transform;
}
.article {
  flex: 0 0 387px;
  display: flex;
  flex-direction: column;
  min-height: 602px;
  padding: 24px;
  border-radius: 16px;
  --bd: var(--line);
}
.article:hover {
  --bd: var(--gold);
}
.article img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}
.article h3 {
  margin-top: 24px;
  font-size: 24px;
  line-height: 31.2px;
  letter-spacing: -0.5px;
}
.article p {
  margin-top: 48px;
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: -0.2px;
}
.read-more {
  position: relative;
  z-index: 0;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: -0.2px;
  transition: color 0.25s;
}
/* Framer inverts "Read more" on hover into a white pill. */
.read-more::before {
  content: '';
  position: absolute;
  inset: -2px -10px;
  border-radius: 8px;
  background: #fff;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.25s;
}
.article:hover .read-more {
  color: #000;
}
.article:hover .read-more::before {
  opacity: 1;
}
@media (max-width: 1199px) {
  .concepts {
    margin-top: 121px;
  }
  .concepts .h-section {
    font-weight: 400;
  }
  .slides {
    gap: 31px;
    padding-left: 27px;
  }
  .article {
    flex-basis: 355px;
  }
}
@media (max-width: 809px) {
  .concepts {
    margin-top: 95px;
  }
  .article {
    flex-basis: 341px;
  }
}

/* ================================================================ $PGC */
/* Banner styles are shared (site.css); the home page hides it below desktop. */
/* Framer hides the $PGC banner below desktop. */
@media (max-width: 1199px) {
  .pgc-section {
    display: none;
  }
}

/* =============================================================== roadmap */
.roadmap-title {
  margin-top: 86px;
  text-align: center;
  font-size: 48px;
  line-height: 57.6px;
  font-weight: 700;
}
.roadmap {
  position: relative;
  max-width: 840px;
  margin: 40px auto 0;
  list-style: none;
  padding: 0;
}
.rm-step {
  display: grid;
  grid-template-columns: 306px 1fr 306px;
  min-height: 283px;
}
.rm-mid {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rm-num {
  font-size: 60px;
  line-height: 72px;
  font-weight: 700;
  opacity: 0.2;
  transition: opacity 0.3s ease-in-out;
}
/* Connector: 20% white until the step is reached; a 450px gold band follows
   the top of the viewport across the lines (site.js sets --from/--to). */
.rm-line {
  width: 4px;
  flex: 1;
  min-height: 136px;
  margin: 16px 0 40px;
  background:
    linear-gradient(
        to bottom,
        transparent var(--from, 0px),
        var(--gold) var(--from, 0px),
        var(--gold) var(--to, 0px),
        transparent var(--to, 0px)
      )
      no-repeat,
    rgba(255, 255, 255, 0.2);
  transition: background-color 0.3s ease-in-out;
}
.rm-step.on .rm-num {
  opacity: 1;
}
.rm-step.on .rm-line {
  background-color: #fff;
}
.rm-text {
  grid-row: 1;
}
.js .rm-text {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}
.js .rm-step.on .rm-text {
  opacity: 1;
  transform: none;
}
.rm-step:nth-child(odd) .rm-text {
  grid-column: 3;
}
.rm-step:nth-child(even) .rm-text {
  grid-column: 1;
  text-align: right;
}
.rm-when {
  font-size: 32px;
  line-height: 38.4px;
}
.rm-what {
  margin-top: 8px;
  font-size: 18px;
  line-height: 28.8px;
  color: var(--gold);
}
.rm-desc {
  margin-top: 16px;
  font-size: 20px;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 1199px) {
  .roadmap-title {
    margin-top: 70px;
  }
  .roadmap {
    max-width: 700px;
    margin-top: 64px;
  }
  .rm-line {
    min-height: 120px;
  }
  /* a step is at least 224px, or its text + 24px when that is taller */
  .rm-text {
    padding-bottom: 24px;
  }
  .rm-step {
    grid-template-columns: 260px 1fr 260px;
    min-height: 224px;
  }
  .rm-num {
    font-size: 40px;
    line-height: 48px;
  }
}
/* Phone: two columns, and the number swaps sides every step. Framer's phone
   roadmap mixed 14–32px text sizes between steps; normalised here. */
@media (max-width: 809px) {
  .roadmap-title {
    margin-top: 222px;
  }
  .roadmap {
    padding: 0 30px;
    margin-top: 71px;
  }
  .rm-step {
    grid-template-columns: 1fr 214px;
    column-gap: 16px;
    min-height: 0;
  }
  .rm-step:nth-child(even) {
    grid-template-columns: 214px 1fr;
  }
  .rm-step:nth-child(odd) .rm-mid {
    grid-column: 1;
  }
  .rm-step:nth-child(odd) .rm-text {
    grid-column: 2;
  }
  .rm-step:nth-child(even) .rm-mid {
    grid-column: 2;
  }
  .rm-step:nth-child(even) .rm-text {
    grid-column: 1;
  }
  .rm-line {
    min-height: 150px;
  }
  .rm-when {
    font-size: 24px;
    line-height: 28.8px;
  }
  .rm-what,
  .rm-desc {
    font-size: 16px;
    line-height: 25.6px;
  }
}

/* =================================================================== faq */
/* Framer's FAQ block starts right under the last roadmap connector. */
.faq-head {
  margin-top: -3px;
  text-align: center;
}
.faq-head h2 {
  font-size: 55px;
  line-height: 66px;
  font-weight: 700;
  filter: brightness(1.22);
}
.faq-head p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 19.2px;
  font-weight: 300;
}
.home-faq {
  margin-top: 55px;
}
@media (max-width: 1199px) {
  .faq-head h2 {
    font-size: 52px;
    line-height: 62.4px;
  }
  .faq-head {
    margin-top: 111px;
  }
  .faq-head p {
    font-size: 15px;
    line-height: 18px;
  }
  .home-faq {
    padding: 0 19px;
  }
}
@media (max-width: 809px) {
  .faq-head {
    margin-top: 131px;
  }
  .faq-head h2 {
    font-size: 25px;
    line-height: 30px;
  }
  .home-faq {
    padding: 0 9px;
    margin-top: 45px;
  }
}

/* ============================================================== vanguard */
.vanguard-wrap {
  max-width: 1380px;
  margin: 84px auto 140px;
  padding: 0 90px;
}
.vanguard {
  position: relative;
  height: 375px;
  text-align: center;
}
.vg-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(#050505, #000);
}
.vg-bg .grid-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vg-bg .g1 {
  left: calc(50% - 122px);
  top: 225px;
  width: 170px;
  height: 280px;
  background: #ffdbcf;
  filter: blur(80px);
}
.vg-bg .g2 {
  left: calc(50% - 17px);
  top: 156px;
  width: 210px;
  height: 350px;
  background: var(--gold);
  filter: blur(70px);
}
.vg-ring,
.vg-cube {
  position: absolute;
  pointer-events: none;
}
.vg-ring {
  left: 62px;
  top: 72px;
  width: 141px;
}
.vg-cube {
  left: calc(100% - 159px);
  top: 88px;
  width: 195px;
}
.vanguard-in {
  position: relative;
  padding-top: 71px;
}
.vanguard h2 {
  font-size: 44px;
  line-height: 52.8px;
  font-weight: 700;
  filter: brightness(1.22);
}
.vanguard p {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 22px;
  line-height: 37.4px;
}
.vanguard .btn-pill {
  margin-top: 37px;
}
@media (max-width: 1199px) {
  .vanguard-wrap {
    padding: 0 30px;
    margin-top: 22px;
    margin-bottom: 90px;
  }
  .vanguard {
    height: 440px;
  }
  .vanguard-in {
    padding-top: 136px;
  }
  .vanguard p {
    max-width: 550px;
  }
  .vg-ring {
    left: 40px;
    top: 105px;
    width: 100px;
  }
  .vg-cube {
    left: calc(100% - 80px);
    top: 294px;
    width: 100px;
  }
}
@media (max-width: 809px) {
  .vanguard-wrap {
    padding: 0;
    margin: 26px auto 70px;
  }
  .vanguard {
    height: 375px;
  }
  .vg-bg {
    border-radius: 0;
  }
  .vanguard-in {
    padding-top: 95px;
  }
  .vanguard h2 {
    font-size: 34px;
    line-height: 40.8px;
  }
  .vanguard p {
    max-width: 350px;
    margin-top: 16px;
    font-size: 12px;
    line-height: 20.4px;
    font-weight: 300;
  }
  .vanguard .btn-pill {
    margin-top: 36px;
    border-radius: 58px;
  }
  .vg-ring {
    left: 10px;
    top: 10px;
    width: 60px;
  }
  .vg-cube {
    left: calc(100% - 50px);
    top: 292px;
    width: 60px;
  }
}