:root{
      --bg:#050505;
      --bg-alt:#111111;
      --accent:#d62222;            /* AffJam red */
      --accent-soft:rgba(214,34,34,.18);
      --accent-strong:#930000;
      --accent-leaf:#22c55e;       /* leaf green */
      --text:#f9fafb;
      --muted:#9ca3af;
      --card:rgba(2,6,23,.72);
      --card-2:rgba(15,23,42,.72);
      --border:rgba(148,163,184,.28);
      --border-strong:rgba(214,34,34,.55);
      --radius-xl:1.6rem;
      --radius-lg:1.1rem;
      --radius-md:.85rem;
      --radius-full:999px;
      --shadow-soft:0 22px 55px rgba(0,0,0,.82);
      --shadow-card:0 18px 40px rgba(0,0,0,.65);
      --max:1180px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 700px at 10% -10%, rgba(214,34,34,.28), transparent 55%),
        radial-gradient(900px 600px at 85% 0%, rgba(34,197,94,.14), transparent 60%),
        radial-gradient(900px 600px at 20% 110%, rgba(248,113,113,.12), transparent 60%),
        radial-gradient(circle at top left, #111827 0, #020617 40%, #000000 100%);
      -webkit-font-smoothing:antialiased;
      line-height:1.55;
    }

    a{color:inherit;text-decoration:none}
    .wrap{
      min-height:100vh;
      display:flex;
      justify-content:center;
      padding:34px 16px 70px;
    }

    .deck{
      width:100%;
      max-width:var(--max);
      position:relative;
      border-radius:34px;
      border:1px solid var(--border);
      background:
        linear-gradient(135deg, rgba(0,0,0,.96), rgba(15,23,42,.88));
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      isolation:isolate;
    }
    .deck::before{
      content:"";
      position:absolute;
      inset:-40%;
      background:
        radial-gradient(circle at 0% 0%, rgba(214,34,34,.55), transparent 60%),
        radial-gradient(circle at 80% 10%, rgba(248,113,113,.18), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(34,197,94,.22), transparent 60%);
      opacity:.72;
      pointer-events:none;
      z-index:0;
      filter:saturate(1.1);
    }
    .inner{position:relative;z-index:1;padding:32px 22px 26px}
    @media (min-width:900px){ .inner{padding:34px 34px 30px} }

    /* ===== Masthead (kept) ===== */
    .top-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:18px;
    }
    .logo-mark{display:flex;align-items:center;gap:10px}
    .affjam-logo-small{height:96px;width:auto}
    .logo-text{display:flex;flex-direction:column;gap:2px;margin-left:12px}
    .logo-name{
      font-size:.9rem;
      font-weight:600;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:#e5e7eb;
    }
    .logo-tagline{font-size:.78rem;color:var(--muted)}
    .pill-label{
      padding:6px 12px;
      border-radius:var(--radius-full);
      border:1px solid rgba(148,163,184,.38);
      font-size:.74rem;
      text-transform:uppercase;
      letter-spacing:.14em;
      color:var(--muted);
      background:radial-gradient(circle at top left, rgba(248,250,252,.16), rgba(15,23,42,.85));
      display:inline-flex;
      align-items:center;
      gap:8px;
      backdrop-filter:blur(14px);
      white-space:nowrap;
    }
    .pill-dot{
      width:8px;height:8px;border-radius:var(--radius-full);
      background:var(--accent-leaf);
      box-shadow:0 0 0 4px rgba(34,197,94,.22);
    }



    /* ===== Utility ===== */
    .grid{display:grid;gap:18px}
    .two-col{display:grid;gap:18px}
    @media (min-width:980px){ .two-col{grid-template-columns:1.15fr .85fr;gap:22px} }

    .card{
      background:linear-gradient(145deg, rgba(15,23,42,.84), rgba(0,0,0,.84));
      border:1px solid var(--border);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-card);
      position:relative;
      overflow:hidden;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:-20%;
      background:
        radial-gradient(circle at 10% 0%, rgba(248,250,252,.12), transparent 55%),
        radial-gradient(circle at 82% 100%, rgba(214,34,34,.26), transparent 62%);
      opacity:.85;
      pointer-events:none;
    }
    .card > *{position:relative}

    .section{margin-top:22px}
    @media (min-width:900px){ .section{margin-top:26px} }

    .kicker{
      display:inline-flex;align-items:center;gap:8px;
      padding:5px 11px;border-radius:var(--radius-full);
      border:1px solid rgba(148,163,184,.45);
      background:rgba(15,23,42,.75);
      backdrop-filter:blur(10px);
      font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#e5e7eb;
    }
    .kdot{width:7px;height:7px;border-radius:var(--radius-full);background:var(--accent)}
    .h2{
      font-size:1.25rem;font-weight:650;letter-spacing:-.02em;margin-top:10px
    }
    @media (min-width:900px){ .h2{font-size:1.35rem} }
    .muted{color:var(--muted)}
    .divider{
      height:1px;background:linear-gradient(90deg, transparent, rgba(148,163,184,.35), transparent);
      margin:18px 0;
    }

    /* ===== Hero ===== */
    .hero{padding:22px 18px}
    @media (min-width:900px){ .hero{padding:26px 24px} }
    .hero-title{
      font-size:clamp(2.05rem, 3.2vw + 1rem, 3.05rem);
      line-height:1.03;
      letter-spacing:-.045em;
      font-weight:750;
      margin-top:10px;
    }
    .hero-title .grad{
      background:linear-gradient(135deg,#fecaca,#f97373,#b91c1c);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      text-shadow:0 0 28px rgba(214,34,34,.12);
    }
    .hero-sub{font-size:1.02rem;max-width:40rem;margin-top:12px;color:rgba(209,213,219,.86)}
    .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
    .btn{
      display:inline-flex;align-items:center;gap:10px;
      padding:10px 14px;border-radius:var(--radius-full);
      border:1px solid rgba(148,163,184,.35);
      background:rgba(2,6,23,.65);
      color:#e5e7eb;
      font-size:.92rem;font-weight:600;
      transition:transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .btn:hover{transform:translateY(-1px);border-color:rgba(214,34,34,.55);background:rgba(15,23,42,.75)}
    .btn.primary{
      border-color:rgba(214,34,34,.55);
      background:linear-gradient(135deg, rgba(214,34,34,.22), rgba(2,6,23,.65));
      box-shadow:0 18px 40px rgba(214,34,34,.12);
    }
    .btn .ico{
      width:26px;height:26px;border-radius:999px;
      display:grid;place-items:center;
      background:rgba(214,34,34,.18);
      border:1px solid rgba(214,34,34,.35);
      font-size:.9rem;
    }

    .hero-bullets{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
      margin-top:18px;
    }
    @media (max-width:720px){ .hero-bullets{grid-template-columns:1fr} }
    .mini{
      border-radius:18px;
      border:1px solid rgba(148,163,184,.25);
      background:linear-gradient(135deg, rgba(248,250,252,.06), rgba(15,23,42,.62));
      padding:12px 12px;
      display:flex;gap:10px;align-items:flex-start;
    }
    .mini .dot{
      width:10px;height:10px;border-radius:999px;margin-top:6px;
      background:var(--accent);
      box-shadow:0 0 0 5px rgba(214,34,34,.12);
      flex:0 0 auto;
    }
    .mini b{font-weight:650}
    .mini p{font-size:.88rem;color:rgba(209,213,219,.82);margin-top:2px}

    /* ===== Right column highlight stack ===== */
    .stack{display:flex;flex-direction:column;gap:14px}
    .panel{
      border-radius:var(--radius-lg);
      border:1px solid var(--border);
      background:radial-gradient(circle at top left, rgba(75,85,99,.18), rgba(15,23,42,.88));
      padding:16px 16px;
      position:relative;
      overflow:hidden;
    }
    .panel::after{
      content:"";
      position:absolute;
      inset:auto -30% -50% -30%;
      height:160px;
      background:radial-gradient(circle at 40% 40%, rgba(214,34,34,.22), transparent 60%);
      pointer-events:none;
      filter:blur(2px);
    }
    .panel h3{font-size:.98rem;font-weight:650;letter-spacing:-.02em}
    .panel p{margin-top:6px;font-size:.88rem;color:rgba(209,213,219,.82)}
    .tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
    .tag{
      font-size:.74rem;
      padding:5px 9px;
      border-radius:var(--radius-full);
      border:1px solid rgba(148,163,184,.28);
      background:rgba(2,6,23,.5);
      color:#e5e7eb;
    }
    .tag.hot{border-color:rgba(214,34,34,.45);background:rgba(214,34,34,.13)}
    .tag.leaf{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.12)}

    /* ===== Sections grids ===== */
    .cards-5{display:grid;gap:12px}
    @media (min-width:820px){ .cards-5{grid-template-columns:repeat(5,minmax(0,1fr))} }
    @media (min-width:600px) and (max-width:819px){ .cards-5{grid-template-columns:repeat(2,minmax(0,1fr))} }
    .role{
      border-radius:18px;
      border:1px solid rgba(148,163,184,.25);
      background:linear-gradient(135deg, rgba(248,250,252,.06), rgba(15,23,42,.62));
      padding:14px 14px;
      min-height:122px;
      position:relative;
      overflow:hidden;
    }
    .role::before{
      content:"";
      position:absolute;
      right:-40px;top:-40px;
      width:140px;height:140px;border-radius:999px;
      background:radial-gradient(circle at 35% 35%, rgba(214,34,34,.22), transparent 70%);
      pointer-events:none;
    }
    .role .icon{
      width:34px;height:34px;border-radius:12px;
      display:grid;place-items:center;
      border:1px solid rgba(214,34,34,.35);
      background:rgba(214,34,34,.14);
      font-size:1.05rem;
    }
    .role h4{margin-top:10px;font-size:.93rem;font-weight:650}
    .role p{margin-top:6px;font-size:.84rem;color:rgba(209,213,219,.78)}

    .value-grid{display:grid;gap:12px}
    @media (min-width:900px){ .value-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
    @media (min-width:600px) and (max-width:899px){ .value-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
    .vcard{
      border-radius:18px;
      border:1px solid rgba(148,163,184,.25);
      background:linear-gradient(145deg, rgba(15,23,42,.86), rgba(2,6,23,.64));
      padding:14px 14px;
      position:relative;
      overflow:hidden;
    }
    .vcard::after{
      content:"";
      position:absolute;inset:auto -30% -60% -30%;
      height:180px;
      background:radial-gradient(circle at 50% 20%, rgba(34,197,94,.18), transparent 60%);
      pointer-events:none;
    }
    .vtop{display:flex;gap:10px;align-items:flex-start}
    .vico{
      width:34px;height:34px;border-radius:12px;
      display:grid;place-items:center;
      border:1px solid rgba(148,163,184,.28);
      background:rgba(248,250,252,.06);
      color:#e5e7eb;
      flex:0 0 auto;
    }
    .vcard h4{font-size:.95rem;font-weight:650}
    .vcard p{margin-top:6px;font-size:.86rem;color:rgba(209,213,219,.78)}

    /* ===== Accordion use-cases ===== */
    .accordion{display:grid;gap:10px}
    details.usecase{
      border-radius:18px;
      border:1px solid rgba(148,163,184,.25);
      background:linear-gradient(145deg, rgba(15,23,42,.86), rgba(0,0,0,.78));
      overflow:hidden;
    }
    details.usecase[open]{border-color:rgba(214,34,34,.45);box-shadow:0 18px 42px rgba(214,34,34,.10)}
    summary{
      cursor:pointer;
      list-style:none;
      padding:14px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      user-select:none;
    }
    summary::-webkit-details-marker{display:none}
    .sum-left{display:flex;align-items:center;gap:12px}
    .badge{
      width:34px;height:34px;border-radius:12px;
      display:grid;place-items:center;
      border:1px solid rgba(214,34,34,.35);
      background:rgba(214,34,34,.14);
      font-size:1.05rem;
      flex:0 0 auto;
    }
    .sum-title{display:flex;flex-direction:column;gap:2px}
    .sum-title b{font-size:.96rem}
    .sum-title span{font-size:.78rem;color:rgba(209,213,219,.74)}
    .chev{
      width:34px;height:34px;border-radius:12px;
      display:grid;place-items:center;
      border:1px solid rgba(148,163,184,.25);
      background:rgba(248,250,252,.05);
      color:#e5e7eb;
      transition:transform .18s ease;
      flex:0 0 auto;
    }
    details[open] .chev{transform:rotate(45deg)}
    .uc-body{padding:0 14px 14px}
    .uc-grid{display:grid;gap:10px}
    @media (min-width:900px){ .uc-grid{grid-template-columns:1fr 1fr} }
    .uc-block{
      border-radius:16px;
      border:1px solid rgba(148,163,184,.20);
      background:linear-gradient(135deg, rgba(248,250,252,.05), rgba(2,6,23,.55));
      padding:12px 12px;
    }
    .uc-block h5{
      font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
      color:rgba(209,213,219,.72);
      margin-bottom:6px;
      display:flex;align-items:center;gap:8px;
    }
    .uc-dot{width:7px;height:7px;border-radius:999px;background:var(--accent)}
    .uc-block p{font-size:.88rem;color:rgba(229,231,235,.86)}
    .uc-callout{
      margin-top:10px;
      border-radius:16px;
      border:1px solid rgba(34,197,94,.32);
      background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(2,6,23,.55));
      padding:12px 12px;
      color:rgba(229,231,235,.92);
      font-size:.88rem;
    }

    /* ===== Approach ===== */
    .approach{display:grid;gap:12px;margin-top:12px}
    @media (min-width:900px){ .approach{grid-template-columns:repeat(2,minmax(0,1fr))} }
    .pillar{
      border-radius:18px;
      border:1px solid rgba(148,163,184,.25);
      background:linear-gradient(145deg, rgba(15,23,42,.86), rgba(2,6,23,.60));
      padding:14px 14px;
      position:relative;
      overflow:hidden;
    }
    .pillar::before{
      content:"";
      position:absolute;
      left:-60px;bottom:-70px;
      width:220px;height:220px;border-radius:999px;
      background:radial-gradient(circle at 40% 35%, rgba(214,34,34,.18), transparent 70%);
      pointer-events:none;
    }
    .pillar h4{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700;letter-spacing:-.02em}
    .pico{
      width:34px;height:34px;border-radius:12px;
      display:grid;place-items:center;
      border:1px solid rgba(148,163,184,.25);
      background:rgba(248,250,252,.05);
      font-size:1.05rem;
      flex:0 0 auto;
    }
    .pillar p{margin-top:8px;color:rgba(209,213,219,.80);font-size:.9rem}

    /* ===== About ===== */
    .split{display:grid;gap:12px}
    @media (min-width:980px){ .split{grid-template-columns:1.15fr .85fr} }
    .story{padding:18px 18px}
    .story p{margin-top:10px;color:rgba(209,213,219,.84);font-size:.92rem}
    .story .big{font-size:1.02rem;color:rgba(229,231,235,.92)}
    .sidecards{display:flex;flex-direction:column;gap:12px}
    .side{
      border-radius:18px;
      border:1px solid rgba(148,163,184,.25);
      background:linear-gradient(145deg, rgba(15,23,42,.86), rgba(0,0,0,.78));
      padding:14px 14px;
      position:relative;
      overflow:hidden;
    }
    .side strong{font-weight:700}
    .side p{margin-top:6px;color:rgba(209,213,219,.82);font-size:.9rem}
    .side .note{margin-top:10px;color:rgba(156,163,175,.92);font-size:.82rem}
    .notlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
    .chip{
      padding:6px 10px;border-radius:999px;
      border:1px dashed rgba(148,163,184,.32);
      background:rgba(2,6,23,.45);
      color:rgba(229,231,235,.9);
      font-size:.82rem;
    }

    /* ===== CTA ===== */
    .cta{
      margin-top:18px;
      border-radius:var(--radius-xl);
      border:1px solid rgba(214,34,34,.55);
      background:
        radial-gradient(circle at 15% 0%, rgba(214,34,34,.30), transparent 58%),
        radial-gradient(circle at 85% 120%, rgba(34,197,94,.18), transparent 55%),
        linear-gradient(135deg, rgba(15,23,42,.90), rgba(0,0,0,.76));
      padding:18px 16px;
      overflow:hidden;
      position:relative;
    }
    @media (min-width:900px){ .cta{padding:22px 22px} }
    .cta h3{font-size:1.15rem;font-weight:750;letter-spacing:-.03em}
    .cta p{margin-top:8px;color:rgba(209,213,219,.86);max-width:62ch}
    .cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
    .fine{margin-top:10px;color:rgba(156,163,175,.86);font-size:.78rem}

    /* ===== Footer ===== */
    footer{
      margin-top:18px;
      display:flex;
      flex-wrap:wrap;
      gap:10px 14px;
      align-items:center;
      justify-content:space-between;
      padding:6px 2px 0;
      color:rgba(156,163,175,.88);
      font-size:.78rem;
    }
    .foot-pills{display:flex;flex-wrap:wrap;gap:8px}
    .foot-pills span{
      padding:5px 9px;border-radius:999px;
      border:1px solid rgba(148,163,184,.25);
      background:rgba(2,6,23,.45);
      color:rgba(229,231,235,.9);
    }

    /* Accessibility */
    :focus-visible{outline:2px solid rgba(214,34,34,.7);outline-offset:2px;border-radius:10px}

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      .btn, .chev{transition:none}
    }

.cta-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pill-label.pill-red{
  color:#fee2e2;
  border-color:var(--border-strong);
  background:
    radial-gradient(circle at top left, rgba(214,34,34,.22), rgba(15,23,42,.85));
}

.pill-label.pill-red .pill-dot{
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(214,34,34,.28);
}