@import url('fonts.css');

:root {
  --bg-primary:#f5faf6;
  --bg-section:#ffffff;
  --bg-section2:#f5faf6;
  --text-primary:#0d1f12;
  --text-secondary:#1a3322;
  --text-muted:rgba(13,31,18,.55);
  --text-faint:rgba(13,31,18,.35);
  --border:rgba(13,31,18,.07);
  --border-green:rgba(13,127,63,.2);
  --border-gold:rgba(201,151,26,.25);
  --card-bg:#ffffff;
  --card-shadow:0 2px 16px rgba(13,31,18,.05);
  --glass-bg:rgba(255,255,255,.7);
  --glass-green:rgba(53,187,110,.06);
  --glass-green-b:rgba(53,187,110,.18);
  --stat-bg:#ffffff;
  --stat-sep:rgba(13,127,63,.12);
  --stat-mini-bg:#f0faf3;
  --nav-scrolled:rgba(245,250,246,.94);
  --nav-shadow:0 1px 0 rgba(13,127,63,.12),0 4px 24px rgba(13,31,18,.06);
  --input-bg:#f8fcf9;
  --input-border:rgba(13,31,18,.1);
  --marquee-text:rgba(13,31,18,.3);
  --hero-bg:linear-gradient(160deg,#f0faf3 0%,#e8f5ee 40%,#f5faf6 100%);
  --hero-radial:rgba(53,187,110,.14);
  --orb1:rgba(53,187,110,.12);
  --orb2:rgba(201,151,26,.08);
  --grid-stroke:#0d7f3f;
  --scroll-bar:#f0faf3;
  --scroll-thumb:rgba(13,127,63,.3);
  --cursor-color:#0d7f3f;
  --cursor-ring:rgba(13,127,63,.4);
  --cursor-mode:multiply;
  --mobile-menu:#ffffff;
  --quote-color:rgba(13,127,63,.1);
  --big-bg-text:rgba(13,31,18,.025);
  --footer-bg:#0d1f12;
  --footer-border:rgba(53,187,110,.12);
  --glow-green:0 0 40px rgba(13,127,63,.18),0 0 80px rgba(13,127,63,.07);
  --tag-bg:rgba(13,127,63,.08);
  --tag-border:rgba(13,127,63,.2);
  --tag-color:#0a6433;
  --wa-btn-shadow:0 4px 20px rgba(37,211,102,.35);
  --process-num:#b0e8c5;
}

[data-theme="dark"] {
  --bg-primary:#06120a;
  --bg-section:#06120a;
  --bg-section2:#0a1c10;
  --text-primary:#e8f5ee;
  --text-secondary:#c8e8d0;
  --text-muted:rgba(232,245,238,.6);
  --text-faint:rgba(232,245,238,.4);
  --border:rgba(255,255,255,.07);
  --border-green:rgba(53,187,110,.2);
  --border-gold:rgba(248,200,50,.2);
  --card-bg:rgba(255,255,255,.04);
  --card-shadow:none;
  --glass-bg:rgba(255,255,255,.04);
  --glass-green:rgba(53,187,110,.06);
  --glass-green-b:rgba(53,187,110,.15);
  --stat-bg:transparent;
  --stat-sep:rgba(255,255,255,.06);
  --stat-mini-bg:rgba(255,255,255,.05);
  --nav-scrolled:rgba(6,18,10,.92);
  --nav-shadow:0 1px 0 rgba(53,187,110,.12),0 4px 24px rgba(0,0,0,.3);
  --input-bg:rgba(255,255,255,.04);
  --input-border:rgba(255,255,255,.1);
  --marquee-text:rgba(255,255,255,.25);
  --hero-bg:#06120a;
  --hero-radial:rgba(53,187,110,.15);
  --orb1:rgba(53,187,110,.12);
  --orb2:rgba(248,200,50,.08);
  --grid-stroke:#35bb6e;
  --scroll-bar:#06120a;
  --scroll-thumb:rgba(53,187,110,.4);
  --cursor-color:#35bb6e;
  --cursor-ring:rgba(53,187,110,.5);
  --cursor-mode:difference;
  --mobile-menu:rgba(6,18,10,.97);
  --quote-color:rgba(53,187,110,.12);
  --big-bg-text:rgba(255,255,255,.015);
  --footer-bg:#031207;
  --footer-border:rgba(53,187,110,.1);
  --glow-green:0 0 40px rgba(53,187,110,.25),0 0 80px rgba(53,187,110,.1);
  --tag-bg:rgba(53,187,110,.1);
  --tag-border:rgba(53,187,110,.25);
  --tag-color:#74d49d;
  --wa-btn-shadow:0 4px 24px rgba(37,211,102,.4);
  --process-num:#0a6433;
}

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

html{
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body{
  font-family:'Google Sans',sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  overflow-x:hidden;
  cursor:none;
  transition:background .4s,color .4s;
}

.font-sans2{
  font-family:'Google Sans',sans-serif!important;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:.25;
  pointer-events:none;
  z-index:0;
}

#cursor{
  position:fixed;
  width:10px;
  height:10px;
  background:var(--cursor-color);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform .1s;
  mix-blend-mode:var(--cursor-mode);
}

#cursor-ring{
  position:fixed;
  width:36px;
  height:36px;
  border:1.5px solid var(--cursor-ring);
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  transform:translate(-50%,-50%);
  transition:all .18s ease;
}

