:root {
  color-scheme: dark;
  --bg: #080a0d;
  --panel: rgba(17, 21, 26, .58);
  --panel-line: rgba(184, 204, 224, .16);
  --text: #f2f5f7;
  --muted: #9ca6b1;
  --faint: #65707c;
  --accent: #9eb1c4;
  --grid: rgba(145, 164, 184, .07);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  overflow-x: hidden;
}

.page-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 45%, rgba(103, 126, 149, .12), transparent 29%),
    radial-gradient(circle at 84% 12%, rgba(64, 82, 99, .08), transparent 24%),
    linear-gradient(180deg, #0b0e12 0%, #080a0d 62%, #07090b 100%);
}

.grid {
  position: absolute;
  inset: 0;
  opacity: .7;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(circle, rgba(173, 194, 214, .13) 1px, transparent 1px);
  background-size: 118px 118px, 118px 118px, 19px 19px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.4));
}

.beam {
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(132, 154, 176, .12);
  transform: rotate(-45deg);
}
.beam-a { width: 780px; height: 220px; right: -330px; top: 70px; background: linear-gradient(90deg, transparent, rgba(111,137,160,.045), transparent); }
.beam-b { width: 760px; height: 180px; left: -390px; top: 470px; }

.topbar {
  position: relative;
  z-index: 10;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6.5vw;
  border-bottom: 1px solid rgba(255,255,255,.035);
}
.brand {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.04em;
}
.nav { display: flex; gap: 43px; align-items: center; color: #c7cdd4; font-size: 14px; }
.nav span { opacity: .94; }
.slash { width: 1px; height: 28px; background: #aab6c1; transform: rotate(35deg); display: block; margin-left: 4px; }

.hero {
  position: relative;
  min-height: calc(100vh - 170px);
  z-index: 2;
}
.hero-copy {
  position: relative;
  z-index: 5;
  width: min(760px, 72vw);
  margin: 78px auto 0;
  text-align: center;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: .43em;
  color: #7f8994;
  margin-bottom: 44px;
}
.hero h1 {
  margin: 0;
  font-size: clamp(68px, 7.5vw, 124px);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 580;
}
.hero h1 span { color: #f2f4f6; text-shadow: 0 0 30px rgba(255,255,255,.06); }
.hero h1 b {
  font-weight: 500;
  color: #93a6b9;
  text-shadow: 0 0 28px rgba(123,160,196,.12);
}
.hero h2 {
  font-size: clamp(28px, 3vw, 47px);
  line-height: 1.12;
  font-weight: 420;
  letter-spacing: -.025em;
  margin: 32px 0 14px;
}
.hero-copy > p {
  margin: 0;
  color: #aeb7c1;
  font-size: clamp(17px, 1.5vw, 23px);
  letter-spacing: .005em;
}
.actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  margin-top: 45px;
  font-size: 15px;
}
.primary {
  min-width: 190px;
  padding: 18px 28px;
  color: #101317;
  background: linear-gradient(180deg, #f6f8fa, #d9e0e6);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 4px;
  box-shadow: 0 9px 35px rgba(188, 205, 219, .1), inset 0 1px 0 rgba(255,255,255,.8);
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
.primary b { font-size: 22px; font-weight: 400; }
.secondary { color: #d1d7dc; border-bottom: 1px solid rgba(209,215,220,.65); padding: 0 0 9px; }

.left-rail {
  position: absolute;
  left: 6.5vw;
  top: 70px;
  display: grid;
  gap: 11px;
  font-size: 10px;
  letter-spacing: .30em;
  color: #66717d;
}
.rail-line { width: 28px; height: 1px; background: #78838e; margin-bottom: 6px; display: block; }
.idea-card {
  position: absolute;
  right: 6.5vw;
  top: 84px;
  width: 225px;
  padding: 27px 28px 24px;
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(22,27,33,.62), rgba(11,14,18,.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 24px 70px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}
.idea-mark { color: #91a6bb; font-size: 25px; margin-bottom: 20px; }
.idea-list { display: grid; gap: 8px; font-size: 10px; letter-spacing: .23em; color: #aab3bd; }
.idea-divider { width: 34px; height: 1px; background: #74808b; margin: 38px 0 22px; }
.idea-card small { font-size: 9px; letter-spacing: .24em; line-height: 1.8; color: #59636e; }
.idea-plus { position: absolute; right: 16px; bottom: 11px; color: #6d7883; }

.micro-card {
  position: absolute;
  left: 6.5vw;
  top: 305px;
  width: 220px;
  padding: 22px 26px;
  border: 1px solid rgba(160,177,194,.14);
  border-radius: 3px;
  background: rgba(14,17,21,.44);
  display: grid;
  gap: 7px;
  font-size: 9px;
  letter-spacing: .22em;
  color: #8a95a0;
}
.micro-card i { position: absolute; right: 20px; top: 16px; color: #8493a0; }
.micro-copy {
  position: absolute;
  left: 8.2vw;
  top: 430px;
  font-size: 8px;
  letter-spacing: .28em;
  line-height: 1.8;
  color: #424b54;
}
.quote {
  position: absolute;
  right: 7.2vw;
  top: 500px;
  font-size: 9px;
  letter-spacing: .31em;
  line-height: 1.9;
  color: #737e89;
}

.terrain {
  position: absolute;
  z-index: 1;
  left: -5vw;
  right: -5vw;
  bottom: -5px;
  height: 39vh;
  min-height: 300px;
  overflow: hidden;
}
.mountain { position: absolute; bottom: 0; background: linear-gradient(155deg, #10151b 0%, #090c10 52%, #06080b 100%); border: 1px solid rgba(145,167,189,.1); filter: drop-shadow(0 -8px 20px rgba(110,148,183,.025)); }
.m1 { left: 0; width: 44%; height: 72%; clip-path: polygon(0 100%, 14% 71%, 30% 80%, 47% 49%, 61% 64%, 79% 38%, 100% 100%); }
.m2 { left: 24%; width: 45%; height: 93%; clip-path: polygon(0 100%, 19% 68%, 35% 73%, 52% 15%, 71% 60%, 83% 51%, 100% 100%); background: linear-gradient(145deg, #131922 0%, #0b0f14 42%, #07090c 100%); }
.m3 { left: 52%; width: 40%; height: 69%; clip-path: polygon(0 100%, 13% 49%, 30% 61%, 42% 29%, 60% 72%, 73% 55%, 100% 100%); }
.m4 { right: 0; width: 37%; height: 48%; clip-path: polygon(0 100%, 18% 52%, 38% 70%, 55% 39%, 67% 57%, 82% 45%, 100% 100%); }
.peak-line { position: absolute; left: 52%; top: 7%; width: 1px; height: 31%; background: linear-gradient(#a8d0f0, rgba(168,208,240,.08)); box-shadow: 0 0 15px rgba(145,199,239,.35); }
.horizon { position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(157,182,204,.16), transparent); }

.footer {
  position: relative;
  z-index: 6;
  min-height: 84px;
  border-top: 1px solid rgba(255,255,255,.04);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 30px;
  align-items: center;
  padding: 18px 6.5vw 22px;
  color: #7f8993;
}
.footer-left { display: grid; gap: 8px; justify-self: start; }
.footer-left strong { font-size: 13px; font-weight: 500; color: #9da6af; }
.footer-left small { font-size: 7px; letter-spacing: .28em; line-height: 1.6; color: #4d5660; }
.footer-center { display: flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #66717b; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #7d9ab4; box-shadow: 0 0 10px rgba(125,154,180,.55); }
.divider { width: 1px; height: 15px; background: rgba(255,255,255,.12); }
.footer-right { justify-self: end; display: flex; gap: 36px; align-items: center; font-size: 8px; letter-spacing: .25em; line-height: 1.65; color: #4f5963; }
.footer-right i { font-size: 19px; color: #7b8792; }

@media (max-width: 1100px) {
  .nav { gap: 24px; }
  .left-rail, .idea-card, .micro-card, .micro-copy, .quote { opacity: .55; }
  .idea-card { right: 3vw; transform: scale(.88); transform-origin: top right; }
  .left-rail, .micro-card { left: 3vw; }
}

@media (max-width: 820px) {
  .topbar { padding: 0 24px; height: 72px; }
  .brand { font-size: 23px; }
  .nav span { display: none; }
  .hero { min-height: calc(100vh - 144px); }
  .hero-copy { width: calc(100vw - 38px); margin-top: 112px; }
  .eyebrow { font-size: 9px; letter-spacing: .28em; margin-bottom: 28px; }
  .hero h1 { font-size: clamp(57px, 17vw, 86px); }
  .hero h2 { margin-top: 26px; }
  .actions { margin-top: 34px; gap: 22px; }
  .primary { min-width: 168px; }
  .left-rail, .idea-card, .micro-card, .micro-copy, .quote { display: none; }
  .terrain { height: 31vh; min-height: 225px; }
  .footer { grid-template-columns: 1fr auto; padding: 18px 24px; }
  .footer-center { display: none; }
}

@media (max-width: 540px) {
  .hero-copy { margin-top: 92px; }
  .hero-copy > p { max-width: 340px; margin-inline: auto; line-height: 1.5; }
  .actions { flex-direction: column; gap: 19px; }
  .secondary { padding-bottom: 6px; }
  .footer-right span { display: none; }
}