:root{
  --bg:#050607;
  --bg2:#0b0c0d;
  --text:#F3F6F7;
  --muted: rgba(243,246,247,.74);
  --green:#39ff14;
  --green-light:#39ff14;
  --green-glow: rgba(57,255,20,.55);
  --glass: rgba(0,0,0,.48);
  --border: rgba(57,255,20,.28);
  --shadow: 0 26px 70px rgba(0,0,0,.55);
  --soft: 0 14px 44px rgba(0,0,0,.45);
  --radius:22px;
  --radius2:28px;
  --container:1100px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
img{
  max-width:100%;
  height:auto;
}
section{ scroll-margin-top: 96px; }



a{color:inherit;text-decoration:none;}
h1,h2,h3{font-weight:800;letter-spacing:-0.03em;}

h1{
  background: linear-gradient(180deg, #ffffff, var(--green-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding: 0 24px;
}

.text-center{text-align:center;}

/* ===== NAVBAR ===== */
.navbar{
  position:fixed;
  top: max(8px, calc(env(safe-area-inset-top) + 8px));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(calc(100% - 16px), 1100px);
  z-index: 2147483000;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(92,255,158,.34);
  background:
    radial-gradient(420px 180px at 12% 50%, rgba(57,255,20,.22), transparent 70%),
    radial-gradient(620px 260px at 88% 30%, rgba(92,255,158,.16), transparent 72%),
    linear-gradient(180deg, rgba(18,24,20,.94), rgba(0,0,0,.82));
  box-shadow:
    0 14px 32px rgba(0,0,0,.55),
    0 0 0 1px rgba(92,255,158,.10) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  isolation: isolate;
}
.navbar::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 55%);
  opacity:.34;
  pointer-events:none;
}
.navbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  max-width:none;
  margin:0;
  padding:0 4px;
}
.logo{
  font-size: 20px;
  font-weight: 800;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.logo-mark{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border-radius: 14px;
  border: 1px solid rgba(57,255,20,.26);
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(255,255,255,1), rgba(245,249,246,1) 55%, rgba(238,244,240,1) 100%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(240,246,242,1));
  box-shadow:
    0 12px 26px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.55) inset,
    0 0 0 2px rgba(57,255,20,.14) inset,
    0 0 60px rgba(57,255,20,.30);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.logo-mark::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:inherit;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(57,255,20,.62), transparent 70%);
  filter: blur(18px);
  opacity:.9;
  pointer-events:none;
  z-index:-2;
  mix-blend-mode: screen;
}
.logo-mark::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background: radial-gradient(80% 120% at 30% 0%, rgba(255,255,255,.22), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.logo-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter: brightness(1.52) contrast(1.28) saturate(1.32)
          drop-shadow(0 12px 22px rgba(0,0,0,.65))
          drop-shadow(0 0 18px rgba(57,255,20,.18));
}
.logo:hover .logo-mark{
  border-color: rgba(92,255,158,.60);
  box-shadow:
    0 14px 30px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 0 2px rgba(57,255,20,.30) inset,
    0 0 78px rgba(57,255,20,.44);
}
.logo:hover .logo-mark img{
  filter: brightness(1.60) contrast(1.30) saturate(1.36)
          drop-shadow(0 14px 24px rgba(0,0,0,.7))
          drop-shadow(0 0 22px rgba(57,255,20,.22));
}
.logo-text{
  overflow:hidden;
  text-overflow:ellipsis;
  color: rgba(243,250,255,.98);
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 0 16px rgba(57,255,20,.10);
}
.logo-icon{
  width:32px;
  height:32px;
  background: linear-gradient(135deg, var(--green), var(--green-light));
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
}
.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 16px;
  min-height:44px;
  border-radius:999px;
  border:1px solid rgba(57,255,20,.34);
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, #1BAE6B 0%, #0F7F4D 55%, #0A5A37 100%);
  color:rgba(243,250,255,.98);
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  flex-shrink:0;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.nav-cta:hover{
  transform: translateY(-2px);
  border-color: rgba(92,255,158,.58);
  box-shadow:
    0 16px 34px rgba(0,0,0,.45),
    0 0 0 1px rgba(57,255,20,.18) inset,
    0 0 24px rgba(57,255,20,.16);
}
.nav-cta:active{ transform: translateY(1px); }
.nav-cta:focus-visible{
  outline: 2px solid rgba(200,255,214,.9);
  outline-offset: 4px;
}

