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

:root{
  --bg-1:#0b0b0b;
  --bg-2:#111;
  --line:#222;
  --text:#f1f1f1;
  --muted:#b7b7b7;
  --accent:#ff3b3b;
  --card:#111;
}

html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 700px at 50% -10%, var(--bg-2) 0%, var(--bg-1) 55%, #090909 100%);
  color:var(--text);
  font-family:'Montserrat',sans-serif;
  line-height:1.6;
}

/* background canvas */
#bgCanvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1;
  background: radial-gradient(1200px 700px at 50% -10%, var(--bg-2) 0%, var(--bg-1) 55%, #090909 100%);
}

/* nav */
nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 48px; font-size:18px;
  opacity:0; transform:translateY(-20px);
  animation:navFadeSlide .8s ease forwards .1s;
}
@keyframes navFadeSlide{to{opacity:1; transform:translateY(0)}}

nav .nav-links{display:flex; align-items:center; gap:40px}
nav a{color:var(--text); text-decoration:none; position:relative; transition:color .3s}
nav a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--accent); transition:width .3s}
nav a:hover{color:var(--accent)}
nav a:hover::after{width:100%}

/* top-left quote */
.dexter-quote{
  position:relative; font-size:16px; font-weight:600; color:var(--accent); letter-spacing:1px;
  opacity:0; animation:dexterIntro .6s ease forwards .9s;
}
@keyframes dexterIntro{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)}}
.fade-out{animation:fadeOut .6s forwards}
@keyframes fadeOut{from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(4px)}}
.dexter-quote::after{
  content:""; position:absolute; right:-6px; bottom:-4px; width:4px; height:4px;
  background:var(--accent); border-radius:50%; opacity:0; transform:translateY(0) scale(.9);
  animation:bloodDrip 9s ease-in infinite 2.2s;
}
@keyframes bloodDrip{
  0%,88%{opacity:0; transform:translateY(0) scale(.9)}
  90%{opacity:.9; transform:translateY(0) scale(1)}
  100%{opacity:0; transform:translateY(10px) scale(1.05)}
}

/* hero */
.hero{
  height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 16px;
}
.hero h1{
  display:inline-block; overflow:hidden; white-space:nowrap;
  font-weight:700; font-size:42px; letter-spacing:1.5px; color:var(--accent);
  border-right:3px solid var(--accent); width:0;
  animation:typewriter 3s steps(22,end) .4s 1 forwards, hideCursor 0s 3.6s forwards;
  margin:0 0 6px;
}
@keyframes typewriter{from{width:0} to{width:20ch}}
@keyframes hideCursor{to{border-right:none}}
.hero p{margin:0 0 14px; color:var(--muted); font-size:18px; letter-spacing:.2px}

a.cta-btn, a.cta-btn:visited{
  display:inline-block; color:#fff; text-decoration:none; background:transparent; border:2px solid var(--accent);
  padding:11px 22px; border-radius:8px; font-weight:700; font-size:15px; letter-spacing:.4px;
  transition:transform .15s, background .2s, color .2s;
}
a.cta-btn:hover{background:var(--accent); color:#fff; transform:translateY(-1px)}

footer{border-top:1px solid var(--line); padding:18px 16px; text-align:center; color:#848484; font-size:14px; letter-spacing:.3px}

/* projects / case study */
.projects{max-width:900px; margin:0 auto; padding:60px 20px}
.projects h2{color:var(--accent); text-align:center; font-weight:700; letter-spacing:1px}
.projects p{text-align:center; color:var(--muted)}

.project-card{
  position:relative; background:#111; border:1px solid var(--line); border-radius:12px; padding:24px;
  transition:border-color .2s, transform .2s; margin-bottom:28px;
}
.project-card:hover{border-color:var(--accent); transform:translateY(-4px)}
.project-icon{color:var(--accent); font-size:28px; margin-bottom:10px}
.badge{position:absolute; right:14px; top:14px; background:var(--accent); color:#fff; padding:4px 10px; font-size:12px; border-radius:6px}
.tags{margin:14px 0}
.tag{display:inline-block; background:#1b1b1b; color:#cfcfcf; padding:4px 10px; margin:3px; border-radius:6px; font-size:12px}
.read-more{
  display:inline-block; padding:10px 18px; border:2px solid var(--accent); border-radius:6px; color:var(--accent);
  font-size:14px; font-weight:600; text-decoration:none; transition:all .25s; margin-top:10px;
}
.read-more:hover{background:var(--accent); color:#fff; transform:translateY(-2px)}

.case-study{max-width:900px; margin:0 auto; padding:60px 20px}
.case-study h1{color:var(--accent); margin:0 0 10px}
.subtitle{color:var(--muted); margin-bottom:22px}
.highlight-box{background:#111; border:1px solid var(--line); border-left:5px solid var(--accent); padding:20px; border-radius:8px; margin:18px 0}

/* metrics */
.metrics{
  display:grid; grid-template-columns:repeat(3, minmax(180px, 1fr)); gap:22px; margin:32px 0;
}
.metric{
  position:relative; aspect-ratio:1/1; background:var(--card); border:1px solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 16px;
  transition:transform .2s, border-color .2s;
}
.metric:hover{border-color:var(--accent); transform:translateY(-4px)}
.metric h2{font-size:28px; margin:0 0 6px; color:var(--accent); letter-spacing:1px}
.metric p{font-size:14px; color:var(--muted); margin:0}

/* responsive */
@media (max-width:900px){ .metrics{grid-template-columns:repeat(2, minmax(160px, 1fr))} }
@media (max-width:560px){ .metrics{grid-template-columns:1fr} }

@media (max-width:768px){
  nav{flex-direction:column; gap:12px; padding:16px; font-size:16px}
  nav .nav-links{gap:20px}
  .dexter-quote{font-size:14px; text-align:center}
  .hero h1{font-size:26px; letter-spacing:1px}
  .hero p{font-size:14px}
  .cta-btn{font-size:14px; padding:8px 14px}
  .projects,.case-study{padding:40px 16px}
  .project-card{padding:16px}
  .metrics{gap:12px}
  .metric{font-size:14px; padding:14px}
}
@media (max-width:480px){
  nav{flex-direction:column; gap:6px}
  nav .nav-links{flex-direction:column; gap:8px}
  .hero h1{font-size:22px}
  .hero p{font-size:13px; margin-bottom:10px}
  .metrics{grid-template-columns:1fr}
}