:root{
  --bg:#0a0b0f;
  --bg-alt:#101219;
  --surface:#14161f;
  --surface-2:#191c26;
  --border:#242733;
  --text:#eef0f5;
  --text-dim:#9298ab;
  --text-faint:#5c6274;
  --accent:#6ee7c8;
  --accent-2:#8b7bff;
  --accent-soft:rgba(110,231,200,0.12);
  --radius:14px;
  --font-body:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.noise{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:radial-gradient(circle at 20% 20%, rgba(110,231,200,0.06), transparent 40%),
                    radial-gradient(circle at 80% 60%, rgba(139,123,255,0.08), transparent 45%);
}

.container{
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:0 24px;
}

.mono{font-family:var(--font-mono);}
.small{font-size:0.8rem;}

a{color:inherit; text-decoration:none;}

h1,h2,h3{font-weight:600; letter-spacing:-0.02em; line-height:1.1;}
h1{font-size:clamp(2.2rem, 4.5vw, 3.6rem);}
h2{font-size:clamp(1.8rem, 3vw, 2.4rem);}
h3{font-size:1.4rem;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
  display:inline-block;
}

.lead{
  font-size:1.1rem;
  color:var(--text-dim);
  max-width:52ch;
}

p{color:var(--text-dim);}

.tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid rgba(110,231,200,0.25);
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:14px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border-radius:999px;
  font-size:0.92rem;
  font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#08090c;
}
.btn-outline{
  border-color:var(--border);
  color:var(--text);
  background:var(--surface);
}
.btn-outline:hover{border-color:var(--accent);}
.btn-ghost{
  border-color:var(--border);
  color:var(--text);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,11,15,0.75);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
}
.logo{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:-0.02em;
}
.logo .dot{color:var(--accent);}
.nav-links{
  display:flex;
  gap:32px;
  list-style:none;
}
.nav-links a{
  color:var(--text-dim);
  font-size:0.92rem;
  transition:color .2s ease;
}
.nav-links a:hover{color:var(--text);}
.nav-cta{padding:10px 18px; font-size:0.85rem;}
.menu-toggle{display:none;}

