:root{
  --navy:#0b2f6b;
  --blue:#1558d6;
  --blue-light:#3b82f6;
  --sky:#e8f1ff;
  --white:#ffffff;
  --ink:#0f1b33;
  --muted:#5b6b8c;
  --radius:16px;
  --shadow:0 10px 30px rgba(21,88,214,.12);
  --shadow-lg:0 20px 50px rgba(11,47,107,.18);
}

*{box-sizing:border-box}
body{
  font-family:'Poppins',-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
}
a{text-decoration:none}
h1,h2,h3,h4,h5{font-family:'Poppins',sans-serif;font-weight:700;color:var(--navy)}

/* ---------- Navbar ---------- */
.navbar-nofyl{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 2px 20px rgba(11,47,107,.06);
  position:sticky;top:0;z-index:1000;
  transition:all .3s ease;
}
.navbar-nofyl.scrolled{
  background:rgba(255,255,255,.97);
  box-shadow:0 6px 24px rgba(11,47,107,.1);
  padding-top:.6rem!important;padding-bottom:.6rem!important;
}
.navbar-nofyl .dropdown-menu{
  border:none;border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;
  animation:dropIn .2s ease both;
}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.navbar-nofyl .dropdown-item{border-radius:8px;padding:9px 14px;font-weight:500;transition:all .2s ease}
.navbar-nofyl .dropdown-item:hover{background:var(--sky);color:var(--blue);padding-left:18px}
.navbar-nofyl .navbar-brand{font-weight:800;color:var(--navy);font-size:1.4rem}
.navbar-nofyl .navbar-brand span{color:var(--blue)}
.navbar-nofyl .nav-link{
  color:var(--ink)!important;font-weight:600;margin:0 6px;position:relative;
}
.navbar-nofyl .nav-link::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--blue);
  transition:width .25s ease;
}
.navbar-nofyl .nav-link:hover::after,.navbar-nofyl .nav-link.active::after{width:100%}
.navbar-nofyl .nav-link:hover{color:var(--blue)!important}

/* ---------- Buttons ---------- */
.btn-nofyl{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%);
  background-size:200% auto;
  color:#fff;border:none;padding:12px 30px;border-radius:50px;font-weight:600;
  box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease, background-position .5s ease;
  display:inline-block;
}
.btn-nofyl:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-lg);color:#fff;background-position:right center}
.btn-nofyl:active{transform:translateY(-1px) scale(.98)}
.btn-outline-nofyl{
  border:2px solid var(--blue);color:var(--blue);padding:10px 28px;border-radius:50px;font-weight:600;
  transition:all .25s ease;background:transparent;display:inline-block;
}
.btn-outline-nofyl:hover{background:var(--blue);color:#fff;transform:translateY(-3px)}

/* ripple click effect, applied via JS */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rippleAnim .6s ease-out;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(3);opacity:0}}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:2000;
  background:linear-gradient(90deg,var(--blue-light),var(--blue),var(--navy));
  transition:width .1s ease-out;
}

