:root {
  --bg: #071018;
  --bg2: #0a1520;
  --panel: #0d1b27;
  --panel2: #102333;
  --panel3: #132b3e;
  --text: #f3f7fb;
  --muted: #8ea4b5;
  --line: rgba(255,255,255,.075);
  --cyan: #56d6ff;
  --blue: #537dff;
  --violet: #916fff;
  --green: #79e5ad;
  --amber: #ffc56b;
  --shadow: 0 22px 70px rgba(0,0,0,.42);
  --radius: 18px;
  --max: 1260px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 84% 8%, rgba(83,125,255,.16), transparent 26rem),
    radial-gradient(circle at 11% 20%, rgba(86,214,255,.09), transparent 25rem),
    linear-gradient(180deg, #071018, #08131d 50%, #050b11 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.013) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }

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

/* NAV */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5,12,18,.84);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #06121b;
  background: linear-gradient(145deg, #a3ecff, var(--cyan) 38%, var(--blue) 76%, var(--violet));
  box-shadow: 0 0 26px rgba(86,214,255,.2);
}

.brand-copy strong {
  display: block;
  font-size: .98rem;
}

.brand-copy span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  margin-top: 1px;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 20px;
}

.topnav a {
  color: #9eb0be;
  font-size: .86rem;
  padding: 9px 0;
  position: relative;
}

.topnav a:hover,
.topnav a.active {
  color: white;
}

.topnav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  box-shadow: 0 0 12px rgba(86,214,255,.42);
}

.profile-link {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: #c9d7e1;
  font-size: .8rem;
}

.profile-link:hover {
  border-color: rgba(86,214,255,.22);
  background: rgba(86,214,255,.055);
}

.profile-link img {
  width: 31px;
  height: 31px;
  object-fit: cover;
  border-radius: 8px;
  background: #0b1822;
}

/* COMMON */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(86,214,255,.14);
  border-radius: 999px;
  background: rgba(86,214,255,.055);
  color: #9edff4;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(121,229,173,.65);
}

.btn {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 10px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 750;
  font-size: .82rem;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.btn-primary {
  color: #041018;
  background: linear-gradient(135deg, var(--cyan), #7bbfff);
  box-shadow: 0 11px 30px rgba(86,214,255,.15);
}

.btn-ghost {
  color: #dce8ef;
  background: rgba(255,255,255,.035);
  border-color: var(--line);
}

.page-head {
  padding: 68px 0 28px;
}

.page-head h1 {
  margin: 13px 0 12px;
  max-width: 880px;
  font-size: clamp(2.8rem, 6vw, 5.8rem);
  line-height: .92;
  letter-spacing: -.07em;
}

.page-head p {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.7;
}

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.section-title h2 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -.04em;
}

.section-title p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .86rem;
}

/* HOME */
.hero {
  padding: 70px 0 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
  gap: 22px;
}

.hero-main,
.feature-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero-main {
  position: relative;
  min-height: 455px;
  padding: 46px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background:
    linear-gradient(90deg, rgba(7,16,24,.96) 0%, rgba(7,16,24,.77) 43%, rgba(7,16,24,.12) 79%),
    radial-gradient(circle at 78% 28%, rgba(86,214,255,.22), transparent 16rem),
    radial-gradient(circle at 84% 70%, rgba(145,111,255,.18), transparent 13rem),
    linear-gradient(135deg, #0c2030, #102c43 38%, #0a1724);
}

.hero-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 58%, rgba(255,255,255,.035) 59% 60%, transparent 61%),
    linear-gradient(40deg, transparent 0 73%, rgba(86,214,255,.06) 74% 75%, transparent 76%);
  pointer-events: none;
}

