:root{
  --bg:#07090e;
  --panel:#0d1220;
  --panel2:#0b1020;
  --text:#e9eefc;
  --muted:#aab3c7;
  --line:rgba(255,255,255,.10);
  --brand:#7c3aed;
  --brand2:#22c55e;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.22), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(34,197,94,.12), transparent 55%),
              radial-gradient(800px 500px at 60% 110%, rgba(56,189,248,.10), transparent 55%),
              var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.container-narrow{max-width:1100px}

/* subtle animated grid */
.bg-grid{position:fixed;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay}
.bg-grid:before{
  content:"";position:absolute;inset:-2px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(60% 45% at 50% 20%, #000 55%, transparent 78%);
  animation: gridFloat 10s ease-in-out infinite;
}
@keyframes gridFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* grain */
.grain{position:fixed;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:overlay}
.grain:before{content:"";position:absolute;inset:-50%;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="3" stitchTiles="stitch"/></filter><rect width="260" height="260" filter="url(%23n)" opacity="0.8"/></svg>');
  transform:translate3d(0,0,0);
  animation: grainMove 8s steps(6) infinite;
}
@keyframes grainMove{0%{transform:translate(-10%,-10%)}100%{transform:translate(10%,10%)}}

/* Navbar */
.navbar{backdrop-filter: blur(14px);background:rgba(7,9,14,.55) !important;border-bottom:1px solid var(--line)}
.navbar .nav-link{color:rgba(233,238,252,.78) !important;font-weight:500}
.navbar .nav-link:hover{color:var(--text) !important}
.navbar-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}

.brand-logo{height:26px;width:auto;display:block;filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));}
.brand-text{font-weight:800;letter-spacing:.2px}
@media (max-width: 575px){
  .brand-logo{height:24px}
}

.brand-dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--brand),#38bdf8);box-shadow:0 0 0 6px rgba(124,58,237,.14)}
.btn-brand{
  border:1px solid rgba(124,58,237,.45) !important;
  background:rgba(124,58,237,.14) !important;
  color:var(--text) !important;
}
.btn-brand:hover{background:rgba(124,58,237,.22) !important}

/* Hero */
.hero{padding:84px 0 56px}
.kicker{display:inline-flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);color:rgba(233,238,252,.85)}
.kicker .pulse{width:8px;height:8px;border-radius:999px;background:var(--brand2);box-shadow:0 0 0 0 rgba(34,197,94,.45);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.hero h1{font-size: clamp(2.2rem, 3.2vw, 3.6rem);line-height:1.08;font-weight:900;letter-spacing:-.02em}
.hero p{color:rgba(233,238,252,.70);font-size:1.05rem;max-width:56ch}
.hero-card{border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border-radius:22px;box-shadow:var(--shadow)}
.hero-card .stat{border-top:1px solid var(--line)}

/* cards */
.card-dark{border:1px solid var(--line);background:rgba(13,18,32,.70);border-radius:18px;box-shadow: 0 14px 36px rgba(0,0,0,.35)}
.card-dark:hover{transform:translateY(-2px);transition:transform .25s ease}
.card-dark .muted{color:rgba(233,238,252,.65)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:rgba(233,238,252,.75);font-size:.85rem}

/* sections */
.section{padding:56px 0}
.section-title{font-weight:850;letter-spacing:-.01em}
.section-sub{color:rgba(233,238,252,.65)}

/* portfolio */
.thumb{aspect-ratio: 16 / 10; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.03)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.thumb img:hover{transform:scale(1.06);transition:transform .45s ease}

/* footer */
.site-footer{border-top:1px solid var(--line);background:rgba(7,9,14,.55);backdrop-filter: blur(14px)}
.footer-muted{color:rgba(233,238,252,.60)}

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

/* Splash */
#splash{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background: radial-gradient(900px 500px at 30% 10%, rgba(124,58,237,.22), transparent 55%),
              radial-gradient(700px 450px at 80% 20%, rgba(34,197,94,.12), transparent 55%),
              var(--bg);
}
.splash-card{width:min(520px, 92vw);text-align:center;padding:28px 22px;border-radius:24px;border:1px solid var(--line);background:rgba(13,18,32,.70);box-shadow:var(--shadow)}
.splash-logo{display:flex;align-items:center;justify-content:center;gap:14px;font-weight:900;font-size:1.45rem;letter-spacing:.2px}
.splash-logo img{height:44px;width:auto;filter: drop-shadow(0 10px 30px rgba(0,0,0,.45))}
.splash-sub{margin-top:8px;color:rgba(233,238,252,.65)}
.progress{height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.10)}
.progress-bar{background:linear-gradient(90deg, var(--brand), #38bdf8, var(--brand2))}

/* Forms */
.form-control, .form-select{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text)}
.form-control:focus, .form-select:focus{border-color:rgba(124,58,237,.55);box-shadow:0 0 0 .25rem rgba(124,58,237,.18);background:rgba(255,255,255,.05);color:var(--text)}

/* helpers */
.hr-soft{border-top:1px solid rgba(255,255,255,.10)}



.service-card{overflow:hidden}
.service-media{aspect-ratio:16/9;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line)}
.service-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.05)}
.service-fallback{height:100%;display:flex;align-items:center;justify-content:center;color:rgba(233,238,252,.55);font-weight:700}
.fw-850{font-weight:850}

