/* ============================================================
   SUDONICS LIMITED — Main Stylesheet
   File: css/styles.css
   
   TABLE OF CONTENTS
   ---------------------------------------------------------
   1.  Design Tokens (CSS Variables)
   2.  Reset & Base
   3.  Typography
   4.  Navigation
   5.  Shared Section Utilities
       5a. Labels
       5b. Titles
       5c. Body Text
       5d. Divider Rule
       5e. Buttons
   6.  Hero Section
   7.  Services Section  (light background)
   8.  About Section     (dark background)
   9.  Experience Section (light background)
   10. Industries Section (dark background)
   11. Partners Section  (light background)
   12. Why Sudonics Section (dark background)
   13. CTA Section
   14. Footer
   15. Scroll Reveal Animation
   16. Responsive / Media Queries
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   To rebrand: change values here — everything updates globally
   ============================================================ */
:root {
  /* ── Backgrounds ── */
  --dark:        #050d1f;   /* deepest dark (hero, industries, why) */
  --dark2:       #0a1628;   /* slightly lighter dark (about) */
  --light-bg:    #f0f4fb;   /* light section tint (services, experience) */
  --white:       #ffffff;   /* pure white (services, partners) */

  /* ── Brand Blues ── */
  --blue:        #0057FF;   /* primary brand blue — buttons, accents */
  --blue-hover:  #0044cc;   /* button hover state */
  --blue-light:  #e8f0ff;   /* very light blue tint for icons, badges */
  --cyan:        #00c6ff;   /* gradient end colour */
  --accent:      #38d9ff;   /* highlights, glows, active states */

  /* ── Text on Dark Backgrounds ── */
  --dh: #ffffff;            /* heading on dark */
  --db: #b0c4de;            /* body text on dark */
  --ds: #7a9abf;            /* secondary/muted on dark */

  /* ── Text on Light Backgrounds ── */
  --lh: #0d1f3c;            /* heading on light */
  --lb: #2a4468;            /* body text on light */
  --ls: #4a6888;            /* secondary on light */
  --lm: #6b85a8;            /* muted on light */
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--dark);
  color: var(--db);
  overflow-x: hidden;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, .logo {
  font-family: 'Syne', sans-serif;
}


/* ============================================================
   4. NAVIGATION
   Fixed top navbar — always dark regardless of section
   ============================================================ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 6vw;
  background: rgba(5, 13, 31, 0.93);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 87, 255, 0.14);
  transition: padding 0.3s, box-shadow 0.3s;
}

/* Logo */
.logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.logo span {
  color: var(--accent); /* The "NICS" part in cyan */
}

/* Nav links */
.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--white);
}

/* CTA button in nav */
.nav-cta {
  background: var(--blue) !important;
  color: var(--white) !important;
  padding: 0.5rem 1.3rem !important;
  border-radius: 5px;
  font-weight: 600 !important;
}
.nav-cta:hover {
  background: var(--blue-hover) !important;
}


/* ============================================================
   5. SHARED SECTION UTILITIES
   ============================================================ */

/* All sections get consistent vertical padding */
section {
  padding: 7rem 6vw;
  position: relative;
}

/* ── 5a. Section Labels (small uppercase text above headings) ── */
.lbl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.lbl::before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
}

/* Label on dark sections */
.lbl-dark         { color: var(--accent); }
.lbl-dark::before { background: var(--accent); }

/* Label on light sections */
.lbl-light         { color: var(--blue); }
.lbl-light::before { background: var(--blue); }

/* ── 5b. Section Titles ── */
.ttl {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 680px;
}
.ttl-dark  { color: var(--dh); }
.ttl-light { color: var(--lh); }

/* ── 5c. Section Body / Description Text ── */
.desc {
  margin-top: 0.9rem;
  font-size: 0.97rem;
  line-height: 1.8;
  font-weight: 300;
  max-width: 540px;
}
.desc-dark  { color: var(--db); }
.desc-light { color: var(--lb); }

/* ── 5d. Divider Rule between sections ── */
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 87, 255, 0.22), transparent);
  margin: 0 6vw;
}

/* ── 5e. Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1.9rem;
  border-radius: 6px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.22s;
  border: none;
  cursor: pointer;
}

/* Solid blue button (primary) */
.btn-blue {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 0 28px rgba(0, 87, 255, 0.28);
}
.btn-blue:hover {
  background: var(--blue-hover);
  transform: translateY(-2px);
}