/* ---------- Text gradient ---------- */
.text-gradient{
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-light) 60%,var(--navy) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:linear-gradient(120deg,var(--navy) 0%,var(--blue) 55%,var(--blue-light) 100%);
  background-size:220% 220%;
  animation:heroShift 14s ease infinite;
  color:#fff;padding:150px 0 110px;overflow:hidden;
}
@keyframes heroShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.hero::before, .hero::after{
  content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.08);
  animation:float 8s ease-in-out infinite;
}
.hero::before{width:320px;height:320px;top:-100px;right:-80px}
.hero::after{width:200px;height:200px;bottom:-60px;left:-40px;animation-delay:2s}
@keyframes float{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-25px) scale(1.05)}
}
/* floating dot-grid + soft orb layers for depth */
.hero .hero-grid{
  position:absolute;inset:0;z-index:1;opacity:.35;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.5px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 90%);
}
.hero .orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;z-index:1}
.hero .orb-a{width:16px;height:16px;background:rgba(255,255,255,.55);top:22%;left:12%;animation:drift 10s ease-in-out infinite}
.hero .orb-b{width:10px;height:10px;background:rgba(255,255,255,.4);top:65%;left:78%;animation:drift 12s ease-in-out infinite reverse}
.hero .orb-c{width:22px;height:22px;background:rgba(255,255,255,.25);top:75%;left:20%;animation:drift 9s ease-in-out infinite 1s}
@keyframes drift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(18px,-22px)}
}
.hero h1{
  color:#fff;font-size:3.4rem;font-weight:800;line-height:1.12;letter-spacing:-.5px;
}
.hero p.lead{color:#e3ecff;font-size:1.15rem;max-width:640px;animation:heroTextIn .8s ease .1s both}
.hero .mt-4{animation:heroTextIn .8s ease .2s both}
@keyframes heroTextIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Section titles ---------- */
.section-eyebrow{
  color:var(--blue);text-transform:uppercase;letter-spacing:2px;font-weight:700;font-size:.8rem;
}

/* ---------- Split-text word reveal ---------- */
.split-word{display:inline-block;opacity:0;transform:translateY(100%) rotate(3deg);transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1)}
.split-word.in{opacity:1;transform:translateY(0) rotate(0)}
.split-line{display:inline-block;overflow:hidden;vertical-align:top}

/* ---------- Marquee ticker ---------- */
.marquee-strip{
  background:linear-gradient(90deg,var(--navy),var(--blue));
  overflow:hidden;white-space:nowrap;padding:14px 0;position:relative;z-index:2;
}
.marquee-track{display:inline-flex;animation:marqueeScroll 28s linear infinite}
.marquee-strip:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  color:#fff;font-weight:600;font-size:.95rem;letter-spacing:.5px;padding:0 28px;
  display:inline-flex;align-items:center;gap:10px;opacity:.92;
}
.marquee-track span i{color:#8fb4ff;font-size:.6rem}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Blob shapes ---------- */
.blob{
  position:absolute;z-index:0;filter:blur(0px);pointer-events:none;
  animation:blobMorph 12s ease-in-out infinite, blobFloat 16s ease-in-out infinite;
  opacity:.5;
}
@keyframes blobMorph{
  0%,100%{border-radius:42% 58% 65% 35% / 45% 45% 55% 55%}
  33%{border-radius:65% 35% 40% 60% / 60% 40% 60% 40%}
  66%{border-radius:35% 65% 55% 45% / 40% 60% 40% 60%}
}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(24px,-28px) rotate(8deg)}
}
.blob-1{width:380px;height:380px;background:rgba(255,255,255,.1);top:-140px;right:-100px}
.blob-2{width:280px;height:280px;background:rgba(255,255,255,.08);bottom:-120px;left:-80px;animation-delay:2s, 3s}

/* ---------- Wave divider ---------- */
.wave-divider{display:block;width:100%;line-height:0;position:relative;z-index:2;margin-top:-2px}
.wave-divider svg{width:100%;height:60px;display:block}

/* ---------- Magnetic buttons ---------- */
.magnetic{will-change:transform}

/* ---------- Tilt cards ---------- */
.tilt-card{transform-style:preserve-3d;will-change:transform}

/* ---------- Reveal-on-scroll (stronger than AOS defaults) ---------- */
.reveal{opacity:0;transform:translateY(40px) scale(.97);transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:translateY(0) scale(1)}

