:root{
  --c1: #171717;
  --c2: #bfbfbf;
  --mx: 65%;
  --my: 30%;
}



*{ box-sizing:border-box; }
html,body{
  height:100%; margin:0; overflow:hidden;
  background: var(--c1);
}

h4{
  color: #ffffff;
  mix-blend-mode: difference;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
  display:grid; place-items:center;
  cursor:none; /* hide pointer */
}
.stage{ position:relative; width:100%; height:100vh; isolation:isolate; }

/* Background (as before) */
.bg{
  position:absolute; inset:0;
  background:
    radial-gradient(80vmax 70vmax at 105% -10%, #ffffff1a 0%, #ffffff08 30%, #0000 60%) ,
    radial-gradient(85vmax 75vmax at 50% 105%, #ffffff18 0%, #ffffff06 35%, #0000 65%) ,
    radial-gradient(90vmax 90vmax at -10% 50%, #bfbfbf22 0%, #bfbfbf07 35%, #0000 70%) ,
    linear-gradient(0deg, var(--c1), var(--c1));
  z-index:-3;
}
.liquid{
  position:absolute; inset:0;
  --size: 85vmin;
  background:
    radial-gradient(var(--size) var(--size) at var(--mx) var(--my),
      #ffffffee 0%, #d9d9d9cc 18%, #bfbfbf99 30%, #8f8f8f55 45%, #4a4a4a22 62%, #0000 78%),
    radial-gradient(calc(var(--size) * 1.4) calc(var(--size) * 1.4) at var(--mx) var(--my),
      #bfbfbf22 0%, #0000 60%);
  mix-blend-mode: soft-light;
  z-index:-2;
}
.vignette{
  position:absolute; inset:-6%;
  background: radial-gradient(140vmax 110vmax at 50% 55%, #ffffff05 0%, #ffffff03 40%, #000b 110%);
  mix-blend-mode:multiply;
  z-index:-1;
}

/* ===== Fluid Glass Switch (fixed stacking + pointer events) ===== */
.glass-switch{ position:absolute; top:min(5vh,40px); left:50%; transform:translateX(-50%); }
.goo-defs{ position:absolute; }
.gs-inner{
  --h:40px; --pad:.4rem; --gap:.68rem;
  position:relative;                    /* Anchor for blob */
  display:flex; gap:var(--gap); padding:var(--pad);
  background:linear-gradient(#ffffff26,#ffffff10);
  border-radius:999px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 28px #0008 inset, 0 2px 20px #0008;
  filter:url(#goo);
}
.gs-radio{ display:none; }

.gs-seg{
  position:relative; z-index:1;         /* Text above blob */
  display:grid; place-items:center;
  min-width:120px; height:var(--h);
  padding:0 1rem;
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  color:#d5d6d9; cursor:pointer; user-select:none;
  border-radius:999px;
  background:linear-gradient(#ffffff20,#00000050);
  box-shadow:inset 0 1px 1px #ffffff30, inset 0 0 0 1px #ffffff18, 0 1px 3px #000a;
  transition:transform .12s ease, color .15s ease;
}
.gs-seg:hover{ transform:translateY(-1px); color:#fff; }

.blob{
  position:absolute; top:50%; left:0; transform:translateY(-50%);
  width:120px; height:var(--h);
  border-radius:999px;
  background:radial-gradient(70% 140% at 50% -10%, #fff, #ddd);
  box-shadow:0 12px 26px #0006, inset 0 0 0 1px #fff, 0 0 36px #fff3;
  transition:left .28s cubic-bezier(.2,.7,.2,1), width .28s cubic-bezier(.2,.7,.2,1);
  will-change:left,width;
  z-index:0;                           /* Behind labels */
  pointer-events:none;                 /* Never block clicks */
}

.gs-seg[aria-current="page"]{ color:#111; }
.gs-seg[aria-current="page"]::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px #0003;
}

/* Content */
.content{ position:absolute; inset:0; display:grid; place-items:center; }
.stack{ display:grid; gap:8vh; place-items:center; text-align:center; }
.logo{
  width:min(68vw,820px); max-width:90%;
  mix-blend-mode:difference;
  filter:drop-shadow(0 6px 30px #0009);
}
.cta{
  display:grid; place-items:center; height:44px; padding:0 1.2rem;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#d5d6d9;
  border-radius:999px; background:linear-gradient(#fff1,#0006);
  box-shadow:inset 0 1px 1px #fff2, inset 0 0 0 1px #fff1, 0 10px 28px #0009;
}
.cta:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 16px 38px #000c, 0 0 40px #fff2; }

@media (max-width:640px){
  .gs-seg{ min-width:96px; }
  .blob{ width:96px; }
}