/* Hyper Next v0.0.1 — home.css (Home refinada)
   - Mobile-first
   - Sem JS
   - Neon/glow controlado + animações suaves
*/

.hero{
  padding: 28px 0 18px;
}
.hero-wrap{
  display:grid;
  gap: 16px;
  align-items:start;
}

/* Hero card with cinematic glow */
.hero-card{
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-140px -140px auto auto;
  width: 360px;
  height: 360px;
  background:
    radial-gradient(circle at 30% 30%, rgba(47,215,255,.26), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(177,76,255,.26), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255,79,216,.10), transparent 60%);
  filter: blur(2px);
  opacity:.95;
  transform: rotate(18deg);
  pointer-events:none;
}
.hero-card::after{
  content:"";
  position:absolute;
  inset:auto auto -220px -220px;
  width: 520px;
  height: 520px;
  background:
    radial-gradient(circle at 40% 40%, rgba(47,215,255,.16), transparent 62%),
    radial-gradient(circle at 70% 70%, rgba(177,76,255,.18), transparent 62%);
  filter: blur(2px);
  opacity:.8;
  pointer-events:none;
}

/* Hero header */
.hero-head{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.hero-sub{
  margin-top: 6px;
  max-width: 62ch;
}

/* Brand spotlight */
.brand-spot{
  display:flex;
  align-items:center;
  gap: 14px;
}
.brand-spot .mark{
  width: 62px;
  height: 62px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(47,215,255,.12), rgba(177,76,255,.12));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--glow-blue), var(--glow-purple);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.brand-spot .mark::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at 30% 30%, rgba(47,215,255,.28), transparent 60%);
  filter: blur(1px);
  opacity:.9;
}
.brand-spot img{
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(47,215,255,.25));
  position:relative;
  z-index:1;
}
.brand-spot .txt{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand-spot .txt strong{
  font-size: 14px;
  letter-spacing: .9px;
}
.brand-spot .txt span{
  font-size: 12px;
  color: var(--tx-2);
}

/* Hero actions */
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}
.btn-primary{
  position:relative;
  overflow:hidden;
}
.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.18) 40%, transparent 75%);
  transform: translateX(-140%);
  opacity:.0;
}
.btn-primary:hover::after{
  opacity:.9;
  transform: translateX(140%);
  transition: transform .85s ease, opacity .25s ease;
}

/* Trust chips */
.trustbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  padding: 12px;
  border-radius: var(--r-2);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.trustbar .tag{
  opacity:.95;
}

/* “Pilares” section */
.section{
  padding: 18px 0;
}
.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.section-title .hint{
  color: var(--tx-2);
  font-size: 13px;
}

.pillar{
  position:relative;
  overflow:hidden;
}
.pillar::before{
  content:"";
  position:absolute;
  inset:auto -140px -140px auto;
  width: 260px;
  height: 260px;
  background:
    radial-gradient(circle at 30% 30%, rgba(47,215,255,.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(177,76,255,.18), transparent 60%);
  filter: blur(1px);
  opacity:.9;
  pointer-events:none;
}
.pillar h3{
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing:.2px;
}
.pillar p{
  margin:0;
  color: var(--tx-1);
  font-size: 13px;
}
.pillar .list{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}
.pillar .item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.pillar .item .ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(47,215,255,.14), rgba(177,76,255,.14));
  border: 1px solid rgba(47,215,255,.18);
  box-shadow: var(--glow-blue);
  flex: 0 0 auto;
}
.pillar .item strong{
  font-size: 13px;
}
.pillar .item span{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--tx-2);
}

/* Community highlight */
.showcase{
  display:grid;
  gap: 12px;
}
.showcase .row{
  display:grid;
  gap: 10px;
}
.group-card{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
}
.group-card strong{ font-size: 13px; }
.group-card .meta{
  font-size: 12px;
  color: var(--tx-2);
  margin-top: 3px;
}
.group-card .badge{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: var(--tx-1);
  white-space:nowrap;
}

