:root{--bg:#0b1020;--bg-soft:#0d1326;--fg:#e5e7eb;--muted:#9aa4b2;--brand:#ffd166;--brand-2:#60a5fa;--border:rgba(255,255,255,0.08);--radius:18px;--shadow:0 10px 30px rgba(0,0,0,.45);--maxw:1100px}
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 80% -10%, rgba(96,165,250,.08), transparent),radial-gradient(900px 500px at -10% -20%, rgba(255,209,102,.08), transparent),var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--maxw);margin:0 auto;padding:24px}

    /* Header */
    header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(10px);background:rgba(11,16,32,.55);border-bottom:1px solid var(--border);z-index:40}
    .nav{display:flex;align-items:center;gap:22px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.2px}
    img.logo{height:34px;width:auto;border-radius:8px;transition:opacity .3s ease}
    .spacer{flex:1}
    .links{display:flex;gap:14px;align-items:center}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:var(--shadow);font-weight:600}
    .btn:hover{transform:translateY(-1px)}

    /* Mobile menu */
    .toggle{display:none;border:1px solid var(--border);background:transparent;color:var(--fg);border-radius:12px;padding:8px 10px}
    .mobile-menu{display:none;}
    .mobile-menu.open{display:block}
    .mobile-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:12px;margin-top:10px}
    .mobile-card a{display:block;padding:10px 6px;border-radius:8px}
    .mobile-card a:hover{background:rgba(255,255,255,.06)}

    /* Hero */
    .hero{padding:80px 24px 24px}
    .hero-inner{max-width:var(--maxw);margin:0 auto}
    .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);font-size:13px;color:var(--muted)}
    .badge .dot{height:8px;width:8px;border-radius:999px;background:linear-gradient(135deg,var(--brand),#f4a300)}
    h1{font-size:48px;line-height:1.05;margin:16px 0 12px}
    .accent{background:linear-gradient(135deg,var(--brand),#ffe599 60%,var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
    .lead{font-size:18px;color:#cbd5e1}
    .hero-grid{display:grid;grid-template-columns:1fr;gap:20px}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .hero-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:var(--radius);padding:22px}

    /* Cards & sections */
    .card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  text-align: center;
}
.card-alt {
  background: #ffffff; /* White background for maximum logo contrast */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05), var(--shadow);
  text-align: center;
  color: #333; /* Dark text for readability on white background */
}

.card-alt h3 {
  margin: 6px 0 10px;
  font-size: 18px;
  color: #000; /* Black font for h3 */
}

.card-alt .logo {
  margin: 0 auto;
  display: block;
  max-width: 120px;
  min-width: 100px;
  min-height: 40px;
  height: auto;
  object-fit: contain;
  /* Add subtle styling to help logos stand out */
  filter: brightness(1.05) contrast(1.1);
  transition: filter 0.2s ease;
}

.card-alt:hover .logo {
  filter: brightness(1.1) contrast(1.15);
}.card h3 {
  margin: 6px 0 10px;
  font-size: 18px;
}

.logo-wrapper {
  margin-top: 20px;
}

.card .logo {
  margin: 0 auto;
  display: block;
  max-width: 120px;
  min-width: 100px;
  min-height: 40px;
  height: auto;
  object-fit: contain;
}

    .muted{color:var(--muted)}

    section{padding:56px 24px}
    section.alt{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
    .list{display:grid;gap:10px}
    .list li{list-style:none;padding-left:0}

    /* Footer */
    footer{padding:32px 24px;color:var(--muted);border-top:1px solid var(--border)}
    .footer-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr .6fr;gap:22px;align-items:center}

    @media (min-width: 1000px){
      /* Desktop: keep hero text at top, card below it centered */
      .hero-grid{grid-template-columns:1fr;}
      .hero-card{max-width:var(--maxw);margin:0 auto}
    }

    @media (max-width: 960px){
      /* Mobile nav */
      .links{display:none}
      .toggle{display:inline-flex}
      h1{font-size:38px}
      .grid{grid-template-columns:1fr}
    }