:root {
  --bg: #050816;
  --bg-soft: #0b1026;
  --surface: rgba(14, 22, 48, 0.72);
  --surface-strong: #101936;
  --text: #f7f9ff;
  --muted: #a9b3d1;
  --line: rgba(255, 255, 255, 0.10);
  --accent: #8a7dff;
  --accent-2: #4fd1ff;
  --accent-3: #ff7cc8;
  --max: 1180px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, rgba(79, 209, 255, 0.12), transparent 30%),
    radial-gradient(circle at 85% 10%, rgba(138, 125, 255, 0.16), transparent 28%),
    radial-gradient(circle at 70% 85%, rgba(255, 124, 200, 0.08), transparent 32%),
    var(--bg);
  min-height: 100vh;
  line-height: 1.6;
}

/* Twinkle background */
@keyframes shimmer-fast {
  0%, 100% { opacity: 0.2; }
  12% { opacity: 0.95; }
  25% { opacity: 0.3; }
  37% { opacity: 0.8; }
  50% { opacity: 0.15; }
  68% { opacity: 1; }
  82% { opacity: 0.4; }
}

@keyframes shimmer-slow {
  0%, 100% { opacity: 0.85; }
  18% { opacity: 0.2; }
  33% { opacity: 0.7; }
  55% { opacity: 0.1; }
  72% { opacity: 0.9; }
  90% { opacity: 0.3; }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  will-change: opacity;
  animation: shimmer-fast 1.8s steps(4, end) infinite;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><g fill="%23fff"><circle cx="25" cy="40" r="1.1"/><circle cx="140" cy="180" r="0.7"/><circle cx="230" cy="80" r="1.3"/><circle cx="80" cy="220" r="0.9"/><circle cx="280" cy="240" r="0.6"/></g><g fill="%234fd1ff"><circle cx="190" cy="45" r="1.1"/></g></svg>');
  background-size: 280px 280px;
  background-repeat: repeat;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  will-change: opacity;
  animation: shimmer-slow 2.7s steps(5, end) infinite;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><g fill="%23fff"><circle cx="85" cy="90" r="1.2"/><circle cx="210" cy="140" r="0.8"/><circle cx="50" cy="270" r="1"/><circle cx="160" cy="290" r="0.7"/></g><g fill="%23ff7cc8"><circle cx="270" cy="170" r="1.1"/></g></svg>');
  background-size: 340px 340px;
  background-repeat: repeat;
  background-position: 110px 70px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }

.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }

.nav-shell {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(16px);
  background: rgba(5, 8, 22, 0.68);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .02em; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 32px rgba(79, 209, 255, .28);
  color: #050816;
  font-size: 18px;
}
.brand small { display:block; font-size: 11px; color: var(--muted); font-weight: 600; margin-top: -2px; }

.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 700; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.mobile-toggle { display: none; background: transparent; border: 0; color: var(--text); font-size: 24px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 15px;
  transition: .25s ease;
}
.btn-primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #060818; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(79, 209, 255, .18); }
.btn-secondary { border-color: var(--line); background: rgba(255,255,255,.03); }
.btn-secondary:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }

.hero { padding: 86px 0 54px; overflow: hidden; /* Clips floating orbit edges so they don't force page scroll */ }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 58px; }
.eyebrow { color: var(--accent-2); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; font-weight: 900; }
h1 { font-size: clamp(44px, 7vw, 82px); line-height: .98; margin: 14px 0 22px; letter-spacing: -0.055em; }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.035em; }
h3 { margin: 0; }
.hero p { color: var(--muted); font-size: 18px; max-width: 680px; }
.gradient-text {
  background-image: linear-gradient(90deg, #fff 10%, #a9dfff 45%, #b9aaff 70%, #ff9bd5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  line-height: 1.15;
  padding-bottom: 0.05em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 28px; color: var(--muted); font-size: 13px; }
.hero-meta strong { color: var(--text);font-weight: 500; font-size: 15px;  }

/* Orbit / profile photo card */
.orbit-card {
  position: relative;
  max-width: 440px;
  margin-left: auto;
  padding: 20px;
}

.orbit-wrapper {
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  z-index: 0;
  pointer-events: none;
}

.orbit-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.orbit-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 50px rgba(5, 8, 22, 0.9), var(--shadow);
}

