:root {
  --bg: #080a12;
  --panel: rgba(16, 20, 33, .72);
  --line: rgba(255, 255, 255, .11);
  --line-2: rgba(255, 255, 255, .2);
  --soft: rgba(255, 255, 255, .08);
  --shine: rgba(255, 255, 255, .76);
  --purple: #9a86ff;
  --blue: #6ea7ff;
  --max: 1180px;
  --ease: cubic-bezier(.2, .75, .25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: radial-gradient(circle at 50% -10%, rgba(95, 91, 170, .14), transparent 34%), var(--bg);
  color: #fff;
}
.shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.light { position: fixed; z-index: -1; width: 35rem; height: 35rem; border-radius: 50%; filter: blur(125px); opacity: .13; }
.light-a { top: 5%; right: -22rem; background: var(--purple); }
.light-b { bottom: 0; left: -24rem; background: var(--blue); }

header { position: fixed; inset: 0 0 auto; z-index: 10; border-bottom: 1px solid transparent; transition: .3s ease; }
header.scrolled { border-color: var(--line); background: rgba(8, 10, 18, .72); backdrop-filter: blur(18px); }
.nav { display: flex; height: 70px; align-items: center; justify-content: space-between; }
.logo { width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 50%; box-shadow: inset 0 0 18px rgba(255,255,255,.04); }
.nav-dots { display: flex; gap: 30px; }
.nav-dots i { width: 42px; height: 4px; border-radius: 10px; background: rgba(255,255,255,.22); }

.hero { display: grid; min-height: 100svh; grid-template-columns: 1.25fr .75fr; align-items: center; gap: clamp(48px, 8vw, 110px); padding-top: 110px; padding-bottom: 70px; }
.micro-line { width: 130px; height: 7px; margin-bottom: 38px; border-radius: 10px; background: rgba(255,255,255,.2); }
.title-line { height: clamp(56px, 7vw, 92px); margin-bottom: 15px; border-radius: 8px; background: linear-gradient(100deg, rgba(255,255,255,.92), rgba(168,172,189,.72)); }
.title-line.wide { width: 96%; }
.title-line.medium { width: 76%; background: linear-gradient(100deg, rgba(169,174,193,.78), rgba(108,112,130,.45)); }
.body-lines { display: grid; gap: 12px; width: min(90%, 560px); margin-top: 40px; }
.body-lines i, .small-copy i, .project-lines i, .timeline span, .contact-body i { height: 9px; border-radius: 20px; background: rgba(255,255,255,.13); }
.body-lines i:nth-child(2) { width: 94%; }
.body-lines i:nth-child(3) { width: 70%; }
.buttons { display: flex; gap: 14px; margin-top: 42px; }
.buttons i { width: 140px; height: 52px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,.04); }
.buttons i:first-child { background: rgba(255,255,255,.88); }

.identity { position: relative; min-height: 500px; overflow: hidden; padding: 24px; border: 1px solid var(--line-2); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.1), transparent 32%), linear-gradient(160deg, rgba(23,28,47,.88), rgba(10,12,21,.75)); box-shadow: 0 40px 100px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.08); transform: rotateY(-6deg) rotateX(2deg); transition: transform .7s var(--ease); }
.identity:hover { transform: none; }
.identity-top, .identity-bottom { display: flex; justify-content: space-between; }
.identity-top i { width: 70px; height: 5px; border-radius: 10px; background: rgba(255,255,255,.17); }
.identity-top i:last-child { width: 46px; }
.identity-bottom { position: absolute; right: 24px; bottom: 24px; left: 24px; }
.identity-bottom i { width: 85px; height: 6px; border-radius: 10px; background: rgba(255,255,255,.17); }
.orbital { position: absolute; inset: 50%; width: 280px; height: 280px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 80px rgba(132,125,255,.1), inset 0 0 80px rgba(119,167,255,.06); }
.orbital::before, .orbital::after { content: ""; position: absolute; inset: 38px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.orbital::after { inset: 90px; background: linear-gradient(145deg, rgba(157,140,255,.28), rgba(119,167,255,.08)); box-shadow: 0 0 50px rgba(157,140,255,.16); }
.orbital i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #b3a8ff; box-shadow: 0 0 18px #9d8cff; }
.orbital i:nth-child(1) { top: 12px; left: 78px; }
.orbital i:nth-child(2) { right: 18px; bottom: 62px; }
.orbital i:nth-child(3) { bottom: 22px; left: 45px; }

.section { padding-top: clamp(110px, 15vw, 180px); }
.section-head { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 50px; margin-bottom: 70px; }
.section-head i { width: 95px; height: 7px; border-radius: 10px; background: rgba(255,255,255,.18); }
.section-head b { display: block; width: min(88%, 680px); height: clamp(46px, 6vw, 72px); border-radius: 9px; background: linear-gradient(100deg, rgba(255,255,255,.82), rgba(143,147,164,.55)); }
.section-head b.short { width: 52%; }
.about-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(60px, 10vw, 145px); }
.large-copy, .small-copy { display: grid; align-content: start; gap: 15px; }
.large-copy i { height: 28px; border-radius: 8px; background: rgba(255,255,255,.45); }
.large-copy i:nth-child(2) { width: 92%; }
.large-copy i:nth-child(3) { width: 65%; }
.small-copy { gap: 13px; padding-top: 7px; }
.small-copy i:nth-child(2), .small-copy i:nth-child(5) { width: 88%; }
.small-copy i:nth-child(3) { width: 74%; margin-bottom: 20px; }
.triple-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 90px; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--line); }
.triple-cards article { min-height: 235px; padding: 28px; background: rgba(10,13,23,.84); }
.triple-cards span { display: block; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; }
.triple-cards div { width: 55%; height: 18px; margin: 60px 0 22px; border-radius: 7px; background: rgba(255,255,255,.36); }
.triple-cards i { display: block; width: 90%; height: 8px; margin-top: 10px; border-radius: 10px; background: rgba(255,255,255,.11); }
.triple-cards i:last-child { width: 68%; }

