:root{
      --bg:#0f1621; --stroke:rgba(255,255,255,.10);
      --muted:#a9b4c7; --heading:#eef3ff;
      --chip:#1b2432; --shadow:0 14px 34px rgba(0,0,0,.55);
      --primary:#e4c15a; --primary-ink:#0d0f14;
      --card-h: 300px;
      --img-w: 440px;
      --gap: 22px;
      --pad: 18px;
      --pill-radius: 28px;
      --gold-1:#f5e7b0; --gold-2:#e4c15a; --gold-3:#caa63f;
      --red:#ba1f2a; --red-ink:#ffe5e7;
      --blue:#1f3b96; --blue-ink:#e6eeff;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--muted);
      background:
        radial-gradient(1100px 560px at 68% -18%, #17263a 0%, #0f1621 60%),
        linear-gradient(180deg,#0f1621 0%, #0b1220 100%);
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      position:relative; overflow-x:hidden; isolation:isolate;
    }

    /* ultra-subtle texture + vignette */
    body::before{
      content:""; position:fixed; inset:-30%;
      pointer-events:none; mix-blend-mode:soft-light; opacity:.22;
      background:
        radial-gradient(60% 80% at 50% -10%, rgba(255,255,255,.06), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px);
      filter:blur(0.2px);
    }
    body::after{
      content:""; position:fixed; inset:0; pointer-events:none;
      background:radial-gradient(1200px 420px at 50% 105%, rgba(0,0,0,.28), transparent 60%);
    }

    .wrap{max-width:1180px;margin:0 auto;padding:var(--pad);min-height:100svh}

    .hero-title{
      text-align:center;
      font-family:"Playfair Display",serif;
      text-transform:uppercase;
      color:var(--heading);
      font-size:clamp(22px,3vw,34px);
      margin:0 0 16px;
      letter-spacing:1.05px;
      line-height:1.05;
      text-shadow:0 .6px 0 rgba(0,0,0,.35);
    }
    .hero-title + .spark{
      display:block;width:180px;height:2px;margin:10px auto 2px;border-radius:2px;
      background:linear-gradient(90deg,transparent,var(--gold-1),var(--gold-2),transparent);
      filter:drop-shadow(0 0 6px rgba(228,193,90,.35));
    }

    .stack{display:flex;flex-direction:column;gap:var(--gap)}

    .pill{
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
      border:1px solid var(--stroke);
      border-radius:var(--pill-radius);
      box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        var(--shadow);
      height:var(--card-h);
      display:grid; align-items:center; overflow:hidden; position:relative;
      transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
      will-change:transform, box-shadow;
    }
    .pill.a{grid-template-columns: var(--img-w) 1fr;}
    .pill.b{grid-template-columns: 1fr var(--img-w);}

    /* premium gradient border ring */
    .pill::before{
      content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
      padding:1px; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      background:
        linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
    }

    /* pill-specific ambient glows */
    .pill.a::after, .pill.b::after{
      content:""; position:absolute; inset:-28% -18%; border-radius:50%;
      opacity:.0; transition:opacity .28s ease; filter:blur(16px); pointer-events:none;
    }
    .pill.a::after{ background:radial-gradient(closest-side, rgba(186,31,42,.16), transparent 60%); }
    .pill.b::after{ background:radial-gradient(closest-side, rgba(31,59,150,.18), transparent 60%); }

    @media (hover:hover){
      .pill:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(0,0,0,.6); border-color:rgba(255,255,255,.16) }
      .pill:hover::after{ opacity:.9 }
    }

    .imgbox{height:100%;width:100%;padding:14px}
    .imgbox .frame{
      height:100%;width:100%;border-radius:22px;overflow:hidden;border:1px solid var(--stroke);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 3px 12px rgba(0,0,0,.38);
      background:
        linear-gradient(14deg, rgba(255,255,255,.06), transparent 42%),
        #0e1726;
      position:relative; isolation:isolate;
    }
    .imgbox img{display:block;width:100%;height:100%;object-fit:cover;transform:translateZ(0);transition:transform .5s ease}
    @media (hover:hover){ .pill:hover .imgbox img{ transform:scale(1.025) } }

    .content{height:100%;padding:18px 20px;display:flex;flex-direction:column}
    .content-inner{
      flex:1 1 auto; min-height:0; overflow:auto; padding-right:2px;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; max-width:520px; margin:0 auto;
    }

    h3{
      font-family:"Playfair Display",serif;
      font-weight:700; color:var(--heading);
      font-size:clamp(22px,2.6vw,30px);
      line-height:1.14; margin:0 0 10px;
      text-shadow:0 .6px 0 rgba(0,0,0,.35);
      position:relative;
    }
    h3::before{
      content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
      width:42px; height:3px; border-radius:3px;
      background:linear-gradient(90deg,var(--gold-1),var(--gold-2));
      filter:drop-shadow(0 0 5px rgba(228,193,90,.35));
    }

    .meta{font-size:14px;color:#cfd7e6;margin:0 0 8px}

    .actions{flex:0 0 auto;display:flex;gap:12px;justify-content:center}

    /* Buttons: per-pill harmony with gold rim */
    .btn{
      appearance:none; text-decoration:none; cursor:pointer;
      border-radius:12px; padding:10px 16px; font-weight:700; letter-spacing:.2px;
      font-size:13.5px; position:relative; overflow:hidden;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
      border:1px solid rgba(255,255,255,.12); background:#162133; color:#e6eefb;
      box-shadow:0 3px 10px rgba(0,0,0,.35);
    }
    .btn.primary{
      border:none; color:var(--primary-ink);
      background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
      box-shadow:0 6px 16px rgba(228,193,90,.38), inset 0 1px 0 rgba(255,255,255,.4);
    }

    /* Variant hues by pill for subtle harmony */
    .pill.a .btn.primary{
      background:
        linear-gradient(180deg, color-mix(in oklab, var(--gold-1) 88%, #fff 12%), color-mix(in oklab, var(--gold-2) 92%, var(--red) 8%));
    }
    .pill.b .btn.primary{
      background:
        linear-gradient(180deg, color-mix(in oklab, var(--gold-1) 88%, #fff 12%), color-mix(in oklab, var(--gold-2) 92%, var(--blue) 8%));
    }

    /* glossy sweep */
    .btn.primary::after{
      content:""; position:absolute; inset:-40% -20% auto auto; width:44%; height:220%;
      background:linear-gradient(120deg, rgba(255,255,255,.6), rgba(255,255,255,0));
      transform:translateX(-120%) rotate(12deg); transition:transform .6s ease; pointer-events:none;
    }
    @media (hover:hover){
      .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.42) }
      .btn.primary:hover{ box-shadow:0 8px 20px rgba(228,193,90,.48), inset 0 1px 0 rgba(255,255,255,.5) }
      .btn.primary:hover::after{ transform:translateX(60%) rotate(12deg) }
    }

    /* focus visibility */
    .btn:focus-visible, a:focus-visible{
      outline:2px solid var(--gold-2); outline-offset:2px; border-radius:12px;
    }

    @media (min-width: 900px){
      body{/* overflow:hidden; */}
      .wrap{min-height:100vh}
    }
    @media (max-width: 860px){
      .pill{height:auto}
      .pill.a, .pill.b{grid-template-columns:1fr}
      .imgbox{height:260px}
      body{overflow:auto}
      .pill.b{display:flex;flex-direction:column;}
      .pill.b .imgbox{order:-1;}
    }

    @supports not (color: color-mix(in oklab, white, black)){
      /* graceful fallback: keep classic gold if color-mix unsupported */
      .pill.a .btn.primary,
      .pill.b .btn.primary{
        background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
      }
    }

    @media (prefers-reduced-motion: reduce){
      *{transition:none !important; animation:none !important}
    }

    footer{text-align:center;color:#7f8aa3;font-size:12px;margin-top:10px}