:root {
  --navy: #071431;
  --navy-soft: #10234e;
  --cream: #fff8e9;
  --gold: #ffd86a;
  --cyan: #55d7df;
  --ink: #102042;
  --country: #d52d28;
  color-scheme: dark;
  font-family: Inter, ui-rounded, "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: white; background: radial-gradient(circle at 78% 10%, color-mix(in srgb, var(--country) 36%, transparent), transparent 32%), linear-gradient(135deg, #050d21, var(--navy) 48%, #081838); }
body.thailand { --country: #174fb1; }
body.korea { --country: #6a2a82; }
body.china { --country: #08723d; }
body.philippines { --country: #075da8; }
body.malaysia { --country: #007b72; }
body.indonesia { --country: #b0271c; }
body.italy { --country: #0b7a34; }
body.russia { --country: #1e3a8c; }
body.germany { --country: #1e5631; }
body.norway { --country: #2a6f97; }
body.france { --country: #1b3a8f; }
a { color: inherit; }
.invite-shell { min-height: 100vh; overflow: hidden; position: relative; }
.invite-shell::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .12; background-image: radial-gradient(circle at center, #fff 0 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.invite-header { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px clamp(18px, 5vw, 74px); border-bottom: 1px solid rgba(255,216,106,.26); background: rgba(5,13,33,.82); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg,var(--gold),#ffa95e); color: var(--navy); font-weight: 1000; box-shadow: 0 0 25px rgba(255,216,106,.25); }
.brand strong { display: block; font-size: 17px; }.brand small { display: block; color: #aab8dc; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.header-links { display: flex; align-items: center; gap: 10px; }
.header-links a { padding: 10px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #dfe8ff; font-size: 12px; font-weight: 800; text-decoration: none; }
.version { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.invite-main { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(300px, .82fr) minmax(380px, 1.18fr); align-items: center; gap: clamp(32px, 6vw, 86px); max-width: 1220px; min-height: calc(100vh - 74px); margin: auto; padding: clamp(38px, 6vw, 80px) clamp(20px, 5vw, 66px); }
.passport-wrap { position: relative; justify-self: center; width: min(100%, 470px); }
.passport-glow { position: absolute; inset: 10% -8%; border-radius: 50%; background: color-mix(in srgb, var(--country) 60%, #5ce1ea); filter: blur(55px); opacity: .34; }
.passport-card { position: relative; margin: 0; padding: 8px; border: 1px solid rgba(255,216,106,.7); border-radius: 26px; background: linear-gradient(145deg,rgba(255,216,106,.25),rgba(255,255,255,.04)); box-shadow: 0 35px 80px rgba(0,0,0,.46),0 0 44px color-mix(in srgb,var(--country) 22%,transparent); transform: perspective(1200px) rotateY(3deg) rotateX(1deg); transition: transform .35s ease,box-shadow .35s ease; }
.passport-card:hover { transform: perspective(1200px) rotateY(0) translateY(-6px); box-shadow: 0 42px 90px rgba(0,0,0,.55),0 0 70px color-mix(in srgb,var(--country) 38%,transparent); }
.passport-card img { display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 19px; }
.passport-placeholder { aspect-ratio:2/3; display:grid; place-items:center; padding:28px; border-radius:19px; text-align:center; background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.23),transparent 26%),linear-gradient(145deg,#fff7e7,#f0cad1 48%,#bd2738); color:#54111d; }
.passport-placeholder span { display:block; font-size:84px; filter:drop-shadow(0 12px 12px rgba(57,10,20,.2)); }
.passport-placeholder strong { display:block; margin-top:18px; font:800 clamp(25px,4vw,43px)/1.02 Georgia,serif; letter-spacing:.04em; text-transform:uppercase; }
.passport-placeholder small { display:block; margin-top:12px; font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.passport-card figcaption { position: absolute; right: 19px; bottom: 18px; left: 19px; padding: 9px 12px; border-radius: 12px; background: rgba(4,10,25,.74); backdrop-filter: blur(10px); color: #f7e8b7; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.invite-copy { max-width: 650px; }
.eyebrow { margin: 0 0 14px; color: var(--cyan); font-size: 11px; font-weight: 1000; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(43px, 6.4vw, 82px); line-height: .96; letter-spacing: -.055em; }
h1 span { display: block; margin-top: 10px; color: var(--gold); }
.lead { max-width: 620px; margin: 24px 0 0; color: #c5d1ec; font-family: Georgia, serif; font-size: clamp(18px,2vw,24px); line-height: 1.55; }
.language-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 14px; border: 1px solid color-mix(in srgb,var(--country) 65%,white); border-radius: 999px; background: color-mix(in srgb,var(--country) 22%,transparent); font-size: 12px; font-weight: 900; }
.features { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 28px 0; padding: 0; list-style: none; }
.features li { min-height: 104px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.055); color: #dce5fb; font-size: 12px; line-height: 1.45; }
.features b { display: block; margin-bottom: 8px; color: white; font-size: 19px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.action { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 21px; border-radius: 16px; font-size: 14px; font-weight: 1000; text-decoration: none; }
.action.primary { background: linear-gradient(110deg,var(--cyan),var(--gold)); color: var(--navy); box-shadow: 0 14px 34px rgba(85,215,223,.2); }
.action.secondary { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: white; }
.action.disabled { cursor: not-allowed; opacity: .58; }
.trust { margin-top: 17px; color: #8998bd; font-size: 11px; line-height: 1.55; }
.invite-footer { display: flex; justify-content: space-between; gap: 18px; padding: 22px clamp(18px,5vw,74px); border-top: 1px solid rgba(255,255,255,.1); color: #8392b8; font-size: 10px; }
@media (max-width: 820px) {
  .invite-header { position: relative; }.header-links a { display: none; }
  .invite-main { grid-template-columns: 1fr; min-height: 0; text-align: center; }
  .invite-copy { order: -1; }.lead { margin-inline: auto; }
  .language-pill { margin-inline: auto; }.actions { justify-content: center; }
  .passport-wrap { width: min(82vw,430px); }
}
@media (max-width: 520px) {
  .invite-main { padding: 32px 17px 48px; }.features { grid-template-columns: 1fr; text-align: left; }
  .features li { min-height: 0; }.action { width: 100%; }.invite-footer { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }