body{
  font-size:13px;
}

/* Noise grain */
body::after{
  content:'';
  position:fixed;
  inset:-200%;
  width:400%;
  height:400%;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:0.4;
  pointer-events:none;
  z-index:9998;
  animation:grain 0.5s steps(1) infinite;
}

@keyframes grain{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-2%,-3%)}
  20%{transform:translate(3%,2%)}
  30%{transform:translate(-1%,4%)}
  40%{transform:translate(4%,-1%)}
  50%{transform:translate(-3%,1%)}
  60%{transform:translate(2%,3%)}
  70%{transform:translate(-4%,-2%)}
  80%{transform:translate(1%,-4%)}
  90%{transform:translate(3%,-3%)}
}

/* ── HEADER ── */
header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  height:56px;
  background:rgba(8,10,14,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}

.header-left{display:flex;align-items:center;gap:16px}

.logo-mark{width:28px;height:28px;position:relative}
.logo-mark svg{width:100%;height:100%}

.logo-text{
  font-family:var(--display);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.25em;
  color:var(--text-bright);
}
.logo-text span{color:var(--red)}

.header-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-dim);
}

.status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px var(--green);
  animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:0.4}
}

nav{display:flex;align-items:center;gap:32px}
nav a{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.15em;
  color:var(--text-dim);
  text-decoration:none;
  text-transform:uppercase;
  transition:color 0.2s;
  position:relative;
}
nav a::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:1px;
  background:var(--red);
  transition:width 0.2s;
}
nav a:hover{color:var(--text-bright)}
nav a:hover::after{width:100%}

.btn-login{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--red);
  background:transparent;
  border:1px solid var(--red-dim);
  padding:7px 18px;
  cursor:crosshair;
  transition:all 0.2s;
  text-decoration:none;
}
.btn-login:hover{
  background:var(--red-glow);
  border-color:var(--red);
  box-shadow:0 0 16px var(--red-glow);
}

/* ── HERO ── */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding-top:56px;
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:60px 60px;
  opacity:0.3;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.hero-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:80px 60px 80px 80px;
  position:relative;
  z-index:2;
}

.hero-eyebrow{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.3em;
  color:var(--red);
  text-transform:uppercase;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:12px;
}

.hero-eyebrow::before{
  content:'';
  width:32px;
  height:1px;
  background:var(--red);
}

.hero-title{
  font-family:var(--display);
  font-size:clamp(36px, 5vw, 64px);
  font-weight:700;
  line-height:1;
  letter-spacing:0.05em;
  color:var(--text-bright);
  margin-bottom:8px;
}
.hero-title .dc{
  color:var(--red);
  display:block;
  text-shadow:0 0 40px rgba(255,45,45,0.4);
}

.hero-subtitle{
  font-family:var(--display);
  font-size:clamp(10px, 1.5vw, 14px);
  letter-spacing:0.3em;
  color:var(--text-dim);
  margin-bottom:40px;
  text-transform:uppercase;
}

.hero-desc{
  font-family:var(--body);
  font-size:13px;
  color:var(--text-dim);
  line-height:1.8;
  max-width:440px;
  margin-bottom:48px;
  font-weight:300;
  font-style:italic;
}
.hero-desc strong{
  color:var(--text);
  font-style:normal;
  font-weight:400;
}

.hero-actions{display:flex;gap:16px;align-items:center}

.btn-primary{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--bg);
  background:var(--red);
  border:none;
  padding:14px 32px;
  cursor:crosshair;
  transition:all 0.2s;
  text-decoration:none;
  display:inline-block;
  position:relative;
  overflow:hidden;
}
.btn-primary::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:rgba(255,255,255,0.1);
  transition:left 0.3s;
}
.btn-primary:hover::before{left:100%}
.btn-primary:hover{box-shadow:0 0 24px rgba(255,45,45,0.5)}

.btn-secondary{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text-dim);
  background:transparent;
  border:none;
  padding:14px 0;
  cursor:crosshair;
  transition:color 0.2s;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.btn-secondary:hover{color:var(--text-bright)}
.btn-secondary::after{content:'→';transition:transform 0.2s}
.btn-secondary:hover::after{transform:translateX(4px)}

/* ── HERO RIGHT — Terminal ── */
.hero-right{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 80px 80px 20px;
  position:relative;
  z-index:2;
}

