:root{
  --gold:#c49a45;
  --gold-light:#e7c982;
  --gold-deep:#8f6825;
  --ink:#17120d;
  --paper:#fffdf8;
  --muted:#756b5d;
  --line:rgba(150,111,38,.22);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"DM Sans",Arial,sans-serif}
body{
  background:
    radial-gradient(circle at 20% 10%,rgba(218,181,101,.13),transparent 28%),
    radial-gradient(circle at 80% 90%,rgba(145,104,36,.12),transparent 32%),
    #17130f;
  color:var(--ink);
}
.stage{
  min-height:100svh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.business-card{
  position:relative;
  width:min(100%,500px);
  overflow:hidden;
  text-align:center;
  border-radius:30px;
  padding:25px 25px 20px;
  background:
    radial-gradient(circle at 50% 0%,rgba(231,201,130,.24),transparent 24%),
    linear-gradient(155deg,#fffefa 0%,#faf4e8 57%,#eee0c6 100%);
  border:1px solid rgba(231,201,130,.45);
  box-shadow:0 30px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.9);
}
.shine{
  position:absolute;inset:-40% -25%;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.34) 49%,transparent 56%);
  transform:rotate(4deg);
  pointer-events:none;
}
.brand,.gold-rule,.portrait-wrap,.identity,.contact-grid,.quick-links,.social-row,.bottom-actions,footer{position:relative;z-index:2}
.brand{display:flex;justify-content:center;align-items:center}
.brand img{
  display:block;
  width:100%;
  max-width:455px;
  height:auto;
  max-height:150px;
  object-fit:contain;
}
.gold-rule{
  width:88%;
  height:2px;
  margin:2px auto 16px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-light),var(--gold),transparent);
}
.portrait-wrap{width:205px;height:205px;margin:0 auto 11px;position:relative}
.portrait-frame{
  width:100%;height:100%;padding:6px;border-radius:50%;
  background:linear-gradient(145deg,#75531e,#e9cd82 43%,#9a7028 75%,#f0d88f);
  box-shadow:0 13px 32px rgba(75,53,20,.24);
}
.portrait-frame img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;
  border:5px solid #fffaf0;
}
.portrait-accent{
  position:absolute;right:9px;bottom:17px;width:19px;height:19px;border-radius:50%;
  background:var(--gold-light);border:4px solid var(--paper);
  box-shadow:0 2px 9px rgba(90,63,19,.3);
}
.identity h1{
  margin:0;
  font-family:"Playfair Display",Georgia,serif;
  font-size:34px;
  line-height:1.08;
  letter-spacing:-.4px;
  color:#1b1610;
}
.role{
  margin-top:7px;
  font-size:11px;
  font-weight:700;
  letter-spacing:3px;
  color:var(--gold-deep);
}
.company{
  margin-top:6px;
  margin-bottom:17px;
  font-size:15px;
  font-weight:700;
  color:#4f473b;
}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.contact-btn{
  min-height:72px;
  border-radius:16px;
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-weight:700;
  font-size:11px;
  box-shadow:0 8px 18px rgba(67,48,17,.15);
  transition:transform .15s ease,filter .15s ease;
}
.contact-btn:hover,.quick:hover,.social:hover,.save:hover,.share:hover{filter:brightness(1.04)}
.contact-btn:active,.quick:active,.social:active,.save:active,.share:active{transform:scale(.975)}
.btn-icon{width:25px;height:25px;display:grid;place-items:center}
.btn-icon svg{width:100%;height:100%;fill:currentColor}
.call{background:linear-gradient(135deg,#76561f,#c59a48)}
.whatsapp{background:#25D366}
.email{background:linear-gradient(135deg,#a77729,#d3aa58)}
.quick-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:11px;
}
.quick{
  min-height:82px;
  padding:11px 8px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.64);
  text-decoration:none;
  color:#3e382f;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  transition:transform .15s ease,filter .15s ease;
}
.quick-icon{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;padding:7px;
  background:#f2e6cf;
}
.quick-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}
.website .quick-icon{color:#987027}
.location .quick-icon{color:#d14e43}
.review .quick-icon{color:#e0a500}
.quick b{display:block;font-size:11px}
.quick small{display:block;margin-top:2px;font-size:8.5px;color:#857a6b;line-height:1.15}
.social-row{display:flex;justify-content:center;gap:12px;margin:15px 0 13px}
.social{
  width:43px;height:43px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  text-decoration:none;
  box-shadow:0 7px 16px rgba(48,35,15,.16);
  transition:transform .15s ease,filter .15s ease;
}
.social svg{width:22px;height:22px}
.facebook{background:#1877F2}
.instagram{background:radial-gradient(circle at 70% 110%,#fdf497 0 8%,#fd5949 35%,#d6249f 62%,#285AEB 100%)}
.instagram svg{fill:none;stroke:#fff;stroke-width:2}
.instagram svg circle:last-child{fill:#fff;stroke:none}
.bottom-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.save,.share{
  min-height:48px;border-radius:14px;
  font-family:inherit;font-size:12px;font-weight:700;
  cursor:pointer;transition:transform .15s ease,filter .15s ease;
}
.save{border:0;background:#1e1913;color:#fff}
.save span,.share span{font-size:17px;vertical-align:-1px}
.share{background:rgba(255,255,255,.5);border:1px solid rgba(150,111,38,.35);color:#72531f}
footer{margin-top:14px;font-size:8.5px;color:#918675;letter-spacing:.15px}
footer strong{color:#70511f}
@media (max-width:560px){
  .stage{padding:8px}
  .business-card{
    width:100%;
    border-radius:25px;
    padding:18px 14px 16px;
  }
  .brand img{max-height:115px}
  .gold-rule{margin-bottom:13px}
  .portrait-wrap{width:min(46vw,190px);height:min(46vw,190px);min-width:155px;min-height:155px}
  .identity h1{font-size:30px}
  .company{margin-bottom:14px}
  .contact-btn{min-height:67px}
  .quick{min-height:78px}
}
@media (max-width:390px){
  .stage{padding:5px}
  .business-card{padding:15px 10px 13px;border-radius:22px}
  .brand img{max-height:100px}
  .portrait-wrap{width:165px;height:165px;min-width:0;min-height:0}
  .identity h1{font-size:27px}
  .role{font-size:10px;letter-spacing:2.5px}
  .company{font-size:14px}
  .contact-grid,.quick-links{gap:7px}
  .contact-btn{min-height:62px;font-size:10px}
  .quick{min-height:73px;padding:8px 5px}
  .quick b{font-size:10px}
  .quick small{font-size:7.5px}
  .social{width:40px;height:40px}
  .bottom-actions{gap:7px}
}
@media (min-height:850px) and (min-width:561px){
  .business-card{padding-top:28px}
}