/* ==========================================================================
   JP STORE — Link na bio
   Paleta amostrada da logo (verde do monograma) + preto do ecossistema
   ========================================================================== */

:root{
  /* superfícies */
  --bg:            #08090A;
  --surface:       #101312;
  --surface-2:     #161A18;
  --line:          rgba(255,255,255,.09);
  --line-strong:   rgba(255,255,255,.16);

  /* marca */
  --green:         #34C36E;   /* verde do monograma JP */
  --green-lt:      #5FD98F;
  --green-dk:      #1B7A45;
  --green-glow:    rgba(52,195,110,.30);

  /* texto */
  --txt:           #F3F5F4;
  --txt-2:         #9AA3A0;
  --txt-3:         #8B938F;

  /* tipografia */
  --font-head:     'Bebas Neue', 'Archivo Narrow', Impact, sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius:        16px;
  --radius-sm:     13px;
  --shadow:        0 10px 30px rgba(0,0,0,.45);
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

/* brilho de marca atrás do topo, discreto */
.glow{
  position:fixed;
  top:-180px; left:50%;
  width:min(620px,140vw); height:480px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, var(--green-glow), transparent 72%);
  pointer-events:none;
  z-index:0;
}

.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:440px;
  margin:0 auto;
  padding:34px 20px calc(120px + env(safe-area-inset-bottom));
}

/* ---------- 01 · identificação ------------------------------------------ */

.hero{ text-align:center; }

/* avatar com anel neon girando */
.avatar{
  position:relative;
  width:124px; height:124px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  isolation:isolate;
}

/* halo pulsando por trás */
.avatar::before{
  content:'';
  position:absolute;
  inset:-16px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(52,195,110,.30), transparent 72%);
  animation:halo 3.6s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}

/* trilho fixo do anel, para o círculo nunca ficar "solto" */
.avatar__ring::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(52,195,110,.18);
}

/* cometa de luz que dá a volta */
.avatar__ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0turn,
    rgba(52,195,110,0)    0turn,
    rgba(52,195,110,0)    .52turn,
    rgba(52,195,110,.30)  .74turn,
    var(--green)          .88turn,
    var(--green-lt)       .965turn,
    #D6FFE7               .995turn,
    rgba(52,195,110,0)    1turn);
  -webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
  filter:drop-shadow(0 0 5px rgba(52,195,110,.9)) drop-shadow(0 0 14px rgba(52,195,110,.45));
  animation:orbit 3.4s linear infinite;
}

.avatar__img{
  position:relative;
  width:104px; height:104px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
}

@keyframes orbit{ to{ transform:rotate(1turn); } }

@keyframes halo{
  0%,100%{ opacity:.55; transform:scale(.97); }
  50%    { opacity:1;   transform:scale(1.04); }
}

.hero__name{
  font-family:var(--font-head);
  font-weight:400;
  font-size:48px;
  letter-spacing:.045em;
  line-height:.94;
  margin:0 0 4px;
}

.hero__handle{
  margin:0 0 14px;
  font-size:13.5px;
  font-weight:500;
  color:var(--green);
  letter-spacing:.01em;
}

.hero__tagline{
  margin:0 auto 18px;
  max-width:32ch;
  font-size:15px;
  line-height:1.55;
  color:var(--txt-2);
}

.hero__tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  list-style:none;
  margin:0 0 26px;
  padding:0;
}

.hero__tags li{
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  font-size:12px;
  font-weight:500;
  color:var(--txt-2);
  white-space:nowrap;
}

/* ---------- 02 · CTA principal ------------------------------------------ */

.cta{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:68px;
  padding:14px 18px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--green-lt), var(--green));
  color:#04240F;
  box-shadow:0 12px 28px rgba(52,195,110,.22);
  transition:transform .16s ease, box-shadow .16s ease;
}

.cta .ico{ width:28px; height:28px; flex:0 0 28px; fill:#04240F; }

.cta span{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }

.cta strong{
  font-family:var(--font-head);
  font-weight:400;
  font-size:22px;
  letter-spacing:.05em;
  line-height:1.05;
}

.cta small{ font-size:12.5px; font-weight:500; color:rgba(4,36,15,.72); }

.cta .chev{ width:20px; height:20px; flex:0 0 20px; stroke:#04240F; }

/* ---------- blocos ------------------------------------------------------- */

.block{ margin-top:34px; }

.block__title{
  font-family:var(--font-head);
  font-weight:400;
  font-size:15px;
  letter-spacing:.18em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--txt-3);
  margin:0 0 4px;
  padding-left:2px;
}

.block__sub{
  margin:0 0 14px;
  padding-left:2px;
  font-size:13.5px;
  color:var(--txt-2);
}

.block__title + .grid,
.block__title + .stats,
.block__title + .row{ margin-top:14px; }

/* ---------- 03 · vitrine de categorias ---------------------------------- */

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}

.card{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:16px 14px 14px;
  min-height:124px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}

