/* ===========================================================
   APP UI — "Obsidian & Champagne" design system for the platform
   shell (landing, auth, dashboard, wizard). Fully separate
   namespace from base.css, which only styles the rendered
   invitation pages themselves.

   Look: deep plum-obsidian ground, champagne-gold accents,
   slow & unhurried motion. Every transition is intentionally
   long (see --dur-* / --ease-*) so the UI feels expensive
   rather than snappy.
   =========================================================== */

:root{
  /* --- Accent ramp: champagne gold. Low numbers are the darkest
         (tinted surfaces), high numbers the lightest (ink on dark). --- */
  --p-50:  #16131f;
  --p-100: #1e192b;
  --p-200: #2b2440;
  --p-300: #6b5733;
  --p-400: #dfc189;
  --p-500: #cfa963;
  --p-600: #e6cb99;
  --p-700: #f0deb8;
  --p-800: #f7ecd6;
  --p-900: #fdf8ef;

  /* raw gold stops for gradients / glows */
  --gold-deep:  #8d6c30;
  --gold:       #cfa963;
  --gold-light: #f2ddb2;
  --gold-glow:  rgba(207,169,99,.30);
  --on-gold:    #1a1408;

  /* wine & plum companions, used sparingly for depth */
  --wine:  #6d2140;
  --plum:  #34203f;
  --rose:  #d795ab;

  --ink:      #f3eef4;
  --ink-soft: #a99fb4;
  --ink-faint:#6f6780;
  --line:     rgba(207,169,99,.16);
  --line-soft:rgba(255,255,255,.07);
  --surface:  #15121e;
  --surface-2:#1c1829;
  --bg:       #0a0810;

  --ok:    #74d6a2;
  --ok-bg: rgba(60,175,120,.13);
  --warn:  #ecc077;
  --warn-bg:rgba(206,158,60,.13);
  --danger:#f0908f;
  --danger-bg:rgba(206,70,70,.14);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow:    0 26px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03);
  --shadow-sm: 0 14px 34px -18px rgba(0,0,0,.75);
  --shadow-gold: 0 18px 44px -18px rgba(207,169,99,.34);

  /* --- Motion. Deliberately slow; every component pulls from here. --- */
  --dur-1: .5s;    /* micro states: colour, border */
  --dur-2: .9s;    /* hovers, lifts, sheens */
  --dur-3: 1.4s;   /* entrances */
  --dur-4: 2.2s;   /* long reveals */
  --ease:      cubic-bezier(.22,.61,.24,1);
  --ease-soft: cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.62,.02,.24,1);

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* iOS Safari ignores overflow-x on body alone and still lets the page pan
   sideways over decoration that bleeds past the edge. `clip` stops that
   without making body a scroll container (which `hidden` on both html and
   body would, breaking the sticky bars), so it's only applied where supported. */
@supports (overflow-x: clip){
  html{ overflow-x: hidden; }
  body{ overflow-x: clip; }
}

/* ---------- Page ground: layered light pools + film grain ---------- */
body::before{
  /* soft pools of light so the black never reads as flat paint */
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(900px 600px at 12% -6%,  rgba(109,33,64,.34), transparent 62%),
    radial-gradient(800px 620px at 92% 8%,   rgba(207,169,99,.13), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(52,32,63,.55),  transparent 64%);
  pointer-events:none;
  z-index:-4;
}
body::after{
  /* fine film grain + vignette — the two cheapest cues for "premium print" */
  content:'';
  position:fixed; inset:0;
  background-image:
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.55) 100%),
    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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size: cover, 180px 180px;
  opacity:.5;
  mix-blend-mode: soft-light;
  pointer-events:none;
  z-index:-2;
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin: 0 0 8px; line-height: 1.25; }
::selection{ background: rgba(207,169,99,.28); color: var(--p-900); }

/* thin gold scrollbar */
html{ scrollbar-width: thin; scrollbar-color: rgba(207,169,99,.35) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--gold-deep), var(--gold)); border-radius:99px; border:3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track{ background: transparent; }

.container{ max-width: 1080px; margin: 0 auto; padding: 0 24px; position:relative; z-index:1; }
.container-narrow{ max-width: 620px; margin: 0 auto; padding: 0 24px; position:relative; z-index:1; }

/* ---------- Ambient background: slow aurora, starfield, gold dust ---------- */
.bg-ambient{
  position:fixed; inset:0;
  overflow:hidden;
  /* under the film grain (-2) but over the light pools (-4) */
  z-index:-3;
  pointer-events:none;
}
.bg-ambient__blob{
  position:absolute;
  border-radius:50%;
  filter: blur(90px);
  opacity:.5;
  will-change: transform;
}
.bg-ambient__blob--1{
  width:560px; height:560px; top:-170px; left:-150px;
  background: radial-gradient(circle at 30% 30%, rgba(109,33,64,.9), transparent 70%);
  animation: bg-drift-1 74s var(--ease-inout) infinite;
}
.bg-ambient__blob--2{
  width:660px; height:660px; top:10%; right:-220px;
  background: radial-gradient(circle at 60% 40%, rgba(207,169,99,.5), transparent 70%);
  animation: bg-drift-2 92s var(--ease-inout) infinite;
}
.bg-ambient__blob--3{
  width:620px; height:620px; bottom:-200px; left:16%;
  background: radial-gradient(circle at 50% 50%, rgba(52,32,63,.95), transparent 70%);
  animation: bg-drift-3 84s var(--ease-inout) infinite;
}
.bg-ambient__blob--4{
  width:440px; height:440px; top:44%; left:-140px;
  background: radial-gradient(circle at 50% 50%, rgba(141,108,48,.55), transparent 70%);
  animation: bg-drift-1 106s var(--ease-inout) infinite reverse;
}
.bg-ambient__blob--5{
  width:520px; height:520px; bottom:8%; right:-160px;
  background: radial-gradient(circle at 40% 60%, rgba(109,33,64,.6), transparent 70%);
  animation: bg-drift-2 98s var(--ease-inout) infinite reverse;
}
@keyframes bg-drift-1{
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(60px, 44px, 0) scale(1.10); }
  66%      { transform: translate3d(24px, -36px, 0) scale(.96); }
}
@keyframes bg-drift-2{
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  40%      { transform: translate3d(-56px, 66px, 0) scale(1.08); }
  70%      { transform: translate3d(-18px, 18px, 0) scale(.98); }
}
@keyframes bg-drift-3{
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  45%      { transform: translate3d(52px, -58px, 0) scale(1.12); }
  75%      { transform: translate3d(-30px, -20px, 0) scale(1.02); }
}

/* faint starfield — six tiled dot layers breathing together */
.bg-ambient__stars{
  position:absolute; inset:-10%;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 32%,  rgba(242,221,178,.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 18%,  rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.7px 1.7px at 84% 62%,  rgba(242,221,178,.6),  transparent 60%),
    radial-gradient(1.1px 1.1px at 38% 74%,  rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 88%,  rgba(242,221,178,.5),  transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 46%,  rgba(255,255,255,.45), transparent 60%);
  background-size: 620px 620px, 480px 480px, 720px 720px, 540px 540px, 660px 660px, 400px 400px;
  animation: star-breathe 17s var(--ease-inout) infinite;
  opacity:.55;
}
@keyframes star-breathe{
  0%,100%{ opacity:.30; }
  50%    { opacity:.72; }
}

/* gold-dust particle canvas, painted by premium-fx.js */
.bg-ambient__dust{ position:absolute; inset:0; width:100%; height:100%; opacity:.8; }