/* === Continuous Background Fix === */
html, body { min-height: 100%; }

body{
  background:
    radial-gradient(900px circle at 15% 70%, rgba(140, 60, 255, .25), transparent 60%),
    radial-gradient(850px circle at 85% 20%, rgba(60, 190, 255, .18), transparent 55%),
    radial-gradient(900px circle at 75% 90%, rgba(50, 255, 170, .12), transparent 60%),
    linear-gradient(180deg, #05060a 0%, #05060a 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #05060a;
}

section, main, .page-wrap, .container-wrap {
  background: transparent !important;
}


/* Mega menu */
.mega-dropdown .dropdown-menu.mega-menu{
  width:min(1100px,96vw);
  left:50%;
  transform:translateX(-50%);
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
}
.mega-title{font-weight:700;text-decoration:none;margin-bottom:.35rem}
.mega-desc{font-size:.9rem;color:rgba(0,0,0,.65);margin-bottom:.65rem;line-height:1.35}
.mega-list{list-style:none;padding:0;margin:0}
.mega-list li{margin:.25rem 0}
.mega-list a{text-decoration:none;color:rgba(0,0,0,.8)}
.mega-list a:hover{text-decoration:underline}
@media (max-width:991px){
  .mega-dropdown .dropdown-menu.mega-menu{
    width:100%;left:0;transform:none;border-radius:12px;
  }
}


/* ===== Layout shell: sticky footer (enterprise) ===== */
html,body{height:100%;}
.site-wrapper{min-height:100vh; display:flex; flex-direction:column;}
.site-main{flex:1 0 auto;}
.site-footer{margin-top:auto;}



/* ===== Professional Footer ===== */
.site-footer{border-top:1px solid rgba(255,255,255,.08);background:rgba(10,14,24,.55);backdrop-filter: blur(10px);}
.site-footer .footer-top{background:linear-gradient(180deg, rgba(124,58,237,.06), transparent 60%);}
.footer-brand-name{font-weight:800;letter-spacing:.2px}
.footer-logo{height:28px;max-height:28px;object-fit:contain;width:auto;display:block}
.footer-title{font-size:.95rem;font-weight:700;color:rgba(233,238,252,.92);margin-bottom:.65rem}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.footer-links a{color:rgba(233,238,252,.78)}
.footer-links a:hover{color:rgba(233,238,252,.98)}
.footer-cta-link{color:rgba(233,238,252,.92);font-weight:600}
.footer-muted{color:rgba(233,238,252,.68);font-size:.95rem}
.footer-social{display:flex;flex-wrap:wrap;gap:.5rem}
.footer-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .7rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(233,238,252,.82);font-size:.9rem}
.footer-pill:hover{background:rgba(255,255,255,.07);color:rgba(233,238,252,.98)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.15)}
@media (max-width: 575px){
  .footer-logo{height:32px}
}