:root{
  --night0:#04060a;
  --night1:#070b12;
  --night2:#0a101a;

  --amber:#d2b07a;
  --amber2:#916b3b;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);

  --radius: 22px;
  --shadow: 0 26px 86px rgba(0,0,0,.62);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 900px at 30% 10%, rgba(36,44,64,.58), transparent 62%),
    radial-gradient(1200px 900px at 75% 25%, rgba(22,32,52,.62), transparent 60%),
    linear-gradient(180deg, var(--night0), var(--night2));
  overflow-x:hidden;
}

/* Background */
.bg{ position:fixed; inset:0; z-index:-1; }
.vignette{
  position:absolute; inset:-2px;
  background: radial-gradient(1200px 900px at 50% 40%, transparent 40%, rgba(0,0,0,.58) 100%);
  opacity:.9;
}
.streetlight{
  position:absolute;
  width:820px; height:820px;
  border-radius:50%;
  filter: blur(46px);
  opacity:.60;
  animation: drift 11s ease-in-out infinite;
  background:
    radial-gradient(circle at 40% 40%, rgba(210,176,122,.38), transparent 58%),
    radial-gradient(circle at 55% 55%, rgba(145,107,59,.24), transparent 66%);
}
.streetlight.a1{ left:-360px; top:-360px; animation-delay:-1.4s; }
.streetlight.a2{ right:-420px; bottom:-460px; opacity:.46; animation-delay:-3.1s; }

@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(16px,-14px) scale(1.02); }
}

.leak{
  position:absolute; inset:-2px;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.20;
}
.leak.l1{ background: radial-gradient(520px 420px at 18% 18%, rgba(210,176,122,.26), transparent 70%); }
.leak.l2{ background: radial-gradient(640px 520px at 86% 70%, rgba(255,240,210,.12), transparent 72%); opacity:.16; }

.bokeh{
  position:absolute; inset:0;
  background:
    radial-gradient(160px 160px at 18% 74%, rgba(210,176,122,.10), transparent 65%),
    radial-gradient(220px 220px at 70% 66%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(140px 140px at 82% 18%, rgba(210,176,122,.08), transparent 68%),
    radial-gradient(180px 180px at 42% 34%, rgba(255,255,255,.05), transparent 72%);
  opacity:.95;
}
.noise{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.12;
}

/* Mobile page framing */
.page{
  padding:
    max(18px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.stack{
  max-width: 420px;       /* iPhone-first */
  margin: 0 auto;
  display:grid;
  gap: 14px;
}

/* Cards */
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(540px 260px at 18% 12%, rgba(210,176,122,.14), transparent 62%),
    radial-gradient(620px 320px at 92% 35%, rgba(255,255,255,.06), transparent 64%);
  pointer-events:none;
}

/* Hero left */
.hero-left{ padding: 22px 20px; }
.kicker{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.name-row{
  display:flex;
  align-items:flex-end;
  gap: 12px;
}
.name{
  margin: 10px 0 6px;
  font-size: 64px;
  letter-spacing: -0.06em;
  line-height: .92;
  text-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 24px rgba(210,176,122,.10);
}
.age{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-weight: 760;
  border: 1px solid rgba(210,176,122,.22);
  background: linear-gradient(180deg, rgba(210,176,122,.12), rgba(255,255,255,.03));
  box-shadow: 0 12px 40px rgba(0,0,0,.40);
  transform: translateY(-6px);
}
.meta{
  color: rgba(255,255,255,.72);
  font-size: 15px;
  letter-spacing: .02em;
}

/* Planner */
.hero-right{ padding: 18px 16px; }
.mini-form{ display:grid; gap: 12px; }
.field{ display:grid; gap: 8px; }
.label{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
}

input{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--text);
  padding: 14px 12px;     /* bigger touch */
  outline:none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
input:focus{
  border-color: rgba(210,176,122,.40);
  background: rgba(0,0,0,.28);
  box-shadow: 0 0 0 4px rgba(210,176,122,.10);
}

.countdown{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  overflow:hidden;
}
.cd-row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.cd-row:first-child{ border-top:none; }
.cd-label{ color: rgba(255,255,255,.58); font-size: 13px; }
.cd-value{ font-weight: 780; letter-spacing:.01em; }
.hidden{ display:none; }

.hint{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.50);
}

/* Gallery (mobile stack, cinematic ratio) */
.gallery{
  display:grid;
  gap: 12px;
}

.shot{
  margin:0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 55px rgba(0,0,0,.40);
}

.shot img{
  width:100%;
  display:block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.96) contrast(1.04) brightness(.88);
  transform: scale(1.03);
  transition: transform .8s ease, filter .8s ease;
}
.shot:active img{
  transform: scale(1.06);
  filter: saturate(1.00) contrast(1.05) brightness(.94);
}

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.in{ opacity:1; transform: translateY(0); }

/* FX Canvas */
#fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index: 50;
}