/* ==========================================================================
   Air Com Systems — Stylesheet
   Production-grade landing page styles: theme tokens, layout, components,
   hero visual (Kenya/Maasai SVG animation), and responsive breakpoints.
   --------------------------------------------------------------------------
   Author: Reginald Odhiambo
   ========================================================================== */

/* -- Design tokens & global resets ---------------------------------------- */
:root{
    --bg:#06090c;
    --bg2:#0b1014;
    --panel:#0d1418;
    --border:#1d2730;
    --text:#e9eef1;
    --muted:#8fa0aa;
    --accent:#3aa6ff;
    --accent2:#7ad0ff;
    --gold:#e8b95a;
    --radius:14px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
  a{color:inherit;text-decoration:none;}
  .mono{font-family:'JetBrains Mono',monospace;}

/* -- Site header / navigation -------------------------------------------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(6,9,12,0.8);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
  .logo img{height:69px;display:block;}
  .nav-links{display:flex;gap:36px;font-size:0.95rem;font-weight:500;}
  .nav-links a{color:var(--muted);transition:color .2s;}
  .nav-links a:hover{color:var(--text);}
  .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;}
  .hamburger span{width:24px;height:2px;background:var(--text);display:block;transition:.25s;}

/* -- Hero section: headline + animated SVG visual ------------------------- */
  .hero{padding:90px 0 80px;border-top:none;position:relative;overflow:hidden;}
  .hero::before{
    content:"";position:absolute;inset:-40% -10%;
    background:radial-gradient(circle at 70% 30%, rgba(58,166,255,0.10), transparent 55%),
               radial-gradient(circle at 20% 80%, rgba(90,209,255,0.08), transparent 50%);
    pointer-events:none;
  }
  .hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;position:relative;z-index:1;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.18em;
    color:var(--accent);margin-bottom:18px;font-weight:500;
  }
  h1{font-size:clamp(2rem, 1.4rem + 3.2vw, 3.2rem);line-height:1.12;font-weight:700;margin-bottom:22px;}
  h1 span{
    background:linear-gradient(120deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .lead{font-size:clamp(0.95rem, 0.85rem + 0.5vw, 1.08rem);color:var(--muted);max-width:520px;margin-bottom:34px;}
  .hero-actions{display:flex;gap:14px;margin-bottom:48px;flex-wrap:wrap;}
  .btn{
    padding:14px 28px;border-radius:999px;font-weight:600;font-size:.95rem;
    transition:all .2s ease;display:inline-flex;align-items:center;gap:8px;
  }
  .btn-primary{background:var(--accent);color:#06140c;}
  .btn-primary:hover{background:#6cc2ff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(58,166,255,0.25);}
  .btn-ghost{border:1px solid var(--border);color:var(--text);}
  .btn-ghost:hover{border-color:var(--accent2);color:var(--accent2);}
  .btn:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;}
  .nav-links a:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:4px;}

  .hero-meta{display:flex;gap:40px;flex-wrap:wrap;}
  .hero-meta div{font-size:.85rem;color:var(--muted);display:flex;flex-direction:column;gap:4px;}
  .hero-meta strong{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;color:var(--text);}

  /* -- Hero visual panel (Kenya outline / Maasai illustration container) -- */
  .africa-panel{
    position:relative;
    background:radial-gradient(circle at 50% 45%, #0f1a17 0%, #07100c 70%);
    border:1px solid var(--border);
    border-radius:20px;
    aspect-ratio:1/1;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    box-shadow:0 0 80px rgba(58,166,255,0.06) inset, 0 30px 60px -30px rgba(0,0,0,0.6);
  }
  .africa-panel svg{width:88%;height:88%;}

  .africa-fill{
    fill:none;
    stroke:url(#mapGradient);
    stroke-width:1.4;
    filter:drop-shadow(0 0 6px rgba(58,166,255,0.5));
  }
  .africa-glow{
    fill:rgba(58,166,255,0.05);
  }
  .byte{
    font-family:'JetBrains Mono',monospace;
    fill:var(--accent2);
    font-size:6px;
    opacity:0;
    animation:byteFade 4s ease-in-out infinite;
  }
  @keyframes byteFade{
    0%{opacity:0;transform:translateY(6px);}
    20%{opacity:.85;transform:translateY(0);}
    70%{opacity:.85;}
    100%{opacity:0;transform:translateY(-6px);}
  }
  .node{
    fill:var(--accent);
    filter:drop-shadow(0 0 4px rgba(58,166,255,0.9));
    animation:pulse 3s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:.35;r:1.6;}
    50%{opacity:1;r:2.6;}
  }
  .nairobi-node{
    fill:var(--gold);
    filter:drop-shadow(0 0 8px rgba(232,185,90,0.9));
    animation:pulse 2.4s ease-in-out infinite;
  }
  .cpu-pin{
    stroke:var(--gold);
    stroke-width:1.2;
    opacity:.8;
  }
  .cpu-core{
    fill:rgba(232,185,90,0.08);
    stroke:var(--gold);
    stroke-width:1.4;
    filter:drop-shadow(0 0 6px rgba(232,185,90,0.6));
  }
  .cpu-glow{
    fill:none;
    stroke:var(--gold);
    stroke-width:1;
    opacity:.5;
    animation:cpuPulse 2.6s ease-in-out infinite;
  }
  @keyframes cpuPulse{
    0%,100%{opacity:.25;}
    50%{opacity:.8;}
  }
  .panel-caption{
    position:absolute;bottom:18px;left:0;right:0;text-align:center;
    font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--muted);
    letter-spacing:.12em;
  }
  .panel-caption .ok{color:var(--accent);}

/* -- Generic section spacing & headings ----------------------------------- */
  section{padding:90px 0;border-top:1px solid var(--border);}
  .section-head{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:56px;flex-wrap:wrap;}
  .section-tag{
    font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.18em;
    color:var(--accent2);text-transform:uppercase;display:block;margin-bottom:14px;
  }
  .section-head h2{font-size:clamp(1.6rem, 1.3rem + 1.5vw, 2.1rem);font-weight:700;max-width:480px;}
  .section-head p{color:var(--muted);max-width:380px;font-size:.98rem;}

  /* -- Capabilities grid ---------------------------------------------------- */
  .services{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
  .service{background:var(--panel);padding:40px 32px;transition:background .2s, transform .25s ease;}
  .service:hover{background:#101a1f;transform:scale(1.02);}
  .service .num{font-family:'JetBrains Mono',monospace;color:var(--accent);font-size:.85rem;}
  .service h3{margin:14px 0 10px;font-size:1.18rem;}
  .service p{color:var(--muted);font-size:.92rem;}

  /* -- Execution blueprint / process steps ------------------------------------ */
  .process{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .step{
    border:1px solid var(--border);border-radius:var(--radius);padding:34px 30px;
    background:linear-gradient(160deg,var(--panel),#0a0f12);
    position:relative;
    transition:transform .25s ease, border-color .25s ease;
  }
  .step:hover{transform:scale(1.02) translateY(-2px);border-color:var(--accent2);}
  .step-num{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--accent2);letter-spacing:.1em;}
  .step h3{margin:14px 0 10px;font-size:1.1rem;}
  .step p{color:var(--muted);font-size:.9rem;}

  /* -- Contact section -------------------------------------------------------- */
  .contact-grid{display:grid;grid-template-columns:1fr;gap:40px;}
  .contact-desc{color:var(--muted);max-width:560px;margin:18px 0 36px;}
  .contact-list{display:flex;flex-wrap:wrap;gap:28px;}
  .contact-item{
    display:flex;align-items:center;gap:12px;
    border:1px solid var(--border);border-radius:999px;padding:14px 22px;
    font-size:.95rem;
  }
  .contact-item .ico{font-size:1.1rem;}
  .contact-item a:hover{color:var(--accent);}

/* -- Site footer ----------------------------------------------------------- */
  footer{border-top:1px solid var(--border);padding:32px 0;}
  .foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.85rem;color:var(--muted);}
  .foot-row a:hover{color:var(--text);}

/* -- Responsive breakpoints -------------------------------------------------- */
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .africa-panel{order:-1;max-width:420px;margin:0 auto;}
    .services{grid-template-columns:1fr 1fr;}
    .process{grid-template-columns:1fr 1fr;}
    .nav-links{
      position:absolute;top:74px;left:0;right:0;background:var(--bg2);
      flex-direction:column;padding:20px 24px;border-bottom:1px solid var(--border);
      display:flex;
      max-height:0;overflow:hidden;opacity:0;
      transition:max-height .3s ease, opacity .25s ease, padding .3s ease;
      padding-top:0;padding-bottom:0;
    }
    .nav-links.is-open{max-height:240px;opacity:1;padding:20px 24px;}
    .nav-links a{
      opacity:0;transform:translateY(-6px);
      transition:opacity .25s ease, transform .25s ease;
    }
    .nav-links.is-open a{opacity:1;transform:translateY(0);}
    .nav-links.is-open a:nth-child(1){transition-delay:.05s;}
    .nav-links.is-open a:nth-child(2){transition-delay:.1s;}
    .nav-links.is-open a:nth-child(3){transition-delay:.15s;}
    .nav-links.is-open a:nth-child(4){transition-delay:.2s;}
    .hamburger{display:flex;}
    .hamburger span{transition:transform .25s ease, opacity .25s ease;}
    .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .hamburger.active span:nth-child(2){opacity:0;}
    .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  }
  @media (max-width:560px){
    .services{grid-template-columns:1fr;}
    .process{grid-template-columns:1fr;}
  }