/* ===== Saiful Islam — Design System v2 ===== */
:root{
  --navy-950:#0B0B16;
  --navy-900:#14142A;
  --navy-800:#1E1E3B;
  --navy-700:#2A2A50;
  --orange:#FF6B2B;
  --orange-soft:#FFB088;
  --purple:#8B5CF6;
  --purple-soft:#C4B0FA;
  --cream:#F6F4EF;
  --muted:#A6A9C8;
  --line: rgba(246,244,239,0.10);
  --font-display:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--navy-950); color:var(--cream);
  font-family:var(--font-body); line-height:1.6; overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
svg.icon{display:block;}

/* SPLASH / PAGE-LOAD INTRO */
#splash{
  position:fixed;inset:0;z-index:200;background:var(--navy-950);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .5s ease, visibility .5s ease;
}
#splash img{width:64px;height:64px;object-fit:contain;animation:splashPop 1.1s cubic-bezier(.34,1.56,.64,1) forwards;}
#splash .splash-name{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:0.04em;color:var(--cream);
  opacity:0;animation:splashFade .6s ease forwards .5s;}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none;}
@keyframes splashPop{0%{transform:scale(0.4);opacity:0;}60%{transform:scale(1.08);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes splashFade{to{opacity:1;}}
@media (prefers-reduced-motion: reduce){ #splash{display:none;} }

/* grain + ambient */
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.ambient-glow{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.ambient-glow span{position:absolute;border-radius:50%;filter:blur(70px);opacity:0.20;}
.ambient-glow .a1{width:420px;height:420px;background:var(--orange);top:-10%;left:-8%;animation:floatA 16s ease-in-out infinite;}
.ambient-glow .a2{width:480px;height:480px;background:var(--purple);top:40%;right:-12%;animation:floatB 19s ease-in-out infinite;}
.ambient-glow .a3{width:360px;height:360px;background:var(--purple);bottom:-10%;left:30%;animation:floatC 21s ease-in-out infinite;}
@keyframes floatA{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,60px);}}
@keyframes floatB{0%,100%{transform:translate(0,0);}50%{transform:translate(-50px,-30px);}}
@keyframes floatC{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-50px);}}

/* progress bar */
.progress-bar{position:fixed;top:0;left:0;height:3px;width:0%;z-index:70;
  background:linear-gradient(90deg,var(--orange),var(--purple));transition:width .1s linear;}

/* NAV */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(11,11,22,0.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.nav-inner{max-width:1180px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;}
.nav-brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:600;font-size:15px;}
.nav-brand img{width:38px;height:38px;object-fit:contain;}
.nav-links{display:flex;gap:26px;font-size:14px;color:var(--muted);}
.nav-links a{transition:color .25s;}
.nav-links a:hover, .nav-links a.active{color:var(--cream);}
.nav-cta{padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:600;
  background:linear-gradient(120deg,var(--orange),var(--purple));color:#0B0B16;}
.menu-btn{display:none;background:none;border:none;color:var(--cream);cursor:pointer;padding:6px;}
.menu-btn svg{width:26px;height:26px;}
.mobile-menu{position:fixed;top:0;right:-100%;width:78%;max-width:340px;height:100vh;z-index:80;
  background:var(--navy-900);border-left:1px solid var(--line);padding:100px 32px 32px;
  display:flex;flex-direction:column;gap:8px;transition:right .4s cubic-bezier(.4,0,.2,1);}
.mobile-menu.open{right:0;}
.mobile-menu a{padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:500;}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:75;opacity:0;pointer-events:none;transition:opacity .3s;}
.menu-overlay.open{opacity:1;pointer-events:auto;}
@media(max-width:860px){ .nav-links{display:none;} .menu-btn{display:block;} }

/* PAGE HERO (top banner on every non-home page) */
.page-hero{padding:150px 0 60px;position:relative;z-index:1;}
.page-eyebrow{font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--orange-soft);
  font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.page-eyebrow::before{content:'';width:22px;height:1px;background:var(--orange);display:inline-block;}
.page-title{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,5vw,54px);line-height:1.08;margin:0 0 18px;}
.page-title .accent{background:linear-gradient(100deg,var(--orange),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;}
.page-lead{font-size:17px;color:var(--muted);max-width:640px;}

/* responsive split layouts (hero, about, contact) */
.split-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:center;}
.split-grid.rev{grid-template-columns:0.85fr 1.15fr;}
.split-grid.card-media{grid-template-columns:0.8fr 1.2fr;gap:36px;}
.media-frame{border-radius:22px;overflow:hidden;border:1px solid var(--line);}
.media-frame img{width:100%;object-fit:cover;}
.hero-photo-frame{position:relative;width:320px;height:320px;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,0.55);margin-left:auto;}
.hero-photo-frame img{width:100%;height:100%;object-fit:cover;}
@media(max-width:860px){
  .split-grid, .split-grid.rev, .split-grid.card-media{grid-template-columns:1fr;gap:32px;}
  .hero-photo-frame{width:100%;max-width:320px;margin:0 auto;}
}

