Embed

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Job Board (Hardcoded JSON)</title>
  <style>
    /* --- Brand variables (edit these) --- */
    :root{
      --brand-1: #0b74ff; /* primary */
      --brand-2: #0b4ccf; /* primary-dark */
      --accent: #ff7a59;  /* accent */
      --bg: #ffffff;
      --muted: #6b7280;
      --card: #f8fafc;
      --radius: 12px;
      --max-width: 1100px;
      --font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }

    *{box-sizing:border-box}
    body{font-family:var(--font-family);margin:24px;background:linear-gradient(180deg,#fbfdff, #ffffff);color:#0f172a}
    .wrap{max-width:var(--max-width);margin:0 auto}

    /* Header / Controls */
    .controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
    .search{flex:1;min-width:200px}
    input[type=text], select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e6eef9;background:white}
    .small{width:180px}
    .toggle{display:flex;gap:6px;align-items:center}

    /* Grid */
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
    .card{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:0 6px 18px rgba(11,74,207,0.06);display:flex;flex-direction:column;gap:10px}
    .top{display:flex;gap:12px;align-items:center}
    .logo{width:56px;height:56px;border-radius:8px;flex-shrink:0;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(15,23,42,0.04)}
    .logo img{width:100%;height:100%;object-fit:contain}
    .title{font-weight:700;font-size:16px}
    .company{color:var(--muted);font-size:13px}

    .meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:13px}
    .tag{background:rgba(11,116,255,0.08);color:var(--brand-1);padding:6px 8px;border-radius:999px;font-size:12px}
    .badgestack{display:flex;gap:8px;flex-wrap:wrap}

    .desc{color:#0f172a;font-size:14px;line-height:1.35;min-height:54px;overflow:hidden}

    .footer{display:flex;justify-content:space-between;align-items:center;gap:12px}
    .apply{background:var(--brand-1);color:white;padding:8px 12px;border-radius:10px;border:none;cursor:pointer;text-decoration:none}
    .outline{border:1px solid #e6eef9;background:transparent;padding:7px 10px;border-radius:8px;color:var(--muted);font-size:13px}

    /* Modal */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.4);padding:20px}
    .modal.open{display:flex}
    .modal-card{background:white;border-radius:12px;max-width:920px;width:100%;padding:20px;max-height:90vh;overflow:auto}
    .close{background:#f3f4f6;border:none;border-radius:8px;padding:8px 10px;cursor:pointer}

    /* Responsive tweaks */
    @media (max-width:640px){
      .controls{flex-direction:column}
      .small{width:100%}
      .logo{width:48px;height:48px}
    }

    /* Tiny helpers */
    .muted{color:var(--muted)}
    .smalltext{font-size:12px;color:var(--muted)}
    .chips{display:flex;gap:6px;flex-wrap:wrap}
  </style>
</head>
<body>
  <div class="wrap">
    <h1 style="margin:0 0 12px 0">Job Board</h1>
    <div class="controls">
      <div cla

ATOMIC ZERO

Atomic Zero is an AI and Cyber Security Intelligence partner helping enterprises modernize, secure, and scale. We bring deep expertise in AI adoption, autonomous operations, and advanced cyber defense helping organizations move from experimentation to real-world, measurable outcomes.

Our mission is to help enterprises operate smarter, defend faster, and grow stronger securely and at scale.