/* Waboxa — custom layer on top of Tailwind CDN utilities */

:root{
  --wb-primary:#10D29A;
  --wb-primary-dark:#00B27A;
  --wb-navy:#0A2239;
  --wb-deep:#0F172A;
  --wb-bg:#F8FAFC;
  --wb-border:#E2E8F0;
  --wb-success:#16A34A;
  --wb-warning:#F59E0B;
  --wb-error:#DC2626;
}

html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif; background:#fff; color:var(--wb-deep);}
.font-display{font-family:'Space Grotesk','Inter',sans-serif;}
.font-mono{font-family:'JetBrains Mono',monospace;}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  *{animation:none !important;}
}

/* ---------- count-up numbers ---------- */
.count-up{font-variant-numeric:tabular-nums;}

/* ---------- trusted brands marquee ---------- */
.marquee-track{display:flex; width:max-content; animation:wb-scroll 32s linear infinite;}
.marquee-track:hover{animation-play-state:paused;}
@keyframes wb-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- floating cards on hero ---------- */
.float-card{animation:wb-float 6s ease-in-out infinite;}
.float-card-slow{animation:wb-float 8s ease-in-out infinite;}
@keyframes wb-float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}

/* ---------- glow behind hero mockup ---------- */
.wb-glow{background:radial-gradient(circle at 50% 40%, rgba(16,210,154,.35), transparent 60%); filter:blur(40px);}

/* ---------- phone / whatsapp demo mockup ---------- */
.phone-shell{
  background:var(--wb-deep);
  border-radius:44px;
  box-shadow:0 30px 60px -20px rgba(10,34,57,.45), 0 0 0 10px rgba(15,23,42,.05);
}
.phone-screen{background:#E9EDF2; border-radius:34px;}
.wa-bubble-in{background:#fff; border-radius:14px 14px 14px 2px;}
.wa-bubble-out{background:#DCF8E9; border-radius:14px 14px 2px 14px;}
.wa-ticks{color:#10D29A;}

.typing-dot{width:6px;height:6px;border-radius:999px;background:#94A3B8; display:inline-block; margin:0 1px; animation:wb-typing 1.2s infinite;}
.typing-dot:nth-child(2){animation-delay:.15s;}
.typing-dot:nth-child(3){animation-delay:.3s;}
@keyframes wb-typing{0%,60%,100%{transform:translateY(0); opacity:.4;} 30%{transform:translateY(-4px); opacity:1;}}

/* ---------- card hover lift + glow ---------- */
.wb-card{transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;}
.wb-card:hover{transform:translateY(-6px); box-shadow:0 20px 45px -18px rgba(10,34,57,.25); border-color:rgba(16,210,154,.4);}

/* ---------- button ripple ---------- */
.wb-btn{position:relative; overflow:hidden;}
.wb-btn:active::after{content:''; position:absolute; inset:0; background:rgba(255,255,255,.25); animation:wb-ripple .5s ease-out;}
@keyframes wb-ripple{from{opacity:1;} to{opacity:0;}}

/* ---------- accordion (FAQ) ---------- */
.faq-item[open] .faq-icon{transform:rotate(45deg);}
.faq-icon{transition:transform .3s ease;}
.faq-item summary::-webkit-details-marker{display:none;}

/* ---------- brand logos ---------- */
.wb-logo{display:block; height:auto; max-width:100%;}
.wb-logo--horizontal{height:2.25rem; width:auto;}
.wb-logo--horizontal-sm{height:1.75rem;}
.wb-logo--square{height:5.5rem; width:auto;}
.wb-logo--light{filter:brightness(0) invert(1); opacity:.95;}
@media (max-width:640px){
  .wb-logo--horizontal{height:1.85rem;}
  .wb-logo--square{height:4.5rem;}
}

/* ---------- hero ---------- */
.hero-section .phone-shell{box-shadow:0 40px 80px -24px rgba(10,34,57,.35);}

/* ---------- auth split layout ---------- */
.auth-page{overflow-x:hidden;}
.auth-split{min-height:100vh; min-height:100dvh;}
.auth-split__brand .wb-logo--horizontal{height:2.35rem;}
.auth-split__form{box-shadow:-1px 0 0 var(--wb-border);}
.auth-stats-card{box-shadow:0 20px 50px -24px rgba(0,0,0,.35);}

/* ---------- swiper overrides ---------- */
.testimonial-swiper .swiper-slide,
.related-blog-swiper .swiper-slide{height:auto;}
.swiper-pagination-bullet{background:var(--wb-border); opacity:1;}
.swiper-pagination-bullet-active{background:var(--wb-primary-dark);}

/* ---------- sticky navbar state ---------- */
#navbar{transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;}
#navbar.wb-scrolled{background:rgba(255,255,255,.9); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--wb-border);}

/* ---------- back to top ---------- */
#backToTop{transition:opacity .3s ease, transform .3s ease;}

/* ---------- compact page hero ---------- */
.page-hero{min-height:0;}

/* ---------- illustration wrappers ---------- */
.illus-wrap{position:relative;}
.illus-wrap::before{content:''; position:absolute; inset:10%; background:radial-gradient(circle, rgba(16,210,154,.15), transparent 70%); filter:blur(20px); z-index:0;}
.illus-wrap img{position:relative; z-index:1;}

/* ---------- page section alt bg ---------- */
.wb-section-alt{background:linear-gradient(180deg, #fff 0%, var(--wb-bg) 100%);}

/* ---------- contact info cards ---------- */
.contact-card{background:#fff; border:1px solid var(--wb-border); border-radius:20px; padding:1.5rem; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.contact-card:hover{transform:translateY(-4px); box-shadow:0 16px 40px -16px rgba(10,34,57,.2); border-color:rgba(16,210,154,.35);}
.contact-card-icon{width:44px; height:44px; border-radius:14px; background:rgba(16,210,154,.12); display:flex; align-items:center; justify-content:center; color:var(--wb-primary-dark); margin-bottom:1rem;}

/* ---------- feature section with illustration ---------- */
.feature-split-illus{background:linear-gradient(145deg, #F0FDF9 0%, #F8FAFC 50%, #fff 100%); border:1px solid var(--wb-border); border-radius:20px; padding:1.25rem; overflow:hidden;}
.feature-split-illus img{width:100%; height:auto; display:block; border-radius:12px;}

/* ---------- blog card illustration ---------- */
.blog-card .h-40{background:linear-gradient(145deg,#F0FDF9,#F8FAFC);}

/* ---------- line clamp ---------- */
.line-clamp-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* ---------- comparison table ---------- */
.cmp-table td, .cmp-table th{border-bottom:1px solid var(--wb-border);}
.cmp-check{color:var(--wb-success);}
.cmp-cross{color:#CBD5E1;}