/* =========================================================================
   AFRISYNTECH — SHARED DESIGN SYSTEM
   Used by index.php (and any future page) for colors, buttons, cards,
   section titles, marquees and scroll-reveal. Link this file from
   WHICHEVER header.php is active on the site — it does not depend on
   or duplicate anything from your original template's main.css, so it
   is safe to load alongside it.
========================================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  /* ---- brand ---- */
  --cyan:#14C4ED; --cyan-dark:#0DA8CF; --cyan-deep:#086E8A;
  --cyan-light:#E8F9FD; --cyan-mid:#B3ECF9; --cyan-soft:#F2FBFE;
  --gold:#FEC43A; --gold-dark:#C9930A; --gold-light:#FFF7E3; --gold-mid:#FBE2A0;

  /* ---- ink / neutrals ---- */
  --ink:#0A1F2E; --ink-2:#0F2C40; --ink-3:#123350;
  --text-mid:#33566B; --text-muted:#65869A; --text-faint:#96B0C0;
  --white:#FFFFFF; --off-white:#F7FBFD; --light-bg:#EFF9FC;
  --border:#D8EEF6; --border-soft:#E9F5FA;

  /* ---- shadow / radius ---- */
  --shadow-xs:0 1px 6px rgba(10,31,46,.06);
  --shadow-sm:0 4px 18px rgba(10,31,46,.08);
  --shadow-md:0 12px 34px rgba(10,31,46,.12);
  --shadow-lg:0 26px 60px rgba(10,31,46,.16);
  --shadow-glow:0 10px 34px rgba(20,196,237,.28);
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;

  /* ---- type ---- */
  --f-display:'Space Grotesk',sans-serif;
  --f-body:'Inter',sans-serif;
  --f-mono:'JetBrains Mono',monospace;
}

body{font-family:var(--f-body);color:var(--ink);background:var(--white);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit}
::selection{background:var(--cyan);color:#fff}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--white)}
::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:4px}

.container{max-width:1220px;margin:0 auto;padding:0 28px}
.section{padding:96px 0}
.section.tight{padding:64px 0}
.bg-light{background:var(--light-bg)}
.bg-soft{background:var(--off-white)}
.bg-white{background:var(--white)}
.bg-ink{background:linear-gradient(160deg,var(--ink) 0%,var(--ink-3) 100%);color:#fff}
.text-center{text-align:center}
.text-center .section-sub{margin-left:auto;margin-right:auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-deep);
  background:var(--cyan-light);border:1px solid var(--cyan-mid);
  padding:6px 14px 6px 10px;border-radius:999px;margin-bottom:16px;
}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px var(--cyan-mid)}
.eyebrow.on-dark{background:rgba(20,196,237,.12);border-color:rgba(20,196,237,.3);color:var(--cyan)}

.h2-title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(28px,3.4vw,42px);line-height:1.15;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:16px;
}
.h2-title em{font-style:normal;color:var(--cyan-deep);position:relative}
.h2-title .gold{color:var(--gold-dark)}
.bg-ink .h2-title{color:#fff}
.bg-ink .h2-title em{color:var(--cyan)}

.section-sub{font-size:16.5px;color:var(--text-muted);line-height:1.75;max-width:580px}
.bg-ink .section-sub{color:rgba(255,255,255,.62)}

/* ---- buttons ---- */
.btn-a{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-body);font-weight:600;font-size:15px;
  padding:14px 28px;border-radius:11px;border:none;cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;white-space:nowrap}
.btn-cyan{background:var(--cyan);color:#fff}
.btn-cyan:hover{background:var(--cyan-dark);transform:translateY(-2px);box-shadow:var(--shadow-glow);color:#fff}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 30px rgba(254,196,58,.35)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border);}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan-deep);background:var(--cyan-soft)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,255,255,.2)}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn-outline-light:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.btn-sm{padding:10px 20px;font-size:13.5px;border-radius:9px}

/* ---- generic cards ---- */
.card-a{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card-a:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--cyan-mid)}

/* ---- badges/tags ---- */
.tag{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:11px;font-weight:600;
  background:var(--cyan-light);color:var(--cyan-deep);border:1px solid var(--cyan-mid);
  padding:4px 10px;border-radius:999px}

/* ---- marquee (used by tech / partner / country strips) ---- */
.marquee{overflow:hidden;position:relative}
.marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--_fade,#fff),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--_fade,#fff),transparent)}
.marquee.on-dark{--_fade:#0A1F2E}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marquee 32s linear infinite}
.marquee-track.rev{animation-direction:reverse;animation-duration:38s}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *{scroll-behavior:auto!important}
}