/* ===== HERO SECTION ===== */
.hero{
  padding: 140px 0 80px;
  position:relative;
  text-align:center;
}
.hero-content{
  max-width:900px;
  margin:0 auto;
}
.hero-badge{
  display:inline-block;
  padding:8px 18px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(57,255,20,.25), rgba(57,255,20,.15));
  border:1px solid rgba(57,255,20,.35);
  font-size:13px;
  font-weight:700;
  margin-bottom:24px;
  animation: fadeInDown 0.8s ease;
}
.hero h1{
  font-size: 72px;
  line-height:1.1;
  margin-bottom: 24px;
  animation: fadeInUp 0.8s ease 0.2s backwards;
}
.hero-subtitle{
  font-size: 22px;
  color: rgba(243,246,247,.85);
  max-width:700px;
  margin:0 auto 36px;
  line-height:1.5;
  animation: fadeInUp 0.8s ease 0.4s backwards;
}
.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  animation: fadeInUp 0.8s ease 0.6s backwards;
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 34px;
  min-height:56px;
  border-radius:999px;
  font-family: inherit;
  font-weight:800;
  font-size:16px;
  line-height:1;
  letter-spacing:.01em;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
  border:1px solid transparent;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    filter .18s ease;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transform: translateZ(0);
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 62%);
  opacity:.85;
  pointer-events:none;
}
.btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background: radial-gradient(80% 120% at 50% 0%, rgba(57,255,20,.26), transparent 60%);
  opacity:0;
  filter: blur(14px);
  pointer-events:none;
  transition: opacity .18s ease;
  z-index:-1;
}
.btn:hover::after{
  opacity:.55;
}
.btn:active{
  transform: translateY(1px);
}
.btn:focus-visible{
  outline: 2px solid rgba(200,255,214,.9);
  outline-offset: 4px;
}
.btn[disabled],
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

