*{box-sizing:border-box}
:root{
  --bg:#05070a;
  --text:#f5f7fb;
  --muted:#b7c0cf;
  --panel:rgba(7,10,15,.64);
  --panel-mobile:rgba(7,10,15,.72);
  --dock-mobile:rgba(7,10,15,.86);
  --border:rgba(255,255,255,.18);
  --red:#d91f2d;
  --red-hover:#f03745;
  --steel-hover:#4a5870;
}
html,body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body{min-height:100vh}
.hero{
  min-height:100vh;
  position:relative;
  display:grid;
  align-items:center;
  justify-items:start;
  padding:clamp(1.5rem,4vw,5rem);
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,.20) 72%),
    url("./assets/fatpollo-login.png") center center/cover no-repeat;
}
.scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 55%,rgba(217,31,45,.18),transparent 28rem),
    linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45));
}
.panel{
  position:relative;
  width:min(100%,39rem);
  padding:clamp(1.25rem,3vw,2rem);
  border:1px solid var(--border);
  border-radius:1.25rem;
  background:var(--panel);
  backdrop-filter:blur(10px);
  box-shadow:0 2rem 5rem rgba(0,0,0,.45);
}
.eyebrow{
  margin:0 0 .75rem;
  color:var(--red);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
h1{
  margin:0;
  font-size:clamp(2.05rem,6vw,4.1rem);
  line-height:.94;
  letter-spacing:-.06em;
}
.subtitle{
  max-width:34rem;
  margin:1rem 0 1.5rem;
  color:var(--muted);
  font-size:clamp(1rem,2vw,1.15rem);
  line-height:1.55;
}
.action-dock{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:-7rem;
  margin-left:clamp(1.25rem,3vw,2rem);
  z-index:2;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  padding:.85rem 1.2rem;
  border-radius:999px;
  text-decoration:none;
  color:white;
  font-weight:800;
  letter-spacing:.02em;
  transition:transform 160ms ease,background 160ms ease,border-color 160ms ease;
  text-align:center;
}
.button:hover{transform:translateY(-1px)}
.primary{background:var(--red)}
.primary:hover{background:var(--red-hover)}
.secondary{background:rgba(255,255,255,.08);border:1px solid var(--border)}
.secondary:hover{background:var(--steel-hover)}
.fineprint{
  margin:1rem 0 0;
  color:rgba(245,247,251,.64);
  font-size:.88rem;
}
.mobile-fineprint{display:none}

/* Mobile / portrait foldable:
   Lee gets the right side of the viewport.
   Text occupies a narrow translucent left command-card.
   Buttons are detached and docked at the bottom. */
@media (max-width:700px){
  html,body{min-height:100svh}
  body{overflow:hidden;background:#05070a}
  .hero{
    min-height:100svh;
    display:block;
    padding:0;
    overflow:hidden;
    background:
      linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 42%,rgba(0,0,0,.04) 72%),
      linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.10) 44%,rgba(0,0,0,.84) 100%),
      url("./assets/fatpollo-login.png") 63% center/auto 100svh no-repeat,
      #05070a;
  }
  .scrim{
    display:block;
    background:
      radial-gradient(circle at 72% 35%,rgba(255,255,255,.07),transparent 12rem),
      linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.16) 52%,rgba(0,0,0,.88) 100%);
  }
  .panel{
    position:absolute;
    z-index:2;
    top:max(.85rem,env(safe-area-inset-top));
    left:.75rem;
    width:min(63vw,23rem);
    padding:.82rem;
    border-radius:.9rem;
    background:var(--panel-mobile);
    backdrop-filter:blur(5px);
    box-shadow:0 1rem 2.5rem rgba(0,0,0,.55);
  }
  .eyebrow{
    font-size:clamp(.52rem,2.25vw,.68rem);
    letter-spacing:.055em;
    line-height:1.3;
    margin-bottom:.45rem;
  }
  h1{
    font-size:clamp(1.55rem,7.2vw,2.35rem);
    line-height:.98;
    letter-spacing:-.055em;
  }
  .subtitle{
    margin:.65rem 0 0;
    font-size:clamp(.78rem,3.25vw,.95rem);
    line-height:1.38;
  }
  .desktop-fineprint{display:none}
  .action-dock{
    position:absolute;
    z-index:3;
    left:.75rem;
    right:.75rem;
    bottom:max(.75rem,env(safe-area-inset-bottom));
    margin:0;
    display:grid;
    grid-template-columns:1fr;
    gap:.62rem;
    padding:.75rem;
    border:1px solid var(--border);
    border-radius:1rem;
    background:var(--dock-mobile);
    box-shadow:0 1rem 3rem rgba(0,0,0,.62);
  }
  .button{
    width:100%;
    min-height:3.1rem;
    padding:.82rem .9rem;
    font-size:1rem;
  }
  .mobile-fineprint{
    display:block;
    margin:.15rem .15rem 0;
    font-size:.74rem;
    line-height:1.32;
    text-align:center;
  }
}

/* Very narrow phones: keep Lee right, but make the text card a little wider. */
@media (max-width:390px){
  .hero{
    background:
      linear-gradient(90deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.30) 48%,rgba(0,0,0,.06) 76%),
      linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.12) 44%,rgba(0,0,0,.86) 100%),
      url("./assets/fatpollo-login.png") 64% center/auto 100svh no-repeat,
      #05070a;
  }
  .panel{width:68vw;padding:.72rem}
  h1{font-size:1.6rem}
}

/* Fold/large mobile portrait */
@media (min-width:701px) and (max-width:1100px) and (orientation:portrait){
  .hero{
    background:
      linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.34) 43%,rgba(0,0,0,.10) 78%),
      url("./assets/fatpollo-login.png") 64% center/auto 100vh no-repeat,
      #05070a;
  }
  .panel{
    width:min(47vw,34rem);
    margin-left:1rem;
  }
  .action-dock{
    position:absolute;
    left:calc(1rem + clamp(1.5rem,4vw,5rem));
    bottom:clamp(1.5rem,4vw,5rem);
    width:min(47vw,34rem);
    margin:0;
  }
}

/* Short landscape-ish mobile viewport */
@media (max-width:950px) and (max-height:650px){
  body{overflow:auto}
  .hero{
    display:grid;
    align-items:center;
    justify-items:start;
    padding:1rem;
    background:
      linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.35) 48%,rgba(0,0,0,.12) 100%),
      url("./assets/fatpollo-login.png") center center/cover no-repeat;
  }
  .panel{
    position:relative;
    inset:auto;
    width:min(100%,31rem);
    padding:.9rem;
  }
  .action-dock{
    position:relative;
    left:auto;right:auto;bottom:auto;
    width:min(100%,31rem);
    margin:.75rem 0 0;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
  }
  h1{font-size:clamp(1.75rem,6vw,2.8rem)}
  .subtitle{font-size:.9rem;margin:.7rem 0 0}
}