/* Micro animations */
@keyframes riseIn{
  from{ transform: translateY(10px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
@keyframes pulseGlow{
  0%,100%{ filter: drop-shadow(0 0 14px rgba(47,215,255,.18)); }
  50%{ filter: drop-shadow(0 0 26px rgba(177,76,255,.22)); }
}

.anim-in{ animation: riseIn .55s ease both; }
.delay-1{ animation-delay:.08s; }
.delay-2{ animation-delay:.16s; }
.delay-3{ animation-delay:.24s; }
.logo-float{ animation: floaty 4.2s ease-in-out infinite; }
.logo-pulse{ animation: pulseGlow 3.6s ease-in-out infinite; }

/* Support FAB */
.support-fab{
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 120;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,9,12,.65);
  backdrop-filter: blur(14px);
  box-shadow: var(--glow-purple), var(--shadow-soft);
}
.support-fab .ico{
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(47,215,255,.16), rgba(177,76,255,.16));
  border: 1px solid rgba(255,255,255,.10);
}
.support-fab span{
  font-size: 12px;
  color: var(--tx-1);
}
.support-fab:hover{
  border-color: rgba(47,215,255,.22);
  box-shadow: var(--glow-blue), var(--glow-purple);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .anim-in, .logo-float, .logo-pulse{ animation: none !important; }
  .btn-primary::after{ display:none; }
}

/* Desktop layout tweaks */
@media (min-width: 900px){
  .hero-wrap{
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
  }
  .showcase .row{
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ===== Extra sections (cliente-ready) ===== */

.bento{
  display:grid;
  gap: 12px;
}
@media (min-width: 900px){
  .bento{
    grid-template-columns: 1.15fr .85fr;
    align-items:stretch;
  }
}

.offer-grid{
  display:grid;
  gap: 12px;
}
@media (min-width: 700px){
  .offer-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px){
  .offer-grid{ grid-template-columns: repeat(3, 1fr); }
}

.offer{
  position:relative;
  overflow:hidden;
}
.offer::after{
  content:"";
  position:absolute;
  inset:-80px -120px auto auto;
  width: 220px;
  height: 220px;
  background:
    radial-gradient(circle at 30% 30%, rgba(47,215,255,.16), transparent 62%),
    radial-gradient(circle at 70% 70%, rgba(177,76,255,.16), transparent 62%);
  filter: blur(2px);
  opacity:.85;
  transform: rotate(10deg);
  pointer-events:none;
}
.offer h3{
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing:.2px;
}
.offer p{
  margin:0;
  color: var(--tx-1);
  font-size: 13px;
}
.offer .mini{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.price-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  font-size: 12px;
  color: var(--tx-1);
}

.pricing{
  display:grid;
  gap: 12px;
}
@media (min-width: 900px){
  .pricing{ grid-template-columns: repeat(3, 1fr); }
}
.plan{
  position:relative;
  overflow:hidden;
}
.plan.featured{
  border-color: rgba(47,215,255,.22);
  box-shadow: var(--glow-blue), var(--glow-purple), var(--shadow-soft);
}
.plan .top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.plan h3{ margin:0; font-size: 15px; letter-spacing:.2px; }
.plan .value{
  font-size: 24px;
  letter-spacing:.3px;
  margin-top: 10px;
}
.plan .value span{
  font-size: 12px;
  color: var(--tx-2);
  margin-left: 6px;
}
.plan ul{
  margin: 12px 0 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 8px;
}
.plan li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 12px;
  color: var(--tx-1);
}
.plan li i{
  width: 18px;
  height: 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(47,215,255,.16), rgba(177,76,255,.16));
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}

.testimonials{
  display:grid;
  gap: 12px;
}
@media (min-width: 900px){
  .testimonials{ grid-template-columns: repeat(3, 1fr); }
}
.quote{
  position:relative;
  overflow:hidden;
}
.quote .who{
  margin-top: 10px;
  font-size: 12px;
  color: var(--tx-2);
}

.faq{
  display:grid;
  gap: 10px;
}
.qa{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.qa strong{
  display:block;
  font-size: 13px;
  margin-bottom: 6px;
}
.qa span{
  font-size: 12px;
  color: var(--tx-2);
}

.big-cta{
  position:relative;
  overflow:hidden;
}
.big-cta::before{
  content:"";
  position:absolute;
  inset:-160px -160px auto auto;
  width: 460px;
  height: 460px;
  background:
    radial-gradient(circle at 30% 30%, rgba(47,215,255,.18), transparent 62%),
    radial-gradient(circle at 70% 70%, rgba(177,76,255,.18), transparent 62%),
    radial-gradient(circle at 40% 70%, rgba(255,79,216,.08), transparent 62%);
  filter: blur(2px);
  opacity:.9;
  pointer-events:none;
}
.big-cta .grid2{
  display:grid;
  gap: 12px;
}
@media (min-width: 900px){
  .big-cta .grid2{ grid-template-columns: 1.2fr .8fr; align-items:center; }
}
.big-cta .points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}

/* Slightly larger hero spacing on big screens */
@media (min-width: 900px){
  .hero{ padding: 34px 0 22px; }
}


/* ===== Attention-grabbing enhancements ===== */

/* Icon system (CSS-only) */
.ico-round{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(47,215,255,.18), rgba(177,76,255,.18));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--glow-blue);
  font-size: 18px;
}