.btn-primary{
  border:1px solid rgba(92,255,158,.55);
  background:
    radial-gradient(120% 160% at 30% 0%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(120% 160% at 70% 0%, rgba(207,255,242,.14), transparent 58%),
    radial-gradient(700px 240px at 50% -30%, rgba(207,255,242,.18), transparent 70%),
    linear-gradient(180deg, #1EC57A 0%, #0F7F4D 55%, #0A5A37 100%);
  color:#cffff2;
  text-shadow: 0 0 18px rgba(92,255,158,.25), 0 1px 0 rgba(0,0,0,.55);
  box-shadow:
    0 14px 36px rgba(0,0,0,.50),
    0 0 0 1px rgba(92,255,158,.18) inset,
    0 0 26px rgba(92,255,158,.22);
}
.btn-primary::after{
  background: radial-gradient(80% 120% at 50% 0%, rgba(92,255,158,.28), transparent 60%);
}
.btn-primary:hover{
  transform: translateY(-3px);
  border-color: rgba(92,255,158,.78);
  background:
    radial-gradient(120% 160% at 30% 0%, rgba(255,255,255,.26), transparent 55%),
    radial-gradient(120% 160% at 70% 0%, rgba(207,255,242,.18), transparent 58%),
    radial-gradient(700px 240px at 50% -30%, rgba(207,255,242,.22), transparent 70%),
    linear-gradient(180deg, #28D986 0%, #13945A 55%, #0A5A37 100%);
  box-shadow:
    0 18px 52px rgba(0,0,0,.60),
    0 0 0 1px rgba(92,255,158,.22) inset,
    0 0 32px rgba(92,255,158,.28);
}
.btn-primary:active{
  transform: translateY(1px);
  box-shadow:
    0 10px 26px rgba(0,0,0,.60),
    0 0 0 1px rgba(92,255,158,.22) inset,
    0 0 22px rgba(92,255,158,.22);
}

.btn-secondary{
  border:1px solid rgba(92,255,158,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:rgba(232,255,241,.95);
  box-shadow:
    0 14px 36px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.10) inset;
}
.btn-secondary:hover{
  transform: translateY(-2px);
  border-color: rgba(92,255,158,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow:
    0 18px 46px rgba(0,0,0,.34),
    0 1px 0 rgba(255,255,255,.12) inset,
    0 0 24px rgba(57,255,20,.10);
}

/* ===== SOCIAL PROOF ===== */
.social-proof{
  padding:60px 0;
  text-align:center;
  border-top:1px solid rgba(57,255,20,.1);
  border-bottom:1px solid rgba(57,255,20,.1);
  background:rgba(0,0,0,.25);
}
.social-proof-text{
  font-size:14px;
  color:var(--muted);
  margin-bottom:24px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:600;
}
.social-proof-stats{
  display:flex;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap;
}
.stat{
  text-align:center;
  min-width: 160px;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid rgba(57,255,20,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.stat-number{
  font-size:48px;
  font-weight:800;
  color:var(--green-light);
  line-height:1;
  margin-bottom:8px;
  text-shadow: 0 0 20px var(--green-glow);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stat-label{
  font-size:14px;
  color:var(--muted);
  font-weight:600;
}

/* ===== PROBLEM SECTION ===== */
.problem-section{
  padding:100px 0;
  position:relative;
}
.problem-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(800px 600px at 50% 20%, rgba(92,255,158,.14), transparent 70%);
  z-index:-1;
}
.problem-header{
  text-align:center;
  max-width:800px;
  margin:0 auto 60px;
}
.problem-header h2{
  font-size:48px;
  margin-bottom:16px;
}
.problem-header p{
  font-size:18px;
  color:rgba(243,246,247,.8);
}
.problem-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:28px;
  margin-top:40px;
}
.problem-card {
  padding: 34px 30px 30px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.44)),
    radial-gradient(560px 300px at 50% -15%, rgba(92,255,158,.10), transparent 70%);
  border-radius: 20px;
  border: 1px solid rgba(57,255,20,.22);
  backdrop-filter: blur(4px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;

  text-align: center;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .3s ease;
}


.problem-card:hover{
  transform:translateY(-5px);
  border-color:rgba(92,255,158,.38);
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(57,255,20,.10) inset,
    0 0 26px rgba(57,255,20,.16);
}
.problem-icon{
  font-size:42px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  height:80px;
}
.problem-icon img{
  width:72px;
  height:72px;
  object-fit:contain;
  filter: drop-shadow(0 4px 20px rgba(57,255,20,0.3)) brightness(1.1);
  transition: all 0.4s ease;
}
.problem-card h3{
  font-size:20px;
  margin: 0;
  line-height: 1.2;
  color:#b9ffd8;
  text-wrap: balance;
}
.problem-card p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 31ch;
  color: rgba(243,246,247,.83);
}


/* ===== SOLUTION SECTION ===== */
.solution-section{
  padding:100px 0;
  background: transparent;
  position:relative;
}

.solution-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(800px 600px at 50% 50%, rgba(57,255,20,.12), transparent 70%);
  z-index:-1;
}
.solution-header{
  text-align:center;
  max-width:800px;
  margin:0 auto 60px;
}
.solution-header h2{
  font-size:48px;
  margin-bottom:16px;
}
.solution-header p{
  font-size:18px;
  color:rgba(243,246,247,.8);
}
.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:28px;
}

.feature-card {
  padding: 36px;
  background: rgba(0,0,0,.28);
  border-radius: 20px;
  border: 1px solid rgba(57,255,20,.25);
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature-card::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(57,255,20,.1);
  transform:translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}
.feature-card:hover::after{
  width:400px;
  height:400px;
}
.feature-card:hover{
  transform:translateY(-6px);
  border-color:rgba(57,255,20,.35);
  box-shadow:
  0 18px 40px rgba(0,0,0,.32),
  0 0 0 1px rgba(57,255,20,.12);

}
.feature-icon{
  font-size:48px;
  margin-bottom:20px;
  position:relative;
  z-index:1;
}
.feature-card h3{
  font-size:22px;
  margin-bottom:12px;
  color:#fff;
  position:relative;
  z-index:1;
}

.feature-card p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 260px;
  margin: 0 auto;
}

/* ===== HOW IT WORKS ===== */
.how-section{
  padding:100px 0;
}
.how-header{
  text-align:center;
  max-width:800px;
  margin:0 auto 60px;
}
.how-header h2{
  font-size:48px;
  margin-bottom:16px;
}
.how-header p{
  font-size:18px;
  color:rgba(243,246,247,.8);
}
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap:40px;
  margin-top:40px;
}
.step{
  text-align:center;
  position:relative;
}
.step-number{
  width:80px;
  height:80px;
  margin:0 auto 24px;
  border:2px solid rgba(57,255,20,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(230,236,232,.88));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  font-weight:800;
  color: #0b0c0d;
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.32) inset,
    0 0 26px rgba(57,255,20,.20);
}
.step h3{
  font-size:22px;
  margin-bottom:12px;
  color:#fff;
}
.step p{
  font-size:15px;
  color:rgba(243,246,247,.75);
  line-height:1.6;
}

/* ===== PROOF SECTION ===== */
.proof-section{
  padding:140px 0;
  background: transparent;

}