.terminal{
  width:100%;
  max-width:520px;
  background:var(--bg2);
  border:1px solid var(--border);
  box-shadow:
    0 0 0 1px rgba(30,37,53,0.5),
    0 32px 64px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.03);
  position:relative;
}

.terminal::before{
  content:'';
  position:absolute;
  inset:-1px;
  border:1px solid transparent;
  background:linear-gradient(135deg, var(--border-bright), transparent 50%) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
  pointer-events:none;
}

.terminal-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.02);
}
.t-dot{width:10px;height:10px;border-radius:50%}
.t-dot.red{background:#ff5f57}
.t-dot.yellow{background:#ffbd2e}
.t-dot.green{background:#28ca41}
.terminal-title{
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-dim);
  margin-left:8px;
  letter-spacing:0.1em;
}

.terminal-body{
  padding:24px;
  font-family:var(--mono);
  font-size:12px;
  line-height:2;
  min-height:360px;
}
.t-line{display:block}
.t-prompt{color:var(--red)}
.t-cmd{color:var(--text-bright)}
.t-comment{color:var(--text-dim)}
.t-key{color:var(--amber)}
.t-val{color:var(--green)}
.t-bracket{color:var(--text-dim)}
.t-string{color:#7ec8e3}
.t-num{color:#c792ea}
.t-warn{color:var(--red)}

.t-cursor{
  display:inline-block;
  width:8px;height:14px;
  background:var(--red);
  vertical-align:middle;
  animation:blink 1s step-end infinite;
  margin-left:2px;
}

@keyframes blink{0%,100%{opacity:1} 50%{opacity:0}}

.t-line{opacity:0;animation:fadein 0.1s forwards}
.t-line:nth-child(1){animation-delay:0.3s}
.t-line:nth-child(2){animation-delay:0.5s}
.t-line:nth-child(3){animation-delay:0.7s}
.t-line:nth-child(4){animation-delay:0.9s}
.t-line:nth-child(5){animation-delay:1.1s}
.t-line:nth-child(6){animation-delay:1.3s}
.t-line:nth-child(7){animation-delay:1.5s}
.t-line:nth-child(8){animation-delay:1.7s}
.t-line:nth-child(9){animation-delay:1.9s}
.t-line:nth-child(10){animation-delay:2.1s}
.t-line:nth-child(11){animation-delay:2.3s}
.t-line:nth-child(12){animation-delay:2.5s}
.t-line:nth-child(13){animation-delay:2.7s}
.t-line:nth-child(14){animation-delay:2.9s}
.t-line:nth-child(15){animation-delay:3.1s}
.t-line:nth-child(16){animation-delay:3.3s}
.t-line:nth-child(17){animation-delay:3.5s}
.t-line:nth-child(18){animation-delay:3.7s}
@keyframes fadein{to{opacity:1}}

/* ── FEATURES ── */
.features{padding:120px 80px;position:relative}

.section-header{display:flex;align-items:baseline;gap:24px;margin-bottom:64px}

.section-num{
  font-family:var(--mono);
  font-size:11px;
  color:var(--red);
  letter-spacing:0.2em;
}

.section-title{
  font-family:var(--display);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.3em;
  color:var(--text-dim);
  text-transform:uppercase;
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--border);
}

.feature-card{
  background:var(--bg);
  padding:40px;
  position:relative;
  transition:background 0.3s;
  overflow:hidden;
}

.feature-card::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:2px;height:0;
  background:var(--red);
  transition:height 0.3s;
}

.feature-card:hover{background:var(--surface)}
.feature-card:hover::before{height:100%}

.feature-icon{
  width:40px;height:40px;
  border:1px solid var(--border-bright);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  font-family:var(--mono);
  font-size:16px;
  color:var(--red);
  transition:border-color 0.3s, box-shadow 0.3s;
}

.feature-card:hover .feature-icon{
  border-color:var(--red-dim);
  box-shadow:0 0 16px var(--red-glow);
}

.feature-name{
  font-family:var(--display);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.2em;
  color:var(--text-bright);
  text-transform:uppercase;
  margin-bottom:12px;
}

.feature-desc{
  font-family:var(--body);
  font-size:12px;
  color:var(--text-dim);
  line-height:1.8;
  font-weight:300;
}

.feature-tag{
  display:inline-block;
  margin-top:20px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.15em;
  color:var(--green-dim);
  border:1px solid var(--green-dim);
  padding:3px 8px;
  text-transform:uppercase;
}

/* ── MARQUEE ── */
.marquee-wrap{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  padding:16px 0;
  background:var(--bg2);
}
.marquee-track{
  display:flex;
  gap:60px;
  animation:marquee 20s linear infinite;
  width:max-content;
}
.marquee-item{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.2em;
  color:var(--text-dim);
  text-transform:uppercase;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:12px;
}
.marquee-item::before{content:'//';color:var(--red-dim)}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ── ACCESS PANEL ── */
.access-panel{
  padding:120px 80px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.access-title{
  font-family:var(--display);
  font-size:clamp(24px, 3vw, 36px);
  font-weight:700;
  letter-spacing:0.05em;
  color:var(--text-bright);
  line-height:1.2;
  margin-bottom:16px;
  margin-top:16px;
}
.access-title span{color:var(--red)}

.access-desc{
  font-family:var(--body);
  font-size:13px;
  color:var(--text-dim);
  line-height:1.8;
  font-weight:300;
  font-style:italic;
  max-width:400px;
  margin-bottom:40px;
}

.network-info{display:flex;flex-direction:column;gap:12px}
.net-item{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:11px}
.net-label{color:var(--text-dim);width:120px;letter-spacing:0.1em}
.net-value{color:var(--green);letter-spacing:0.05em}
.net-value.red{color:var(--red)}
.net-value.amber{color:var(--amber)}

/* Login form (landing page access panel) */
.login-form{
  background:var(--bg2);
  border:1px solid var(--border);
  padding:40px;
  position:relative;
}
.login-form::after{
  content:'RESTRICTED ACCESS';
  position:absolute;
  top:-10px;
  left:24px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.3em;
  color:var(--red);
  background:var(--bg2);
  padding:0 8px;
}

.form-group{margin-bottom:20px}
.form-label{
  display:block;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.2em;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-bottom:8px;
}
.form-input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  border-top-color:var(--border-bright);
  color:var(--text-bright);
  font-family:var(--mono);
  font-size:12px;
  padding:12px 16px;
  outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
  cursor:crosshair;
  letter-spacing:0.05em;
}
.form-input:focus{
  border-color:var(--red-dim);
  box-shadow:0 0 0 1px var(--red-dim), 0 0 16px var(--red-glow);
}
.form-input::placeholder{color:var(--text-dim);opacity:0.5}

.form-submit{
  width:100%;
  background:var(--red);
  border:none;
  color:var(--bg);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  padding:14px;
  cursor:crosshair;
  transition:all 0.2s;
  margin-top:8px;
}
.form-submit:hover{
  background:#ff4444;
  box-shadow:0 0 24px rgba(255,45,45,0.4);
}

.form-footer{
  margin-top:20px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-dim);
  text-align:center;
  letter-spacing:0.1em;
}
.form-footer a{
  color:var(--text-dim);
  text-decoration:none;
  border-bottom:1px solid var(--border);
  transition:color 0.2s;
}
.form-footer a:hover{color:var(--text)}

/* ── FOOTER ── */
footer{
  border-top:1px solid var(--border);
  padding:40px 80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.footer-left{
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-dim);
  letter-spacing:0.1em;
}
.footer-left strong{color:var(--red);font-weight:400}
.footer-right{
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-dim);
  letter-spacing:0.1em;
}

/* Entrance animations */
.hero-left>*{
  opacity:0;
  transform:translateY(16px);
  animation:slideup 0.6s forwards;
}
.hero-left>*:nth-child(1){animation-delay:0.1s}
.hero-left>*:nth-child(2){animation-delay:0.2s}
.hero-left>*:nth-child(3){animation-delay:0.3s}
.hero-left>*:nth-child(4){animation-delay:0.4s}
.hero-left>*:nth-child(5){animation-delay:0.5s}
.hero-left>*:nth-child(6){animation-delay:0.6s}

@keyframes slideup{to{opacity:1;transform:translateY(0)}}

.hero-right{opacity:0;animation:slideup 0.8s 0.4s forwards}

.corner-accent{
  position:absolute;
  top:80px;
  right:0;
  width:1px;
  height:200px;
  background:linear-gradient(to bottom, transparent, var(--red-dim), transparent);
}