/* =====================================================================
   PROJECT BINORIA X  —  Jamia Binoria Aalamia
   Master Stylesheet  ·  Design System v1.0
   One consistent design language across the entire institutional site.
   --------------------------------------------------------------------
   01. Design tokens          06. Buttons
   02. Base & reset           07. Cards & components
   03. Typography             08. Sections (eyebrow / heading)
   04. Layout & utilities     09. Header / mega-menu
   05. Signature motifs       10. Footer & floating UI
   ===================================================================== */

/* ============================ 01. TOKENS ============================ */
:root{
  /* Brand palette */
  --teal:        #005F63;   /* primary  */
  --teal-deep:   #00474A;
  --teal-700:    #013E40;
  --teal-900:    #022B2D;
  --gold:        #B8860B;   /* secondary */
  --gold-bright: #D4A422;
  --gold-soft:   #E7C873;
  --navy:        #14213D;   /* dark */
  --navy-deep:   #0D162B;

  --bg:          #F8FAFC;   /* background */
  --white:       #FFFFFF;
  --paper:       #FCFBF7;

  /* Ink scale */
  --ink:         #16202E;
  --ink-2:       #33414F;
  --muted:       #5B6B7A;
  --muted-2:     #8595A3;
  --line:        rgba(20,33,61,.10);
  --line-soft:   rgba(20,33,61,.06);
  --gold-line:   rgba(184,134,11,.32);

  /* Typography */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-arabic:  'Amiri', serif;
  --font-urdu:    'Noto Nastaliq Urdu', serif;

  /* Scale */
  --step--1: clamp(.78rem, .76rem + .1vw, .85rem);
  --step-0:  clamp(.95rem, .92rem + .15vw, 1.02rem);
  --step-1:  clamp(1.12rem, 1.05rem + .35vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.25rem + .7vw, 1.85rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.7rem);
  --step-4:  clamp(2.3rem, 1.8rem + 2.4vw, 3.9rem);
  --step-5:  clamp(2.9rem, 2.1rem + 3.6vw, 5.1rem);

  /* Structure */
  --container: 1240px;
  --container-narrow: 880px;
  --radius:   18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(20,33,61,.06);
  --shadow:    0 18px 50px -22px rgba(20,33,61,.30);
  --shadow-lg: 0 40px 90px -40px rgba(1,62,64,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 84px;
}

/* ============================ 02. BASE ============================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--step-0);
  line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--gold); color:#fff; }
:focus-visible{ outline:3px solid var(--gold-bright); outline-offset:3px; border-radius:4px; }

/* ========================= 03. TYPOGRAPHY ========================= */
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--navy); line-height:1.12;
  font-weight:600; letter-spacing:-.015em; margin:0 0 .5em; }
h1{ font-size:var(--step-5); font-weight:700; }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p{ margin:0 0 1.1em; color:var(--ink-2); }
.lead{ font-size:var(--step-1); color:var(--ink-2); line-height:1.6; }
.text-muted{ color:var(--muted); }
.arabic{ font-family:var(--font-arabic); direction:rtl; }
.urdu{ font-family:var(--font-urdu); direction:rtl; line-height:2.4; }
strong{ color:var(--ink); font-weight:600; }