body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring{
  width:52px;
  height:52px;
  border-color:var(--cursor-color);
}

#navbar{
  transition:all .4s cubic-bezier(.16,1,.3,1);
}

#navbar.scrolled{
  background:var(--nav-scrolled)!important;
  backdrop-filter:blur(20px);
  box-shadow:var(--nav-shadow);
}

.nav-logo-text{
  color:var(--text-primary);
}

.nav-link-item{
  color:var(--text-muted);
}

.nav-link-item:hover{
  color:var(--text-primary);
}

.nav-link{
  position:relative;
}

.nav-link::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  right:0;
  height:1.5px;
  background:#0d7f3f;
  transform:scaleX(0);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"] .nav-link::after{
  background:#35bb6e;
}

.nav-link:hover::after,
.nav-link.active::after{
  transform:scaleX(1);
}

#mobile-menu{
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  background:var(--mobile-menu)!important;
  border-left:1px solid var(--border);
}

#mobile-menu.open{
  transform:translateX(0);
}

.mobile-link{
  color:var(--text-primary);
}

.mobile-link:hover{
  color:#35bb6e;
}

#theme-toggle{
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--glass-bg);
  border:1px solid var(--border-green);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .3s;
  color:var(--text-primary);
}

#theme-toggle:hover{
  background:var(--glass-green);
}

.icon-sun,
.icon-moon{
  width:18px;
  height:18px;
}

[data-theme="dark"] .icon-sun{
  display:none;
}

[data-theme="light"] .icon-moon,
:root:not([data-theme]) .icon-moon{
  display:none;
}

.section-white{
  background:var(--bg-section);
}

.section-tinted{
  background:var(--bg-section2);
}

.section-dark-always{
  background:var(--footer-bg)!important;
}

.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  box-shadow:var(--card-shadow);
  transition:all .4s cubic-bezier(.16,1,.3,1);
}

.card:hover{
  transform:translateY(-6px);
  border-color:var(--border-green)!important;
  box-shadow:0 16px 48px rgba(13,31,18,.1)!important;
}

[data-theme="dark"] .card:hover{
  box-shadow:0 16px 48px rgba(0,0,0,.3)!important;
}

.card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(13,127,63,.06),transparent);
  opacity:0;
  transition:opacity .4s;
}

