/* Skywritten — dark luxury-observatory design system. One theme, one gold accent. */
:root {
  --bg:        #070a14;
  --bg-2:      #0b1020;
  --surface:   #111726;
  --surface-2: #161d30;
  --line:      rgba(232, 194, 122, 0.14);
  --hair:      rgba(255, 255, 255, 0.08);
  --ink:       #f2ede1;
  --ink-2:     #aeb4c6;
  --ink-3:     #767d92;
  --gold:      #e8c27a;
  --gold-2:    #d9ad5c;
  --gold-soft: rgba(232, 194, 122, 0.12);
  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1200px;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --serif:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:      'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.02; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.muted { color: var(--ink-2); }
.serif { font-family: var(--serif); }

/* ---- starfield backdrop (rendered by engine, ambient) ---- */
#starfield {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.3;
}
#starfield svg { width: 140vw; height: 140vh; position: absolute; top: -20vh; left: -20vw; }
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer { position: relative; z-index: 1; }

/* ---- nav ---- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(7,10,20,0.86), rgba(7,10,20,0.55));
  border-bottom: 1px solid var(--hair);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--serif);
  font-size: 25px; font-weight: 600; letter-spacing: 0.01em; }
.brand .mark { width: 26px; height: 26px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 14.5px; color: var(--ink-2); transition: color .25s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a.btn-gold, .nav-links a.btn-gold:hover { color: #201704; }
.btn {
  font-family: var(--sans); font-size: 15px; font-weight: 500; cursor: pointer;
  border: none; border-radius: 999px; padding: 12px 26px; transition: transform .18s var(--ease), box-shadow .25s var(--ease);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.btn-gold { background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #201704;
  box-shadow: 0 8px 30px rgba(232,194,122,0.22); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(232,194,122,0.32); }
.btn-gold:active { transform: translateY(0) scale(0.98); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--gold-soft); border-color: var(--gold); }
.btn-lg { padding: 16px 34px; font-size: 16.5px; }
.nav-links .btn { padding: 10px 22px; }

/* ---- hero ---- */
.hero { min-height: calc(100dvh - 70px); display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; gap: 48px; padding: 24px 0 56px; }
.hero-copy { max-width: 560px; }
.hero h1 { font-size: clamp(46px, 5.4vw, 78px); letter-spacing: -0.01em; margin: 20px 0 22px; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero p.lede { font-size: 20px; color: var(--ink-2); max-width: 33ch; line-height: 1.5; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust { margin-top: 26px; font-size: 14px; color: var(--ink-3); display: flex;
  gap: 20px; flex-wrap: wrap; align-items: center; }
.hero-trust b { color: var(--ink-2); font-weight: 500; }

.hero-poster { justify-self: center; position: relative; }
.poster-frame {
  width: min(400px, 82vw); aspect-ratio: 3/4; border-radius: 6px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px var(--hair), 0 0 0 12px #0d1220, 0 0 0 13px var(--line);
  background: var(--bg-2);
}
.poster-frame svg { width: 100%; height: 100%; }
.poster-float { animation: floatyStraight 7s var(--ease) infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-14px) rotate(-1.2deg); } }
@keyframes floatyStraight { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---- sections ---- */
section { padding: 96px 0; }
/* Most sections carry BOTH `section` and `.wrap`, and `.wrap`'s `padding: 0 24px`
   outranks the element selector above — so the intended vertical rhythm was
   being silently zeroed and sections butted straight into each other (a CTA
   ended up flush against the next section's image on mobile). Restore it with
   matching specificity. `.hero` sets its own padding and is excluded. */
section.wrap:not(.hero) { padding-top: 96px; padding-bottom: 96px; }
.section-head { max-width: 620px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(38px, 4.6vw, 58px); margin: 14px 0 16px; }
.section-head p { font-size: 18px; color: var(--ink-2); }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* how it works — vertical stepped, not 3 equal cards */
.steps { display: grid; gap: 2px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--hair); }
.step { display: grid; grid-template-columns: 88px 1fr; gap: 24px; align-items: center;
  padding: 34px 32px; background: var(--surface); transition: background .3s var(--ease); }
.step:hover { background: var(--surface-2); }
.step .num { font-family: var(--serif); font-size: 54px; color: var(--gold);
  font-style: italic; line-height: 1; }
.step h3 { font-size: 26px; margin-bottom: 7px; }
.step p { color: var(--ink-2); font-size: 16px; max-width: 62ch; }

/* styles gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.style-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 16px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.style-card:hover { transform: translateY(-6px); border-color: var(--line); }
.style-card .thumb { aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.style-card .thumb svg { width: 100%; height: 100%; }
.style-card .label { display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding: 0 4px; }
.style-card .label span { font-family: var(--serif); font-size: 21px; }
.style-card .label small { color: var(--ink-3); font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; }

/* ---- generator studio ---- */
.studio { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair); }
.studio-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 48px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 26px; position: sticky; top: 92px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-2);
  margin-bottom: 7px; font-weight: 500; }