.proof-header{
  text-align:center;
  max-width:800px;
  margin:0 auto 60px;
}
.proof-header h2{
  font-size:48px;
  margin-bottom:16px;
}
.testimonials{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:30px;
}
.testimonials-carousel{
  position:relative;
  --carousel-side-pad: 60px;
}
.testimonials-carousel .testimonials{
  display:flex;
  gap:30px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:0 var(--carousel-side-pad);
  padding:10px var(--carousel-side-pad);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x;
}
.testimonials-carousel .testimonials::-webkit-scrollbar{
  display:none;
}
.testimonials-carousel .testimonials:focus{
  outline:2px solid rgba(57,255,20,.35);
  outline-offset:6px;
}
.testimonials-carousel .testimonial{
  flex:0 0 clamp(280px, 80vw, 360px);
  scroll-snap-align:start;
  width:auto;
}
.carousel-arrows{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  pointer-events:none;
  z-index:3;
}
.carousel-btn{
  transform:none;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(57,255,20,.25);
  background:rgba(0,0,0,.55);
  color:rgba(243,246,247,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
  pointer-events:auto;
}
.carousel-btn svg{
  width:22px;
  height:22px;
}
.carousel-btn:hover{
  background:rgba(0,0,0,.7);
  border-color:rgba(57,255,20,.4);
}
.carousel-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}
@media (max-width: 768px){
  .testimonials-carousel .testimonials{
    gap:18px;
    padding:10px 0;
    scroll-padding:0;
  }
  .carousel-arrows{ display:none; }
}
@media (max-width: 520px){
  .testimonials-carousel .testimonial{
    flex-basis: calc(100% - 28px);
  }
  .testimonials-carousel .testimonials{
    gap:14px;
  }
}
@media (hover: none) and (pointer: coarse){
  .testimonials-carousel{
    --carousel-side-pad: 0px;
  }
  .testimonials-carousel .testimonials{
    gap:18px;
    padding:10px 0;
    scroll-padding:0;
  }
  .carousel-arrows{ display:none; }
}
.testimonial{
  padding:32px;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(57,255,20,.15);
  border-radius:20px;
  transition:all 0.3s ease;
}
.testimonial:hover{
  transform:translateY(-4px);
  border-color:rgba(57,255,20,.3);
}
.testimonial-text{
  font-size:16px;
  line-height:1.7;
  margin-bottom:24px;
  font-style:italic;
  color:rgba(243,246,247,.85);
}
.testimonial-author{
  display:flex;
  align-items:center;
  gap:12px;
}
.author-avatar{
  width:50px;
  height:50px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--green), var(--green-light));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
}
.author-avatar.has-img{
  padding:2px;
  overflow:hidden;
}
.author-avatar.initials{
  background:rgba(57,255,20,.12);
  border:1px solid rgba(57,255,20,.35);
  color:rgba(243,246,247,.92);
  font-size:14px;
  font-weight:800;
  letter-spacing:.5px;
}
.author-avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.author-info .name{
  font-weight:700;
  font-size:15px;
}
.author-info .role{
  font-size:13px;
  color:var(--muted);
}

/* ===== CTA SECTION ===== */
.cta-section{
  padding:120px 0;
  position:relative;
  text-align:center;
}
.cta-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 600px at 50% 50%, rgba(57,255,20,.15), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.3));
  z-index:-1;
}
.cta-box{
  max-width:900px;
  margin:0 auto;
  padding:60px 50px;
  background:linear-gradient(135deg, rgba(0,0,0,.6), rgba(0,0,0,.4));
  border:1px solid rgba(57,255,20,.3);
  border-radius:30px;
  backdrop-filter:blur(10px);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.cta-box h2{
  font-size:52px;
  margin-bottom:20px;
  line-height:1.2;
}
.cta-box p{
  font-size:20px;
  color:rgba(243,246,247,.85);
  margin-bottom:36px;
}
.cta-form{
  display:flex;
  gap:12px;
  max-width:860px;
  margin:0 auto;
  flex-wrap:wrap;
  justify-content:center;
}
.cta-form input{
  flex:1;
  min-width:220px;
  padding:18px 24px;
  border-radius:999px;
  border:1px solid rgba(57,255,20,.25);
  background:rgba(0,0,0,.4);
  color:var(--text);
  font-size:16px;
  outline:none;
  transition:all 0.3s ease;
}
.phone-field{
  flex:1;
  min-width:220px;
  display:flex;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(57,255,20,.25);
  background:rgba(0,0,0,.4);
  color:var(--text);
  font-size:16px;
  outline:none;
  transition:all 0.3s ease;
  overflow:hidden;
}
.phone-field:focus-within{
  border-color:rgba(57,255,20,.5);
  box-shadow:0 0 20px rgba(57,255,20,.25);
}
.phone-prefix-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:18px 18px 18px 22px;
  font-weight:800;
  cursor:pointer;
  flex-shrink:0;
}
.phone-prefix-btn:hover{ background:rgba(57,255,20,.08); }
.phone-prefix-btn:focus-visible{
  outline:2px solid rgba(57,255,20,.65);
  outline-offset:-2px;
}
.phone-prefix-divider{
  width:1px;
  height:26px;
  background:rgba(57,255,20,.22);
  flex-shrink:0;
}
.phone-prefix-code{ letter-spacing: .02em; }
.phone-prefix-chevron{
  opacity:.85;
  transform: translateY(-1px);
  font-size: 14px;
}
.phone-field .phone-number{
  border:0;
  background:transparent;
  padding:18px 24px 18px 18px;
  color:inherit;
  font-size:16px;
  outline:none;
  width:100%;
  min-width:0;
}
.phone-field .phone-number:focus{ box-shadow:none; }
.phone-field .phone-number::placeholder{ color:rgba(243,246,247,.5); }
.cta-form input:focus{
  border-color:rgba(57,255,20,.5);
  box-shadow:0 0 20px rgba(57,255,20,.25);
}
.cta-form input::placeholder{
  color:rgba(243,246,247,.5);
}
.cta-form .btn{
  min-width:220px;
}
.cta-benefits{
  display:flex;
  gap:30px;
  justify-content:center;
  margin-top:32px;
  flex-wrap:wrap;
}
.benefit{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:rgba(243,246,247,.8);
}
.benefit::before{
  content:"✓";
  font-size:18px;
  color:var(--green-light);
  font-weight:800;
}

