/* Public landing — dusk sky, floating invitation cards, catalog chips. */

body.land{
  background:
    radial-gradient(circle at 12% 18%, rgba(242,199,92,.35) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 28%, rgba(255,255,255,.45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 18% 42%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    linear-gradient(180deg,#8FB0E4 0%,#C5D4EE 38%,#F2F5FA 62%,#F2F5FA 100%);
  min-height:100vh;min-height:100dvh;
}
@media (prefers-color-scheme: dark){
  body.land{
    background:
      radial-gradient(circle at 12% 18%, rgba(242,199,92,.28) 0 4px, transparent 5px),
      radial-gradient(circle at 78% 12%, rgba(255,255,255,.35) 0 2px, transparent 3px),
      radial-gradient(circle at 88% 28%, rgba(255,255,255,.2) 0 1.5px, transparent 2.5px),
      linear-gradient(180deg,#10172E 0%,#1A2448 42%,#121831 100%);
  }
}

.land-top{position:sticky;top:0;z-index:10;padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb, var(--surface) 72%, transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
.land-top-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 24px}
.land-top-in .lang{margin-left:auto}
.land-signin{flex-shrink:0}

.land-hero{max-width:1120px;margin:0 auto;padding:36px 24px 48px;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:40px;align-items:center}
.land-kicker{margin:0 0 10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:.78rem;color:var(--accent)}
.land-copy h1{font-size:clamp(2.2rem,5vw,3.4rem);max-width:16ch;margin-bottom:16px}
.land-copy .lead{margin:0 0 22px;color:var(--ink);font-size:1.08rem;max-width:42ch}
.land-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.land-guest{margin:0;color:var(--soft);font-size:.92rem;max-width:42ch}

.land-stage{position:relative;min-height:420px;margin-inline:auto;width:min(100%,440px)}
.land-moon{position:absolute;right:10%;top:0;width:72px;height:72px;border-radius:50%;
  box-shadow:-16px 8px 0 0 var(--butter);transform:rotate(-18deg);opacity:.95;z-index:0}
.demo-card{position:absolute;width:210px;height:270px;border-radius:20px;padding:72px 20px 22px;
  box-shadow:0 24px 50px rgba(31,42,77,.22);display:flex;flex-direction:column;justify-content:flex-start}
.demo-dear{margin:0 0 6px;font-size:.82rem;opacity:.75}
.demo-card h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.15;margin:0}
.demo-sky{left:8%;top:18%;background:linear-gradient(180deg,#7BA3DC,#E8F0FA 55%,#FFFEFA);
  color:#1E2430;transform:rotate(-9deg);z-index:1;animation:float-sky 4.8s ease-in-out infinite alternate}
.demo-garden{right:4%;top:8%;background:#F7F1E4;color:#3D4A38;box-shadow:
  0 0 0 7px #F7F1E4,0 0 0 9px #6B8F71,0 24px 50px rgba(61,74,56,.2);
  transform:rotate(6deg);z-index:2;animation:float-garden 5.4s ease-in-out infinite alternate}
.demo-party{left:28%;bottom:0;background:linear-gradient(160deg,#FFF6EA,#FFD6C8);color:#7A2E32;
  transform:rotate(3deg);z-index:3;border-radius:26px;animation:float-party 4.2s ease-in-out infinite alternate}
@keyframes float-sky{from{transform:rotate(-9deg) translateY(0)}to{transform:rotate(-9deg) translateY(-12px)}}
@keyframes float-garden{from{transform:rotate(6deg) translateY(0)}to{transform:rotate(6deg) translateY(-10px)}}
@keyframes float-party{from{transform:rotate(3deg) translateY(0)}to{transform:rotate(3deg) translateY(-8px)}}
.demo-balloon{position:absolute;width:28px;height:36px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:#5F7FC4;top:16px}
.demo-balloon.b1{left:22px}
.demo-balloon.b2{left:52px;top:10px;background:#F2C75C;width:22px;height:28px}
.demo-dot{position:absolute;width:8px;height:8px;border-radius:2px;background:#E85D4C;top:16px;left:22px}
.demo-dot.d2{left:46px;top:28px;background:#F2C75C;transform:rotate(20deg)}
.demo-dot.d3{left:68px;top:12px;background:#3E5A9E;width:6px;height:12px}

.land-cats{max-width:1120px;margin:0 auto;padding:8px 24px 36px}
.land-cats h2{font-size:1.35rem;margin-bottom:14px}
.land-cats ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.land-cats li{padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  font-weight:600;font-size:.9rem}

.land-how{max-width:1120px;margin:0 auto 12px;padding:12px 24px 40px}
.land-how h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:22px}
.land-how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.land-how li{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 20px}
.land-how .n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--butter);color:var(--butter-ink);font-weight:700;margin-bottom:12px}
.land-how h3{font-size:1.2rem;margin-bottom:8px}
.land-how p{margin:0;color:var(--soft)}

.land-looks{max-width:1120px;margin:0 auto;padding:8px 24px 56px}
.land-looks h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:8px}
.land-looks > .lead{margin:0 0 22px;color:var(--soft);max-width:48ch}
.look-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.look{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:8px}
.look h3{font-size:1.15rem}
.look p{margin:0;color:var(--soft);font-size:.92rem}
.look-swatch{height:72px;border-radius:12px;background:var(--field)}
.look-swatch[data-layout="sky-envelope"]{background:linear-gradient(180deg,#7BA3DC,#E8F0FA 60%,#FFFEFA)}
.look-swatch[data-layout="garden-frame"]{background:
  radial-gradient(circle at 18% 30%,#6B8F71 0 8px,transparent 9px),
  radial-gradient(circle at 82% 70%,#C4A35A 0 6px,transparent 7px),
  linear-gradient(#F7F1E4,#F7F1E4)}
.look-swatch[data-layout="formal-stationery"]{background:repeating-linear-gradient(180deg,#F4EFE4 0 11px,#E4D9C4 11px 12px)}
.look-swatch[data-layout="party-burst"]{background:
  radial-gradient(circle at 28% 40%,#E85D4C 0 6px,transparent 7px),
  radial-gradient(circle at 70% 55%,#F2C75C 0 5px,transparent 6px),
  linear-gradient(135deg,#FFF6EA,#FFD6C8)}
.look-swatch[data-layout="memorial-quiet"]{background:linear-gradient(180deg,#1C2433,#4A5568 70%,#D9D3C7)}
.look-swatch[data-layout="classic-card"]{background:linear-gradient(180deg,#E8EEF8,#FFFEFA)}

.land-foot{max-width:1120px;margin:0 auto;padding:8px 24px calc(40px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:28px}
.land-foot p{margin:0;color:var(--soft)}

@media (max-width:860px){
  .land-hero{grid-template-columns:1fr;padding-top:20px}
  .land-stage{min-height:300px;width:100%;max-width:360px;order:-1}
  .demo-card{width:158px;height:214px;padding:56px 16px 16px}
  .demo-card h2{font-size:1.4rem}
  .demo-garden{display:none}
  .demo-sky{left:2%;top:18px}
  .demo-party{left:auto;right:2%;top:52px;bottom:auto}
  .land-moon{width:52px;height:52px;right:18%;top:0}
  .land-how ol{grid-template-columns:1fr}
  .look-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .look-grid{grid-template-columns:1fr 1fr}
  .land-top-in{padding:10px 16px;gap:10px}
  .land-top-in .brand{font-size:1.05rem;gap:8px}
  .land-copy h1{max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .demo-card{animation:none;transform:none}
}