:root {
  --bg: #050610;
  --bg-soft: #090d1d;
  --card: rgba(255,255,255,.072);
  --card-strong: rgba(255,255,255,.105);
  --line: rgba(255,255,255,.14);
  --text: #f8fbff;
  --muted: #aeb8ce;
  --soft: #dce8ff;
  --cyan: #25c7f8;
  --magenta: #d12ff6;
  --green: #31d07c;
  --gold: #ffd166;
  --theme-a: #a10f32;
  --theme-b: #ff6f9e;
  --theme-c: #fff3f6;
  --shadow: 0 28px 90px rgba(0,0,0,.42);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--theme-a) 46%, transparent), transparent 25%), radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--theme-b) 38%, transparent), transparent 26%), radial-gradient(circle at 56% 102%, color-mix(in srgb, var(--theme-c) 18%, transparent), transparent 34%), linear-gradient(180deg, var(--bg), var(--bg-soft) 48%, #04050a); transition: background .45s ease; }
body[data-theme="wedding"] { --theme-a: #9b0f2d; --theme-b: #ff7aa8; --theme-c: #fff1f5; --gold: #ffd6a6; }
body[data-theme="birthday"] { --theme-a: #e83e8c; --theme-b: #8b5cf6; --theme-c: #ffe066; --gold: #ffe066; }
body[data-theme="conference"] { --theme-a: #0ea5e9; --theme-b: #2563eb; --theme-c: #a7f3ff; --gold: #8be9ff; }
body[data-theme="celebration"] { --theme-a: #b45309; --theme-b: #dc2626; --theme-c: #22c55e; --gold: #f8d477; }
a { color: inherit; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(5,6,16,.88); backdrop-filter: blur(18px); }
.nav { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mark { width: 42px; height: 42px; border-radius: 15px; background: linear-gradient(135deg, var(--theme-a), var(--theme-b)); box-shadow: 0 0 34px color-mix(in srgb, var(--theme-b) 45%, transparent); display: grid; place-items: center; font-weight: 950; }
.brand strong { display: block; letter-spacing: .01em; }
.brand span span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.navlinks { display: flex; align-items: center; gap: 14px; color: var(--soft); font-size: 14px; }
.navlinks a { text-decoration: none; }
.btn { border: 0; border-radius: 999px; padding: 13px 18px; font-weight: 950; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--theme-a), var(--theme-b)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 18px 44px color-mix(in srgb, var(--theme-a) 28%, transparent); }
.btn.secondary { background: rgba(255,255,255,.08); border: 1px solid var(--line); box-shadow: none; }
.btn.full { width: 100%; }
main { padding-bottom: 90px; }
section { padding: 46px 0; }
.hero { min-height: calc(100vh - 76px); display: grid; align-items: center; gap: 24px; padding-top: 32px; }
.theme-switcher { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-chip { border: 1px solid var(--line); color: var(--soft); background: rgba(255,255,255,.07); border-radius: 999px; padding: 10px 14px; font-weight: 850; cursor: pointer; backdrop-filter: blur(14px); }
.theme-chip.active { color: #fff; border-color: color-mix(in srgb, var(--theme-b) 52%, white 10%); background: linear-gradient(135deg, color-mix(in srgb, var(--theme-a) 62%, transparent), color-mix(in srgb, var(--theme-b) 56%, transparent)); }
.hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 30px; }
.eyebrow { color: color-mix(in srgb, var(--theme-b) 55%, #8be9ff); font-weight: 950; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; }
h1 { font-size: clamp(42px, 5.7vw, 78px); line-height: .94; letter-spacing: -.055em; margin: 16px 0 18px; }
h2 { font-size: clamp(30px, 4.7vw, 56px); line-height: .96; letter-spacing: -.045em; margin: 0; }
h3 { margin: 0; }
.lead { color: var(--muted); font-size: 19px; line-height: 1.7; max-width: 740px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.panel, .card, .package, .quote-box, .proof-card, .stat, .journey-card, .media-card { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)); box-shadow: var(--shadow); backdrop-filter: blur(22px); }
.hero-panel { padding: 22px; position: relative; overflow: hidden; }
.hero-panel:before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 180deg, color-mix(in srgb, var(--theme-a) 36%, transparent), color-mix(in srgb, var(--theme-b) 32%, transparent), color-mix(in srgb, var(--theme-c) 20%, transparent), rgba(49,208,124,.12), color-mix(in srgb, var(--theme-a) 36%, transparent)); filter: blur(38px); opacity: .5; animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.event-card { position: relative; min-height: 500px; border-radius: 20px; border: 1px solid var(--line); background: rgba(5,6,16,.70); padding: 24px; display: grid; gap: 22px; overflow: hidden; }
.event-card:after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 250px; height: 250px; border-radius: 50%; background: color-mix(in srgb, var(--theme-b) 25%, transparent); filter: blur(8px); }
.event-card-top { position: relative; display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; background: rgba(255,255,255,.07); color: var(--soft); font-size: 12px; font-weight: 850; }
.event-card h2 { position: relative; font-size: clamp(28px, 3.8vw, 46px); overflow-wrap: anywhere; }
.event-card p { position: relative; color: var(--muted); line-height: 1.6; }
.visual-stack { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .92fr; gap: 14px; align-items: stretch; }
.phone-mock, .scan-mock { min-height: 185px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045)); padding: 18px; display: grid; align-content: end; overflow: hidden; position: relative; }
.phone-mock:before { content: ""; position: absolute; inset: 18px 38px 54px; border-radius: 26px; border: 2px solid rgba(255,255,255,.22); background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--theme-c) 30%, transparent), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--theme-a) 32%, transparent), rgba(255,255,255,.04)); }
.phone-glow { position: absolute; width: 170px; height: 170px; right: -40px; top: -30px; border-radius: 50%; background: color-mix(in srgb, var(--theme-b) 24%, transparent); filter: blur(6px); }
.phone-label, .phone-mock strong, .phone-mock small, .scan-mock strong, .scan-mock small { position: relative; z-index: 1; }
.phone-label { color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 950; }
.phone-mock strong, .scan-mock strong { font-size: 28px; }
.phone-mock small, .scan-mock small { color: var(--muted); }
.scan-mock { align-content: center; grid-template-columns: 88px 1fr; align-items: center; }
.qr-box { width: 74px; height: 74px; border-radius: 16px; background: linear-gradient(90deg, #fff 10px, transparent 10px 16px, #fff 16px 28px, transparent 28px), linear-gradient(#fff 10px, transparent 10px 16px, #fff 16px 28px, transparent 28px); opacity: .9; box-shadow: 0 0 0 10px rgba(255,255,255,.06); }
.event-flow { position: relative; z-index: 1; display: grid; gap: 10px; }
.flow-row { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; color: var(--soft); }
.flow-row b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--theme-a), var(--theme-b)); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 16px; box-shadow: none; }
.stat strong { display: block; font-size: 24px; margin-bottom: 5px; }
.stat span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-head p { color: var(--muted); line-height: 1.58; max-width: 590px; margin: 0; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.journey-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.journey-card { padding: 16px; display: grid; gap: 10px; box-shadow: none; }
.journey-card small, .media-card span, .card small, .proof-body small, .package .meta { color: var(--gold); font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .11em; }
.journey-card p, .card p, .package p, .proof-card p { color: var(--muted); margin:0; line-height:1.55; }
.scene { min-height: 132px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--theme-a) 34%, transparent), color-mix(in srgb, var(--theme-b) 25%, transparent)); position: relative; overflow: hidden; }
.scene:after { content: ""; position: absolute; inset: 18px; border-radius: 999px; background: radial-gradient(circle, rgba(255,255,255,.38), transparent 56%); filter: blur(12px); }
.scene-invite:before { content: ""; position: absolute; width: 58px; height: 86px; left: 28px; bottom: 18px; border-radius: 14px; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.scene-approve:before { content: "✓"; position: absolute; right: 28px; bottom: 24px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; font-weight: 950; background: rgba(255,255,255,.16); }
.scene-scan:before { content: ""; position: absolute; left: 28px; bottom: 24px; width: 68px; height: 68px; border-radius: 16px; background: repeating-linear-gradient(90deg, white 0 8px, transparent 8px 14px), repeating-linear-gradient(0deg, rgba(255,255,255,.85) 0 8px, transparent 8px 14px); opacity: .76; }
.scene-handover:before { content: "DATA"; position: absolute; right: 24px; bottom: 28px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.14); font-weight: 950; }
.media-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-auto-rows: 170px; gap: 16px; }
.media-card { padding: 20px; display: grid; align-content: end; min-height: 170px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--theme-c) 35%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--theme-a) 42%, #050610), color-mix(in srgb, var(--theme-b) 30%, #050610)); }
.media-card.tall { grid-row: span 2; min-height: 356px; }
.media-card strong { font-size: 24px; }
.card { padding: 20px; box-shadow: none; min-height: 170px; }
.card strong { display: block; font-size: 19px; margin: 10px 0; }
.package { padding: 22px; display: grid; gap: 14px; box-shadow: none; }
.package h3 { font-size: 25px; }
.proof-card { overflow: hidden; box-shadow: none; text-decoration: none; display: grid; transition: transform .2s ease, border-color .2s ease; }
.proof-card:hover, .package:hover, .card:hover, .journey-card:hover, .media-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--theme-b) 45%, white 10%); }
.proof-body { padding: 18px; display: grid; gap: 8px; }
.proof-body strong { font-size: 21px; }
.quote-box { padding: 24px; }
form { display: grid; gap: 13px; }
label { display: grid; gap: 7px; color: var(--soft); font-weight: 850; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.075); color: #fff; padding: 14px; font-size: 16px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--theme-b) 60%, white 10%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-b) 13%, transparent); }
textarea { min-height: 118px; resize: vertical; }
option { color: #111827; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.check { display: flex; gap: 8px; align-items: flex-start; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.045); color: var(--soft); font-weight: 760; }
.check input { width: auto; margin: 2px 0 0; }
.message { display: none; padding: 12px; border-radius: 14px; border: 1px solid var(--line); white-space: pre-wrap; line-height: 1.5; }
.message.show { display: block; }
.message.success { color: #c7ffd9; border-color: rgba(49,208,124,.45); background: rgba(49,208,124,.12); }
.premium-note { border-left: 4px solid var(--gold); padding: 14px 16px; background: rgba(255,209,102,.08); color: #ffe9a8; border-radius: 14px; line-height: 1.55; }
footer { padding: 34px 0; border-top: 1px solid var(--line); color: var(--muted); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { body { background: radial-gradient(circle at 10% 8%, rgba(209,47,246,.22), transparent 25%), linear-gradient(180deg, var(--bg), var(--bg-soft)); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (max-width: 980px) { .hero-grid, .grid, .grid.two, .stats, .journey-grid, .media-grid, .visual-stack { grid-template-columns: 1fr; } .media-card.tall { grid-row: span 1; min-height: 190px; } .section-head { display: block; } .nav { align-items: flex-start; flex-direction: column; padding: 14px 0; } .navlinks, .theme-switcher { flex-wrap: wrap; } .event-card { min-height: auto; } }