/* pointer-following light, nudged by premium-fx.js */
.bg-ambient__spot{
  position:absolute; top:0; left:0;
  width:760px; height:760px; margin:-380px 0 0 -380px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(207,169,99,.13), transparent 66%);
  opacity:0;
  transition: opacity 1.8s var(--ease-soft);
  will-change: transform;
}
.bg-ambient__spot.is-live{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .bg-ambient__blob, .bg-ambient__stars{ animation:none; }
  .bg-ambient__dust, .bg-ambient__spot{ display:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Ornaments (SVG sprite lives in layouts/ornaments.php) ---------- */
.orn{ display:block; color: var(--gold); pointer-events:none; }

/* art-deco rule between landing sections */
.orn-divider{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin: 0 auto 44px;
  max-width: 440px;
  color: var(--gold);
}
.orn-divider::before, .orn-divider::after{
  content:'';
  flex:1; height:1px;
  background: linear-gradient(90deg, transparent, rgba(207,169,99,.55));
}
.orn-divider::after{ background: linear-gradient(270deg, transparent, rgba(207,169,99,.55)); }
.orn-divider .orn{ width:56px; height:20px; animation: orn-breathe 9s var(--ease-inout) infinite; }
@keyframes orn-breathe{
  0%,100%{ opacity:.6; transform: scale(1); }
  50%    { opacity:1;  transform: scale(1.09); }
}

/* corner filigree anchored inside a positioned section.
   --parallax-y is written by premium-fx.js on [data-parallax] elements. */
.orn-corner{ position:absolute; width:190px; height:190px; opacity:.3; color: var(--gold); z-index:0; transform: translate3d(0, var(--parallax-y, 0px), 0); }
.orn-corner--tl{ top:-30px; left:-58px; }
.orn-corner--tr{ top:-30px; right:-58px; transform: scaleX(-1) translate3d(0, var(--parallax-y, 0px), 0); }
.orn-corner--bl{ bottom:-30px; left:-58px; transform: scaleY(-1) translate3d(0, var(--parallax-y, 0px), 0); }
.orn-corner--br{ bottom:-30px; right:-58px; transform: scale(-1) translate3d(0, var(--parallax-y, 0px), 0); }
@media (max-width: 900px){ .orn-corner{ width:124px; height:124px; opacity:.22; } }
/* Kept at every width, only shrunk and tucked further in — the filigree is
   part of the panel itself, not a desktop-only extra. body has overflow-x
   hidden, so the slight bleed past the panel edge can't add a scrollbar. */
@media (max-width: 640px){
  .orn-corner{ width:96px; height:96px; opacity:.2; }
  .orn-corner--tl{ top:-16px; left:-26px; }
  .orn-corner--tr{ top:-16px; right:-26px; }
  .orn-corner--bl{ bottom:-16px; left:-26px; }
  .orn-corner--br{ bottom:-16px; right:-26px; }
}
@media (max-width: 420px){
  .orn-corner{ width:76px; height:76px; }
  .orn-corner--tl{ top:-12px; left:-18px; }
  .orn-corner--tr{ top:-12px; right:-18px; }
  .orn-corner--bl{ bottom:-12px; left:-18px; }
  .orn-corner--br{ bottom:-12px; right:-18px; }
}

/* slow float, applied to decorative art */
.float-slow{ animation: float-slow 14s var(--ease-inout) infinite; }
.float-slower{ animation: float-slow 21s var(--ease-inout) infinite; animation-delay:-7s; }
@keyframes float-slow{
  0%,100%{ transform: translate3d(0,0,0) rotate(0deg); }
  50%    { transform: translate3d(0,-16px,0) rotate(1.2deg); }
}

/* twinkling sparkles scattered over the hero */
.sparkle{ position:absolute; opacity:0; color: var(--gold-light); animation: sparkle-twinkle 8s var(--ease-inout) infinite; }
.sparkle svg{ width:100%; height:100%; display:block; }
@keyframes sparkle-twinkle{
  0%, 100%{ opacity:0;   transform: scale(.45) rotate(0deg); }
  45%     { opacity:.95; transform: scale(1)   rotate(45deg); }
  62%     { opacity:.5;  transform: scale(.85) rotate(72deg); }
}
@media (prefers-reduced-motion: reduce){
  .float-slow,.float-slower,.sparkle,.orn-divider .orn{ animation:none; }
  .sparkle{ opacity:.6; }
}

/* gold-foil text for the biggest headlines */
.gold-text{
  background: linear-gradient(100deg, #b9913f 0%, #f7e6c0 24%, #cfa963 42%, #fff6e2 58%, #c49a4e 78%, #eddcb4 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gold-sheen 12s linear infinite;
}
@keyframes gold-sheen{
  0%  { background-position: 0% 50%; }
  100%{ background-position: 260% 50%; }
}
@media (prefers-reduced-motion: reduce){ .gold-text{ animation:none; } }

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing:.01em;
  border: 1px solid transparent;
  overflow:hidden;
  isolation:isolate;
  transition: color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease-soft);
  white-space: nowrap;
}
/* slow light sweep across any button on hover */
.btn::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.42) 48%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 1.25s var(--ease-soft);
  pointer-events:none;
  z-index:2;
}
.btn:hover::after{ transform: translateX(130%); }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); transition-duration: .18s; }

.btn-primary{
  background: linear-gradient(135deg, #e7cc98 0%, var(--gold) 42%, #ab8340 100%);
  background-size: 180% 180%;
  background-position: 0% 50%;
  color: var(--on-gold);
  font-weight:700;
  box-shadow: var(--shadow-gold);
  transition: background-position 1.1s var(--ease-soft),
              box-shadow var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease-soft);
}
.btn-primary:hover{ background-position: 100% 50%; box-shadow: 0 22px 52px -16px rgba(207,169,99,.55); }
.btn-outline{ background: rgba(255,255,255,.02); border-color: rgba(207,169,99,.4); color: var(--p-600); }
.btn-outline:hover{ background: rgba(207,169,99,.10); border-color: var(--gold); color: var(--p-800); }
.btn-ghost{ background: transparent; color: var(--ink-soft); }
.btn-ghost:hover{ color: var(--p-600); background: rgba(255,255,255,.04); }
.btn-lg{ padding: 17px 36px; font-size: 16px; }
.btn-block{ width:100%; }
.btn-sm{ padding: 9px 18px; font-size: 13px; }
.btn[disabled]{ opacity:.4; pointer-events:none; }
.btn-danger{ background: var(--danger-bg); color: var(--danger); border-color: rgba(240,144,143,.28); }
.btn-danger:hover{ background: rgba(206,70,70,.24); }
@media (prefers-reduced-motion: reduce){
  .btn, .btn::after{ transition:none; }
  .btn:hover{ transform:none; }
}

/* ---------- Cards / Surfaces ---------- */
.card{
  position:relative;
  background:
    linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,0) 46%),
    var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease-soft),
              box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
/* hairline gold edge that lights up on hover */
.card::before{
  content:'';
  position:absolute; inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(140deg, rgba(207,169,99,.55), rgba(207,169,99,0) 38%, rgba(207,169,99,0) 62%, rgba(207,169,99,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.4;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events:none;
}
.card:hover::before{ opacity:1; }
.card-pad{ padding: 30px; }
.card-pad h3, .card-pad h2{ color: var(--p-900); }

/* ---------- Forms ---------- */
label{ display:block; font-size: 13.5px; font-weight: 600; color: var(--p-800); margin-bottom: 7px; letter-spacing:.01em; }
.field{ margin-bottom: 20px; }
.field-hint{ font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=tel],
select, textarea{
  width:100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  transition: border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}
input::placeholder, textarea::placeholder{ color: var(--ink-faint); }
input:hover, select:hover, textarea:hover{ border-color: rgba(207,169,99,.3); }
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: var(--p-400);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 4px rgba(207,169,99,.12);
}
select option{ background: var(--surface-2); color: var(--ink); }
input[type=date], input[type=time]{ color-scheme: dark; }
textarea{ resize: vertical; min-height: 90px; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }

.check-row{ display:flex; align-items:flex-start; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); transition: border-color var(--dur-1) var(--ease); }
.check-row:last-child{ border-bottom:none; }
.check-row:hover{ border-color: rgba(207,169,99,.3); }
.check-row input[type=checkbox]{ width: 20px; height:20px; margin-top: 2px; accent-color: var(--gold); flex-shrink:0; }
.check-row-label{ font-weight:600; font-size:14.5px; color: var(--p-800); }
.check-row-desc{ font-size: 13px; color: var(--ink-soft); margin-top: 3px; }

.file-drop{
  border: 1.5px dashed rgba(207,169,99,.3);
  border-radius: var(--radius);
  padding: 26px;
  text-align:center;
  color: var(--ink-soft);
  background: linear-gradient(160deg, rgba(207,169,99,.07), rgba(255,255,255,.015));
  cursor:pointer;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-soft);
}
.file-drop:hover{ border-color: var(--gold); background: linear-gradient(160deg, rgba(207,169,99,.14), rgba(255,255,255,.03)); transform: translateY(-2px); }
.file-drop input[type=file]{ display:none; }

.alert{
  padding: 15px 19px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 20px;
  border:1px solid transparent;
  animation: alert-in var(--dur-3) var(--ease-soft) both;
}
@keyframes alert-in{
  from{ opacity:0; transform: translateY(-10px); }
  to  { opacity:1; transform:none; }
}
.alert-error{ background: var(--danger-bg); color: var(--danger); border-color: rgba(240,144,143,.26); }
.alert-success{ background: var(--ok-bg); color: var(--ok); border-color: rgba(116,214,162,.26); }
.alert-warn{ background: var(--warn-bg); color: var(--warn); border-color: rgba(236,192,119,.26); }

