/* Digital business card — static, data-driven via base64 JSON in URL */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Barlow+Condensed:wght@600;700&display=swap');

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: #0e1420; }
a { color: inherit; text-decoration: none; }

.page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: radial-gradient(120% 80% at 50% 0%, #1b2338 0%, #0e1420 60%);
  font-family: 'Be Vietnam Pro', Helvetica, Arial, sans-serif;
  padding: 0 0 40px;
}

.card {
  width: 100%;
  max-width: 460px;
  background: #ffffff;   /* pure white: the logo PNG has a white plate, this hides its edge */
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
}

/* ---------- header ---------- */
.hero { position: relative; background: #131a2a; padding: 56px 32px 40px; overflow: hidden; }
.hero__blob {
  position: absolute; top: -70px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: #6750a5; opacity: .35;
}
.hero__rule {
  position: absolute; bottom: -1px; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #6750a5 0%, #6750a5 55%, #131a2a 55%);
}
.hero__inner { position: relative; display: flex; flex-direction: column; gap: 14px; }
.eyebrow {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .28em; color: #a08fd6; text-transform: uppercase;
}
.name { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.title { font-size: 15px; font-weight: 400; color: #c9cede; letter-spacing: .01em; }
.org {
  font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 600;
  line-height: 1.25; letter-spacing: .06em; color: #fff; text-transform: uppercase;
  border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 14px; text-wrap: pretty;
}

/* ---------- contact rows ---------- */
.rows { display: flex; flex-direction: column; padding: 8px 0 0; }
.row {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 32px; min-height: 44px; border-bottom: 1px solid #ecedf1;
  transition: background .15s ease;
}
.row:last-child { border-bottom: 0; padding-bottom: 24px; }
.row--top { align-items: flex-start; }
.row:hover .row__value { color: #6750a5; }
.row__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: #f1eefa; color: #6750a5;
  display: flex; align-items: center; justify-content: center;
}
.row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.row__label {
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: #8b90a0;
}
.row__value { font-size: 17px; font-weight: 500; color: #131a2a; word-break: break-word; }
.row__value--sm { font-size: 15px; font-weight: 400; line-height: 1.5; text-wrap: pretty; }

/* ---------- actions ---------- */
.actions { display: flex; gap: 12px; padding: 16px 32px 32px; }
.btn {
  flex: 1; min-height: 52px; border: 0; border-radius: 4px;
  background: #6750a5; color: #fff;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: .02em; cursor: pointer; transition: background .15s ease;
}
.btn:hover { background: #57419a; }
.btn--icon {
  flex: none; width: 52px; height: 52px; padding: 0;
  border: 1px solid #d9dbe3; background: #fff; color: #131a2a;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.btn--icon:hover { background: #fff; border-color: #6750a5; color: #6750a5; }

/* ---------- footer ---------- */
.foot {
  margin-top: auto; border-top: 1px solid #ecedf1; padding: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.foot img { width: 120px; height: auto; display: block; }
.foot__msg { font-size: 11px; color: #a2a7b5; letter-spacing: .06em; min-height: 14px; }

.notice {
  background: #fff4e5; color: #8a5a00; font-size: 12px; line-height: 1.5;
  padding: 12px 32px; border-bottom: 1px solid #f0e2c8;
}
[hidden] { display: none !important; }

/* ---------- empty state: no data in the URL, show the logo only ---------- */
.is-empty .hero,
.is-empty .rows,
.is-empty .actions,
.is-empty .notice { display: none; }
.is-empty .card { min-height: 100vh; justify-content: center; }
.is-empty .foot { margin: 0; border-top: 0; padding: 40px 32px; }
.is-empty .foot img { width: 220px; max-width: 70vw; }