/* ===== COUNTRY PREFIX MODAL ===== */
.country-modal{
  position:fixed;
  inset:0;
  z-index:2147483100;
  display:grid;
  place-items:center;
}
body.country-modal-open{ overflow:auto; }
.country-modal[hidden]{ display:none; }
.country-modal [hidden]{ display:none !important; }
.country-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}
.country-modal__panel{
  position:relative;
  width:min(440px, calc(100% - 24px));
  max-height:min(64vh, 520px);
  display:flex;
  flex-direction:column;
  border-radius:20px;
  border:1px solid rgba(57,255,20,.28);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(57,255,20,.10), transparent 60%),
    radial-gradient(800px 520px at 90% 10%, rgba(92,255,158,.08), transparent 65%),
    rgba(0,0,0,.92);
  box-shadow:0 26px 70px rgba(0,0,0,.65);
  overflow:hidden;
}
.country-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 8px;
}
.country-modal__header h3{
  font-size:15px;
  letter-spacing:.02em;
}
.country-modal__close{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(243,246,247,.8);
  font-size:28px;
  line-height:1;
  padding:6px 10px;
  border-radius:12px;
  cursor:pointer;
}
.country-modal__close:hover{ background:rgba(57,255,20,.08); }
.country-modal__search{ padding: 0 14px 10px; }
.country-modal__search-input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(57,255,20,.20);
  background:rgba(0,0,0,.45);
  color:var(--text);
  outline:none;
}
.country-modal__search-input:focus{
  border-color:rgba(57,255,20,.5);
  box-shadow:0 0 0 3px rgba(57,255,20,.12);
}
.country-modal__list{
  padding: 4px 6px 12px;
  overflow:auto;
}
.country-group{ padding: 8px 8px 4px; }
.country-group__title{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(243,246,247,.55);
  margin: 8px 6px;
}
.country-option{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  font-size:14px;
}
.country-option:hover{
  background:rgba(57,255,20,.08);
  border-color:rgba(57,255,20,.16);
}
.country-option[aria-selected="true"]{
  background:rgba(57,255,20,.12);
  border-color:rgba(57,255,20,.30);
}
.country-option__name{ font-weight:700; }
.country-option__code{
  color:rgba(243,246,247,.8);
  font-weight:800;
}
.country-empty{
  padding: 18px 16px;
  color: rgba(243,246,247,.65);
  text-align:center;
}

/* ===== FOOTER ===== */
.footer{
  padding:60px 0 30px;
  background:rgba(0,0,0,.6);
  border-top:1px solid rgba(57,255,20,.15);
}
.footer-content{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}
.footer-col h4{
  font-size:16px;
  margin-bottom:16px;
  color:var(--green-light);
}
.footer-col p{
  font-size:14px;
  line-height:1.7;
  color:rgba(243,246,247,.65);
}
.footer-links{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-links a{
  font-size:14px;
  color:rgba(243,246,247,.65);
  transition:color 0.2s ease;
}
.footer-links a:hover{
  color:var(--green-light);
}
.social-links{
  display:flex;
  gap:12px;
  margin-top:16px;
}
.social-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.30), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.46);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  transition:all 0.25s ease;
  cursor:pointer;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 18px rgba(255,255,255,.14),
    0 8px 20px rgba(0,0,0,.30);
}

