:root{
      --bg:#0a0c0f;
      --bg-2:#0f1216;
      --fg:#e6e8ea;
      --muted:#a7acb2;
      --accent:#f0c419; /* biohazard yellow */
      --accent-2:#ff3b30; /* alert red */
      --accent-3:#3aa1ff; /* info blue */
      --card:#12161b;
      --glass:rgba(18,22,27,.6);
      --border:rgba(240,196,25,.25);
      --success:#51d88a;
      --danger:#ff5c5c;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
      color:var(--fg);
      background:
        radial-gradient(1200px 700px at 20% -10%, rgba(240,196,25,.08), transparent 60%),
        radial-gradient(1200px 700px at 90% 10%, rgba(58,161,255,.06), transparent 60%),
        linear-gradient(180deg, #0b0d11 0%, #080a0c 100%);
      background-color:var(--bg);
    }
    a{color:inherit;text-decoration:none}
    .container{width:min(1200px,92vw);margin:0 auto}

    /* Hazard stripes top */
    .bar{height:8px;background:repeating-linear-gradient( 45deg, var(--accent), var(--accent) 14px, #1a1e24 14px, #1a1e24 28px);box-shadow:0 0 0 1px #000 inset}

    /* NAV */
    header{
      position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(8px);
      background:linear-gradient(180deg, rgba(10,12,15,.9), rgba(10,12,15,.6));
      border-bottom:1px solid rgba(255,255,255,.06)
    }
    .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
    .brand{display:flex;gap:12px;align-items:center}
    .brand svg{width:36px;height:36px;filter:drop-shadow(0 0 6px rgba(240,196,25,.4))}
    .brand h1{margin:0;font-family:Oswald,Inter,sans-serif;letter-spacing:.08em;font-size:20px}
    .nav a.btn{padding:10px 14px;border:1px solid rgba(255,255,255,.12);border-radius:10px;display:inline-flex;gap:10px;align-items:center}
    .nav .cta{background:linear-gradient(180deg, #f0c419, #dbaa0a);color:#111;border-color:#dbaa0a;font-weight:700}

    /* HERO */
    .hero{position:relative;isolation:isolate}
    .hero .bg{
      position:absolute;inset:0;z-index:-1;opacity:.4;
      background:
        radial-gradient(1000px 600px at 70% 30%, rgba(240,196,25,.08), transparent 70%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><defs><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="2"/><feColorMatrix type="saturate" values="0"/></filter></defs><rect width="100%" height="100%" filter="url(%23n)" opacity="0.09"/></svg>');
      mix-blend:screen;
    }
    .hero .container{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;padding:72px 0 48px}
    .kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.18em;font-size:12px}
    .title{font-family:Oswald,Inter,sans-serif;font-size:clamp(36px,6vw,64px);line-height:1.05;margin:.15em 0}
    .title .accent{color:var(--accent);text-shadow:0 0 28px rgba(240,196,25,.25)}
    .subtitle{color:var(--muted);max-width:60ch}
    .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02)}
    .btn.primary{background:linear-gradient(180deg, #f0c419, #c49408);color:#121212;border-color:#ad8307;font-weight:800}
    .btn.ghost{backdrop-filter:blur(4px)}

    .shield{
      align-self:center;justify-self:center;width:min(420px,80%);aspect-ratio:1/1;background:linear-gradient(180deg,#0e1116,#0a0c0f);border-radius:24px;border:1px solid rgba(255,255,255,.06);
      box-shadow:inset 0 0 0 1px rgba(240,196,25,.15),0 20px 60px rgba(0,0,0,.45);
      display:grid;place-items:center;position:relative;overflow:hidden
    }
    .shield::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 180deg at 50% 50%,rgba(240,196,25,.15),transparent 30%,transparent 70%,rgba(58,161,255,.15));filter:blur(40px)}
    .shield .badge{display:grid;place-items:center}
    .shield .badge svg{width:70%;height:70%}

    /* SECTIONS */
    section{padding:56px 0;border-top:1px solid rgba(255,255,255,.06)}
    h2{font-family:Oswald,Inter,sans-serif;font-size:clamp(22px,3.4vw,34px);letter-spacing:.04em;margin:0 0 16px}
    .grid{display:grid;gap:16px}
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}
    .grid.cols-2{grid-template-columns:repeat(2,1fr)}
    @media (max-width:920px){.hero .container{grid-template-columns:1fr}.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

    .card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px;position:relative;overflow:hidden}
    .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px var(--border)}
    .card .label{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
    .card p{margin:.35rem 0 0;color:#c7cbd1}

    .hazard{display:flex;align-items:center;gap:12px}
    .hazard .stripe{width:10px;align-self:stretch;background:repeating-linear-gradient( 45deg, var(--accent), var(--accent) 10px, #14181d 10px, #14181d 20px);border-radius:6px}

    /* FOOTER */
    footer{padding:28px 0 60px;color:#98a0a8}
    .mini{font-size:12px;color:#8c939b}

    .pill{display:inline-block;padding:6px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.03);font-size:12px}
    .kbd{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}

    /* LOGO */
    .logo-shield {
      width: 80%;
      height: auto;
      border-radius: 12px;
      box-shadow: 0 0 40px rgba(240,196,25,0.15);
      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
    }
        /* LOGO */
    .brand img.logo-small{
      width:36px;height:36px;display:block;
      filter:drop-shadow(0 0 6px rgba(240,196,25,.4));
    }
    .shield .badge img.logo-big{
      width:80%;height:auto;display:block;border-radius:12px;
      box-shadow:0 0 40px rgba(240,196,25,0.15);
      filter:drop-shadow(0 4px 12px rgba(0,0,0,0.6));
    }