:root{--bg:#050810;--fg:#e8e8e8;--card:#0a0f1a;--primary:#10b981;--secondary:#06b6d4;--accent:#8b5cf6;--muted:#64748b;--border:rgba(255,255,255,0.06);--sans:'Poppins',sans-serif;--mono:'JetBrains Mono',monospace}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden!important;position:fixed!important;width:100%!important}
body::after{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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:0.015;pointer-events:none;z-index:9999}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary),var(--secondary));border-radius:3px}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 1.5rem}
@media(min-width:480px){.container{padding:0 1.5rem}}
@media(min-width:768px){.container{padding:0 2rem}}
h1,h2,h3,h4,h5,h6{line-height:1.15}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
.gt{background:linear-gradient(135deg,#10b981,#06b6d4,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.875rem;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.15);border-radius:999px;font-size:0.7rem;font-weight:500;color:#10b981;white-space:nowrap}
.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.875rem 1.5rem;background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;font-weight:600;font-size:0.875rem;font-family:inherit;border-radius:0.75rem;border:none;cursor:pointer;transition:all .3s;box-shadow:0 10px 30px rgba(16,185,129,0.25);min-height:48px}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(16,185,129,0.35)}
.btn-g{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.875rem 1.25rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);color:#fff;font-weight:500;font-size:0.875rem;font-family:inherit;border-radius:0.75rem;cursor:pointer;transition:all .3s;min-height:48px}
.btn-g:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2)}
.glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none}

/* ==================== PREMIUM NAVBAR ==================== */
.navbar{
position:fixed;
top:0;
left:0;
right:0;
z-index:100;
height:72px;
display:flex;
align-items:center;
padding:0 1.5rem;
transition:transform .4s cubic-bezier(.4,0,.2,1),background .3s ease,border-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
background:transparent;
border-bottom:1px solid transparent;
}
.navbar.visible{
background:rgba(5,8,16,0.85);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-bottom:1px solid rgba(255,255,255,0.08);
box-shadow:0 4px 30px rgba(0,0,0,0.4),0 0 1px rgba(255,255,255,0.1);
}
.navbar.hidden{
transform:translateY(-100%);
}
.navbar-inner{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
max-width:1280px;
margin:0 auto;
}
.logo{
display:flex;
align-items:center;
z-index:101;
background:transparent;
flex-shrink:0;
}

.logo-icon{
width:7rem;
height:7rem;
background:transparent;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
transition:all .3s ease;
}

.logo-icon img{
width:100%;
height:100%;
object-fit:contain;
display:block;
filter:drop-shadow(0 0 8px rgba(16,185,129,0.2));
}
.logo:hover .logo-icon img{
filter:drop-shadow(0 0 12px rgba(16,185,129,0.3));
}

@media(min-width:480px){
.logo-text{display:block}
}

