:root {
  --navy: #0f172a;
  --navy-2: #1a365d;
  --blue: #2563eb;
  --blue-soft: #bfdbfe;
  --ink: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;
  --surface: #f8fafc;
  --white: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, #e0e7ff 0, transparent 40%),
    radial-gradient(circle at 85% 90%, #dbeafe 0, transparent 40%),
    var(--surface);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  -webkit-font-smoothing: antialiased;
}

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-sm { width: 14px; height: 14px; }

.card {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid #eef2f7;
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .25), 0 4px 12px rgba(15, 23, 42, .05);
  animation: rise .6s cubic-bezier(.2, .8, .2, 1) both;
}

/* ---------- Header ---------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, #13213f 60%, var(--navy-2) 100%);
  color: var(--white);
  text-align: center;
  padding: 48px 24px 32px;
  overflow: hidden;
}
.hero-pattern { position: absolute; inset: 0; pointer-events: none; }
.hero-pattern .float { position: absolute; color: #fff; opacity: .1; stroke-width: 1.2; --r: 0deg; transform: rotate(var(--r)); animation: bob 7s ease-in-out infinite; }
.f1 { width: 64px; height: 64px; top: 18px; left: -10px; --r: -12deg; }
.f2 { width: 40px; height: 40px; top: 30px; right: 26px; --r: 10deg; animation-delay: -1s; animation-duration: 6s; }
.f3 { width: 46px; height: 46px; top: 46%; left: 18px; animation-delay: -2.5s; animation-duration: 8s; }
.f4 { width: 54px; height: 54px; top: 42%; right: -6px; animation-delay: -4s; }
.f5 { width: 50px; height: 50px; bottom: 26px; left: 26px; --r: -8deg; animation-delay: -3s; animation-duration: 9s; }
.f6 { width: 38px; height: 38px; bottom: 60px; right: 40px; animation-delay: -5s; animation-duration: 6.5s; }
.f7 { width: 30px; height: 30px; top: 12px; left: 46%; animation-delay: -1.5s; animation-duration: 7.5s; }
.f2, .f6 { color: #fde68a; } .f3, .f7 { color: #a5f3fc; } .f5 { color: #fbcfe8; }

.hero > *:not(.hero-pattern) { position: relative; }

.avatar-wrap {
  display: block; position: relative;
  width: 104px; height: 104px; margin: 0 auto 16px;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.avatar-wrap::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(from 0deg, #60a5fa, #a78bfa, #f472b6, #fbbf24, #34d399, #60a5fa);
  animation: spin 8s linear infinite;
  opacity: .85;
}
.avatar {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  display: grid; place-items: center;
  font-size: 34px; font-weight: 700; letter-spacing: -.02em;
  border: 4px solid var(--navy);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.avatar-wrap:hover .avatar, .avatar-wrap:focus-visible .avatar { transform: scale(1.06) rotate(-6deg); }
.avatar-wrap:active .avatar { transform: scale(.94); }
.avatar-wrap:focus-visible { outline: none; }
.avatar-wrap:focus-visible::before { opacity: 1; inset: -8px; }
.hello {
  position: absolute; top: -4px; left: 78%;
  white-space: nowrap;
  background: #fbbf24; color: var(--navy);
  font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 14px 14px 14px 4px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
  transform-origin: bottom left;
  animation: pop .6s .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.wave { display: inline-block; transform-origin: 70% 80%; animation: wave 2.4s 1.1s ease-in-out infinite; }
.avatar-wrap.boing .avatar { animation: boing .6s cubic-bezier(.34, 1.56, .64, 1); }

h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.role { color: var(--blue-soft); font-weight: 600; font-size: 14px; margin-top: 4px; }
.org { color: #94a3b8; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
.address { display: inline-flex; align-items: center; gap: 6px; color: #cbd5e1; font-size: 12px; margin-top: 12px; }

.share-qr {
  display: inline-flex; flex-direction: column; align-items: center;
  margin-top: 24px; padding: 12px 12px 10px;
  background: var(--white); border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.share-qr p { color: var(--navy); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-top: 10px; }
.qr img, .qr canvas { display: block; }
#qrcode-share { width: 96px; height: 96px; }

/* ---------- Main ---------- */
main { padding: 28px 22px 8px; }

.actions { display: grid; gap: 10px; }
.row { display: grid; gap: 10px; }
.row-3 { grid-template-columns: repeat(3, 1fr); }