.social-icon img{
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
  opacity: .9;
  filter: brightness(0) invert(1);
  transition: opacity .2s ease, filter .2s ease;
}
.social-icon:hover{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.38), rgba(255,255,255,.13));
  border-color: rgba(255,255,255,.65);
  transform:translateY(-3px) scale(1.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.26) inset,
    0 0 22px rgba(255,255,255,.22),
    0 10px 24px rgba(0,0,0,.38);
}
.social-icon:hover img{
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

.social-icon--instagram:hover{
  border-color: rgba(228, 64, 95, .7);
  box-shadow:
    0 0 0 1px rgba(228, 64, 95, .2) inset,
    0 10px 24px rgba(0,0,0,.45),
    0 0 16px rgba(228, 64, 95, .25);
}

.social-icon--telegram:hover{
  border-color: rgba(34, 158, 217, .7);
  box-shadow:
    0 0 0 1px rgba(34, 158, 217, .2) inset,
    0 10px 24px rgba(0,0,0,.45),
    0 0 16px rgba(34, 158, 217, .25);
}

.social-icon--whatsapp:hover{
  border-color: rgba(37, 211, 102, .7);
  box-shadow:
    0 0 0 1px rgba(37, 211, 102, .2) inset,
    0 10px 24px rgba(0,0,0,.45),
    0 0 16px rgba(37, 211, 102, .25);
}

.social-icon--facebook:hover{
  border-color: rgba(24, 119, 242, .7);
  box-shadow:
    0 0 0 1px rgba(24, 119, 242, .2) inset,
    0 10px 24px rgba(0,0,0,.45),
    0 0 16px rgba(24, 119, 242, .25);
}
.footer-bottom{
  padding-top:30px;
  border-top:1px solid rgba(57,255,20,.1);
  text-align:center;
  font-size:14px;
  color:rgba(243,246,247,.55);
}


/* ===== ANIMACIÓN BOUNCE PARA ICONOS ===== */
@keyframes iconBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-12px) scale(1.05); }
  50% { transform: translateY(0) scale(1.08) rotate(-3deg); }
  75% { transform: translateY(-6px) scale(1.03) rotate(3deg); }
}

/* ===== ANIMACIÓN DE FLOTACIÓN SUAVE ===== */
@keyframes floatSoft {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* ===== ANIMACIÓN DE PULSO DE BRILLO ===== */
@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.55))
            drop-shadow(0 0 18px rgba(92,255,158,.18));
  }
  50% {
    filter: drop-shadow(0 16px 32px rgba(0,0,0,.65))
            drop-shadow(0 0 28px rgba(92,255,158,.35));
  }
}


  .fab-icon{
    width:38px;
    height:38px;
    font-size:20px;
  }




.fab:hover{
  transform: scale(1.12);
  box-shadow:
    0 22px 60px rgba(0,0,0,.85),
    0 0 0 16px rgba(57,255,20,.25);
}

.fab-svg{
  width: 34px;
  height: 34px;
  fill: #06240f;
}

@media(max-width:520px){
  .fab{
    width:58px;
    height:58px;
    bottom:20px;
    right:20px;
  }
  .fab-svg{
    width:28px;
    height:28px;
  }
}