.badge{ display:inline-block; padding: 5px 13px; border-radius: 999px; font-size: 11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:1px solid transparent; }
.badge-draft{ background: rgba(255,255,255,.06); color: var(--ink-soft); border-color: var(--line-soft); }
.badge-published{ background: var(--ok-bg); color: var(--ok); border-color: rgba(116,214,162,.3); }
.badge-pending{ background: var(--warn-bg); color: var(--warn); border-color: rgba(236,192,119,.3); }
.badge-soon{ background: rgba(255,255,255,.05); color: var(--ink-faint); border-color: var(--line-soft); }

/* ---------- Public nav / footer ---------- */
.pubnav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 0;
  position:relative;
  animation: nav-in var(--dur-4) var(--ease-soft) both;
}
@keyframes nav-in{
  from{ opacity:0; transform: translateY(-14px); }
  to  { opacity:1; transform:none; }
}
.pubnav::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(207,169,99,.35), transparent);
}
.pubnav__logo{
  font-weight: 800; font-size: 19px;
  display:flex; align-items:center; gap:9px;
  color: var(--p-800);
  transition: letter-spacing var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
.pubnav__logo:hover{ letter-spacing:.02em; color: var(--p-900); }

/* ---------- Brand logo image (replaces heart emoji + text mark) ---------- */
.brand-logo{
  display:block;
  height: clamp(34px, 6vw, 52px);
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
}
.brand-logo--footer{ height: clamp(40px, 7vw, 60px); }
.pubnav__links{ display:flex; align-items:center; gap: 10px; }

/* ---------- Landing hero ---------- */
.hero{ padding: 60px 0 40px; text-align:center; }
.hero h1{ font-size: clamp(30px, 5vw, 48px); font-weight: 800; letter-spacing:-.02em; }
.hero p{ color: var(--ink-soft); font-size: 17px; max-width: 520px; margin: 14px auto 30px; }
.hero__actions{ display:flex; gap: 14px; justify-content:center; flex-wrap:wrap; }

.feature-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin: 50px 0; }
.feature-grid .card-pad{ text-align:center; }
.feature-grid .icon{
  width:56px;height:56px;border-radius:18px;
  background: linear-gradient(150deg, rgba(207,169,99,.28), rgba(109,33,64,.35));
  border:1px solid rgba(207,169,99,.28);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;font-size:24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease);
}
.feature-grid .card:hover{ transform: translateY(-7px); box-shadow: var(--shadow); border-color: rgba(207,169,99,.24); }
.feature-grid .card:hover .icon{ transform: translateY(-3px) scale(1.07) rotate(-3deg); box-shadow: 0 14px 30px -12px rgba(207,169,99,.5); }
.feature-grid .card p{ color: var(--ink-soft); }
/* fixed 3-column variant for grids whose count shouldn't orphan a row */
.feature-grid--3col{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px){ .feature-grid--3col{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .feature-grid--3col{ grid-template-columns: 1fr; } }

/* ---------- Landing: split hero (copy + live phone preview) ---------- */
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items:center; padding: 60px 0 26px; position:relative; }
.hero-grid .hero-copy{ text-align:left; position:relative; z-index:2; }
.hero-grid .eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  background: linear-gradient(120deg, rgba(207,169,99,.16), rgba(109,33,64,.24));
  border:1px solid rgba(207,169,99,.32);
  color: var(--p-700); font-size:12.5px; font-weight:700; letter-spacing:.04em;
  padding:8px 16px; border-radius:999px; margin-bottom:20px;
  box-shadow: 0 0 0 0 rgba(207,169,99,.35);
  animation: eyebrow-halo 6.5s var(--ease-inout) infinite;
}
@keyframes eyebrow-halo{
  0%,100%{ box-shadow: 0 0 0 0 rgba(207,169,99,.3); }
  50%    { box-shadow: 0 0 0 12px rgba(207,169,99,0); }
}
.hero-grid h1{ font-size: clamp(31px, 4.1vw, 48px); font-weight: 800; letter-spacing:-.02em; margin-bottom:18px; }
.hero-grid .lead{ color: var(--ink-soft); font-size: 16.5px; max-width:480px; margin: 0 0 28px; }
.hero-grid .hero__actions{ justify-content:flex-start; margin-bottom:26px; }
.hero-trust{ display:flex; flex-wrap:wrap; gap: 10px 22px; }
.hero-trust span{ font-size:13.5px; color: var(--ink-soft); display:flex; align-items:center; gap:8px; }
.hero-trust span::before{
  content:'✓';
  color: var(--gold); font-weight:800; font-size:12px;
  width:19px; height:19px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(207,169,99,.14);
  border:1px solid rgba(207,169,99,.34);
}
.hero-visual{ display:flex; justify-content:center; position:relative; padding: 20px 0 44px; z-index:1; }
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; text-align:center; padding-top:34px; }
  .hero-grid .hero-copy{ text-align:center; }
  .hero-grid .lead{ margin-left:auto; margin-right:auto; }
  .hero-grid .hero__actions, .hero-trust{ justify-content:center; }
  .hero-visual{ order:-1; margin-bottom:10px; }
}

/* ---------- Landing hero: gilded corner decoration ---------- */
/* The wrapper carries the scroll parallax (and the 180° flip for the bottom
   piece); the inner <svg> carries the float animation, so the two transforms
   never fight over the same property. */
.hero-decor{ position:absolute; width:250px; height:250px; pointer-events:none; z-index:0; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); opacity:.95; transform: translate3d(0, var(--parallax-y, 0px), 0); }
.hero-decor svg{ width:100%; height:100%; display:block; }
.hero-decor--tr{ top:-46px; right:-62px; }
.hero-decor--bl{ bottom:-46px; left:-62px; transform: rotate(180deg) translate3d(0, var(--parallax-y, 0px), 0); }
@media (max-width: 900px){
  .hero-decor{ width:168px; height:168px; }
  /* no further out than the container's 24px gutter, or it passes the screen edge */
  .hero-decor--tr{ top:-20px; right:-20px; }
  .hero-decor--bl{ bottom:-20px; left:-20px; }
}
/* Shrunk, never dropped: the bouquets are what frame the hero, so on a phone
   they scale down and tuck in rather than leaving the mockups bare. */
