:root{
  --blue:#0f5cf6;
  --blue-2:#1689ff;
  --blue-dark:#0b2b73;
  --ink:#0b1429;
  --muted:#7887a4;
  --line:rgba(20,91,236,.14);
  --white:#fff;
}

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

html,
body{
  min-height:100%;
}

body{
  min-height:100vh;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255,255,255,.99) 0 27%,
      rgba(247,250,255,.96) 52%,
      rgba(225,238,255,.92) 100%
    ),
    #f6f9ff;

  overflow-x:hidden;
}


/* =====================================================
   ESTRUTURA PRINCIPAL
===================================================== */

.page-shell{
  min-height:100vh;
  position:relative;
  overflow:hidden;

  display:grid;
  grid-template-rows:1fr auto;

  isolation:isolate;
}


/* =====================================================
   HERO
===================================================== */

.hero{
  width:min(980px,calc(100% - 42px));
  margin:0 auto;

  min-height:calc(100vh - 88px);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  padding:42px 0 24px;

  position:relative;
  z-index:5;
}


/* =====================================================
   LOGO
===================================================== */

.brand-wrap{
  margin-bottom:16px;
}

.brand-logo{
  width:clamp(250px,30vw,430px);
  height:auto;

  display:block;

  filter:
    drop-shadow(
      0 16px 28px rgba(30,80,180,.08)
    );
}


/* =====================================================
   BADGE - ESTAMOS CHEGANDO
===================================================== */

.coming-badge{
  position:relative;

  display:inline-flex;
  align-items:center;

  gap:14px;

  border:
    1px solid rgba(33,108,242,.25);

  border-radius:999px;

  padding:12px 20px;
  margin:0 0 26px;

  background:
    rgba(255,255,255,.76);

  color:#0d63ef;

  font-weight:800;
  font-size:12px;

  text-transform:uppercase;
  letter-spacing:.34em;

  box-shadow:
    0 8px 28px rgba(30,101,240,.10),
    inset 0 0 28px rgba(48,120,255,.035);

  backdrop-filter:blur(14px);

  overflow:hidden;

  animation:
    badgeFloat 3.2s ease-in-out infinite;
}

.coming-badge::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      110deg,
      transparent 18%,
      rgba(255,255,255,.9) 44%,
      transparent 70%
    );

  transform:
    translateX(-140%);

  animation:
    badgeSweep 3.7s ease-in-out 1s infinite;
}


/* =====================================================
   PONTO ANIMADO
===================================================== */

.pulse-dot{
  width:28px;
  height:28px;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 42% 40%,
      #fff 0 10%,
      #3b91ff 12% 28%,
      #0e5cf0 30% 100%
    );

  box-shadow:
    0 0 0 0 rgba(21,101,245,.22),
    0 5px 14px rgba(21,101,245,.28);

  animation:
    pulse 1.8s ease-out infinite;

  flex:0 0 auto;

  position:relative;
  z-index:1;
}

.coming-badge > span:not(.pulse-dot){
  position:relative;
  z-index:1;
}

.badge-dots{
  display:flex;
  gap:4px;
  letter-spacing:0;
}

.badge-dots i{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#8cbcff;

  display:block;

  animation:
    dotBlink 1.4s infinite;
}

.badge-dots i:nth-child(2){
  animation-delay:.18s;
}

.badge-dots i:nth-child(3){
  animation-delay:.36s;
}


/* =====================================================
   TÍTULO
===================================================== */

h1{
  font-size:
    clamp(40px,5.2vw,74px);

  line-height:1.02;

  letter-spacing:-.055em;

  font-weight:900;

  color:#0a142a;

  text-wrap:balance;
}