/* Hero */
.hero{
  padding:110px 0 100px;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
}
.hero-grid > *{min-width:0;}
.hero-copy h1{margin-bottom:20px;}
.hero-copy .lead{margin-bottom:34px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

.hero-visual{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
}
.glow{
  position:absolute; inset:0;
  background:radial-gradient(circle at 60% 40%, rgba(139,123,255,0.25), transparent 60%);
  filter:blur(30px);
  z-index:0;
}

/* Terminal window */
.terminal{
  position:relative;
  z-index:1;
  width:100%;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  animation:float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
.terminal-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:var(--bg-alt);
}
.terminal-bar .dot{width:10px; height:10px; border-radius:50%;}
.terminal-bar .dot.red{background:#ff6b6b;}
.terminal-bar .dot.yellow{background:#ffd166;}
.terminal-bar .dot.green{background:#6ee7c8;}
.terminal-title{margin-left:8px; font-size:0.78rem; color:var(--text-faint);}
.terminal-body{padding:22px 24px; font-size:0.88rem; line-height:1.8;}
.terminal-body .line{opacity:0; animation:appear .4s ease forwards;}
.l1{animation-delay:.2s;}
.l2{animation-delay:.7s;}
.l3{animation-delay:1.3s;}
.l4{animation-delay:1.8s;}
.l5{animation-delay:2.6s;}
@keyframes appear{
  from{opacity:0; transform:translateY(4px);}
  to{opacity:1; transform:translateY(0);}
}
.prompt{color:var(--accent); margin-right:6px;}
.output{color:var(--text-dim); padding-left:18px;}
.comment{color:var(--text-faint);}
.code-block{
  color:var(--text-dim);
  padding-left:18px;
  margin:6px 0;
  white-space:pre;
  font-size:0.85rem;
  max-width:100%;
  overflow-x:auto;
}
.code-block .key{color:var(--accent-2);}
.code-block .str{color:var(--accent);}
.code-block .punct{color:var(--text-faint);}
.cursor{
  display:inline-block;
  color:var(--accent);
  animation:blink 1s step-end infinite;
}
@keyframes blink{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}

/* Comment-block (about section) */
.comment-block{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:10px;
  padding:18px 20px;
  margin-bottom:22px;
  font-size:0.85rem;
  line-height:1.7;
  overflow-x:auto;
}
.comment-block .c{color:var(--text-faint);}

/* Sections */
.section{padding:100px 0; border-top:1px solid var(--border);}
.section-head{margin-bottom:44px;}

/* About */
.about-grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:60px;
}
.about-text p{margin-bottom:18px; max-width:60ch;}
.about-text p:last-child{margin-bottom:0;}

/* Projects */
.project-card{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:50px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:48px;
}
.project-card > *{min-width:0;}
.project-card h3{margin-bottom:16px;}
.project-card p{margin-bottom:20px; max-width:56ch;}
.project-meta{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:28px;
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--text-faint);
}
.project-meta li::before{content:"— "; color:var(--accent);}

.repo-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.82rem;
  color:var(--text-dim);
  margin-bottom:18px;
}
.repo-icon{color:var(--text-faint); flex-shrink:0;}
.repo-status{
  margin-left:auto;
  color:var(--accent);
  font-size:0.78rem;
}

.mock-window{
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.mock-bar{
  display:flex; align-items:center; gap:6px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.mock-bar > span:not(.mock-filename){
  width:9px; height:9px; border-radius:50%;
  background:var(--text-faint);
  flex-shrink:0;
}
.mock-bar span:nth-child(1){background:#ff6b6b;}
.mock-bar span:nth-child(2){background:#ffd166;}
.mock-bar span:nth-child(3){background:#6ee7c8;}
.mock-filename{
  margin-left:10px;
  font-size:0.76rem;
  color:var(--text-faint);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mock-body.code{
  padding:20px 0;
  display:flex;
  flex-direction:column;
  gap:0;
  font-size:0.8rem;
  line-height:1.9;
  overflow-x:auto;
}
.code-row{
  display:flex;
  gap:16px;
  padding:0 20px;
  white-space:pre;
}
.code-row:hover{background:rgba(255,255,255,0.02);}
.ln{
  color:var(--text-faint);
  width:14px;
  text-align:right;
  user-select:none;
  flex-shrink:0;
}
.code-row .kw{color:var(--accent-2);}
.code-row .str{color:var(--accent);}
.code-row .cls{color:#ffd166;}
.code-row .fn{color:#8fd6ff;}
.code-row .punct{color:var(--text-faint);}
.code-row .comment2{color:var(--text-faint); font-style:italic;}

/* AERODAN */
.aerodan-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:60px;
  align-items:center;
}
.aerodan-copy h2{margin:0 0 18px;}
.aerodan-copy .lead{margin-bottom:16px;}
.aerodan-copy p{margin-bottom:24px;}
.game-panel{
  position:relative;
  height:320px;
  border-radius:20px;
  background:linear-gradient(160deg, #14161f, #0a0b0f 70%);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.game-panel{flex-direction:column; gap:18px;}
.game-panel .mono{
  font-size:1.4rem;
  letter-spacing:0.1em;
  color:var(--accent-2);
  opacity:0.85;
}
.glitch{
  animation:glitch 4s infinite;
}
@keyframes glitch{
  0%,94%,100%{text-shadow:none; transform:translate(0);}
  95%{text-shadow:2px 0 var(--accent), -2px 0 var(--accent-2); transform:translate(-1px,0);}
  96%{text-shadow:-2px 0 var(--accent), 2px 0 var(--accent-2); transform:translate(1px,0);}
  97%{text-shadow:none; transform:translate(0);}
}
.build-log{
  font-size:0.78rem;
  color:var(--text-faint);
  text-align:left;
  line-height:1.8;
}
.build-log .ok{color:var(--accent);}
.build-log .dots{animation:blink 1.2s step-end infinite;}
.progress-line{color:var(--accent-2); letter-spacing:0.05em;}
.scanline{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:scan 3.5s linear infinite;
  opacity:0.7;
}
@keyframes scan{
  0%{top:0;}
  100%{top:100%;}
}
.coming-soon{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--text-dim);
  border:1px solid var(--border);
  padding:10px 16px;
  border-radius:999px;
}
.pulse-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(110,231,200,0.5);}
  50%{opacity:0.5; box-shadow:0 0 0 6px rgba(110,231,200,0);}
}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.contact-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:48px;
  text-align:center;
}
.contact-email{
  font-family:var(--font-mono);
  font-size:1.6rem;
  color:var(--accent);
  display:inline-block;
  margin-bottom:12px;
  word-break:break-all;
}
.contact-box .small{color:var(--text-faint);}
.contact-code{
  text-align:left;
  font-size:1.05rem;
  line-height:1.9;
  color:var(--text-dim);
  white-space:pre-wrap;
  word-break:break-word;
}
.contact-code .kw{color:var(--accent-2);}
.contact-code .punct{color:var(--text-faint);}
.contact-code .str{color:var(--text-dim);}
.contact-link{
  color:var(--accent) !important;
  text-decoration:underline;
  text-underline-offset:4px;
  transition:opacity .2s ease;
}
.contact-link:hover{opacity:0.75;}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  padding:32px 0;
}
.footer-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  color:var(--text-faint);
}
.footer-mail{color:var(--text-faint); transition:color .2s ease;}
.footer-mail:hover{color:var(--accent);}

/* Responsive */
@media (max-width: 860px){
  .hero-grid, .about-grid, .project-card, .aerodan-grid, .contact-grid{
    grid-template-columns:1fr;
  }
  .hero-visual{height:280px; margin-top:20px;}
  .card-1{left:0; top:0;}
  .card-2{right:0; bottom:0;}
  .nav-links, .nav-cta{display:none;}
  .menu-toggle{
    display:flex; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:6px;
  }
  .menu-toggle span{width:22px; height:2px; background:var(--text);}
  .nav-links.open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--bg-alt);
    border-bottom:1px solid var(--border);
    padding:20px 24px;
    gap:18px;
  }
  .project-card{padding:32px 24px;}
  .section{padding:70px 0;}
  .hero{padding:80px 0 60px;}
}