/* ===== RESPONSIVE ===== */
@media(max-width: 992px){
  .hero h1{ font-size: 56px; }
  .problem-header h2, .solution-header h2, .how-header h2, .proof-header h2{ font-size: 40px; }
  .cta-box h2{ font-size: 42px; }
  .footer-content{ grid-template-columns: 1fr 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .social-proof-stats{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
  }
  .stat{ min-width: 0; }
}

@media(max-width: 768px){
  .container{ padding: 0 18px; }
  body{ padding-bottom: 96px; }
  .navbar{
    top: max(6px, calc(env(safe-area-inset-top) + 6px));
    width: calc(100% - 12px);
    padding: 8px 10px;
  }
  .navbar-inner{ padding: 0 2px; }
  .logo{ font-size: 16px; gap: 8px; }
  .logo-mark{ width:40px; height:40px; border-radius: 12px; }
  .hero{ padding: 120px 0 64px; }
  .hero h1{ font-size: 44px; }
  .hero h1 br{ display:none; }
  .hero-subtitle{ font-size: 18px; }
  .social-proof-stats{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
  }
  .stat-number{ font-size: 36px; }
  .problem-section, .solution-section, .how-section, .proof-section, .cta-section{ padding:72px 0; }
  .problem-card, .feature-card, .testimonial{ padding:24px; }
  .problem-grid, .features-grid, .testimonials{ grid-template-columns: 1fr; }
  .testimonials{ justify-items:center; }
  .testimonial{ width: min(100%, 560px); }
  .footer-content{ grid-template-columns: 1fr; }
  .cta-box{ padding: 40px 30px; }
  .cta-box h2{ font-size: 36px; }
  .cta-form{ flex-direction:column; }
  .cta-form input,
  .cta-form .phone-field,
  .cta-form button,
  .cta-form .btn{ min-width:100%; width:100%; }
}

@media(max-width: 680px){
  .nav-cta{ display:none; }
}

@media(max-width: 520px){
  .container{ padding: 0 14px; }
  body{ padding-bottom: 104px; }
  section{ scroll-margin-top: 84px; }
  .hero{
    padding: 126px 0 72px;
  }
  .hero-content{
    max-width: 100%;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .hero-badge{
    display:block;
    width:100%;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    padding: 12px 16px;
    text-wrap: balance;
  }
  .hero h1{
    font-size: 36px;
    line-height: 1.12;
    margin: 0;
    text-wrap: balance;
  }
  .hero-subtitle{
    font-size: 16px;
    line-height: 1.55;
    max-width: 33ch;
    margin: 0 auto;
  }
  .hero-actions{
    flex-direction:column;
    align-items:center;
    gap: 16px;
    width:100%;
    margin-top: 2px;
  }
  .hero-actions .btn{
    width:min(100%, 320px);
    min-height:60px;
  }
  .btn{ padding: 17px 28px; font-size: 15px; }
  .navbar{
    top: max(6px, calc(env(safe-area-inset-top) + 6px));
    width: calc(100% - 12px);
    padding: 8px 10px;
  }
  .logo{ font-size: 16px; }
  .logo-text{ max-width: 190px; }
  .nav-cta{ display:none; }
  .cta-box{
    padding: 30px 18px;
    border-radius: 22px;
  }
  .cta-box h2{ font-size: 30px; }
  .cta-box p{ font-size: 16px; }
  .footer-col img{ max-width: 180px !important; }
  .fab{ width:50px; height:50px; font-size:24px; bottom:20px; right:20px; }

  .problem-card,
  .feature-card,
  .testimonial{
    border-color: rgba(92,255,158,.26);
    box-shadow:
      0 18px 44px rgba(0,0,0,.42),
      0 0 0 1px rgba(92,255,158,.10) inset;
  }

  .problem-card p,
  .feature-card p{
    max-width: none;
  }
}

@media(max-width: 390px){
  .hero{
    padding: 108px 0 56px;
  }
  .hero h1{
    font-size: 31px;
    line-height: 1.15;
  }
  .hero-subtitle{
    font-size: 15px;
  }
  .social-proof{
    padding: 44px 0;
  }
  .social-proof-stats{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .stat-number{
    font-size: 31px;
  }
  .problem-header h2,
  .solution-header h2,
  .how-header h2,
  .proof-header h2{
    font-size: 30px;
    line-height: 1.2;
  }
  .problem-header p,
  .solution-header p,
  .how-header p,
  .proof-header p{
    font-size: 16px;
  }
  .step-number{
    width:64px;
    height:64px;
    font-size:30px;
    margin-bottom:18px;
  }
  .step h3,
  .feature-card h3{
    font-size: 20px;
  }
  .testimonial-text{
    font-size: 15px;
  }
  .cta-box h2{
    font-size: 27px;
  }
  .cta-form input,
  .cta-form button,
  .cta-form .btn{
    padding-left:18px;
    padding-right:18px;
  }
  .cta-benefits{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-inline:auto;
    width:fit-content;
  }
}

/* ===== SCROLL REVEAL ===== */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition: all 0.8s ease;
}
.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* ===== ICONOS 3D DINÁMICOS (Riesgos comunes) ===== */
.risk-icon{
  width: 100%;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  position: relative;
}

/* Resplandor detrás del icono */
.risk-icon::before{
  content:'';
  position:absolute;
  width:140px;
  height:140px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(92,255,158,.14), transparent 70%);
  animation: glowPulse 3s ease-in-out infinite;
  z-index:0;
}

.risk-icon img{
  width: 170px;
  height: 110px;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;

  filter: drop-shadow(0 14px 28px rgba(0,0,0,.55))
          drop-shadow(0 0 18px rgba(92,255,158,.18));

  transition: transform .45s cubic-bezier(0.68,-0.55,0.265,1.55),
              filter .45s ease;
  animation: floatSoft 4s ease-in-out infinite;
}

/* Delay distinto por card */
.problem-card:nth-child(1) .risk-icon img { animation-delay: 0s; }
.problem-card:nth-child(2) .risk-icon img { animation-delay: .5s; }
.problem-card:nth-child(3) .risk-icon img { animation-delay: 1s; }
.problem-card:nth-child(4) .risk-icon img { animation-delay: 1.5s; }
.problem-card:nth-child(5) .risk-icon img { animation-delay: 2s; }
.problem-card:nth-child(6) .risk-icon img { animation-delay: 2.5s; }

/* Hover pro */
.problem-card:hover .risk-icon img{
  transform: translateY(-15px) scale(1.15) rotate(5deg);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.7))
          drop-shadow(0 0 35px rgba(92,255,158,.55));
  animation: iconBounce .6s ease; /* rebote */
}