.card__ico{
  width:26px; height:26px;
  margin-bottom:auto;
  fill:none;
  stroke:var(--green);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.card__label{
  font-family:var(--font-head);
  font-weight:400;
  font-size:19px;
  line-height:1.05;
  letter-spacing:.03em;
}

.card__hint{ font-size:12px; color:var(--txt-3); }

/* fecho da vitrine */
.claim{
  margin:18px 2px 0;
  text-align:center;
  font-family:var(--font-head);
  font-weight:400;
  font-size:23px;
  line-height:1.1;
  letter-spacing:.05em;
  color:var(--txt);
  text-wrap:balance;
}

.claim b{ font-weight:400; color:var(--green); }

/* ---------- 04 · carrossel de prova -------------------------------------- */

.carousel{ margin-bottom:14px; }

.carousel__track{
  display:flex;
  gap:10px;
  /* sangra até a borda da tela para o "espiar" do próximo slide */
  margin:0 -20px;
  padding:2px 20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track:focus-visible{ outline:2px solid var(--green-lt); outline-offset:2px; border-radius:var(--radius); }

.slide{
  position:relative;
  flex:0 0 76%;
  max-width:280px;
  aspect-ratio:4 / 5;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
  scroll-snap-align:center;
  transition:border-color .18s ease, transform .18s ease;
}

.slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* véu escuro na base para as legendas ficarem legíveis */
.slide::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:58%;
  background:linear-gradient(to top, rgba(4,7,5,.92) 8%, rgba(4,7,5,.55) 45%, transparent 100%);
  pointer-events:none;
}

.slide__tag,
.slide__cta{
  position:absolute;
  z-index:1;
  left:14px;
}

.slide__tag{
  bottom:38px;
  font-family:var(--font-head);
  font-weight:400;
  font-size:20px;
  letter-spacing:.04em;
  line-height:1.05;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}

.slide__cta{
  bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--green-lt);
}

.slide__cta::after{
  content:'';
  width:5px; height:5px;
  border-top:1.6px solid currentColor;
  border-right:1.6px solid currentColor;
  transform:rotate(45deg);
}

.dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:12px;
}

.dot{
  width:7px; height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  cursor:pointer;
  transition:width .22s ease, background .22s ease;
  -webkit-appearance:none;
  appearance:none;
}

.dot.is-active{
  width:22px;
  background:var(--green);
  box-shadow:0 0 8px rgba(52,195,110,.7);
}

.dot:focus-visible{ outline:2px solid var(--green-lt); outline-offset:3px; }

/* ---------- 04b · números ------------------------------------------------ */

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-bottom:11px;
}

.stat{
  padding:14px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  text-align:center;
}

.stat b{
  display:block;
  font-family:var(--font-head);
  font-weight:400;
  font-size:28px;
  color:var(--green);
  letter-spacing:.02em;
  line-height:1;
}

.stat span{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.3;
  color:var(--txt-3);
}

/* ---------- linhas de ação ---------------------------------------------- */

.row{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:64px;
  padding:12px 16px;
  margin-bottom:10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}

.row:last-of-type{ margin-bottom:0; }

.row__ico{
  width:23px; height:23px; flex:0 0 23px;
  fill:none;
  stroke:var(--green);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.row span{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }

.row strong{
  font-family:var(--font-head);
  font-weight:400;
  font-size:18px;
  letter-spacing:.055em;
  line-height:1.1;
}

.row small{
  font-size:12.5px;
  color:var(--txt-2);
  overflow-wrap:anywhere;
}

.row .chev{
  width:18px; height:18px; flex:0 0 18px;
  fill:none;
  stroke:var(--txt-3);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.row--quiet{ background:transparent; min-height:58px; }
.row--quiet .row__ico{ stroke:var(--txt-2); }

.note{
  margin:14px 2px 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--txt-3);
}

/* ---------- rodapé ------------------------------------------------------- */

.foot{
  margin-top:40px;
  padding-top:22px;
  border-top:1px solid var(--line);
  text-align:center;
}

.foot__brand{
  font-family:var(--font-head);
  font-weight:400;
  font-size:17px;
  letter-spacing:.26em;
  line-height:1.2;
  color:var(--txt-2);
  margin:0 0 6px;
}

.foot__by{ margin:0; font-size:11.5px; color:var(--txt-3); }
.foot__by a{ color:var(--txt-3); border-bottom:1px solid transparent; }

/* ---------- CTA fixo ----------------------------------------------------- */

.sticky{
  position:fixed;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translate(-50%, 120%);
  z-index:20;
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 22px;
  border-radius:999px;
  background:var(--green);
  color:#04240F;
  font-family:var(--font-head);
  font-weight:400;
  font-size:19px;
  letter-spacing:.06em;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
  opacity:0;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease;
}

.sticky svg{ width:20px; height:20px; fill:#04240F; }

.sticky.is-visible{ transform:translate(-50%,0); opacity:1; }

/* ---------- estados ------------------------------------------------------ */

@media (hover:hover){
  .cta:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(52,195,110,.30); }
  .card:hover,
  .row:hover{ border-color:var(--line-strong); background:var(--surface-2); transform:translateY(-1px); }
  .slide:hover{ border-color:rgba(52,195,110,.55); }
  .dot:hover{ background:rgba(255,255,255,.42); }
  .foot__by a:hover{ color:var(--green); border-bottom-color:var(--green); }
}

.cta:active,
.card:active,
.row:active,
.slide:active,
.sticky:active{ transform:scale(.985); }

.cta:focus-visible,
.card:focus-visible,
.row:focus-visible,
.slide:focus-visible,
.sticky:focus-visible,
.foot__by a:focus-visible{
  outline:2px solid var(--green-lt);
  outline-offset:3px;
}

/* ---------- responsivo --------------------------------------------------- */

@media (max-width:359px){
  .wrap{ padding-left:16px; padding-right:16px; }
  .hero__name{ font-size:42px; }
  .grid{ gap:9px; }
  .card{ min-height:116px; padding:14px 12px 12px; }
  .card__label{ font-size:17.5px; }
  .stat b{ font-size:25px; }
  .carousel__track{ margin:0 -16px; padding:2px 16px; }
  .slide{ flex-basis:80%; }
}

@media (min-width:768px){
  .wrap{ padding-top:52px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .sticky{ transform:translate(-50%,0); }
  .carousel__track{ scroll-behavior:auto; }
  /* sem giro: o anel vira um contorno neon estático */
  .avatar__ring{
    background:none;
    border:2px solid var(--green);
    -webkit-mask:none;
            mask:none;
  }
}