.nav-links{display:none;align-items:center;gap:1.75rem}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-link{font-size:0.8125rem;font-weight:500;color:rgba(255,255,255,0.7);transition:color .3s;white-space:nowrap}
.nav-link:hover{color:#10b981}

.ham{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:5px;
width:44px;
height:44px;
padding:10px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.06);
border-radius:0.75rem;
cursor:pointer;
z-index:101;
-webkit-tap-highlight-color:transparent;
transition:all .3s ease;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
@media(min-width:1024px){.ham{display:none}}
.ham:hover{
background:rgba(255,255,255,0.06);
border-color:rgba(255,255,255,0.12);
}
.ham span{
display:block;
width:20px;
height:2.5px;
background:linear-gradient(90deg,#fff,rgba(255,255,255,0.7));
border-radius:2px;
transition:all .35s cubic-bezier(.4,0,.2,1);
transform-origin:center;
}
.ham.on{
background:rgba(16,185,129,0.1);
border-color:rgba(16,185,129,0.3);
}
.ham.on span{
background:#10b981;
}
.ham.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.ham.on span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.sd-menu{
position:fixed;
top:72px;
left:0;
right:0;
bottom:0;
z-index:99;
background:rgba(10,15,26,0.98);
backdrop-filter:blur(40px);
-webkit-backdrop-filter:blur(40px);
transform:translateY(-100%);
transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .3s ease;
opacity:0;
pointer-events:none;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
border-top:1px solid rgba(255,255,255,0.06);
}
.sd-menu.on{transform:translateY(0);opacity:1;pointer-events:all}
@media(min-width:1024px){.sd-menu{display:none}}
.sd-menu-inner{padding:1.5rem 0 1.25rem}
@media(min-width:480px){.sd-menu-inner{padding:2rem 0 1.5rem}}
.sd-link{
display:flex;
align-items:center;
gap:1rem;
padding:1rem 1.5rem;
font-size:0.9375rem;
font-weight:500;
color:rgba(255,255,255,0.65);
transition:all .3s;
position:relative;
border-radius:0.75rem;
margin:0 0.5rem;
}
.sd-link::after{display:none}
.sd-link:hover,.sd-link.act{
color:#fff;
background:rgba(16,185,129,0.08);
}
.sd-ico{
width:20px;
height:20px;
opacity:0.5;
flex-shrink:0;
transition:opacity .3s;
}
.sd-link:hover .sd-ico,.sd-link.act .sd-ico{opacity:1}
.sd-divider{display:none}
.sd-footer{padding:1.5rem 1.5rem 2rem}
.sd-cta{width:100%;margin-bottom:1.25rem}
.sd-soc{display:flex;gap:0.75rem;justify-content:center;padding-top:1rem}
.sd-soc a{
width:2.75rem;
height:2.75rem;
border-radius:0.75rem;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.06);
display:flex;
align-items:center;
justify-content:center;
color:#64748b;
transition:all .3s;
}
.sd-soc a:hover{background:#10b981;color:#fff;border-color:#10b981;transform:translateY(-2px)}

/* ==================== PREMIUM HERO SECTION ==================== */
#hero{
position:relative;
padding:96px 0 0;
overflow:hidden;
min-height:100vh;
display:flex;
align-items:flex-start;
}
@media(min-width:1024px){
#hero{
align-items:center;
padding-top:0;
}
}
#heroC{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:none}
@media(min-width:1024px){#heroC{display:block}}

.hero-mob-bg{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
inset:0;
z-index:0;
overflow:hidden;
background:radial-gradient(ellipse at 50% 0%,rgba(16,185,129,0.08) 0%,transparent 50%),
           radial-gradient(ellipse at 80% 50%,rgba(6,182,212,0.05) 0%,transparent 40%),
           radial-gradient(ellipse at 20% 80%,rgba(139,92,246,0.04) 0%,transparent 40%);
}
@media(min-width:1024px){.hero-mob-bg{display:none}}
.hero-mob-bg .mob-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.6}
.mob-orb-1{
width:250px;
height:250px;
background:radial-gradient(circle,rgba(16,185,129,0.2) 0%,transparent 70%);
top:-80px;
right:-80px;
animation:mo1 10s ease-in-out infinite alternate;
}
.mob-orb-2{
width:200px;
height:200px;
background:radial-gradient(circle,rgba(6,182,212,0.15) 0%,transparent 70%);
bottom:20%;
left:-60px;
animation:mo2 12s ease-in-out infinite alternate;
}
.mob-orb-3{
width:150px;
height:150px;
background:radial-gradient(circle,rgba(139,92,246,0.1) 0%,transparent 70%);
bottom:-40px;
right:20%;
animation:mo3 8s ease-in-out infinite alternate;
}
@keyframes mo1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-40px,60px) scale(1.3)}}
@keyframes mo2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(50px,-40px) scale(1.2)}}
@keyframes mo3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30px,-50px) scale(1.15)}}

