@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;900&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root{
  --bg:#050608;
  --panel:#0a0c10;
  --line:#2a2e35;
  --soft:#858b95;
  --text:#e7e9ed;
  --red:#ff2a2a;
  --red2:#9e1010;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{
  font-family:"IBM Plex Mono",monospace;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 80% 15%,rgba(255,42,42,.08),transparent 28%),
    linear-gradient(120deg,#020304 0%,#07090d 55%,#030405 100%);
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.018) 50%,transparent 50.3%),
    linear-gradient(0deg,transparent 49.7%,rgba(255,255,255,.015) 50%,transparent 50.3%);
  background-size:74px 74px;
  mask-image:linear-gradient(to bottom,black,transparent 85%);
}

.noise{
  position:fixed;
  inset:0;
  opacity:.045;
  pointer-events:none;
  z-index:20;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%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)' opacity='.9'/%3E%3C/svg%3E");
}

.scanlines{
  position:fixed;
  inset:0;
  z-index:19;
  pointer-events:none;
  opacity:.13;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.08) 4px);
}

.topbar,.footer{
  height:62px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 26px;
  border-bottom:1px solid var(--line);
  letter-spacing:.14em;
  font-size:12px;
}

.topbar{position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 16px var(--red);
}
.ticker{
  padding:8px 14px;
  border:1px solid #3a3f47;
  background:#0b0d11;
  color:#fff;
}
.clock{justify-self:end;color:var(--soft)}

.console{
  min-height:calc(100vh - 124px);
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr);
  gap:0;
}

.visual-panel{
  position:relative;
  min-height:620px;
  border-right:1px solid var(--line);
  overflow:hidden;
  background:#020304;
}

.visual-panel:after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(3,4,6,.9),transparent 34%),
    linear-gradient(90deg,rgba(255,0,0,.08),transparent 25%);
  pointer-events:none;
}

.visual-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.25) contrast(1.12) brightness(.78);
  transform:scale(1.025);
}

.frame-corners{
  position:absolute;inset:18px;z-index:4;pointer-events:none;
  border:1px solid rgba(255,255,255,.08);
  clip-path:polygon(0 0,85px 0,85px 1px,1px 1px,1px 85px,0 85px,0 0,100% 0,100% 85px,99.9% 85px,99.9% 1px,calc(100% - 85px) 1px,calc(100% - 85px) 0,100% 0,100% 100%,calc(100% - 85px) 100%,calc(100% - 85px) 99.9%,99.9% 99.9%,99.9% calc(100% - 85px),100% calc(100% - 85px),100% 100%,0 100%,0 calc(100% - 85px),1px calc(100% - 85px),1px 99.9%,85px 99.9%,85px 100%,0 100%);
}

.hud-tag{
  position:absolute;top:34px;left:34px;z-index:5;
  color:#fff;font-size:11px;letter-spacing:.18em;
  padding:8px 10px;border-left:2px solid var(--red);
  background:rgba(2,3,4,.5);
  backdrop-filter:blur(6px);
}

.hud-readout{
  position:absolute;left:34px;bottom:30px;z-index:5;
  display:flex;flex-direction:column;gap:5px;
  font-size:11px;color:#c8cbd0;letter-spacing:.1em;
}
.hud-readout span:first-child{color:var(--red)}

.data-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6vw;
  position:relative;
}

.data-panel:before{
  content:"RINU/01";
  position:absolute;right:20px;top:18px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:64px;font-weight:900;
  letter-spacing:.02em;
  color:rgba(255,255,255,.025);
}

.eyebrow{
  color:var(--red);
  font-size:11px;
  letter-spacing:.22em;
  margin-bottom:24px;
}

h1{
  margin:0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(86px,11vw,168px);
  line-height:.72;
  letter-spacing:-.045em;
  text-transform:uppercase;
  font-weight:900;
  text-shadow:6px 0 0 rgba(255,42,42,.08);
}

.lead{
  max-width:500px;
  margin:30px 0 26px;
  color:#a7acb5;
  font-size:13px;
  line-height:1.8;
}

.terminal-box{
  border-left:2px solid #343942;
  padding:14px 16px;
  margin:8px 0 26px;
  font-size:11px;
  line-height:1.9;
  color:#7f8690;
  background:linear-gradient(90deg,rgba(255,255,255,.025),transparent);
}
.terminal-box b{color:#d8dbe0;font-weight:600}
.prompt{color:var(--red);margin-right:8px}

.links{display:grid;gap:8px}
.links a{
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  min-height:58px;
  text-decoration:none;
  color:#dfe2e6;
  border:1px solid #2b3037;
  background:#080a0d;
  transition:.18s ease;
  position:relative;
  overflow:hidden;
}
.links a:before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--red);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:.18s ease;
}
.links a span{
  color:#6d737d;
  text-align:center;
  font-size:10px;
}
.links a strong{font-family:"Barlow Condensed",sans-serif;letter-spacing:.13em}
.links a i{font-style:normal;margin-right:18px;color:#7d848d}
.links a:hover{
  border-color:#6e1d1d;
  background:linear-gradient(90deg,rgba(255,42,42,.09),#090b0e 38%);
  transform:translateX(4px);
}
.links a:hover:before{transform:scaleY(1)}
.links a:hover i{color:var(--red)}

.footer{
  border-top:1px solid var(--line);
  border-bottom:0;
  color:#6f757e;
}
.footer span:last-child{justify-self:end}
.pulse{color:var(--red);animation:pulse 1.6s ease-in-out infinite}

@keyframes pulse{
  0%,100%{opacity:.45}
  50%{opacity:1;text-shadow:0 0 10px var(--red)}
}

@media (max-width:900px){
  .topbar{grid-template-columns:1fr auto}
  .clock{display:none}
  .console{grid-template-columns:1fr}
  .visual-panel{min-height:55vh;border-right:0;border-bottom:1px solid var(--line)}
  .data-panel{padding:46px 24px 56px}
  h1{font-size:clamp(84px,28vw,150px)}
  .topbar,.footer{padding:0 16px}
}

@media (max-width:520px){
  .topbar{height:54px}
  .brand{font-size:10px}
  .ticker{font-size:10px;padding:7px 9px}
  .visual-panel{min-height:48vh}
  .hud-tag{top:18px;left:18px}
  .hud-readout{left:18px;bottom:18px}
  .data-panel{padding:38px 18px 42px}
  h1{font-size:29vw}
  .lead{margin-top:22px}
  .footer{height:54px;font-size:9px}
}