/* =====================================================================
   SIERRAUNLOCK • GLOBAL DESIGN SYSTEM — style.css (v5 • DOCUMENTED)
   ---------------------------------------------------------------------
   WHAT IS THIS FILE?
   The "Skeleton & Skin" of the website. It defines every color, font,
   spacing, button, card, header, footer and responsive rule.
   (animations.css adds movement; this file adds structure + looks.)

   SECTION MAP:
   00  Design tokens (:root) + base reset
   01  Motto bar
   02  Header + navigation (never overflows)
   03  Buttons
   04  Hero sections (scale phone → desktop)
   05  Legal strip
   06  Sections & cards
   07  Founders
   08  Community band
   09  Payment badges
   10  Footer
   11  Responsive breakpoints (hamburger drawer)
   12  Dropdown menus (Services ▾)
   13  Security UI helpers (honeypot trap for bots)

   OWNER: SIERRAUNLOCK Engineering • Waterloo / Koidu, Sierra Leone
   ===================================================================== */

/* 00 • DESIGN TOKENS + RESET */
:root{
  --sl-green:#1EB53A; --sl-green-dark:#0F8A2A;
  --sl-blue:#0072C6;  --sl-blue-dark:#004E8C;
  --sl-white:#FFFFFF; --ink:#0A1B2A; --ink-soft:#334155;
  --paper:#F8FAFC; --line:#E2E8F0; --danger:#B00020;
  --grad-brand:linear-gradient(135deg,var(--sl-green-dark) 0%,var(--sl-blue) 100%);
  --shadow-1:0 4px 20px rgba(10,27,42,.06);
  --shadow-2:0 16px 40px rgba(10,27,42,.12);
  --radius-lg:24px;
  --font-head:"Montserrat",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --header-h:78px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;max-width:100%}   /* NO horizontal scroll, ever */
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:16px;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit;transition:color .2s}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;overflow-wrap:break-word}
::selection{background:var(--sl-green);color:#fff}
.container{max-width:1240px;margin:0 auto;padding:0 1.25rem}

/* 01 • MOTTO BAR (wraps cleanly on small screens) */
.motto-bar{background:var(--grad-brand);color:#fff;display:flex;justify-content:center;align-items:center;gap:.9rem;padding:.65rem 1rem;font-family:var(--font-head);font-weight:800;font-size:clamp(.68rem,2.6vw,.88rem);letter-spacing:.14em;text-transform:uppercase;text-align:center;flex-wrap:wrap}
.motto-divider{color:#D9F4E0}

/* 02 • HEADER (never overflows — hamburger appears early) */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.header-inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:1.1rem;padding:.6rem 1.25rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.65rem;margin-right:auto;flex:none}
.brand-logo{width:48px;height:48px;object-fit:contain;border-radius:10px}
.brand-name{font-family:var(--font-head);font-weight:900;font-size:clamp(1.05rem,3.5vw,1.3rem);color:var(--sl-green-dark);white-space:nowrap;letter-spacing:-.02em}
.brand-name span{color:var(--sl-blue)}
.main-nav{display:flex;gap:1.1rem;align-items:center}
.nav-link{font-weight:700;font-size:.93rem;color:var(--ink-soft);padding:.45rem 0;position:relative;white-space:nowrap;transition:color .2s}
.nav-link:hover{color:var(--sl-green-dark)}
.nav-link.active{color:var(--sl-blue)}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;background:var(--grad-brand)}
.flag-stripe{height:6px}
.nav-toggle{display:none;background:none;border:0;font-size:1.7rem;cursor:pointer;color:var(--sl-blue)}

/* 03 • BUTTONS (fit on every screen) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem 1.6rem;border-radius:999px;font-family:var(--font-head);font-weight:800;font-size:clamp(.82rem,2.6vw,.95rem);border:0;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap;letter-spacing:-.01em;max-width:100%}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn-brand{background:var(--grad-brand);color:#fff;box-shadow:0 8px 20px rgba(0,114,198,.25)}
.btn-whatsapp{background:var(--sl-green);color:#fff;box-shadow:0 8px 20px rgba(30,181,58,.25)}
.header-cta{padding:.55rem 1.2rem;font-size:.85rem;flex:none}
.btn-outline-light{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8)}
.btn-outline-light:hover{background:rgba(255,255,255,.15)}
.btn-wa{background:#25D366;color:#04341F;font-weight:800}
.btn-fb{background:#1877F2;color:#fff;font-weight:800}
.btn-sm{padding:.5rem 1rem;font-size:.78rem}

/* 04 • HERO — scales perfectly phone → desktop */
.hero,.services-hero,.mkt-hero,.shops-hero,.pay-hero,.res-hero,.about-hero,.faq-hero,.repair-hero,.contact-hero{background:radial-gradient(1200px 500px at 85% -10%,rgba(30,181,58,.3),transparent 60%),radial-gradient(1000px 450px at 10% 110%,rgba(0,114,198,.35),transparent 60%),linear-gradient(135deg,var(--sl-blue-dark) 0%,#06283F 55%,var(--sl-green-dark) 130%);color:#fff;padding:clamp(3.6rem,9vw,6rem) 1.25rem clamp(3.2rem,8vw,5.5rem);text-align:center}
.hero-kicker{letter-spacing:clamp(.14em,1vw,.3em);text-transform:uppercase;font-weight:800;font-size:clamp(.66rem,2.4vw,.85rem);color:#CFE9FF;display:inline-block;max-width:100%}
.hero h1,[class*="-hero"] h1{font-size:clamp(1.75rem,7.2vw,4.2rem);font-weight:900;margin:1rem 0;color:#fff}
.rotator{color:#7CF29C;font-size:clamp(1.15rem,5.6vw,1em);line-height:1.25}
.hero-sub,[class*="-hero"] p{max-width:820px;margin:0 auto 2.2rem;color:rgba(255,255,255,.95);font-size:clamp(.95rem,2.8vw,1.15rem);line-height:1.65}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:clamp(1.2rem,4vw,3rem);justify-content:center;flex-wrap:wrap;margin-top:3rem}
.stat b{display:block;font-family:var(--font-head);font-size:clamp(1.4rem,5vw,2rem);font-weight:900;color:#7CF29C}
.stat span{font-size:clamp(.66rem,2vw,.85rem);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9);font-weight:600}

/* 05 • LEGAL STRIP */
.legal-strip{background:#FDECEA;color:#8C1D18;text-align:center;padding:1rem 1.25rem;font-size:clamp(.85rem,2.6vw,1.02rem);font-weight:600;border-top:3px solid var(--danger);border-bottom:3px solid var(--danger)}

/* 06 • SECTIONS & CARDS */
.section{padding:clamp(3.4rem,8vw,5.5rem) 0}
.section-alt{background:#fff}
.section-head{text-align:center;margin-bottom:clamp(2.2rem,5vw,3.5rem);padding:0 1.25rem}
.section-head h2{font-size:clamp(1.5rem,5.2vw,2.8rem);font-weight:900}
.underline{width:100px;height:5px;border-radius:5px;background:var(--grad-brand);margin:1rem auto 0}
.section-head p{margin-top:1rem;color:var(--ink-soft);font-size:clamp(.92rem,2.8vw,1.1rem);max-width:700px;margin-left:auto;margin-right:auto}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1.5rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow-1);transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-2);border-color:var(--sl-green)}
.card .icon{width:60px;height:60px;display:grid;place-items:center;font-size:1.8rem;border-radius:16px;background:linear-gradient(135deg,rgba(30,181,58,.12),rgba(0,114,198,.12))}
.card h3{margin:1.1rem 0 .55rem;font-size:1.2rem}
.card p{color:var(--ink-soft);font-size:.98rem;margin-bottom:1.1rem;line-height:1.65}
.card .link{color:var(--sl-blue);font-weight:800;font-size:.95rem}
.card .link:hover{color:var(--sl-green-dark)}

/* 07 • FOUNDERS */
.founder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.7rem;max-width:960px;margin:0 auto}
.founder-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-1);transition:transform .3s,box-shadow .3s}
.founder-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-2)}
.founder-card img{width:100%;height:clamp(260px,42vw,380px);object-fit:cover;object-position:center top}
.founder-body{padding:1.6rem}
.founder-body h3{font-size:1.3rem}
.role{color:var(--sl-green-dark);font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin:.4rem 0}
.meta{color:var(--sl-blue);font-weight:700;font-size:.95rem;margin-bottom:.7rem;overflow-wrap:anywhere}
.bio{color:var(--ink-soft);font-size:1rem;line-height:1.65}

