:root{
  --bg-1: #0f172a;
  --bg-2: #071029;
  --glass: rgba(255,255,255,0.06);
  --accent: linear-gradient(135deg,#4F46E5 0%,#06B6D4 100%);
  --muted: #94a3b8;
    --radius: 14px;
    --card-w: 760px;
    --text: #0f172a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: radial-gradient(900px 400px at 10% 10%, rgba(79,70,229,0.04), transparent),
                radial-gradient(700px 300px at 90% 90%, rgba(6,182,212,0.03), transparent),
                linear-gradient(180deg,var(--bg-1),var(--bg-2));
    color:var(--text);
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  gap:20px;
}

.page{width:100%;max-width:1200px;display:flex;flex-direction:column;align-items:center}

.card-root{width:100%;display:flex;justify-content:center}

.business-card{
  width:100%;
  max-width:var(--card-w);
    background: #ffffff;
    border-radius:var(--radius);
    padding:24px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.06);
    backdrop-filter: blur(6px) saturate(110%);
    border: 1px solid rgba(15,23,42,0.06);
  display:flex;
  flex-direction:column;
  gap:16px;
  transition: transform .22s ease, box-shadow .22s ease;
}

.business-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 50px rgba(2,6,23,0.65); }
.business-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(15,23,42,0.09); }

.card-header{display:flex;gap:16px;align-items:center}
.logo{flex:0 0 140px; height:140px}
.logo-svg{display:block;border-radius:16px}
.logo-link{display:block;width:140px;height:140px;border-radius:16px;overflow:hidden}
.logo-img{width:100%;height:100%;object-fit:contain;display:block}
.company .name{margin:0;font-size:1.25rem;letter-spacing:0.2px}
.company .tagline{margin:2px 0 0 0;color:var(--muted);font-size:0.95rem}
.company .tagline{margin:2px 0 0 0;color:var(--muted);font-size:0.95rem}

.card-body{display:flex;flex-direction:row;gap:32px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.contact-list{list-style:none;padding:0;margin:0;color:var(--text);min-width:220px}
.contact-list li{margin-bottom:8px;font-size:0.95rem}
.contact-list a{color:var(--text);text-decoration:none}
.contact-list a:hover{text-decoration:underline}

.socials{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.social-btn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);
    color:var(--text);text-decoration:none;font-weight:600;font-size:0.95rem;
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.social-btn svg{width:18px;height:18px;flex-shrink:0;display:block}
.social-btn:hover{transform:translateY(-4px); box-shadow: 0 8px 24px rgba(2,6,23,0.5); background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));}
.social-btn:hover{transform:translateY(-4px); box-shadow: 0 8px 24px rgba(15,23,42,0.06); background:linear-gradient(90deg, rgba(79,70,229,0.02), rgba(6,182,212,0.02));}

.card-foot{border-top:1px dashed rgba(255,255,255,0.02);padding-top:12px;color:var(--muted);font-size:0.9rem;text-align:left}
.card-foot{border-top:1px dashed rgba(15,23,42,0.04);padding-top:12px;color:var(--muted);font-size:0.9rem;text-align:left}
.small{margin:0}

.attribution{margin-top:18px;color:rgba(255,255,255,0.35);font-size:0.85rem}
.attribution{margin-top:18px;color:rgba(15,23,42,0.55);font-size:0.85rem}

/* responsive */
@media (max-width:720px){
  :root{--card-w:380px}
  .card-body{flex-direction:column;gap:12px}
  .company .name{font-size:1.1rem}
  .social-btn{padding:8px}
  .logo{flex:0 0 80px;height:80px}
  .logo-link{width:80px;height:80px}
}