@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Rajdhani:wght@300;400;500&display=swap');

:root{
      --bg:#07111f;
      --bg2:#0b1830;
      --card:#0d1525;
      --muted:#b8c2d1;
      --text:#f8fafc;
      --line:rgba(255,255,255,.11);
      --yellow:#facc15;
      --green:#22c55e;
      --blue:#38bdf8;
      --orange:#fb923c;
      --shadow:0 20px 50px rgba(0,0,0,.35);
      --radius:22px;
      --max:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(56,189,248,.15), transparent 28%),
        radial-gradient(circle at top right, rgba(250,204,21,.12), transparent 28%),
        linear-gradient(180deg, #030712 0%, #07111f 45%, #040814 100%);
      line-height:1.5;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
    .section-top{padding-top:56px}
    .section-tight{padding:28px 0}
    .brand-logo{width:34px;height:34px;object-fit:contain;border-radius:6px;flex-shrink:0}
    .nav{
      position:sticky; top:0; z-index:20;
      backdrop-filter: blur(14px);
      background:rgba(3,7,18,.72);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:16px}
    .brand{font-size:1.3rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
    .brand small{display:block;font-size:.73rem;font-weight:600;color:var(--muted);letter-spacing:.18em}
    .nav-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
    .nav-links a{color:#dbe4ef;font-weight:600;font-size:.96rem}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      padding:14px 22px;border-radius:999px;font-weight:800;transition:.2s ease;
      border:1px solid transparent;box-shadow:var(--shadow);white-space:nowrap
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{background:linear-gradient(90deg,#22c55e,#16a34a);color:#fff}
    .btn-secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
    .hero{padding:34px 0 38px}
    .hero2{padding:14px 0 38px}
    .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:center}
    .eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(250,204,21,.11);color:#fde047;border:1px solid rgba(250,204,21,.23);padding:9px 14px;border-radius:999px;font-weight:800;font-size:.92rem}
    h1{font-size:clamp(2.5rem, 5vw, 5.5rem);line-height:.95;margin:18px 0 18px;text-transform:uppercase;letter-spacing:-.03em}
    .accent{color:var(--yellow)}
    .lead{font-size:1.15rem;color:#d5dce7;max-width:60ch}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 28px}
    .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .stat{background:rgba(255,255,255,.05);border:1px solid var(--line);padding:18px;border-radius:18px}
    .stat strong{display:block;font-size:1.4rem;color:#fff}
    .stat strong.accent{color:var(--yellow)}
    .stat span{font-size:.94rem;color:var(--muted)}
    .hero-card{position:relative;width:50%;height:auto;display:block;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:28px;padding:14px;box-shadow:var(--shadow)}
    .hero-card img{border-radius:22px;width:50%;height:auto;display:block;margin:0 auto}
    .floating{position:absolute;left:-18px;bottom:20px;background:rgba(4,11,24,.96);border:1px solid rgba(34,197,94,.45);box-shadow:var(--shadow);padding:14px 16px;border-radius:18px;max-width:250px}
    .floating strong{display:block;color:#86efac;margin-bottom:4px}
    section{padding:10px 0}
    .section-title{font-size:clamp(1.8rem,3.1vw,3.1rem);line-height:1;text-transform:uppercase;margin:0 0 12px}
    .section-title .accent{color:var(--yellow)}
    .section-copy{max-width:68ch;color:var(--muted);font-size:1.04rem;margin-bottom:24px}
    .grid-3,.grid-4,.grid-2{display:grid;gap:18px}
    .grid-4{grid-template-columns:repeat(4,1fr)}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .grid-2{grid-template-columns:repeat(2,1fr)}
    .card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
    .card h3{margin:0 0 10px;font-size:1.18rem}
    .muted{color:var(--muted)}
    .icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:14px;font-weight:900}
    .green{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35)}
    .blue{background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35)}
    .yellow{background:rgba(250,204,21,.12);border:1px solid rgba(250,204,21,.35)}
    .orange{background:rgba(251,146,60,.12);border:1px solid rgba(251,146,60,.35)}
    .problem-solution{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    ul.clean{list-style:none;padding:0;margin:16px 0 0}
    ul.clean li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
    ul.clean li:last-child{border-bottom:none}
    .bullet{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;flex:0 0 28px;font-size:.85rem;font-weight:900}
    .bad{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.35);color:#fda4af}
    .good{background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.35);color:#86efac}
    .showcase{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:center}
    .showcase img{border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow)}
    .cta{
      background:
        radial-gradient(circle at left, rgba(34,197,94,.16), transparent 24%),
        radial-gradient(circle at right, rgba(56,189,248,.14), transparent 24%),
        linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
      border:1px solid var(--line);border-radius:28px;padding:34px;display:flex;justify-content:space-between;gap:22px;align-items:center;box-shadow:var(--shadow)
    }
    .pill-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
    .pill{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-weight:700;color:#dce6f3}
    footer{padding:30px 0 52px;color:#b7c3d7}
    .footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
    .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:6px;border-radius:8px}
    .hamburger span{display:block;width:22px;height:2px;background:#dbe4ef;border-radius:2px;transition:.25s ease}
    .mobile-menu{display:none;flex-direction:column;gap:0;background:rgba(3,7,18,.97);border-top:1px solid rgba(255,255,255,.08);padding:12px 0 16px}
    .mobile-menu a{padding:12px 20px;color:#dbe4ef;font-weight:600;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.05)}
    .mobile-menu a:last-child{border-bottom:none;margin:12px 16px 0;text-align:center}
    .mobile-menu.open{display:flex}
    @media (max-width: 980px){
      .hero-grid,.showcase,.problem-solution,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
      .stats{grid-template-columns:repeat(3,1fr)}
      .nav-links{display:none}
      .hamburger{display:flex}
      .brand{margin-left:15px}
      .floating{position:static;margin-top:12px;max-width:none}
      .hero-card img{width:100%;margin:0}
      .hero-grid > div:first-child{margin-top:0 !important}
      .hero-grid > div:last-child img{max-height:320px;width:100%;object-fit:cover;border-radius:18px}
      .cta{flex-direction:column;align-items:stretch}
      .section-top{padding-top:36px}
    }
    @media (max-width: 768px){
      .stats{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 540px){
      .stats{grid-template-columns:1fr}
      .hero-actions{flex-direction:column}
      .hero-actions .btn{width:100%;justify-content:center}
      h1{font-size:clamp(1.9rem,9vw,2.6rem)}
      .section-top{padding-top:28px}
    }

  .aether-footer {
    background: linear-gradient(180deg, #050d1a 0%, #030810 100%);
    border-top: 1px solid rgba(56, 165, 255, 0.2);
    padding: 3rem 0 0;
    font-family: 'Rajdhani', sans-serif;
    position: relative;
    overflow: hidden;
  }

  .aether-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #38a5ff, #7dd3fc, #38a5ff, transparent);
    opacity: 0.6;
  }

  .aether-footer::after {
    content: '';
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: min(500px, 100%);
    height: 160px;
    background: radial-gradient(ellipse at center, rgba(56, 165, 255, 0.06) 0%, transparent 70%);
    pointer-events: none;
  }

  .footer-grid {
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2.5rem;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .footer-logo-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .footer-brand-text {
    display: flex;
    flex-direction: column;
  }

  .brand-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #e0f2fe;
    line-height: 1.1;
  }

  .brand-name span {
    color: #38a5ff;
  }

  .brand-tagline {
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(148, 196, 235, 0.6);
    margin-top: 2px;
  }

  .brand-desc {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(148, 196, 235, 0.55);
    font-weight: 300;
    max-width: 240px;
  }

  .footer-contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(56, 165, 255, 0.08);
    border: 0.5px solid rgba(56, 165, 255, 0.25);
    border-radius: 40px;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    color: #7dd3fc;
    width: fit-content;
    letter-spacing: 0.02em;
  }

  .footer-contact-pill svg {
    opacity: 0.8;
  }

  .footer-col {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .footer-col h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #38a5ff;
    margin: 0 0 1.1rem;
    font-weight: 600;
  }

  .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: flex-end;
  }

  .footer-col ul li a {
    font-size: 0.88rem;
    color: rgba(148, 196, 235, 0.6);
    text-decoration: none;
    font-weight: 400;
    letter-spacing: 0.02em;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .footer-col ul li a::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(56, 165, 255, 0.35);
    flex-shrink: 0;
  }

  .footer-col ul li a:hover {
    color: #7dd3fc;
  }

  .footer-col ul li a:hover::before {
    background: #38a5ff;
  }

  .footer-bottom {
    max-width: 1100px;
    margin: 2.5rem auto 0;
    padding: 1rem 2rem;
    border-top: 0.5px solid rgba(56, 165, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: rgba(148, 196, 235, 0.35);
    letter-spacing: 0.03em;
  }

  .za-flag {
    font-size: 0.95rem;
  }

  .footer-bottom-right {
    font-size: 0.75rem;
    color: rgba(148, 196, 235, 0.25);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
  }

  .circuit-line {
    position: absolute;
    opacity: 0.07;
    pointer-events: none;
  }

  @media (max-width: 760px) {
    .footer-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
      padding: 0 1.25rem;
    }
    .footer-col {
      text-align: left;
      align-items: flex-start;
    }
    .footer-col ul {
      align-items: flex-start;
    }
    .footer-col ul li a::before {
      display: none;
    }
    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.4rem;
      padding: 1rem 1.25rem;
    }
  }