/* ========================= 04. LAYOUT ============================ */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.section{ padding-block:clamp(64px,8vw,118px); position:relative; }
.section--tight{ padding-block:clamp(48px,5vw,72px); }
.bg-paper{ background:var(--paper); }
.bg-teal{ background:var(--teal-deep); color:#eaf3f2; }
.bg-teal h2,.bg-teal h3{ color:#fff; }
.bg-navy{ background:var(--navy-deep); color:#d7deeb; }
.bg-navy h2,.bg-navy h3{ color:#fff; }
.grid{ display:grid; gap:28px; }
@media(min-width:760px){ .g-2{ grid-template-columns:repeat(2,1fr); }
  .g-3{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(4,1fr); } }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.maxw-narrow{ max-width:var(--container-narrow); }
.divider-gold{ width:64px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft)); }

/* ====================== 05. SIGNATURE MOTIFS ===================== */
/* Gold eyebrow with a small girih diamond — the recurring brand cue */
.eyebrow{ display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-display); font-weight:600; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  margin-bottom:18px; }
.eyebrow::before{ content:""; width:9px; height:9px; transform:rotate(45deg);
  background:var(--gold); box-shadow:0 0 0 3px rgba(184,134,11,.18); }
.bg-teal .eyebrow,.bg-navy .eyebrow{ color:var(--gold-soft); }
.bg-teal .eyebrow::before,.bg-navy .eyebrow::before{ background:var(--gold-soft); }

/* Faint 8-point star girih watermark for section corners */
.girih-watermark{ position:absolute; inset:auto -40px -40px auto; width:340px;
  opacity:.05; pointer-events:none; color:var(--teal); }
.bg-teal .girih-watermark,.bg-navy .girih-watermark{ color:#fff; opacity:.06; }

/* ========================= 06. BUTTONS =========================== */
.btn{ --bh:#fff; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:14px 28px; border-radius:999px; border:1.5px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .3s, color .3s, border-color .3s; white-space:nowrap; }
.btn i,.btn svg{ width:1.05em; height:1.05em; }
.btn:hover{ transform:translateY(-3px); }
.btn--gold{ background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  color:#1c1402; box-shadow:0 14px 30px -12px rgba(184,134,11,.7); }
.btn--gold:hover{ box-shadow:0 20px 40px -14px rgba(184,134,11,.85); }
.btn--teal{ background:var(--teal); color:#fff; box-shadow:0 14px 30px -14px rgba(0,95,99,.7); }
.btn--ghost{ background:transparent; color:var(--teal); border-color:var(--gold-line); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--light{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.4);
  backdrop-filter:blur(6px); }
.btn--light:hover{ background:#fff; color:var(--teal-deep); }
.btn--lg{ padding:17px 36px; font-size:1.02rem; }

/* ======================= 07. CARDS ============================== */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--teal),var(--gold)); transform:scaleX(0);
  transform-origin:left; transition:transform .5s var(--ease); }
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:var(--gold-line); }
.card:hover::before{ transform:scaleX(1); }
.card__icon{ width:58px; height:58px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(0,95,99,.12),rgba(184,134,11,.12));
  color:var(--teal); margin-bottom:20px; }
.card__icon svg,.card__icon i{ width:26px; height:26px; font-size:24px; }
.card h3{ font-size:1.22rem; margin-bottom:.4em; }
.card p{ font-size:.95rem; margin-bottom:0; color:var(--muted); }
.card__link{ display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--gold);
  transition:gap .3s; }
.card:hover .card__link{ gap:13px; }

