:root{
  --bg:#fff;
  --fg:#cfe9ff;
  --muted:#86a6c3;

  --cyan:#33f6ff;
  --cyan2:#70fff7;
  --line:rgba(80,210,255,.18);

  --red:#ff2f2f;
  --amber:#ffcc66;

  --shadow: 0 14px 48px rgba(0,0,0,.55);
  --r: 18px;

  --mx:50%;
  --my:50%;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--fg);
  background: radial-gradient(1200px 600px at 70% 20%, rgba(20,80,120,.28), transparent 60%),
              radial-gradient(900px 500px at 20% 70%, rgba(0,220,255,.14), transparent 60%),
              #fff;
  overflow-x:hidden;
  overflow-y:auto;
  cursor:auto;
}
body.hud-cursor{cursor:none}
a,button,input,textarea{cursor:pointer}
input,textarea{cursor:text}

/* bg layers */
.bg{position:fixed; inset:0; z-index:-10; overflow:hidden;}
#city{position:absolute; inset:0; width:100%; height:100%;}
.grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(80,210,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(80,210,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity:.42;
}
.scanlines{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05),
    rgba(255,255,255,.05) 1px,
    transparent 3px,
    transparent 6px
  );
  mix-blend-mode: overlay;
  opacity:.22;
  pointer-events:none;
  z-index:2;
}
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(900px 600px at 50% 40%, transparent 40%, rgba(0,0,0,.68) 100%);
  opacity:.95;
  pointer-events:none;
  z-index:1;
}
.glow{
  position:absolute; inset:-160px;
  background: radial-gradient(720px 420px at var(--mx) var(--my),
    rgba(51,246,255,.18), transparent 60%);
  filter: blur(10px);
  pointer-events:none;
  z-index:0;
}

/* boot */
#boot{
  position:fixed; inset:0; z-index:9999;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.boot-card{
  width:min(980px, 96vw);
  border:1px solid rgba(51,246,255,.22);
  border-radius: var(--r);
  background: rgba(0,0,0,.58);
  box-shadow: var(--shadow);
  padding:14px 14px 10px;
}
.boot-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 10px 12px;
  border-bottom:1px solid rgba(51,246,255,.14);
}
.boot-brand{display:flex; gap:12px; align-items:center; flex:1;}
.mark{
  letter-spacing:.26em;
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border:1px solid rgba(51,246,255,.35);
  border-radius:999px;
  color: var(--cyan2);
}
.boot-title{
  color: rgba(203,231,255,.72);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
}
.boot-text{
  margin:0;
  padding:12px 10px;
  min-height: 280px;
  color: rgba(112,255,247,.9);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  line-height:1.7;
  white-space: pre-wrap;
}
.boot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding: 8px 10px;
  border-top:1px solid rgba(51,246,255,.10);
}
.muted{color: rgba(203,231,255,.55);}

/* app */
.hidden{display:none !important}
.app{min-height:100vh; position:relative;}

/* topbar */
.topbar{
  position:sticky; top:0;
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  margin:16px;
  border:1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(12,18,30,.78), rgba(8,10,16,.60));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  z-index:50;
}
.left{display:flex; flex-direction:column; gap:10px;}
.brand{display:flex; align-items:baseline; gap:12px;}
.name{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.nav{display:flex; flex-wrap:wrap; gap:10px;}
.chip{
  text-decoration:none;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(203,231,255,.72);
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(120,190,255,.18);
  background: rgba(4,8,12,.28);
}
.chip:hover{border-color: rgba(51,246,255,.45); color: var(--cyan2);}
.right{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; align-items:center;}
.pill{
  font-size:12px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(120,190,255,.20);
  background: rgba(4,8,12,.55);
  color:var(--muted);
}
.pill b{color:var(--fg); font-weight:900}

/* content */
.wrap{padding: 0 16px 40px;}
.hero{
  margin: 8px auto 0;
  max-width: 1200px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items:start;
}
@media (max-width: 980px){ .hero{grid-template-columns:1fr} }

/* cards */
.card{
  border:1px solid rgba(80, 210, 255, .22);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(10,14,22,.80), rgba(8,10,16,.60));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(420px 220px at 20% 0%, rgba(51,246,255,.22), transparent 60%),
              radial-gradient(380px 220px at 90% 20%, rgba(10,167,255,.16), transparent 60%);
  opacity:.85;
  pointer-events:none;
  z-index:0;
}
.card > *{position:relative; z-index:1}

