.info-page {
  min-height: 100vh;
  color: #f6f3eb;
  font-family: "Geist", sans-serif;
}

.info-page *,
.info-page *::before,
.info-page *::after { box-sizing: border-box; }

.info-wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }

.info-nav {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.info-brand {
  color: #fff;
  font: 400 1.05rem "Bungee", sans-serif;
  letter-spacing: -.02em;
  text-decoration: none;
}

.info-nav div { display: flex; align-items: center; gap: 18px; }
.info-nav div a,
.info-footer a { color: rgba(255,255,255,.7); text-decoration: none; }
.info-nav div a:hover,
.info-footer a:hover { color: #fff; }

.info-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  align-items: end;
  gap: clamp(36px, 8vw, 110px);
  padding: clamp(72px, 10vw, 132px) 0 72px;
}

.info-kicker {
  margin: 0 0 18px;
  color: #f3a95e;
  font: 600 .74rem "Geist Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.info-hero h1 {
  max-width: 900px;
  margin: 0;
  font: 400 clamp(3.1rem, 8vw, 7.8rem)/.88 "Bungee", sans-serif;
  letter-spacing: -.055em;
}

.info-intro {
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(1.08rem, 2vw, 1.4rem);
  line-height: 1.5;
}

.info-source {
  display: block;
  margin-top: 18px;
  color: rgba(255,255,255,.48);
  font-size: .8rem;
  line-height: 1.45;
}

.info-primary,
.info-secondary {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  font-weight: 720;
  text-decoration: none;
}

.info-primary { background: #f3a95e; color: #15120f; }
.info-secondary { background: rgba(255,255,255,.06); color: #fff; }
.info-primary:hover,
.info-secondary:hover { transform: translateY(-2px); }

.info-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }

.proof-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 28px 0 100px;
}

.proof-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(255,255,255,.05);
}

.proof-media {
  position: relative;
  display: block;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}

.proof-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 36%, rgba(3,3,8,.9));
}

.proof-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.proof-media:hover img { transform: scale(1.035); }

.proof-result {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  font: 400 clamp(1.7rem, 3vw, 3rem) "Bungee", sans-serif;
  letter-spacing: -.04em;
}

.proof-play {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  font-size: .8rem;
}

.proof-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; }
.proof-caption div { min-width: 0; }
.proof-caption strong,
.proof-caption small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proof-caption small { margin-top: 4px; color: rgba(255,255,255,.54); }
.proof-caption a { color: #f3a95e; font-size: .78rem; font-weight: 700; text-decoration: none; }

.info-section { padding: 34px 0 94px; }
.info-section + .info-section { border-top: 1px solid rgba(255,255,255,.14); }
.info-section-head { max-width: 760px; margin-bottom: 28px; }
.info-section h2 {
  margin: 0;
  font: 400 clamp(2.1rem, 5vw, 4.9rem)/.95 "Bungee", sans-serif;
  letter-spacing: -.05em;
}
.info-section-head p { color: rgba(255,255,255,.67); line-height: 1.55; }

.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.info-card {
  min-height: 250px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(255,255,255,.05);
}
.info-card b { display: block; margin-bottom: 28px; color: #f3a95e; font: 600 .72rem "Geist Mono", monospace; }
.info-card h3 { margin: 0; font-size: 1.45rem; letter-spacing: -.035em; }
.info-card p { margin: 14px 0 0; color: rgba(255,255,255,.65); line-height: 1.52; }
.info-card a { display: inline-block; margin-top: 22px; color: #f3a95e; font-weight: 700; text-decoration: none; }

.code-panel {
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(0,0,0,.38);
  color: #d9f7ce;
  font: 500 .82rem/1.65 "Geist Mono", monospace;
  white-space: pre;
}

.endpoint-list { display: grid; gap: 10px; margin-top: 20px; }
.endpoint-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  color: #fff;
  text-decoration: none;
}
.endpoint-list code { color: #f3a95e; font-family: "Geist Mono", monospace; }

.info-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 42px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .84rem;
}
.info-footer div { display: flex; flex-wrap: wrap; gap: 16px; }

.tiktok-dialog {
  width: min(430px, calc(100% - 22px));
  height: min(820px, calc(100dvh - 22px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  background: #05050a;
}
.tiktok-dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(10px); }
.tiktok-dialog iframe { width: 100%; height: 100%; border: 0; }
.tiktok-dialog button { position: absolute; top: 10px; right: 10px; z-index: 3; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(5,5,10,.86); color: #fff; cursor: pointer; }

@media (max-width: 900px) {
  .proof-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .info-wrap { width: min(100% - 22px, 1180px); }
  .info-nav { min-height: 64px; }
  .info-nav div a:not(:first-child) { display: none; }
  .info-hero { grid-template-columns: 1fr; align-items: start; padding-top: 56px; }
  .info-hero h1 { font-size: clamp(3rem, 15vw, 5.5rem); }
  .proof-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .proof-card { border-radius: 14px; }
  .proof-caption { align-items: flex-start; flex-direction: column; }
  .info-footer { flex-direction: column; }
}