/* Hover lift */
.lift{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lift:hover{
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(47,215,255,.28);
  box-shadow: var(--glow-blue), var(--glow-purple), var(--shadow-soft);
}

/* Animated divider */
.divider{
  height: 2px;
  margin: 18px 0;
  background: linear-gradient(90deg, transparent, rgba(47,215,255,.55), rgba(177,76,255,.55), transparent);
  animation: sweep 3.2s ease-in-out infinite;
}
@keyframes sweep{
  0%{ opacity:.3; }
  50%{ opacity:.9; }
  100%{ opacity:.3; }
}

/* Floating badges */
.float-badges{
  display:flex; gap:10px; flex-wrap:wrap;
}
.float-badges .chip{
  animation: bob 3.8s ease-in-out infinite;
}
.float-badges .chip:nth-child(2){ animation-delay:.4s; }
.float-badges .chip:nth-child(3){ animation-delay:.8s; }
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}

/* Glow pulse cards */
.pulse-card{
  position:relative;
}
.pulse-card::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(47,215,255,.0), rgba(177,76,255,.25), rgba(47,215,255,.0));
  opacity:.0;
  filter: blur(6px);
  transition: opacity .35s ease;
  pointer-events:none;
}
.pulse-card:hover::after{ opacity:.6; }

/* Icon bullets */
.bullet-ico{
  display:flex; gap:10px; align-items:flex-start;
}
.bullet-ico i{
  width: 28px; height: 28px;
  border-radius: 10px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(47,215,255,.18), rgba(177,76,255,.18));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--glow-blue);
  font-size: 14px;
}

/* Animated CTA underline */
.cta-underline{
  position:relative; display:inline-block;
}
.cta-underline::after{
  content:"";
  position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background: linear-gradient(90deg, rgba(47,215,255,.0), rgba(47,215,255,.7), rgba(177,76,255,.7), rgba(47,215,255,.0));
  transform: scaleX(.0);
  transform-origin:left;
  transition: transform .35s ease;
}
.cta-underline:hover::after{ transform: scaleX(1); }



/* ===== Attention-grabbing animations (no JS) ===== */

/* Floating particles layer */
.particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
  overflow:hidden;
}
.particles::before,
.particles::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(2px 2px at 12% 28%, rgba(47,215,255,.35), transparent 60%),
    radial-gradient(2px 2px at 78% 22%, rgba(177,76,255,.38), transparent 60%),
    radial-gradient(1px 1px at 45% 55%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(2px 2px at 62% 76%, rgba(255,79,216,.22), transparent 60%),
    radial-gradient(1px 1px at 22% 80%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(1px 1px at 90% 62%, rgba(47,215,255,.18), transparent 60%);
  opacity:.55;
  animation: drift 10s ease-in-out infinite;
  filter: blur(.15px);
}
.particles::after{
  opacity:.35;
  animation-duration: 14s;
  animation-direction: reverse;
}

/* Hover lift for cards */
.card{
  transition: transform .18s ease, border-color .18s ease, box-shadow .22s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(47,215,255,.18);
  box-shadow: var(--shadow), var(--glow-blue);
}

/* Offer cards: icon header */
.offer-head{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-bottom: 10px;
}
.offer-head h3{ margin:0; }
.offer-head .sub{
  font-size: 12px;
  color: var(--tx-2);
  margin-top: 3px;
}

/* Animated “shine” stripe for featured plan */
.plan.featured::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.14) 40%, transparent 70%);
  transform: translateX(-140%) rotate(10deg);
  animation: shimmer 4.8s ease-in-out infinite;
  pointer-events:none;
}

/* KPI pills with micro pulse */
.price-pill{
  animation: neonFlicker 5s ease-in-out infinite;
}
.price-pill:nth-child(2){ animation-delay: .4s; }
.price-pill:nth-child(3){ animation-delay: .8s; }

/* Big CTA badge pulse */
.big-cta .chip{
  animation: softPulse 5.5s ease-in-out infinite;
}
.big-cta .chip:nth-child(2){ animation-delay: .35s; }
.big-cta .chip:nth-child(3){ animation-delay: .7s; }

/* Section separator */
.sep{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,215,255,.30), rgba(177,76,255,.30), transparent);
  opacity: .65;
  margin: 18px 0;
}

/* Feature row */
.feature-row{
  display:grid;
  gap: 12px;
}
@media (min-width: 900px){
  .feature-row{ grid-template-columns: repeat(3, 1fr); }
}
.feature{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.feature strong{ font-size: 13px; }
.feature span{ display:block; margin-top: 2px; font-size: 12px; color: var(--tx-2); }

/* Subtle underline animation for section titles */
.section-title h2{
  position:relative;
}
.section-title h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47,215,255,.65), rgba(177,76,255,.65));
  box-shadow: var(--glow-purple);
  opacity:.85;
  animation: softPulse 6s ease-in-out infinite;
}

/* Hotfix: no horizontal scroll */
body{overflow-x:hidden;}