.project-grid { display: grid; grid-template-columns: 1.24fr .76fr; gap: 22px; }
.project { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); transition: transform .35s var(--ease), border-color .3s ease; }
.project:hover { transform: translateY(-5px); border-color: var(--line-2); }
.project-large { grid-row: span 2; }
.visual { position: relative; min-height: 270px; overflow: hidden; border-bottom: 1px solid var(--line); }
.project-large .visual { min-height: 500px; }
.visual-a { background: radial-gradient(circle at 70% 30%, rgba(126,102,255,.38), transparent 28%), linear-gradient(145deg, #111528, #171125 55%, #0d101b); }
.visual-a::before { content: ""; position: absolute; width: 260px; height: 350px; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; transform: translate(-50%,-50%) rotate(28deg); box-shadow: 0 0 90px rgba(143,122,255,.14); }
.visual-b { display: grid; place-items: center; background: radial-gradient(circle, #18303a, #10131d 65%); }
.visual-b::before { content: ""; width: 120px; height: 120px; border: 1px solid rgba(124,239,225,.25); border-radius: 50%; box-shadow: inset 0 0 50px rgba(124,239,225,.08), 0 0 45px rgba(124,239,225,.08); }
.visual-c { background: linear-gradient(135deg, #261a2a, #111320 62%); }
.visual-c::before { content: ""; position: absolute; inset: 28%; border: 1px solid rgba(255,255,255,.16); transform: rotate(45deg); box-shadow: 22px 22px rgba(157,140,255,.08), -22px -22px rgba(119,167,255,.07); }
.project-lines { display: grid; gap: 12px; padding: 28px; }
.project-lines i:first-child { width: 42%; height: 17px; background: rgba(255,255,255,.36); }
.project-lines i:nth-child(2) { width: 92%; }
.project-lines i:nth-child(3) { width: 65%; }

.timeline { border-top: 1px solid var(--line); }
.timeline article { display: grid; grid-template-columns: .72fr 1fr auto; gap: 38px; padding: 36px 0; border-bottom: 1px solid var(--line); }
.timeline article > i { width: 110px; height: 7px; border-radius: 10px; background: rgba(255,255,255,.14); }
.timeline article div { display: grid; gap: 14px; }
.timeline b { width: 48%; height: 18px; border-radius: 6px; background: rgba(255,255,255,.38); }
.timeline span { width: 84%; }
.timeline em { width: 45px; height: 25px; border: 1px solid var(--line); border-radius: 999px; }

.contact { padding-bottom: 80px; }
.contact-panel { position: relative; overflow: hidden; min-height: 520px; padding: clamp(35px, 7vw, 84px); border: 1px solid var(--line-2); border-radius: 34px; background: linear-gradient(135deg, rgba(31,37,61,.82), rgba(13,16,27,.9) 55%, rgba(29,20,44,.72)); box-shadow: 0 35px 100px rgba(0,0,0,.28); }
.contact-panel::after { content: ""; position: absolute; width: 400px; height: 400px; right: -160px; bottom: -230px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 90px rgba(157,140,255,.12); }
.contact-small { display: block; width: 100px; height: 7px; border-radius: 10px; background: rgba(255,255,255,.17); }
.contact-title { display: grid; gap: 16px; margin-top: 58px; }
.contact-title b { width: 72%; height: clamp(50px, 7vw, 84px); border-radius: 10px; background: rgba(255,255,255,.78); }
.contact-title b:last-child { width: 48%; background: rgba(163,167,184,.46); }
.contact-body { display: grid; gap: 12px; width: min(440px, 80%); margin-top: 38px; }
.contact-body i:last-child { width: 70%; }
.socials { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 60px; }
.socials i { width: 100px; height: 38px; border: 1px solid var(--line); border-radius: 999px; }

footer { display: flex; justify-content: space-between; padding-top: 30px; padding-bottom: 35px; border-top: 1px solid var(--line); }
footer i { width: 90px; height: 6px; border-radius: 10px; background: rgba(255,255,255,.12); }
footer i:last-child { width: 62px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 145px; }
  .identity { width: min(100%, 520px); min-height: 430px; margin-left: auto; transform: none; }
  .section-head, .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .section-head { margin-bottom: 50px; }
  .triple-cards { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .project-large { grid-row: auto; }
  .project-large .visual { min-height: 390px; }
}

@media (max-width: 620px) {
  .shell { width: min(calc(100% - 32px), var(--max)); }
  .nav-dots { gap: 12px; }
  .nav-dots i { width: 25px; }
  .hero { min-height: auto; padding-top: 130px; }
  .title-line { height: clamp(45px, 14vw, 66px); }
  .buttons i { width: 120px; height: 48px; }
  .identity { min-height: 380px; border-radius: 24px; }
  .orbital { width: 235px; height: 235px; }
  .section { padding-top: 105px; }
  .project-large .visual, .visual { min-height: 300px; }
  .timeline article { grid-template-columns: 1fr auto; gap: 22px; }
  .timeline article div { grid-column: 1 / -1; }
  .timeline em { grid-column: 2; grid-row: 1; }
  .contact { padding-bottom: 60px; }
  .contact-panel { min-height: 430px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}