/* ════════════════════════════════════════════════════════════════════════
   SHIRWAN IT — Modern Navy & Gold theme + animations
   Loaded AFTER style.css to override the brand palette and add motion.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* Navy primary (overrides the old indigo brand vars) */
  --brand-600:#0b2a6b; --brand-700:#0a1f50; --brand-800:#071629;
  --brand-500:#1e3a8a; --brand-100:#dbe4f5; --brand-50:#eef3fb;
  --violet-600:#1e3a8a; --violet-500:#2563eb;
  --blue-900:#071629; --blue-800:#0a1c38; --blue-700:#0b2a6b;
  --blue-600:#123a7a; --blue-500:#1e3a8a; --blue-400:#3b82f6;
  --shadow:0 6px 28px rgba(11,42,107,.10);
  --shadow-lg:0 18px 60px rgba(11,42,107,.22);
  /* Gold accents */
  --gold:#E8B530; --gold-light:#FCE6A0; --gold-dark:#C8911A;
}

body{ background:#f7f9fc; }

/* ── NAV (glass) ───────────────────────────────────────────────────────── */
.nav{
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(255,255,255,.80);
  border-bottom:1px solid rgba(11,42,107,.08);
  transition:box-shadow .3s ease, background .3s ease;
}
.nav.scrolled{ box-shadow:0 8px 28px rgba(11,42,107,.12); background:rgba(255,255,255,.94); }
.nav-logo-name{ color:#0b2a6b; letter-spacing:.3px; }
.nav-logo-icon{ transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.nav-logo:hover .nav-logo-icon{ transform:rotate(-6deg) scale(1.07); }
.nav-link{ position:relative; transition:color .2s ease; }
.nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-dark));
  transform:scaleX(0); transform-origin:center; transition:transform .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }
.nav-link:hover, .nav-link.active{ color:#0b2a6b; }
.lang-btn.active{ background:#0b2a6b; color:#fff; }
.nav-login-btn{
  background:linear-gradient(135deg,#0b2a6b,#1e3a8a); color:#fff;
  box-shadow:0 4px 14px rgba(11,42,107,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav-login-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(11,42,107,.34); }

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero{
  background:
    radial-gradient(1100px 560px at 82% -12%, #11317a 0%, transparent 60%),
    linear-gradient(158deg,#071629 0%,#0b2a6b 55%,#11317a 100%);
  color:#eaf0fb; overflow:hidden;
}
.hero-title{ color:#fff; }
.hero-desc{ color:#c7d3ea; }
.gradient-text{
  background:linear-gradient(135deg,#FCE6A0 0%,#E8B530 45%,#C8911A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero-badge{
  background:rgba(232,181,48,.14); color:#FCE6A0;
  border:1px solid rgba(232,181,48,.38);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.hero-blob{ animation:floaty 10s ease-in-out infinite; }
.hero-blob.blob-1{ background:radial-gradient(circle,#1e3a8a,transparent 70%); }
.hero-blob.blob-2{ background:radial-gradient(circle,#E8B530,transparent 70%); opacity:.18; animation-duration:13s; animation-direction:reverse; }
.hero-stat .stat-num{ color:#FCE6A0; }
.hero-stat{ color:#c7d3ea; }
.hero-stat-divider{ background:rgba(255,255,255,.18); }

/* hero entrance */
.hero-content > *{ animation:heroUp .8s cubic-bezier(.2,.8,.2,1) both; }
.hero-content > *:nth-child(1){ animation-delay:.05s }
.hero-content > *:nth-child(2){ animation-delay:.15s }
.hero-content > *:nth-child(3){ animation-delay:.25s }
.hero-content > *:nth-child(4){ animation-delay:.35s }
.hero-content > *:nth-child(5){ animation-delay:.45s }
@keyframes heroUp{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
@keyframes floaty{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,-24px) scale(1.08)} }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary-lg{
  background:linear-gradient(135deg,#E8B530,#C8911A); color:#0a1c38; font-weight:800;
  box-shadow:0 10px 30px rgba(232,181,48,.35);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary-lg:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(232,181,48,.46); filter:brightness(1.04); }
.btn-ghost-lg{ color:#eaf0fb; border:1.5px solid rgba(255,255,255,.42); transition:background .2s,border-color .2s,color .2s,transform .2s; }
.btn-ghost-lg:hover{ background:rgba(255,255,255,.10); border-color:#FCE6A0; color:#FCE6A0; transform:translateY(-2px); }

/* ── Section headings ──────────────────────────────────────────────────── */
.section-label{ color:var(--gold-dark); }
.section-title{ color:#0b2a6b; }
.services-section.alt-bg{ background:linear-gradient(180deg,#f2f6fc,#eaf0fb); }

/* ── Cards (hover lift) ────────────────────────────────────────────────── */
.service-card,.contact-card{
  border:1px solid rgba(11,42,107,.08);
  box-shadow:0 6px 24px rgba(11,42,107,.06);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.service-card:hover,.contact-card:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 48px rgba(11,42,107,.16);
  border-color:rgba(232,181,48,.5);
}
.service-icon{ box-shadow:0 8px 20px rgba(11,42,107,.18); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.service-card:hover .service-icon{ transform:scale(1.08) rotate(-4deg); }
.service-tag{ background:rgba(232,181,48,.16); color:var(--gold-dark); }
.contact-icon{ color:#0b2a6b; }

/* ── Verify card ───────────────────────────────────────────────────────── */
.verify-card{ box-shadow:0 18px 60px rgba(11,42,107,.12); border:1px solid rgba(11,42,107,.06); }
.verify-btn{ background:linear-gradient(135deg,#0b2a6b,#1e3a8a); }
.verify-tab.active{ color:#0b2a6b; }
.verify-input:focus{ border-color:#1e3a8a; box-shadow:0 0 0 3px rgba(30,58,138,.14); }

/* ── About demo ────────────────────────────────────────────────────────── */
.demo-badge.verified{ background:linear-gradient(135deg,#0b2a6b,#1e3a8a); color:#FCE6A0; }
.feature-check{ background:linear-gradient(135deg,#E8B530,#C8911A); color:#0a1c38; }
.demo-amount, .demo-status{ color:#0b2a6b; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer{ background:linear-gradient(160deg,#0a1c38,#071629); color:#c7d3ea; }
.footer-brand-name{ color:#fff; }
.footer-links a{ color:#c7d3ea; transition:color .2s ease; }
.footer-links a:hover{ color:#FCE6A0; }

/* ── Scroll-reveal animation ───────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-content > *{ animation:none; }
  .hero-blob{ animation:none; }
  .nav-logo:hover .nav-logo-icon{ transform:none; }
}