:root{
  --bg:#05060a;
  --accent:#0ef;
  --muted:#9aa2b2;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
body{
  background:
    radial-gradient(1200px 600px at 10% 10%, #071029 0%, rgba(7,16,41,0) 20%),
    radial-gradient(900px 400px at 90% 90%, #120717 0%, rgba(18,7,23,0) 20%),
    var(--bg);
  color:#e6eef8;display:flex;align-items:center;justify-content:center;
}

.card{
  width:min(980px,96vw);
  height:640px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 10px 40px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  position:relative; overflow:hidden; padding:28px; display:grid; grid-template-columns: 420px 1fr; gap:20px;
}

.left{display:flex;flex-direction:column;gap:14px; justify-content:center; padding:18px}
.logo-crest{display:flex; gap:12px; align-items:center}
.crest-round{width:72px;height:72px;border-radius:12px;background:linear-gradient(135deg,#041428,#0b2543);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-size:20px;box-shadow:0 6px 18px rgba(2,10,30,0.6)}
h2{margin:0;font-size:20px;letter-spacing:0.6px}
p.sub{margin:0;color:var(--muted);font-size:13px}

.form{margin-top:8px; display:flex;flex-direction:column; gap:12px}
.field{display:flex;flex-direction:column}
label{font-size:12px;color:var(--muted);margin-bottom:6px}
input[type="text"], input[type="password"]{
  background:var(--glass); border:1px solid rgba(255,255,255,0.03);
  padding:12px 14px;border-radius:10px;color:inherit;font-size:15px;outline:none;
  transition:box-shadow .15s, border-color .15s;
}
input:focus{box-shadow:0 6px 20px rgba(0,170,255,0.06); border-color: rgba(14,234,255,0.12)}

.btn{
  background:linear-gradient(90deg,var(--accent), #6ef); border:0;padding:12px 16px;border-radius:10px;color:#02101a;font-weight:700;cursor:pointer;font-size:15px;
  transition:transform .08s;
}
.btn:active{transform:translateY(1px)}
.muted-note{font-size:12px;color:var(--muted)}

.right{position:relative; border-left:1px solid rgba(255,255,255,0.02); padding:18px; display:flex;flex-direction:column; align-items:center; justify-content:center}
.screen{width:100%;height:100%;border-radius:12px;background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(255,255,255,0.02)); display:flex;align-items:center;justify-content:center; position:relative; overflow:hidden}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px; padding:20px; text-align:center}

.terminal{
  width:92%; max-width:780px; height:68%;
  background:#000; color:#0f0; border-radius:8px; padding:14px; box-shadow:0 12px 40px rgba(1,6,12,0.6);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size:13px; overflow:hidden; position:relative;
  border:1px solid rgba(255,255,255,0.02);
}
.term-line{white-space:nowrap; transform-origin:left; opacity:0}
.term-caret{display:inline-block;width:8px;height:14px;background:#0f0;margin-left:6px;vertical-align:middle;animation:blink 800ms step-start infinite}
@keyframes blink{50%{opacity:0}}

.glitch{
  position:absolute;inset:0;pointer-events:none; mix-blend-mode:screen;
  background-image: linear-gradient(90deg, rgba(255,0,0,0.02), rgba(0,255,255,0.02));
  animation:glitchMove 250ms linear infinite; opacity:0.9;
}
@keyframes glitchMove { 0%{transform:translateX(0)} 50%{transform:translateX(-2px)} 100%{transform:translateX(0)} }

.screen.shake{ animation:shake .6s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake { 10%,90%{transform:translate3d(-1px,0,0)} 20%,80%{transform:translate3d(2px,0,0)} 30%,50%,70%{transform:translate3d(-4px,0,0)} 40%,60%{transform:translate3d(4px,0,0)} }

.stage{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transform:translateY(8px);transition:opacity .6s ease, transform .6s}
.stage.visible{opacity:1;transform:none}

.logo-3d {
  width:240px;height:240px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(10,20,40,0.8), rgba(2,6,12,0.6)); border:1px solid rgba(255,255,255,0.03); position:relative;
  transform-style:preserve-3d; perspective:1200px; box-shadow: 0 18px 60px rgba(2,8,20,0.7);
}

.orbit {
  width:180px;height:180px;border-radius:50%; display:flex;align-items:center;justify-content:center; transform-style:preserve-3d;
  animation:float 6s ease-in-out infinite;
}
@keyframes float {0%{transform:translateY(0) rotateX(5deg)}50%{transform:translateY(-10px) rotateX(-4deg)}100%{transform:translateY(0) rotateX(5deg)}}

.crest-3d{
  width:130px;height:130px; border-radius:14px; position:relative; transform-style:preserve-3d;
  animation:roll 12s linear infinite; /* slow, subtle rotation */
}
@keyframes roll { 0%{ transform: rotateY(-12deg) rotateX(4deg) } 50%{ transform: rotateY(12deg) rotateX(-4deg) } 100%{ transform: rotateY(-12deg) rotateX(4deg) } }

.eyelid{
  position:absolute; left:0; right:0; top:0; bottom:0;
  background:linear-gradient(180deg,#02060b 0%, rgba(2,6,11,0.0) 60%, #02060b 100%);
  border-radius:14px;
  transform-origin:50% 50%;
  animation:blinkEye 6s linear infinite;
  opacity:0.88;
  mix-blend-mode:multiply;
}
@keyframes blinkEye {
  0%,92%{transform:scaleY(0)}
  96%{transform:scaleY(1)}
  100%{transform:scaleY(0)}
}

.visit-btn{
  margin-top:10px; padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06); background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color:var(--accent); font-weight:700; cursor:pointer; display:inline-block;
  opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease;
}
.visit-btn.visible{opacity:1; transform:none}

.small-muted{font-size:12px;color:var(--muted)}
footer{position:absolute;left:18px;bottom:18px;color:var(--muted);font-size:12px}

@media (max-width:880px){
  .card{grid-template-columns:1fr; height:92vh}
  .left{order:2}
  .right{order:1}
}