.action {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px 12px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: inherit; text-decoration: none; font: inherit; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.action:hover, .action:focus-visible {
  background: var(--white); border-color: #c7d2fe;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .35);
  outline: none;
}
.action:active { transform: translateY(0); }
.badge {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  display: grid; place-items: center;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .2s;
}
.action:hover .badge, .action:focus-visible .badge { transform: scale(1.12) rotate(-8deg); background: var(--c, var(--navy-2)); }
.action:hover .badge svg { animation: jiggle .5s ease-in-out; }
.action { --c: #2563eb; animation: pop-in .5s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.row:first-child .action:nth-child(1) { --c: #10b981; animation-delay: .15s; }
.row:first-child .action:nth-child(2) { --c: #0ea5e9; animation-delay: .22s; }
.row:first-child .action:nth-child(3) { --c: #8b5cf6; animation-delay: .29s; }
.row:last-child .action:nth-child(1) { --c: #f43f5e; animation-delay: .36s; }
.row:last-child .action:nth-child(2) { --c: #f59e0b; animation-delay: .43s; }
.row:last-child .action:nth-child(3) { --c: #ec4899; animation-delay: .50s; }
.action:hover, .action:focus-visible { box-shadow: 0 10px 20px -10px var(--c); border-color: color-mix(in srgb, var(--c) 35%, white); }
.label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #475569; }
.sub { font-size: 10.5px; color: var(--muted); }

.email-line {
  display: block; text-align: center; margin: 14px 0 0;
  font-size: 12.5px; color: var(--muted); text-decoration: none; word-break: break-all;
}
.email-line:hover { color: var(--blue); }

.section { margin-top: 26px; padding-top: 24px; border-top: 1px solid #f1f5f9; }
h2 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: #475569; text-align: center; margin-bottom: 16px; line-height: 1.6;
}

.services { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
.services li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 11.5px; color: #334155; font-weight: 500; }
.services svg {
  width: 44px; height: 44px; padding: 11px;
  border-radius: 14px; color: var(--navy-2);
  background: linear-gradient(180deg, #eff6ff, #f8fafc);
  border: 1px solid #e0e7ff;
  stroke-width: 1.5;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, white);
  border-color: color-mix(in srgb, var(--c) 22%, white);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}
.services li { --c: var(--navy-2); cursor: default; }
.services li:nth-child(1) { --c: #2563eb; }
.services li:nth-child(2) { --c: #10b981; }
.services li:nth-child(3) { --c: #8b5cf6; }
.services li:nth-child(4) { --c: #0ea5e9; }
.services li:nth-child(5) { --c: #f43f5e; }
.services li:nth-child(6) { --c: #f59e0b; }
.services li:hover svg { transform: translateY(-4px) rotate(-8deg) scale(1.08); box-shadow: 0 8px 16px -8px var(--c); }
.services li:nth-child(even):hover svg { transform: translateY(-4px) rotate(8deg) scale(1.08); }

.stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; }
.stars svg { width: 18px; height: 18px; color: #f59e0b; fill: #fbbf24; animation: twinkle 2.8s ease-in-out infinite; }
.stars svg:nth-child(2) { animation-delay: .15s; }
.stars svg:nth-child(3) { animation-delay: .3s; }
.stars svg:nth-child(4) { animation-delay: .45s; }
.stars svg:nth-child(5) { animation-delay: .6s; }

.feedback { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px 16px; }
.feedback-grid { display: flex; align-items: center; justify-content: space-around; }
.fb-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
.qr-frame { padding: 6px; background: var(--white); border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
.fb-item:hover .qr-frame { border-color: #c7d2fe; }
.fb-label { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 600; font-size: 12.5px; }
.fb-label svg { width: 16px; height: 16px; }
.divider { width: 1px; height: 96px; background: var(--line); }
.hint { text-align: center; font-size: 11px; color: #94a3b8; margin-top: 14px; }

footer { padding: 18px 22px 24px; text-align: center; }
footer p { font-size: 11px; color: #94a3b8; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translate(-50%, 20px);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: var(--white);
  padding: 12px 20px; border-radius: 999px; font-size: 13px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Confetti ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti i {
  position: absolute; width: 8px; height: 12px; border-radius: 2px;
  animation: fall var(--d, 1.4s) cubic-bezier(.2, .6, .4, 1) forwards;
}

@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-10px) rotate(calc(var(--r) + 6deg)); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { opacity: 0; transform: scale(.3) rotate(-15deg); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes jiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(6deg); } }
@keyframes boing { 0% { transform: scale(1); } 30% { transform: scale(1.18, .86); } 55% { transform: scale(.92, 1.1); } 100% { transform: scale(1); } }
@keyframes twinkle { 0%, 70%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.25) rotate(12deg); } }
@keyframes fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); opacity: 0; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 360px) {
  main { padding-left: 16px; padding-right: 16px; }
  .sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}