.section-pad{padding:60px 0;position:relative;z-index:1;}
.sec-eyebrow{font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--purple-soft);font-weight:600;margin-bottom:14px;}
h2.sec-title{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,36px);margin:0 0 16px;letter-spacing:-0.01em;}
.sec-lead{color:var(--muted);font-size:16px;max-width:620px;}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ===== STACKING CARD SYSTEM ===== */
.stack{position:relative;padding-bottom:40px;}
.stack-card{
  position:sticky;
  border-radius:26px;
  padding:44px;
  margin-bottom:22px;
  background:linear-gradient(155deg, var(--navy-900) 0%, var(--navy-950) 100%);
  border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(0,0,0,0.5);
  overflow:hidden;
  isolation:isolate;
}
.stack-card::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,20%), rgba(255,107,43,0.16), transparent 60%);
  opacity:0;transition:opacity .35s ease;
}
.stack-card.glow-purple::before{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,20%), rgba(139,92,246,0.18), transparent 60%);
}
.stack-card:hover::before, .stack-card.touched::before{opacity:1;}
.stack-card > *{position:relative;z-index:1;}
.stack-icon{position:absolute;right:-10px;bottom:-16px;width:180px;height:180px;opacity:0.10;z-index:0;pointer-events:none;}
.stack-icon svg{width:100%;height:100%;}
.stack-card:nth-child(1){top:88px;z-index:1;}
.stack-card:nth-child(2){top:104px;z-index:2;}
.stack-card:nth-child(3){top:120px;z-index:3;}
.stack-card:nth-child(4){top:136px;z-index:4;}
.stack-card:nth-child(5){top:152px;z-index:5;}
.stack-card:nth-child(6){top:168px;z-index:6;}
.stack-card:nth-child(7){top:184px;z-index:7;}
.stack-card:nth-child(8){top:200px;z-index:8;}
.card-eyebrow{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange-soft);font-weight:600;margin-bottom:14px;}
.card-eyebrow.purple{color:var(--purple-soft);}
.card-icon-badge{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,0.05);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.card-icon-badge svg{width:24px;height:24px;}
.card-title{font-family:var(--font-display);font-weight:700;font-size:24px;margin:0 0 12px;}
.card-text{color:#D8D9EC;font-size:15px;line-height:1.65;}
@media(max-width:640px){
  .stack-card{padding:30px 24px;}
  .stack-icon{width:120px;height:120px;}
}

/* Buttons */
.btn{padding:14px 26px;border-radius:10px;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:9px;
  transition:transform .25s, box-shadow .25s;}
.btn-primary{background:var(--orange);color:#140A05;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,107,43,0.35);}
.btn-ghost{border:1px solid var(--line);color:var(--cream);background:rgba(255,255,255,0.02);}
.btn-ghost:hover{border-color:var(--purple);background:rgba(139,92,246,0.08);transform:translateY(-2px);}
.magnetic{display:inline-block;}

/* Contact icon grid (reused on contact page + footer) */
.contact-icons{display:flex;gap:16px;flex-wrap:wrap;}
.cicon{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:rgba(11,11,22,0.4);transition:transform .3s, box-shadow .3s, border-color .3s;}
.cicon:hover{transform:translateY(-5px) scale(1.06);}
.cicon svg{width:24px;height:24px;}
.cicon.wa:hover{border-color:#4ADE80;box-shadow:0 10px 30px rgba(74,222,128,0.25);}
.cicon.em:hover{border-color:var(--orange-soft);box-shadow:0 10px 30px rgba(255,176,136,0.25);}
.cicon.fb:hover, .cicon.li:hover{border-color:#4C8EFF;box-shadow:0 10px 30px rgba(76,142,255,0.25);}
.cicon.ig:hover{border-color:var(--purple-soft);box-shadow:0 10px 30px rgba(196,176,250,0.25);}

footer{padding:44px 0;border-top:1px solid var(--line);position:relative;z-index:1;}
.foot-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:14px;}
.foot-brand img{width:26px;height:26px;}
.foot-note{color:var(--muted);font-size:13px;}

.fab-wa{position:fixed;bottom:26px;right:26px;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--purple));display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,0.4);z-index:50;transition:transform .3s;}
.fab-wa:hover{transform:scale(1.08);}
.fab-wa svg{width:26px;height:26px;}

::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--navy-950);}
::-webkit-scrollbar-thumb{background:var(--navy-700);border-radius:10px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
  .stack-card{position:relative !important;top:auto !important;}
}
@media(max-width:760px){
  .stack-card:nth-child(n){top:76px;}
}