:root{
  --violet:#5C00B8; --midnight:#0B1440; --ink:#080d20; --cyan:#00E6FF;
  --ice:#E7F5FF; --magenta:#FF4EF6; --gradA:#10002F; --gradB:#0B1440; --gradC:#001424;
}
*{box-sizing:border-box} html,body{height:100%}
html{scroll-behavior:smooth}
body{ margin:0; font-family:system-ui, Segoe UI, Poppins, Roboto, Arial, sans-serif; color:var(--ice);
  background: radial-gradient(1200px 900px at 20% 10%, rgba(92,0,184,.25), transparent 60%),
              radial-gradient(1000px 700px at 80% 90%, rgba(0,230,255,.18), transparent 60%),
              linear-gradient(120deg, var(--gradA), var(--gradB) 45%, var(--gradC));
  overflow-x:hidden; opacity:0; transition:opacity 1.4s ease;
}
body.loaded{opacity:1}

/* Nav */
.nav{ position:fixed; inset:0 0 auto 0; height:64px; padding:0 16px; display:flex; align-items:center; justify-content:space-between;
  backdrop-filter: blur(8px); background: rgba(10,16,40,.35); border-bottom:1px solid rgba(0,230,255,.12); z-index:50; }
.nav .brand{ display:flex; align-items:center; gap:10px; color:var(--ice); text-decoration:none; letter-spacing:.08em; font-weight:700; }
.nav .brand .dot{ width:10px; height:10px; border-radius:999px; background:var(--cyan); box-shadow:0 0 12px var(--cyan), 0 0 28px rgba(0,230,255,.5); }
.nav .links{display:flex; gap:18px}
.nav .links a{ color:var(--ice); text-decoration:none; font-weight:500; opacity:.9; position:relative; padding:6px 4px; }
.nav .links a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent); transform:scaleX(0); transform-origin:center; transition:.3s ease; }
.nav .links a:hover::after{ transform:scaleX(1) }
.hamburger{display:none; background:none; border:0; width:44px; height:44px; padding:8px; cursor:pointer}
.hamburger span{display:block; height:2px; background:var(--ice); margin:6px 0; transition:.25s}