/* Stat counter */
.stat{ text-align:center; padding:18px 10px; }
.stat__num{ font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(2.3rem,1.6rem+2.6vw,3.4rem);
  background:linear-gradient(135deg,#fff,var(--gold-soft));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat__label{ display:block; margin-top:10px; font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.72); font-weight:500; }
.stat__plus{ color:var(--gold-soft); }

/* ===================== 08. SECTION HEADERS ====================== */
.section-head{ max-width:720px; margin-bottom:54px; }
.section-head.center{ margin-inline:auto; }
.section-head h2{ margin-bottom:.35em; }
.section-head p{ font-size:var(--step-1); color:var(--muted); margin-bottom:0; }

/* ========================= 09. HEADER =========================== */
.topbar{ background:var(--teal-900); color:rgba(255,255,255,.82);
  font-size:.82rem; border-bottom:1px solid rgba(255,255,255,.08); }
.topbar .container{ display:flex; align-items:center; justify-content:space-between;
  gap:18px; min-height:42px; flex-wrap:wrap; }
.topbar a{ display:inline-flex; align-items:center; gap:7px; transition:color .25s; }
.topbar a:hover{ color:var(--gold-soft); }
.topbar__left{ display:flex; gap:22px; flex-wrap:wrap; }
.topbar__social{ display:flex; gap:14px; }
.topbar__social a{ color:rgba(255,255,255,.7); }
.topbar .tb-wa{ background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  color:#1c1402 !important; font-weight:600; padding:4px 12px; border-radius:999px; }
.topbar .tb-wa:hover{ filter:brightness(1.07); color:#1c1402 !important; }

.site-header{ position:sticky; top:0; z-index:900; transition:all .4s var(--ease); }
.navbar{ background:rgba(255,255,255,.78); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line); transition:all .4s var(--ease); }
.site-header.scrolled .navbar{ background:rgba(255,255,255,.95);
  box-shadow:0 10px 40px -22px rgba(20,33,61,.4); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:var(--header-h); }
.brand{ display:flex; align-items:center; gap:13px; }
.brand__mark{ width:54px; height:54px; flex:none; object-fit:contain; }
.brand__name{ font-family:var(--font-display); font-weight:700; font-size:1.12rem;
  color:var(--navy); line-height:1.1; letter-spacing:-.01em; }
.brand__name span{ display:block; font-weight:500; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-top:2px; }

.nav-menu{ display:none; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav-menu li{ list-style:none; }
.nav-menu > li > a{ display:flex; align-items:center; gap:5px; padding:12px 15px;
  font-family:var(--font-display); font-weight:500; font-size:.92rem; color:var(--ink-2);
  border-radius:10px; transition:color .25s, background .25s; }
.nav-menu > li > a:hover{ color:var(--teal); background:rgba(0,95,99,.06); }
.nav-menu > li > a .chev{ width:14px; height:14px; transition:transform .3s; }
.has-mega{ position:static; }
.nav-actions{ display:flex; align-items:center; gap:12px; }

/* Mega menu */
.mega{ position:absolute; left:50%; transform:translateX(-50%) translateY(12px);
  top:calc(var(--header-h) + 1px); width:min(960px,94vw);
  background:#fff; border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-lg); padding:30px; opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), transform .3s var(--ease); z-index:950; }
.has-mega:hover .mega,.has-mega:focus-within .mega{ opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0); }
.mega__grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:26px; }
.mega__col h5{ font-family:var(--font-display); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin:0 0 14px; }
.mega__col a{ display:flex; gap:12px; padding:9px 10px; border-radius:11px;
  transition:background .25s; }
.mega__col a:hover{ background:rgba(0,95,99,.05); }
.mega__col a .mi{ width:34px; height:34px; flex:none; border-radius:9px; display:grid;
  place-items:center; background:rgba(0,95,99,.1); color:var(--teal); }
.mega__col a strong{ font-family:var(--font-display); font-weight:600; font-size:.9rem;
  color:var(--navy); display:block; }
.mega__col a small{ color:var(--muted); font-size:.78rem; }
.mega__feature{ background:linear-gradient(150deg,var(--teal-deep),var(--teal-900));
  border-radius:16px; padding:24px; color:#fff; display:flex; flex-direction:column;
  justify-content:flex-end; position:relative; overflow:hidden; min-height:180px; }
.mega__feature h4{ color:#fff; font-size:1.1rem; margin-bottom:.3em; }
.mega__feature p{ color:rgba(255,255,255,.78); font-size:.84rem; margin-bottom:14px; }

/* Mobile nav */
.nav-toggle{ display:inline-grid; place-items:center; width:46px; height:46px;
  border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--navy); }
.nav-toggle svg{ width:24px; height:24px; }
.mobile-nav{ position:fixed; inset:0 0 0 auto; width:min(380px,86vw);
  background:#fff; z-index:1000; transform:translateX(100%); transition:transform .45s var(--ease);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; padding:24px;
  overflow-y:auto; }
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav__head{ display:flex; justify-content:space-between; align-items:center;
  margin-bottom:18px; }
.mobile-nav a.m-link{ display:block; padding:14px 12px; font-family:var(--font-display);
  font-weight:500; color:var(--ink-2); border-bottom:1px solid var(--line-soft); }
.mobile-nav a.m-link:hover{ color:var(--teal); }
.m-sub{ padding-left:14px; }
.m-sub a{ font-size:.88rem; color:var(--muted); }
.scrim{ position:fixed; inset:0; background:rgba(13,22,43,.5); backdrop-filter:blur(2px);
  z-index:999; opacity:0; visibility:hidden; transition:.4s; }
.scrim.show{ opacity:1; visibility:visible; }
@media(min-width:1080px){ .nav-menu{ display:flex; } .nav-toggle{ display:none; } }

/* ====================== 10. FOOTER / FLOATING =================== */
.site-footer{ background:var(--navy-deep); color:#b7c1d4; padding-block:74px 0;
  position:relative; overflow:hidden; }
.site-footer h4{ color:#fff; font-size:1rem; letter-spacing:.04em; margin-bottom:20px; }
.footer-grid{ display:grid; gap:40px; grid-template-columns:1fr;
  position:relative; z-index:2; }
@media(min-width:760px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; } }
.footer-about p{ color:#9aa6bd; font-size:.92rem; }
.footer-links a{ display:inline-block; padding:6px 0; color:#9aa6bd; font-size:.92rem;
  transition:color .25s,padding-left .25s; }
.footer-links a:hover{ color:var(--gold-soft); padding-left:6px; }
.footer-contact li{ display:flex; gap:12px; margin-bottom:14px; font-size:.9rem; color:#9aa6bd; }
.footer-contact svg{ width:18px; height:18px; color:var(--gold-soft); flex:none; margin-top:3px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); margin-top:54px; padding-block:24px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.84rem; color:#7d8aa3; position:relative; z-index:2; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); color:#cdd5e6; transition:.3s; }
.footer-social a:hover{ background:var(--gold); color:#1c1402; transform:translateY(-3px); }

.float-wa{ position:fixed; right:22px; bottom:24px; z-index:880; width:60px; height:60px;
  border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.7); transition:transform .3s; }
.float-wa::after{ content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:waPulse 2.4s ease-out infinite; }
.float-wa:hover{ transform:scale(1.08); }
.float-wa svg{ width:30px; height:30px; }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }

.to-top{ position:fixed; right:24px; bottom:96px; z-index:870; width:48px; height:48px;
  border-radius:14px; background:var(--teal); color:#fff; display:grid; place-items:center;
  border:none; opacity:0; visibility:hidden; transform:translateY(12px);
  transition:.4s var(--ease); box-shadow:var(--shadow); }
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top svg{ width:22px; height:22px; }

/* ====================== LOADING SCREEN ========================= */
.loader{ position:fixed; inset:0; z-index:2000; background:var(--teal-900);
  display:grid; place-items:center; transition:opacity .7s ease, visibility .7s; }
.loader.done{ opacity:0; visibility:hidden; }
.loader__mark{ width:96px; height:96px; object-fit:contain; animation:loadSpin 1.4s var(--ease) infinite alternate; }
.loader__text{ position:absolute; bottom:18%; font-family:var(--font-display);
  letter-spacing:.4em; text-transform:uppercase; font-size:.7rem; color:var(--gold-soft); }
@keyframes loadSpin{ from{ transform:rotate(-8deg) scale(.96); opacity:.7; }
  to{ transform:rotate(8deg) scale(1.04); opacity:1; } }

/* ====================== AOS-LITE REVEALS ======================= */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease),
  transform .8s var(--ease); will-change:transform,opacity; }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="zoom"]{ transform:scale(.92); }
[data-delay="1"]{ transition-delay:.1s; }
[data-delay="2"]{ transition-delay:.2s; }
[data-delay="3"]{ transition-delay:.3s; }
[data-delay="4"]{ transition-delay:.4s; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; }
}