/* ===== Vars ===== */
:root{
  --blue:#003B5C;--accent:#00C9FF;--dark:#0B1A2E;--light:#F5F7FA;
  --gray:#6B7A8D;--white:#fff;--radius:10px;--shadow:0 8px 30px rgba(0,0,0,.08);
  --trans:.3s ease;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#1E293B;background:var(--light);line-height:1.65}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:var(--trans)}
.container{max-width:1200px;margin:auto;padding:0 24px}

/* === Navbar === */
.navbar{position:fixed;top:0;left:0;width:100%;background:rgba(11,26,46,.95);backdrop-filter:blur(10px);z-index:999;height:72px;border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo-brand{color:var(--white);font-weight:800;font-size:1.35rem;letter-spacing:-.5px}
.logo-dckv{color:var(--accent);font-weight:600;font-size:1.1rem}
.nav-links{display:flex;gap:6px;list-style:none}
.nav-link{padding:8px 14px;color:rgba(255,255,255,.72);font-size:.88rem;border-radius:6px;transition:var(--trans)}
.nav-link:hover,.nav-link.active{color:var(--white);background:rgba(0,201,255,.12)}
.btn-nav{background:var(--accent);color:var(--dark);padding:8px 20px;border-radius:6px;font-weight:600;font-size:.85rem;transition:var(--trans)}
.btn-nav:hover{background:#00b4e6;transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.hamburger span{width:22px;height:2px;background:var(--white);border-radius:2px}

/* === Hero === */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--white);position:relative;overflow:hidden}
.hero.has-bg{background:linear-gradient(rgba(11,26,46,.78),rgba(0,59,92,.65)),url('images/hero-bg.png') center/cover no-repeat}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.35))}
.hero-inner{position:relative;z-index:2;padding:140px 24px 80px;max-width:960px}
.hero-badge{display:inline-block;padding:6px 18px;border:1px solid rgba(0,201,255,.35);border-radius:50px;font-size:.78rem;color:var(--accent);margin-bottom:20px;background:rgba(0,201,255,.08)}
.hero-title{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.15;margin-bottom:14px;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.hero-sub{display:block;font-size:1.05rem;font-weight:400;opacity:.85;margin-top:8px} 
.hero-desc{font-size:1rem;opacity:.9;max-width:700px;margin:0 auto 28px;line-height:1.7}
.hero-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-bottom:32px}
.stat{text-align:center}
.stat-num{font-size:2.4rem;font-weight:800;color:var(--accent)}
.stat-unit{font-size:1.3rem;color:var(--accent);margin-left:2px}
.stat-label{display:block;font-size:.75rem;opacity:.7;margin-top:2px}
.hero-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.btn{padding:13px 30px;border-radius:6px;font-weight:600;font-size:.92rem;cursor:pointer;border:none;transition:var(--trans);display:inline-block}
.btn-primary{background:var(--accent);color:var(--dark)}
.btn-primary:hover{background:#00b4e6;transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,201,255,.35)}
.btn-outline{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.5)}
.btn-outline:hover{background:rgba(255,255,255,.08);border-color:var(--white)}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);font-size:.72rem;z-index:2}
.scroll-arrow{width:18px;height:18px;margin:6px auto 0;border-right:2px solid rgba(255,255,255,.6);border-bottom:2px solid rgba(255,255,255,.6);transform:rotate(45deg);animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}50%{transform:rotate(45deg) translate(4px,4px);opacity:1}}

/* === Trust Bar === */
.trust-bar{background:var(--blue);padding:22px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.trust-heading{color:rgba(255,255,255,.5);font-size:.82rem;text-align:center;margin-bottom:10px}
.trust-row{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;color:rgba(255,255,255,.8);font-size:.85rem;font-weight:500}

/* === Sections === */
.section{padding:90px 0}
.section-alt{background:var(--white)}
.tag{display:inline-block;padding:4px 14px;background:rgba(0,201,255,.1);color:var(--accent);font-size:.76rem;font-weight:700;border-radius:50px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.6px}
.section-title{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;color:var(--dark);margin-bottom:14px}
.section-desc{max-width:680px;color:var(--gray);font-size:1rem;margin-bottom:40px;line-height:1.7}

/* === About === */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.about-text h3{font-size:1.15rem;font-weight:700;color:var(--blue);margin:22px 0 10px}
.about-text p{color:var(--gray);margin-bottom:14px;line-height:1.7}
.highlight-box{border-left:4px solid var(--accent);background:rgba(0,201,255,.05);padding:16px 20px;border-radius:0 var(--radius) var(--radius) 0;margin:16px 0;font-size:.95rem}
.about-side{display:grid;gap:16px}
.about-img{border-radius:var(--radius);box-shadow:var(--shadow)}
.mini-card{background:var(--white);padding:16px 18px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.04)}
.mini-card h4{font-size:.92rem;font-weight:700;color:var(--blue);margin-bottom:4px}
.mini-card p{font-size:.83rem;color:var(--gray)}

