/* v123: A focused liquid-glass welcome screen with dedicated account routes. */
body.landing-mode{
  min-height:100dvh;
  overflow-x:hidden;
  background:#061632;
}

/* The landing stylesheet loads after the shared hidden rule. Keep a routed
   account screen from reserving any landing-page space above it. */
.liquid-home.hidden{display:none!important}
#authShell.hidden{display:none!important}

.liquid-home{
  position:relative;
  isolation:isolate;
  min-height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:clamp(16px,3vh,36px) clamp(18px,4vw,56px);
  color:#edf4ff;
  background:
    radial-gradient(circle at 88% 8%,rgba(113,82,255,.34),transparent 30%),
    radial-gradient(circle at 8% 92%,rgba(18,184,192,.22),transparent 30%),
    linear-gradient(135deg,#061632 0%,#0b1d42 48%,#111446 100%);
}

.liquid-home::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.24;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 82%);
}

.liquid-orb{
  position:absolute;
  z-index:-1;
  border-radius:999px;
  filter:blur(18px);
  pointer-events:none;
  will-change:transform,opacity;
}
.liquid-orb-one{width:30rem;height:30rem;right:-9rem;top:11%;background:rgba(91,78,255,.42);animation:apex-light-leak-one 15s ease-in-out infinite alternate}
.liquid-orb-two{width:25rem;height:25rem;left:-12rem;bottom:-7rem;background:rgba(0,201,192,.27);animation:apex-light-leak-two 18s ease-in-out infinite alternate}
.liquid-orb-three{width:15rem;height:15rem;left:46%;top:63%;background:rgba(62,139,255,.20);animation:apex-light-leak-three 12s ease-in-out infinite alternate}
@keyframes apex-light-leak-one{0%{transform:translate3d(0,0,0) scale(1);opacity:.7}100%{transform:translate3d(-80px,48px,0) scale(1.24);opacity:1}}
@keyframes apex-light-leak-two{0%{transform:translate3d(0,0,0) scale(1);opacity:.72}100%{transform:translate3d(94px,-54px,0) scale(1.2);opacity:1}}
@keyframes apex-light-leak-three{0%{transform:translate3d(0,0,0) scale(.86);opacity:.28}100%{transform:translate3d(-48px,-68px,0) scale(1.42);opacity:.72}}

.liquid-theme-toggle,.auth-home{
  border:1px solid rgba(207,225,255,.35);
  border-radius:12px;
  padding:9px 13px;
  color:inherit;
  background:rgba(255,255,255,.09);
  font:600 .84rem/1 Inter,Arial,sans-serif;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease;
}
.liquid-theme-toggle:hover,.auth-home:hover{transform:translateY(-1px);background:rgba(255,255,255,.18)}

.liquid-hero{
  width:min(790px,100%);
  margin:auto;
  padding:clamp(28px,4.8vh,52px) clamp(28px,6vw,78px);
  text-align:center;
  border:1px solid rgba(190,219,255,.30);
  border-radius:30px;
  background:linear-gradient(135deg,rgba(29,66,126,.56),rgba(21,32,91,.37));
  box-shadow:0 26px 80px rgba(0,7,33,.36),inset 0 1px rgba(255,255,255,.17);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
}
.liquid-hero-logo{
  width:min(370px,100%);
  height:auto;
  display:grid;
  place-items:center;
  margin:0 auto clamp(14px,2vh,20px);
  padding:14px 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.88);
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 30px rgba(0,10,36,.25);
  transition:transform .2s ease,box-shadow .2s ease;
}
.liquid-hero-logo:hover{transform:translateY(-2px)}
.liquid-hero-logo:active{transform:translateY(0)}
.liquid-hero-logo img{
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
  filter:none;
}
.liquid-kicker{margin:0 0 11px;color:#a9d6ff;font-size:.76rem;font-weight:800;letter-spacing:.15em}
.liquid-hero h1{max-width:590px;margin:0 auto;font-size:clamp(2rem,4vw,3.35rem);line-height:1.06;letter-spacing:-.045em;color:#fff}
.liquid-intro{max-width:545px;margin:16px auto 0;color:#c4d3eb;font-size:clamp(.96rem,1.8vw,1.1rem);line-height:1.5}
.liquid-actions{display:flex;justify-content:center;gap:13px;flex-wrap:wrap;margin-top:23px}
.liquid-button{
  min-width:154px;
  border-radius:14px;
  padding:14px 19px;
  font:700 .96rem/1 Inter,Arial,sans-serif;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.liquid-button span{margin-left:15px;font-size:1.15rem}
.liquid-button:hover{transform:translateY(-2px)}
.liquid-button-primary{border:1px solid rgba(255,255,255,.45);color:#fff;background:linear-gradient(135deg,#2768f5,#7049e8);box-shadow:0 12px 30px rgba(45,91,247,.35)}
.liquid-button-primary:hover{box-shadow:0 16px 36px rgba(45,91,247,.50)}
.liquid-button-secondary{border:1px solid rgba(207,225,255,.38);color:#f6f9ff;background:rgba(255,255,255,.10)}
.liquid-button-secondary:hover{background:rgba(255,255,255,.19)}
.liquid-footer{width:min(1120px,100%);margin:clamp(14px,2.2vh,24px) auto 0;text-align:center;color:rgba(207,224,249,.73);font-size:.78rem;letter-spacing:.055em}

.auth-home{margin-left:auto;color:#33445e;background:#f5f8ff;border-color:#dce6f4}
body.dark .auth-home{color:#e2ecff;background:rgba(255,255,255,.08);border-color:rgba(207,225,255,.35)}

body.dark.landing-mode .liquid-home{
  background:radial-gradient(circle at 88% 8%,rgba(113,82,255,.34),transparent 30%),radial-gradient(circle at 8% 92%,rgba(18,184,192,.22),transparent 30%),linear-gradient(135deg,#030d20,#06142c 48%,#0e1038);
}

@media (max-width:600px){
  .liquid-home{padding:16px}
  .liquid-hero{margin:auto 0;padding:40px 22px;border-radius:24px}
  .liquid-hero-logo{width:min(300px,100%);height:auto;margin-bottom:21px}
  .liquid-hero-logo img{width:100%;height:auto;max-width:100%}
  .liquid-actions{flex-direction:column}
  .liquid-button{width:100%}
  .auth-home{padding:8px 10px}
}

/* Compact desktop/laptop heights: keep the whole welcome view inside one
   normal 100% browser screen rather than relying on browser zoom. */
@media (max-height:900px) and (min-width:601px){
  .liquid-home{padding-top:16px;padding-bottom:16px}
  .liquid-hero{padding-top:26px;padding-bottom:28px}
  .liquid-hero-logo{width:min(320px,100%);margin-bottom:13px}
  .liquid-kicker{margin-bottom:8px;font-size:.71rem}
  .liquid-hero h1{font-size:clamp(1.85rem,3.5vw,2.85rem)}
  .liquid-intro{margin-top:12px;font-size:.98rem}
  .liquid-actions{margin-top:17px}
  .liquid-button{padding:12px 18px}
  .liquid-footer{margin-top:12px;font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){.liquid-orb{animation:none}.liquid-hero-logo:hover{transform:none}}