h1 span{
  background:
    linear-gradient(
      90deg,
      #0b55ee,
      #1789ff
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}


/* =====================================================
   TEXTO PRINCIPAL
===================================================== */

.lead{
  margin-top:22px;

  max-width:790px;

  font-size:
    clamp(15px,1.35vw,19px);

  line-height:1.7;

  color:#72829f;
}

.lead strong{
  color:#62738f;
  font-weight:800;
}


/* =====================================================
   BENEFÍCIOS
===================================================== */

.benefits{
  margin-top:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:26px;

  width:min(820px,100%);
}

.benefit{
  display:flex;
  align-items:center;

  gap:13px;

  text-align:left;

  min-width:0;
}

.benefit-icon{
  width:54px;
  height:54px;

  border-radius:50%;

  display:grid;
  place-items:center;

  color:#0f66f5;

  font-size:21px;

  background:
    rgba(255,255,255,.8);

  border:
    1px solid rgba(21,100,242,.08);

  box-shadow:
    0 12px 28px rgba(44,103,200,.08);

  flex:0 0 auto;
}

.benefit strong{
  display:block;

  font-size:14px;

  color:#1b2b48;

  margin-bottom:3px;
}

.benefit span{
  display:block;

  font-size:12px;

  color:#8997ae;
}

.benefit-divider{
  height:44px;
  width:1px;

  background:
    linear-gradient(
      transparent,
      rgba(50,105,200,.14),
      transparent
    );
}


/* =====================================================
   TEXTO FINAL
===================================================== */

.coming-foot{
  margin-top:31px;

  color:#9aacca;

  font-size:11px;

  letter-spacing:.28em;

  text-transform:none;
}

.coming-foot i{
  display:block;

  width:38px;
  height:2px;

  background:#6aa8ff;

  margin:12px auto 0;

  opacity:.55;
}


/* =====================================================
   RODAPÉ
===================================================== */

footer{
  min-height:72px;

  padding:
    20px 5vw 26px;

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:24px;

  color:#9ba9bf;

  font-size:11px;

  position:relative;

  z-index:6;
}

.socials{
  display:flex;
  gap:18px;
}

.socials a{
  color:#9fb3d5;

  text-decoration:none;

  transition:.25s;
}

.socials a:hover{
  color:var(--blue);

  transform:
    translateY(-2px);
}


/* =====================================================
   EFEITOS DE FUNDO
===================================================== */

.ambient{
  position:absolute;

  border-radius:50%;

  filter:blur(70px);

  pointer-events:none;

  z-index:-2;

  opacity:.32;
}

.ambient-a{
  width:380px;
  height:380px;

  left:-110px;
  top:-90px;

  background:#76aaff;
}

.ambient-b{
  width:420px;
  height:420px;

  right:-130px;
  bottom:-90px;

  background:#3a8cff;
}


/* =====================================================
   CÍRCULOS DE FUNDO
===================================================== */

.ring{
  position:absolute;

  border:
    2px solid rgba(255,255,255,.58);

  border-radius:50%;

  pointer-events:none;

  z-index:-1;
}

.ring-a{
  width:520px;
  height:520px;

  left:-150px;
  top:-245px;

  box-shadow:
    0 0 0 1px rgba(67,132,244,.08);
}

.ring-b{
  width:430px;
  height:430px;

  right:-120px;
  top:245px;

  border-color:
    rgba(255,255,255,.48);
}


/* =====================================================
   TEXTOS LATERAIS
===================================================== */

.side-copy{
  position:absolute;

  z-index:1;

  display:flex;

  flex-direction:column;

  gap:8px;

  color:#87a4d1;

  font-size:8px;

  letter-spacing:.43em;

  opacity:.55;
}

.side-copy-left{
  left:5vw;
  top:9vh;
}

.side-copy-right{
  right:5vw;
  top:36vh;

  text-align:center;

  align-items:center;
}

.side-copy i{
  display:block;

  width:34px;
  height:1px;

  background:#3d82f5;

  margin-top:8px;
}


/* =====================================================
   CARTÃO FARMCARD
===================================================== */

.mock-card{
  position:absolute;

  z-index:2;

  width:355px;
  height:224px;

  left:-18px;
  top:29vh;

  border-radius:28px;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(255,255,255,.22),
      transparent 30%
    ),

    radial-gradient(
      circle at 92% 92%,
      rgba(54,156,255,.28),
      transparent 44%
    ),

    linear-gradient(
      135deg,
      #1687ff 0%,
      #0f63f7 28%,
      #0d4bd1 61%,
      #082d7d 100%
    );

  border:
    1px solid rgba(255,255,255,.38);

  box-shadow:
    0 38px 85px rgba(12,54,145,.28),
    0 10px 26px rgba(13,75,190,.18),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.08);

  transform:
    rotate(9deg)
    perspective(900px)
    rotateY(-7deg);

  transform-origin:center;

  overflow:hidden;

  padding:25px 27px;

  color:#fff;

  opacity:.98;

  animation:
    mockCardFloat 6s ease-in-out infinite;

  transition:
    transform .5s ease,
    box-shadow .5s ease,
    left .4s ease;
}


/* =====================================================
   REFLEXO INTERNO
===================================================== */

