:root {
  --bg: #05060f;
  --text: #f0f0f0;
  --sun: #FFD600;
  --tagline: #8899aa;
  --section-text: #ccddee;
  --section-title: #8899aa;
  --link: #aabbcc;
  --link-hover: #f0f0f0;
  --max-width: 860px;
  --section-gap: 6rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Hero ─────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 100vh;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 22vh;
  overflow: hidden;
  background:
    linear-gradient(to bottom, #000 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 60%, rgba(26,15,0,0.13) 0%, transparent 70%),
    var(--bg);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    2619px 228px rgba(255,255,255,0.26), 1126px 501px rgba(255,255,255,0.33),
    419px 1385px rgba(255,255,255,0.51), 2233px 178px rgba(255,255,255,0.46),
    130px 61px rgba(255,255,255,0.28), 952px 1034px rgba(255,255,255,0.46),
    2298px 407px rgba(255,255,255,0.5), 2232px 859px rgba(255,255,255,0.33),
    2413px 569px rgba(255,255,255,0.53), 26px 1554px rgba(255,255,255,0.53),
    1731px 696px rgba(255,255,255,0.35), 881px 1563px rgba(255,255,255,0.37),
    379px 778px rgba(255,255,255,0.28), 1408px 1236px rgba(255,255,255,0.34),
    177px 1494px rgba(255,255,255,0.41), 511px 775px rgba(255,255,255,0.28),
    1200px 1698px rgba(255,255,255,0.47), 1481px 1182px rgba(255,255,255,0.32),
    284px 93px rgba(255,255,255,0.48), 1185px 163px rgba(255,255,255,0.55),
    413px 778px rgba(255,255,255,0.35), 2603px 1708px rgba(255,255,255,0.38),
    1516px 727px rgba(255,255,255,0.32), 1093px 1437px rgba(255,255,255,0.58),
    2654px 146px rgba(255,255,255,0.46), 700px 1093px rgba(255,255,255,0.51),
    669px 946px rgba(255,255,255,0.38), 2621px 1409px rgba(255,255,255,0.44),
    1328px 1726px rgba(255,255,255,0.52), 229px 469px rgba(255,255,255,0.54),
    1292px 821px rgba(255,255,255,0.34), 864px 1161px rgba(255,255,255,0.56),
    1288px 435px rgba(255,255,255,0.48), 1620px 1316px rgba(255,255,255,0.41),
    1084px 285px rgba(255,255,255,0.34), 2299px 1103px rgba(255,255,255,0.34),
    2394px 877px rgba(255,255,255,0.56), 1635px 741px rgba(255,255,255,0.33),
    566px 1043px rgba(255,255,255,0.42), 192px 1763px rgba(255,255,255,0.29),
    2570px 327px rgba(255,255,255,0.53), 1729px 1221px rgba(255,255,255,0.27),
    1563px 1220px rgba(255,255,255,0.6), 2167px 514px rgba(255,255,255,0.59),
    47px 1393px rgba(255,255,255,0.5), 2792px 1099px rgba(255,255,255,0.51),
    2625px 696px rgba(255,255,255,0.29), 1780px 323px rgba(255,255,255,0.41),
    1078px 1025px rgba(255,255,255,0.52), 2079px 217px rgba(255,255,255,0.55),
    1222px 1723px rgba(255,255,255,0.47), 2494px 407px rgba(255,255,255,0.3),
    661px 1104px rgba(255,255,255,0.58), 2172px 1px rgba(255,255,255,0.46),
    2001px 39px rgba(255,255,255,0.29), 1486px 1799px rgba(255,255,255,0.59),
    1259px 490px rgba(255,255,255,0.27), 2323px 161px rgba(255,255,255,0.28),
    1990px 1671px rgba(255,255,255,0.27), 2181px 1568px rgba(255,255,255,0.29),
    2702px 973px rgba(255,255,255,0.58), 676px 542px rgba(255,255,255,0.43),
    2484px 866px rgba(255,255,255,0.59), 2208px 1546px rgba(255,255,255,0.51),
    823px 1460px rgba(255,255,255,0.36), 2751px 1330px rgba(255,255,255,0.38),
    2119px 924px rgba(255,255,255,0.29), 920px 131px rgba(255,255,255,0.37),
    2409px 1134px rgba(255,255,255,0.33), 902px 14px rgba(255,255,255,0.27),
    2584px 120px rgba(255,255,255,0.33), 128px 1760px rgba(255,255,255,0.37),
    2105px 487px rgba(255,255,255,0.35), 1988px 438px rgba(255,255,255,0.44),
    2338px 1180px rgba(255,255,255,0.42), 1937px 1653px rgba(255,255,255,0.39),
    386px 198px rgba(255,255,255,0.48), 1451px 867px rgba(255,255,255,0.39),
    221px 1379px rgba(255,255,255,0.48), 2646px 201px rgba(255,255,255,0.27),
    1389px 1639px rgba(255,255,255,0.55), 1018px 392px rgba(255,255,255,0.32),
    1837px 287px rgba(255,255,255,0.4), 1140px 947px rgba(255,255,255,0.34),
    308px 907px rgba(255,255,255,0.53), 2254px 200px rgba(255,255,255,0.27),
    2214px 1712px rgba(255,255,255,0.26), 382px 1543px rgba(255,255,255,0.55),
    681px 832px rgba(255,255,255,0.42), 875px 1770px rgba(255,255,255,0.39),
    240px 337px rgba(255,255,255,0.38), 1599px 543px rgba(255,255,255,0.57),
    1863px 584px rgba(255,255,255,0.4), 2276px 1355px rgba(255,255,255,0.5),
    634px 388px rgba(255,255,255,0.35), 239px 1186px rgba(255,255,255,0.51),
    249px 1531px rgba(255,255,255,0.36), 205px 1196px rgba(255,255,255,0.42),
    2175px 322px rgba(255,255,255,0.27), 2080px 164px rgba(255,255,255,0.55),
    280px 1218px rgba(255,255,255,0.27), 963px 826px rgba(255,255,255,0.29),
    2333px 504px rgba(255,255,255,0.45), 162px 1268px rgba(255,255,255,0.28),
    2692px 1195px rgba(255,255,255,0.45), 1295px 534px rgba(255,255,255,0.32),
    1286px 488px rgba(255,255,255,0.34), 536px 1375px rgba(255,255,255,0.48),
    1872px 647px rgba(255,255,255,0.58), 297px 19px rgba(255,255,255,0.41),
    2306px 204px rgba(255,255,255,0.28), 873px 1036px rgba(255,255,255,0.34),
    1429px 140px rgba(255,255,255,0.56), 1513px 583px rgba(255,255,255,0.31),
    2225px 1440px rgba(255,255,255,0.36), 2678px 1083px rgba(255,255,255,0.25),
    2271px 613px rgba(255,255,255,0.58), 424px 1798px rgba(255,255,255,0.3),
    472px 219px rgba(255,255,255,0.51), 636px 557px rgba(255,255,255,0.35),
    862px 1469px rgba(255,255,255,0.37), 2597px 1746px rgba(255,255,255,0.34),
    2001px 514px rgba(255,255,255,0.57), 208px 189px rgba(255,255,255,0.47),
    1133px 90px rgba(255,255,255,0.25), 535px 1304px rgba(255,255,255,0.59),
    661px 1518px rgba(255,255,255,0.4), 1751px 1148px rgba(255,255,255,0.25),
    308px 1415px rgba(255,255,255,0.57), 2234px 73px rgba(255,255,255,0.54),
    2385px 1131px rgba(255,255,255,0.3), 522px 85px rgba(255,255,255,0.36),
    163px 732px rgba(255,255,255,0.32), 1022px 1365px rgba(255,255,255,0.29),
    2293px 1791px rgba(255,255,255,0.39), 2542px 1534px rgba(255,255,255,0.3),
    969px 1770px rgba(255,255,255,0.31), 725px 844px rgba(255,255,255,0.26),
    1360px 1602px rgba(255,255,255,0.58), 2743px 1769px rgba(255,255,255,0.51),
    1016px 546px rgba(255,255,255,0.31), 442px 783px rgba(255,255,255,0.56),
    1927px 455px rgba(255,255,255,0.32), 1885px 716px rgba(255,255,255,0.36),
    932px 456px rgba(255,255,255,0.26), 791px 816px rgba(255,255,255,0.36),
    284px 1583px rgba(255,255,255,0.35), 2627px 1043px rgba(255,255,255,0.39),
    2196px 678px rgba(255,255,255,0.58), 472px 1796px rgba(255,255,255,0.59),
    731px 1189px rgba(255,255,255,0.59), 1087px 78px rgba(255,255,255,0.29),
    1779px 707px rgba(255,255,255,0.5), 1284px 893px rgba(255,255,255,0.46),
    2094px 236px rgba(255,255,255,0.38), 2361px 389px rgba(255,255,255,0.34),
    1786px 3px rgba(255,255,255,0.43), 2205px 1406px rgba(255,255,255,0.5),
    2746px 403px rgba(255,255,255,0.38), 286px 1360px rgba(255,255,255,0.57),
    2552px 642px rgba(255,255,255,0.48), 510px 1474px rgba(255,255,255,0.57),
    2077px 633px rgba(255,255,255,0.48), 1336px 824px rgba(255,255,255,0.49),
    2270px 260px rgba(255,255,255,0.32), 2723px 776px rgba(255,255,255,0.49),
    712px 1260px rgba(255,255,255,0.45), 1663px 1122px rgba(255,255,255,0.54),
    1244px 587px rgba(255,255,255,0.32), 2375px 1242px rgba(255,255,255,0.48),
    1904px 904px rgba(255,255,255,0.4), 875px 1046px rgba(255,255,255,0.42),
    695px 1349px rgba(255,255,255,0.28), 2111px 1359px rgba(255,255,255,0.47),
    1372px 191px rgba(255,255,255,0.54), 962px 1377px rgba(255,255,255,0.36),
    815px 301px rgba(255,255,255,0.26), 1002px 973px rgba(255,255,255,0.46),
    298px 932px rgba(255,255,255,0.4), 2579px 1178px rgba(255,255,255,0.32),
    1572px 1012px rgba(255,255,255,0.39), 604px 1343px rgba(255,255,255,0.49),
    436px 1594px rgba(255,255,255,0.4), 720px 1646px rgba(255,255,255,0.59),
    2121px 951px rgba(255,255,255,0.27), 1020px 1737px rgba(255,255,255,0.29),
    546px 1641px rgba(255,255,255,0.41), 2175px 1144px rgba(255,255,255,0.46),
    1812px 1254px rgba(255,255,255,0.54), 2067px 873px rgba(255,255,255,0.54),
    2244px 913px rgba(255,255,255,0.56), 1944px 921px rgba(255,255,255,0.34),
    1012px 1720px rgba(255,255,255,0.47), 2135px 992px rgba(255,255,255,0.47),
    1124px 900px rgba(255,255,255,0.28), 1170px 480px rgba(255,255,255,0.35),
    1309px 1106px rgba(255,255,255,0.28), 617px 473px rgba(255,255,255,0.38),
    625px 1446px rgba(255,255,255,0.32), 1699px 834px rgba(255,255,255,0.37);
  animation: twinkle 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
}

.hero-headline-group {
  font-size: clamp(3rem, 15vw, 17rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-headline {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: inherit;
  color: var(--text);
  display: flex;
  align-items: center;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-shadow:
    0 0 1px rgba(0,0,0,0.75),
    0 0 40px rgba(100,180,255,0.35),
    0 0 100px rgba(80,150,255,0.15);
}

.sun-dot {
  display: block;
  width: 0.18em;
  height: 0.18em;
  border-radius: 50%;
  background: var(--sun);
  flex-shrink: 0;
  margin-top: 0.18em;
  box-shadow:
    0 0 2.5px 1px #FFD600,
    0 0 7.5px 3px rgba(255,165,0,0.67),
    0 0 17.5px 7.5px rgba(255,136,0,0.33),
    0 0 30px 15px rgba(255,102,0,0.13);
  animation: sun-pulse 4s ease-in-out infinite;
  position: relative;
  top: -32%;
  right: -17%;
}

@keyframes sun-pulse {
  0%, 100% {
    box-shadow:
      0 0 2.5px 1px #FFD600,
      0 0 7.5px 3px rgba(255,165,0,0.67),
      0 0 17.5px 7.5px rgba(255,136,0,0.33),
      0 0 30px 15px rgba(255,102,0,0.13);
  }
  50% {
    box-shadow:
      0 0 4px 2px #FFD600,
      0 0 12.5px 5px rgba(255,165,0,0.67),
      0 0 25px 12.5px rgba(255,136,0,0.33),
      0 0 45px 20px rgba(255,102,0,0.13);
  }
}

.tagline-break { display: none; }

.hero-tagline {
  font-family: 'Syne', sans-serif;
  font-size: clamp(0.75rem, 1.4vw, 1rem);
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--tagline);
  margin-top: 1.5rem;
  font-weight: 400;
  text-shadow: 0 3px 1px rgba(0,0,0,0.45);
}

/* ── Sections ─────────────────────────────────────────── */

.section {
  padding: 5rem 1.5rem;
  border-top: 1px solid rgba(136,153,170,0.12);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.33rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--section-title);
  margin-bottom: 2.5rem;
  text-shadow: 0 3px 1px rgba(0,0,0,0.65);
}

/* ── About ────────────────────────────────────────────── */

.about-text {
  color: var(--section-text);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 68ch;
}

.about-text p + p {
  margin-top: 1.2em;
}

/* ── Projects ─────────────────────────────────────────── */

.project-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.project-item {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(136,153,170,0.1);
}

.project-item:first-child {
  border-top: 1px solid rgba(136,153,170,0.1);
}

.project-item a {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  transition: color 0.2s;
}

.project-item a:hover {
  color: var(--sun);
}

.project-desc {
  color: var(--section-title);
  font-size: 0.9rem;
  font-weight: 400;
}

/* ── Contact ──────────────────────────────────────────── */

.contact-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2.5rem 3rem;
}

.contact-group-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.8rem;
  text-shadow: 0 3px 1px rgba(0,0,0,0.35);
}

.contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-list a {
  color: var(--link);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.contact-list a:hover {
  color: var(--link-hover);
}

.contact-note {
  margin-top: 2.5rem;
  font-size: 0.8rem;
  color: var(--section-title);
  font-style: italic;
}

#contact {
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 100%);
}

/* ── Footer ───────────────────────────────────────────── */

footer {
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(136,153,170,0.4);
  background: rgba(0,0,0,0.5);
}

/* ── Mobile ───────────────────────────────────────────── */

@media (max-width: 600px) {
  .tagline-break { display: inline; }
  .tagline-sep   { display: none; }

  .hero {
    background:
      linear-gradient(to bottom, #000 0%, transparent 60%),
      var(--bg);
  }

  .project-item {
    flex-direction: column;
    gap: 0.25rem;
  }

  .project-item a {
    white-space: normal;
  }
}

/* ── Reduced motion ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sun-dot { animation: none; }
  .hero::before { animation: none; }
}