[data-theme="dark"] .card::after{
  background:linear-gradient(135deg,rgba(53,187,110,.08),transparent);
}

.card:hover::after{
  opacity:1;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--tag-bg);
  border:1px solid var(--tag-border);
  color:var(--tag-color);
  border-radius:100px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 12px;
}

.text-gradient{
  background:linear-gradient(135deg,#35bb6e 0%,#f8c832 60%,#35bb6e 100%);
  background-size:200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradShift 4s ease infinite;
}

[data-theme="light"] .text-gradient,
:root:not([data-theme]) .text-gradient{
  background:linear-gradient(135deg,#0d7f3f 0%,#189f52 40%,#c9971a 80%,#0d7f3f 100%);
  background-size:200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--border-green);
}

.glass-green{
  background:var(--glass-green);
  border:1px solid var(--glass-green-b);
}

.glow-green{
  box-shadow:var(--glow-green);
}

.form-field{
  background:var(--input-bg);
  border:1.5px solid var(--input-border);
  color:var(--text-primary);
  transition:all .3s;
  width:100%;
  border-radius:12px;
  padding:11px 16px;
  font-size:14px;
  font-family:inherit;
}

.form-field:focus{
  outline:none;
  border-color:rgba(13,127,63,.5);
  background:var(--card-bg);
  box-shadow:0 0 0 3px rgba(13,127,63,.1);
}

[data-theme="dark"] .form-field:focus{
  border-color:rgba(53,187,110,.6);
  background:rgba(53,187,110,.06);
}

.form-field::placeholder{
  color:var(--text-faint);
}

.form-field option{
  background:var(--card-bg);
  color:var(--text-primary);
}

.btn-primary{
  background:linear-gradient(135deg,#35bb6e,#0a6433);
  color:white;
  position:relative;
  overflow:hidden;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}

.btn-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.18);
  transform:translateX(-110%) skewX(-15deg);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}

.btn-primary:hover::before{
  transform:translateX(110%) skewX(-15deg);
}

.btn-primary:hover{
  transform:translateY(-2px);
}

.btn-outline{
  background:var(--glass-green);
  border:1.5px solid var(--border-green);
  color:var(--text-primary);
  position:relative;
  overflow:hidden;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}

.btn-outline:hover{
  transform:translateY(-2px);
  border-color:#35bb6e;
}

.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}

.reveal.left{
  transform:translateX(-40px);
}

.reveal.right{
  transform:translateX(40px);
}

.reveal.scale{
  transform:scale(.94);
}

.reveal.visible{
  opacity:1;
  transform:none;
}

.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}
.reveal-delay-5{transition-delay:.5s}

.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 28s linear infinite;
}

.marquee-track:hover{
  animation-play-state:paused;
}

.marquee-text-col{
  color:var(--marquee-text);
}

.marquee-band{
  border-top:1px solid var(--border-green);
  border-bottom:1px solid var(--border-green);
  background:var(--glass-green);
}

.player-card{
  transition:all .4s cubic-bezier(.16,1,.3,1);
}

.player-card:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 20px 60px rgba(13,31,18,.14);
}

[data-theme="dark"] .player-card:hover{
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}

.player-card .overlay{
  transition:opacity .4s;
}

.player-card:hover .overlay{
  opacity:1!important;
}

.player-card img{
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}

.player-card:hover img{
  transform:scale(1.07);
}

.icon-wrap{
  transition:all .4s cubic-bezier(.16,1,.3,1);
}

.card:hover .icon-wrap,
.service-card:hover .icon-wrap{
  transform:scale(1.1) rotate(-5deg);
}

.service-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  box-shadow:var(--card-shadow);
  transition:all .4s cubic-bezier(.16,1,.3,1);
  position:relative;
  overflow:hidden;
}

.service-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--glass-green),transparent);
  opacity:0;
  transition:opacity .4s;
}

