/* Root colors */
:root{
  --accent: #00d1ff;        /* neon blue */
  --accent-2:#00a6ff;
  --bg: #05060a;
  --card: #0f1720;
  --muted: #94a3b8;
  --surface: #e6eef6;
  --glow: 0 0 20px rgba(0,209,255,0.12), 0 0 50px rgba(0,160,255,0.06);
}

/* Basic */
body.bg-dark { background: linear-gradient(180deg,#030409 0%, #07090d 100%); }
body { font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--surface); }

/* NAV */
.nav-link{
  color:var(--muted);
  padding: .25rem .5rem;
  transition: color .18s ease, text-shadow .18s;
  font-weight: 500;
}
.nav-link:hover, .nav-link:focus, .nav-link.active {
  color:var(--accent);
  text-shadow: 0 0 12px rgba(0,209,255,0.12);
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:10px; font-weight:600; border:1px solid rgba(255,255,255,0.04);
}
.btn-solid{
  background: linear-gradient(90deg, rgba(0,209,255,0.12), rgba(0,160,255,0.06));
  color:var(--accent);
  box-shadow: var(--glow);
  border: 1px solid rgba(0,209,255,0.12);
  transition: transform .18s ease, box-shadow .18s;
}
.btn-solid:hover{ transform: translateY(-4px); box-shadow: 0 18px 60px rgba(0,209,255,0.08), 0 0 60px rgba(0,160,255,0.06); }

.btn-outline{
  background: transparent;
  color:var(--accent);
  border: 1px solid rgba(0,209,255,0.08);
}
.btn-ghost{
  background: transparent;
  color:var(--surface);
  border: 1px dashed rgba(255,255,255,0.03);
}

/* Neon titles */
.neon-title { letter-spacing: .6px; font-weight: 800; }
.neon-stroke { color: transparent; -webkit-text-stroke: 1px white; letter-spacing:1px; }
.text-accent{ color: var(--accent); text-shadow: var(--glow); }

/* glow ring around image */
.neon-ring{
  display:inline-block;
  padding:6px;
  border-radius:999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 14px 50px rgba(0,209,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
  transition: transform .35s ease, box-shadow .35s;
}
.neon-ring:hover { transform: translateY(-6px) rotate(-2deg); box-shadow: var(--glow); }

/* Section titles */
.section-subtitle{ color:var(--muted); font-weight:500; }
.section-title{ color:var(--accent); font-weight:800; font-size:2rem; text-shadow: 0 0 16px rgba(0,209,255,0.06); }

/* text */
.text-muted{ color:var(--muted); }

/* info rows */
.info-row{ display:flex; gap:.5rem; align-items:center; }
.info-key{ color:var(--muted); width:90px; font-weight:600; }
.info-val{ color:var(--surface); }

/* timeline */
.timeline { border-left: 2px solid rgba(0,209,255,0.06); padding-left: 20px; }
.timeline-item { margin-bottom: 1.25rem; }

/* skill cards */
.skill-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));
  border-radius:12px; padding:20px; border:1px solid rgba(255,255,255,0.02);
  transition: transform .25s ease, box-shadow .25s;
}
.skill-card:hover{ transform: translateY(-8px); box-shadow: var(--glow); }
.skill-card .icon-wrap { width:56px; height:56px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(0,209,255,0.06); color:var(--accent); font-size:1.25rem; }

/* service cards */
.service-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));
  border-radius:12px; padding:20px; border:1px solid rgba(255,255,255,0.02);
  transition: transform .25s ease, box-shadow .25s;
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--glow); }
.icon-wrap { width:56px; height:56px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(0,209,255,0.06); color:var(--accent); font-size:1.25rem; }

/* portfolio overlay */
.portfolio-item{ position:relative; display:block; overflow:hidden; border-radius:12px; }
.portfolio-item img{ transition: transform .45s ease; }
.portfolio-item:hover img{ transform: scale(1.06); }
.portfolio-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.35)); opacity:0; transition: opacity .22s; }
.portfolio-item:hover .portfolio-overlay{ opacity:1; }
.portfolio-overlay i{ color:var(--accent); font-size:2rem; text-shadow: var(--glow); }

/* testimonial */
.testimonial-card{ background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008)); padding:20px; border-radius:12px; border:1px solid rgba(255,255,255,0.02); }
.quote-icon{ color:var(--accent); font-size:1.5rem; }

/* contact form */
.form-input{ width:100%; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); color:var(--surface); padding:.75rem 1rem; border-radius:10px; outline:none; transition: box-shadow .15s, border-color .15s; }
.form-input::placeholder{ color: rgba(230,248,255,0.45); }
.form-input:focus{ border-color: rgba(0,209,255,0.16); box-shadow: 0 10px 40px rgba(0,209,255,0.06); }

/* social */
.social{ color:var(--muted); display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(255,255,255,0.03); transition: transform .15s; }
.social:hover{ transform: translateY(-6px); color:var(--accent); box-shadow: var(--glow); }

/* reveal helpers */
.reveal { opacity:0; transform: translateY(18px) scale(.995); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1); }
.reveal.in-view { opacity:1; transform: translateY(0) scale(1); }
.reveal-left { transform: translateX(-18px); }
.reveal-right { transform: translateX(18px); }

/* small utilities */
.text-surface { color:var(--surface); }
.text-muted { color:var(--muted); }

/* Scroll indicator */
.no-pointer {
  cursor: default !important;
}
.no-events {
  pointer-events: none;
}

/* Neon bubbles */
.neon-bubble {
  box-shadow: 0 0 20px rgba(0,209,255,0.3), 0 0 40px rgba(0,209,255,0.2), 0 0 60px rgba(0,209,255,0.1);
}
.neon-bubble.accent-2 {
  box-shadow: 0 0 20px rgba(0,160,255,0.3), 0 0 40px rgba(0,160,255,0.2), 0 0 60px rgba(0,160,255,0.1);
}

/* small responsive */
@media (max-width: 640px){
  .section-title{ font-size:1.25rem; }
  .neon-stroke{ -webkit-text-stroke: 1px #fff; font-size:1.8rem; }
}