.hero-card{padding:20px 20px 18px;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.badge{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan2);
  border:1px solid rgba(51,246,255,.35);
  padding:8px 10px;
  border-radius:999px;
  background: rgba(6,10,16,.55);
}
.badge.warn{
  color: rgba(255,204,102,.95);
  border-color: rgba(255,204,102,.25);
}

.h1{
  margin: 14px 0 10px;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing:-.03em;
  text-shadow: 0 0 18px rgba(51,246,255,.12);
}
.accent{color: rgba(112,255,247,.95);}
.lead{margin:0 0 14px; color:var(--muted); max-width: 68ch;}

.cta{display:flex; flex-wrap:wrap; gap:10px; margin: 12px 0 10px;}
.btn{
  border:1px solid rgba(120,190,255,.26);
  background: rgba(5,8,12,.55);
  color:var(--fg);
  padding:12px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(51,246,255,.55)}
.btn:active{transform: translateY(0px) scale(.99)}
.btn.primary{
  border-color: rgba(51,246,255,.55);
  box-shadow: 0 0 28px rgba(51,246,255,.12);
}
.btn.ghost{opacity:.9}
.dot{
  width:10px; height:10px; border-radius:999px;
  display:inline-block;
  margin-right:10px;
  background: rgba(51,246,255,.85);
  box-shadow: 0 0 16px rgba(51,246,255,.4);
  vertical-align: -1px;
}

.hudline{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:10px;
  padding-top:12px;
  border-top:1px dashed rgba(120,190,255,.18);
}
.hudline .k{color:var(--cyan2); margin-right:8px}

/* meter */
.meter-wrap{margin-top:14px}
.meter{
  height:12px;
  border-radius:999px;
  border:1px solid rgba(120,190,255,.22);
  background: rgba(0,0,0,.25);
  overflow:hidden;
}
.meter-bar{
  height:100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(51,246,255,.85), rgba(10,167,255,.9), rgba(255,47,47,.9));
  filter: drop-shadow(0 0 10px rgba(51,246,255,.25));
}
.meter-meta{
  display:flex; justify-content:space-between;
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* right stack */
.stack{display:grid; gap:16px;}
.panel{padding:18px}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(120,190,255,.18);
  padding-bottom:12px;
  margin-bottom:14px;
}
.panel-head h3{
  margin:0;
  font-size:14px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan2);
}
.mini{font-size:12px; color:var(--muted); letter-spacing:.12em;}

