/* ImmoHub — premium access portal (VOID-inspired, monochrome glass) */

:root{
  color-scheme:dark;
  --black:#050505;
  --white:#f5f5f2;
  --soft:#c7c7c2;
  --muted:#76776f;
  --line:rgba(245,245,242,.12);
  --line2:rgba(245,245,242,.28);
  --mono:'Geist Mono','SFMono-Regular',Consolas,monospace;
  --sans:'Space Grotesk',Inter,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{background:#000}
body{
  background:#000;
  color:var(--white);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}

/* ===== Background layers (behind everything, non-interactive) ===== */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 52% 44% at 50% -8%, rgba(245,245,242,.05) 0%, transparent 60%),
    radial-gradient(ellipse 38% 38% at 50% 115%, rgba(245,245,242,.028) 0%, transparent 60%),
    #050505;
  animation:bgBreathe 12s ease-in-out infinite;
}
.bg-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(245,245,242,.05) 1px, transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 42%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 42%, #000 0%, transparent 75%);
  opacity:.5;
}
.bg-grain{
  position:absolute;inset:0;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}
.bg-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(0,0,0,.45) 68%, #000 100%),
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 28%, transparent 62%, rgba(0,0,0,.65) 100%);
}
@keyframes bgBreathe{0%,100%{opacity:1}50%{opacity:.9}}

/* ===== Page shell ===== */
.page{
  position:relative;z-index:3;min-height:100vh;min-height:100dvh;
  padding:28px clamp(22px,5vw,80px);
  display:flex;flex-direction:column;
}
main{flex:1;display:grid;place-items:center;padding:clamp(32px,7vh,80px) 0}
.portal{width:min(100%,560px);text-align:center}

/* ===== Logo ===== */
.logo-wrap{position:relative;display:inline-flex;margin:0 auto 22px;isolation:isolate}
.logo-wrap::before{
  content:'';position:absolute;inset:-24% -24%;z-index:-1;
  background:radial-gradient(circle at 50% 45%, rgba(245,245,242,.12) 0%, rgba(245,245,242,.035) 40%, transparent 70%);
  filter:blur(14px);
  animation:logoGlow 6s ease-in-out infinite;
}
.logo{
  width:clamp(104px,20vw,140px);height:auto;display:block;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.8)) drop-shadow(0 0 16px rgba(245,245,242,.055));
  animation:logoFloat 7s ease-in-out infinite;
}
@keyframes logoGlow{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ===== Wordmark ===== */
.wordmark{
  margin:0 0 14px;
  font-size:clamp(30px,7vw,46px);
  font-weight:600;
  letter-spacing:.14em;
  line-height:1;
  padding-left:.14em; /* optical balance for tracking */
  background:linear-gradient(100deg,#ffffff 42%,#bdbdb8 50%,#ffffff 58%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:shine 6s linear infinite;
  text-shadow:0 0 36px rgba(245,245,242,.035);
}
@keyframes shine{0%{background-position:150% 50%}100%{background-position:-50% 50%}}

.tagline{
  color:var(--muted);
  font-size:12.5px;line-height:1.8;letter-spacing:.015em;
  margin:0 auto 40px;max-width:340px;
}

/* ===== Access card ===== */
.access{display:grid;gap:10px;max-width:420px;margin:0 auto;text-align:left}
.card{
  position:relative;min-height:76px;padding:18px 22px;border-radius:18px;
  border:1px solid rgba(245,245,242,.2);
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.028) 48%,rgba(0,0,0,.38));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  display:flex;align-items:center;gap:16px;cursor:pointer;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,background .35s,box-shadow .35s;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 20px 46px rgba(0,0,0,.5);
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(110deg,rgba(255,255,255,.14),transparent 40%);
  opacity:.4;transition:opacity .35s;pointer-events:none;
}
.card:hover,.card:focus-visible{
  outline:0;transform:translateY(-6px);border-color:rgba(245,245,242,.4);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 30px 60px rgba(0,0,0,.65);
}
.card:hover::before,.card:focus-visible::before{opacity:1}
.card-icon{
  width:48px;height:48px;border-radius:13px;flex-shrink:0;
  border:1px solid rgba(245,245,242,.28);display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.card-icon svg{width:23px;height:23px;fill:currentColor;color:var(--white)}
.card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.card-title{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.card-note{color:var(--muted);font:9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.card-arrow{color:var(--soft);font-size:19px;flex-shrink:0;transition:transform .35s,color .35s}
.card:hover .card-arrow{transform:translate(3px,-3px);color:var(--white)}

/* secondary link (shown when a session already exists) */
.secondary{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  color:var(--muted);font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  transition:color .25s;
}
.secondary:hover{color:var(--soft)}

/* ===== Footer ===== */
.foot{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding-top:18px;
}
.stat{display:inline-flex;align-items:baseline;gap:6px}
.stat b{font-size:13px;font-weight:600;color:var(--soft);letter-spacing:.01em}
.stat span{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot-sep{width:1px;height:12px;background:var(--line)}

/* ===== Responsive ===== */
@media(max-width:600px){
  .page{padding:20px 16px}
  main{padding:44px 0 60px}
  .portal{width:100%}
  .tagline{font-size:11.5px;margin-bottom:32px}
  .access{max-width:100%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}