@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#060d1a;
  --navy2:#0a1628;
  --navy3:#0d1f3c;
  --blue:#1a4fa0;
  --blue2:#2563eb;
  --cyan:#00c8e8;
  --cyan2:#0096c7;
  --white:#ffffff;
  --gray:#94a3b8;
  --lightgray:#f1f5f9;
  --border:rgba(0,200,232,0.15);
  --card:rgba(255,255,255,0.03);
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--navy);
  color:#e2e8f0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.h-title,
.sec-h,
.ci-h,
.sc-num,
.hs-num,
.t-name{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-0.03em;
}

/* ── LOADER ── */
#loader{position:fixed;inset:0;background:var(--navy);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center}
#loader.out{animation:loaderOut 0.7s 0.2s forwards}
@keyframes loaderOut{to{opacity:0;pointer-events:none}}
.l-logo{font-size:3rem;font-weight:900;color:#fff;letter-spacing:6px;opacity:0;animation:lUp 0.7s 0.3s forwards}
.l-tagline{color:var(--cyan);font-size:0.7rem;letter-spacing:4px;margin-top:6px;opacity:0;animation:lUp 0.7s 0.5s forwards}
.l-bar{width:180px;height:2px;background:rgba(255,255,255,0.08);border-radius:2px;margin-top:2.5rem;overflow:hidden;opacity:0;animation:lUp 0.5s 0.7s forwards}
.l-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue2),var(--cyan));animation:lFill 1.6s 0.9s ease forwards}
@keyframes lFill{to{width:100%}}
@keyframes lUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── NAV ── */
#nav{position:fixed;inset:0 0 auto;z-index:900;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 3rem;transition:all 0.4s}
#nav.solid{background:rgba(6,13,26,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 4px 30px rgba(0,0,0,0.3)}
.n-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo-img{height:42px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.n-links{display:flex;gap:2.5rem;list-style:none}
..n-links a{
  font-family:'Inter',sans-serif;
  color:rgba(255,255,255,0.68);
  text-decoration:none;
  font-size:0.76rem;
  letter-spacing:0.14em;
  font-weight:600;
  transition:color 0.2s;
  position:relative;
  text-transform:uppercase
}
.n-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:var(--cyan);transition:width 0.3s}
.n-links a:hover{color:#fff}
.n-links a:hover::after{width:100%}
.n-btn{background:linear-gradient(135deg,var(--blue2),var(--cyan2));color:#fff;border:none;padding:10px 24px;border-radius:7px;font-size:0.82rem;cursor:pointer;font-weight:700;letter-spacing:0.5px;transition:opacity 0.2s,transform 0.2s}
.n-btn:hover{opacity:0.88;transform:translateY(-1px)}

/* ── HERO ── */
#hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:100px 3rem 4rem}
.h-bg{position:absolute;inset:0;background:linear-gradient(135deg,#060d1a 0%,#0a1628 50%,#060d18 100%)}
.h-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,200,232,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,232,0.04) 1px,transparent 1px);background-size:50px 50px}
.h-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,0.12) 0%,transparent 65%);top:-200px;right:-100px;pointer-events:none}
.h-glow2{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(0,200,232,0.07) 0%,transparent 65%);bottom:-100px;left:10%;pointer-events:none}
.hero-wrap{position:relative;z-index:1;max-width:1300px;margin:0 auto;width:100%;display:grid;grid-template-columns:1.1fr 0.9fr;gap:5rem;align-items:center}
.h-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,232,0.08);border:1px solid rgba(0,200,232,0.25);color:var(--cyan);padding:7px 18px;border-radius:100px;font-size:0.72rem;letter-spacing:2.5px;font-weight:700;margin-bottom:2rem;opacity:0;animation:lUp 0.8s 2.4s forwards}
.h-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}
..h-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:4.4rem;
  font-weight:700;
  line-height:0.98;
  letter-spacing:-0.06em;
  color:#fff;
  margin-bottom:1.8rem;
  opacity:0;
  animation:lUp 0.8s 2.6s forwards;
  max-width:700px;
}
.h-title .gr{background:linear-gradient(135deg,var(--cyan),var(--blue2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.h-sub{
  font-size:1.02rem;
  color:#94a3b8;
  line-height:1.85;
  max-width:560px;
  margin-bottom:2.5rem;
  font-weight:400;
  opacity:0;
  animation:lUp 0.8s 2.8s forwards
}
.h-btns{display:flex;gap:1rem;margin-bottom:3.5rem;opacity:0;animation:lUp 0.8s 3s forwards}
.btn-p{background:linear-gradient(135deg,var(--blue2),var(--cyan2));color:#fff;padding:14px 32px;border-radius:9px;text-decoration:none;font-weight:700;font-size:0.88rem;letter-spacing:0.3px;transition:transform 0.2s,box-shadow 0.2s}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(37,99,235,0.4)}
.btn-o{border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.8);padding:14px 32px;border-radius:9px;text-decoration:none;font-weight:600;font-size:0.88rem;transition:all 0.2s;display:inline-block}
.btn-o:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,200,232,0.05)}
.h-stats{display:flex;gap:3rem;opacity:0;animation:lUp 0.8s 3.2s forwards}
.hs-num{font-size:2.2rem;font-weight:900;color:#fff;line-height:1}
.hs-num em{color:var(--cyan);font-style:normal}
.hs-lbl{font-size:0.72rem;color:rgba(255,255,255,0.4);letter-spacing:1.5px;margin-top:4px;text-transform:uppercase}
.hs-div{width:1px;background:rgba(255,255,255,0.08);align-self:stretch}
.h-panel{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:20px;padding:2rem;opacity:0;animation:lUp 0.9s 2.7s forwards;backdrop-filter:blur(10px)}
.h-panel-top{display:flex;align-items:center;gap:8px;margin-bottom:1.5rem}
.h-dot{width:10px;height:10px;border-radius:50%}
.h-panel-url{background:rgba(255,255,255,0.05);border-radius:6px;padding:5px 12px;color:rgba(255,255,255,0.25);font-size:0.75rem;margin-left:auto;letter-spacing:0.5px}
.tech-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.5rem}
.tp{background:rgba(0,200,232,0.07);border:1px solid rgba(0,200,232,0.18);color:var(--cyan);padding:7px 14px;border-radius:8px;font-size:0.76rem;font-weight:600;letter-spacing:0.3px;transition:background 0.2s}
.tp:hover{background:rgba(0,200,232,0.15)}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mg-item{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:14px 16px;transition:border-color 0.3s,background 0.3s;cursor:default}
.mg-item:hover{border-color:rgba(0,200,232,0.3);background:rgba(0,200,232,0.04)}
.mg-label{font-size:0.78rem;color:rgba(255,255,255,0.6);font-weight:500}
.h-status{margin-top:1.5rem;background:rgba(0,200,232,0.05);border:1px solid rgba(0,200,232,0.12);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:10px}
.hs-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:blink 2s infinite}
.hs-text{font-size:0.76rem;color:rgba(255,255,255,0.45);letter-spacing:0.5px}