.hero-mob-terminal{
display:block;
position:relative;
z-index:5;
margin:2rem auto 0;
max-width:360px;
width:100%;
background:linear-gradient(145deg,rgba(10,15,26,0.95),rgba(8,12,20,0.98));
border:1px solid rgba(255,255,255,0.08);
border-radius:1.25rem;
overflow:hidden;
box-shadow:0 25px 60px rgba(0,0,0,0.6),
           0 0 0 1px rgba(255,255,255,0.02),
           inset 0 1px 0 rgba(255,255,255,0.05);
}
@media(min-width:480px){.hero-mob-terminal{max-width:400px}}
@media(min-width:1024px){.hero-mob-terminal{display:none}}
.hmt-bar{
display:flex;
align-items:center;
gap:0.5rem;
padding:0.875rem 1rem;
background:rgba(255,255,255,0.03);
border-bottom:1px solid rgba(255,255,255,0.06);
}
.hmt-dot{width:10px;height:10px;border-radius:50%}
.hmt-dot-r{background:#ef4444}.hmt-dot-y{background:#f59e0b}.hmt-dot-g{background:#10b981}
.hmt-title{margin-left:0.75rem;font-size:0.625rem;color:#475569;font-weight:500}
.hmt-body{
padding:1rem 1.125rem;
font-family:var(--mono);
font-size:0.6rem;
line-height:1.8;
color:#94a3b8;
min-height:180px;
}
@media(min-width:480px){.hmt-body{font-size:0.625rem;padding:1.125rem}}
.hmt-cursor{display:inline-block;width:7px;height:14px;background:#10b981;vertical-align:middle;margin-left:2px;animation:blink 1s step-end infinite;border-radius:1px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hmt-status{display:flex;align-items:center;gap:0.5rem;margin-top:0.875rem;padding-top:0.75rem;border-top:1px solid rgba(255,255,255,0.04)}
.hmt-status-dot{width:7px;height:7px;border-radius:50%;background:#10b981;animation:spulse 2s ease-in-out infinite;box-shadow:0 0 8px rgba(16,185,129,0.5)}
@keyframes spulse{0%,100%{opacity:1}50%{opacity:0.4}}

.hv{display:none;position:relative;height:500px;align-items:center;justify-content:center;perspective:1000px}
@media(min-width:1024px){.hv{display:flex}}
.h3s{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-8deg);transition:transform .1s ease-out}
.dterm{position:absolute;border-radius:1rem;background:rgba(8,12,20,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.1);box-shadow:0 25px 60px rgba(0,0,0,0.5),0 0 40px rgba(16,185,129,0.05);transform-style:preserve-3d;overflow:hidden}
.dterm-main{top:8%;left:8%;width:340px;transform:translateZ(80px) rotateY(-6deg)}
@media(min-width:1280px){.dterm-main{width:380px;left:10%}}
.dterm-bar{display:flex;align-items:center;gap:0.4375rem;padding:0.6875rem 1rem;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.06)}
.dterm-dot{width:9px;height:9px;border-radius:50%}
.dterm-dot-r{background:#ef4444}.dterm-dot-y{background:#f59e0b}.dterm-dot-g{background:#10b981}
.dterm-tab{margin-left:0.625rem;font-size:0.625rem;color:#64748b;font-weight:500}
.dterm-body{padding:1rem 1.125rem;font-family:var(--mono);font-size:0.6rem;line-height:1.75;color:#94a3b8;min-height:180px}
.dterm-status{display:flex;align-items:center;gap:0.375rem;margin-top:0.75rem;padding-top:0.625rem;border-top:1px solid rgba(255,255,255,0.04)}
.dterm-status-dot{width:6px;height:6px;border-radius:50%;background:#10b981;animation:spulse 2s ease-in-out infinite}
.dterm-status-text{font-size:0.5rem;color:#10b981;font-weight:500}
.dterm-code{bottom:12%;right:8%;width:260px;transform:translateZ(110px) rotateY(8deg) rotateX(-4deg)}
@media(min-width:1280px){.dterm-code{width:290px;right:10%}}
.dc-header{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0.875rem;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.06)}
.dc-lang{font-size:0.5rem;color:#06b6d4;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.dc-dots{display:flex;gap:0.25rem}
.dc-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.1)}
.dc-body{padding:0.75rem 0.875rem;font-family:var(--mono);font-size:0.525rem;line-height:1.7;color:#e2e8f0;min-height:150px}

.hc{
position:relative;
z-index:10;
display:grid;
grid-template-columns:1fr;
gap:2rem;
padding-bottom:3rem;
width:100%;
}
@media(min-width:1024px){.hc{grid-template-columns:1fr 1fr;gap:3rem;padding:2rem 0;align-items:center}}
.ht{text-align:center}
@media(min-width:1024px){.ht{text-align:left}}
.ht-t{
font-size:clamp(2rem,7vw,3.75rem);
font-weight:800;
line-height:1.05;
letter-spacing:-0.03em;
color:#fff;
margin-bottom:1.5rem;
}
@media(min-width:480px){
.ht-t{letter-spacing:-0.035em}
}
.ht-d{
font-size:clamp(0.9375rem,2.5vw,1.0625rem);
color:#94a3b8;
margin-bottom:2rem;
max-width:540px;
line-height:1.7;
margin-left:auto;
margin-right:auto;
}
@media(min-width:1024px){.ht-d{margin-left:0;margin-right:0}}
.ht-b{
display:flex;
flex-wrap:wrap;
gap:0.875rem;
justify-content:center;
margin-bottom:2.5rem;
}
@media(min-width:1024px){.ht-b{justify-content:flex-start}}
.ht-b .btn-p,.ht-b .btn-g{width:100%}
@media(min-width:360px){.ht-b .btn-p,.ht-b .btn-g{width:auto}}
.ht-s{
display:flex;
align-items:center;
justify-content:center;
gap:1.5rem;
padding-top:1.5rem;
border-top:1px solid rgba(255,255,255,0.06);
flex-wrap:wrap;
}
@media(min-width:1024px){.ht-s{justify-content:flex-start;gap:2.5rem}}
.si{text-align:center;min-width:70px}
.sv{font-size:1.75rem;font-weight:800;color:#fff;letter-spacing:-0.02em}
@media(min-width:480px){.sv{font-size:2rem}}
.sl{font-size:0.625rem;color:#64748b;font-weight:500;margin-top:0.125rem;text-transform:uppercase;letter-spacing:1.5px}
@keyframes pg{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,0.4)}50%{opacity:0.7;box-shadow:0 0 0 8px rgba(16,185,129,0)}}

.sh{text-align:center;max-width:48rem;margin:0 auto 3rem}
@media(min-width:768px){.sh{margin-bottom:4rem}}
.st{font-size:clamp(1.5rem,5vw,2.75rem);font-weight:800;color:#fff;margin-bottom:1rem}
.sd{font-size:clamp(0.875rem,2vw,1.0625rem);color:#94a3b8}

#about{position:relative;padding:4rem 0;overflow:hidden}
@media(min-width:768px){#about{padding:6rem 0}}
.ag{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:1024px){.ag{grid-template-columns:1fr 1fr;gap:3.5rem}}
.ai{position:relative;height:260px;border-radius:1.25rem;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,0.4)}
@media(min-width:480px){.ai{height:340px}}
@media(min-width:768px){.ai{height:450px;border-radius:1.5rem}}
.ai img{width:100%;height:100%;object-fit:cover}
.ab{position:absolute;bottom:0.875rem;left:0.875rem;right:0.875rem;display:flex;flex-wrap:wrap;gap:0.375rem}
.abb{padding:0.375rem 0.75rem;background:rgba(5,8,16,0.9);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);border-radius:999px;font-size:0.6rem;font-weight:500;color:#fff;white-space:nowrap}
.aco h2{font-size:clamp(1.375rem,4vw,2rem);font-weight:800;color:#fff;margin-bottom:1.25rem}
.aco p{font-size:0.875rem;color:#94a3b8;line-height:1.8;margin-bottom:1rem}
.af{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;margin-top:1.5rem}
.afi{display:flex;align-items:center;gap:0.5rem}
.afc{width:1.25rem;height:1.25rem;border-radius:50%;background:rgba(16,185,129,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aft{font-size:0.75rem;font-weight:500;color:#fff}

#services{position:relative;padding:4rem 0;overflow:hidden}
@media(min-width:768px){#services{padding:5rem 0}}
@media(min-width:1024px){#services{padding:7rem 0}}
.tree-wrap{position:relative;max-width:1100px;margin:0 auto}
.tree-root{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;margin-bottom:0;z-index:10}
.tree-trunk{width:4px;height:60px;background:linear-gradient(180deg,#10b981,#067a55);border-radius:2px;position:relative;margin:0 auto}
@media(min-width:768px){.tree-trunk{height:80px;width:5px}}
@media(min-width:1024px){.tree-trunk{height:100px}}
.tree-trunk::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(16,185,129,0.15);filter:blur(10px)}
.tree-hub{position:relative;width:90px;height:90px;margin:0 auto;border-radius:50%;background:linear-gradient(145deg,rgba(16,185,129,0.2),rgba(6,182,212,0.12));border:2px solid rgba(16,185,129,0.4);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;box-shadow:0 0 40px rgba(16,185,129,0.2),inset 0 0 30px rgba(16,185,129,0.05)}
@media(min-width:480px){.tree-hub{width:105px;height:105px}}
@media(min-width:768px){.tree-hub{width:120px;height:120px}}
@media(min-width:1024px){.tree-hub{width:140px;height:140px}}

.tree-hub-icon{width:60px;height:60px;border-radius:0.5rem;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;margin-bottom:0}
@media(min-width:768px){.tree-hub-icon{width:70px;height:70px}}
@media(min-width:1024px){.tree-hub-icon{width:80px;height:80px}}

.tree-hub::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(16,185,129,0.15);animation:tpulse 3s ease-in-out infinite}
@keyframes tpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:0}}
.tree-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
@media(max-width:1023px){.tree-svg{display:none}}
.tree-branches{position:relative;z-index:2;margin-top:1.5rem}
@media(min-width:768px){.tree-branches{margin-top:2rem}}
@media(min-width:1024px){.tree-branches{margin-top:2.5rem}}
.branch-l1{margin-bottom:1.25rem}
@media(min-width:768px){.branch-l1{margin-bottom:1.5rem}}
@media(min-width:1024px){.branch-l1{margin-bottom:0}}
.branch-l1-header{display:flex;align-items:center;gap:0.625rem;margin-bottom:0.75rem;position:relative;padding-left:1.5rem}
@media(min-width:1024px){.branch-l1-header{padding-left:0;justify-content:center;margin-bottom:1rem}}
.branch-stem{position:absolute;left:0;top:0;width:4px;height:100%;border-radius:2px}
.branch-stem.s-green{background:linear-gradient(180deg,#10b981,#067a55)}
.branch-stem.s-cyan{background:linear-gradient(180deg,#06b6d4,#0e7490)}
.branch-stem.s-purple{background:linear-gradient(180deg,#8b5cf6,#6d28d9)}
@media(min-width:1024px){.branch-stem{display:none}}
.branch-l1-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;position:relative;z-index:2}
.branch-l1-dot.d-green{background:#10b981;box-shadow:0 0 12px rgba(16,185,129,0.5)}
.branch-l1-dot.d-cyan{background:#06b6d4;box-shadow:0 0 12px rgba(6,182,212,0.5)}
.branch-l1-dot.d-purple{background:#8b5cf6;box-shadow:0 0 12px rgba(139,92,246,0.5)}
.branch-l1-title{font-weight:700;font-size:0.8125rem;color:#fff}
@media(min-width:768px){.branch-l1-title{font-size:0.875rem}}
.branch-leaves{display:grid;grid-template-columns:repeat(2,1fr);gap:0.625rem;padding-left:1.25rem}
@media(min-width:480px){.branch-leaves{gap:0.75rem}}
@media(min-width:640px){.branch-leaves{padding-left:1.5rem;gap:0.875rem}}
@media(min-width:1024px){.branch-leaves{padding-left:0;grid-template-columns:repeat(2,1fr);gap:0.75rem}}
.leaf{position:relative;padding:0.875rem 0.625rem;background:linear-gradient(145deg,rgba(13,21,37,0.95),rgba(10,15,26,0.98));border:1px solid rgba(255,255,255,0.06);border-radius:0.75rem;text-align:center;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(20px) scale(0.95)}
@media(min-width:768px){.leaf{padding:1rem 0.75rem;border-radius:0.875rem}}
.leaf::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:1px;height:6px;border-radius:1px}
.leaf.l-green::before{background:rgba(16,185,129,0.3)}
.leaf.l-cyan::before{background:rgba(6,182,212,0.3)}
.leaf.l-purple::before{background:rgba(139,92,246,0.3)}
@media(min-width:1024px){.leaf::before{display:none}}
.leaf:hover{transform:translateY(-3px) scale(1.03);border-color:var(--lc,rgba(16,185,129,0.3));box-shadow:0 12px 30px rgba(0,0,0,0.3),0 0 20px var(--lg,rgba(16,185,129,0.08))}
.leaf.anim{opacity:1;transform:translateY(0) scale(1)}
.leaf-icon{width:2.25rem;height:2.25rem;border-radius:0.5rem;display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem;transition:all .3s}
@media(min-width:768px){.leaf-icon{width:2.5rem;height:2.5rem;margin-bottom:0.625rem}}
.leaf:hover .leaf-icon{transform:scale(1.1) rotate(5deg)}
.leaf-title{font-weight:600;font-size:0.6875rem;color:#fff;margin-bottom:0.1875rem;line-height:1.3}
@media(min-width:768px){.leaf-title{font-size:0.75rem}}
.leaf-desc{font-size:0.5625rem;color:#64748b;line-height:1.4}
@media(min-width:768px){.leaf-desc{font-size:0.625rem}}

#products{position:relative;padding:4rem 0;overflow:hidden}
@media(min-width:768px){#products{padding:6rem 0}}

.prg{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px){.prg{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(min-width:1024px){.prg{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto}}

.prc{position:relative;background:linear-gradient(145deg,rgba(13,21,37,0.95),rgba(10,15,26,0.98));border:1px solid rgba(255,255,255,0.06);border-radius:1.25rem;overflow:hidden;transition:all .4s;display:flex;flex-direction:column;height:100%}
.prc:hover{transform:translateY(-6px);border-color:rgba(16,185,129,0.2);box-shadow:0 20px 50px rgba(0,0,0,0.4)}


.prim{position:relative;height:170px;overflow:hidden}
@media(min-width:640px){.prim{height:200px}}
.prim img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s}
.prc:hover .prim img{transform:scale(1.05)}



.prio{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.8))}
.prib{position:absolute;bottom:0.625rem;left:0.625rem;font-size:0.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;background:rgba(16,185,129,0.9);color:#fff;padding:0.2rem 0.625rem;border-radius:999px}
.prip{height:170px;background:linear-gradient(135deg,rgba(13,21,37,0.8),rgba(10,15,26,0.95));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;border-bottom:1px solid rgba(255,255,255,0.04)}
@media(min-width:640px){.prip{height:200px}}
.prip-i{opacity:0.3}.prip-t{font-size:0.75rem;color:#64748b;font-weight:500}
.prco{padding:1.25rem;flex:1;display:flex;flex-direction:column}
.prch{display:flex;align-items:flex-start;gap:0.75rem;margin-bottom:0.875rem}
.prci{width:2.5rem;height:2.5rem;border-radius:0.625rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prct{font-weight:700;font-size:0.9375rem;color:#fff;margin-bottom:0.125rem}
.prcs{font-size:0.6rem;color:#64748b}
.prcd{font-size:0.8125rem;color:#94a3b8;line-height:1.65;margin-bottom:1rem;flex:1}
.prcf{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.prclk{font-size:0.75rem;font-weight:600;display:flex;align-items:center;gap:0.25rem;transition:gap .3s}
.prc:hover .prclk{gap:0.5rem}
.prst{font-size:0.6875rem;font-weight:600;padding:0.25rem 0.75rem;border-radius:999px}

/* ========== 3D CAROUSEL TEAM SECTION ========== */
#team{
position:relative;
padding:5rem 0 3rem;
background:rgba(13,21,37,0.3);
overflow:hidden;
}
@media(min-width:768px){#team{padding:6rem 0 4rem}}

.team-carousel-wrapper{
position:relative;
z-index:1;
}

.team-stroke-title{
font-family:'Bebas Neue',sans-serif;
font-size:clamp(5rem,18vw,16rem);
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-55%);
pointer-events:none;
white-space:nowrap;
color:transparent;
-webkit-text-stroke:1.5px rgba(255,255,255,0.035);
z-index:0;
user-select:none;
line-height:1;
}
@media(min-width:768px){
.team-stroke-title{
-webkit-text-stroke:2px rgba(255,255,255,0.04);
}
}

.team-carousel-container{
width:100%;
max-width:1000px;
height:380px;
position:relative;
perspective:1200px;
z-index:2;
margin:0 auto;
}
@media(min-width:480px){.team-carousel-container{height:420px}}
@media(min-width:768px){.team-carousel-container{height:450px}}
@media(min-width:1024px){.team-carousel-container{max-width:1100px}}

.team-carousel-track{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
position:relative;
transform-style:preserve-3d;
}

.team-card-3d{
position:absolute;
width:220px;
height:300px;
background:linear-gradient(145deg,rgba(16,22,40,0.95),rgba(10,15,26,0.98));
border:1px solid rgba(255,255,255,0.06);
border-radius:16px;
overflow:hidden;
cursor:pointer;
will-change:transform,filter,opacity;
box-shadow:0 30px 60px rgba(0,0,0,0.6);
transition:border-color 0.6s ease,box-shadow 0.6s ease;
}
@media(min-width:480px){
.team-card-3d{width:250px;height:340px}
}
@media(min-width:768px){
.team-card-3d{width:280px;height:380px}
}

.team-card-3d img{
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
display:block;
}

.team-card-3d::after{
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
height:45%;
background:linear-gradient(transparent,rgba(10,15,26,0.85));
pointer-events:none;
}

/* Member Info Below Carousel */
.team-member-info{
text-align:center;
margin-top:2rem;
z-index:2;
position:relative;
will-change:opacity,transform;
}
@media(min-width:768px){.team-member-info{margin-top:2.5rem}}

.team-member-name{
font-family:'Poppins',sans-serif;
color:#ffffff;
font-size:clamp(1.75rem,5vw,3rem);
font-weight:800;
letter-spacing:-0.02em;
margin-bottom:0.25rem;
line-height:1.1;
}

.team-member-role{
color:#06b6d4;
font-size:clamp(0.6875rem,1.5vw,0.875rem);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.15em;
margin-bottom:0.625rem;
}

.team-member-bio{
color:#94a3b8;
font-size:clamp(0.75rem,1.5vw,0.875rem);
line-height:1.65;
max-width:500px;
margin:0 auto 1rem;
padding:0 1rem;
}

.team-member-socials{
display:flex;
gap:0.5rem;
justify-content:center;
}

.team-msocial{
width:2.25rem;
height:2.25rem;
border-radius:0.625rem;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.07);
display:flex;
align-items:center;
justify-content:center;
color:#64748b;
transition:all .3s;
cursor:pointer;
}
.team-msocial:hover{
background:rgba(16,185,129,0.15);
color:#10b981;
border-color:rgba(16,185,129,0.3);
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(16,185,129,0.2);
}

/* Dots */
.team-dots{
display:flex;
gap:12px;
margin-top:1.75rem;
z-index:2;
position:relative;
justify-content:center;
}

.team-dot{
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,0.15);
cursor:pointer;
transition:background 0.3s ease,transform 0.3s ease;
}

.team-dot.active{
background:#10b981;
transform:scale(1.5);
box-shadow:0 0 10px rgba(16,185,129,0.4);
}

/* Nav Arrows */
.team-nav-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,0.03);
color:rgba(255,255,255,0.4);
font-size:2.5rem;
border:1px solid rgba(255,255,255,0.06);
width:48px;
height:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:20;
transition:all 0.3s ease;
font-family:var(--sans);
line-height:1;
-webkit-tap-highlight-color:transparent;
}
@media(min-width:768px){
.team-nav-arrow{font-size:3rem;width:52px;height:52px}
}
.team-nav-arrow:hover{
color:#10b981;
border-color:rgba(16,185,129,0.3);
background:rgba(16,185,129,0.08);
}
.team-nav-arrow.team-left{left:2%}
@media(min-width:768px){.team-nav-arrow.team-left{left:3%}}
.team-nav-arrow.team-right{right:2%}
@media(min-width:768px){.team-nav-arrow.team-right{right:3%}}

/* ========== BLOG SECTION ========== */
#blog{position:relative;padding:4rem 0;overflow:hidden}
@media(min-width:768px){#blog{padding:6rem 0}}

.blog-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;max-width:1100px;margin-left:auto;margin-right:auto}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;max-width:900px}}

.blog-card{position:relative;background:linear-gradient(145deg,rgba(13,21,37,0.95),rgba(10,15,26,0.98));border:1px solid rgba(255,255,255,0.06);border-radius:1.25rem;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}
.blog-card:hover{transform:translateY(-6px);border-color:rgba(16,185,129,0.2);box-shadow:0 20px 50px rgba(0,0,0,0.4),0 0 25px rgba(16,185,129,0.06)}
.blog-img{position:relative;height:180px;overflow:hidden}
@media(min-width:640px){.blog-img{height:210px}}
@media(min-width:768px){.blog-img{height:230px}}
.blog-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.blog-card:hover .blog-img img{transform:scale(1.06)}
.blog-img-ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(5,8,16,0.85) 100%);pointer-events:none;transition:opacity .4s}
.blog-cat{position:absolute;top:0.875rem;left:0.875rem;font-size:0.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:0.3rem 0.875rem;border-radius:999px;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:2}
.blog-cat.bc-product{background:rgba(16,185,129,0.85)}
.blog-cat.bc-service{background:rgba(6,182,212,0.85)}
.blog-body{padding:1.25rem 1.375rem 1.5rem}
@media(min-width:640px){.blog-body{padding:1.375rem 1.5rem 1.625rem}}
.blog-meta{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem}
.blog-meta-item{display:flex;align-items:center;gap:0.3rem;font-size:0.625rem;color:#64748b;font-weight:500}
.blog-meta-dot{width:4px;height:4px;border-radius:50%;background:#10b981;flex-shrink:0}
.blog-title{font-weight:700;font-size:1rem;color:#fff;margin-bottom:0.625rem;line-height:1.45;transition:color .3s}
@media(min-width:640px){.blog-title{font-size:1.0625rem}}
.blog-card:hover .blog-title{color:#10b981}
.blog-excerpt{font-size:0.8125rem;color:#94a3b8;line-height:1.65;margin-bottom:1.125rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-read{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.8125rem;font-weight:600;color:#10b981;transition:all .3s}
.blog-card:hover .blog-read{gap:0.625rem}
.blog-read svg{transition:transform .3s}
.blog-card:hover .blog-read svg{transform:translateX(2px)}

/* ========== CONTACT SECTION ========== */
#contact{position:relative;padding:4rem 0;overflow:hidden;background:rgba(13,21,37,0.3)}
@media(min-width:768px){#contact{padding:6rem 0}}
.cg{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:1024px){.cg{grid-template-columns:1fr 1fr;gap:3.5rem}}
.ci h2{font-size:clamp(1.375rem,4vw,2rem);font-weight:800;color:#fff;margin-bottom:1rem}
.ci p{font-size:0.875rem;color:#94a3b8;line-height:1.7;margin-bottom:1.5rem}
.cms{display:flex;flex-direction:column;gap:0.75rem}
.cm{display:flex;align-items:center;gap:0.875rem;padding:0.875rem 1rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:0.875rem;transition:all .3s}
.cm:hover{background:rgba(16,185,129,0.05);border-color:rgba(16,185,129,0.2)}
.cmi{width:2.125rem;height:2.125rem;border-radius:0.625rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cml{font-size:0.625rem;color:#64748b;margin-bottom:0.0625rem}
.cmv{font-size:0.8125rem;font-weight:600;color:#fff}
.cform{padding:1.5rem;background:linear-gradient(145deg,rgba(13,21,37,0.95),rgba(10,15,26,0.98));border:1px solid rgba(255,255,255,0.06);border-radius:1.375rem;box-shadow:0 20px 50px rgba(0,0,0,0.3)}
@media(min-width:640px){.cform{padding:1.875rem;border-radius:1.5rem}}
.fg{margin-bottom:1.125rem}
.fl{display:block;font-size:0.6875rem;font-weight:500;color:#94a3b8;margin-bottom:0.4375rem}
.fi,.fta{width:100%;padding:0.8125rem 1rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:0.75rem;color:#fff;font-family:inherit;font-size:0.875rem;transition:all .3s;-webkit-appearance:none;appearance:none}
.fi:focus,.fta:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,0.1)}
.fi::placeholder,.fta::placeholder{color:#475569}
.fta{min-height:110px;resize:vertical}
.fr{display:grid;grid-template-columns:1fr;gap:1.125rem}
@media(min-width:480px){.fr{grid-template-columns:1fr 1fr}}

/* ========== FOOTER ========== */
footer{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg),#030508)}
.fline{height:1px;background:linear-gradient(90deg,transparent,rgba(16,185,129,0.2),transparent)}
.fco{padding:4rem 0 2.5rem}
@media(min-width:768px){.fco{padding:5rem 0 3rem}}
.fgr{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2.5rem}
@media(min-width:480px){.fgr{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(min-width:1024px){.fgr{grid-template-columns:2fr 1fr 1fr 1.5fr;gap:2rem;margin-bottom:4rem}}
.fb p{font-size:0.8125rem;color:#64748b;line-height:1.7;margin:0.875rem 0 1.125rem}
.fsl{display:flex;gap:0.5rem}
.fsa{width:2.25rem;height:2.25rem;border-radius:0.625rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;color:#64748b;transition:all .3s}
.fsa:hover{background:#10b981;color:#fff;box-shadow:0 6px 20px rgba(16,185,129,0.3)}
.flk h4{font-size:0.6875rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.875rem}
.flk ul{list-style:none}
.flk li{margin-bottom:0.5rem}
.flk a{font-size:0.8125rem;color:#64748b;display:flex;align-items:center;gap:0.375rem;transition:color .3s}
.flk a:hover{color:#10b981}
.fnl h4{font-size:0.6875rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.625rem}
.fnl p{font-size:0.8125rem;color:#64748b;margin-bottom:0.875rem}
.fnf{display:flex;gap:0.5rem;flex-wrap:wrap}
.fni{flex:1;min-width:200px;height:2.75rem;padding:0 1rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:0.625rem;color:#fff;font-size:0.8125rem;font-family:inherit;min-width:0;-webkit-appearance:none}
.fni::placeholder{color:#475569}
.fnb{width:2.75rem;height:2.75rem;border-radius:0.625rem;background:linear-gradient(135deg,#10b981,#06b6d4);border:none;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all .3s;flex-shrink:0}
.fnb:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(16,185,129,0.4)}
.fbot{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.05)}
@media(min-width:640px){.fbot{flex-direction:row;gap:0}}
.fcop{font-size:0.7rem;color:#475569;text-align:center}
.fleg{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center}
@media(min-width:640px){.fleg{justify-content:flex-end}}
.fleg a{font-size:0.7rem;color:#475569;transition:color .3s}
.fleg a:hover{color:#10b981}

.toast{position:fixed;bottom:1.5rem;right:1.5rem;left:1.5rem;max-width:400px;margin-left:auto;padding:1rem 1.25rem;background:rgba(10,15,26,0.95);border:1px solid rgba(16,185,129,0.2);border-radius:1rem;display:flex;align-items:center;gap:0.75rem;z-index:200;transform:translateY(100px);opacity:0;transition:all .5s cubic-bezier(.4,0,.2,1);box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
@media(min-width:480px){.toast{left:auto;bottom:1.5rem;right:1.5rem}}
.toast.show{transform:translateY(0);opacity:1}
.td{width:1.125rem;height:1.125rem;border-radius:50%;background:rgba(16,185,129,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.td::after{content:'';width:0.4375rem;height:0.4375rem;border-radius:50%;background:#10b981}
.tt{font-size:0.8125rem;font-weight:500;color:#e0e0e0;line-height:1.4}

.pl{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .5s,visibility .5s}
.pl.hid{opacity:0;visibility:hidden;pointer-events:none}
.lr{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,0.1);border-top-color:#10b981;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}