/* Hover del resplandor */
.problem-card:hover .risk-icon::before{
  transform: scale(1.25);
  background: radial-gradient(circle, rgba(92,255,158,.28), transparent 70%);
  animation: none;
}

/* Responsive */
@media (max-width: 520px){
  .problem-grid{
    gap: 20px;
  }
  .problem-card{
    padding: 28px 22px 24px;
    gap: 14px;
  }
  .problem-card h3{
    font-size: 34px;
    font-size: clamp(30px, 8.2vw, 40px);
  }
  .problem-card p{
    font-size: 15px;
    line-height: 1.58;
    max-width: 29ch;
  }
  .risk-icon{ height: 102px; }
  .risk-icon img{ width:150px; height:95px; }
}

body{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--text);
  background: radial-gradient(1100px 800px at 20% 10%, rgba(57,255,20,.15), transparent 60%),
              radial-gradient(900px 700px at 85% 55%, rgba(57,255,20,.10), transparent 62%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  line-height:1.7;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(circle at 20% 25%, rgba(57,255,20,.22) 0 2px, transparent 3px) 0 0/140px 140px,
    radial-gradient(circle at 75% 70%, rgba(57,255,20,.18) 0 1.6px, transparent 2.8px) 0 0/160px 160px;
  opacity:.32;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:-2;
}

/* ===== VISUAL POLISH OVERRIDES ===== */
::selection{
  background: rgba(92,255,158,.30);
  color: #f5fff8;
}

.problem-header h2,
.solution-header h2,
.how-header h2,
.proof-header h2,
.cta-box h2{
  color: #cffff2;
  text-shadow: 0 0 20px rgba(92,255,158,.25);
  text-wrap: balance;
}

.problem-header p,
.solution-header p,
.how-header p,
.proof-header p{
  max-width: 62ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.feature-card{
  background:
    linear-gradient(180deg, rgba(7,9,10,.72), rgba(9,12,13,.58)),
    radial-gradient(500px 260px at 50% -20%, rgba(92,255,158,.08), transparent 72%);
  backdrop-filter: blur(6px);
}

.feature-card p{
  font-size: 16px;
  line-height: 1.58;
  max-width: 31ch;
  color: rgba(243,246,247,.83);
}

.step{
  padding: 28px 22px 26px;
  border-radius: 18px;
  border: 1px solid rgba(57,255,20,.18);
  background:
    linear-gradient(180deg, rgba(7,9,10,.62), rgba(7,9,10,.45)),
    radial-gradient(420px 220px at 50% -20%, rgba(92,255,158,.10), transparent 72%);
  backdrop-filter: blur(5px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.step:hover{
  transform: translateY(-4px);
  border-color: rgba(92,255,158,.34);
  box-shadow:
    0 14px 34px rgba(0,0,0,.32),
    0 0 24px rgba(57,255,20,.12);
}

.step p{
  font-size: 16px;
  line-height: 1.58;
  max-width: 30ch;
  margin-inline: auto;
}

.testimonial{
  background:
    linear-gradient(180deg, rgba(7,9,10,.74), rgba(9,12,13,.58)),
    radial-gradient(500px 240px at 50% -20%, rgba(92,255,158,.08), transparent 72%);
  backdrop-filter: blur(6px);
}

.cta-box{
  background:
    linear-gradient(160deg, rgba(5,8,7,.78), rgba(8,12,11,.62)),
    radial-gradient(640px 280px at 50% -10%, rgba(92,255,158,.14), transparent 70%);
}

.cta-form input{
  background: rgba(0,0,0,.46);
}

.benefit::before{
  content: "\2713";
}

.footer-links a{
  transition: color 0.2s ease, opacity .2s ease;
}

@media(max-width: 768px){
  .stat{
    min-width: 0;
  }
}

@media (max-width: 520px){
  .problem-card h3{
    font-size: clamp(21px, 6vw, 26px);
  }
  .problem-card p,
  .feature-card p{
    max-width: none;
  }
}