/* ── MARQUEE ── */
.marquee-wrap{background:rgba(255,255,255,0.02);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0;overflow:hidden}
.marquee-track{display:flex;gap:3rem;animation:marquee 25s linear infinite;white-space:nowrap}
.marquee-track:hover{animation-play-state:paused}
.m-item{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,0.35);font-size:0.78rem;letter-spacing:1.5px;font-weight:600;text-transform:uppercase;flex-shrink:0}
.m-sep{color:var(--cyan);margin-left:10px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SECTION COMMONS ── */
.sec{padding:7rem 3rem}
.sec-inner{max-width:1300px;margin:0 auto}
.sec-tag{display:inline-block;background:rgba(37,99,235,0.08);color:var(--blue2);border:1px solid rgba(37,99,235,0.22);padding:5px 16px;border-radius:100px;font-size:0.7rem;letter-spacing:2.5px;font-weight:700;margin-bottom:1.2rem;text-transform:uppercase}
.sec-tag.light{background:rgba(0,200,232,0.08);color:var(--cyan);border-color:rgba(0,200,232,0.2)}
..sec-h{
  font-family:'Space Grotesk',sans-serif;
  font-size:3rem;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.04em;
  color:#fff;
  margin-bottom:1rem
}
.sec-h .hl{background:linear-gradient(135deg,var(--cyan),var(--blue2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-p{font-size:0.95rem;color:var(--gray);line-height:1.75;max-width:580px}
.tc{text-align:center}
.tc .sec-p{margin:0 auto}

/* ── ABOUT ── */
#about{background:linear-gradient(180deg,var(--navy) 0%,#0a1628 100%)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;margin-top:4rem}
.about-img-zone{position:relative}
.about-img-glow{position:absolute;inset:-2px;border-radius:22px;background:linear-gradient(135deg,var(--blue2),var(--cyan2));z-index:-1;opacity:0.35}
.about-img-frame{border-radius:20px;overflow:hidden}
.about-img-inner{width:100%;min-height:420px;background:linear-gradient(135deg,#0a1628,#1a3a6b);display:flex;align-items:center;justify-content:center;position:relative}
.about-photo{width:100%;height:420px;object-fit:cover;display:block}
.about-fallback{font-size:2rem;font-weight:900;color:rgba(255,255,255,0.08);letter-spacing:6px;position:absolute}
.about-chip{position:absolute;bottom:-18px;right:-18px;background:var(--navy2);border:1px solid var(--border);border-radius:14px;padding:16px 20px;text-align:center}
.ac-num{font-size:2rem;font-weight:900;color:#fff;line-height:1}
.ac-lbl{font-size:0.72rem;color:var(--gray);letter-spacing:1px;margin-top:4px}
.about-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2rem 0}
.al-item{display:flex;align-items:center;gap:10px;font-size:0.88rem;color:rgba(255,255,255,0.7);font-weight:500}
.al-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex-shrink:0}

/* ── STATS ── */
#stats{background:linear-gradient(135deg,var(--navy3),#0a2040);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:4rem 3rem}
.stats-row{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.06);border-radius:18px;overflow:hidden}
.stat-cell{background:rgba(6,13,26,0.8);padding:2.5rem 2rem;text-align:center;transition:background 0.3s}
.stat-cell:hover{background:rgba(37,99,235,0.08)}
.sc-num{font-size:3.2rem;font-weight:900;color:#fff;line-height:1}
.sc-num em{color:var(--cyan);font-style:normal}
.sc-lbl{font-size:0.72rem;color:var(--gray);letter-spacing:2px;margin-top:8px;text-transform:uppercase}

/* ── SERVICES ── */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.s-card{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:2.2rem;position:relative;overflow:hidden;transition:all 0.35s;cursor:default}
.s-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue2),var(--cyan));transform:scaleX(0);transition:transform 0.35s;transform-origin:left}
.s-card:hover{background:rgba(37,99,235,0.07);border-color:rgba(37,99,235,0.3);transform:translateY(-5px)}
.s-card:hover::before{transform:scaleX(1)}
.s-card-glow{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(37,99,235,0.06),transparent 60%);opacity:0;transition:opacity 0.35s}
.s-card:hover .s-card-glow{opacity:1}
.s-num{font-size:0.72rem;color:var(--cyan);letter-spacing:2px;font-weight:700;margin-bottom:1rem;text-transform:uppercase}
.s-title{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:0.7rem}
.s-desc{font-size:0.83rem;color:var(--gray);line-height:1.65}
.s-line{width:32px;height:2px;background:linear-gradient(90deg,var(--blue2),var(--cyan));border-radius:2px;margin-top:1.5rem;transition:width 0.35s}
.s-card:hover .s-line{width:64px}

/* ── TEAM ── */
#team{background:var(--navy)}
.team-row{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;max-width:900px;margin:3.5rem auto 0}
.t-card{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);border-radius:20px;overflow:hidden;transition:transform 0.35s,border-color 0.35s,box-shadow 0.35s}
.t-card:hover{transform:translateY(-8px);border-color:rgba(0,200,232,0.25);box-shadow:0 24px 60px rgba(0,0,0,0.3)}
.t-img-wrap{position:relative;height:360px;overflow:hidden;background:linear-gradient(135deg,#0a1628,#1a3a6b)}
.t-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:none;transition:transform 0.5s}
.t-img.loaded{display:block}
.t-card:hover .t-img{transform:scale(1.05)}
.t-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;color:rgba(255,255,255,0.12);letter-spacing:4px}
.t-grad{position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(transparent,rgba(6,13,26,0.95))}
.t-info-overlay{position:absolute;bottom:0;left:0;right:0;padding:1.5rem}
.t-name{font-size:1.1rem;font-weight:800;color:#fff;line-height:1.2}
.t-role{font-size:0.7rem;color:var(--cyan);letter-spacing:2px;font-weight:700;margin-top:4px;text-transform:uppercase}
.t-body{padding:1.5rem}
.t-bio{font-size:0.84rem;color:var(--gray);line-height:1.65;margin-bottom:1rem}
.t-skills{display:flex;flex-wrap:wrap;gap:6px}
.t-skill{background:rgba(37,99,235,0.1);border:1px solid rgba(37,99,235,0.2);color:rgba(100,140,255,0.9);font-size:0.73rem;padding:4px 10px;border-radius:6px;font-weight:600}

/* ── WHY ── */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:3.5rem}
.w-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:2rem;display:flex;gap:1.5rem;align-items:flex-start;transition:all 0.3s}
.w-card:hover{background:rgba(37,99,235,0.06);border-color:rgba(37,99,235,0.22)}
.w-num{font-size:2.5rem;font-weight:900;color:rgba(37,99,235,0.25);line-height:1;flex-shrink:0;min-width:52px}
.w-title{font-size:1rem;font-weight:700;color:#fff;margin-bottom:0.5rem}
.w-desc{font-size:0.83rem;color:var(--gray);line-height:1.65}

/* ── CONTACT ── */
.contact-wrap{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:start}
.ci-h{font-size:2.4rem;font-weight:900;color:#fff;line-height:1.15;margin:1rem 0 1.2rem}
.ci-h em{background:linear-gradient(135deg,var(--cyan),var(--blue2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal}
.ci-p{color:var(--gray);line-height:1.75;margin-bottom:2.5rem;font-size:0.92rem}
.ci-detail{display:flex;align-items:center;gap:14px;margin-bottom:1.2rem;color:rgba(255,255,255,0.75);font-size:0.9rem}
.ci-ico-label{width:80px;font-size:0.7rem;letter-spacing:1.5px;color:var(--cyan);font-weight:700;text-transform:uppercase;flex-shrink:0}
.c-form{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:20px;padding:2.5rem}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cf-f{margin-bottom:1.2rem}
.cf-f label{display:block;color:rgba(255,255,255,0.4);font-size:0.7rem;letter-spacing:1.5px;margin-bottom:8px;text-transform:uppercase;font-weight:600}
.cf-f input,.cf-f textarea,.cf-f select{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:10px;padding:13px 16px;color:#fff;font-size:0.88rem;outline:none;transition:border-color 0.25s,background 0.25s;font-family:inherit;-webkit-appearance:none}
.cf-f input:focus,.cf-f textarea:focus,.cf-f select:focus{border-color:var(--cyan);background:rgba(0,200,232,0.04)}
.cf-f input::placeholder,.cf-f textarea::placeholder{color:rgba(255,255,255,0.2)}
.cf-f textarea{height:110px;resize:none}
.cf-f select option{background:#0a1628;color:#fff}
.cf-sub{width:100%;background:linear-gradient(135deg,var(--blue2),var(--cyan2));color:#fff;border:none;padding:15px;border-radius:10px;font-size:0.9rem;font-weight:700;cursor:pointer;letter-spacing:0.5px;transition:opacity 0.2s,transform 0.2s;margin-top:0.5rem}
.cf-sub:hover{opacity:0.9;transform:translateY(-2px)}

/* ── FOOTER ── */
footer{background:#040a12;border-top:1px solid rgba(255,255,255,0.05);padding:4rem 3rem 2rem}
.footer-inner{max-width:1300px;margin:0 auto}
.f-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,0.05)}
.footer-logo{height:44px;width:auto;object-fit:contain;filter:brightness(0) invert(1);margin-bottom:0.2rem}
.f-brand-p{color:rgba(255,255,255,0.35);font-size:0.83rem;line-height:1.75;margin-top:1.2rem;max-width:280px}
.f-col h4{color:#fff;font-size:0.82rem;font-weight:700;letter-spacing:1.5px;margin-bottom:1.2rem;text-transform:uppercase}
.f-col a{display:block;color:rgba(255,255,255,0.35);font-size:0.83rem;text-decoration:none;margin-bottom:0.65rem;transition:color 0.2s}
.f-col a:hover{color:var(--cyan)}
.f-bot{display:flex;justify-content:space-between;align-items:center;padding-top:1.8rem}
.f-copy{color:rgba(255,255,255,0.25);font-size:0.78rem}
.f-copy em{color:var(--cyan);font-style:normal}
.socials{display:flex;gap:10px}
.soc{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);display:grid;place-items:center;color:rgba(255,255,255,0.4);text-decoration:none;font-size:0.72rem;font-weight:700;letter-spacing:0;transition:all 0.2s}
.soc:hover{background:rgba(0,200,232,0.12);border-color:rgba(0,200,232,0.3);color:var(--cyan)}

/* ── SCROLL TOP ── */
#stt{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;background:linear-gradient(135deg,var(--blue2),var(--cyan2));color:#fff;border:none;border-radius:11px;cursor:pointer;font-size:1.2rem;display:none;align-items:center;justify-content:center;z-index:800;transition:transform 0.2s}
#stt.show{display:flex}
#stt:hover{transform:translateY(-3px)}

/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(30px);transition:opacity 0.75s ease,transform 0.75s ease}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:0.1s}.d2{transition-delay:0.18s}.d3{transition-delay:0.26s}
.d4{transition-delay:0.34s}.d5{transition-delay:0.42s}.d6{transition-delay:0.5s}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .hero-wrap,.about-grid,.contact-wrap{grid-template-columns:1fr}
  .h-panel,.about-img-zone{display:none}
  .services-grid{grid-template-columns:1fr 1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .team-row{grid-template-columns:1fr;max-width:480px}
  .why-grid{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr 1fr}
  #nav{padding:0 1.5rem}
  .sec,#contact{padding:5rem 1.5rem}
  #hero{padding:100px 1.5rem 4rem}
  footer{padding:3rem 1.5rem 1.5rem}
  .n-links{display:none}
}
@media(max-width:600px){
  .h-title{font-size:2.4rem}
  .sec-h{font-size:2rem}
  .services-grid{grid-template-columns:1fr}
  .cf-row{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .f-top{grid-template-columns:1fr}
}