/* Электронная визитка Comfort House — фирстиль: тёмно-синий #253745, золото #F5C518,
   градиент #FFBE1D→#B8860B, шрифт Montserrat. Мобайл-ферст, премиальный тон. */

:root{
  --navy:#253745;
  --navy-2:#1c2a35;
  --navy-3:#2f4452;
  --gold:#F5C518;
  --gold-top:#FFBE1D;
  --gold-bot:#B8860B;
  --ink:#EBECEC;
  --muted:#9fb0bc;
  --white:#fff;
  --line:rgba(235,236,236,.14);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:radial-gradient(120% 90% at 50% -10%, #32495a 0%, var(--navy) 45%, var(--navy-2) 100%);
  min-height:100vh;min-height:100dvh;
  display:flex;justify-content:center;
  padding:22px 16px calc(28px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}

.card{
  width:100%;max-width:430px;
  background:linear-gradient(180deg, rgba(47,68,82,.55), rgba(28,42,53,.55));
  border:1px solid var(--line);
  border-radius:26px;
  padding:26px 22px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}

/* шапка-логотип (COMFORT HOUSE + СТУДИЯ МЕБЕЛИ — единый лок-ап из SVG) */
.top{display:flex;justify-content:center;margin:4px 0 2px}
.logo{width:min(82%,300px);height:auto;display:block}

/* герой: имя / должность */
.hero{text-align:center;padding:18px 4px 4px}
.name{
  margin:0;font-size:27px;line-height:1.15;font-weight:700;color:var(--white);
  letter-spacing:.2px;
}
.role{margin-top:7px;font-size:14px;font-weight:600;color:var(--gold)}
.tag{margin-top:9px;font-size:13px;font-weight:400;color:var(--muted);line-height:1.4}

/* кнопки */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;border:0;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:600;
  padding:15px 16px;text-decoration:none;
  transition:transform .08s ease, filter .15s ease;
}
.btn:active{transform:scale(.985)}
.btn .bi{font-size:18px;line-height:1}
.btn.gold{
  margin-top:20px;
  background:linear-gradient(180deg,var(--gold-top),var(--gold-bot));
  color:#2a1f05;font-weight:700;font-size:17px;
  box-shadow:0 10px 26px rgba(184,134,11,.4);
}
.btn.gold:active{filter:brightness(1.04)}
.hint{text-align:center;font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.45}

.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn.ghost{
  flex:1 1 40%;
  background:rgba(235,236,236,.06);
  color:var(--ink);font-size:14.5px;font-weight:600;
  border:1px solid var(--line);
  padding:13px 12px;
}
.btn.ghost:active{background:rgba(235,236,236,.12)}

/* контактные строки */
.rows{margin-top:22px;display:flex;flex-direction:column;gap:2px}
.row{display:flex;align-items:center;gap:13px;padding:12px 4px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.ic{font-size:18px;width:26px;text-align:center;flex:none;opacity:.9}
.rc{display:flex;flex-direction:column;min-width:0}
.rc small{font-size:11px;color:var(--muted);letter-spacing:.3px;margin-bottom:2px}
.rc a,.rc span{font-size:15.5px;font-weight:600;color:var(--white);text-decoration:none;word-break:break-word}
.rc a{color:var(--white)}
.rc a:active{color:var(--gold)}

/* QR */
.qr{
  margin-top:22px;text-align:center;
  background:var(--white);border-radius:18px;padding:18px 16px 14px;
}
.qr img{display:block;margin:0 auto;width:190px;height:190px}
.qr-cap{margin-top:10px;font-size:12px;color:#5b6b76;line-height:1.5;font-weight:500}

/* о компании */
.about{margin-top:22px}
.about h2{
  font-size:12px;letter-spacing:.28em;font-weight:600;color:var(--gold);
  text-transform:uppercase;margin:0 0 9px;
}
.about p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}

/* подвал */
.foot{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);text-align:center;
}
.foot a{color:var(--gold);text-decoration:none;font-weight:600}
.foot .dot{opacity:.5}

@media (max-width:360px){
  .name{font-size:24px}
  .btn.ghost{flex-basis:100%}
}