/* 08 • COMMUNITY */
.community{background:var(--grad-brand);color:#fff;text-align:center;padding:clamp(3.4rem,8vw,5rem) 0}
.community h2{font-size:clamp(1.5rem,5vw,2.6rem);font-weight:900;color:#fff}
.community p{color:rgba(255,255,255,.95);margin:.8rem 0 1.8rem;font-size:clamp(.95rem,2.8vw,1.1rem)}
.community-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;padding:0 1rem}
.community-note{margin-top:1.6rem;font-size:1rem}
.community-note a{color:#D9F4E0;text-decoration:underline;font-weight:800}

/* 09 • PAYMENTS */
.pay-badges{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;padding:0 1rem}
.badge{padding:.7rem 1.3rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:800;font-size:clamp(.78rem,2.4vw,.95rem);box-shadow:var(--shadow-1);text-align:center}

/* 10 • FOOTER */
.site-footer{background:var(--ink);color:#CBD5E1}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:2.2rem;padding-top:4rem;padding-bottom:2.8rem}
.footer-col h4{color:#fff;margin-bottom:1.1rem;font-size:1rem;letter-spacing:.08em;text-transform:uppercase}
.footer-col a{display:block;margin:.55rem 0;font-size:.95rem;color:#CBD5E1;transition:color .2s;overflow-wrap:anywhere}
.footer-col a:hover{color:#7CF29C}
.footer-brand .brand-name{color:#fff;font-size:1.4rem}
.footer-brand .brand-name span{color:#7CF29C}
.footer-about{margin-top:1rem;font-size:.95rem;color:#94A3B8;line-height:1.6}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.4rem 1rem;text-align:center;font-size:.88rem;color:#64748B}

/* 11 • RESPONSIVE — hamburger early so header NEVER overflows */
@media (max-width:1440px){
  .nav-toggle{display:block}
  .header-cta{display:none}
  .main-nav{position:fixed;top:0;right:0;height:100vh;width:min(82vw,340px);background:#fff;flex-direction:column;align-items:flex-start;padding:5.5rem 1.8rem 2rem;gap:1.3rem;transform:translateX(105%);transition:transform .35s ease;box-shadow:var(--shadow-2);z-index:90;overflow-y:auto}
  .main-nav.open{transform:translateX(0)}
  .main-nav .nav-link{font-size:1.1rem;white-space:normal}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .motto-bar{gap:.55rem;letter-spacing:.1em}
  .hero-cta .btn{width:100%;max-width:340px}
  .section{padding:3.2rem 0}
  .card{padding:1.5rem}
  .footer-grid{gap:1.8rem}
}
@media (max-width:380px){
  .brand-logo{width:40px;height:40px}
  .btn{padding:.75rem 1.2rem}
}

/* 12 • DROPDOWN MENUS (Services ▾) — hover on desktop, tap on mobile */
.nav-item{position:relative}
.nav-drop{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-2);min-width:210px;padding:.6rem;display:none;flex-direction:column;gap:.2rem;z-index:95}
.nav-item:hover .nav-drop,.nav-item.open .nav-drop{display:flex}
.nav-drop a{padding:.55rem .8rem;border-radius:10px;font-size:.9rem;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.nav-drop a:hover{background:var(--paper);color:var(--sl-green-dark)}
@media(max-width:1440px){.nav-drop{position:static;display:flex;box-shadow:none;border:0;padding:.2rem 0 .4rem 1rem}}

/* 13 • SECURITY UI HELPERS — honeypot trap: invisible to humans, visible to bots */
.su-honeypot{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}