.hero-art {
  position: absolute;
  right: 5%;
  top: 9%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 28px;
  transform: rotate(4deg);
  background:
    radial-gradient(circle at 28% 25%, rgba(255,255,255,.14), transparent 14%),
    linear-gradient(145deg, #173b55, #17334a 35%, #0c1925 68%, #071018);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 28px 70px rgba(0,0,0,.45);
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(86,214,255,.28);
  border-radius: 22px;
  transform: rotate(-8deg);
}

.hero-art::after {
  content: "{ }";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(167,230,255,.88);
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 900;
  letter-spacing: -.12em;
  text-shadow: 0 0 34px rgba(86,214,255,.28);
}

.hero h1 {
  position: relative;
  z-index: 2;
  margin: 18px 0 0;
  max-width: 700px;
  font-size: clamp(3.3rem, 7vw, 6.9rem);
  line-height: .88;
  letter-spacing: -.078em;
}

.hero h1 span {
  display: block;
  background: linear-gradient(90deg, #a0e8ff, #76baff 48%, #aa90ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 660px;
  color: var(--muted);
  line-height: 1.7;
  margin: 22px 0 0;
}

.hero-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.feature-panel {
  padding: 24px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(19,43,62,.88), rgba(9,20,30,.96));
}

.feature-label {
  color: #758d9e;
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.feature-name {
  margin: 0 0 14px;
  color: white;
  font-size: 1.85rem;
  line-height: 1.04;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.feature-desc {
  color: #8fa7b8;
  font-size: .86rem;
  line-height: 1.58;
  min-height: 72px;
}

.feature-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 17px 0 22px;
}

.pill {
  padding: 6px 8px;
  border-radius: 8px;
  background: #0b1b28;
  border: 1px solid rgba(255,255,255,.05);
  color: #9fc3da;
  font-size: .72rem;
}

.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.mini-card {
  padding: 14px;
  border-radius: 12px;
  background: rgba(4,11,16,.3);
  border: 1px solid var(--line);
}

.mini-card strong {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.mini-card span {
  color: #7790a2;
  font-size: .69rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.stats {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr .9fr;
  gap: 12px;
  margin-top: 18px;
}

.stat-card {
  min-height: 106px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(11,25,36,.74);
}

.stat-card .label {
  color: #70889a;
  font-size: .69rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.stat-card strong {
  display: block;
  font-size: 1.46rem;
  letter-spacing: -.035em;
}

.stat-card p {
  margin: 5px 0 0;
  color: #7890a1;
  font-size: .77rem;
}

.home-projects {
  padding: 58px 0 10px;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.quick-project {
  padding: 18px;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 10%, rgba(86,214,255,.13), transparent 8rem),
    linear-gradient(180deg, #0d1d2a, #0a1721);
  transition: transform .18s, border-color .18s;
}

.quick-project:hover {
  transform: translateY(-4px);
  border-color: rgba(86,214,255,.18);
}

.quick-project .type {
  color: #70a8c6;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.quick-project h3 {
  margin: 18px 0 9px;
  font-size: 1.18rem;
  overflow-wrap: anywhere;
}

.quick-project p {
  color: #8298a8;
  font-size: .8rem;
  line-height: 1.5;
  margin: 0;
}

.quick-project .meta {
  margin-top: 18px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  color: #728b9c;
  font-size: .7rem;
}

/* PROJECTS PAGE */
.project-tools {
  padding: 12px 0 18px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
}

.searchbox {
  position: relative;
  flex: 1 1 300px;
  max-width: 430px;
}

.searchbox input {
  width: 100%;
  height: 42px;
  border-radius: 11px;
  outline: none;
  border: 1px solid var(--line);
  background: #091620;
  color: white;
  padding: 0 40px 0 13px;
}

.searchbox input:focus {
  border-color: rgba(86,214,255,.28);
  box-shadow: 0 0 0 3px rgba(86,214,255,.05);
}

.searchbox span {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #6d8495;
}

.filter {
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #0b1a26;
  color: #91a5b4;
  cursor: pointer;
}

.filter:hover,
.filter.active {
  color: white;
  border-color: rgba(86,214,255,.22);
  background: #10283a;
}

.projects-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0 13px;
  color: #70889a;
  font-size: .78rem;
}

#repos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.repo-card {
  grid-column: span 4;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #0d1d2a, #091620);
  box-shadow: 0 14px 38px rgba(0,0,0,.24);
  cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.repo-card:nth-child(5n+1),
.repo-card:nth-child(5n+2) {
  grid-column: span 6;
}

.repo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(86,214,255,.18);
  box-shadow: 0 20px 46px rgba(0,0,0,.38);
}

.repo-visual {
  height: 176px;
  position: relative;
  padding: 18px;
  overflow: hidden;
  display: flex;
  align-items: end;
  background:
    radial-gradient(circle at 80% 20%, rgba(86,214,255,.24), transparent 25%),
    linear-gradient(140deg, #153e58, #0e2332 45%, #071018);
}

.repo-card:nth-child(4n+2) .repo-visual {
  background:
    radial-gradient(circle at 20% 18%, rgba(145,111,255,.28), transparent 24%),
    linear-gradient(140deg, #3d2857, #1b2742 48%, #08111b);
}

.repo-card:nth-child(4n+3) .repo-visual {
  background:
    radial-gradient(circle at 82% 28%, rgba(121,229,173,.22), transparent 24%),
    linear-gradient(140deg, #17463e, #153240 48%, #071018);
}

.repo-card:nth-child(4n+4) .repo-visual {
  background:
    radial-gradient(circle at 20% 24%, rgba(255,197,107,.2), transparent 22%),
    linear-gradient(140deg, #49331f, #173242 48%, #071018);
}

.repo-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 62%, rgba(255,255,255,.05) 63% 64%, transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 5px);
}

.repo-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 46%, rgba(2,7,11,.8));
}

.repo-monogram {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: rgba(255,255,255,.82);
  font-weight: 900;
  font-size: .9rem;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(4,12,18,.26);
  backdrop-filter: blur(8px);
}

.repo-title-big {
  position: relative;
  z-index: 2;
  max-width: 78%;
  color: white;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.repo-body {
  padding: 16px;
}

.repo-topline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.repo-name {
  color: #dceaf3;
  font-size: .95rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.repo-arrow {
  color: #5a7485;
}

.repo-desc {
  min-height: 54px;
  margin: 0;
  color: #7f96a7;
  line-height: 1.5;
  font-size: .8rem;
}

.repo-meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.repo-meta span {
  padding: 5px 7px;
  border-radius: 7px;
  background: #0a1823;
  border: 1px solid rgba(255,255,255,.045);
  color: #8da9bb;
  font-size: .69rem;
}

.empty,
.loading {
  grid-column: 1 / -1;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0a1721;
  color: var(--muted);
}

/* ABOUT */
.about-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 18px;
  padding: 12px 0 20px;
}

.about-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(11,25,36,.75);
  padding: 24px;
}

.profile-card {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.profile-card img {
  width: 98px;
  height: 98px;
  border-radius: 20px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.profile-card h2 {
  margin: 18px 0 4px;
  font-size: 1.55rem;
}

.profile-card .login {
  color: #6f8899;
  margin-bottom: 16px;
}

.profile-card p {
  color: #8ba1b0;
  line-height: 1.6;
  font-size: .86rem;
}

.about-details h2 {
  margin-top: 0;
  font-size: 1.4rem;
}

.about-details p {
  color: #879dad;
  line-height: 1.7;
}

.tech-cloud {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.tech {
  padding: 7px 9px;
  border-radius: 9px;
  background: #0a1924;
  border: 1px solid var(--line);
  color: #9db8ca;
  font-size: .76rem;
}

/* FOOTER */
footer {
  margin-top: 64px;
  padding: 34px 0 42px;
  border-top: 1px solid var(--line);
  color: #647b8d;
  font-size: .76rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* RESPONSIVE */
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-grid {
    grid-template-columns: 1fr 1fr;
  }

  .repo-card,
  .repo-card:nth-child(5n+1),
  .repo-card:nth-child(5n+2) {
    grid-column: span 6;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .shell {
    width: min(var(--max), calc(100% - 20px));
  }

  .topbar-inner {
    gap: 14px;
  }

  .brand-copy span,
  .profile-link span {
    display: none;
  }

  .topnav {
    margin-left: 0;
    gap: 14px;
  }

  .hero {
    padding-top: 34px;
  }

  .hero-main {
    min-height: 430px;
    padding: 28px;
  }

  .hero-art {
    width: 49%;
    right: -8%;
    opacity: .46;
  }

  .hero h1 {
    max-width: 90%;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .quick-grid {
    grid-template-columns: 1fr;
  }

  #repos {
    grid-template-columns: 1fr;
  }

  .repo-card,
  .repo-card:nth-child(5n+1),
  .repo-card:nth-child(5n+2) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .topnav a {
    font-size: .8rem;
  }

  .brand-copy strong {
    display: none;
  }

  .stats {
    grid-template-columns: 1fr;
  }
}