@media (max-width: 640px){
  .hero-decor{ width:120px; height:120px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
  .hero-decor--tr{ top:-8px; right:-16px; }
  .hero-decor--bl{ bottom:-8px; left:-16px; }
}
@media (max-width: 420px){
  .hero-decor{ width:96px; height:96px; }
  .hero-decor--tr{ top:-2px; right:-12px; }
  .hero-decor--bl{ bottom:-2px; left:-12px; }
}

/* ---------- Landing hero: phone + tablet overlapping device stack ---------- */
/* The stack is sized by aspect-ratio rather than a fixed height: every device
   inside it is sized as a % of the stack's width, so a fixed height would
   leave a growing gap under them as the hero column narrows. */
.device-stack{ position:relative; width:100%; max-width:520px; aspect-ratio: 25/24; z-index:1; }
.device{ position:absolute; transition: transform 1.1s var(--ease-soft); }

/* Each screen renders the invitation at its own design viewport and is then
   scaled down uniformly via --dv-scale, computed per screen from its own box
   size, to fit the mockup bezel. The phone gets a real phone viewport. The
   tablet's canvas is sized at runtime (hero-carousel.js) to the template's own
   --max-w so the design fills the bezel edge to edge — at a true 810px tablet
   viewport the mobile-first templates keep their card at 560px and the page's
   body colour shows as a gutter, which just reads as a wrong background once
   shrunk into a small bezel. The width below is the fallback the script
   refines on load; the heights match each bezel's aspect ratio, so there's no
   letterboxing to fill in. */
.device-frame{
  position:absolute; top:0; left:0;
  border:0; display:block; pointer-events:none;
  transform-origin: top left;
  transform: scale(var(--dv-scale, 1));
  transition: opacity .85s var(--ease);
}
.device-frame.is-fading{ opacity:0; }
.device-tablet .device-frame{ width:560px; height:747px; }
.device-phone .device-frame{ width:390px; height:844px; }

.device-tablet{ top:0; right:0; width:66%; z-index:2; filter: drop-shadow(0 30px 50px -14px rgba(0,0,0,.8)); animation: float-slow 20s var(--ease-inout) infinite; }
.device-tablet__body{
  position:relative; background: linear-gradient(155deg,#4b4652,#1b1820 60%,#060608);
  border-radius:20px; padding:13px 9px;
  box-shadow: inset 0 0 0 1.5px rgba(207,169,99,.22);
}
.device-tablet__cam{ position:absolute; top:6px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:#111; box-shadow:0 0 0 1.5px #3a3340; z-index:2; }
.device-tablet__screen{ position:relative; width:100%; aspect-ratio:3/4; border-radius:11px; overflow:hidden; background:#fff; isolation:isolate; }

.device-phone{ bottom:0; left:0; width:42%; z-index:3; filter: drop-shadow(0 26px 42px -12px rgba(0,0,0,.85)); animation: float-slow 15s var(--ease-inout) infinite; animation-delay:-4s; }
.device-phone__body{
  position:relative; background: linear-gradient(155deg,#4b4652,#1b1820 55%,#060608);
  border-radius:28px; padding:9px 6px;
  box-shadow: inset 0 0 0 1.5px rgba(207,169,99,.26);
}
.device-phone__notch{ position:absolute; top:18px; left:50%; transform:translateX(-50%); width:36%; height:13px; background:#0a0a0c; border-radius:999px; z-index:3; }
.device-phone__screen{ position:relative; width:100%; aspect-ratio:9/19.5; border-radius:20px; overflow:hidden; background:#fff; isolation:isolate; }

/* soft gold halo behind the whole stack */
.device-stack::before{
  content:'';
  position:absolute; inset:-14% -10%;
  background: radial-gradient(circle at 50% 45%, rgba(207,169,99,.18), transparent 62%);
  filter: blur(24px);
  z-index:0;
  animation: halo-pulse 12s var(--ease-inout) infinite;
}
@keyframes halo-pulse{
  0%,100%{ opacity:.6; transform: scale(1); }
  50%    { opacity:1;  transform: scale(1.06); }
}

@media (max-width: 900px){ .device-stack{ max-width:460px; } }
/* Small screens keep the same phone-over-tablet composition and only scale
   it: every device is sized as a % of the stack's width and the stack is held
   to one aspect ratio, so a smaller max-width shrinks the pair intact. Only
   the bezel metrics are absolute px, so they're stepped down alongside it —
   left alone they'd read as chunky plastic frames around tiny screens. */
@media (max-width: 640px){
  .device-stack{ max-width:400px; }
  /* the stack spans the full column here, so a sideways bleed on the halo
     would widen the page */
  .device-stack::before{ inset:-14% 0; }
  .device-tablet{ filter: drop-shadow(0 18px 30px -10px rgba(0,0,0,.8)); }
  .device-tablet__body{ border-radius:14px; padding:9px 6px; }
  .device-tablet__screen{ border-radius:7px; }
  .device-phone{ filter: drop-shadow(0 16px 26px -9px rgba(0,0,0,.85)); }
  .device-phone__body{ border-radius:19px; padding:6px 4px; }
  .device-phone__screen{ border-radius:14px; }
  .device-phone__notch{ top:12px; height:9px; }
}
@media (max-width: 420px){
  .device-tablet__body{ border-radius:11px; padding:7px 5px; }
  .device-tablet__screen{ border-radius:6px; }
  .device-phone__body{ border-radius:15px; padding:5px 3px; }
  .device-phone__screen{ border-radius:11px; }
  .device-phone__notch{ top:9px; height:7px; }
}
@media (prefers-reduced-motion: reduce){
  .device-tablet,.device-phone,.device-stack::before{ animation:none; }
}

/* ---------- Landing: reusable section heading ---------- */
.lp-section{ margin: 92px 0; position:relative; }
.section-head{ text-align:center; max-width:660px; margin:0 auto 30px; }
.section-head h2{ font-size: clamp(23px, 3.1vw, 33px); font-weight:800; letter-spacing:-.015em; color: var(--p-900); }
.section-head p{ color: var(--ink-soft); font-size:15px; margin-top:10px; }
.section-head .kicker{
  display:block;
  font-size:11.5px; font-weight:800; letter-spacing:.34em; text-transform:uppercase;
  color: var(--gold); margin-bottom:12px; opacity:.85;
}

/* ---------- Landing: "cara kerja" steps, each with a small illustrated mockup ---------- */
.steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
@media (max-width: 900px){ .steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }
.step-card{
  position:relative;
  background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,0) 44%), var(--surface);
  border:1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; overflow:hidden;
  transition: transform var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.step-card::after{
  /* number ghost watermark */
  content:'';
  position:absolute; inset:auto -20px -30px auto;
  width:120px; height:120px; border-radius:50%;
  background: radial-gradient(circle, rgba(207,169,99,.12), transparent 68%);
  transition: transform 1.3s var(--ease-soft);
}
.step-card:hover{ transform: translateY(-7px); border-color: rgba(207,169,99,.26); box-shadow: var(--shadow); }
.step-card:hover::after{ transform: scale(1.5); }
.step-card__num{
  width:42px; height:42px; border-radius:13px;
  background: linear-gradient(140deg, #e7cc98, var(--gold) 55%, #a8813e);
  color: var(--on-gold);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; margin-bottom:18px;
  box-shadow: 0 10px 24px -10px rgba(207,169,99,.7);
  transition: transform var(--dur-2) var(--ease-soft);
}
.step-card:hover .step-card__num{ transform: rotate(-6deg) scale(1.08); }
.step-card h3{ font-size:16.5px; color: var(--p-900); }
.step-card p{ color: var(--ink-soft); font-size:13.5px; margin:0 0 18px; }

.step-illus{
  position:relative; z-index:1;
  margin-top:auto; border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(207,169,99,.09), rgba(255,255,255,.02));
  border:1px solid var(--line-soft);
  padding:16px; min-height:146px;
  display:flex; flex-direction:column; justify-content:center; gap:9px;
}

.step-illus--form .step-illus__field{ background: rgba(255,255,255,.05); border:1px solid var(--line-soft); border-radius:10px; padding:8px 11px; }
.step-illus__label{ display:block; font-size:10px; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
.step-illus__value{ display:block; font-size:12.5px; font-weight:700; color: var(--p-800); }
.step-illus__chip{ align-self:flex-start; background: linear-gradient(135deg, #e7cc98, var(--gold)); color: var(--on-gold); font-size:11px; font-weight:800; padding:5px 13px; border-radius:999px; }

.step-illus--tpl{ flex-direction:row; align-items:center; justify-content:center; gap:10px; }
.step-illus__swatch{ position:relative; width:46px; height:64px; border-radius:9px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.8); transition: transform var(--dur-2) var(--ease-soft); }
.step-card:hover .step-illus__swatch{ transform: translateY(-3px); }
.step-card:hover .step-illus__swatch:nth-child(2){ transition-delay:.09s; }
.step-card:hover .step-illus__swatch:nth-child(3){ transition-delay:.18s; }
.step-illus__swatch.is-active{ outline:2px solid var(--gold); outline-offset:3px; }
.step-illus__check{ position:absolute; bottom:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background: var(--gold); color: var(--on-gold); font-size:10px; display:flex; align-items:center; justify-content:center; box-shadow: 0 3px 8px rgba(0,0,0,.6); }

.step-illus--phone{ align-items:center; background: linear-gradient(160deg, rgba(109,33,64,.35), rgba(207,169,99,.08)); }
.step-phone{ position:relative; width:74px; aspect-ratio: 9 / 19.5; border-radius:16px; padding:5px 3px; background: linear-gradient(155deg, #4b4652, #1b1820 55%, #060608); box-shadow: 0 12px 26px -8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(207,169,99,.24); }
.step-phone::before{ content:''; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:24px; height:4px; background:#0a0a0c; border-radius:999px; z-index:2; }
.step-phone__screen{ position:relative; width:100%; height:100%; border-radius:12px; overflow:hidden; background: linear-gradient(170deg,#fffaf4,#f6ece0); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:10px 6px 6px; text-align:center; }
.step-phone__title{ font-family: var(--font-display); font-size:12px; font-weight:700; color:#7a5a2a; line-height:1.15; }
.step-phone__date{ font-size:7px; color:#9c8b78; }
.step-phone__btn{ margin-top:4px; font-size:6.5px; font-weight:700; color:#2a1e08; background: linear-gradient(135deg,#e7cc98,#c9a15a); padding:3px 9px; border-radius:999px; }

.step-illus--share .step-illus__link{ background: rgba(255,255,255,.04); border:1px dashed rgba(207,169,99,.42); border-radius:10px; padding:9px 11px; font-size:11.5px; color: var(--p-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.step-illus--share .step-illus__wa{ display:flex; align-items:center; gap:8px; background: rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.26); color:#6fe0a0; border-radius:10px; padding:9px 11px; font-size:12px; font-weight:600; }
.step-illus--share .step-illus__wa svg{ flex-shrink:0; }

/* ---------- Landing: FAQ accordion ---------- */
.faq{ max-width: 740px; margin: 0 auto; display:flex; flex-direction:column; gap:12px; }
.faq details{
  background: linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,0) 50%), var(--surface);
  border:1px solid var(--line-soft); border-radius: var(--radius); padding: 2px 24px;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.faq details:hover{ border-color: rgba(207,169,99,.28); }
.faq details[open]{ border-color: rgba(207,169,99,.42); box-shadow: var(--shadow-sm); }
.faq summary{ cursor:pointer; padding: 19px 0; font-weight:700; font-size:15px; color: var(--p-800); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; transition: color var(--dur-1) var(--ease); }
.faq summary:hover{ color: var(--p-900); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; font-size:22px; line-height:1; color: var(--gold); flex-shrink:0; font-weight:300;
  transition: transform .7s var(--ease-soft);
}
.faq details[open] summary::after{ content:'+'; transform: rotate(135deg); }
.faq .faq-a{ color: var(--ink-soft); font-size:14.5px; padding: 0 0 20px; margin:0; }
.faq details[open] .faq-a{ animation: faq-open .85s var(--ease-soft) both; }
@keyframes faq-open{
  from{ opacity:0; transform: translateY(-8px); }
  to  { opacity:1; transform:none; }
}

/* ---------- Landing: event-type chips (decorative, reuses .acara-card look) ---------- */
.acara-card.is-static{ cursor:default; }
.acara-card.is-static:hover{ transform:none; }

/* ---------- Template gallery cards (shared landing/examples + wizard/template) ---------- */
.tpl-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 26px; }
.tpl-card{
  border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  cursor:pointer; position:relative;
}
.tpl-card:hover{ transform: translateY(-9px); box-shadow: var(--shadow), 0 0 44px -20px rgba(207,169,99,.5); border-color: rgba(207,169,99,.34); }
.tpl-card:hover .tpl-card__frame{ transform: scale(calc(var(--tpl-scale, .6) * 1.035)); }
.tpl-card:hover .tpl-phone{ transform: translateY(-6px) scale(1.03); }
.tpl-card.is-selected{ border-color: var(--gold); box-shadow: 0 0 0 2px rgba(207,169,99,.55), var(--shadow-gold); }

.tpl-card__swatch{
  position:relative;
  aspect-ratio: 3 / 4;
  overflow:hidden;
  background: #241d2e;
  display:flex; align-items:center; justify-content:center;
  padding: 22px 18px;
}
.tpl-card__swatch-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size: 34px; letter-spacing:.02em;
  font-family: var(--font-display);
  opacity:.9;
}
.tpl-card__swatch::before{
  /* soft light/shadow pooling so the colour backdrop behind the phone feels alive, not flat */
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.32), transparent 46%),
    radial-gradient(circle at 86% 92%, rgba(0,0,0,.55), transparent 54%);
  pointer-events:none;
}
.tpl-card__swatch::after{
  /* Template swatches are pastel by design (they belong to the invitation
     themes). This scrim sinks them into the dark shell, leaving just a halo
     of their own colour behind the phone. */
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 72% 58% at 50% 44%, rgba(10,8,16,.30), rgba(10,8,16,.86) 100%),
    linear-gradient(180deg, rgba(10,8,16,.45), transparent 26%, rgba(10,8,16,.6));
  pointer-events:none;
  transition: opacity var(--dur-2) var(--ease);
}
.tpl-card:hover .tpl-card__swatch::after{ opacity:.78; }

/* realistic phone mockup that frames the live template preview inside the card */
.tpl-phone{
  position:relative;
  z-index:2;
  width: 64%;
  max-width: 190px;
  aspect-ratio: 9 / 19.5;
  border-radius: 24px;
  padding: 8px 4px;
  background: linear-gradient(155deg, #4b4652, #1b1820 55%, #060608);
  box-shadow: 0 20px 38px -10px rgba(0,0,0,.75), inset 0 0 0 1.5px rgba(207,169,99,.26);
  transition: transform var(--dur-2) var(--ease-soft);
}
.tpl-phone::before{ /* volume buttons */
  content:''; position:absolute; left:-2px; top:16%; width:2px; height:9%;
  background:#3a3340; border-radius:2px 0 0 2px;
}
.tpl-phone::after{ /* power button */
  content:''; position:absolute; right:-2px; top:26%; width:2px; height:12%;
  background:#3a3340; border-radius:0 2px 2px 0;
}
.tpl-phone__notch{
  position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:36%; min-width:34px; height:6px;
  background:#0a0a0c; border-radius:999px; z-index:3;
}
.tpl-phone__screen{
  position:relative; width:100%; height:100%;
  border-radius:16px; overflow:hidden; background:#fff; isolation:isolate;
}
/* Static cover screenshot of the template (assets/img/previews). On touch
   devices it IS the preview — live iframes are never mounted there (see
   tpl-preview.js); on desktop it's the placeholder the live frame loads over. */
.tpl-card__shot,
.device-shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center; display:block;
  transition: opacity .7s var(--ease);
}
.device-shot.is-fading{ opacity:0; }
.tpl-card__frame{
  position:absolute; top:0; left:0;
  width:390px; height: var(--tpl-h, 845px); /* --tpl-h set by tpl-preview.js to fill the screen */
  border:0; display:block; pointer-events:none; background:transparent;
  transform-origin: top left;
  transform: scale(var(--tpl-scale, .6));
  transition: transform var(--dur-2) var(--ease-soft);
}

.tpl-card__body{
  padding: 17px 19px 21px;
  background: linear-gradient(165deg, rgba(207,169,99,.10), rgba(255,255,255,.01) 70%);
  border-top: 1px solid rgba(207,169,99,.2);
}
.tpl-card__name{ font-weight:700; font-size:15.5px; margin-bottom:4px; color: var(--p-800); }
.tpl-card__tag{ font-size: 12.5px; color: var(--ink-soft); }
.tpl-card__check{
  position:absolute; top:12px; right:12px; width:30px;height:30px;border-radius:50%;
  background: linear-gradient(140deg,#e7cc98,var(--gold)); color: var(--on-gold);
  display:none; align-items:center; justify-content:center; font-size:14px;
  box-shadow: 0 6px 14px -3px rgba(0,0,0,.6); z-index:4;
  animation: check-pop .7s var(--ease-soft) both;
}
.tpl-card.is-selected .tpl-card__check{ display:flex; }
@keyframes check-pop{
  from{ opacity:0; transform: scale(.4) rotate(-30deg); }
  to  { opacity:1; transform: none; }
}

/* ---------- Auth ---------- */
.auth-shell{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 40px 20px; }
/* Kept at --dur-3 rather than --dur-4: this one sits in front of a form the
   user came here to type into, so it must settle sooner than decorative art. */
.auth-card{ width: 100%; max-width: 420px; animation: auth-in var(--dur-3) var(--ease-soft) both; }
@keyframes auth-in{
  from{ opacity:0; transform: translateY(24px) scale(.985); filter: blur(5px); }
  to  { opacity:1; transform:none; filter: blur(0); }
}
.auth-card h1{ font-size: 26px; text-align:center; color: var(--p-900); }
.auth-card > p.sub{ text-align:center; color: var(--ink-soft); font-size:14px; margin-bottom:26px; }
.divider{ display:flex; align-items:center; gap:14px; color: var(--ink-faint); font-size:12.5px; margin: 22px 0; letter-spacing:.06em; }
.divider::before,.divider::after{ content:''; flex:1; height:1px; background: linear-gradient(90deg, transparent, rgba(207,169,99,.35), transparent); }
.btn-google{
  background: rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12); color: var(--ink);
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:13px;
  border-radius: var(--radius-sm); font-weight:600; font-size:14.5px;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-soft);
}
.btn-google:hover{ background: rgba(255,255,255,.09); border-color: rgba(207,169,99,.4); transform: translateY(-2px); }
.auth-foot{ text-align:center; margin-top: 24px; font-size: 14px; color: var(--ink-soft); }
.auth-foot a{ color: var(--p-600); transition: color var(--dur-1) var(--ease); }
.auth-foot a:hover{ color: var(--p-800); }

/* ---------- Dashboard shell ---------- */
.topbar{
  background: rgba(15,12,22,.78);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 50;
}
.topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(207,169,99,.5), transparent);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; padding: 15px 0; }
.topbar__logo{ display:flex; align-items:center; font-weight:800; color: var(--p-800); font-size:18px; transition: letter-spacing var(--dur-2) var(--ease); }
.topbar__logo:hover{ letter-spacing:.02em; }
.topbar__nav{ display:flex; gap: 4px; }
.topbar__nav a{
  position:relative;
  padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight:600; color: var(--ink-soft);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.topbar__nav a::after{
  content:''; position:absolute; left:50%; right:50%; bottom:2px; height:1px;
  background: var(--gold);
  transition: left .7s var(--ease-soft), right .7s var(--ease-soft);
}
.topbar__nav a:hover{ color: var(--p-700); background: rgba(255,255,255,.04); }
.topbar__nav a:hover::after{ left:18px; right:18px; }
.topbar__nav a.active{
  background: linear-gradient(135deg, rgba(207,169,99,.22), rgba(109,33,64,.3));
  border:1px solid rgba(207,169,99,.35);
  color: var(--p-800);
}
.topbar__nav a.active::after{ display:none; }
.topbar__user{ display:flex; align-items:center; gap:10px; }
.avatar{
  width:36px;height:36px;border-radius:50%;
  background: linear-gradient(140deg, var(--gold), var(--wine));
  color: var(--p-900);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; overflow:hidden;
  box-shadow: 0 0 0 1px rgba(207,169,99,.4), 0 8px 18px -8px rgba(0,0,0,.8);
  transition: transform var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease);
}
.avatar:hover{ transform: scale(1.07); box-shadow: 0 0 0 1px rgba(207,169,99,.7), 0 0 22px -4px rgba(207,169,99,.5); }
.topbar__mobile-nav{ display:none; }

.page-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin: 38px 0 28px; }
.page-head h1{ font-size: 26px; color: var(--p-900); letter-spacing:-.015em; }
.page-head p{ color: var(--ink-soft); font-size: 14.5px; margin-top:5px; }

.inv-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap: 20px; margin-bottom: 60px; }
.inv-card{ padding: 24px; }
.inv-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow); }
.inv-card__top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.inv-card__title{ font-weight:700; font-size:17px; margin-bottom:5px; color: var(--p-900); }
.inv-card__meta{ font-size:13px; color: var(--ink-soft); }
.inv-card__actions{ display:flex; gap:8px; margin-top:20px; flex-wrap:wrap; }

.empty-state{ text-align:center; padding: 76px 20px; }
.empty-state .icon{ font-size:46px; margin-bottom:16px; animation: float-slow 8s var(--ease-inout) infinite; }
.empty-state h3{ font-size:20px; color: var(--p-900); }
.empty-state p{ color: var(--ink-soft); max-width:360px; margin: 8px auto 24px; }

/* dashboard tables (orders/guests use inline-styled tables) */
table{ color: var(--ink); }
thead th{ color: var(--ink-soft) !important; border-bottom:1px solid var(--line) !important; text-align:left; }
tbody tr{ border-bottom:1px solid var(--line-soft); transition: background var(--dur-1) var(--ease); }
tbody tr:hover{ background: rgba(207,169,99,.05); }

/* ---------- Wizard shell ---------- */
.wizard-shell{ min-height:100vh; display:flex; flex-direction:column; }
.wizard-top{
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(15,12,22,.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.wizard-top__inner{ display:flex; align-items:center; justify-content:space-between; }
.wizard-top__brand{ display:flex; align-items:center; font-weight:800; color: var(--p-800); }
.wizard-exit{ font-size: 13.5px; color: var(--ink-soft); transition: color var(--dur-1) var(--ease); }
.wizard-exit:hover{ color: var(--p-600); }

.stepper{ display:flex; align-items:center; justify-content:center; gap: 6px; padding: 22px 20px; flex-wrap:wrap; }
.stepper__item{ display:flex; align-items:center; gap:9px; font-size:13px; color: var(--ink-faint); font-weight:600; transition: color var(--dur-2) var(--ease); }
.stepper__dot{
  width:26px;height:26px;border-radius:50%;
  background: rgba(255,255,255,.06); color: var(--ink-faint);
  border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
  transition: all var(--dur-2) var(--ease-soft);
}
.stepper__item.is-active .stepper__dot{
  background: linear-gradient(140deg, #e7cc98, var(--gold));
  color: var(--on-gold); border-color: transparent;
  box-shadow: 0 0 0 5px rgba(207,169,99,.14), 0 8px 20px -8px rgba(207,169,99,.8);
  animation: step-halo 4.5s var(--ease-inout) infinite;
}
@keyframes step-halo{
  0%,100%{ box-shadow: 0 0 0 4px rgba(207,169,99,.12), 0 8px 20px -8px rgba(207,169,99,.7); }
  50%    { box-shadow: 0 0 0 9px rgba(207,169,99,0),   0 8px 20px -8px rgba(207,169,99,.9); }
}
.stepper__item.is-active{ color: var(--p-800); }
.stepper__item.is-done .stepper__dot{ background: rgba(207,169,99,.18); color: var(--p-600); border-color: rgba(207,169,99,.4); }
.stepper__item.is-done{ color: var(--ink-soft); }
.stepper__sep{ width:22px; height:1px; background: linear-gradient(90deg, rgba(207,169,99,.05), rgba(207,169,99,.35), rgba(207,169,99,.05)); margin: 0 2px; }
@media (max-width: 720px){ .stepper__item span.label{ display:none; } }
@media (prefers-reduced-motion: reduce){ .stepper__item.is-active .stepper__dot{ animation:none; } }

.wizard-body{ flex:1; padding: 34px 0 64px; }
.wizard-foot{
  position: sticky; bottom:0;
  background: rgba(15,12,22,.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.wizard-foot__inner{ display:flex; justify-content:space-between; align-items:center; }

.step-head{ text-align:center; margin-bottom: 34px; }
.step-head h1{ font-size: 27px; color: var(--p-900); letter-spacing:-.015em; }
.step-head p{ color: var(--ink-soft); font-size: 14.5px; }

.event-grid{
  background: linear-gradient(165deg, rgba(207,169,99,.07), rgba(255,255,255,.015));
  border:1px solid var(--line-soft);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
}
.event-grid h3{ font-size: 15px; color: var(--p-700); margin-bottom:14px; letter-spacing:.02em; }

.acara-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
.acara-card{
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 24px 16px; text-align:center; cursor:pointer;
  background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,0) 60%), var(--surface);
  position:relative; overflow:hidden;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.acara-card:hover{ transform: translateY(-4px); border-color: rgba(207,169,99,.4); box-shadow: var(--shadow-sm); }
.acara-card input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.acara-card .emoji{ font-size:32px; margin-bottom:10px; display:block; transition: transform var(--dur-2) var(--ease-soft); }
.acara-card:hover .emoji{ transform: scale(1.14) rotate(-5deg); }
.acara-card .name{ font-weight:700; font-size:14.5px; color: var(--p-800); }
.acara-card.is-soon{ opacity:.42; cursor:not-allowed; }
.acara-card.is-soon input{ cursor:not-allowed; }
.acara-card small{ display:block; color: var(--ink-faint); font-size:11px; margin-top:5px; }
.acara-card:has(input:checked){
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(207,169,99,.2), rgba(109,33,64,.22));
  box-shadow: 0 0 0 1px rgba(207,169,99,.4), var(--shadow-gold);
}

/* ---------- Photo grid ---------- */
.photo-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap:11px; margin-top:16px; }
.photo-thumb{
  position:relative; aspect-ratio:1/1; border-radius: var(--radius-sm); overflow:hidden;
  border:1px solid var(--line-soft);
  transition: transform var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease);
  animation: photo-in var(--dur-3) var(--ease-soft) both;
}
@keyframes photo-in{
  from{ opacity:0; transform: scale(.9); }
  to  { opacity:1; transform:none; }
}
.photo-thumb:hover{ transform: translateY(-3px) scale(1.02); border-color: rgba(207,169,99,.45); }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease-soft); }
.photo-thumb:hover img{ transform: scale(1.08); }
.photo-thumb button{ position:absolute; top:5px; right:5px; width:24px;height:24px;border-radius:50%; background:rgba(0,0,0,.65); color:#fff; border:1px solid rgba(255,255,255,.18); font-size:12px; transition: background var(--dur-1) var(--ease); }
.photo-thumb button:hover{ background: rgba(206,70,70,.85); }

/* ---------- Preview mobile frame (hero) — realistic phone mockup ---------- */
.preview-frame-wrap{ display:flex; justify-content:center; padding: 24px 0; }
.preview-frame{
  position:relative;
  width: 380px; height: 720px;
  border-radius: 46px;
  padding: 16px 10px;
  background: linear-gradient(155deg, #4b4652, #1b1820 55%, #060608);
  box-shadow: var(--shadow), 0 0 60px -24px rgba(207,169,99,.5), inset 0 0 0 1.5px rgba(207,169,99,.26);
  animation: preview-in var(--dur-4) var(--ease-soft) both;
}
@keyframes preview-in{
  from{ opacity:0; transform: translateY(30px) scale(.96); }
  to  { opacity:1; transform:none; }
}
.preview-frame::before{ /* volume buttons */
  content:''; position:absolute; left:-3px; top:16%; width:3px; height:8%;
  background:#3a3340; border-radius:3px 0 0 3px;
}
.preview-frame::after{ /* power button */
  content:''; position:absolute; right:-3px; top:25%; width:3px; height:11%;
  background:#3a3340; border-radius:0 3px 3px 0;
}
.preview-frame__notch{
  position:absolute; top:28px; left:50%; transform:translateX(-50%);
  width:110px; height:24px;
  background:#0a0a0c; border-radius:999px; z-index:3;
}
.preview-frame__screen{
  position:relative; width:100%; height:100%;
  border-radius:32px; overflow:hidden; background:#fff; isolation:isolate;
}
.preview-frame__screen iframe{ display:block; width:100%; height:100%; border:0; }
@media (max-width: 460px){
  .preview-frame{ width: 100%; max-width: 360px; height: 640px; border-radius:40px; padding:12px 8px; }
  .preview-frame__notch{ width:92px; height:20px; top:22px; }
}

/* ---------- Package cards ---------- */
.pkg-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:20px; }
.pkg-card{ padding: 30px 24px; text-align:center; position:relative; overflow:hidden; }
.pkg-card h3{ color: var(--p-900); }
.pkg-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow); }
.pkg-card.is-reco{
  border-color: rgba(207,169,99,.45);
  box-shadow: var(--shadow), 0 0 50px -22px rgba(207,169,99,.6);
  background: linear-gradient(170deg, rgba(207,169,99,.11), rgba(109,33,64,.16) 55%, rgba(255,255,255,0)), var(--surface-2);
}
.pkg-card.is-reco::before{ opacity:1; }
.pkg-card__star{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  background: linear-gradient(135deg,#f0d9a8, var(--gold) 60%, #a8813e);
  color: var(--on-gold); font-size:11.5px; font-weight:800; letter-spacing:.03em;
  padding:5px 16px; border-radius:0 0 12px 12px;
  box-shadow: 0 8px 20px -8px rgba(207,169,99,.8);
  z-index:2;
}
.pkg-card__price{ font-size:29px; font-weight:800; color: var(--p-800); margin: 10px 0; letter-spacing:-.02em; }
.pkg-card ul{ text-align:left; font-size:13.5px; color: var(--ink-soft); margin: 18px 0; }
.pkg-card ul li{ padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.pkg-card ul li:last-child{ border-bottom:none; }

.pkg-card__discount{
  display:inline-flex; align-items:center; gap:5px;
  background: linear-gradient(135deg, #b3253f, #e0524f);
  color:#fff; font-size:12px; font-weight:800; letter-spacing:.2px;
  padding:5px 13px; border-radius:999px; margin-bottom:8px;
  box-shadow: 0 8px 20px -8px rgba(224,82,79,.75);
  animation: pkg-discount-pulse 3.6s var(--ease-inout) infinite;
}
.pkg-card__price-row{ display:flex; flex-direction:column; align-items:center; gap:0; margin:8px 0 4px; }
.pkg-card__price-old{ font-size:14.5px; font-weight:600; color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 1.5px; }
.pkg-card__price-row .pkg-card__price{ margin: 2px 0 0; }
@keyframes pkg-discount-pulse{
  0%, 100% { transform: scale(1);    box-shadow: 0 8px 20px -8px rgba(224,82,79,.6); }
  50%      { transform: scale(1.05); box-shadow: 0 12px 28px -8px rgba(224,82,79,.9); }
}
@media (prefers-reduced-motion: reduce){
  .pkg-card__discount{ animation:none; }
}

/* ---------- Scroll-reveal (public pages) ---------- */
/* Slow, layered entrances. The variant classes are assigned by
   scroll-reveal.js based on the element's role in the layout. */
.reveal-onscroll{
  opacity:0;
  transform: translateY(38px);
  filter: blur(7px);
  transition: opacity var(--dur-4) var(--ease-soft),
              transform var(--dur-4) var(--ease-soft),
              filter var(--dur-3) var(--ease-soft);
  will-change: opacity, transform, filter;
}
.reveal-onscroll.reveal-left { transform: translateX(-46px); }
.reveal-onscroll.reveal-right{ transform: translateX(46px); }
.reveal-onscroll.reveal-scale{ transform: scale(.93); }
.reveal-onscroll.reveal-tilt { transform: translateY(40px) rotateX(9deg); transform-origin: top center; }
.reveal-onscroll.is-visible{ opacity:1; transform:none; filter: blur(0); }
@media (prefers-reduced-motion: reduce){
  .reveal-onscroll{ opacity:1; transform:none; filter:none; transition:none; }
}

.success-hero{ text-align:center; padding: 46px 20px; }
.success-hero .check{
  width:78px;height:78px;border-radius:50%;
  background: var(--ok-bg); border:1px solid rgba(116,214,162,.35);
  color: var(--ok); font-size:34px;
  display:flex; align-items:center; justify-content:center; margin: 0 auto 20px;
  animation: check-halo 3.8s var(--ease-inout) infinite;
}
@keyframes check-halo{
  0%,100%{ box-shadow: 0 0 0 0 rgba(116,214,162,.28); }
  50%    { box-shadow: 0 0 0 18px rgba(116,214,162,0); }
}
.link-box{
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(120deg, rgba(207,169,99,.12), rgba(255,255,255,.02));
  border:1px solid rgba(207,169,99,.28);
  border-radius: var(--radius-sm); padding: 13px 15px; font-size:14px; color: var(--p-700); word-break:break-all;
}

/* ---------- Public footer: brand, contact, payment methods ---------- */
.site-footer{ margin-top: 70px; padding-top: 50px; border-top: 1px solid var(--line); position:relative; }
.site-footer::before{
  content:''; position:absolute; top:-1px; left:20%; right:20%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(207,169,99,.65), transparent);
}
.site-footer__grid{ display:grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 40px; margin-bottom: 34px; }
.site-footer__logo{ display:flex; align-items:center; font-weight:800; font-size:17px; color: var(--p-800); margin-bottom:12px; }
.site-footer__brand p{ color: var(--ink-soft); font-size:13.5px; max-width:300px; margin:0; }
.site-footer h4{ font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); margin-bottom:16px; opacity:.9; }

.site-footer__contact{ display:flex; flex-direction:column; gap:13px; }
.site-footer__contact li{ list-style:none; }
.site-footer__contact a{ display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color: var(--ink-soft); transition: color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-soft); }
.site-footer__contact a:hover{ color: var(--p-700); transform: translateX(4px); }
.site-footer__contact svg{ flex-shrink:0; }

.pay-badges{ display:flex; flex-wrap:wrap; gap:9px; }
.pay-badge{
  display:inline-flex; align-items:center; gap:5px; height:31px; padding:0 13px; border-radius:9px;
  font-weight:800; font-size:12.5px; letter-spacing:.01em; color:#fff;
  box-shadow: var(--shadow-sm); line-height:1;
  transition: transform var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease);
}
.pay-badge:hover{ transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(0,0,0,.9); }
.pay-badge--qris{ background: linear-gradient(135deg,#e04a4f,#a8112a); }
.pay-badge--bca{ background: linear-gradient(135deg,#0b3c73,#00539f); color:#eaf2fb; border:1px solid rgba(255,255,255,.14); }
.pay-badge--gopay{ background: linear-gradient(135deg,#0d8fc4,#00477f); }
.pay-badge--ovo{ background: linear-gradient(135deg,#5c359a,#3d1f70); }
.pay-badge--dana{ background: linear-gradient(135deg,#1178c4,#0a5590); }

.site-footer__links{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:16px; }
.site-footer__links a{ font-size:13.5px; color: var(--ink-soft); transition: color var(--dur-1) var(--ease); }
.site-footer__links a:hover{ color: var(--p-700); }

.site-footer__bottom{ text-align:center; color:var(--ink-faint); font-size:13px; padding: 24px 0 34px; border-top: 1px solid var(--line-soft); }

@media (max-width:760px){
  .site-footer__grid{ grid-template-columns: 1fr; text-align:center; gap:30px; }
  /* The logo is a flex row, so centring the column text alone leaves it
     hugging the left edge — centre the row itself too. */
  .site-footer__logo{ justify-content:center; }
  .site-footer__brand p{ margin:0 auto; }
  .site-footer__contact a{ justify-content:center; }
  .pay-badges{ justify-content:center; }
  .site-footer__links{ justify-content:center; }
}

/* ---------- Pointer tilt (premium-fx.js writes --tx / --ty) ----------
   Declared last, and with the extra [data-tilt] attribute, so these win over
   the plain :hover transforms defined for the same cards above. */
.tpl-card[data-tilt], .pkg-card[data-tilt], .step-card[data-tilt], .card[data-tilt]{
  transform: perspective(1100px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translate3d(0, var(--tl, 0px), 0);
  transform-style: preserve-3d;
  transition: transform var(--dur-3) var(--ease-soft),
              opacity var(--dur-4) var(--ease-soft),
              filter var(--dur-3) var(--ease-soft),
              box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
/* A tilt card is also a scroll-reveal target, and the tilt transform above
   outranks .reveal-onscroll — so its entrance offset is restated here. */
.tpl-card[data-tilt].reveal-onscroll:not(.is-visible),
.pkg-card[data-tilt].reveal-onscroll:not(.is-visible),
.step-card[data-tilt].reveal-onscroll:not(.is-visible),
.card[data-tilt].reveal-onscroll:not(.is-visible){
  transform: translate3d(0, 40px, 0) scale(.96);
}
.tpl-card[data-tilt]:hover, .pkg-card[data-tilt]:hover, .step-card[data-tilt]:hover, .card[data-tilt]:hover{
  --tl: -9px;
  transform: perspective(1100px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translate3d(0, var(--tl), 0);
}
@media (prefers-reduced-motion: reduce){
  .tpl-card[data-tilt], .pkg-card[data-tilt], .step-card[data-tilt], .card[data-tilt]{ transform:none; transition:none; }
}

/* ---------- Small shared utilities ---------- */
.text-gold{ color: var(--gold); }
.hairline{ height:1px; background: linear-gradient(90deg, transparent, rgba(207,169,99,.4), transparent); border:0; margin: 34px 0; }

/* premium badge used on template cards in the wizard */
.tpl-card__badge{
  background: linear-gradient(135deg, #f0d9a8, var(--gold) 55%, #a8813e) !important;
  color: var(--on-gold) !important;
  font-weight: 800;
  letter-spacing:.02em;
  box-shadow: 0 6px 16px -6px rgba(207,169,99,.8);
  z-index:4;
}

/* CTA panel at the end of the landing page */
.cta-panel{
  position:relative; overflow:hidden;
  text-align:center;
  background:
    radial-gradient(700px 320px at 50% -30%, rgba(207,169,99,.2), transparent 70%),
    linear-gradient(165deg, rgba(109,33,64,.34), rgba(21,18,30,.9));
}
.cta-panel .orn{ width:120px; height:120px; margin:0 auto 6px; opacity:.55; }
.cta-panel h2{ color: var(--p-900); }

/* the CTA panel clips its own overflow, so its corner pieces sit inside it */
.cta-panel .orn-corner{ width:150px; height:150px; opacity:.22; }
.cta-panel .orn-corner--tl{ top:6px; left:6px; }
.cta-panel .orn-corner--br{ bottom:6px; right:6px; }

/* Scaled down rather than dropped on small screens — at 150px the filigree
   would span half of a phone-width panel. These live here, next to the rules
   they override, because those share their specificity and would otherwise
   win on source order from anywhere further up the file. */
@media (max-width: 640px){ .cta-panel .orn-corner{ width:104px; height:104px; } }
@media (max-width: 420px){ .cta-panel .orn-corner{ width:84px; height:84px; } }

/* ==========================================================================
   UPGRADE NOTICE — the shared "this feature needs a higher package" block
   (app/Views/partials/upgrade_notice.php). Message and button sit on one row
   on desktop and stack on narrow screens, so the call to action is never
   pushed off the edge of a card.
   ========================================================================== */
.upgrade-notice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.upgrade-notice__text{ flex:1 1 260px; min-width:0; line-height:1.6; }
.upgrade-notice__btn{ flex:0 0 auto; white-space:nowrap; }

/* Inside a card the surrounding panel already frames the message, so the
   notice drops the alert chrome and reads as a hint with a button. */
.upgrade-notice--inline{
  margin-top: 4px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line-soft);
  background: rgba(255,255,255,.03);
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ==========================================================================
   TEMPLATE SECTIONS — the category bands ("Tema Gaya", "Tema Musim", "Tema
   Keagamaan") that group the template grid on the picker and the public
   gallery, so 20 cards read as a browsable catalogue rather than one wall.
   ========================================================================== */
.tpl-section{ margin-bottom: 46px; }
.tpl-section:last-of-type{ margin-bottom: 20px; }

.tpl-section__head{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 6px;
}
.tpl-section__title{
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(19px, 3.4vw, 24px);
  font-weight: 600;
  margin: 0;
  flex: 0 0 auto;
}
.tpl-section__count{
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.tpl-section__rule{
  flex: 1 1 auto;
  height: 1px;
  min-width: 20px;
  background: linear-gradient(90deg, var(--line-soft), transparent);
}
.tpl-section__desc{
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 18px;
  max-width: 560px;
}

@media (max-width: 520px){
  .tpl-section__head{ flex-wrap: wrap; gap: 8px; }
  .tpl-section__rule{ display:none; }
}

/* ==========================================================================
   PHOTO PICKER PREVIEWS — what the "Foto & Fitur" step shows the moment a
   file is chosen, before anything is uploaded (the file never leaves the
   browser until the step is submitted).
   ========================================================================== */
.avatar-preview{
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-soft);
}
.avatar-preview__img{ width:100%; height:100%; object-fit: cover; }
.avatar-preview__empty{ font-size: 30px; opacity: .35; line-height: 1; }

/* Marks the tiles that are only a local preview, so they read differently
   from gallery photos that are already saved on the server. */
.photo-thumb--new{ border-color: rgba(207,169,99,.55); }
.photo-thumb__badge{
  position: absolute;
  bottom: 5px;
  left: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: var(--gold);
  border: 1px solid rgba(207,169,99,.4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- Low-memory mode: touch devices & small screens ----------
   iOS Safari kills the tab ("A problem repeatedly occurred") once the page's
   compositing memory runs out. Huge blurred, always-animating blobs, a fixed
   full-screen blend layer and dozens of blur-filtered reveal layers each
   allocate their own GPU texture — fine on a desktop, fatal on a phone that
   is also rendering live invitation previews. Keep the look, drop the cost. */
@media (hover: none), (pointer: coarse), (max-width: 760px){
  .bg-ambient__blob{ filter:none; will-change:auto; animation:none; opacity:.35; }
  .bg-ambient__blob--4, .bg-ambient__blob--5{ display:none; }
  .bg-ambient__stars{ animation:none; }
  .bg-ambient__dust, .bg-ambient__spot{ display:none; }
  body::after{ mix-blend-mode:normal; opacity:.18; }
  .device-stack::before{ filter:none; animation:none; }
  .device-tablet, .device-phone{ filter:none; animation:none; }
  .hero-decor{ filter:none; }
  .reveal-onscroll, .reveal-onscroll.is-visible{ filter:none; will-change:auto; }
  /* Sliding in from the side pushes full-width blocks past the screen edge
     until they land, which shows up as a sideways scroll — rise instead. */
  .reveal-onscroll.reveal-left:not(.is-visible),
  .reveal-onscroll.reveal-right:not(.is-visible){ transform: translateY(38px); }

  /* A fast flick is where the tab dies: every frame of momentum scrolling
     re-composites each fixed layer and re-blurs whatever slides under a
     backdrop-filter. So on phones the ambient ground is one static fixed
     layer (body::before) — no blob layer, no SVG-noise grain tile — and the
     sticky bars are plain translucent fills instead of live blurs. */
  .bg-ambient{ display:none; }
  body::after{ display:none; }
  .topbar, .wizard-top, .wizard-foot{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .topbar{ background: rgba(15,12,22,.94); }
  .wizard-top{ background: rgba(15,12,22,.92); }
  .wizard-foot{ background: rgba(15,12,22,.96); }

  /* Always-on animations each keep a layer repainting (text sheen, pulsing
     box-shadows) for as long as the page is open. */
  .gold-text, .hero-grid .eyebrow, .orn-divider .orn, .float-slow, .float-slower,
  .stepper__item.is-active .stepper__dot, .pkg-card__discount, .empty-state .icon{ animation:none; }
  .sparkle{ animation:none; opacity:.6; }

  /* The tilt rules give every card a permanent 3D layer; there is no pointer
     to tilt toward here. The reveal offset rule is more specific, so the
     entrance still plays. */
  .tpl-card[data-tilt], .pkg-card[data-tilt], .step-card[data-tilt], .card[data-tilt]{ transform:none; transform-style:flat; }
  .orn-corner{ transform:none; }
  .orn-corner--tr{ transform: scaleX(-1); }
  .orn-corner--bl{ transform: scaleY(-1); }
  .orn-corner--br{ transform: scale(-1); }
}
.reveal-onscroll.is-visible{ will-change:auto; }