/* Imani Labs — Cloud Infrastructure Experts
   Enterprise cloud-provider design language: dark navy brand shell
   throughout (nav, hero, services, customers, footer), the brand
   blue → cyan gradient used deliberately as a real color device
   (buttons, icon chips, the Subsidiaries showcase panel, the About
   wash), with light content panels reserved for readability. */

:root{
  --ink: #0b1229;
  --ink-soft: #48526b;
  --muted: #6c7690;
  --bg: #ffffff;
  --bg-soft: #f7f9fd;
  --border: #e2e8f4;
  --accent: #0891b2;
  --accent-bright: #22e8f5;
  --grad: linear-gradient(135deg, #0b2f76 0%, #0e7490 55%, #14b8c4 100%);
  --grad-a: 11,47,118;
  --grad-b: 20,184,196;
  --dark-bg: #070C29;
  --dark-bg-2: #0e1750;
  --dark-border: rgba(255,255,255,.1);
  --container: 1200px;
  --shadow-sm: 0 2px 10px rgba(15,23,55,.06);
  --shadow-md: 0 14px 34px rgba(15,23,55,.09);
  --shadow-lg: 0 24px 60px rgba(15,23,55,.14);
  --ease: cubic-bezier(.2,.65,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', sans-serif;
  font-weight:400;
  background:var(--dark-bg);
  color:var(--ink-soft);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; font-weight:700; color:var(--ink); font-family:'Space Grotesk','Inter',sans-serif; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
section[id]{ scroll-margin-top:80px; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--accent); color:#fff; padding:10px 16px; z-index:999; border-radius:0 0 8px 0; font-weight:700;
}
.skip-link:focus{ left:0; }

/* Section labels */
.eyebrow{
  display:block;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}
.eyebrow-dark{ color:var(--accent-bright); }

.section-intro{ max-width:1200px; margin:0 auto 56px; padding:0 40px; }
.section-heading{
  position:relative;
  display:inline-block;
  font-size:clamp(2rem,3.6vw,2.8rem);
  letter-spacing:-0.02em;
  margin-bottom:16px;
  color:var(--ink);
}
.section-heading::after{
  content:'';
  position:absolute; left:0; bottom:-14px;
  width:48px; height:3px;
  background:var(--grad);
  border-radius:2px;
}
.section-sub{ margin-top:22px; color:var(--muted); font-size:1.02rem; max-width:520px; }

/* Sections that sit directly on the dark brand shell need light heading text */
.services .section-heading,
.subsidiaries .section-heading{ color:#fff; }
.services .section-sub,
.subsidiaries .section-sub{ color:rgba(255,255,255,.55); }

/* Buttons / links — shared */
.cta-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent); font-weight:600; font-size:.92rem;
  transition:gap .2s ease;
}
.cta-link:hover{ gap:12px; }
.cta-link i{ font-size:.78rem; }

/* Navbar — permanently dark, matches the hero/brand shell */
.navbar{
  padding:16px 40px;
  position:fixed;
  width:100%;
  top:0;
  z-index:1000;
  background:rgba(7,12,41,0.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--dark-border);
}
.nav-content{
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.logo{
  font-family:'Sora', 'Space Grotesk', sans-serif;
  font-weight:800;
  font-size:1.22rem;
  letter-spacing:-.01em;
  color:#fff;
}
.logo span{ color:var(--accent-bright); font-weight:800; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-link{
  color:rgba(255,255,255,.72);
  font-size:.92rem;
  font-weight:600;
  position:relative;
  padding:6px 0;
  transition:color .3s ease;
}
.nav-link::after{
  content:'';
  position:absolute; width:0; height:2px; bottom:0; left:0;
  background:var(--accent-bright);
  transition:width .3s ease;
}
.nav-link:hover{ color:#fff; }
.nav-link:hover::after{ width:100%; }

.hamburger{
  display:none;
  background:none; border:none; color:#fff;
  font-size:1.35rem; cursor:pointer; padding:4px 8px;
}

/* Hero */
.hero{
  height:100vh;
  min-height:640px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  padding-top:80px;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  z-index:-2;
  transform:scale(1.05);
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,12,41,.5) 0%, rgba(7,12,41,.68) 55%, rgba(7,12,41,.94) 100%),
             radial-gradient(circle at 30% 30%, rgba(var(--grad-b),.14), transparent 55%);
  z-index:-1;
}
.hero-content{ max-width:1100px; padding:0 24px; }
.hero-kicker{
  display:inline-block;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-bright);
  margin-bottom:22px;
  opacity:0;
  animation:fadeInUp .8s ease .1s forwards;
}
.hero h1{
  font-size:clamp(1.9rem,4vw,3.1rem);
  line-height:1.22;
  letter-spacing:-0.02em;
  margin-bottom:20px;
  color:#fff;
  opacity:0;
  animation:fadeInUp 1s ease .25s forwards;
}
.hero p{
  font-size:1.2rem;
  font-weight:300;
  color:rgba(255,255,255,.9);
  opacity:0;
  animation:fadeInUp 1s ease .45s forwards;
}
.hero-scroll{
  margin:56px auto 0;
  width:22px; height:36px;
  border:2px solid rgba(255,255,255,.4);
  border-radius:14px;
  position:relative;
  opacity:0;
  animation:fadeInUp 1s ease .7s forwards;
}
.hero-scroll span{
  position:absolute; top:6px; left:50%;
  width:4px; height:8px;
  background:var(--accent-bright);
  border-radius:2px;
  transform:translateX(-50%);
  animation:scrollDot 1.8s ease infinite;
}

@keyframes fadeInUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }
@keyframes scrollDot{ 0%{ opacity:1; top:6px; } 80%,100%{ opacity:0; top:18px; } }

