/* Hero visual · the phone. Sized in em so it scales with the screen height (10px = full size). Classes are prefixed hp- to avoid clashes. */
.hp-stage { position:relative; justify-self:center; display:grid; place-items:center; --ph:min(590px, 70vh); font-size:calc(var(--ph) / 59); }
.hp-phone { position:relative; width:29em; height:59em; border-radius:4.6em; padding:1.2em;
  background:linear-gradient(160deg, #2A3242, #0E131C); box-shadow:0 6em 12em -4em rgba(0,0,0,.9), inset 0 0 0 .15em rgba(255,255,255,.12);
  transform:rotate(-5deg); animation:hpFloat 7s ease-in-out infinite; }
@keyframes hpFloat { 50% { transform:rotate(-5deg) translateY(-1.1em); } }
.hp-screen { position:relative; height:100%; border-radius:3.6em; overflow:hidden; background:#0A0D12; }
.hp-wall { position:absolute; inset:0; background-size:cover; background-position:62% 45%; transition:background-image .6s; }
.hp-screen::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,13,18,.25) 0%, rgba(10,13,18,.05) 40%, rgba(10,13,18,.55) 100%); }
.hp-notch { position:absolute; z-index:3; top:1em; left:50%; width:9.6em; height:2.8em; margin-left:-4.8em; border-radius:2em; background:#05070B; }
.hp-lock { position:absolute; z-index:2; top:6.6em; left:0; right:0; text-align:center; color:#fff; text-shadow:0 .2em 1.6em rgba(0,0,0,.35); }
.hp-time { font:200 6.6em/1 var(--sans); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.hp-date { margin-top:.5em; font:500 1.3em/1 var(--sans); opacity:.85; }
.hp-live { position:absolute; z-index:2; top:15.6em; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:.8em;
  font:500 1.05em/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#fff; opacity:.85; }
.hp-live i { width:.75em; height:.75em; border-radius:50%; background:var(--accent); box-shadow:0 0 1.2em var(--accent); animation:hpPulse 1.6s ease-in-out infinite; }
@keyframes hpPulse { 50% { opacity:.35; transform:scale(.75); } }

.hp-notes { position:absolute; z-index:2; left:1.2em; right:1.2em; bottom:10em; height:15em; }
.hp-notes::before { content:''; position:absolute; left:1.2em; right:1.2em; bottom:-1em; height:5em; border-radius:2em; background:rgba(246,248,251,.35); }
.hp-card { position:absolute; left:0; right:0; bottom:0; padding:1.5em 1.6em 1.6em; border-radius:2.2em; color:#0E151E;
  background:rgba(246,248,251,.95); box-shadow:0 2em 4em -1.2em rgba(0,0,0,.55); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.hp-card.enter { animation:hpIn .65s cubic-bezier(.2,.85,.25,1) both; }
.hp-card.leave { animation:hpOut .5s cubic-bezier(.4,0,.6,1) both; }
@keyframes hpIn { from { opacity:0; transform:translateY(-2.4em) scale(.95); } }
@keyframes hpOut { to { opacity:0; transform:translateY(-1.4em) scale(.92); } }
.hp-app { display:flex; align-items:center; gap:.8em; font:600 1.1em/1 var(--sans); letter-spacing:.04em; color:#5B6472; }
.hp-app img { width:1.7em; height:1.7em; border-radius:.45em; background:#0E151E; padding:.2em; }
.hp-app span { margin-left:auto; font-weight:400; letter-spacing:0; }
.hp-card h4 { margin:.9em 0 .35em; font:600 1.5em/1.25 var(--sans); }
.hp-card p { margin:0; font:400 1.3em/1.4 var(--sans); color:#2B3442; }
.hp-acts { display:flex; gap:.8em; margin-top:1.2em; }
.hp-acts span { position:relative; flex:1; text-align:center; padding:1em; border-radius:1.2em; font:600 1.3em/1 var(--sans); background:#E7ECF3; color:#2B3442; }
.hp-acts .yes { background:var(--accent); color:#17110A; transition:background .5s; }
.hp-acts .yes::after { content:''; position:absolute; right:1.4em; top:50%; width:2.6em; height:2.6em; margin-top:-1.3em; border-radius:50%;
  background:rgba(255,255,255,.35); border:.15em solid rgba(255,255,255,.95); opacity:0; }
.hp-card.final .yes::after { animation:hpTap 2.4s ease-out 1s infinite; }
@keyframes hpTap { 0% { opacity:0; transform:scale(1.6); } 15% { opacity:1; transform:scale(1); } 35% { opacity:0; transform:scale(1.9); } 100% { opacity:0; } }

.hp-side { position:absolute; z-index:3; right:calc(100% + .4em); top:22%; width:16em; padding:1.3em 1.6em; border-radius:1.6em; font:500 1.35em/1.35 var(--sans); color:var(--fg);
  background:linear-gradient(160deg, rgba(14,18,26,.78), rgba(14,18,26,.5)); border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 2em 5em -2em rgba(0,0,0,.8); }
.hp-side b { color:var(--accent); font-weight:600; }

@media (max-width:820px) {
  .hp-stage { --ph:min(560px, 68vh); grid-row:2; margin-top:1.4em; }
  .hp-phone { transform:rotate(-3deg); animation:none; }
  .hp-side { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .hp-phone, html:not(.force-motion) .hp-live i, html:not(.force-motion) .hp-card.final .yes::after,
  html:not(.force-motion) .hp-card.enter, html:not(.force-motion) .hp-card.leave { animation:none; }
}

/* shorter laptop screens: keep the button and the line under it in view */
@media (max-height:800px) and (min-width:821px) {
  #night .wrap { padding-top:84px; padding-bottom:28px; }
  #night h1 { font-size:clamp(32px,3.5vw,50px); margin-bottom:18px; }
  #night .kicker.greet { margin-bottom:12px; }
  #night .sub { font-size:16.5px; margin-bottom:22px; }
  #night .sub .trust { margin-top:8px; }
}