*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#050505;color:#f4f4f4;font-family:Arial,sans-serif}
main{max-width:620px;margin:auto;overflow:hidden;min-height:100vh}
header{
  position:absolute;
  top:max(18px,env(safe-area-inset-top));
  left:18px;right:18px;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:900 9px monospace;
  letter-spacing:.14em;
  gap:10px;
}
footer{padding:30px 18px calc(30px + env(safe-area-inset-bottom));font:700 8px monospace;letter-spacing:.12em}
@media(min-width:700px){body{background:#000}main{box-shadow:0 0 90px #000}}
main{background:#040404}

/* ===== Brand logo (top-left) ===== */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.brand-logo{
  height:clamp(28px,9vw,44px);
  width:auto;
  max-width:120px;
  display:block;
  object-fit:contain;
  flex-shrink:0;
}
.brand span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== Hero ===== */
.hero{
  height:72svh;
  min-height:560px;
  position:relative;
  background:radial-gradient(circle at 50% 30%,#250005,#050505 70%);
  overflow:hidden;
}
.copy{position:absolute;left:18px;bottom:28px;z-index:2}
.copy small{font:700 8px monospace;color:#777}
.copy h1{font:900 clamp(40px,17vw,66px)/.76 Impact;margin:8px 0 0;color:#d3101c;text-shadow:2px 2px 0 #111}

/* ===== Carousel ===== */
.carousel{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.carousel .slide{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  max-width:min(94%,520px);
  max-height:74%;
  width:auto;height:auto;
  object-fit:contain;
  opacity:0;
  transition:opacity .6s ease;
  filter:drop-shadow(0 28px 35px #000);
  pointer-events:none;
}
.carousel .slide.active{
  opacity:1;
  pointer-events:auto;
}

/* dots */
.carousel .dots{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:2;
}
.carousel .dot{
  width:9px;height:9px;
  border-radius:50%;
  background:#333;
  cursor:pointer;
  transition:background .3s,transform .3s;
  -webkit-tap-highlight-color:transparent;
}
.carousel .dot.active{background:#d3101c;transform:scale(1.25)}

/* nav arrows */
.carousel .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:38px;height:38px;
  border:1px solid #2b0d10;
  background:rgba(9,9,9,.65);
  color:#fff;
  font:900 22px/1 monospace;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s,border-color .25s;
  -webkit-tap-highlight-color:transparent;
}
.carousel .nav:hover{background:#92131b;border-color:#d3101c}
.carousel .nav.prev{left:10px}
.carousel .nav.next{right:10px}

/* ===== Auth section ===== */
.auth{padding:52px 20px 64px}
.auth h2{font:900 clamp(30px,12vw,44px)/.88 Impact;margin:0 0 10px}
.auth p{font-size:clamp(11px,3.4vw,12px);line-height:1.7;color:#777}
#pulse{
  width:clamp(160px,48vw,190px);
  height:clamp(160px,48vw,190px);
  border-radius:50%;
  margin:30px auto 22px;
  display:block;
  border:1px solid #5b1118;
  background:#090909;color:#fff;
  box-shadow:0 0 0 12px #080808,0 0 0 13px #2b0d10;
  cursor:pointer;
}
#pulse span,#pulse b{display:block}
#pulse span{font:900 clamp(18px,6vw,22px) Impact}
#pulse b{font:700 10px monospace;color:#888;margin-top:8px}
#pulse.flash{animation:pulse .35s}
.layers{display:grid;gap:7px}
.layers div{opacity:.16;border-left:2px solid #92131b;padding:12px;background:#0b0b0b;font:700 9px monospace}
.layers div.on{opacity:1;background:#16080a}
.done{display:none;margin-top:16px;background:#b4101b;padding:18px}
.done.show{display:block}
.done strong{display:block;font:900 26px Impact}
.done span{font-size:11px}
footer{color:#555}
@keyframes pulse{50%{box-shadow:0 0 0 12px #080808,0 0 60px #d3101c}}

/* ===== Responsive tweaks ===== */
@media(max-width:380px){
  .brand span{display:none}
  .brand-logo{height:34px}
  .carousel .nav{width:32px;height:32px;font-size:18px}
  .carousel .nav.prev{left:6px}
  .carousel .nav.next{right:6px}
  .carousel .slide{max-width:96%}
  .carousel .dots{bottom:10px;gap:6px}
}
@media(min-width:700px){
  .carousel .nav{width:44px;height:44px;font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  .carousel .slide{transition:none}
  #pulse.flash{animation:none}
}