/* ===== GLOBAL ===== */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Arial,sans-serif;}
body{color:#222;background:#fff;scroll-behavior:smooth;}
.container{width:90%;max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;}

/* ===== HEADER ===== */
.header{background:#fff;border-bottom:1px solid #eee;padding:18px 0;position:sticky;top:0;z-index:1000;transition:.3s;}
.header.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.08);}
.logo{height:110px;width:auto;}
nav{display:flex;align-items:center;}
nav a{margin-left:25px;text-decoration:none;color:#222;font-weight:600;position:relative;padding-bottom:6px;}
nav a.active,nav a:hover{color:#52b54b;}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#52b54b;transition:.3s;}
nav a.active::after,nav a:hover::after{width:100%;}

/* ===== STATS ===== */
.stats{padding:35px 0;}
.stats-container{width:90%;max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px;}
.stat-card{background:#f9fbf9;border-radius:14px;padding:25px;text-align:center;box-shadow:0 10px 25px rgba(0,0,0,.08);opacity:0;transform:translateY(20px);transition:.6s;}
.stat-card.show{opacity:1;transform:none;}
.stat-number{font-size:38px;font-weight:700;color:#52b54b;}
.stat-label{margin-top:8px;font-size:15px;color:#555;}

/* ===== HERO ===== */
.hero{height:90vh;background:linear-gradient(rgba(82,181,75,.85),rgba(76,175,80,.85)),url('circuit.jpg') center/cover no-repeat;display:flex;align-items:center;}
.hero-content{width:90%;max-width:1200px;margin:auto;color:#fff;}
.hero h1{font-size:54px;line-height:1.15;margin-bottom:25px;}
.hero p{font-size:19px;line-height:1.6;max-width:620px;}

/* ===== BUTTONS ===== */
.buttons{margin-top:30px;}
.btn{padding:14px 34px;border-radius:30px;text-decoration:none;font-weight:bold;margin-right:15px;display:inline-block;transition:.3s;}
.primary{background:#fff;color:#2f6f2f;}
.primary:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.2);}
.secondary{border:2px solid #fff;color:#fff;}
.secondary:hover{background:#fff;color:#2f6f2f;transform:translateY(-3px);}

/* ===== SERVICES ===== */
.services{padding:90px 10%;text-align:center;background:#f7f9f7;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;}
.card{background:#fff;padding:35px 30px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);font-weight:600;opacity:0;transform:translateY(20px);transition:.6s;}
.card.show{opacity:1;transform:none;}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.15);}

/* ===== TECHNOLOGY STACK (FIXED GLOW) ===== */
.stack{padding:100px 10%;background:linear-gradient(180deg,#f8fbf8,#fff);text-align:center;}
.stack-subtitle{color:#555;font-size:16px;margin-bottom:50px;}
.stack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:35px;}

.stack-card{
    background:#ffffff;
    border-radius:18px;
    padding:35px 25px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    border:1px solid rgba(82,181,75,.2);
    position:relative;
    overflow:hidden;
    transition:all .35s ease;
}

.stack-card::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:radial-gradient(circle, rgba(82,181,75,0.35), transparent 60%);
    opacity:0.5;
    animation:glowPulse 4s ease-in-out infinite;
    pointer-events:none;
}

.stack-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(82,181,75,.35);
}

.stack-icon{
    width:64px;
    height:64px;
    margin:0 auto 20px;
    border-radius:50%;
    background:linear-gradient(135deg,#52b54b,#4caf50);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
}

.svg-icon{
    width:32px;
    height:32px;
    stroke:white;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.stack-card h4{font-size:18px;margin-bottom:8px;position:relative;z-index:1;}
.stack-card p{font-size:14px;color:#555;position:relative;z-index:1;}

/* ===== CTA ===== */
.cta{background:#52b54b;color:#fff;padding:70px 10%;text-align:center;}
.cta h2{font-size:32px;margin-bottom:20px;}

/* ===== ABOUT / FOOTER ===== */
.about,.contact{padding:90px 10%;text-align:center;}
.footer{background:#1f1f1f;color:#fff;text-align:center;padding:20px;}

/* ===== GLOW ANIMATION ===== */
@keyframes glowPulse{
  0%{opacity:.3;}
  50%{opacity:.7;}
  100%{opacity:.3;}
}