/* ---------- Floating CTA (WhatsApp/contact pulse) ---------- */
.float-cta{
  position:fixed;left:24px;bottom:24px;z-index:999;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#25D366,#1ebe57);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;box-shadow:0 10px 30px rgba(37,211,102,.4);
}
.float-cta::before{
  content:'';position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.6);
  animation:pulseRing 2s ease-out infinite;z-index:-1;
}
@keyframes pulseRing{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.9);opacity:0}
}
.float-cta:hover{transform:scale(1.08);color:#fff}

/* ---------- Section title underline sweep ---------- */
.section-title{position:relative;display:inline-block}
.section-divider{
  width:60px;height:4px;background:linear-gradient(90deg,var(--blue),var(--blue-light));
  border-radius:4px;margin-bottom:24px;transform-origin:left;transform:scaleX(0);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.section-divider.in{transform:scaleX(1)}

/* ---------- Cards ---------- */
.card-nofyl{
  background:#fff;border:1px solid #eef2fb;border-radius:var(--radius);
  box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  overflow:hidden;height:100%;
}
.card-nofyl:hover{transform:translateY(-8px) scale(1.015);box-shadow:var(--shadow-lg);border-color:rgba(21,88,214,.25)}
.card-nofyl .card-img-top{height:200px;object-fit:cover;transition:transform .5s ease}
.card-nofyl:hover .card-img-top{transform:scale(1.06)}
.badge-status-open{background:#e6f6ec;color:#188a4a;font-weight:600;padding:6px 14px;border-radius:50px}
.badge-status-closed{background:#fdeaea;color:#c0392b;font-weight:600;padding:6px 14px;border-radius:50px}
.badge-cat{background:var(--sky);color:var(--blue);font-weight:600;padding:5px 12px;border-radius:50px;font-size:.78rem}

/* ---------- Stats ---------- */
.stat-box{text-align:center;padding:20px;transition:transform .3s ease}
.stat-box:hover{transform:translateY(-4px)}
.stat-box .num{
  font-size:2.4rem;font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-box .label{color:var(--muted);font-weight:600}

/* ---------- Footer ---------- */
.footer-nofyl{background:var(--navy);color:#cdd9f7;padding:60px 0 20px}
.footer-nofyl h5{color:#fff}
.footer-nofyl a{color:#cdd9f7}
.footer-nofyl a:hover{color:#fff}
.social-circle{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);
  display:inline-flex;align-items:center;justify-content:center;margin-right:8px;
  transition:all .25s ease;color:#fff;
}
.social-circle:hover{background:var(--blue);transform:translateY(-4px)}

/* ---------- Gallery ---------- */
.gallery-item{border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow)}
.gallery-item img{width:100%;height:250px;object-fit:cover;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,47,107,.85) 100%);
  opacity:0;transition:opacity .3s ease;display:flex;align-items:flex-end;padding:16px;color:#fff;font-weight:600;
}
.gallery-item:hover .gallery-overlay{opacity:1}

/* ---------- Admin ---------- */
.admin-sidebar{
  background:var(--navy);min-height:100vh;color:#dfe8fb;
}
.admin-sidebar .brand{color:#fff;font-weight:800;padding:24px 20px;font-size:1.2rem;border-bottom:1px solid rgba(255,255,255,.1)}
.admin-sidebar a{
  color:#c6d4f5;display:flex;align-items:center;gap:10px;padding:12px 20px;font-weight:600;
  border-left:3px solid transparent;transition:all .2s ease;
}
.admin-sidebar a:hover, .admin-sidebar a.active{
  background:rgba(255,255,255,.08);color:#fff;border-left-color:var(--blue-light);
}
.admin-topbar{background:#fff;box-shadow:0 2px 10px rgba(11,47,107,.06);padding:16px 24px}
.stat-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;
  border-left:5px solid var(--blue);transition:transform .25s ease;
}
.stat-card:hover{transform:translateY(-5px)}

/* ---------- Fade/animate helpers (fallback if AOS unavailable) ---------- */
.fade-up{animation:fadeUp .7s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

@media (max-width: 768px){
  .hero h1{font-size:2.1rem}
  .hero{padding:100px 0 70px}
}

/* ---------- Page load fade ---------- */
body.preload *{transition:none!important}
body{animation:pageFadeIn .5s ease both}
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}

/* ---------- Back-to-top button ---------- */
.back-to-top{
  position:fixed;right:24px;bottom:24px;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all .3s ease;z-index:999;cursor:pointer;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-4px);filter:brightness(1.1)}

/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}