:root {
  --forest: #123f2b;
  --leaf: #23744a;
  --lime: #ddec9c;
  --paper: #f7f7f1;
  --ink: #12231a;
  --muted: #667269;
  --line: #dce3dc;
  --white: #fff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }

.launch-page { display: grid; grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.08fr); min-height: 100svh; }
.visual { background: url("https://images.unsplash.com/photo-1610348725531-843dff563e2c?auto=format&fit=crop&w=1800&q=90") center/cover; min-height: 100svh; overflow: hidden; position: relative; }
.visual-shade { background: linear-gradient(180deg, rgba(9,30,20,.04) 48%, rgba(9,30,20,.76) 100%); inset: 0; position: absolute; }
.image-note { align-items: center; bottom: 2rem; color: var(--white); display: flex; font-size: .78rem; font-weight: 600; gap: .65rem; left: 2.25rem; letter-spacing: .06em; margin: 0; position: absolute; text-transform: uppercase; }
.image-note span { background: var(--lime); border-radius: 50%; height: 8px; width: 8px; }

.content { display: flex; flex-direction: column; min-height: 100svh; padding: 2.25rem clamp(2.5rem, 7vw, 7.5rem) 2rem; }
.desktop-brand, footer { align-items: center; display: flex; justify-content: space-between; }
.brand, .mobile-brand { align-items: center; display: inline-flex; font-size: .98rem; font-weight: 700; gap: .7rem; letter-spacing: .08em; }
.brand-mark { align-items: center; background: var(--leaf); border-radius: 50%; color: var(--white); display: inline-flex; font-family: "Playfair Display", Georgia, serif; font-size: 1.15rem; height: 42px; justify-content: center; width: 42px; }
.domain { color: var(--muted); font-size: .82rem; font-weight: 600; }

.message { margin: auto 0; max-width: 650px; padding: 4rem 0; }
.eyebrow { color: var(--leaf); font-size: .76rem; font-weight: 700; letter-spacing: .16em; margin: 0 0 1.35rem; text-transform: uppercase; }
h1 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(3.6rem, 6.5vw, 7.3rem); font-weight: 600; letter-spacing: 0; line-height: .94; margin: 0; max-width: 8ch; }
.intro { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.75; margin: 1.8rem 0 1.65rem; max-width: 520px; }
.store-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.25rem; }
.store-pills span { border: 1px solid var(--line); border-radius: 999px; color: var(--forest); font-size: .78rem; font-weight: 700; padding: .55rem .85rem; }
.contact-link { align-items: flex-start; border-top: 1px solid var(--line); display: inline-flex; flex-direction: column; gap: .35rem; max-width: 420px; padding-top: 1.15rem; }
.contact-link span { color: var(--muted); font-size: .76rem; font-weight: 600; text-transform: uppercase; }
.contact-link strong { overflow-wrap: anywhere; }
.contact-link:hover strong { color: var(--leaf); }
footer { color: var(--muted); font-size: .72rem; gap: 1rem; }
.mobile-brand { display: none; }

@media (max-width: 900px) {
  .launch-page { display: block; }
  .visual { background-position: center 48%; min-height: min(68svh, 620px); }
  .visual-shade { background: linear-gradient(180deg, rgba(8,30,19,.58) 0%, rgba(8,30,19,.02) 42%, rgba(8,30,19,.72) 100%); }
  .mobile-brand { color: var(--white); display: inline-flex; left: 1.25rem; position: absolute; top: 1.25rem; }
  .mobile-brand .brand-mark { backdrop-filter: blur(12px); background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.7); }
  .image-note { bottom: 1.4rem; left: 1.25rem; }
  .content { min-height: auto; padding: 3.3rem 1.25rem 1.6rem; }
  .desktop-brand { display: none; }
  .message { margin: 0; max-width: 680px; padding: 0 0 4rem; }
  h1 { font-size: clamp(3.2rem, 14vw, 5.8rem); }
}

@media (max-width: 520px) {
  .visual { background-image: url("https://images.unsplash.com/photo-1610348725531-843dff563e2c?auto=format&fit=crop&w=900&q=86"); min-height: 54svh; }
  .content { padding-top: 2.65rem; }
  .eyebrow { margin-bottom: 1rem; }
  h1 { font-size: clamp(3.05rem, 16vw, 4.6rem); }
  .intro { line-height: 1.65; margin-top: 1.25rem; }
  footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
  .message > * { animation: rise .7s ease both; }
  .message > :nth-child(2) { animation-delay: .08s; }
  .message > :nth-child(3) { animation-delay: .16s; }
  .message > :nth-child(4) { animation-delay: .24s; }
  .message > :nth-child(5) { animation-delay: .32s; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}