/* Services — dark brand cards, gradient icon chips, continues straight from the hero */
.services{
  padding:120px 40px;
  background:var(--dark-bg);
}
.service-grid{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.service-card{
  position:relative;
  background:var(--dark-bg-2);
  border:1px solid var(--dark-border);
  border-radius:14px;
  padding:34px 28px;
  transition:transform .35s var(--ease), border-color .3s ease, box-shadow .35s ease;
}
.service-card:hover{
  transform:translateY(-5px);
  border-color:rgba(34,232,245,.4);
  box-shadow:0 20px 44px rgba(0,10,40,.35);
}
.service-num{
  position:absolute; top:22px; right:24px;
  font-size:.78rem; font-weight:600;
  color:rgba(255,255,255,.25);
}
.service-icon{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:var(--grad);
  color:#fff;
  font-size:1.15rem;
  margin-bottom:22px;
  box-shadow:0 10px 22px rgba(var(--grad-a),.32);
}
.service-card h3{ font-size:1.08rem; font-weight:700; color:#fff; margin-bottom:10px; letter-spacing:-.01em; }
.service-card p{ color:rgba(255,255,255,.55); font-size:.92rem; line-height:1.65; }

/* About — one unified panel, gradient wash spans its full width */
.about-wrap{ padding:120px 40px; background:var(--dark-bg); }
.about-panel{
  max-width:var(--container);
  margin:0 auto;
  background:linear-gradient(115deg, rgba(var(--grad-a),.10), rgba(var(--grad-b),.12) 45%, rgba(8,145,178,.06) 100%), var(--bg-soft);
  border:1px solid var(--border);
  border-radius:24px;
  padding:64px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.about-text p{ color:var(--ink-soft); margin-top:18px; font-size:1rem; line-height:1.75; }
.about-text p:first-of-type{ margin-top:26px; }
.africa-map-wrap{ display:flex; align-items:center; justify-content:center; }
.africa-map{
  width:100%;
  height:360px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.94;
  filter:drop-shadow(0 12px 24px rgba(8,145,178,.2));
}

/* Customers — dark band */
#customers{
  position:relative;
  padding:120px 40px;
  overflow:hidden;
  background:var(--dark-bg);
  background-image:
    radial-gradient(circle at 12% 15%, rgba(var(--grad-b),.14), transparent 50%),
    radial-gradient(circle at 88% 85%, rgba(var(--grad-a),.22), transparent 50%);
}
.customers-inner{ max-width:var(--container); margin:0 auto; position:relative; z-index:1; }
.customers-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:64px; flex-wrap:wrap; gap:20px;
}
.customers-headline h2{
  font-size:clamp(1.9rem,3.8vw,2.7rem);
  letter-spacing:-0.02em; line-height:1.18; margin-bottom:12px; color:#fff;
}
.customers-headline h2 span{ color:var(--accent-bright); }
.customers-headline p{ color:rgba(255,255,255,.6); font-size:1rem; max-width:380px; line-height:1.7; }

.trust-badge{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,.15);
  border-radius:100px;
  padding:10px 20px 10px 12px;
  white-space:nowrap;
}
.dot-ring{
  width:32px; height:32px; border-radius:50%;
  background:rgba(34,232,245,0.12);
  border:1.5px solid rgba(34,232,245,0.35);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dot-ring::after{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--accent-bright); box-shadow:0 0 8px rgba(34,232,245,.6);
}
.trust-badge span{ font-size:.82rem; font-weight:600; color:rgba(255,255,255,.85); }