.mock-card-glow{
  position:absolute;

  width:220px;
  height:220px;

  right:-90px;
  top:-100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.30),
      rgba(255,255,255,0) 68%
    );

  filter:blur(8px);

  pointer-events:none;
}


/* =====================================================
   BRILHO PASSANDO PELO CARTÃO
===================================================== */

.mock-card-shine{
  position:absolute;

  width:105px;
  height:400px;

  top:-90px;
  left:-180px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );

  transform:
    rotate(23deg);

  animation:
    mockCardShine 5.8s ease-in-out infinite;

  pointer-events:none;
}


/* =====================================================
   TEXTURA DO CARTÃO
===================================================== */

.mock-card-grid{
  position:absolute;

  inset:0;

  opacity:.035;

  background-image:

    linear-gradient(
      rgba(255,255,255,.85) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.85) 1px,
      transparent 1px
    );

  background-size:
    28px 28px;

  pointer-events:none;
}


/* =====================================================
   TOPO DO CARTÃO
===================================================== */

.mock-card-top{
  position:relative;

  z-index:2;

  display:flex;

  justify-content:
    space-between;

  align-items:flex-start;
}


/* =====================================================
   LOGO DENTRO DO CARTÃO
===================================================== */

.mock-brand{
  display:flex;

  align-items:center;

  gap:10px;
}

.mock-brand img{
  width:44px;
  height:44px;

  object-fit:contain;

  display:block;

  filter:
    brightness(0)
    invert(1);

  opacity:.97;
}

.mock-brand-name{
  font-size:21px;

  font-weight:900;

  letter-spacing:-.05em;

  color:#fff;
}

.mock-brand-name span{
  color:#9bc7ff;
}


/* =====================================================
   NFC
===================================================== */

.mock-contactless{
  width:34px;
  height:34px;

  display:flex;

  align-items:center;

  justify-content:center;

  color:
    rgba(255,255,255,.82);

  font-size:18px;

  transform:
    rotate(90deg);
}


/* =====================================================
   CENTRO DO CARTÃO
===================================================== */

.mock-card-center{
  position:relative;

  z-index:2;

  margin-top:30px;
}

.mock-card-label{
  margin-bottom:10px;

  font-size:8px;

  font-weight:700;

  letter-spacing:.24em;

  color:
    rgba(255,255,255,.62);
}

.mock-card-number{
  display:flex;

  gap:11px;

  font-size:14px;

  font-weight:600;

  letter-spacing:.10em;

  color:
    rgba(255,255,255,.96);

  text-shadow:
    0 2px 6px rgba(0,0,0,.12);
}


/* =====================================================
   PARTE INFERIOR DO CARTÃO
===================================================== */

.mock-card-bottom{
  position:absolute;

  left:27px;
  right:27px;
  bottom:22px;

  z-index:2;

  display:flex;

  align-items:flex-end;

  justify-content:
    space-between;
}


/* =====================================================
   IDENTIFICAÇÃO DO CARTÃO
===================================================== */

.mock-card-user span{
  display:block;

  margin-bottom:4px;

  font-size:7px;

  font-weight:600;

  letter-spacing:.20em;

  color:
    rgba(255,255,255,.52);
}

.mock-card-user strong{
  font-size:11px;

  font-weight:700;

  letter-spacing:.10em;

  color:
    rgba(255,255,255,.94);
}


/* =====================================================
   CHIP
===================================================== */

