:root {
  --amber: #d8b16c;
  --rose: #d87891;
  --night: #080b09;
  --night-soft: #10261f;
  --emerald: #2d775f;
}
body {
  background: radial-gradient(circle at 8% 15%, #d7a85b12, transparent 24rem),
    radial-gradient(circle at 92% 45%, #6f938718, transparent 28rem), #faf8f1;
}
.topbar {
  height: 82px;
  padding: 0 clamp(18px, 4vw, 58px);
  background: #080b09f2;
  border-bottom: 1px solid #d8b16c3d;
  backdrop-filter: blur(18px);
}
.brand img { object-fit: cover; background: #080b09; border: 1px solid #d8b16c52; }
.brand b { color: #e7c889; font-family: Georgia, serif; font-weight: 500; letter-spacing: .14em; }
.brand small { color: #b9c6c0; }
.topbar nav { display: flex; gap: 8px; }
.landing {
  min-height: min(780px, calc(100vh - 82px));
  background: linear-gradient(90deg, #070908fa 0%, #070908e8 37%, #07090828 70%),
    url("assets/deck-social-night.jpg") 72% 42% / cover no-repeat;
}
.overlay {
  margin-left: clamp(24px, 6vw, 100px);
  width: min(680px, calc(100% - 48px));
  max-width: none;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid #ffffff1f;
  background: linear-gradient(145deg, #071b17d9, #16382f9e);
  box-shadow: 0 30px 90px #00000059;
}
.overlay h1 {
  max-width: 650px;
  font-size: clamp(3.2rem, 6.4vw, 6.5rem);
  letter-spacing: -.045em;
}
.overlay h1 em { color: #e8c88c; font-weight: 500; }
.overlay p {
  max-width: 600px;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions .primary {
  background: linear-gradient(135deg, #e0b568, #c99049);
  color: #10251f;
}
.hero-actions .secondary {
  background: #ffffff0f;
  border-color: #ffffff45;
  color: #fff;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
  color: #e7efe9c9;
  font-size: .82rem;
}
.brand-story {
  width: min(1180px, calc(100% - 32px));
  margin: clamp(30px, 6vw, 74px) auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  overflow: hidden;
  border: 1px solid #d8b16c3a;
  border-radius: 28px;
  background: #0b100e;
  color: #fff;
  box-shadow: 0 28px 80px #14241d24;
}
.brand-story-photo { min-height: 430px; overflow: hidden; }
.brand-story-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand-story-copy { min-width: 0; align-self: center; padding: clamp(28px, 4vw, 54px); }
.brand-story-copy h2 {
  margin: 10px 0 16px;
  font-family: Georgia, serif;
  font-size: clamp(2rem, 3.4vw, 3.15rem);
  line-height: 1.03;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.brand-story-copy p { max-width: 530px; color: #c9d2ce; line-height: 1.7; }
.story-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 28px; }
.story-steps span { padding-top: 12px; border-top: 1px solid #d8b16c5c; color: #eef2ef; font-size: .82rem; }
.story-steps b { display: block; margin-bottom: 4px; color: var(--rose); font-size: .68rem; letter-spacing: .12em; }
.journey-intro {
  margin: 20px 0 14px;
  padding: 20px 24px;
  border-left: 3px solid var(--amber);
  background: linear-gradient(90deg, #fff8e9, transparent);
}
.journey-intro h3, .journey-intro p { margin: 4px 0; }
.journey-intro p { color: var(--muted); }
.journey-kicker {
  color: #9a6b2c;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .16em;
}
.stepper { gap: 10px; }
.step {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #d7e4df;
  background: #fff;
  box-shadow: 0 8px 24px #143b320a;
}
.step.active {
  border-color: #a8d7c3;
  background: linear-gradient(145deg, #dff3ea, #f5fbf8);
}
.step-icon {
  width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--night-soft);
  color: #f0ca89;
  font-size: 1.25rem;
}
.step small {
  display: block;
  margin-bottom: 2px;
  color: #789087;
  font-size: .62rem;
  letter-spacing: .12em;
}
.card {
  border-color: #d7e4df;
  box-shadow: 0 18px 55px #102c250d;
}
.action, .reward {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.action:hover, .reward:hover {
  transform: translateY(-3px);
  border-color: #b6d2c7;
  box-shadow: 0 16px 38px #143b3214;
}
.action img {
  padding: 7px;
  background: #fff;
  box-shadow: 0 6px 18px #143b3212;
}
.restoration-story {
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(0deg, #061713e8 0%, #0617132e 65%),
    url("assets/restoration-journey-v2.png") center / cover no-repeat;
}
.restoration-copy {
  max-width: 670px;
  padding: clamp(24px, 5vw, 48px);
  color: #fff;
}
.restoration-copy h3 {
  margin: 8px 0;
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 500;
}
.restoration-copy p { color: #e4eee9; line-height: 1.65; }
@media (max-width: 800px) {
  .landing {
    min-height: 720px;
    align-items: flex-end;
    background-position: 38% center;
  }
  .overlay { margin: 16px; width: calc(100% - 32px); }
  .brand-story { grid-template-columns: 1fr; }
  .brand-story-photo { min-height: 300px; }
  .stepper { grid-template-columns: 1fr 1fr; }
  .step:last-child { grid-column: 1 / -1; }
  .restoration-story { min-height: 500px; background-position: 58% center; }
}
@media (max-width: 500px) {
  .topbar { height: 74px; padding: 0 12px; }
  .brand small { display: none; }
  .brand img { width: 38px; height: 38px; }
  .ghost { padding: 9px 10px; }
  .overlay h1 { font-size: 3.1rem; }
  .hero-actions > button { width: 100%; }
  .hero-trust { gap: 9px 14px; }
  .stepper { grid-template-columns: 1fr; }
  .step:last-child { grid-column: auto; }
  .restoration-story { min-height: 540px; }
  .brand-story { width: calc(100% - 22px); border-radius: 22px; }
  .brand-story-photo { min-height: 240px; }
  .story-steps { grid-template-columns: 1fr 1fr; }
}