@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap');
:root{--ink:#101010;--black:#080808;--green:#48b966;--gold:#c6a96b;--navy:#263c52;--cream:#f5f2eb;--soft:#faf9f6;--muted:#6d6d6d;--line:#e7e4dd;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"DM Sans",sans-serif;background:#fff}a{text-decoration:none;color:inherit}p{line-height:1.8}img{max-width:100%;display:block}
.topbar{background:var(--navy);color:#fff;padding:10px 5vw;font-size:12px;display:flex;justify-content:space-between}.topbar a{color:#fff}
.header{height:90px;position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border-bottom:1px solid #eee}.nav{height:100%;max-width:1380px;margin:auto;padding:0 4vw;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px}.mark{width:40px;height:40px;border-radius:50%;background:conic-gradient(#efc32b 0 25%,#6b42d5 25% 50%,#dc4140 50% 75%,#49b966 75%);position:relative;flex:0 0 auto}.mark:after{content:"";position:absolute;inset:9px;background:#fff;border-radius:50%}.brandname{font:800 25px/1 "Manrope";letter-spacing:-1.5px}.tag{display:block;font-size:7px;letter-spacing:1.8px;color:#6a6a6a;margin-top:5px;text-transform:uppercase}
.navlinks{display:flex;align-items:center;gap:27px;font-size:12px;font-weight:800;text-transform:uppercase}.navlinks>a:hover,.navlinks>a.active,.dropdown>a.active{color:var(--green)}.dropdown{position:relative}.dropdown>a:after{content:"⌄";margin-left:6px}.dropdown-menu{display:none;position:absolute;top:31px;left:-18px;width:290px;background:#141414;color:#fff;box-shadow:0 24px 50px rgba(0,0,0,.25)}.dropdown:hover .dropdown-menu{display:block}.dropdown-menu a{display:block;padding:14px 19px;border-bottom:1px solid #2e2e2e;font-weight:500;text-transform:none}.dropdown-menu a:hover{background:#242424;color:#fff}.nav-cta{padding:12px 16px;background:#111;color:#fff!important}.menu{display:none;background:none;border:0;font-size:25px}
.hero{min-height:735px;position:relative;display:flex;align-items:center;color:#fff;background:linear-gradient(90deg,rgba(5,5,5,.88),rgba(5,5,5,.45)),url("https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=2200&q=90") center/cover}.hero:before{content:"";position:absolute;width:390px;height:390px;border:1px solid rgba(255,255,255,.16);border-radius:50%;right:9%;top:16%}.hero:after{content:"";position:absolute;width:170px;height:170px;border:1px solid rgba(255,255,255,.13);border-radius:50%;right:17%;top:31%}.hero-inner{max-width:1380px;width:100%;margin:auto;padding:105px 7vw;position:relative;z-index:1}.eyebrow,.kicker{font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:800;color:var(--green)}.hero h1{font:600 clamp(55px,7.2vw,106px)/.93 "Playfair Display";letter-spacing:-3.5px;max-width:1050px;margin:18px 0 27px}.hero p{font-size:18px;max-width:690px;color:#eee}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border:1px solid #fff;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}.btn.light{background:#fff;color:#111}.btn.dark{background:#111;color:#fff;border-color:#111}.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.hero-card{position:absolute;z-index:2;right:6vw;bottom:55px;width:280px;padding:25px;background:rgba(255,255,255,.95);color:#111}.hero-card strong{font:700 35px "Manrope"}.hero-card small{display:block;color:#666;margin-top:4px}
.band{padding:27px 6vw;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}.band-inner{max-width:1250px;margin:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:10px;text-transform:uppercase;letter-spacing:1.7px;color:#555}
.section{padding:105px 6vw}.container{max-width:1250px;margin:auto}.split{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.section h2,.page-hero h1{font:600 clamp(42px,5.2vw,75px)/1.03 "Playfair Display";letter-spacing:-2px;margin:13px 0 22px}.lead{font-size:17px;color:var(--muted);max-width:800px}.image{min-height:500px;background:center/cover}.image.team{background-image:url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1400&q=90")}.image.exec{background-image:url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1400&q=90")}.image.career{background-image:url("https://images.unsplash.com/photo-1521791055366-0d553872125f?auto=format&fit=crop&w=1400&q=90")}.image.office{background-image:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1400&q=90")}
.dark{background:#0d0d0d;color:#fff}.dark .lead{color:#bbb}.dark .kicker{color:#6bd783}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:48px}.card{background:#fff;padding:36px;min-height:250px}.dark .card{background:#161616;border-color:#2b2b2b}.card h3{font:700 23px "Manrope";margin:0 0 10px}.card p{color:var(--muted);margin:0}.dark .card p{color:#aaa}.num{font-size:10px;color:var(--green);letter-spacing:2px;font-weight:800;margin-bottom:30px}
.statement{font:500 clamp(38px,4.6vw,66px)/1.13 "Playfair Display";max-width:1060px}.quote{background:var(--cream);padding:110px 6vw}.quote blockquote{font:500 clamp(37px,4.5vw,64px)/1.13 "Playfair Display";max-width:1050px;margin:0}.quote cite{display:block;margin-top:25px;color:var(--green);font-weight:800}
.page-hero{padding:130px 6vw 105px;background:var(--cream)}.page-hero h1{max-width:1000px}.page-hero p{max-width:800px;font-size:18px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ddd;border-bottom:1px solid #ddd}.stat{padding:32px 20px;border-right:1px solid #ddd}.stat:last-child{border-right:0}.stat strong{display:block;font:800 42px "Manrope"}.stat span{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#777}
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:55px;border-top:1px solid #bbb}.step{padding:28px 20px 25px;border-right:1px solid #ddd;position:relative}.step:last-child{border-right:0}.step .circle{width:46px;height:46px;border:1px solid #111;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:28px}.step h3{font:700 17px "Manrope"}.step p{font-size:13px;color:#777}.step:not(:last-child):after{content:"→";position:absolute;right:-9px;top:38px;background:#fff;padding:0 4px;font-size:16px}
.timeline{border-left:1px solid #bbb;margin-top:50px}.timeline-item{padding:0 0 45px 45px;position:relative}.timeline-item:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--green);position:absolute;left:-6px;top:5px}.timeline-item h3{font:700 20px "Manrope";margin:0 0 8px}.timeline-item p{color:#777;max-width:800px}
.list{border-top:1px solid var(--line);margin-top:45px}.listrow{display:grid;grid-template-columns:60px 1fr 30px;gap:20px;padding:27px 0;border-bottom:1px solid var(--line)}.listrow h3{margin:0;font:700 21px "Manrope"}.listrow p{color:#777;margin:6px 0 0}.listrow .num{margin:0}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:45px}.testimonial{padding:32px;background:var(--soft);border:1px solid var(--line)}.testimonial p{font:500 18px/1.65 "Playfair Display"}.testimonial strong{font-size:12px}.testimonial span{display:block;font-size:11px;color:#777;margin-top:4px}
.faq{border-top:1px solid var(--line);margin-top:45px}.faq details{border-bottom:1px solid var(--line);padding:22px 0}.faq summary{cursor:pointer;font:700 17px "Manrope"}.faq p{color:#777;max-width:850px}
.contactgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:85px}.info{border-bottom:1px solid var(--line);padding:20px 0}.info small{display:block;color:var(--green);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:2px;margin-bottom:6px}.info p{margin:0;color:#777}.form{display:grid;gap:13px}.form input,.form textarea,.form select{width:100%;padding:17px;border:1px solid #ddd;background:#fff;font:inherit}.form textarea{min-height:155px}.form button{cursor:pointer}
.footer{background:#0a0a0a;color:#fff;padding:72px 6vw 25px}.footergrid{max-width:1250px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:50px}.footer h4{font-size:11px;text-transform:uppercase;letter-spacing:1.7px}.footer a,.footer p{font-size:13px;line-height:2;color:#9f9f9f}.footer a:hover{color:#fff}.copyright{max-width:1250px;margin:45px auto 0;padding-top:18px;border-top:1px solid #292929;color:#666;font-size:10px}
@media(max-width:1000px){.navlinks{display:none}.menu{display:block}.navlinks.open{display:flex;position:absolute;top:90px;left:0;right:0;background:#fff;padding:20px 6vw;flex-direction:column;align-items:flex-start;gap:19px;box-shadow:0 20px 30px rgba(0,0,0,.08)}.split,.contactgrid{grid-template-columns:1fr;gap:45px}.grid,.testimonials{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat{border-bottom:1px solid #ddd}.process{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid #ddd}.step:not(:last-child):after{display:none}.footergrid{grid-template-columns:1fr 1fr}.hero-card{display:none}}
@media(max-width:600px){.topbar{display:none}.header{height:72px}.hero{min-height:670px}.hero h1{font-size:54px}.hero-inner{padding:90px 7vw}.section{padding:75px 6vw}.grid,.testimonials,.stats,.footergrid{grid-template-columns:1fr}.page-hero{padding:90px 6vw 75px}.image{min-height:360px}.dropdown-menu{display:none!important}}

/* Lead popup + floating enquiry */
.float-enquiry{position:fixed;right:24px;bottom:24px;z-index:200;width:58px;height:58px;border-radius:50%;border:0;background:#48b966;color:#fff;font-weight:800;box-shadow:0 15px 35px rgba(0,0,0,.22);cursor:pointer;font-size:11px;letter-spacing:.5px}
.modal{display:none;position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.72);backdrop-filter:blur(7px);align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}.modal-box{width:min(620px,100%);background:#fff;padding:42px;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.35);max-height:92vh;overflow:auto}
.modal-close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:28px;cursor:pointer;color:#555}
.modal-box h2{font:600 40px/1.05 "Playfair Display";margin:10px 0}.modal-box p{color:#777}
.modal-form{display:grid;gap:12px;margin-top:25px}.modal-form input,.modal-form textarea,.modal-form select{width:100%;padding:15px;border:1px solid #ddd;font:inherit;background:#fff}.modal-form textarea{min-height:110px}.modal-form button{border:0}
.popup-kicker{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#48b966;font-weight:800}
.zebsite-credit{margin-top:8px;font-size:10px!important;color:#777!important}.zebsite-credit a{color:#fff!important;text-decoration:underline}
@media(max-width:600px){.modal-box{padding:30px 22px}.modal-box h2{font-size:34px}.float-enquiry{right:16px;bottom:16px}}

/* ===== COSMOCRAT PREMIUM MOTION SYSTEM ===== */
:root{--ease:cubic-bezier(.22,1,.36,1)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-left.in-view{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-right.in-view{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stagger.in-view>*{opacity:1;transform:none}
.stagger.in-view>*:nth-child(2){transition-delay:.08s}.stagger.in-view>*:nth-child(3){transition-delay:.16s}
.stagger.in-view>*:nth-child(4){transition-delay:.24s}.stagger.in-view>*:nth-child(5){transition-delay:.32s}
.stagger.in-view>*:nth-child(6){transition-delay:.40s}.stagger.in-view>*:nth-child(7){transition-delay:.48s}
.stagger.in-view>*:nth-child(8){transition-delay:.56s}.stagger.in-view>*:nth-child(9){transition-delay:.64s}
.hero-inner{animation:heroIn 1.1s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}
.hero:before{animation:orbit 18s linear infinite}.hero:after{animation:orbitReverse 12s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes orbitReverse{to{transform:rotate(-360deg)}}
.hero-card{animation:floatCard 5s ease-in-out infinite}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 55px rgba(0,0,0,.11)}
.dark .card:hover{box-shadow:0 22px 55px rgba(0,0,0,.35)}
.btn{position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22),transparent 65%);transform:translateX(-120%);transition:transform .65s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.12)}.btn:hover:after{transform:translateX(120%)}
.image{transition:transform 1.1s var(--ease)}.split:hover .image{transform:scale(1.018)}
.process{position:relative}.process:before{content:"";position:absolute;left:5%;right:5%;top:23px;height:1px;background:linear-gradient(90deg,transparent,#bbb,transparent);transform-origin:left;animation:lineGrow 1.8s var(--ease) both}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.step .circle{transition:background .35s ease,color .35s ease,transform .35s var(--ease);background:#fff;position:relative;z-index:2}
.step:hover .circle{background:var(--green);color:#fff;transform:scale(1.08) rotate(4deg)}
.stat strong{font-variant-numeric:tabular-nums}
.stat{transition:background .35s ease}.stat:hover{background:#f7f7f4}
.band-inner span{transition:color .3s ease,transform .3s ease}.band-inner span:hover{color:var(--green);transform:translateY(-2px)}
.statement{opacity:.95}
.ecosystem{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:18px;align-items:center;margin-top:55px}
.eco-col{display:grid;gap:14px}.eco-node{padding:20px;border:1px solid rgba(255,255,255,.13);background:#151515;transition:transform .4s var(--ease),background .4s ease}
.eco-node:hover{transform:translateX(6px);background:#1d1d1d}.eco-center{width:180px;height:180px;border-radius:50%;margin:auto;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 35% 30%,#66d483,#2d8c49 65%,#173c24);color:#fff;font:700 23px "Manrope";box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 70px rgba(72,185,102,.18);animation:centerPulse 4s ease-in-out infinite}
@keyframes centerPulse{50%{box-shadow:0 0 0 12px rgba(72,185,102,.05),0 0 90px rgba(72,185,102,.24)}}
.matrix{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#dcdad3;margin-top:45px}.matrix-item{background:#fff;padding:35px;min-height:190px;position:relative;overflow:hidden}.matrix-item:before{content:"";position:absolute;width:130px;height:130px;border:1px solid #d9e9dd;border-radius:50%;right:-45px;bottom:-45px}.matrix-item strong{font:700 24px "Manrope";display:block}.matrix-item span{display:block;color:var(--green);font-size:10px;letter-spacing:2px;text-transform:uppercase;margin:10px 0}.matrix-item p{color:#777}
.counter{display:inline-block}
.progress-wrap{margin-top:50px}.progress-row{display:grid;grid-template-columns:180px 1fr 55px;gap:18px;align-items:center;margin:18px 0}.progress-row label{font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:800}.progress{height:4px;background:#ddd;overflow:hidden}.progress i{display:block;width:0;height:100%;background:var(--green);transition:width 1.4s var(--ease)}.progress-row.in-view .progress i{width:var(--w)}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;white-space:nowrap}.marquee-track{display:inline-flex;gap:42px;animation:marquee 28s linear infinite}.marquee span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#777}.marquee b{color:var(--green)}@keyframes marquee{to{transform:translateX(-50%)}}
.cursor-glow{position:fixed;pointer-events:none;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(72,185,102,.10),transparent 65%);transform:translate(-50%,-50%);z-index:1;opacity:0;transition:opacity .3s}
@media(max-width:800px){.ecosystem{grid-template-columns:1fr}.eco-center{order:-1}.matrix{grid-template-columns:1fr}.process:before{display:none}.progress-row{grid-template-columns:115px 1fr 42px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal,.reveal-left,.reveal-right,.stagger>*{opacity:1!important;transform:none!important}}