:root {
  --bg: #090d0f;
  --bg-deep: #070a0c;
  --text: #f1f1ee;
  --muted: #9aa1a5;
  --line: rgba(255,255,255,.10);
  --accent: #e6b176;
  --accent-strong: #e9ad68;
  --green: #73b953;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  transform: translateY(-160%);
  background: #fff;
  color: #111;
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  height: 78px;
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.045);
  background:
    linear-gradient(rgba(5,10,13,.73), rgba(5,10,13,.73)),
    url('/assets/roadmap-project.png') left top / auto 980px no-repeat,
    #071012;
}
.header-inner {
  width: min(calc(100% - 64px), 1180px);
  height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.brand-mascot {
  width: 42px;
  height: 38px;
  object-fit: contain;
}
.brand-wordmark {
  width: 215px;
  height: auto;
  object-fit: contain;
}
.primary-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  color: #c3c7c8;
  font-size: 13px;
  font-weight: 600;
}
.primary-nav a { transition: color .2s ease, border-color .2s ease; }
.primary-nav a:hover,
.primary-nav a.active { color: #fff; }
.sign-in {
  min-width: 96px;
  padding: 9px 18px;
  border: 1px solid rgba(230,168,95,.70);
  border-radius: 999px;
  text-align: center;
  color: #eeb97c !important;
}
.nav-toggle {
  display: none;
  padding: 8px;
  border: 0;
  background: transparent;
}
.nav-toggle > span:not(.sr-only) {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px;
  background: currentColor;
}

.hero {
  position: relative;
  height: 902px;
  overflow: hidden;
  isolation: isolate;
  background: #080a0c;
}
.hero-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url('/assets/roadmap-project.png') left -78px / auto 980px no-repeat;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(4,7,9,.25) 0%, rgba(4,7,9,.19) 42%, rgba(4,7,9,.17) 100%),
    linear-gradient(0deg, rgba(5,8,10,.16), rgba(5,8,10,.08));
}
.hero-inner {
  position: relative;
  width: min(calc(100% - 64px), 1180px);
  height: 902px;
  margin: 0 auto;
}
.hero-copy {
  position: absolute;
  top: 120px;
  left: 0;
  width: 700px;
}
.eyebrow {
  margin: 0 0 24px;
  color: #efad64;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .03em;
}
.hero h1 {
  margin: 0;
  width: 700px;
  color: #f4f3ef;
  font-size: 78px;
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 800;
}
.hero-description {
  width: 560px;
  margin: 40px 0 43px;
  color: #c4c9cb;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
}
.primary-button,
.footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-strong);
  color: #17110b;
  font-weight: 800;
  transition: transform .18s ease, filter .18s ease;
}
.primary-button {
  height: 62px;
  padding: 0 36px;
  border-radius: 12px;
  font-size: 18px;
}
.primary-button:hover,
.footer-button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.hero-mascot {
  position: absolute;
  top: 226px;
  right: 78px;
  width: 205px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,.40));
}

.create-section {
  position: relative;
  height: 839px;
  background: #090d0f;
  overflow: hidden;
}
.section-inner {
  position: relative;
  width: min(calc(100% - 192px), 1248px);
  height: 839px;
  margin: 0 auto;
}
.section-title,
.roadmap-heading {
  margin: 0;
  color: var(--accent);
  font-size: 50px;
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 790;
}
.section-title {
  position: absolute;
  top: 48px;
  left: -58px;
}
.create-description {
  position: absolute;
  top: 108px;
  left: 0;
  width: 100%;
  height: 113px;
  padding: 20px 24px;
  overflow: hidden;
  background: #0d1113;
  border: 1px solid rgba(255,255,255,.02);
}
.create-description p {
  margin: 0;
  color: #a4aaad;
  font-size: 10.5px;
  line-height: 1.48;
}
.create-gallery {
  position: absolute;
  top: 221px;
  left: 0;
  width: 100%;
  height: 618px;
}
.create-gallery figure {
  position: absolute;
  top: 0;
  height: 618px;
  margin: 0;
  overflow: hidden;
  background: #111619;
}
.create-gallery img {
  position: absolute;
  max-width: none;
  object-fit: contain;
}
.create-gallery-main {
  left: 0;
  width: 74.1%;
  border-radius: 14px 0 0 14px;
}
.create-gallery-main img {
  width: auto;
  height: 702px;
  left: -191px;
  top: -46px;
}
.create-gallery-side {
  right: 0;
  width: 31.4%;
  border-radius: 0 14px 14px 0;
  box-shadow: -22px 0 45px rgba(0,0,0,.27);
}
.create-gallery-side img {
  width: auto;
  height: 764px;
  left: -465px;
  top: -112px;
}

