/* ==================================================================
   Nile Active — shared design system
   Included on every non-landing page.
   ================================================================== */

:root{
  --green-deep:#053B22;
  --green:#075F36;
  --green-mid:#0E6A3E;
  --green-poster:#1F8C55;
  --cream:#F6E8BD;
  --cream-soft:#FFF1C9;
  --ink:#02170D;
  --red:#D9342B;
  --red-soft:#F4B7B3;
  --night:#050908;
  --night-soft:#081A12;
  --heat-red:#F0442E;
  --heat-orange:#FF7A2F;
  --heat-yellow:#FFD45B;
  --acid:#C8FF5E;
  --cyan:#4EE0C1;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Archivo,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* -------- background grain -------- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.18;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.02  0 0 0 0 0.10  0 0 0 0 0.06  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.grain.on-dark{opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.91  0 0 0 0 0.74  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

main{position:relative;z-index:2}

/* -------- topbar : cream mode (light bg) -------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  height:84px;padding:0 54px;
  background:linear-gradient(90deg, rgba(246,232,189,0.72) 0%, rgba(246,232,189,0.5) 48%, rgba(255,241,201,0.28) 100%);
  border-bottom:1px solid rgba(5,59,34,0.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 12px 32px rgba(5,59,34,0.08);
  backdrop-filter:blur(16px) saturate(1.16);
  -webkit-backdrop-filter:blur(16px) saturate(1.16);
}
.topbar.on-dark{
  background:linear-gradient(90deg, rgba(3,32,19,0.72) 0%, rgba(5,59,34,0.5) 48%, rgba(7,95,54,0.28) 100%);
  border-bottom:1px solid rgba(246,232,189,0.22);
  box-shadow:inset 0 1px 0 rgba(246,232,189,0.18), 0 18px 52px rgba(0,0,0,0.18);
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;width:auto;display:block;filter:drop-shadow(0 3px 8px rgba(5,59,34,.15))}
.topbar.on-dark .brand img{filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);margin-left:auto;margin-right:18px;font-family:Anton,Impact,"Arial Narrow",sans-serif;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep)}
.topbar.on-dark .nav{color:var(--cream)}
.nav a{opacity:.78;transition:opacity .2s ease, transform .2s ease}
.nav a:hover{opacity:1;transform:translateY(-1px)}
.nav a.active{opacity:1;border-bottom:2px solid var(--green-deep);padding-bottom:4px}
.topbar.on-dark .nav a.active{border-bottom-color:var(--cream)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nb{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:108px;height:44px;border-radius:999px;border:1.5px solid var(--green-deep);color:var(--green-deep);font-family:Anton,Impact,sans-serif;font-size:15px;letter-spacing:.14em;text-transform:uppercase;transition:transform .2s ease, background .2s ease}
.nb:hover{transform:translateY(-1px);background:rgba(5,59,34,.06)}
.nb.primary{background:var(--green-deep);border-color:var(--green-deep);color:var(--cream)}
.nb.primary:hover{background:var(--green);color:var(--cream-soft)}
.topbar.on-dark .nb{border-color:rgba(246,232,189,.86);color:var(--cream)}
.topbar.on-dark .nb.primary{background:var(--cream);border-color:var(--cream);color:var(--green-deep)}
.involve-menu{position:relative}
.involve-toggle{appearance:none;background:transparent;cursor:pointer}
.involve-dropdown{
  position:absolute;right:0;top:calc(100% + 10px);z-index:40;
  min-width:260px;padding:10px;border-radius:16px;
  background:rgba(255,241,201,.96);color:var(--green-deep);
  border:1px solid rgba(5,59,34,.16);
  box-shadow:0 24px 70px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  backdrop-filter:blur(14px) saturate(1.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.12);
}
.topbar.on-dark .involve-dropdown{background:rgba(3,32,19,.96);color:var(--cream);border-color:rgba(246,232,189,.18)}
.involve-menu:hover .involve-dropdown,
.involve-menu:focus-within .involve-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.involve-dropdown a{display:block;padding:12px 13px;border-radius:10px;font-size:12px;font-weight:900;letter-spacing:.12em;line-height:1.25;text-transform:uppercase}
.involve-dropdown a:hover{background:rgba(5,59,34,.08)}
.topbar.on-dark .involve-dropdown a:hover{background:rgba(246,232,189,.12)}

/* -------- hero shared -------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.42em;text-transform:uppercase;font-weight:800;margin:0 0 20px}
.eyebrow .dot{width:8px;height:8px;border-radius:99px;background:var(--red);box-shadow:0 0 0 4px rgba(217,52,43,.18)}
.h1{margin:0;font-family:Anton,Impact,"Arial Narrow",sans-serif;font-style:italic;font-weight:900;letter-spacing:-.03em;line-height:.95;padding-top:.14em;text-transform:uppercase;font-size:clamp(78px,12vw,190px)}
.lede{max-width:640px;margin:22px 0 0;font-size:19px;line-height:1.6}
.arabic{font-family:Amiri,"Noto Naskh Arabic",serif;font-weight:700;font-size:22px;margin-top:14px;direction:rtl;letter-spacing:.02em;opacity:.85}

.hero-wrap{padding:80px 54px 24px;max-width:1320px;position:relative}
.hero-wrap.dark{color:var(--cream)}
.hero-wrap.dark .eyebrow{color:rgba(246,232,189,.7)}
.hero-wrap.dark .h1{color:var(--cream);text-shadow:0 20px 60px rgba(0,0,0,.35)}
.hero-wrap.dark .lede{color:rgba(246,232,189,.9)}

/* -------- section -------- */
section{padding:60px 54px;max-width:1440px;position:relative;z-index:2}
.sec-title{font-family:Anton,Impact,sans-serif;font-style:italic;font-size:clamp(38px,5vw,64px);letter-spacing:-.01em;line-height:.95;margin:0 0 6px;text-transform:uppercase}
.sec-kick{font-size:11px;letter-spacing:.42em;text-transform:uppercase;font-weight:800;margin-bottom:10px}

.dark-mode{background:var(--green-deep);color:var(--cream)}
.dark-mode .sec-title{color:var(--cream)}
.dark-mode .sec-kick{color:rgba(246,232,189,.6)}
.light-mode{background:var(--cream);color:var(--green-deep)}
.light-mode .sec-title{color:var(--green-deep)}
.light-mode .sec-kick{color:rgba(5,59,34,.55)}

/* -------- generic card -------- */
.card-cream{padding:24px;border-radius:20px;background:rgba(255,241,201,.9);border:1px solid rgba(5,59,34,.14);backdrop-filter:blur(8px);box-shadow:0 12px 40px rgba(5,59,34,.06)}
.card-green{padding:24px;border-radius:20px;background:linear-gradient(160deg,var(--green-deep),var(--green));color:var(--cream);border:1px solid rgba(246,232,189,.2)}
.card-green-glass{padding:24px;border-radius:20px;background:rgba(3,32,19,.42);color:var(--cream);border:1px solid rgba(246,232,189,.18);backdrop-filter:blur(14px)}

/* -------- CTA row -------- */
.cta-row{margin:24px 54px 40px;padding:34px 40px;border-radius:24px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  background:linear-gradient(100deg, var(--green-deep) 0%, var(--green) 100%);
  color:var(--cream);border:1px solid rgba(246,232,189,.2);box-shadow:0 30px 80px rgba(0,0,0,.24)}
.cta-row.light{background:linear-gradient(100deg, rgba(246,232,189,.94) 0%, rgba(246,232,189,.78) 60%, rgba(246,232,189,.6) 100%);color:var(--green-deep);border:1px solid rgba(246,232,189,.6)}
.cta-row h3{margin:0;font-family:Anton,Impact,sans-serif;font-style:italic;font-size:clamp(28px,3.6vw,46px);letter-spacing:-.01em;text-transform:uppercase;line-height:1}
.cta-row p{margin:6px 0 0;font-size:14px;max-width:520px;opacity:.82}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 22px;border-radius:99px;font-family:Anton,Impact,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:15px;transition:transform .2s ease, background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn.fill{background:var(--cream);color:var(--green-deep)}
.btn.line{background:transparent;color:var(--cream);border:1.5px solid var(--cream)}
.btn.fill-dark{background:var(--green-deep);color:var(--cream)}
.btn.line-dark{background:transparent;color:var(--green-deep);border:1.5px solid var(--green-deep)}
.btn.link-red{background:transparent;color:var(--red);border-bottom:2px solid var(--red);border-radius:0;height:44px;padding:0 4px}

/* -------- footer -------- */
footer{padding:22px 54px 34px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;border-top:1px solid rgba(5,59,34,.14);background:rgba(255,241,201,.6);backdrop-filter:blur(14px)}
footer.on-dark{border-top-color:rgba(246,232,189,.18);background:rgba(3,25,15,.5)}
footer .l{display:flex;gap:10px 22px;align-items:center;flex-wrap:wrap;max-width:100%;min-width:0;font-size:13px;letter-spacing:.06em}
footer .l a{overflow-wrap:anywhere}
footer .r{display:flex;gap:14px;align-items:center;font-family:Anton,Impact,sans-serif;letter-spacing:.24em;text-transform:uppercase;font-size:12px}
footer .r .ar{font-family:Amiri,serif;letter-spacing:0;font-size:16px}
footer.light-foot{color:rgba(5,59,34,.75)}
footer.light-foot .r .ar{color:var(--green-deep)}
footer.on-dark{color:rgba(246,232,189,.78)}
footer.on-dark .r .ar{color:var(--cream)}

/* -------- reveal animation -------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* -------- pill / tag -------- */
.pill{display:inline-block;padding:6px 12px;border-radius:99px;font-family:Anton,Impact,sans-serif;letter-spacing:.16em;font-size:12px;text-transform:uppercase;background:rgba(5,59,34,.05);border:1px solid rgba(5,59,34,.16);color:var(--green-deep)}
.pill.red{background:rgba(217,52,43,.12);border-color:rgba(217,52,43,.4);color:#8f1f19}
.pill.green{background:var(--green-deep);border-color:var(--green-deep);color:var(--cream)}
.pill.on-dark{background:rgba(3,32,19,.4);border:1px solid rgba(246,232,189,.28);color:rgba(246,232,189,.9)}

/* -------- sports-rave / thermal poster utilities -------- */
.thermal-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(80% 120% at 12% 15%, rgba(240,68,46,.4), transparent 48%),
    radial-gradient(70% 110% at 78% 18%, rgba(255,212,91,.32), transparent 46%),
    radial-gradient(70% 90% at 58% 88%, rgba(78,224,193,.22), transparent 54%),
    linear-gradient(145deg, rgba(5,9,8,.96), rgba(8,26,18,.92) 54%, rgba(5,59,34,.84));
  color:var(--cream);
  border:1px solid rgba(246,232,189,.22);
  box-shadow:0 28px 80px rgba(0,0,0,.28);
}
.thermal-card:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.14;
  mix-blend-mode:screen;
  background:
    radial-gradient(80% 70% at 12% 18%, rgba(246,232,189,.2), transparent 48%),
    radial-gradient(70% 80% at 86% 82%, rgba(246,232,189,.12), transparent 54%);
  pointer-events:none;
}
.thermal-card > *{position:relative;z-index:1}
.route-line{display:inline-flex;align-items:center;gap:10px;font-family:Anton,Impact,sans-serif;font-style:italic;letter-spacing:.12em;text-transform:uppercase}
.route-line:before,.route-line:after{content:"";width:9px;height:9px;border-radius:99px;background:var(--heat-red);box-shadow:0 0 0 5px rgba(240,68,46,.16)}

/* -------- responsive -------- */
@media (max-width:960px){
  .topbar{padding:0 22px;height:72px}
  .brand img{height:44px}
  .nav{display:none}
  .nb{min-width:auto;padding:0 14px;height:40px;font-size:12px}
  .involve-dropdown{right:auto;left:50%;min-width:min(86vw,280px);transform:translate(-50%,-6px)}
  .involve-menu:hover .involve-dropdown,
  .involve-menu:focus-within .involve-dropdown{transform:translate(-50%,0)}
  .hero-wrap{padding:56px 22px 20px}
  section{padding:44px 22px}
  .cta-row{margin:16px 22px 30px;padding:26px 22px}
  footer{padding:22px}
  footer .l{width:100%}
}