.service-card:hover{
  transform:translateY(-6px);
  border-color:var(--border-green)!important;
  box-shadow:0 16px 48px rgba(13,31,18,.1)!important;
}

[data-theme="dark"] .service-card:hover{
  box-shadow:0 16px 48px rgba(0,0,0,.3)!important;
}

.service-card:hover::after{
  opacity:1;
}

.quote-mark{
  font-family:'Bebas Neue';
  font-size:7rem;
  line-height:.6;
  color:var(--quote-color);
}

.hero-num{
  font-family:'Bebas Neue';
  font-size:clamp(5rem,14vw,10rem);
  line-height:.9;
  color:transparent;
  -webkit-text-stroke:1px var(--border-green);
  position:absolute;
  user-select:none;
}

.process-num{
  color:var(--process-num);
}

.stat-box{
  background:var(--stat-bg);
}

.stat-mini{
  background:var(--stat-mini-bg);
}

.stat-sep-grid{
  background:var(--stat-sep);
}

.info-item{
  background:var(--card-bg);
  border:1px solid var(--border);
  box-shadow:var(--card-shadow);
}

.step-dot-active{
  background:#35bb6e;
}

.step-dot-inactive{
  background:var(--border-green);
}

.step-label-active{
  color:#35bb6e;
}

.step-label-inactive{
  color:var(--text-muted);
}

.step-line-fill{
  background:linear-gradient(90deg,rgba(13,127,63,.5),rgba(13,127,63,.1));
}

[data-theme="dark"] .step-line-fill{
  background:linear-gradient(90deg,rgba(53,187,110,.5),rgba(53,187,110,.1));
}

#wa-float{
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:999;
  width:58px;
  height:58px;
  background:#25d366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:var(--wa-btn-shadow);
  transition:all .3s cubic-bezier(.16,1,.3,1);
  animation:waPulse 3s ease-in-out infinite;
}

#wa-float:hover{
  transform:scale(1.12) translateY(-3px);
  box-shadow:0 8px 32px rgba(37,211,102,.55);
}

#wa-float svg{
  width:30px;
  height:30px;
  fill:white;
}

#wa-tooltip{
  position:absolute;
  right:68px;
  top:50%;
  transform:translateY(-50%);
  background:var(--footer-bg);
  color:white;
  font-size:12px;
  font-weight:600;
  padding:6px 12px;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s;
  font-family:'Google Sans',sans-serif;
}

#wa-tooltip::after{
  content:'';
  position:absolute;
  top:50%;
  right:-5px;
  transform:translateY(-50%);
  border:5px solid transparent;
  border-left-color:var(--footer-bg);
  border-right:none;
}

#wa-float:hover #wa-tooltip{
  opacity:1;
}

::-webkit-scrollbar{
  width:4px;
}

::-webkit-scrollbar-track{
  background:var(--scroll-bar);
}

::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:2px;
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

@keyframes slideUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:none}
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

@keyframes ping2{
  0%{transform:scale(1);opacity:.8}
  100%{transform:scale(2.5);opacity:0}
}

@keyframes gradShift{
  0%,100%{background-position:0%}
  50%{background-position:100%}
}

@keyframes scrollDrop{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(200%)}
}

@keyframes lineGrow{
  from{width:0}
  to{width:100%}
}

@keyframes waPulse{
  0%,100%{
    box-shadow:0 4px 20px rgba(37,211,102,.35),0 0 0 0 rgba(37,211,102,.25);
  }
  50%{
    box-shadow:0 4px 20px rgba(37,211,102,.35),0 0 0 10px rgba(37,211,102,0);
  }
}

@media(max-width:768px){
  body{cursor:auto}

  #cursor,
  #cursor-ring{
    display:none;
  }

  .hero-num{
    display:none;
  }

  #wa-float{
    width:50px;
    height:50px;
    bottom:20px;
    right:20px;
  }

  #wa-float svg{
    width:26px;
    height:26px;
  }
}