.telemetry{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.kv{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(120,190,255,.16);
  background: rgba(4,8,12,.45);
}
.kv span{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.spark{
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(120,190,255,.16);
  overflow:hidden;
  background: rgba(0,0,0,.25);
}
canvas{display:block; width:100%; height:auto}

.hint{margin-top:12px; font-size:12px; color:var(--muted);}

/* log */
.log{
  max-height: 240px;
  overflow:auto;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(120,190,255,.16);
  background: rgba(0,0,0,.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
}
.logline{padding:7px 0; border-bottom:1px dashed rgba(120,190,255,.12);}
.logline:last-child{border-bottom:none}
.lt{color: rgba(112,255,247,.9)}

/* sections */
.section{
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 18px 0;
}
.section-head{
  margin: 16px 6px 12px;
  padding: 16px 16px;
  border-radius: var(--r);
  border:1px solid rgba(120,190,255,.14);
  background: rgba(4,8,12,.25);
}
.section-head h2{
  margin:0 0 10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-size:14px;
  color: var(--cyan2);
}
.section-head p{margin:0; color:var(--muted); max-width: 95ch;}

.cards3, .modules, .cases, .contact-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px){
  .cards3,.modules,.cases,.contact-grid{grid-template-columns:1fr}
}
.mini-card,.module,.case,.contact-card{padding:18px}

.mini-card h4,.module h4,.contact-card h4{
  margin:0 0 8px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--cyan2);
}
.mini-card p,.module p,.contact-card p{margin:0; color:var(--muted)}
.module ul{margin:10px 0 0; padding-left:18px; line-height:1.7; color: rgba(203,231,255,.85);}

/* tiny buttons */
.tiny{
  border:1px solid rgba(120,190,255,.22);
  background: rgba(4,8,12,.55);
  color:var(--fg);
  border-radius: 10px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
}
.tiny.wide{width:100%; margin-top:12px}

/* cases */
.case{cursor:pointer; text-align:left; transition: transform .12s ease, border-color .12s ease;}
.case:hover{transform: translateY(-2px); border-color: rgba(51,246,255,.45)}
.case-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.cid{font-weight:900; letter-spacing:.18em; color: rgba(112,255,247,.95);}
.tag2{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(120,190,255,.18);
  color: rgba(203,231,255,.75);
  background: rgba(4,8,12,.25);
}
.tag2.warn{border-color: rgba(255,204,102,.25); color: rgba(255,204,102,.95);}
.case-title{font-size:14px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:6px; font-weight:900;}
.case-desc{color: var(--muted);}

/* terminal */
.term{padding:0}
.term-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px;
  border-bottom:1px solid rgba(120,190,255,.16);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(203,231,255,.75);
}
.term-head b{color: var(--cyan2)}
.term-body{
  padding:14px 16px;
  height: 220px;
  overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  background: rgba(0,0,0,.24);
}
.term-line{padding:6px 0; border-bottom:1px dashed rgba(120,190,255,.12);}
.term-line:last-child{border-bottom:none}
.term-input{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-top:1px solid rgba(120,190,255,.14);
}
.prompt{color: rgba(112,255,247,.95); font-weight:900;}
#termIn{
  flex:1;
  background: rgba(4,8,12,.45);
  border:1px solid rgba(120,190,255,.16);
  border-radius: 12px;
  padding:10px 10px;
  color: var(--fg);
  outline:none;
}
#termIn:focus{border-color: rgba(51,246,255,.45)}

/* footer */
.footer{
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 18px 16px;
  border-top:1px solid rgba(120,190,255,.16);
  display:flex;
  justify-content:space-between;
  gap:10px;
  color: rgba(203,231,255,.55);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* modal */
.modal{
  position:fixed; inset:0;
  background: rgba(0,0,0,.68);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 80;
}
.modal-card{
  width: min(820px, 96vw);
  padding: 18px;
  transform-origin: 50% 50%;
}
.modal-head{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid rgba(120,190,255,.16);
  padding-bottom:12px;
  margin-bottom:12px;
}
.modal-head h3{
  margin:0;
  font-size:14px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--cyan2);
}
.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){ .form{grid-template-columns: 1fr} }
label{display:flex; flex-direction:column; gap:8px;}
label span{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--muted);
}
input, textarea{
  border-radius: 14px;
  border:1px solid rgba(120,190,255,.16);
  background: rgba(4,8,12,.45);
  color: var(--fg);
  padding: 12px 12px;
  outline:none;
}
input:focus, textarea:focus{border-color: rgba(51,246,255,.45)}
.full{grid-column: 1 / -1}
.modal-actions{display:flex; gap:10px; margin-top: 12px; flex-wrap:wrap;}
.modal-note{margin-top:10px; color: rgba(203,231,255,.55); font-size:12px}

