/* ===========================================================
   Links FFC — linktree (porte vanilla do claude.ai/design)
   Sem JS. Estilos por classe + fonte auto-hospedada.
   =========================================================== */

@font-face {
  font-family: 'Space Grotesk';
  src: url('SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: #ECECEE;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { -webkit-tap-highlight-color: transparent; }

.page {
  max-width: 480px;
  margin: 0 auto;
  background: #ffffff;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}
/* Em telas largas, o card de 480px vira uma "moldura de celular" com sombra
   sobre o fundo cinza — em vez de flutuar solto. */
@media (min-width: 540px) {
  body { padding: 24px 0; }
  .page {
    min-height: auto;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  }
}

/* ---------------- HERO ---------------- */
.hero {
  position: relative;
  background: #000000;
  overflow: hidden;
}
.hero__media { position: relative; }
.hero__img { display: block; width: 100%; height: auto; }
/* Scrim no topo: garante o logo branco legível mesmo se a foto mudar. */
.hero__media::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 96px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
  z-index: 2; pointer-events: none;
}
/* Fade inferior mais alto e suave: dissolve os fundadores no preto sem "banda". */
.hero__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background: linear-gradient(to top, #000 12%, rgba(0,0,0,0) 100%);
  z-index: 2; pointer-events: none;
}
.hero__logo-wrap {
  position: absolute; left: 0; right: 0; top: 22px; z-index: 5;
  display: flex; justify-content: center;
}
.hero__logo { height: 24px; width: auto; object-fit: contain; opacity: 0.96; }
.hero__text {
  position: relative; z-index: 5; text-align: center;
  padding: 0 28px 40px; margin-top: -20px;
}
.hero__names {
  margin: 0 0 6px; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #c2c7d6; font-weight: 600; line-height: 1.45;
}
.hero__role {
  margin: 0 0 14px; font-size: 11px; letter-spacing: 0.04em;
  color: #99a0b3; font-weight: 400;
}
.hero__headline {
  margin: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 21px; line-height: 1.34; letter-spacing: -0.01em; color: #fff;
}
.hero__mark {
  display: inline-block; background: #0529F6; color: #fff; font-weight: 700;
  padding: 1px 8px; border-radius: 4px;
}

/* ---------------- CONTENT ---------------- */
.content {
  padding: 32px 20px 8px;
  display: flex; flex-direction: column; gap: 34px;
}
.section { display: flex; flex-direction: column; gap: 15px; }
.section__head { display: flex; gap: 13px; align-items: stretch; }
.section__bar { flex: none; width: 4px; border-radius: 2px; }
.section__bar--blue  { background: #0529F6; }
.section__bar--dark  { background: #0a0a0a; }
.section__bar--light { background: #9ba1e2; }
.section__title {
  margin: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 20px; line-height: 1.18; color: #0a0a0a; letter-spacing: -0.01em;
}
.section__sub {
  margin: 7px 0 0; font-size: 13.5px; line-height: 1.45; color: #4a4a4a;
}
.cards { display: flex; flex-direction: column; gap: 11px; }

/* ---------------- CARD (link) ---------------- */
.card {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px; border-radius: 14px; text-decoration: none;
  transition: transform 220ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 220ms cubic-bezier(0.22,1,0.36,1);
}
.card__ico {
  flex: none; width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.card__body { flex: 1; min-width: 0; }
.card__title {
  display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: -0.01em;
}
.card__desc { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; }
.card__arrow { flex: none; display: flex; }
.card__titlerow { display: flex; align-items: center; gap: 8px; }
.badge {
  flex: none; display: inline-flex; align-items: center;
  border: 1px solid rgba(5,41,246,0.30); color: #0529F6; background: rgba(5,41,246,0.06);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
}
/* muted (cinza, itens gratuitos) */
.card--muted {
  background: #F4F4F5; border: 1px solid rgba(0,0,0,0.07);
}
.card--muted .card__ico {
  background: #fff; border: 1px solid rgba(0,0,0,0.12); color: #2f2f2f;
}
.card--muted .card__title { color: #333333; }
.card--muted .card__desc  { color: #4a4a4a; }
.card--muted .card__arrow { color: #9a9a9a; }

/* hover (só onde há hover real — evita "sticky hover" no toque) */
@media (hover: hover) {
  .card--muted:hover   { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.09); }
  .social:hover        { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); border-color: rgba(5,41,246,0.4); }
}

/* ---------------- FOOTER / SOCIAL ---------------- */
.social-foot { padding: 8px 0 36px; }
.social-foot__label {
  margin: 0 0 14px; text-align: center; font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #6b6b6b; font-weight: 600;
}
.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.social {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px; border-radius: 14px; text-decoration: none;
  background: #fff; border: 1px solid rgba(0,0,0,0.1);
  transition: transform 220ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 220ms cubic-bezier(0.22,1,0.36,1), border-color 220ms;
}
.social__ico { color: #0a0a0a; display: flex; }
.social__label { font-size: 10.5px; font-weight: 600; color: #5c5c5c; letter-spacing: 0.02em; }

/* ---------------- OFERTA (herói de venda) ---------------- */
.offer {
  background: #0a1a66;
  background: linear-gradient(160deg, #0a1a66 0%, #0529F6 100%);
  border-radius: 16px; padding: 22px 20px; color: #fff;
  display: flex; flex-direction: column; gap: 10px; text-align: left;
}
.offer__eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #c2c7ff;
}
.offer__title {
  margin: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 26px; line-height: 1.05; letter-spacing: -0.02em; color: #fff;
}
.offer__promise { margin: 0; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,0.9); }
.offer__proof {
  margin: 0; font-size: 13px; font-weight: 600; color: #d7dcff;
  padding-left: 22px; position: relative;
}
.offer__proof::before { content: "★"; position: absolute; left: 0; color: #fff; }
.offer__cta {
  margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: #0529F6; text-decoration: none;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px;
  padding: 15px 18px; border-radius: 12px;
  transition: transform 220ms cubic-bezier(0.22,1,0.36,1), box-shadow 220ms cubic-bezier(0.22,1,0.36,1);
}
.offer__wa {
  text-align: center; text-decoration: none; color: #c2c7ff;
  font-size: 13px; font-weight: 600; padding: 11px 4px;
}
@media (hover: hover) {
  .offer__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.28); }
  .offer__wa:hover  { color: #fff; }
}

/* ---------------- a11y / movimento ---------------- */
:focus-visible { outline: 2px solid #0529F6; outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}