:root {
  --bg: #020204;
  --text: #f8f8fb;
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.12);
  --purple: #7b55ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .01em;
}
a { color: inherit; text-decoration: none; }
.site-header {
  position: fixed;
  z-index: 20;
  top: 0; left: 0; right: 0;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 4vw, 64px);
  background: linear-gradient(to bottom, rgba(0,0,0,.74), rgba(0,0,0,0));
}
.brand img { width: 250px; max-width: 42vw; display: block; }
.nav { display: flex; gap: clamp(22px, 4vw, 54px); font-weight: 700; font-size: 14px; letter-spacing: .16em; }
.nav a { opacity: .92; }
.nav a:hover { color: var(--purple); }
.section-border { border-bottom: 1px solid var(--line); }
.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 75% 28%, rgba(119,70,255,.35), transparent 18%),
    radial-gradient(circle at 21% 14%, rgba(100,70,255,.18), transparent 22%),
    #020204;
}
.stars, .stars::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(126,83,255,.75) 0 1px, transparent 1.5px);
  background-size: 130px 130px, 210px 210px;
  background-position: 20px 10px, 60px 80px;
  opacity: .35;
}
.stars::before { filter: blur(1px); opacity: .45; }
.hero::after {
  content:"";
  position:absolute; right:4%; top:14%; width:34%; height:45%;
  background: radial-gradient(ellipse at center, rgba(125,81,255,.35), transparent 62%);
  filter: blur(18px);
  transform: rotate(-18deg);
}
.hero-inner {
  position: relative; z-index: 3;
  margin-top: 70px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-logo { width: min(680px, 78vw); margin-bottom: 36px; }
.accent-line { width: 58px; height: 2px; background: var(--purple); box-shadow: 0 0 18px var(--purple); }
.accent-line.small { width: 46px; margin: 18px 0 28px; }
.tagline { margin: 32px 0 150px; font-size: clamp(15px, 1.6vw, 22px); letter-spacing: .34em; }
.scroll-cue { display:flex; flex-direction: column; align-items:center; gap:16px; color:rgba(255,255,255,.86); font-size:12px; letter-spacing:.16em; }
.scroll-cue i { display:block; width:1px; height:42px; background:linear-gradient(var(--text), var(--purple)); box-shadow:0 0 12px var(--purple); }
.planet {
  position:absolute; z-index:2; left:50%; bottom:-34%; transform:translateX(-50%);
  width:120vw; height:64vw; min-width:1200px; min-height:620px;
  border-radius:50% 50% 0 0;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255,255,255,.7), transparent 1.8%),
    radial-gradient(ellipse at 50% 0%, rgba(143,112,255,.75), transparent 13%),
    radial-gradient(ellipse at center, rgba(33,31,50,.72), rgba(0,0,0,.98) 62%);
  box-shadow: 0 -5px 30px rgba(151,122,255,.85), inset 0 20px 90px rgba(117,75,255,.14);
}
.content-section {
  position: relative;
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(84px, 1fr) minmax(280px, 430px) minmax(320px, 560px) minmax(84px, 1fr);
  gap: clamp(24px, 5vw, 86px);
  align-items: center;
  background: radial-gradient(circle at 76% 48%, rgba(95,60,220,.08), transparent 28%), #020204;
}
.section-number { grid-column: 1 / 2; justify-self: end; align-self: start; margin-top: 62px; display:flex; align-items:center; gap:18px; color:var(--purple); font-size:18px; }
.section-number i { display:block; width:58px; height:1px; background:rgba(255,255,255,.3); }
.section-copy { grid-column: 2 / 3; }
h2 { margin:0; font-size: clamp(34px, 4vw, 46px); letter-spacing:.13em; line-height:1; }
h3 { margin:0 0 10px; font-size:28px; }
p { margin: 0 0 24px; color: var(--text); font-size: 17px; line-height: 1.65; }
.label { margin-bottom: 18px; font-weight: 700; letter-spacing: .12em; font-size: 14px; }
.section-visual { grid-column: 3 / 4; justify-self:center; position:relative; }
.symbol-visual { width: 340px; height:340px; display:grid; place-items:center; }
.symbol-visual .rings { position:absolute; inset:0; border-radius:50%; background: repeating-radial-gradient(circle, transparent 0 33px, rgba(123,85,255,.22) 34px 35px); opacity:.65; }
.symbol-visual img { position:relative; z-index:1; width:148px; filter: drop-shadow(0 0 18px rgba(123,85,255,.35)); }
.project-section { background: radial-gradient(circle at 70% 45%, rgba(123,85,255,.18), transparent 28%), #020204; }
.project-visual img { width: min(390px, 34vw); filter: drop-shadow(0 0 30px rgba(123,85,255,.35)); }
.contact-section { min-height: 310px; border-bottom: 1px solid var(--line); }
.email { display:flex; align-items:center; gap:22px; font-size:18px; color: var(--text); }
.address { display:flex; align-items:flex-start; gap:22px; margin-top:14px; font-size:16px; line-height:1.55; color: var(--text); }
.mail-icon { width:24px; height:18px; border:1.5px solid var(--purple); position:relative; display:inline-block; flex: 0 0 auto; }
.mail-icon::before, .mail-icon::after { content:""; position:absolute; top:1px; width:15px; height:1.5px; background:var(--purple); }
.mail-icon::before { left:0; transform: rotate(35deg); transform-origin:left top; }
.mail-icon::after { right:0; transform: rotate(-35deg); transform-origin:right top; }
.location-icon { width:24px; height:24px; position:relative; display:inline-block; flex: 0 0 auto; }
.location-icon::before { content:""; position:absolute; left:6px; top:1px; width:12px; height:16px; border:1.5px solid var(--purple); border-radius:12px 12px 12px 0; transform:rotate(-45deg); }
.location-icon::after { content:""; position:absolute; left:10px; top:5px; width:4px; height:4px; border:1.5px solid var(--purple); border-radius:50%; }
.contact-logo img { width: 310px; max-width: 34vw; }
footer { height: 70px; display:grid; place-items:center; color:rgba(255,255,255,.52); font-size:14px; letter-spacing:.12em; }
@media (max-width: 900px) {
  .site-header { height:76px; }
  .brand img { width:190px; }
  .nav { gap:18px; font-size:12px; }
  .hero { min-height: 680px; }
  .tagline { letter-spacing:.22em; margin-bottom:120px; }
  .content-section { grid-template-columns: 24px 1fr 24px; gap:0; padding: 74px 0; }
  .section-number { grid-column:2; justify-self:start; margin:0 0 26px; }
  .section-copy { grid-column:2; }
  .section-visual { grid-column:2; margin-top:42px; }
  .symbol-visual { width:260px; height:260px; }
  .project-visual img { width:min(300px, 72vw); }
  .contact-logo img { max-width: 78vw; width:260px; }
}
@media (max-width: 640px) {
  .site-header { padding:0 18px; }
  .brand img { width:150px; }
  .nav { gap:12px; font-size:10px; letter-spacing:.1em; }
  .hero-logo { width:82vw; }
  .hero { min-height:620px; }
  .planet { min-width:850px; min-height:470px; bottom:-31%; }
  p { font-size:15px; }
}