:root {
  --bg:#07101f;
  --bg2:#0b1728;
  --panel:rgba(12,25,43,.78);
  --panel-strong:rgba(16,32,54,.92);
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(172,214,255,.3);
  --text:#f3f8ff;
  --muted:#9fb1c6;
  --accent:#b9dcff;
  --accent2:#77b5ff;
  --gold:#f1d49a;
  --shadow:0 30px 90px rgba(0,0,0,.38);
}

* { box-sizing:border-box; }

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

body {
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 78% 14%,rgba(48,96,157,.2),transparent 28%),
    linear-gradient(180deg,#07101f 0%,#091423 48%,#07101f 100%);
  color:var(--text);
  font-family:Inter,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
}

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

.topbar {
  position:fixed;
  z-index:50;
  top:0;
  left:0;
  right:0;
  height:76px;
  display:flex;
  align-items:center;
  gap:32px;
  padding:0 4vw;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(3,10,20,.86),rgba(3,10,20,.38));
}

.brand { display:flex; align-items:center; gap:12px; margin-right:auto; }

.brand-mark {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(255,255,255,.07);
  font-family:"Songti SC","STSong",serif;
  font-size:21px;
}

.brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.brand-copy strong { font-size:16px; letter-spacing:.14em; }
.brand-copy small { margin-top:5px; color:#91a8c1; font-size:8px; letter-spacing:.26em; }

.topnav { display:flex; align-items:center; gap:25px; color:#b8c7d8; font-size:13px; }
.topnav a { position:relative; padding:29px 0 27px; transition:.2s ease; }
.topnav a::after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:2px;
  background:var(--accent);
  transition:.25s ease;
}
.topnav a:hover,.topnav a.active { color:white; }
.topnav a.active::after { right:0; }

.login-link {
  padding:9px 17px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  font-size:12px;
}

.scroll-progress {
  position:fixed;
  z-index:60;
  top:0;
  left:0;
  right:0;
  height:2px;
  pointer-events:none;
}
.scroll-progress span {
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
  background:linear-gradient(90deg,var(--accent2),#ecf7ff);
  box-shadow:0 0 8px rgba(130,190,255,.38);
}

.journey-nav {
  position:fixed;
  z-index:35;
  right:28px;
  top:50%;
  display:flex;
  flex-direction:column;
  gap:11px;
  transform:translateY(-50%);
}

.journey-nav a {
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:8px;
  color:#688099;
  font-size:9px;
  letter-spacing:.12em;
  transition:.2s ease;
}

.journey-nav a span {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  background:rgba(5,15,28,.58);
}

.journey-nav a b { opacity:0; transform:translateX(4px); transition:.2s ease; font-weight:600; }
.journey-nav a:hover,.journey-nav a.active { color:#e8f5ff; }
.journey-nav a.active span { border-color:rgba(185,220,255,.58); background:rgba(104,169,232,.18); }
.journey-nav a.active b,.journey-nav a:hover b { opacity:1; transform:none; }

.story { position:relative; }

.screen {
  position:relative;
  min-height:100svh;
  overflow:hidden;
}

.hero {
  display:grid;
  place-items:center;
}

.hero-image {
  position:absolute;
  inset:0;
  background:url('/assets/gallery/harbor-night-01.webp') center 58% / cover no-repeat;
  transform:scale(1.01);
  will-change:transform;
}

.hero-shade {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 37%,rgba(5,18,39,.08),rgba(3,9,20,.52) 55%,rgba(3,8,17,.93) 100%),
    linear-gradient(180deg,rgba(2,7,16,.18),rgba(3,10,19,.36) 48%,#07101f 100%);
}

.stars { position:absolute; inset:0; pointer-events:none; }
.stars i {
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:white;
  box-shadow:0 0 12px rgba(255,255,255,.9);
  opacity:.72;
}
.stars i:nth-child(1){left:15%;top:23%}
.stars i:nth-child(2){left:23%;top:36%;width:2px;height:2px}
.stars i:nth-child(3){right:18%;top:21%;width:2px;height:2px}
.stars i:nth-child(4){right:27%;top:39%}
.stars i:nth-child(5){left:34%;top:18%;width:2px;height:2px}
.stars i:nth-child(6){right:36%;top:13%;width:2px;height:2px}

.hero-content {
  position:relative;
  z-index:3;
  width:min(900px,88vw);
  padding-top:44px;
  text-align:center;
}

.moon-logo { position:relative; width:108px; height:108px; margin:0 auto 22px; }
.crescent {
  position:absolute;
  left:20px;
  top:10px;
  width:68px;
  height:80px;
  border-radius:50%;
  box-shadow:-18px 5px 0 1px #eaf5ff;
  transform:rotate(18deg);
}
.moon-star { position:absolute; right:2px; top:13px; color:#fff7d8; font-size:24px; text-shadow:0 0 20px rgba(255,235,169,.7); }
.string { position:absolute; display:block; height:1px; background:linear-gradient(90deg,transparent,rgba(217,237,255,.9),transparent); transform-origin:left center; }
.s1{width:74px;left:24px;top:43px;transform:rotate(-17deg)}
.s2{width:70px;left:25px;top:53px;transform:rotate(-14deg)}
.s3{width:65px;left:28px;top:63px;transform:rotate(-10deg)}
.s4{width:57px;left:31px;top:72px;transform:rotate(-6deg)}

.eyebrow {
  margin:0 0 12px;
  color:#a9c8e8;
  font-size:10px;
  font-weight:700;
  letter-spacing:.31em;
  text-transform:uppercase;
}

.hero h1 {
  margin:0;
  font-family:"Songti SC","STSong","Microsoft YaHei",serif;
  font-size:clamp(58px,9vw,106px);
  font-weight:500;
  letter-spacing:.22em;
  text-indent:.22em;
  text-shadow:0 5px 28px rgba(0,0,0,.35);
}

.slogan {
  margin:20px 0 0;
  font-family:"Songti SC","STSong",serif;
  font-size:clamp(18px,2vw,24px);
  letter-spacing:.18em;
}
.hero-desc { margin:16px auto 0; max-width:630px; color:#bdc9d8; font-size:14px; line-height:1.8; }

.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:11px; margin-top:30px; }
.button {
  min-width:150px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:999px;
  transition:.2s ease;
}
.button.primary { color:#07101f; background:#eaf5ff; }
.button.glass { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); }
.button:hover { transform:translateY(-2px); }

.hero-tags { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:27px; color:#9eb0c3; font-size:11px; letter-spacing:.18em; }
.hero-tags b { color:#607992; }

.scroll-hint,.next-step {
  position:absolute;
  z-index:8;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  color:#8299b2;
  font-size:9px;
  letter-spacing:.17em;
  white-space:nowrap;
}

.scroll-hint { display:flex; flex-direction:column; align-items:center; }
.scroll-hint b { margin-top:1px; font-size:20px; font-weight:400; }

.step-screen {
  display:grid;
  align-items:center;
  padding:96px 7vw 64px;
  background:
    radial-gradient(circle at var(--glow-x,18%) 42%,rgba(55,109,174,.14),transparent 29%),
    linear-gradient(180deg,#07101f,#091423 50%,#07101f);
}

.step-screen::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(177,216,255,.18) 18%,rgba(177,216,255,.18) 82%,transparent);
  opacity:.75;
}

.step-left { --glow-x:20%; }
.step-right { --glow-x:80%; }
.step-left::after { left:10vw; }
.step-right::after { right:10vw; }

.step-number {
  position:absolute;
  z-index:2;
  top:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:#607c99;
  transform:translateY(-50%);
}
.step-left .step-number { left:calc(10vw - 24px); }
.step-right .step-number { right:calc(10vw - 24px); }

.step-number span {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(176,217,255,.24);
  border-radius:50%;
  color:#c6def5;
  background:#081421;
  font-size:11px;
  letter-spacing:.1em;
}
.step-number b { writing-mode:vertical-rl; color:#55708d; font-size:8px; letter-spacing:.24em; }

.step-shell {
  position:relative;
  z-index:3;
  width:min(1040px,78vw);
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:52px;
  align-items:center;
  padding:42px 46px;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    radial-gradient(circle at 85% 5%,rgba(105,170,235,.11),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.067),rgba(255,255,255,.022));
  box-shadow:0 18px 48px rgba(0,0,0,.24);
}

.step-left .step-shell { justify-self:start; margin-left:5vw; }
.step-right .step-shell { justify-self:end; margin-right:5vw; }

.step-copy h2 {
  margin:0;
  max-width:560px;
  font-size:clamp(31px,4vw,54px);
  line-height:1.08;
  letter-spacing:-.045em;
  font-weight:600;
}
.lead { margin:18px 0 0; color:var(--muted); font-size:14px; line-height:1.85; }

.pillar-list { display:grid; gap:9px; }
.pillar-list article {
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}
.pillar-list article:nth-child(2) { margin-left:22px; }
.pillar-list article:nth-child(3) { margin-left:44px; }
.pillar-list span,.tool-card small,.build-links small,.arrival-card small {
  color:#7696b6;
  font-size:8px;
  font-weight:700;
  letter-spacing:.18em;
}
.pillar-list h3 { margin:8px 0 6px; font-size:18px; }
.pillar-list p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }

.tool-grid { display:grid; gap:10px; }
.tool-card {
  display:grid;
  grid-template-columns:54px 1fr 24px;
  gap:17px;
  align-items:center;
  padding:18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:rgba(255,255,255,.035);
  transition:.22s ease;
}
.tool-card:nth-child(2) { margin-left:24px; }
.tool-card:nth-child(3) { margin-left:48px; }
.tool-card:hover,.build-links a:hover,.arrival-card:hover {
  border-color:var(--line-strong);
  background:rgba(123,183,239,.09);
  transform:translateY(-2px);
}
.tool-code {
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(170,214,255,.15);
  border-radius:15px;
  color:#d9ecff;
  background:rgba(120,183,242,.07);
  font-size:10px;
  font-weight:800;
}
.tool-card h3,.build-links h3,.arrival-card h3 { margin:5px 0 5px; font-size:18px; }
.tool-card p,.build-links p,.arrival-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.tool-card > b,.build-links > a > b { color:#7993ad; font-weight:400; }

.build-links { display:grid; gap:10px; }
.build-links a {
  display:grid;
  grid-template-columns:34px 1fr 24px;
  gap:16px;
  align-items:center;
  padding:19px 20px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:rgba(255,255,255,.035);
  transition:.22s ease;
}
.build-links a:nth-child(2) { margin-left:24px; }
.build-links a:nth-child(3) { margin-left:48px; }
.build-links > a > span { color:#6f8cab; font-size:10px; letter-spacing:.12em; }

.gallery-screen .step-shell { grid-template-columns:.55fr 1.45fr; width:min(1160px,82vw); }
.gallery-grid {
  display:grid;
  grid-template-columns:1.45fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  height:min(56vh,540px);
}
.gallery-grid figure {
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#0a1422;
}
.gallery-grid .gallery-main { grid-row:1 / 3; }
.gallery-grid img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .6s ease; }
.gallery-grid figure:hover img { transform:scale(1.025); }
.gallery-grid figure::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 44%,rgba(2,8,17,.84)); }
.gallery-grid figcaption { position:absolute; z-index:2; left:18px; right:18px; bottom:16px; display:flex; flex-direction:column; }
.gallery-grid figcaption small { color:#9fb5cc; font-size:8px; letter-spacing:.24em; }
.gallery-grid figcaption strong { margin-top:5px; font-size:17px; }

.final-screen { padding-bottom:120px; }
.arrival-grid { display:grid; gap:10px; }
.arrival-card {
  display:block;
  padding:19px 21px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:rgba(255,255,255,.035);
  transition:.22s ease;
}
.arrival-card:nth-child(2) { margin-left:24px; }
.arrival-card:nth-child(3) { margin-left:48px; }
.arrival-card span { display:inline-block; margin-top:12px; color:#cfe6fb; font-size:11px; }
.primary-arrival { border-color:rgba(150,207,255,.25); }
.admin-arrival { border-color:rgba(220,181,100,.18); }
.final-screen blockquote {
  grid-column:1 / -1;
  margin:18px 0 0;
  padding:17px 0 0;
  border-top:1px solid var(--line);
  color:#b7c9db;
  font-family:"Songti SC","STSong",serif;
  letter-spacing:.14em;
  text-align:center;
}

footer {
  position:absolute;
  left:7vw;
  right:7vw;
  bottom:24px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#748ba3;
  font-size:10px;
}
footer > div { display:flex; align-items:baseline; gap:12px; }
footer strong { color:#d8e8f7; font-size:16px; letter-spacing:.15em; }
footer span { font-size:8px; letter-spacing:.22em; }

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

.toast {
  position:fixed;
  z-index:100;
  left:50%;
  bottom:28px;
  max-width:min(420px,88vw);
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:white;
  background:rgba(5,14,27,.9);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,15px);
  transition:.22s ease;
  font-size:13px;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-height:760px) and (min-width:901px) {
  .step-shell { padding:28px 34px; gap:34px; }
  .step-copy h2 { font-size:38px; }
  .pillar-list article,.tool-card,.build-links a,.arrival-card { padding-top:14px; padding-bottom:14px; }
  .gallery-grid { height:48vh; }
}

@media (max-width:900px) {
  .topbar { height:68px; padding:0 18px; }
  .topnav,.journey-nav { display:none; }
  .brand-copy small { display:none; }
  .login-link { padding:8px 13px; }

  .hero-content { padding-top:60px; }
  .hero h1 { font-size:58px; }
  .slogan { line-height:1.75; }

  .step-screen {
    min-height:auto;
    padding:104px 20px 76px;
    overflow:visible;
  }
  .step-screen::after,.step-number { display:none; }

  .step-shell,
  .gallery-screen .step-shell {
    width:100%;
    margin:0 !important;
    grid-template-columns:1fr;
    gap:28px;
    padding:28px 22px;
    border-radius:22px;
  }

  .pillar-list article:nth-child(2),
  .pillar-list article:nth-child(3),
  .tool-card:nth-child(2),
  .tool-card:nth-child(3),
  .build-links a:nth-child(2),
  .build-links a:nth-child(3),
  .arrival-card:nth-child(2),
  .arrival-card:nth-child(3) { margin-left:0; }

  .gallery-grid {
    height:auto;
    grid-template-columns:1fr;
    grid-template-rows:none;
  }
  .gallery-grid .gallery-main { grid-row:auto; height:360px; }
  .gallery-grid figure { height:230px; }

  .next-step { bottom:30px; }
  .final-screen { padding-bottom:145px; }

  footer {
    left:20px;
    right:20px;
    bottom:24px;
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
  }
}

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


/* v0.14.6 performance hotfix */
.screen {
}
.step-shell,
.gallery-grid figure,
.tool-card,
.build-links a,
.arrival-card,
.pillar-list article {
  isolation:isolate;
}
@media (max-width:900px) {
  .screen {
  }
}


/* v0.14.6 homepage UX readability + reliable navigation */
html {
  scroll-behavior: auto !important;
}

body {
  overscroll-behavior-y: auto;
}

.screen {
  contain: none !important;
}

.scroll-hint,
.next-step {
  min-height: 46px;
  min-width: 168px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(190, 222, 255, .22);
  border-radius: 999px;
  background: rgba(7, 18, 33, .88);
  color: #d9eafd;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .20);
  cursor: pointer;
  user-select: none;
}

.scroll-hint:hover,
.next-step:hover {
  border-color: rgba(190, 222, 255, .48);
  background: rgba(20, 42, 67, .94);
}

.scroll-hint {
  flex-direction: row !important;
  bottom: 22px !important;
}

.scroll-hint b {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1;
}

.next-step {
  bottom: 20px !important;
}

.eyebrow {
  font-size: 12px !important;
}

.pillar-list span,
.tool-card small,
.build-links small,
.arrival-card small {
  font-size: 10px !important;
  line-height: 1.35;
}

.gallery-grid figcaption small {
  font-size: 10px !important;
}

.journey-nav {
  gap: 10px;
}

.journey-nav a {
  min-height: 38px;
  grid-template-columns: 36px 1fr !important;
  gap: 9px !important;
  font-size: 11px !important;
}

.journey-nav a span {
  width: 36px !important;
  height: 36px !important;
  font-size: 10px;
}

.journey-nav a b {
  opacity: .72;
  font-size: 10px;
  white-space: nowrap;
}

footer {
  font-size: 11px !important;
}

footer span {
  font-size: 9px !important;
}

@media (max-width: 900px) {
  .screen {
  }

  .scroll-hint,
  .next-step {
    min-height: 48px;
    min-width: 176px;
    font-size: 14px !important;
    padding: 11px 19px;
  }

  .next-step {
    bottom: 22px !important;
  }
}


/* v0.14.6 final homepage alignment fix */
html {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

body {
  overscroll-behavior-y: auto;
}

.screen {
  min-height: 100svh;
  scroll-snap-align: none !important;
  scroll-margin: 0 !important;
}

/* Hero proportions */
.hero-content {
  width: min(780px, 88vw) !important;
  padding-top: 46px !important;
}

.moon-logo {
  width: 94px !important;
  height: 94px !important;
  margin-bottom: 16px !important;
  transform: scale(.90);
}

.hero h1 {
  font-size: clamp(62px, 7vw, 90px) !important;
  letter-spacing: .085em !important;
  text-indent: .085em !important;
  line-height: 1.02 !important;
}

.slogan {
  margin-top: 16px !important;
  font-size: clamp(18px, 1.65vw, 22px) !important;
  letter-spacing: .085em !important;
}

.hero-desc {
  margin-top: 12px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.hero-actions {
  margin-top: 24px !important;
}

.hero-tags {
  margin-top: 20px !important;
  font-size: 12px !important;
}

/* Bottom navigation: real button + CSS chevron, no text v/⌄ glyph */
.scroll-hint,
.next-step {
  min-height: 44px !important;
  min-width: 150px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 10px !important;
  padding: 9px 17px !important;
  border: 1px solid rgba(184, 217, 251, .22) !important;
  border-radius: 999px !important;
  background: rgba(5, 15, 28, .82) !important;
  color: #d2e3f4 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  box-shadow: none !important;
}

.scroll-hint {
  bottom: 18px !important;
}

.next-step {
  bottom: 18px !important;
}

.down-chevron {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex: 0 0 8px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .95;
}

.scroll-hint:hover,
.next-step:hover {
  color: #fff !important;
  border-color: rgba(190, 222, 255, .45) !important;
  background: rgba(16, 35, 57, .94) !important;
}

/* Right journey rail is secondary */
.journey-nav {
  right: 22px !important;
}

.journey-nav a {
  min-height: 36px !important;
  grid-template-columns: 34px auto !important;
  gap: 8px !important;
  font-size: 10px !important;
}

.journey-nav a span {
  width: 34px !important;
  height: 34px !important;
}

.journey-nav a b {
  opacity: .45 !important;
}

.journey-nav a.active b,
.journey-nav a:hover b {
  opacity: 1 !important;
}

/* Keep each category visually centered */
.step-screen {
  align-items: center !important;
  padding-top: 86px !important;
  padding-bottom: 72px !important;
}

.topbar {
  z-index: 80 !important;
}

@media (max-width: 900px) {
  .hero-content {
    padding-top: 72px !important;
  }

  .hero h1 {
    font-size: clamp(52px, 15vw, 70px) !important;
    letter-spacing: .07em !important;
    text-indent: .07em !important;
  }

  .scroll-hint,
  .next-step {
    min-height: 46px !important;
    min-width: 160px !important;
    font-size: 13px !important;
  }
}


/* v0.14.6 homepage hero polish */

.stars {
  display: none !important;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 39%, rgba(27, 54, 83, .08), transparent 33%),
    linear-gradient(180deg, rgba(2, 8, 17, .06) 0%, rgba(3, 10, 20, .16) 48%, rgba(3, 9, 18, .54) 100%);
}

.hero-content {
  z-index: 4 !important;
  width: min(760px, 86vw) !important;
  padding-top: 34px !important;
  transform: translateY(-4px);
}

.moon-logo {
  width: 116px !important;
  height: 88px !important;
  margin: 0 auto 18px !important;
  transform: none !important;
}

.crescent {
  left: 15px !important;
  top: 7px !important;
  width: 54px !important;
  height: 66px !important;
  box-shadow: -14px 4px 0 0 #eef7ff !important;
  transform: rotate(16deg) !important;
  filter: none !important;
}

.moon-star {
  position: absolute !important;
  right: 7px !important;
  top: 10px !important;
  width: 16px !important;
  height: 16px !important;
  color: transparent !important;
  text-shadow: none !important;
  background: transparent !important;
  transform: rotate(45deg);
}

.moon-star::before,
.moon-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: #f6edcf;
  box-shadow: 0 0 8px rgba(246, 237, 207, .32);
  transform: translate(-50%, -50%);
}

.moon-star::before {
  width: 3px;
  height: 16px;
}

.moon-star::after {
  width: 16px;
  height: 3px;
}

.string {
  height: 1px !important;
  opacity: .78;
  background: linear-gradient(90deg, rgba(211, 231, 249, .14), rgba(211, 231, 249, .78)) !important;
  transform-origin: left center !important;
}

.s1 {
  width: 70px !important;
  left: 43px !important;
  top: 29px !important;
  transform: rotate(-14deg) !important;
}

.s2 {
  width: 68px !important;
  left: 42px !important;
  top: 38px !important;
  transform: rotate(-10deg) !important;
}

.s3 {
  width: 64px !important;
  left: 41px !important;
  top: 47px !important;
  transform: rotate(-6deg) !important;
}

.s4 {
  width: 59px !important;
  left: 40px !important;
  top: 56px !important;
  transform: rotate(-2deg) !important;
}

.hero .eyebrow {
  margin-bottom: 14px !important;
  color: #b7cbe0 !important;
  font-size: 11px !important;
  letter-spacing: .27em !important;
}

.hero h1 {
  margin: 0 !important;
  font-size: clamp(66px, 6.7vw, 88px) !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
  text-indent: .07em !important;
  font-weight: 500 !important;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .28) !important;
}

.slogan {
  margin-top: 18px !important;
  font-size: clamp(18px, 1.55vw, 21px) !important;
  line-height: 1.45 !important;
  letter-spacing: .07em !important;
  color: #f1f5fa !important;
}

.hero-desc {
  max-width: 560px !important;
  margin-top: 12px !important;
  color: #b9c5d3 !important;
  font-size: 14px !important;
}

.hero-actions {
  margin-top: 25px !important;
  gap: 12px !important;
}

.hero-actions .button {
  min-width: 156px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
}

.hero-tags {
  margin-top: 20px !important;
  color: #9db0c4 !important;
  font-size: 11px !important;
  letter-spacing: .13em !important;
}

.hero .scroll-hint {
  min-width: 142px !important;
  min-height: 42px !important;
  bottom: 18px !important;
  border-color: rgba(187, 218, 247, .16) !important;
  background: rgba(5, 15, 28, .56) !important;
  color: #c4d5e7 !important;
  font-size: 12px !important;
}

.hero .scroll-hint:hover {
  border-color: rgba(187, 218, 247, .36) !important;
  background: rgba(12, 30, 49, .82) !important;
  color: #fff !important;
}

.journey-nav {
  opacity: .66;
  transition: opacity .2s ease;
}

.journey-nav:hover {
  opacity: 1;
}

@media (max-width: 900px) {
  .hero-content {
    width: min(92vw, 660px) !important;
    padding-top: 66px !important;
    transform: none;
  }

  .moon-logo {
    width: 108px !important;
    height: 82px !important;
  }

  .hero h1 {
    font-size: clamp(56px, 15vw, 72px) !important;
    letter-spacing: .055em !important;
    text-indent: .055em !important;
  }

  .slogan {
    font-size: 17px !important;
  }
}