.field input, .field select {
  width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  color: var(--ink); font-family: var(--sans); font-size: 15px; padding: 12px 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input:focus, .field select:focus { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft); }
.field input::placeholder { color: var(--ink-3); }
/* iOS renders native date/time controls at their own intrinsic width, ignoring
   width:100% — the box spills to the screen edge. Neutralise the native appearance
   so they size exactly like the text fields (tapping still opens the iOS picker). */
.field input[type="date"], .field input[type="time"] {
  -webkit-appearance: none; appearance: none; max-width: 100%; }
/* iOS Safari right-aligns the value inside date/time inputs by default — force it
   left so it matches every other field */
.field input[type="date"]::-webkit-date-and-time-value,
.field input[type="time"]::-webkit-date-and-time-value { text-align: left; }
/* Date + time are always stacked full-width — side-by-side native pickers overflow
   and merge on iOS at every screen size, not just phones */
.field .row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.geo-results { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--hair);
  border-radius: var(--radius-sm); overflow: hidden; display: none; }
.geo-results.show { display: block; }
.geo-results li { padding: 10px 14px; font-size: 14px; cursor: pointer; color: var(--ink-2);
  border-top: 1px solid var(--hair); }
.geo-results li:first-child { border-top: none; }
.geo-results li:hover { background: var(--surface-2); color: var(--ink); }
.style-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.style-pill { flex: 1; min-width: 70px; text-align: center; padding: 9px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--hair); background: var(--bg); font-size: 13.5px; cursor: pointer;
  color: var(--ink-2); transition: all .2s var(--ease); }
.style-pill.active { border-color: var(--gold); color: var(--ink); background: var(--gold-soft); }

/* watermarked preview bitmap (locked state) */
.preview-img { width: 100%; height: 100%; object-fit: contain; display: block;
  user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }

/* ---- room gallery ---- */
.gal { position: relative; max-width: 980px; margin: 0 auto; }
.gal-viewport { overflow: hidden; border-radius: var(--radius); background: var(--bg-2);
  border: 1px solid var(--hair); box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.gal-track { display: flex; will-change: transform;
  transition: transform .62s var(--ease); touch-action: pan-y; cursor: grab; }
.gal-track.dragging { transition: none; cursor: grabbing; }
.gal-slide { flex: 0 0 100%; position: relative; aspect-ratio: 1 / 1; background: var(--bg-2); }
.gal-slide img { width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .45s var(--ease); -webkit-user-drag: none; user-select: none; }
.gal-slide img.loaded { opacity: 1; }

.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(7,10,20,.62); color: var(--ink); border: 1px solid var(--line);
  backdrop-filter: blur(8px); cursor: pointer; transition: background .25s var(--ease); }
.gal-nav:hover { background: rgba(7,10,20,.86); border-color: var(--gold); }
.gal-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gal-nav.prev { left: 14px; }
.gal-nav.next { right: 14px; }

.gal-caption { text-align: center; margin-top: 20px; min-height: 52px; }
.gal-caption b { display: block; font-family: var(--serif); font-size: 22px;
  font-weight: 600; color: var(--ink); }
.gal-caption span { font-size: 14.5px; color: var(--ink-3); }

.gal-dots { display: flex; gap: 9px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.gal-dot { width: 8px; height: 8px; border-radius: 50%; padding: 0; cursor: pointer;
  border: none; background: rgba(255,255,255,.22); transition: all .3s var(--ease); }
.gal-dot[aria-selected="true"] { background: var(--gold); width: 26px; border-radius: 4px; }
.gal-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 700px) {
  .gal-nav { width: 38px; height: 38px; }
  .gal-nav.prev { left: 8px; }
  .gal-nav.next { right: 8px; }
  .gal-caption b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-track { transition: none; }
  .gal-slide img { transition: none; }
}

/* hero secondary link to the couple's poster */
.hero-alt { margin-top: 16px; font-size: 15px; }
.hero-alt a { color: var(--gold); border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease); }
.hero-alt a:hover { border-bottom-color: var(--gold); }

/* couple's poster promo — asymmetric, copy left, sample right */
.duo-promo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.duo-promo h2 { font-size: clamp(34px, 4vw, 50px); margin: 14px 0 16px; }
.duo-promo p { color: var(--ink-2); font-size: 17.5px; max-width: 54ch; }
.duo-promo .hero-cta { margin-top: 30px; }
.duo-promo .poster-frame { width: min(360px, 82vw); justify-self: center; }
@media (max-width: 900px) {
  .duo-promo { grid-template-columns: 1fr; gap: 36px; }
  .duo-promo .poster-frame { order: -1; }
}

/* single / couple mode switch */
.mode-pills { display: flex; gap: 8px; }
.mode-pill { flex: 1; text-align: center; padding: 11px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--hair); background: var(--bg); font-size: 13.5px; cursor: pointer;
  color: var(--ink-2); transition: all .2s var(--ease); }
.mode-pill:hover { color: var(--ink); }
.mode-pill.active { border-color: var(--gold); color: var(--ink); background: var(--gold-soft); }
/* section label separating the two skies in couple mode */
.sky-head { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
  border-top: 1px solid var(--hair); padding-top: 16px; }