/* Ghost button for dark backgrounds */
.btn-gd {
  background: transparent;
  color: var(--dh);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
.btn-gd:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* Ghost button for light backgrounds */
.btn-gl {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.btn-gl:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
}


/* ============================================================
   6. HERO SECTION  (dark background)
   ============================================================ */
#hero {
  background: var(--dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 9rem;
  overflow: hidden;
}

/* Subtle grid lines in background */
.hgrid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 87, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 87, 255, 0.07) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
}

/* Glow orbs */
.hglow1 {
  position: absolute;
  width: 650px; height: 650px;
  border-radius: 50%;
  top: -80px; right: -120px;
  background: radial-gradient(circle, rgba(0, 87, 255, 0.2) 0%, transparent 65%);
  pointer-events: none;
}
.hglow2 {
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  bottom: 80px; left: 5%;
  background: radial-gradient(circle, rgba(0, 198, 255, 0.1) 0%, transparent 65%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

/* "Kenya's Premier Systems Integrator" pill */
.h-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 87, 255, 0.1);
  border: 1px solid rgba(0, 87, 255, 0.3);
  color: var(--accent);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.7rem;
  width: fit-content;
  animation: up 0.8s ease both;
}
.h-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 7px var(--accent);
  animation: blink 2s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(1.5); }
}

/* Main hero heading */
.h-title {
  font-size: clamp(2.8rem, 7vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--dh);
  animation: up 0.9s 0.1s ease both;
}

/* "Innovate." gradient word */
.h-title .gr {
  background: linear-gradient(90deg, #5aaaff, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.h-sub {
  max-width: 560px;
  margin-top: 1.4rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--db);
  font-weight: 300;
  animation: up 0.9s 0.2s ease both;
}

.h-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2.4rem;
  flex-wrap: wrap;
  animation: up 0.9s 0.3s ease both;
}

/* Stats bar under hero */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 4rem;
  animation: up 0.9s 0.4s ease both;
  position: relative;
  z-index: 1;
}
.sc {
  padding: 1.5rem 1.7rem;
  background: rgba(8, 18, 36, 0.85);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: background 0.3s;
}
.sc:hover { background: rgba(0, 87, 255, 0.1); }
.sn {
  font-family: 'Syne', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--dh);
  line-height: 1;
}
.sn em { color: var(--accent); font-style: normal; }
.sl {
  font-size: 0.72rem;
  color: var(--ds);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

@keyframes up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   7. SERVICES SECTION  (light background — white)
   ============================================================ */
#services {
  background: var(--white);
}

.svc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.svc-card {
  background: var(--light-bg);
  border: 1.5px solid #dce6f5;
  border-radius: 14px;
  padding: 2rem;
  transition: all 0.28s;
  position: relative;
  overflow: hidden;
}

/* Animated bottom border on hover */
.svc-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.svc-card:hover {
  border-color: #b8cef5;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 87, 255, 0.1);
}
.svc-card:hover::after { transform: scaleX(1); }

.svc-ico {
  width: 46px; height: 46px;
  background: var(--blue-light);
  border: 1.5px solid #c5d9ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1.1rem;
}
.svc-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--lh);      /* dark navy on white — high contrast */
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.svc-card p {
  font-size: 0.85rem;
  color: var(--lb);       /* dark blue-grey on white — readable */
  line-height: 1.72;
  font-weight: 400;
}


/* ============================================================
   8. ABOUT SECTION  (dark background)
   ============================================================ */
#about {
  background: var(--dark2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-meta {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.mpill {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(0, 87, 255, 0.1);
  border: 1px solid rgba(0, 87, 255, 0.2);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 0.83rem;
  color: var(--db);
  font-weight: 400;
}
.mpill span { font-size: 1rem; }

/* Values card */
.val-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 2.2rem;
  position: relative;
  overflow: hidden;
}
.val-box::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 87, 255, 0.18) 0%, transparent 70%);
}

.val-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.6rem;
}
.val-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.25s;
}
.val-row:hover {
  background: rgba(0, 87, 255, 0.08);
  border-color: rgba(0, 87, 255, 0.2);
}
.vi {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.val-row h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--dh);      /* white on dark */
  margin-bottom: 0.15rem;
}
.val-row p {
  font-size: 0.8rem;
  color: var(--db);       /* light blue-grey on dark */
  line-height: 1.5;
  font-weight: 300;
}


