<style>
  :root{
    --bg-1:#050816;
    --bg-2:#0d1228;
    --glass:rgba(255,255,255,0.08);
    --glass-border:rgba(255,255,255,0.16);
    --text:#f7f7fb;
    --muted:rgba(255,255,255,0.78);
    --therapy-1:#22c55e;
    --therapy-2:#4ade80;
    --show-1:#1d4ed8;
    --show-2:#38bdf8;
    --shadow:0 30px 80px rgba(0,0,0,0.45);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    min-height:100vh;
    font-family:'Inter',sans-serif;
    color:var(--text);
    background:
      radial-gradient(circle at 20% 20%, rgba(34,197,94,0.18), transparent 28%),
      radial-gradient(circle at 80% 30%, rgba(56,189,248,0.18), transparent 28%),
      radial-gradient(circle at 50% 75%, rgba(255,255,255,0.06), transparent 30%),
      linear-gradient(160deg, var(--bg-1), var(--bg-2));
    overflow-x:hidden;
  }

  .stars,
  .stars::before,
  .stars::after{
    position:fixed;
    inset:0;
    content:"";
    pointer-events:none;
    background-repeat:repeat;
    animation: drift 70s linear infinite;
    opacity:.65;
  }

  .stars{
    background-image:
      radial-gradient(2px 2px at 15% 20%, rgba(255,255,255,.75) 40%, transparent 45%),
      radial-gradient(1.5px 1.5px at 70% 35%, rgba(255,255,255,.65) 40%, transparent 45%),
      radial-gradient(2px 2px at 45% 80%, rgba(255,255,255,.5) 40%, transparent 45%),
      radial-gradient(1.8px 1.8px at 85% 70%, rgba(255,255,255,.7) 40%, transparent 45%),
      radial-gradient(1.2px 1.2px at 25% 60%, rgba(255,255,255,.55) 40%, transparent 45%);
    background-size:420px 420px;
  }

  .stars::before{
    background-image:
      radial-gradient(1.5px 1.5px at 30% 25%, rgba(74,222,128,.55) 40%, transparent 45%),
      radial-gradient(2px 2px at 60% 50%, rgba(56,189,248,.7) 40%, transparent 45%),
      radial-gradient(1.5px 1.5px at 80% 15%, rgba(255,255,255,.6) 40%, transparent 45%);
    background-size:520px 520px;
    animation-duration:100s;
    opacity:.45;
  }

  .stars::after{
    background-image:
      radial-gradient(160px 160px at 50% 50%, rgba(255,255,255,.06), transparent 65%);
    background-size:100% 100%;
    animation:pulse 6s ease-in-out infinite;
    opacity:.35;
  }

  @keyframes drift{
    from{transform:translateY(0)}
    to{transform:translateY(-120px)}
  }

  @keyframes pulse{
    0%,100%{transform:scale(1); opacity:.28}
    50%{transform:scale(1.06); opacity:.42}
  }

  .page{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 18px;
    isolation:isolate;
  }

  .orb{
    position:absolute;
    border-radius:999px;
    filter:blur(18px);
    opacity:.75;
    z-index:0;
    animation:float 8s ease-in-out infinite;
  }

  .orb.left{
    width:230px;
    height:230px;
    left:8%;
    top:18%;
    background:radial-gradient(circle, rgba(74,222,128,.55), rgba(34,197,94,.08) 70%, transparent 72%);
  }

  .orb.right{
    width:270px;
    height:270px;
    right:8%;
    bottom:10%;
    background:radial-gradient(circle, rgba(56,189,248,.7), rgba(29,78,216,.1) 70%, transparent 72%);
    animation-delay:-3s;
  }

  @keyframes float{
    0%,100%{transform:translateY(0) translateX(0)}
    50%{transform:translateY(-18px) translateX(8px)}
  }

  .wrap{
    position:relative;
    z-index:2;
    width:min(1200px, 100%);
  }

  .intro{
    text-align:center;
    margin-bottom:34px;
    opacity:0;
    transform:translateY(18px);
    animation:reveal .9s ease forwards;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:999px;
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(8px);
    color:var(--muted);
    font-size:.95rem;
    letter-spacing:.04em;
  }

  .eyebrow::before{
    content:"✦";
    color:#fff;
    opacity:.9;
  }

  h1{
    margin:18px 0 14px;
    font-family:'Inter',sans-serif;
    font-size:clamp(2.2rem, 5.2vw, 4.4rem);
    line-height:1.08;
    letter-spacing:.01em;
    font-weight:700;
    text-shadow:0 8px 30px rgba(0,0,0,.35);
  }

  .intro p{
    max-width:760px;
    margin:0 auto;
    color:var(--muted);
    font-size:clamp(1rem, 2vw, 1.15rem);
    line-height:1.7;
  }

  .spark{
    display:inline-block;
    animation:sparkle 2.4s ease-in-out infinite;
  }

  @keyframes sparkle{
    0%,100%{transform:scale(1); opacity:1}
    50%{transform:scale(1.18); opacity:.82}
  }

  .choice{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:26px;
    opacity:0;
    transform:translateY(20px);
    animation:reveal .9s ease .18s forwards;
  }

  @keyframes reveal{
    to{opacity:1; transform:none}
  }

  .card{
    position:relative;
    display:flex;
    min-height:430px;
    overflow:hidden;
    border-radius:28px;
    text-decoration:none;
    color:#fff;
    background:var(--glass);
    border:1px solid var(--glass-border);
    box-shadow:var(--shadow);
    backdrop-filter:blur(14px);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    isolation:isolate;
  }

  .card:hover{
    transform:translateY(-8px) scale(1.01);
    box-shadow:0 36px 90px rgba(0,0,0,.52);
  }

  .card::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.95;
    z-index:0;
  }

  .card::after{
    content:"";
    position:absolute;
    inset:-20%;
    background:radial-gradient(circle at center, rgba(255,255,255,.18), transparent 35%);
    opacity:0;
    transform:scale(.8);
    transition:opacity .45s ease, transform .45s ease;
    z-index:1;
    pointer-events:none;
  }

  .card:hover::after{
    opacity:.75;
    transform:scale(1);
  }

  .therapy::before{
    background:
      linear-gradient(180deg, rgba(6,10,30,.2), rgba(6,10,30,.55)),
      radial-gradient(circle at 20% 20%, rgba(74,222,128,.35), transparent 34%),
      linear-gradient(135deg, rgba(34,197,94,.95), rgba(21,128,61,.85));
  }

  .show::before{
    background:
      linear-gradient(180deg, rgba(6,10,30,.18), rgba(6,10,30,.58)),
      radial-gradient(circle at 80% 18%, rgba(56,189,248,.3), transparent 34%),
      linear-gradient(135deg, rgba(29,78,216,.98), rgba(8,47,73,.92));
  }

  .card-inner{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:100%;
    padding:34px 30px 30px;
  }

  .label{
    display:inline-flex;
    width:max-content;
    padding:9px 14px;
    border-radius:999px;
    font-size:.88rem;
    font-weight:600;
    letter-spacing:.03em;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(10px);
  }

  .card h2{
    margin:16px 0 14px;
    font-size:clamp(1.7rem, 3vw, 2.7rem);
    line-height:1.1;
  }

  .card p{
    margin:0;
    max-width:520px;
    color:rgba(255,255,255,.88);
    font-size:1.02rem;
    line-height:1.75;
  }

  .features{
    margin:22px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:10px;
  }

  .features li{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,.92);
    font-size:.98rem;
  }

  .features li::before{
    content:"✦";
    font-size:.95rem;
    opacity:.95;
  }

  .cta{
    margin-top:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
  }

  .cta-text{
    font-size:.95rem;
    color:rgba(255,255,255,.74);
  }

  .cta-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 20px;
    border-radius:14px;
    font-weight:700;
    letter-spacing:.01em;
    color:#08111f;
    background:#fff;
    box-shadow:0 16px 30px rgba(0,0,0,.22);
    transition:transform .25s ease, box-shadow .25s ease;
  }

  .card:hover .cta-btn{
    transform:translateX(4px);
    box-shadow:0 22px 36px rgba(0,0,0,.28);
  }

  .therapy .wave,
  .show .wave{
    position:absolute;
    inset:auto -10% -14% auto;
    width:62%;
    height:48%;
    z-index:1;
    pointer-events:none;
    opacity:.55;
  }

  .therapy .wave{
    background:
      radial-gradient(circle at 30% 50%, rgba(74,222,128,.25), transparent 42%),
      radial-gradient(circle at 68% 48%, rgba(134,239,172,.2), transparent 40%);
    filter:blur(6px);
  }

  .show .wave{
    background:
      conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.14), transparent 18%, rgba(255,255,255,.10) 30%, transparent 46%, rgba(255,255,255,.12) 56%, transparent 72%);
    filter:blur(8px);
  }

  .bottom-note{
    text-align:center;
    margin-top:22px;
    color:rgba(255,255,255,.60);
    font-size:.95rem;
    opacity:0;
    transform:translateY(16px);
    animation:reveal .9s ease .32s forwards;
  }

  @media (max-width: 920px){
    .choice{grid-template-columns:1fr}
    .card{min-height:unset}
    .page{padding:24px 14px}
    .card-inner{padding:28px 22px 22px}
  }

@media (max-width: 640px){
  h1{
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .intro p{
    font-size: 1rem;
  }

  .eyebrow{
    font-size: 0.85rem;
  }
}