@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
:root{--lime:#D0F949;--forest:#305841;--ink:#0E0E0E;--paper:#F6F5F3;--carbon:#1A1A1A;--gray:#C8C8CD;--fd:'Clash Display',Arial,sans-serif;--fb:'Poppins',Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;font:400 18px/30px var(--fb);color:var(--ink);background:#fff}
img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.wrap{max-width:1296px;margin:0 auto;padding:0 24px;position:relative}
.eyebrow{font:600 16px/16px var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.h1{font:700 clamp(44px,7vw,96px)/1.08 var(--fd);text-wrap:balance}
.h2{font:700 clamp(34px,4.5vw,64px)/1.06 var(--fd);text-wrap:balance}
.h3{font:600 24px/32px var(--fd)}
.lead{font:500 20px/32px var(--fb)}
section{padding:110px 0}
.bg-paper{background:var(--paper)}
/* Nav */
nav{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 60px;position:relative;z-index:20}
nav .logo img{height:120px;display:block}
nav .links{display:flex;gap:40px;align-items:center}
nav .links a{font:600 15px/1 var(--fd);letter-spacing:.04em;position:relative;padding-bottom:6px}
nav .links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ink);transition:width .3s ease}
nav .links a:hover::after,nav .links a.on::after{width:100%}
nav .burger{display:none;width:52px;height:52px;border-radius:50%;background:var(--ink);border:none;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
nav .burger span{width:22px;height:2px;background:#fff}
/* Buttons */
.btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:22px 40px;font:600 16px/16px var(--fd);letter-spacing:.03em;text-transform:uppercase;border:none;cursor:pointer;background:var(--lime);color:var(--ink);transition:background .25s ease,color .25s ease,transform .2s ease}
.btn:hover{background:var(--ink);color:var(--lime);transform:translateY(-3px)}
.btn.dark{background:var(--ink);color:#fff}.btn.dark:hover{background:var(--lime);color:var(--ink)}
.btn.light{background:#fff;color:var(--ink)}
.linkbtn{display:inline-flex;flex-direction:column;font:600 16px/16px var(--fd);letter-spacing:.03em;text-transform:uppercase;width:fit-content}
.linkbtn i{display:inline-flex;gap:8px;align-items:center;font-style:normal}
.linkbtn svg{transition:transform .25s ease}
.linkbtn u{text-decoration:none;height:1.4px;margin-top:9px;background:currentColor;width:calc(100% - 30px);transition:width .25s ease;display:block}
.linkbtn:hover svg{transform:translate(3px,-3px)}.linkbtn:hover u{width:100%}
/* Hero */
.hero{background:var(--lime);overflow:hidden}
.hero .wrap{padding-top:70px;padding-bottom:90px;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
/* Cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--paper);padding:40px 36px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-6px)}
.card .ico{width:64px;height:64px;background:var(--lime);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:16px;transition:transform .3s ease}
.card:hover .ico{transform:rotate(-6deg) scale(1.06)}
.card p{flex:1}
/* Checklist */
.check li{list-style:none;display:flex;gap:12px;align-items:center;margin-bottom:14px;font:400 18px/28px var(--fb)}
.check li::before{content:"✓";flex:0 0 24px;height:24px;border-radius:50%;background:var(--lime);display:inline-flex;align-items:center;justify-content:center;font:700 13px/1 var(--fb)}
.check{padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
/* Trust logos */
.trust{display:flex;gap:48px;justify-content:center;flex-wrap:wrap;margin-top:44px;align-items:center}
.trust img{width:129px;height:45px;object-fit:contain;opacity:.7}
/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stats .st{background:var(--lime);padding:52px 20px}
.stats b{font:700 60px/1 var(--fd);display:block}
.stats span{font:400 17px/26px var(--fb)}
/* Skill bars */
.bar{margin-bottom:26px}
.bar .t{display:flex;justify-content:space-between;font:600 17px/1 var(--fd);margin-bottom:12px}
.bar .track{height:8px;background:rgba(14,14,14,.12)}
.bar .fill{height:100%;background:var(--forest);width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
/* Marquee */
.marq{background:var(--ink);padding:32px 0;overflow:hidden;transform:rotate(-1.2deg) scale(1.03)}
.marq .in{display:flex;width:max-content;animation:mq 26s linear infinite}
.marq b{font:600 22px/1 var(--fd);color:#fff;letter-spacing:.06em;white-space:nowrap;margin:0 28px;text-transform:uppercase}
.marq svg{flex-shrink:0;align-self:center}
@keyframes mq{to{transform:translateX(-50%)}}
/* Accordion */
.acc{box-shadow:inset 0 0 0 2px rgba(14,14,14,.2);margin-bottom:20px;background:transparent;transition:background .25s ease}
.acc.open{background:#fff}
.acc button{all:unset;display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:26px 30px;cursor:pointer;font:600 21px/26px var(--fd);box-sizing:border-box}
.acc .sign{flex:0 0 24px;font:400 30px/1 var(--fb);transition:transform .25s ease}
.acc.open .sign{transform:rotate(45deg)}
.acc .body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc .body p{padding:0 30px 26px;font:400 17px/28px var(--fb)}
/* Team */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.team .tm{text-align:center}
.team .ph{aspect-ratio:3/3.7;overflow:hidden}
.team img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1);transition:transform .45s ease}
.team .tm:hover img{transform:scale(1.05)}
.team b{font:600 21px/1 var(--fd);display:block;margin-top:20px}
.team span{font:500 15px/1 var(--fd);color:var(--forest);display:block;margin-top:8px}
/* Page header */
.phead{background:var(--lime);overflow:hidden}
.phead .wrap{padding:60px 24px 100px;max-width:900px;text-align:center}
/* CTA + Footer */
.cta{background:var(--carbon);color:#fff;padding:110px 0 60px}
.cta .top{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start}
.cta .h2{color:#fff}
.cta p{color:var(--gray)}
footer .menu{display:flex;gap:36px;flex-wrap:wrap}
footer .menu a{font:600 15px/1 var(--fd);color:#fff;transition:color .25s ease}
footer .menu a:hover{color:var(--lime)}
footer hr{border:none;border-top:1px solid rgba(200,200,205,.4);margin:28px 0}
footer .low{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--paper);font:400 16px/1.6 var(--fb)}
.soc{display:flex;gap:10px}
.soc a{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--gray);display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:background .25s ease,color .25s ease}
.soc a:hover,.soc a.hl{background:var(--lime);color:var(--ink)}
/* Reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}
/* Carousel */
.carousel{position:relative;aspect-ratio:768/593;overflow:hidden}
.carousel .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.carousel .slide.active{opacity:1}
.carousel .slide img{width:100%;height:100%;object-fit:cover}
.carousel-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.carousel-dots .dot{width:8px;height:8px;border-radius:50%;background:rgba(14,14,14,.25);border:none;cursor:pointer;padding:0;transition:background .25s ease}
.carousel-dots .dot.active{background:var(--forest)}
/* WhatsApp float */
.wa{position:fixed;right:26px;bottom:26px;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:50;transition:transform .25s ease}
.wa:hover{transform:scale(1.1)}
@media(max-width:980px){
nav{padding:0 24px}nav .links{display:none}nav .burger{display:flex}
nav .links.openm{display:flex;position:absolute;top:96px;left:0;right:0;background:var(--lime);flex-direction:column;padding:24px;z-index:40}
.hero .wrap,.grid3,.grid2,.stats,.cta .top,.check,.trust{grid-template-columns:1fr}
.team{grid-template-columns:repeat(2,1fr)}
section{padding:70px 0}
}
