@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Syne:wght@700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'JetBrains Mono',monospace;background:#000;color:#e8e8e8;min-height:100vh;line-height:1.7;font-size:15px;}

:root{
  --accent:#dc1414;
  --accent-light:#ff3333;
  --bg:#000;
  --bg-card:#0d0d0d;
  --bg-panel:#111;
  --border:#1f1f1f;
  --muted:#666;
  --dim:#333;
}

body::after{content:'';position:fixed;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--accent),transparent);z-index:100;pointer-events:none;}

#greeting-bar{background:#080808;border-bottom:1px solid var(--accent);padding:.5rem 2rem;display:flex;align-items:center;justify-content:center;gap:2rem;font-size:.78rem;color:var(--accent);}
#live-clock{color:var(--muted);}

nav{background:#050505;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:99;}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:62px;}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.15rem;color:#fff;text-decoration:none;}
.logo::before{content:'> ';color:var(--accent);animation:blink 1.2s step-end infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.nav-links{display:flex;list-style:none;gap:0;}
.nav-links a{display:block;padding:.5rem 1rem;color:var(--muted);text-decoration:none;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--accent);}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none;}
.hamburger span{display:block;width:22px;height:1px;background:#e8e8e8;}

.hero{max-width:1100px;margin:0 auto;padding:5rem 2rem 3rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.hero h1{font-family:'Syne',sans-serif;font-size:clamp(2rem,5vw,3.4rem);font-weight:800;color:#fff;line-height:1.08;margin-bottom:1.2rem;}
.hero h1 em{font-style:normal;color:var(--accent);display:block;}
.hero p{color:var(--muted);font-size:.9rem;margin-bottom:2rem;max-width:400px;line-height:1.8;}

.terminal-frame{background:var(--bg-card);border:1px solid var(--border);border-top:2px solid var(--accent);border-radius:6px;overflow:hidden;box-shadow:0 0 24px rgba(220,20,20,.1);}
.terminal-bar{background:var(--bg-panel);padding:.6rem 1rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--border);}
.dot{width:11px;height:11px;border-radius:50%;}
.dot-r{background:#cc3333;}.dot-y{background:#996600;}.dot-g{background:#226622;}
.terminal-bar .title{margin-left:.5rem;font-size:.76rem;color:var(--dim);}
.terminal-body{padding:1.2rem 1.4rem;font-size:.86rem;}
.terminal-body .line{margin-bottom:.3rem;display:flex;gap:.6rem;}
.prompt{color:var(--accent);}
.cmd{color:#fff;}
.out{color:var(--muted);padding-left:1.2rem;}
.cursor{display:inline-block;width:8px;height:1em;background:var(--accent);vertical-align:middle;animation:blink 1s step-end infinite;}

.stats{background:#111;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.stats-inner{max-width:1100px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center;}
.stat-val{font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;color:#fff;}
.stat-lbl{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}

.container{max-width:1100px;margin:0 auto;padding:3rem 2rem;}
.page-header{margin-bottom:2.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.page-header .label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem;}
.page-header h1{font-family:'Syne',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:#fff;}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.card{background:var(--bg-card);padding:1.6rem;transition:border-color .2s;}
.card-grid .card{border-radius:0;}
.card:hover{background:#111;}
.card h3{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.5rem;}
.card p{color:var(--muted);font-size:.88rem;line-height:1.7;}
.card .tag{display:inline-block;background:rgba(220,20,20,.1);color:var(--accent);border:1px solid rgba(220,20,20,.2);border-radius:3px;padding:.12rem .5rem;font-size:.72rem;letter-spacing:.05em;margin-bottom:.7rem;}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.62rem 1.5rem;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:.84rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:all .18s;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-light);box-shadow:0 0 20px rgba(220,20,20,.4);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent);}
.btn-outline:hover{background:rgba(220,20,20,.08);transform:translateY(-1px);}
.btn-danger{background:transparent;color:#ff1a1a;border:1px solid rgba(255,26,26,.3);}
.btn-danger:hover{background:rgba(255,26,26,.08);}
.btn-sm{padding:.38rem .9rem;font-size:.78rem;}

.flash{padding:.75rem 1.1rem;border-radius:3px;margin-bottom:1.2rem;font-size:.86rem;border-left:3px solid;}
.flash-ok{background:rgba(34,170,85,.08);color:#33cc66;border-color:#22aa55;}
.flash-error{background:rgba(220,20,20,.08);color:var(--accent-light);border-color:var(--accent);}

.form-wrap{background:var(--bg-card);border:1px solid var(--border);border-top:2px solid var(--accent);border-radius:6px;padding:2rem;max-width:560px;}
.form-group{margin-bottom:1.2rem;}
label{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;}
input[type=text],input[type=email],input[type=tel],input[type=password],textarea{width:100%;background:#000;border:1px solid var(--border);color:#e8e8e8;font-family:'JetBrains Mono',monospace;font-size:.88rem;padding:.65rem .9rem;outline:none;border-radius:3px;transition:border-color .2s;}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(220,20,20,.1);}
textarea{resize:vertical;min-height:90px;}
input::placeholder{color:var(--dim);}

.chat-wrap{display:grid;grid-template-rows:1fr auto;gap:1rem;height:65vh;}
.chat-messages{background:#000;border:1px solid var(--border);border-radius:6px;padding:1.2rem;overflow-y:auto;display:flex;flex-direction:column;gap:.8rem;}
.chat-msg{display:flex;gap:.8rem;}
.chat-avatar{width:34px;height:34px;border-radius:3px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;flex-shrink:0;}
.chat-content{flex:1;}
.chat-meta{font-size:.72rem;color:var(--dim);margin-bottom:.22rem;}
.chat-meta strong{color:var(--accent);margin-right:.4rem;}
.chat-text{background:var(--bg-card);border:1px solid var(--border);border-radius:0 6px 6px 6px;padding:.55rem .9rem;font-size:.88rem;color:#e8e8e8;line-height:1.65;}
.chat-input-row{display:flex;gap:.7rem;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:.7rem;}
.chat-input-row input{flex:1;background:transparent;border:none;outline:none;color:#e8e8e8;font-family:'JetBrains Mono',monospace;font-size:.88rem;padding:0 .4rem;}
.chat-input-row input:first-child{max-width:160px;border-right:1px solid var(--border);}

.data-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.data-table th{background:var(--bg-panel);color:var(--muted);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border);}
.data-table td{padding:.75rem 1rem;border-bottom:1px solid var(--border);color:#e8e8e8;vertical-align:middle;}
.data-table tr:hover td{background:rgba(220,20,20,.03);}

footer{border-top:1px solid var(--border);margin-top:4rem;padding:2rem;text-align:center;color:var(--dim);font-size:.78rem;}
footer a{color:var(--accent);text-decoration:none;}
footer a:hover{color:var(--accent-light);}

@media(max-width:768px){
  .hero{grid-template-columns:1fr;gap:2rem;padding:2rem 1.2rem;}
  .hero h1{font-size:1.9rem;}
  .stats-inner{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;flex-direction:column;position:absolute;top:62px;left:0;right:0;background:#050505;border-bottom:1px solid var(--border);padding:1rem;gap:.3rem;}
  .nav-links.open{display:flex;}
  .hamburger{display:flex;}
  .chat-wrap{height:75vh;}
  .container{padding:1.5rem 1rem;}
  .form-wrap{padding:1.2rem;}
}