:root { --ink:#13215a; --blue:#103cae; --violet:#6032cb; --line:#dfe5f5; --muted:#687093; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#f1f4fc; font-family:"DM Sans",sans-serif; }
.card { width:min(100%, 560px); min-height:100vh; margin:auto; padding:27px 24px 30px; overflow:hidden; position:relative; background:#fff; transition:background .3s, color .3s; }
.top-glow { position:absolute; width:560px; height:330px; border-radius:50%; top:-224px; left:50%; transform:translateX(-50%); background:radial-gradient(ellipse at center, #c8d8ff 0%, #edf2ff 46%, transparent 70%); pointer-events:none; }
.identity { position:relative; display:flex; align-items:center; gap:17px; padding:7px 0 25px; text-align:left; }
.logo { display:block; width:clamp(122px, 34vw, 184px); height:auto; flex:0 0 auto; }
.identity-copy { min-width:0; flex:1; text-align:center; }
.eyebrow { margin:0 0 6px; color:var(--violet); font-size:clamp(.57rem, 2vw, .7rem); font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
h1 { margin:0; color:#10216a; font-family:"Playfair Display",serif; font-size:clamp(1.7rem, 6.7vw, 2.65rem); line-height:.98; letter-spacing:-.045em; }
.credential { margin:10px 0 0; color:#5b6380; font-size:clamp(.65rem, 2.4vw, .84rem); font-weight:500; line-height:1.25; }
.details { border-top:1px solid var(--line); }
.detail { min-height:83px; padding:16px 0; display:grid; grid-template-columns:37px 1fr 21px; align-items:center; gap:9px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; transition:background .2s, transform .2s; }
.detail:hover { background:#f8f9ff; }
.icon { width:31px; height:31px; border-radius:10px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--blue),var(--violet)); font-size:1.04rem; font-weight:700; }
.detail strong, .detail small { display:block; }
.detail strong { margin-bottom:4px; color:#172663; font-size:.92rem; font-weight:700; }
.detail small { color:var(--muted); font-size:.81rem; line-height:1.4; }
.arrow { align-self:center; color:#9ba7cb; font-size:1.25rem; }
.save-contact { width:100%; margin-top:27px; padding:16px 18px; border:0; border-radius:15px; color:#fff; cursor:pointer; font:600 1rem "DM Sans",sans-serif; background:linear-gradient(105deg,#07329e,#4b27b7 70%,#6d35ce); box-shadow:0 11px 21px rgba(30,47,146,.23); transition:transform .2s, box-shadow .2s; }
.save-contact:hover { transform:translateY(-2px); box-shadow:0 14px 25px rgba(30,47,146,.29); }
.save-contact span { margin-right:7px; font-size:1.2rem; }
.save-note { margin:11px 0 0; color:#7a82a0; text-align:center; font-size:.75rem; }
@media (min-width:561px) { body { padding:36px 0; } .card { min-height:740px; border-radius:25px; box-shadow:0 18px 55px rgba(31,51,126,.14); } }
@media (max-width:360px) { .card { padding-left:18px; padding-right:18px; } .identity { gap:12px; } .logo { width:112px; } .detail { grid-template-columns:34px 1fr 17px; gap:6px; } .detail small { font-size:.77rem; } }