.roadmap-section {
  position: relative;
  height: 1040px;
  overflow: hidden;
  isolation: isolate;
  background: #070a0c;
}
.roadmap-background {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url('/assets/harbor-project.png') 157px top / auto 1040px no-repeat;
}
.roadmap-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, #070a0c 0%, #070a0c 41.25%, rgba(7,10,12,.29) 41.25%, rgba(7,10,12,.29) 100%);
}
.roadmap-inner {
  position: relative;
  width: min(calc(100% - 70px), 1370px);
  height: 1040px;
  margin: 0 auto;
}
.roadmap-heading {
  position: absolute;
  top: 47px;
  left: 0;
  font-size: 48px;
  text-transform: uppercase;
}
.roadmap-list {
  position: absolute;
  top: 88px;
  left: 0;
  width: 840px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.roadmap-row {
  height: 155px;
  display: grid;
  grid-template-columns: 85px 474px 281px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.roadmap-number {
  padding-top: 55px;
  color: #8b9194;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .14em;
}
.roadmap-copy {
  min-width: 0;
  padding: 44px 28px 0 0;
}
.roadmap-copy h3 {
  margin: 0 0 13px;
  color: #e1e2df;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 720;
}
.roadmap-copy p {
  margin: 0;
  max-width: 455px;
  color: #7b8589;
  font-size: 11px;
  line-height: 1.55;
}
.roadmap-status {
  height: 155px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 53px 42px 0 0;
  border-left: 1px solid rgba(255,255,255,.07);
  background: rgba(8,11,13,.10);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}
.status-done { color: var(--green); }
.status-active { color: #eba757; }
.status-planned { color: #778187; }

.site-footer {
  height: 241px;
  position: relative;
  overflow: hidden;
  background: #070a0c;
  border-top: 1px solid rgba(255,255,255,.045);
}
.footer-inner {
  position: relative;
  width: min(calc(100% - 120px), 1320px);
  height: 241px;
  margin: 0 auto;
}
.footer-brand-block {
  position: absolute;
  inset: 0 auto 0 0;
  width: 390px;
}
.footer-brand-row {
  position: absolute;
  top: 50px;
  left: 0;
  width: 390px;
  height: 110px;
}
.footer-mascot {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 99px;
  object-fit: contain;
}
.footer-wordmark {
  position: absolute;
  top: 24px;
  left: 123px;
  width: 205px;
  height: auto;
  object-fit: contain;
}
.footer-button {
  position: absolute;
  top: 115px;
  left: 130px;
  width: 190px;
  height: 48px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 12px;
}
.footer-meta {
  position: absolute;
  top: 43px;
  right: 0;
  width: 440px;
  display: grid;
  gap: 6px;
  color: #7c8487;
  font-size: 10px;
  line-height: 1.55;
  text-align: right;
}
.footer-meta p {
  margin: 26px 0 0;
  color: #626a6d;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible { opacity: 1; transform: none; }

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

@media (max-width: 980px) {
  .site-header { background: rgba(7,10,12,.98); }
  .header-inner { width: min(calc(100% - 36px), 1180px); }
  .nav-toggle { display: block; z-index: 3; }
  .primary-nav {
    position: fixed;
    inset: 78px 0 auto;
    min-height: calc(100vh - 78px);
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(6,9,10,.98);
    transform: translateX(100%);
    transition: transform .22s ease;
  }
  .primary-nav.open { transform: none; }
  .primary-nav a { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .sign-in { margin-top: 20px; border: 1px solid rgba(230,168,95,.7) !important; }

  .hero { height: auto; min-height: 760px; }
  .hero-image { background-position: 48% center; background-size: cover; }
  .hero-inner { width: min(calc(100% - 48px), 1180px); height: 760px; }
  .hero-copy { top: 100px; left: 0; width: min(680px, 78vw); }
  .hero h1 { width: 100%; font-size: clamp(52px, 8vw, 72px); }
  .hero-description { width: min(540px, 70vw); font-size: 15px; }
  .primary-button { height: 54px; font-size: 16px; }
  .hero-mascot { right: 16px; width: 170px; opacity: .82; }

  .create-section { height: auto; min-height: 760px; padding: 50px 0; }
  .section-inner { width: min(calc(100% - 48px), 1248px); height: auto; }
  .section-title { position: static; }
  .create-description { position: static; width: 100%; height: auto; margin-top: 18px; padding: 18px; }
  .create-description p { font-size: 11px; line-height: 1.55; }
  .create-gallery { position: static; width: 100%; height: auto; margin-top: 16px; display: grid; grid-template-columns: 1.55fr .75fr; gap: 12px; }
  .create-gallery figure { position: relative; inset: auto; width: auto; height: 460px; border-radius: 12px; }
  .create-gallery img { position: absolute; width: 100%; height: 100%; max-width: 100%; inset: 0; object-fit: cover; }

  .roadmap-section { height: auto; min-height: 930px; }
  .roadmap-background { background-position: center; background-size: cover; opacity: .52; }
  .roadmap-overlay { background: linear-gradient(90deg, rgba(6,9,11,.95), rgba(6,9,11,.72)); }
  .roadmap-inner { width: min(calc(100% - 48px), 1370px); height: auto; padding: 48px 0; }
  .roadmap-heading { position: static; }
  .roadmap-list { position: static; width: 100%; margin-top: 32px; background: rgba(6,9,11,.24); }
  .roadmap-row { height: 141px; grid-template-columns: 62px minmax(0,1fr) 210px; }
  .roadmap-number { padding-top: 34px; }
  .roadmap-copy { padding: 27px 28px 27px 0; }
  .roadmap-copy h3 { margin-bottom: 7px; }
  .roadmap-status { height: 141px; align-items: center; justify-content: flex-start; padding: 0 0 0 31px; font-size: 10px; }

  .site-footer { height: auto; min-height: 280px; padding: 35px 0; }
  .footer-inner { width: min(calc(100% - 48px), 1320px); height: auto; display: flex; justify-content: space-between; gap: 40px; }
  .footer-brand-block, .footer-brand-row, .footer-mascot, .footer-wordmark, .footer-button, .footer-meta { position: static; }
  .footer-brand-block { width: 360px; }
  .footer-brand-row { width: 360px; height: 105px; display: flex; align-items: center; gap: 14px; }
  .footer-mascot { width: 110px; height: 99px; }
  .footer-wordmark { width: 205px; }
  .footer-button { margin-left: 124px; }
  .footer-meta { width: min(440px, 42vw); padding-top: 29px; }
}

@media (max-width: 720px) {
  .brand-wordmark { width: 180px; }
  .brand-mascot { width: 37px; }
  .hero-inner { width: min(calc(100% - 32px), 1180px); }
  .hero-copy { top: 92px; width: 100%; }
  .hero h1 { font-size: clamp(46px, 13vw, 64px); }
  .hero-description { width: min(520px, 100%); margin-top: 30px; }
  .hero-mascot { top: auto; right: 20px; bottom: 55px; width: 135px; opacity: .72; }

  .create-gallery { grid-template-columns: 1fr; }
  .create-gallery figure { height: 360px; }
  .create-gallery-side { display: none; }

  .roadmap-section { min-height: 0; }
  .roadmap-inner { width: min(calc(100% - 32px), 1370px); }
  .roadmap-row {
    min-height: 132px;
    height: auto;
    grid-template-columns: 42px 1fr;
    grid-template-areas: "number copy" "number status";
    padding: 18px 0;
  }
  .roadmap-number { grid-area: number; padding-top: 10px; }
  .roadmap-copy { grid-area: copy; padding: 5px 0 12px; }
  .roadmap-status {
    grid-area: status;
    min-height: 28px;
    height: auto;
    width: fit-content;
    padding: 0 12px;
    border-left: 2px solid rgba(255,255,255,.08);
    background: rgba(5,8,9,.54);
  }

  .footer-inner { flex-direction: column; gap: 24px; }
  .footer-brand-block { min-width: 0; }
  .footer-meta { width: 100%; padding-top: 0; text-align: left; }
}

@media (max-width: 480px) {
  .header-inner { width: calc(100% - 24px); }
  .brand { gap: 9px; }
  .brand-wordmark { width: 145px; }
  .hero h1 { font-size: 46px; }
  .section-title,
  .roadmap-heading { font-size: 38px; }
  .footer-inner { width: calc(100% - 28px); }
  .footer-brand-row { gap: 8px; }
  .footer-mascot { width: 88px; }
  .footer-wordmark { width: 170px; }
  .footer-button { margin-left: 96px; }
}