.mock-card-chip{
  width:43px;
  height:32px;

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  grid-template-rows:
    repeat(2,1fr);

  border-radius:7px;

  padding:4px;

  background:
    linear-gradient(
      135deg,
      #f8da8a,
      #c69739 52%,
      #9d7220
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 4px 12px rgba(0,0,0,.16);
}

.mock-card-chip span{
  border:
    1px solid rgba(85,56,5,.22);
}


/* =====================================================
   HOVER DO CARTÃO
===================================================== */

@media(hover:hover){

  .mock-card:hover{

    transform:
      rotate(6deg)
      perspective(900px)
      rotateY(-2deg)
      translateY(-7px);

    box-shadow:
      0 48px 100px rgba(12,54,145,.34),
      0 14px 30px rgba(13,75,190,.22),
      inset 0 1px 0 rgba(255,255,255,.38);
  }

}


/* =====================================================
   SÍMBOLO DECORATIVO DIREITA
===================================================== */

.corner-symbol{
  position:absolute;

  right:-110px;
  bottom:74px;

  width:310px;
  height:310px;

  z-index:1;

  filter:blur(5px);

  opacity:.2;

  transform:
    rotate(-9deg);
}

.corner-symbol img{
  width:100%;
  height:100%;

  object-fit:contain;
}


/* =====================================================
   ENTRADA DOS ELEMENTOS
===================================================== */

.reveal{
  opacity:0;

  transform:
    translateY(16px);

  animation:
    reveal .72s ease forwards;
}

.reveal-1{
  animation-delay:.05s;
}

.reveal-2{
  animation-delay:.15s;
}

.reveal-3{
  animation-delay:.24s;
}

.reveal-4{
  animation-delay:.34s;
}

.reveal-5{
  animation-delay:.44s;
}

.reveal-6{
  animation-delay:.55s;
}


/* =====================================================
   ANIMAÇÕES
===================================================== */

@keyframes reveal{

  to{
    opacity:1;

    transform:
      translateY(0);
  }

}


@keyframes badgeFloat{

  0%,
  100%{
    transform:
      translateY(0);
  }

  50%{
    transform:
      translateY(-4px);
  }

}


@keyframes badgeSweep{

  0%,
  58%{
    transform:
      translateX(-140%);
  }

  100%{
    transform:
      translateX(140%);
  }

}


@keyframes pulse{

  0%{
    box-shadow:
      0 0 0 0 rgba(21,101,245,.25),
      0 5px 14px rgba(21,101,245,.28);
  }

  70%{
    box-shadow:
      0 0 0 10px rgba(21,101,245,0),
      0 5px 14px rgba(21,101,245,.28);
  }

  100%{
    box-shadow:
      0 0 0 0 rgba(21,101,245,0),
      0 5px 14px rgba(21,101,245,.28);
  }

}


@keyframes dotBlink{

  0%,
  100%{
    opacity:.35;

    transform:
      scale(.8);
  }

  50%{
    opacity:1;

    transform:
      scale(1);
  }

}


/* =====================================================
   FLUTUAÇÃO DO CARTÃO
===================================================== */

@keyframes mockCardFloat{

  0%,
  100%{

    transform:
      rotate(9deg)
      perspective(900px)
      rotateY(-7deg)
      translateY(0);
  }

  50%{

    transform:
      rotate(7deg)
      perspective(900px)
      rotateY(-5deg)
      translateY(-9px);
  }

}


/* =====================================================
   REFLEXO DO CARTÃO
===================================================== */

@keyframes mockCardShine{

  0%,
  62%{

    left:-180px;

  }

  100%{

    left:430px;

  }

}


/* =====================================================
   RESPONSIVO - NOTEBOOK
===================================================== */

@media(max-width:1180px){

  .mock-card{

    left:-38px;

    top:27vh;

    width:330px;

    height:208px;

    opacity:.94;

    padding:
      22px 24px;

  }

  .mock-card-bottom{

    left:24px;
    right:24px;
    bottom:19px;

  }

  .side-copy{

    display:none;

  }

  .corner-symbol{

    right:-165px;

  }

}


/* =====================================================
   RESPONSIVO - TABLET
===================================================== */

@media(max-width:880px){

  .hero{

    min-height:auto;

    padding:
      80px 0 58px;

    width:
      min(
        720px,
        calc(100% - 30px)
      );

  }

  .mock-card,
  .corner-symbol,
  .ring{

    display:none;

  }

  .brand-logo{

    width:
      min(340px,80vw);

  }

  .benefits{

    flex-direction:column;

    gap:14px;

    margin-top:30px;

  }

  .benefit{

    width:
      min(310px,100%);

  }

  .benefit-divider{

    display:none;

  }

  footer{

    justify-content:center;

    flex-direction:
      column-reverse;

    text-align:center;

    padding-bottom:24px;

  }

}


/* =====================================================
   RESPONSIVO - CELULAR
===================================================== */

@media(max-width:600px){

  .hero{

    padding-top:48px;

  }

  .brand-wrap{

    margin-bottom:10px;

  }

  .coming-badge{

    font-size:10px;

    letter-spacing:.22em;

    gap:10px;

    padding:
      10px 14px;

  }

  .pulse-dot{

    width:24px;

    height:24px;

  }

  h1{

    font-size:
      clamp(
        38px,
        12vw,
        55px
      );

  }

  .desktop-break{

    display:none;

  }

  .lead{

    font-size:15px;

    line-height:1.65;

  }

}


/* =====================================================
   ACESSIBILIDADE
===================================================== */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;

  }

}