/* ============================================================
   9. EXPERIENCE SECTION  (light background — #f0f4fb)
   ============================================================ */
#experience {
  background: var(--light-bg);
}

.exp-head { margin-bottom: 3rem; }

.exp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem;
}

.exp-card {
  background: var(--white);
  border: 1.5px solid #dce6f5;
  border-radius: 13px;
  padding: 1.8rem;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  transition: all 0.28s;
}
.exp-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 87, 255, 0.1);
}

.etick {
  width: 34px; height: 34px;
  flex-shrink: 0;
  background: var(--blue-light);
  border: 1.5px solid #b8ceff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 800;
}

.exp-card h4 {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--lh);       /* dark navy on white */
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}
.exp-card p {
  font-size: 0.83rem;
  color: var(--lb);        /* dark blue-grey on white */
  line-height: 1.67;
  font-weight: 400;
}


/* ============================================================
   10. INDUSTRIES SECTION  (dark background)
   ============================================================ */
#industries {
  background: var(--dark);
}

.ind-head { margin-bottom: 2.8rem; }

.ind-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.ind-pill {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.5rem;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--db);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.25s;
  cursor: default;
}
.ind-pill:hover {
  background: rgba(0, 87, 255, 0.12);
  border-color: rgba(0, 87, 255, 0.5);
  color: var(--white);
  transform: translateY(-2px);
}
.ind-pill .ico { font-size: 1.05rem; }


/* ============================================================
   11. PARTNERS SECTION  (light background — white)
   ============================================================ */
#partners {
  background: var(--white);
}

.prt-head { margin-bottom: 2.8rem; }

.prt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
}

.prt-card {
  background: var(--light-bg);
  border: 1.5px solid #dce6f5;
  border-radius: 14px;
  padding: 2.2rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  transition: all 0.28s;
}
.prt-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 87, 255, 0.1);
}

.prt-name {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--lh);       /* dark navy on light — high contrast */
  letter-spacing: -0.01em;
}

.prt-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.65rem;
  background: var(--blue-light);
  border: 1px solid #b8ceff;
  color: var(--blue);     /* blue on light blue tint — readable */
  border-radius: 4px;
}

.prt-card p {
  font-size: 0.76rem;
  color: var(--ls);        /* medium blue-grey on light */
  line-height: 1.55;
  font-weight: 400;
}


/* ============================================================
   12. WHY SUDONICS SECTION  (dark background)
   ============================================================ */
#why {
  background: var(--dark2);
  text-align: center;
}

.why-in {
  max-width: 960px;
  margin: 0 auto;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 3.5rem;
  text-align: left;
}

.why-card {
  padding: 1.9rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
  transition: all 0.28s;
}
.why-card:hover {
  background: rgba(0, 87, 255, 0.08);
  border-color: rgba(0, 87, 255, 0.25);
  transform: translateY(-4px);
}

.wnum {
  font-family: 'Syne', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  color: rgba(56, 150, 255, 0.38); /* decorative number — intentionally subtle */
  line-height: 1;
  margin-bottom: 0.75rem;
}
.why-card h3 {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--dh);       /* white on dark */
  margin-bottom: 0.4rem;
}
.why-card p {
  font-size: 0.83rem;
  color: var(--db);        /* light blue-grey on dark */
  line-height: 1.7;
  font-weight: 300;
}


/* ============================================================
   13. CTA SECTION  (deep brand blue gradient)
   ============================================================ */
#cta {
  background: linear-gradient(140deg, #001240 0%, #003299 55%, #001a5c 100%);
  padding: 6rem 6vw;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle grid overlay */
#cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 42px 42px;
}

.cta-in {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

#cta h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--white);    /* white on deep blue — max contrast */
  letter-spacing: -0.025em;
  margin-bottom: 0.9rem;
}

#cta p {
  color: rgba(255, 255, 255, 0.85); /* slightly off-white — readable on blue */
  font-size: 1rem;
  font-weight: 300;
  margin-bottom: 2.4rem;
  line-height: 1.75;
}

.cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* White solid button (for CTA section) */
.b-ws {
  background: var(--white);
  color: var(--blue);     /* blue text on white button — brand consistent */
  padding: 0.88rem 2rem;
  border-radius: 6px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: all 0.22s;
}
.b-ws:hover {
  background: var(--accent);
  color: var(--dark);
  transform: translateY(-2px);
}