/* Hero */
.hero{min-height:100svh; position:relative; padding-top:64px}
.hero-inner{ min-height:calc(100svh - 64px); display:grid; place-items:center; text-align:center; padding:64px 16px 32px; position:relative; z-index:2; }
.logo-wrap{position:relative; width:min(360px,70vw); margin-inline:auto}
.logo-k{width:100%; filter: drop-shadow(0 12px 40px rgba(0,230,255,.25))}
.spin{animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.logo-reflection{ position:absolute; left:0; right:0; bottom:-6%; height:18%; filter:blur(10px) saturate(120%); opacity:.22;
  background: radial-gradient(120% 200% at 50% -20%, rgba(0,230,255,.22), transparent 60%), linear-gradient(to bottom, rgba(255,255,255,.2), transparent 70%); }
.title{font-size: clamp(20px, 2.8vw, 34px); letter-spacing:.14em; margin:22px 0 8px; opacity:0; transform:translateY(18px)}
.tagline{font-size: clamp(14px, 2.2vw, 20px); opacity:0; transform:translateY(18px); margin:0 0 18px}
.trustline{opacity:0; transform:translateY(18px); margin-top:12px; color:rgba(231,245,255,.9)}
.glow-rotate{ background:linear-gradient(90deg, var(--cyan), #7cc9ff, var(--magenta), var(--violet), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent; filter: drop-shadow(0 0 24px rgba(0,230,255,.18));
  background-size:300% 100%; animation:glowShift 12s linear infinite; }
@keyframes glowShift{from{background-position:0% 50%}to{background-position:100% 50%}}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{ border:1px solid rgba(0,230,255,.55); padding:12px 20px; border-radius:12px; text-decoration:none; color:var(--ice); letter-spacing:.06em;
  transition:.25s ease; display:inline-flex; align-items:center; gap:8px; backdrop-filter: blur(6px); background:rgba(12,20,48,.24); }
.btn.primary{box-shadow:0 0 24px rgba(0,230,255,.2)} .btn:hover{transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,230,255,.28)}
.site-footer{padding:28px 16px 40px; text-align:center; color:rgba(231,245,255,.9); position:relative}
.pulse-line{ height:2px; width:100%; margin:0 auto 14px; background:linear-gradient(90deg, transparent, rgba(0,230,255,.6), transparent);
  animation:pulse 6s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.particles{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.22;
  background: radial-gradient(6px 6px at 10% 30%, rgba(0,230,255,.7), transparent 60%), radial-gradient(5px 5px at 80% 60%, rgba(92,0,184,.8), transparent 60%),
              radial-gradient(4px 4px at 30% 80%, rgba(255,78,246,.7), transparent 60%), radial-gradient(6px 6px at 60% 20%, rgba(0,230,255,.7), transparent 60%);
  animation: drift 28s linear infinite; }
@keyframes drift{ 0%{transform:translateY(0) translateX(0)} 50%{transform:translateY(-18px) translateX(10px)} 100%{transform:translateY(0) translateX(0)} }
.africa-watermark{ position:absolute; inset:0; z-index:0; pointer-events:none; background: url("../img/africa-watermark.png") center/60% no-repeat;
  opacity:.08; filter: drop-shadow(0 0 20px rgba(0,230,255,.25)); }
.reveal{will-change:transform,opacity} .reveal.revealed{opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease}

/* Light beam overlay */
.light-beam { position:absolute; inset:0; background: linear-gradient(135deg, rgba(0,230,255,0.12), transparent 40%, rgba(92,0,184,0.12));
  animation: beamMove 18s ease-in-out infinite alternate; mix-blend-mode: screen; pointer-events: none; z-index: 1; opacity: 0.6; }
@keyframes beamMove { 0% { transform: translate(-10%, -10%) rotate(0deg);} 50% { transform: translate(10%, 10%) rotate(2deg);} 100% { transform: translate(-10%, -10%) rotate(-2deg);}}

/* Scroll hint */
.scroll-hint{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:5; opacity:.8; animation:fadeInScrollHint 1.8s ease forwards 2s;}
.scroll-hint .arrow{ display:block; width:18px; height:18px; border-left:2px solid var(--cyan); border-bottom:2px solid var(--cyan);
  transform: rotate(-45deg); animation: bounceArrow 2s infinite ease-in-out; box-shadow: 0 0 10px rgba(0,230,255,0.4); }
@keyframes bounceArrow { 0%,100%{ transform: translateY(0) rotate(-45deg); opacity:1;} 50%{ transform: translateY(8px) rotate(-45deg); opacity:.6;}}
@keyframes fadeInScrollHint { from{opacity:0; transform:translate(-50%, 20px);} to{opacity:.8; transform:translate(-50%, 0);}}

/* Sticky mobile CTA */
.sticky-cta { position: fixed; bottom: 16px; right: 16px; padding: 12px 22px; background: rgba(0,230,255,0.2); border: 1px solid var(--cyan);
  border-radius: 50px; color: var(--ice); font-weight: 600; font-size: 15px; letter-spacing: 0.05em; text-decoration: none;
  box-shadow: 0 0 20px rgba(0,230,255,0.3); backdrop-filter: blur(8px); transition: all .3s ease; z-index: 999; }
.sticky-cta:hover { box-shadow: 0 0 28px rgba(0,230,255,0.55); transform: translateY(-2px); }
@media (min-width: 961px){ .sticky-cta{ display: none; }}

/* Back to top */
.back-top{ position: fixed; bottom: 70px; right: 20px; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,230,255,0.18);
  border: 1px solid var(--cyan); color: var(--ice); font-size: 20px; font-weight: 700; text-align: center; line-height: 40px; cursor: pointer;
  text-decoration: none; box-shadow: 0 0 20px rgba(0,230,255,0.3); backdrop-filter: blur(6px); transition: all .3s ease; opacity: 0; visibility: hidden; z-index: 998; }
.back-top:hover{ transform: translateY(-3px); box-shadow: 0 0 30px rgba(0,230,255,0.55); }
.back-top.show{ opacity: 1; visibility: visible; }
@media (max-width: 960px){ .back-top { bottom: 90px; right: 16px; }}

/* Page layouts (subpages) */
.page{ padding-top:84px; padding-bottom:60px; }
.container{ max-width:1100px; margin:0 auto; padding:0 16px; }
.page-title{ font-size: clamp(22px, 2.4vw, 32px); margin:10px 0 6px; letter-spacing:.08em; }
.page-sub{ color: rgba(231,245,255,.85); margin-bottom:18px }
.grid.products{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.card{ background: rgba(19,32,56,.6); border:1px solid rgba(0,230,255,.16); border-radius:14px; padding:14px; text-align:center; }
.card .thumb{ height:160px; background: radial-gradient(200px 120px at 50% 40%, rgba(0,230,255,.2), transparent); border-radius:10px; margin-bottom:10px; }
.list{ line-height:1.9 }
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 12px }
.pill{ padding:8px 12px; background: rgba(0,230,255,.10); border:1px solid rgba(0,230,255,.25); border-radius:999px }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:14px }
.contact-form input, .contact-form textarea{ width:100%; padding:10px 12px; margin:6px 0; border-radius:10px; border:1px solid rgba(0,230,255,.25);
  background: rgba(12,20,48,.24); color:var(--ice); }
.contact-form button{ margin-top:8px }

/* Mobile nav */
@media (max-width: 960px){
  .hamburger{display:block}
  .links{position:fixed; top:64px; right:0; left:0; background:rgba(10,16,40,.9);
    display:grid; gap:6px; padding:12px 16px; border-bottom:1px solid rgba(0,230,255,.12);
    transform:translateY(-120%); transition:.3s}
  .links.open{transform:none}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .spin, .glow-rotate, .particles, .pulse-line, .light-beam, .scroll-hint .arrow { animation: none !important; }
}