.toggles { display: flex; gap: 18px; margin-bottom: 20px; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2);
  cursor: pointer; }
.toggle input { width: auto; accent-color: var(--gold); }

.preview-stage { position: relative; }
.preview-poster { width: min(460px, 100%); margin: 0 auto; aspect-ratio: 3/4;
  border-radius: 6px; overflow: hidden; background: var(--bg-2);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 0 1px var(--hair), 0 0 0 10px #0d1220, 0 0 0 11px var(--line); }
.preview-poster svg { width: 100%; height: 100%; }
.preview-actions { max-width: min(460px, 100%); margin: 24px auto 0; text-align: center; }
.price-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.price-opt { flex: 1; min-width: 150px; border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 14px 16px; cursor: pointer; text-align: left; background: var(--surface);
  transition: all .2s var(--ease); }
.price-opt.active { border-color: var(--gold); background: var(--gold-soft); }
.price-opt .p { font-family: var(--serif); font-size: 27px; color: var(--gold); }
.price-opt .n { font-size: 14px; color: var(--ink); font-weight: 500; }
.price-opt .d { font-size: 12.5px; color: var(--ink-3); }
.unlock-note { font-size: 13px; color: var(--ink-3); margin-top: 12px; }

/* ---- pricing / value strip ---- */
.value { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair);
  border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.value div { background: var(--bg-2); padding: 34px 28px; }
.value h3 { font-size: 23px; margin-bottom: 8px; }
.value p { color: var(--ink-2); font-size: 15px; }
.value .big { font-family: var(--serif); color: var(--gold); font-size: 44px; font-style: italic; }

/* ---- faq ---- */
.faq { max-width: 780px; margin: 0 auto; }
.qa { border-top: 1px solid var(--hair); padding: 24px 4px; }
.qa:last-child { border-bottom: 1px solid var(--hair); }
.qa summary { font-family: var(--serif); font-size: 23px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--gold); font-size: 28px; font-family: var(--sans);
  transition: transform .3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { color: var(--ink-2); margin-top: 14px; font-size: 16px; max-width: 68ch; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--hair); padding: 60px 0 40px; }
.foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
  flex-wrap: wrap; }
.foot .brand { font-size: 22px; }
.foot p { color: var(--ink-3); font-size: 14px; margin-top: 12px; max-width: 42ch; }
.foot-links { display: flex; gap: 46px; flex-wrap: wrap; }
.foot-col h4 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 14px; font-family: var(--sans); font-weight: 600; }
.foot-col a { display: block; color: var(--ink-3); font-size: 14.5px; margin-bottom: 9px;
  transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--gold); }
.copyright { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair);
  color: var(--ink-3); font-size: 13px; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }

/* ---- checkout modal ---- */
.modal-bg { position: fixed; inset: 0; z-index: 100; background: rgba(4,6,12,0.78);
  backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center;
  padding: 24px; }
.modal-bg.show { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  max-width: 460px; width: 100%; padding: 32px; max-height: 90vh; overflow-y: auto; }
.modal h3 { font-size: 30px; margin-bottom: 6px; }
.modal .sub { color: var(--ink-2); font-size: 15px; margin-bottom: 22px; }
.pay-addr { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 12px 14px; font-family: 'Outfit', monospace; font-size: 13px; word-break: break-all;
  color: var(--ink); display: flex; justify-content: space-between; gap: 10px; align-items: center;
  margin-bottom: 8px; }
.pay-addr button { background: var(--gold-soft); border: 1px solid var(--line); color: var(--gold);
  border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.net-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.net-tab { flex: 1; text-align: center; padding: 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--hair); background: var(--bg); font-size: 13.5px; cursor: pointer;
  color: var(--ink-2); }
.net-tab.active { border-color: var(--gold); color: var(--ink); background: var(--gold-soft); }
.modal .status { font-size: 14px; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  display: none; }
.modal .status.show { display: block; }
.status.err { background: rgba(220,90,90,0.12); color: #f0a8a8; border: 1px solid rgba(220,90,90,0.3); }
.status.ok { background: rgba(120,200,150,0.12); color: #a6e6bf; border: 1px solid rgba(120,200,150,0.3); }
.status.info { background: var(--surface-2); color: var(--ink-2); }
.modal-close { float: right; background: none; border: none; color: var(--ink-3); font-size: 26px;
  cursor: pointer; line-height: 1; margin: -8px -8px 0 0; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---- responsive ---- */
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 20px; }
  .hero-copy { max-width: 100%; margin: 0 auto; }
  .hero p.lede { max-width: 46ch; margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero-poster { order: -1; }
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .value { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .nav-links a:not(.btn) { display: none; }
  section { padding: 68px 0; }
  section.wrap:not(.hero) { padding-top: 68px; padding-bottom: 68px; }
  .step { grid-template-columns: 56px 1fr; gap: 16px; padding: 26px 22px; }
  .step .num { font-size: 40px; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero-cta .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}