.hud-telemetry {
  position: absolute;
  top: 20px;
  left: 10px;
  z-index: 3;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(5, 8, 22, 0.85);
  border: 1px solid rgba(79, 209, 255, 0.4);
  backdrop-filter: blur(12px);
  font-family: monospace;
  font-size: 11px;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.hud-row { display: flex; gap: 8px; line-height: 1.4; }
.hud-row span { color: var(--accent-2); font-weight: bold; }

.profile-badge {
  position: absolute;
  left: 26px; right: 26px; bottom: 24px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(5,8,22,.62);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  z-index: 3;
}
.profile-badge span { color: var(--muted); display:block; font-size:13px; margin-top:5px; }

.section { padding: 40px 0 76px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-head p { color: var(--muted); max-width: 620px; margin: 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.card p { color: var(--muted); margin-bottom: 0; }
.icon-box { width: 46px; height: 46px; border-radius: 14px; display:grid; place-items:center; margin-bottom: 18px; background: rgba(138,125,255,.12); border:1px solid rgba(138,125,255,.25); }

/* ===== Project cards (consolidated — single source of truth) ===== */
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 24px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: #38bdf8;
  box-shadow: 0 10px 25px -5px rgba(56, 189, 248, 0.15);
}

.project-visual, .project-img-grid { height: 220px; min-height: 220px; position: relative; overflow: hidden; }
.project-visual.one { background: radial-gradient(circle at 30% 35%, #63d7ff, transparent 18%), linear-gradient(145deg,#121b44,#4a3e8f 55%,#0b1025); }
.project-visual.two { background: radial-gradient(circle at 70% 30%, #ff8bc7, transparent 16%), linear-gradient(145deg,#101a37,#223e69 55%,#0b1025); }
.project-visual.three { background: radial-gradient(circle at 45% 50%, #f4dc75, transparent 14%), linear-gradient(145deg,#171c43,#693b68 55%,#0b1025); }
.project-visual.four { background: radial-gradient(circle at 65% 45%, #7cffc4, transparent 14%), linear-gradient(145deg,#0b2034,#264d55 55%,#08111d); }
.project-visual::before, .project-visual::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.project-visual::before { width:240px;height:240px;left:50%;top:50%;transform:translate(-50%,-50%); }
.project-visual::after { width:150px;height:150px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(24deg); }

.project-img-grid { display: flex; width: 100%; gap: 2px; border-radius: 12px 12px 0 0; }
.project-img-grid img { width: 50%; height: 100%; object-fit: cover; }

#hailstorm .project-img-grid img:nth-child(1) { object-position: 50% 25%; }
#hailstorm .project-img-grid img:nth-child(2) { object-position: center center; }
#stardust .project-img-grid img:nth-child(1) { object-position: center center; }
#stardust .project-img-grid img:nth-child(2) { object-position: 50% 50%; }

.project-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}

.tag { font-size: 12px; color: #cbd3ea; padding: 6px 9px; border-radius:999px; background: rgba(255,255,255,.05); border:1px solid var(--line); }

.project-link {
  display: inline-flex;
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  transition: color 0.2s ease;
}

.project-link:hover {
  color: var(--accent-2);
}

.project-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 12px;
  min-height: 70px; /* reserves room for 2 lines so tag rows land at the same height regardless of link count */
}

.view-project-link {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}
.project-card:hover .view-project-link { color: var(--accent-2); }

.cta-visual { display: flex; align-items: center; justify-content: center; }
.cta-icon { font-size: 2.5rem; color: #38bdf8; transition: transform 0.2s ease; }
.project-card:hover .cta-icon { transform: translate(3px, -3px); }

.cta-card .project-body { display: flex; flex-direction: column; flex: 1; }
.cta-card .btn-primary { width: 100%; margin-top: auto; }

.project-date {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
  margin-bottom: 4px;
}
/* ===== end project cards ===== */

.timeline { display:grid; gap:14px; }
.timeline-item { display:grid; grid-template-columns: 150px 1fr; gap:24px; padding:20px 0; border-top:1px solid var(--line); }
.timeline-item:last-child { border-bottom:1px solid var(--line); }
.timeline-item .date { color: var(--accent-2); font-weight:800; font-size:13px; }
.timeline-item p { color: var(--muted); margin:6px 0 0; }

.page-hero { padding: 74px 0 0px; }
.page-hero p { color: var(--muted); max-width: 720px; font-size:18px; }
.page-hero + .section {
  padding-top: 25px;
}

.contact-grid { display:grid; grid-template-columns: .82fr 1.18fr; gap:28px; align-items:start; }
.contact-list { display:grid; gap:12px; margin-top:24px; }
.contact-line { display:flex; align-items:center; gap:12px; color:var(--muted); }
.contact-line strong { color:var(--text); }
.form { display:grid; gap:14px; }
.field label { display:block; font-size:13px; font-weight:800; margin-bottom:7px; }
.field input, .field textarea {
  width:100%; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:14px; padding:13px 14px; outline:none;
}
.field input:focus, .field textarea:focus { border-color: rgba(79,209,255,.6); box-shadow: 0 0 0 3px rgba(79,209,255,.08); }
.field textarea { min-height:150px; resize:vertical; }
.form-note { color:var(--muted); font-size:12px; }

.cta {
  border:1px solid var(--line); border-radius:28px; padding:38px;
  background: linear-gradient(135deg, rgba(138,125,255,.14), rgba(79,209,255,.08));
  display:flex; justify-content:space-between; gap:28px; align-items:center;
}
.cta p { color:var(--muted); margin:6px 0 0; max-width:660px; }

footer { padding: 30px 0 42px; color: var(--muted); font-size:13px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:24px; }

@media (max-width: 880px) {
  .hero-grid, .contact-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .orbit-card { min-height: 420px; }
  .orbit-card { max-width: 100%; padding: 30px 10px; margin: 0 auto; }
  .orbit-card img { height: 320px; }
  .orbit-wrapper { top: -20%; left: -20%; width: 140%; height: 140%; }
  .hud-telemetry { top: 10px; left: 0px; font-size: 10px; padding: 8px 10px; }
  .nav-links { display:none; position:absolute; left:20px; right:20px; top:76px; padding:18px; border:1px solid var(--line); border-radius:18px; background:#0a1024; flex-direction:column; align-items:stretch; }
  .nav-links.open { display:flex; }
  .mobile-toggle { display:block; }
  .nav .btn-primary { display:none; }
  .section-head { align-items:start; flex-direction:column; }
  .timeline-item { grid-template-columns: 1fr; gap:5px; }
  .cta { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 560px) {
  .container { width: min(calc(100% - 26px), var(--max)); }
  .hero { padding-top: 58px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .btn { width:100%; }
  .hero-meta { flex-direction:column; gap:8px; }
  .orbit-card { min-height: 360px; padding: 20px 0; }
  .orbit-card img { height: 320px; border-radius: 20px; }
  .footer-inner { flex-direction:column; }
  .orbit-wrapper { top: -15%; left: -15%; width: 130%; height: 130%; }
  .hud-telemetry { top: 12px; left: 12px; z-index: 4; font-size: 9.5px; padding: 6px 10px; background: rgba(5, 8, 22, 0.9); }
  .orbit-svg text { font-size: 14px; }
}

/* experience */
.card:nth-child(1) .icon-box { background: rgba(79, 209, 255, .14); border-color: rgba(79, 209, 255, .3); color: var(--accent-2); }
.card:nth-child(2) .icon-box { background: rgba(138, 125, 255, .14); border-color: rgba(138, 125, 255, .3); color: var(--accent); }
.card:nth-child(3) .icon-box { background: rgba(255, 124, 200, .14); border-color: rgba(255, 124, 200, .3); color: var(--accent-3); }
.card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.card { position: relative; overflow: hidden; }
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}