/* === Components (4 in row) === */
.comp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.comp-card{background:var(--white);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:var(--trans);border:1px solid rgba(0,0,0,.04)}
.comp-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,201,255,.12)}
.comp-no{position:absolute;top:12px;right:14px;font-size:.7rem;font-weight:700;color:var(--accent);background:rgba(0,201,255,.1);padding:2px 10px;border-radius:50px}
.comp-img{width:100%;height:150px;object-fit:cover;border-radius:8px;margin-bottom:12px}
.comp-card h3{font-size:1rem;font-weight:700;color:var(--blue);margin-bottom:8px}
.comp-card p{font-size:.83rem;color:var(--gray);margin-bottom:10px}
.comp-card ul{list-style:none;font-size:.8rem;color:var(--gray)}
.comp-card ul li::before{content:"✓ ";color:var(--accent);font-weight:700}

/* === Steps (4 in row) === */
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step-card{background:var(--white);padding:28px 20px;border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;transition:var(--trans);border:1px solid rgba(0,0,0,.04)}
.step-card:hover{transform:translateY(-5px);box-shadow:0 12px 36px rgba(0,201,255,.1)}
.step-no{display:inline-block;font-size:.72rem;font-weight:700;color:var(--accent);background:rgba(0,201,255,.1);padding:3px 14px;border-radius:50px;margin-bottom:14px}
.step-card h3{font-size:1.05rem;font-weight:700;color:var(--blue);margin-bottom:8px}
.step-card p{font-size:.84rem;color:var(--gray)}

/* === Projects (3×2) === */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--trans);border:1px solid rgba(0,0,0,.04)}
.proj-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(0,201,255,.1)}
.proj-img{width:100%;height:180px;object-fit:cover}
.proj-body{padding:16px 18px}
.proj-body h3{font-size:1rem;font-weight:700;color:var(--blue);margin-bottom:6px}
.proj-body p{font-size:.83rem;color:var(--gray)}

/* === Certifications === */
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:30px}
.cert-item{text-align:center}
.cert-img{height:70px;object-fit:contain;margin:0 auto 10px}
.cert-item p{font-size:.85rem;color:var(--gray);font-weight:500}

/* === Contact === */
.contact-wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;margin-top:30px}
.contact-form{background:var(--white);padding:32px;border-radius:var(--radius);box-shadow:var(--shadow);display:grid;gap:14px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:12px 16px;border:1px solid #DDE3EB;border-radius:8px;font-size:.9rem;font-family:inherit;transition:var(--trans)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,201,255,.12)}
.contact-form textarea{resize:vertical;min-height:100px}
.contact-info{color:var(--gray);font-size:.92rem;display:flex;flex-direction:column;gap:14px}
.contact-info a{color:var(--accent);font-weight:600}
.form-msg{font-size:.85rem;color:#10b981}

/* === Footer === */
footer{background:var(--dark);color:rgba(255,255,255,.65);padding:32px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-brand{font-size:1.15rem;color:var(--white)}
.footer-sub{font-size:.8rem;opacity:.6;margin-top:2px}

/* === Fade-in === */
.fade{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade.visible{opacity:1;transform:translateY(0)}

/* === Responsive === */
@media(max-width:1024px){
  .comp-grid{grid-template-columns:repeat(2,1fr)}
  .step-grid{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-links{position:fixed;top:72px;left:0;width:100%;background:rgba(11,26,46,.97);flex-direction:column;padding:20px 24px;display:none;gap:8px}
  .nav-links.open{display:flex}
  .hamburger{display:flex}
  .btn-nav{display:none}
  .comp-grid,.step-grid{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:repeat(2,1fr)}
  .contact-wrap{grid-template-columns:1fr}
  .hero-stats{gap:20px}
  .section{padding:60px 0}
}