:root{
    --ink:#0a0a0f;
    --paper:#fafaff;
    --muted:#6b6b7c;
    --line:rgba(10,10,15,.07);

    --red:#e8456b;
    --red-soft:#fff0f3;
    --red-deep:#c01e48;

    --blue:#3a5bff;
    --blue-soft:#eef2ff;
    --teal:#0fb3a5;
    --green:#16a368;
    --green-soft:#e9faf2;

    --brand-grad:linear-gradient(120deg, #0d6efd 0%, #4d90fe 50%, #0a58ca 100%);
  }

  .variant-label{
    max-width:1280px;margin:0 auto;
    padding:48px 40px 0;
    font-family:var(--bp-mono, monospace);
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--blue);
  }
  .variant-label span{color:var(--muted)}

  /* ============ SHARED SECTION SHELL ============ */
  .section{
    max-width:1280px;margin:0 auto;
    padding:64px 40px 96px;
    position:relative;
  }

  /* ============ VARIANT 1 — THE SPLIT ============ */
  .v1{
    position:relative;
    background:
      radial-gradient(900px 500px at 12% 8%, rgba(232,69,107,.06), transparent 60%),
      radial-gradient(900px 500px at 88% 92%, rgba(58,91,255,.07), transparent 60%);
    border-radius:32px;
    overflow:hidden;
  }
  .v1::before{
    /* faint grid texture */
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(10,10,15,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(10,10,15,.025) 1px,transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
            mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
    pointer-events:none;
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--bp-mono, monospace);
    font-size:12px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--muted);
    margin-bottom:20px;
  }
  .eyebrow .bar{width:32px;height:2px;background:var(--ink)}

  .headline{
    font-family:'Clash Display','Inter',system-ui,sans-serif;
    font-weight:500;
    font-size:clamp(40px,6.2vw,74px);
    line-height:.96;
    letter-spacing:-.03em;
    margin-bottom:14px;
  }
  .headline .dim{color:#b9b9c8}
  .sub{
    color:var(--muted);font-size:17px;max-width:520px;margin-bottom:56px;
  }

  .split{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:0;
    align-items:stretch;
    position:relative;
    z-index:1;
  }
  .col1{
    padding:14px 8px;
  }
  .col1-head{
    display:flex;align-items:center;gap:14px;
    margin-bottom:32px;
  }
  .col1-head .dot{
    width:40px;height:40px;border-radius:12px;
    display:grid;place-items:center;flex:none;
    font-weight:700;
  }
  .col1-head .meta{display:flex;flex-direction:column}
  .col1-head .tag{
    font-family:var(--bp-mono, monospace);
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  }
  .col1-head .name{
    font-weight:400;font-size:18px;letter-spacing:-.01em;
  }

  .before1 .dot{background:var(--red-soft);color:var(--red-deep)}
  .before1 .tag{color:var(--red-deep)}
  .after1  .dot{background:var(--green-soft);color:var(--green)}
  .after1  .tag{color:var(--green)}

  .row1{
    display:flex;align-items:flex-start;gap:14px;
    padding:17px 16px;
    border-radius:14px;
    transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s;
    position:relative;
  }
  .row1 + .row1{
    border-top:1px solid var(--line);
  }
  .ico{
    flex:none;width:22px;height:22px;border-radius:50%;
    display:grid;place-items:center;margin-top:1px;
  }
  .ico svg{width:13px;height:13px}
  .before1 .ico{background:rgba(232,69,107,.12);color:var(--red-deep)}
  .after1  .ico{background:rgba(22,163,104,.13);color:var(--green)}
  .rtxt{font-size:15.5px;color:#2c2c38}
  .rtxt b{font-weight:600;color:var(--ink)}

  .before1 .row1:hover{background:rgba(232,69,107,.05);transform:translateX(-4px)}
  .after1  .row1:hover{background:rgba(22,163,104,.06);transform:translateX(4px)}

  /* the metric chip that sits on the "after" row1s */
  .chip{
    margin-left:auto;flex:none;
    font-family:var(--bp-mono, monospace);
    font-size:11px;font-weight:400;
    padding:3px 9px;border-radius:999px;
    background:var(--ink);color:#fff;white-space:nowrap;
    align-self:center;
  }

  /* center divider with the morph arrow1 */
  .divider{
    position:relative;width:84px;
    display:flex;align-items:center;justify-content:center;
  }
  .divider .line{
    position:absolute;top:64px;bottom:24px;left:50%;width:1px;
    background:linear-gradient(var(--red),#cdb,var(--green));
    opacity:.35;
  }
  .morph{
    width:64px;height:64px;border-radius:50%;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 14px 40px -12px rgba(58,91,255,.4),0 2px 8px rgba(10,10,15,.05);
    display:grid;place-items:center;
    position:relative;z-index:2;
    background:var(--brand-grad);
  }
  .morph svg{width:26px;height:26px;color:#fff}
  .morph::after{
    content:"";position:absolute;inset:-7px;border-radius:50%;
    border:1px dashed rgba(123,75,255,.5);
    animation:spin 16s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}