/* Digital business card — laxminatendla.com/card (simple & professional) */
:root {
  --bg: #f5f7fa; --card: #ffffff; --text: #1b2635; --muted: #5a6677; --faint: #8792a2;
  --line: #e2e7ee; --navy: #13365c; --navy-900: #0b2038; --navy-50: #eaf0f7; --accent: #23756f;
  --serif: "Source Serif 4", Georgia, serif; --sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; font-family: var(--sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 8px; }

.vcard { width: 100%; max-width: 440px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; }
.vcard__top { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.vcard__mono { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 750; font-size: .9rem; letter-spacing: .02em; }

.vcard__hero { position: relative; width: 62%; margin: 6px auto 0; aspect-ratio: 3 / 3.5; }
.vcard__arch { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #e9eef5, #d6e1ee); border: 5px solid #fff; box-shadow: 0 12px 28px -16px rgba(16, 24, 40, .35); }
.vcard__arch span { display: none; }
.vcard__photo { position: absolute; left: 50%; bottom: 5px; width: 88%; height: auto; transform: translateX(-50%); clip-path: inset(-40% -10% 0 -10% round 0 0 14px 14px); }

.vcard__id { text-align: center; }
.vcard__id h1 { font-family: var(--serif); font-weight: 600; font-size: 1.9rem; line-height: 1.12; color: var(--navy-900); }
.vcard__id h1 em { font-style: normal; }
.vcard__title { margin-top: 8px; font-size: .9rem; font-weight: 600; color: var(--accent); }
.vcard__org { margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.vcard__org svg { width: 18px; height: 18px; }

.vcard__actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vcard__actions a { display: grid; justify-items: center; align-content: center; text-align: center; gap: 6px; min-height: 76px; padding: 12px 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: .8rem; font-weight: 650; line-height: 1.2; color: var(--navy-900); }
.vcard__actions a:active { background: var(--navy-50); }
.vcard__actions svg { width: 22px; height: 22px; fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vcard__actions .is-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.vcard__actions .is-primary svg { stroke: #fff; }

.vcard__links { list-style: none; padding: 0; border-radius: 14px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.vcard__links li + li { border-top: 1px solid var(--line); }
.vcard__links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 12px 16px; }
.vcard__links a:active { background: var(--bg); }
.vcard__links small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.vcard__links span { font-weight: 650; color: var(--navy-900); }
.vcard__links i { font-style: normal; color: var(--navy); }

.vcard__share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vcard__share button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: .88rem; font-weight: 650; color: var(--navy-900); }
.vcard__share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.vcard__qr { display: grid; justify-items: center; gap: 10px; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.vcard__qr[hidden] { display: none; }
.vcard__qr img { width: 200px; height: 200px; }
.vcard__qr p { font-size: .8rem; font-weight: 600; color: var(--muted); }

.vcard__foot { text-align: center; display: grid; gap: 4px; }
.vcard__foot p { font-size: .9rem; color: var(--muted); }
.vcard__foot a { font-size: .85rem; color: var(--navy); font-weight: 600; }

@media (min-width: 700px) {
  body { display: grid; place-items: center; padding: 40px 0; }
  .vcard { border-radius: 20px; background: #fff; border: 1px solid var(--line); padding: 24px 24px 28px; box-shadow: 0 24px 48px -28px rgba(16, 24, 40, .3); }
  .vcard__actions a, .vcard__links, .vcard__share button { background: var(--bg); }
}
.vcard__mono { width: 42px; height: 42px; background: none; border-radius: 0; display: block; }
.vcard__mark { width: 42px; height: 42px; filter: drop-shadow(0 6px 10px rgba(11, 32, 56, .25)); }
.vcard__arch { background: radial-gradient(120% 80% at 50% 18%, #ffffff 0%, #eef3fb 42%, #cfdcf1 100%); }
.vcard__actions .is-primary { background: linear-gradient(135deg, #2b55c4, #1a4384 50%, #0f2c4c); border-color: transparent; }
body { background: linear-gradient(180deg, #eef3fb, #f5f7fa 40%); }