/* Ticker */
.ticker-wrapper{
  overflow:hidden;
  margin-bottom:64px;
  mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.ticker-track{ display:flex; animation:custTicker 34s linear infinite; width:max-content; }
.ticker-track:hover{ animation-play-state:paused; }
@keyframes custTicker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker-item{
  display:flex; align-items:center; padding:0 32px;
  border-right:1px solid rgba(255,255,255,.08); flex-shrink:0;
}
.ticker-logo-box{
  background:#fff; border-radius:10px; width:130px; height:56px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.78rem; text-align:center; line-height:1.2;
  color:var(--ink); padding:8px;
}
.ticker-logo-box svg{ width:92px; height:42px; }
.ticker-logo-box img{ max-width:104px; max-height:46px; object-fit:contain; }
.logo-carrybyte{ color:#5b2ab8; }

/* Customer cards — glass-on-dark */
.customer-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px; }
.customer-card{
  position:relative;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:16px;
  padding:32px 20px 24px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  transition:transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.customer-card:hover{
  transform:translateY(-5px);
  border-color:rgba(34,232,245,.35);
  box-shadow:0 20px 44px rgba(0,0,0,.3);
}
.cust-logo-frame{
  background:#fff; border-radius:10px; width:136px; height:68px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
  padding:8px;
}
.cust-logo-frame img{ max-width:118px; max-height:58px; object-fit:contain; }
.customer-name{ font-size:.9rem; font-weight:700; color:#fff; letter-spacing:.01em; }
.customer-tag{ font-size:.7rem; color:rgba(255,255,255,.5); font-weight:500; letter-spacing:.05em; text-transform:uppercase; margin-top:4px; }

/* Subsidiaries — each card reads as its own company: its own accent
   color (drawn from its real brand where known), its own category tag,
   its own "visit the site" button. Not a repaint of the Services cards. */
.subsidiaries{ padding:120px 40px; background:var(--dark-bg); }
.subsidiary-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.subsidiary-card{
  --card-accent: #22e8f5;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--card-accent) 22%, transparent), transparent 60%),
    var(--dark-bg-2);
  border:1px solid color-mix(in srgb, var(--card-accent) 28%, transparent);
  border-radius:16px;
  padding:30px 26px 28px;
  transition:transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.subsidiary-card:hover{
  transform:translateY(-6px);
  border-color:var(--card-accent);
  box-shadow:0 22px 46px rgba(0,10,40,.4);
}
.subsidiary-tag{
  position:relative;
  display:inline-block;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--card-accent);
  background:color-mix(in srgb, var(--card-accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--card-accent) 40%, transparent);
  border-radius:100px;
  padding:5px 12px;
  margin-bottom:20px;
}
.subsidiary-icon{
  position:relative;
  width:58px; height:58px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:var(--card-accent);
  color:#0b1229; font-size:1.3rem;
  margin-bottom:20px;
  box-shadow:0 10px 24px color-mix(in srgb, var(--card-accent) 45%, transparent);
}
.subsidiary-icon-logo{ background:#fff; padding:11px; box-shadow:none; color:inherit; }
.subsidiary-icon-logo img{ width:100%; height:100%; object-fit:contain; }
.subsidiary-card h3{ position:relative; font-size:1.2rem; margin-bottom:8px; color:#fff; }
.subsidiary-card p{ position:relative; color:rgba(255,255,255,.55); font-size:.88rem; margin-bottom:22px; line-height:1.6; min-height:2.8em; }
.subsidiary-visit{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; font-weight:700;
  color:var(--card-accent);
  padding-bottom:2px;
  border-bottom:1px solid color-mix(in srgb, var(--card-accent) 45%, transparent);
  transition:gap .2s ease, border-color .2s ease;
}
.subsidiary-visit i{ font-size:.72rem; }
.subsidiary-visit:hover{ gap:12px; border-color:var(--card-accent); }

/* Footer — one solid color, matching the copyright bar, hr between them */
footer{
  background:var(--dark-bg);
  padding:64px 40px 0;
}
.footer-content{
  max-width:var(--container); margin:0 auto;
  padding-bottom:48px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.footer-logo{ color:#fff; font-size:1.3rem; }
.footer-logo span{ color:var(--accent-bright); }
.footer-section h3{ color:rgba(255,255,255,.55); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; font-weight:700; font-family:'Space Grotesk',sans-serif; }
.footer-section p{ color:rgba(255,255,255,.75); font-size:.92rem; margin-top:8px; }
.footer-section:first-child p{ margin-top:14px; max-width:260px; }
.social-icons{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.social-icons a{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:50%;
  transition:background .3s ease, transform .2s ease;
}
.social-icons a:hover{ background:rgba(34,232,245,.16); border-color:rgba(34,232,245,.4); transform:translateY(-2px); }
.partner-badge{
  display:inline-block; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:10px 16px; width:140px;
}

.footer-divider{
  max-width:var(--container); margin:0 auto;
  border:none; border-top:1px solid rgba(255,255,255,.1);
}
.footer-divider-top{ margin-bottom:48px; }
.copyright{
  text-align:center; padding:22px;
}
.copyright p{ color:rgba(255,255,255,.45); font-size:.85rem; }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width:1024px){
  .subsidiary-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px){
  .about-panel{ grid-template-columns:1fr; padding:44px 32px; }
  .africa-map-wrap{ order:2; }
  .africa-map{ height:280px; }
  .about-text{ order:1; }
  .footer-content{ grid-template-columns:1fr 1fr; }
}

@media (max-width:768px){
  .nav-links{
    display:none; flex-direction:column; align-items:flex-start; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--dark-bg);
    padding:12px 24px 20px;
    border-bottom:1px solid var(--dark-border);
  }
  .nav-links.active{ display:flex; }
  .nav-link{ width:100%; padding:14px 0; border-bottom:1px solid var(--dark-border); }
  .nav-link:last-child{ border-bottom:none; }
  .hamburger{ display:block; }

  .service-grid{ grid-template-columns:1fr; }
  .subsidiary-grid{ grid-template-columns:1fr; }
  .customer-grid{ grid-template-columns:1fr 1fr; }
  .footer-content{ grid-template-columns:1fr; text-align:center; }
  .footer-section:first-child p{ margin-left:auto; margin-right:auto; }
  .social-icons{ justify-content:center; }
  .services, .about-wrap, .subsidiaries{ padding:80px 24px; }
  #customers{ padding:80px 24px; }
}

@media (max-width:480px){
  .navbar{ padding:14px 20px; }
  .customer-grid{ grid-template-columns:1fr; }
  .about-panel{ padding:32px 22px; }
  .hero h1 .hero-break{ display:none; }
  .hero h1{ font-size:clamp(1.55rem,7.2vw,1.9rem); line-height:1.28; }
}