/* Outline white button (for CTA section) */
.b-ow {
  background: transparent;
  color: var(--white);
  padding: 0.88rem 2rem;
  border-radius: 6px;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  transition: all 0.22s;
}
.b-ow:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  transform: translateY(-2px);
}


/* ============================================================
   14. FOOTER  (deepest dark)
   ============================================================ */
footer {
  background: #02080f;
  padding: 4rem 6vw 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.fb-desc {
  font-size: 0.85rem;
  color: #5e7a99;
  line-height: 1.72;
  font-weight: 300;
  margin-top: 0.9rem;
  max-width: 260px;
}

.fc h4 {
  font-family: 'Syne', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.1rem;
}

.fc ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.fc ul li a {
  color: #5e7a99;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 300;
  transition: color 0.2s;
}
.fc ul li a:hover { color: var(--accent); }

/* Contact block */
.fcontact {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.fcrow {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.fcrow .fi {
  color: var(--accent);
  font-size: 0.85rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}
.fcrow span {
  font-size: 0.83rem;
  color: #5e7a99;
  line-height: 1.5;
  font-weight: 300;
}

/* Footer bottom bar */
.fbot {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.fbot p {
  font-size: 0.78rem;
  color: #3e5870;
  font-weight: 300;
}
.ftag {
  font-family: 'Syne', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(90, 150, 255, 0.6);
}


/* ============================================================
   15. SCROLL REVEAL ANIMATION
   Elements start invisible and slide up into view
   JS in main.js triggers .vis class via IntersectionObserver
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.vis {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   16. RESPONSIVE / MEDIA QUERIES
   ============================================================ */

/* Tablet: ≤ 960px */
@media (max-width: 960px) {
  #about {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .exp-grid {
    grid-template-columns: 1fr;
  }
  .prt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fg {
    grid-template-columns: 1fr 1fr;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  nav .nav-links {
    display: none; /* hide nav links on tablet — add hamburger menu if needed */
  }
}

/* Mobile: ≤ 560px */
@media (max-width: 560px) {
  section {
    padding: 4.5rem 5vw;
  }
  .fg {
    grid-template-columns: 1fr;
  }
  .prt-grid {
    grid-template-columns: 1fr 1fr;
  }
  .why-grid {
    grid-template-columns: 1fr;
  }
  .h-title {
    font-size: 2.6rem;
  }
  .svc-head {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ── Featured service card (set featured:true in content.js) ── */
.svc-featured       { border-color: #b8ceff !important; background: #eef3ff !important; }
.svc-ico-featured   { background: #dce8ff !important;   border-color: #99bdff !important; }


/* ── Partner Logo Styles ── */
.prt-logo-wrap {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.prt-logo-wrap svg {
  max-width: 140px;
  max-height: 48px;
  width: 100%;
  height: auto;
  transition: transform 0.25s, opacity 0.25s;
  opacity: 0.85;
}
.prt-card:hover .prt-logo-wrap svg {
  opacity: 1;
  transform: scale(1.05);
}


/* ── Signal Rings Logo ── */
.logo {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 1.4rem;
}
.logo svg {
  flex-shrink: 0;
}

/* Hero large signal rings watermark */
.hero-logo-mark {
  position: absolute;
  top: 50%;
  right: 4vw;
  transform: translateY(-50%);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 768px) {
  .hero-logo-mark { display: none; }
}


/* ── Updated Partner Logo Cards ── */
.prt-logo-wrap {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
}
.prt-logo-wrap svg {
  max-width: 150px;
  max-height: 56px;
  width: 100%;
  height: auto;
  transition: transform 0.25s, opacity 0.25s;
  opacity: 0.88;
}
.prt-card:hover .prt-logo-wrap svg {
  opacity: 1;
  transform: scale(1.06);
}
/* Hide old text name since logos now have wordmarks built in */
.prt-name { display: none; }


/* ── Partner logo image + SVG fallback sizing ── */
.prt-logo-wrap img {
  max-width: 150px;
  max-height: 52px;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.25s, opacity 0.25s;
  opacity: 0.88;
}
.prt-card:hover .prt-logo-wrap img,
.prt-card:hover .prt-logo-wrap svg {
  opacity: 1;
  transform: scale(1.05);
}
/* On light card background, make sure dark logos are visible */
.prt-logo-wrap {
  filter: none;
}