/* toast */
.toast{
  position:fixed;
  right: 18px;
  bottom: 18px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(51,246,255,.35);
  background: rgba(10,14,22,.72);
  color: var(--fg);
  box-shadow: var(--shadow);
  opacity:0;
  transform: translateY(10px);
  transition: opacity .16s ease, transform .16s ease;
  z-index:90;
}
.toast.show{opacity:1; transform: translateY(0);}

/* cursor */
#cursor{
  position:fixed; left:0; top:0;
  pointer-events:none;
  transform: translate(-50%,-50%);
  z-index:100;
  opacity:0;
  transition: opacity .18s ease;
}
body.hud-cursor #cursor{opacity:1}

.c-core{
  width:6px;height:6px;border-radius:999px;
  background: rgba(112,255,247,.95);
  box-shadow: 0 0 16px rgba(51,246,255,.45);
}
.c-ring{
  position:absolute; left:50%; top:50%;
  width:34px; height:34px; border-radius:999px;
  border:1px solid rgba(51,246,255,.75);
  transform: translate(-50%,-50%);
  opacity:.95;
}
.c-scan{
  position:absolute; left:50%; top:50%;
  width:58px; height:58px; border-radius:999px;
  border:1px dashed rgba(51,246,255,.35);
  transform: translate(-50%,-50%);
  animation: spin 5.2s linear infinite;
  opacity:.65;
}
.c-tip{
  position:absolute;
  left:50%;
  top: calc(50% + 46px);
  transform: translateX(-50%);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(112,255,247,.95);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(120,190,255,.18);
  background: rgba(0,0,0,.35);
}

/* cursor states */
body.cursor-hover .c-ring{
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 0 18px rgba(255,255,255,.22);
}
body.cursor-lock .c-tip{color: rgba(255,204,102,.95); border-color: rgba(255,204,102,.25);}
body.cursor-lock .c-ring{border-color: rgba(255,204,102,.75);}
body.cursor-lock .c-core{background: rgba(255,204,102,.95); box-shadow: 0 0 18px rgba(255,204,102,.25);}

/* click pulse */
@keyframes pulse{
  from{transform: translate(-50%,-50%) scale(1); opacity:1}
  to{transform: translate(-50%,-50%) scale(1.25); opacity:.25}
}
.pulse{animation: pulse .18s ease-out 0s 1;}

@keyframes spin{
  from{transform: translate(-50%,-50%) rotate(0deg)}
  to{transform: translate(-50%,-50%) rotate(360deg)}
}

/* glitch */
@keyframes glitch {
  0%{transform: translate(0,0)}
  20%{transform: translate(-2px,1px)}
  40%{transform: translate(2px,-1px)}
  60%{transform: translate(-1px,-2px)}
  80%{transform: translate(1px,2px)}
  100%{transform: translate(0,0)}
}
.glitch{animation: glitch .18s linear 0s 2;}

/* modal anim */
@keyframes popIn{
  from{transform: translateY(6px) scale(.98); opacity:0}
  to{transform: translateY(0) scale(1); opacity:1}
}
.modal-open #modalCard{animation: popIn .16s ease both;}
@keyframes popOut{
  from{transform: translateY(0) scale(1); opacity:1}
  to{transform: translateY(6px) scale(.98); opacity:0}
}
.modal-close #modalCard{animation: popOut .14s ease both;}

/* danger mode */
.danger .badge.warn{
  color: rgba(255,47,47,.95);
  border-color: rgba(255,47,47,.35);
}
.danger #cursor .c-tip{color: rgba(255,47,47,.95); border-color: rgba(255,47,47,.35);}
.danger #cursor .c-ring{border-color: rgba(255,47,47,.75);}
.danger #cursor .c-core{background: rgba(255,47,47,.95); box-shadow: 0 0 18px rgba(255,47,47,.25);}

/* touch safety */
@media (pointer: coarse){
  body{cursor:auto !important}
  #cursor{display:none !important}
}
/* ==== FORCE HIDE SYSTEM CURSOR ==== */
html,
body,
* {
  cursor: none !important;
}