@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=DM+Sans:wght@300;400;500&display=swap";:root{--navy:#0d1b2a;--gold:#b8924a;--gold-light:#d4a96a;--cream:ivory;--muted:#8a9ab0;color-scheme:dark;font-family:DM Sans,sans-serif}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(ellipse 60% 50% at 20% 20%, #b8924a1a, transparent 60%), radial-gradient(ellipse 50% 60% at 80% 80%, #0d1b2a8c, transparent 60%), var(--cream);min-height:100vh}main{place-items:center;min-height:100vh;padding:24px;display:grid}.card-shell{width:min(672px,100%);position:relative}.card{background:var(--navy);border:1px solid #b8924a33;border-radius:18px;width:100%;height:384px;display:flex;position:relative;overflow:hidden;box-shadow:0 40px 80px #00000073}.card:before,.card:after{content:"";pointer-events:none;border-radius:50%;position:absolute}.card:before{background:radial-gradient(circle,#b8924a1f,#0000 70%);width:220px;height:220px;top:-60px;right:-60px}.card:after{background:radial-gradient(circle,#b8924a0f,#0000 70%);width:160px;height:160px;bottom:-40px;left:100px}.stripe{background:linear-gradient(var(--gold-light), var(--gold) 50%, transparent);border-radius:0 4px 4px 0;flex:none;width:5px;margin:32px 0}.card-content{z-index:1;flex-direction:column;flex:1;justify-content:space-between;padding:30px 40px 32px 36px;display:flex;position:relative}.identity{justify-content:space-between;align-items:center;gap:24px;display:flex}.company,.role,.qr-panel p{text-transform:uppercase;letter-spacing:.16em;margin:0}.company{color:var(--gold);font-size:10px;font-weight:500}h1{color:#fff;margin:4px 0 2px;font-family:Cormorant Garamond,serif;font-size:36px;font-weight:600;line-height:1.05}.role{color:var(--muted);font-size:11px;font-weight:300}.positioning{color:#c5d0dc;max-width:320px;margin:9px 0 0;font-size:11px;font-weight:300;line-height:1.4}.portrait{object-fit:cover;border:5px solid #fff;border-radius:12px;width:120px;height:120px;box-shadow:0 10px 20px #00000040}.details{justify-content:space-between;align-items:flex-end;gap:28px;display:flex}.contacts{gap:9px;display:grid}.contact{color:#c5d0dc;letter-spacing:.02em;align-items:center;gap:10px;font-size:11.5px;font-weight:300;text-decoration:none;display:flex}.contact-icon{width:18px;height:18px;color:var(--gold);opacity:.75}.contact-icon svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%;display:block}.contact:hover,.contact:focus-visible{color:var(--gold-light)}.qr-panel{text-align:center}#qrcode{background:#fff;border-radius:8px;place-items:center;width:120px;height:120px;padding:7px;display:grid;box-shadow:0 4px 16px #0006}#qrcode :is(canvas,img){width:106px!important;height:106px!important}.qr-panel p{color:var(--muted);margin-top:7px;font-size:8px}.save-contact{display:none}.corner-dots{opacity:.2;grid-template-columns:repeat(3,4px);gap:4px;display:grid;position:absolute;bottom:20px;right:20px}.corner-dots span{background:var(--gold);border-radius:50%;width:4px;height:4px}@media (width<=639px){main{padding:0}.card-shell,.card{width:100%;min-height:100svh}.card{height:auto;box-shadow:none;background:ivory;border:0;border-radius:0}.stripe,.qr-panel,.corner-dots{display:none}.card-content{gap:30px;padding:28px 22px}.identity{text-align:center;background:var(--navy);flex-direction:column-reverse;justify-content:center;padding:20px}.portrait{border-radius:50%}h1{font-size:32px}.positioning{margin-inline:auto;font-size:13px}.details{align-items:stretch}.contacts{gap:0;width:100%}.contact{color:#435168;border-bottom:1px solid #0d1b2a1a;min-height:58px;padding:12px 4px;font-size:15px}.save-contact{width:100%;color:var(--navy);background:var(--gold-light);cursor:pointer;border:0;border-radius:7px;padding:14px 20px;font:500 15px DM Sans,sans-serif;display:block}}@media (width<=639px) and (height<=700px){.card-content{gap:20px;padding-block:20px}.identity{gap:14px}.portrait{width:96px;height:96px}.positioning{margin-top:6px}.contact{min-height:50px;padding-block:8px}}@media (width<=360px) and (height<=700px){.card-content{gap:16px;padding-block:16px}.identity{gap:10px;padding:16px}h1{font-size:28px}.positioning{font-size:12px}.contact{min-height:46px;font-size:14px}.save-contact{padding-block:12px;font-size:14px}}@media (prefers-reduced-motion:no-preference){.contact,.save-contact{transition:color .2s,background-color .2s,transform .2s}.save-contact:active{transform:scale(.99)}}