@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root{
    --red:#C82525;
    --navy:#1A1A2E;
    --orange:#FF6B1A;
    --bg:#f4f4f2;
    --white:#fff;
    --gray:#6b7280;
    --light:#f0efed;
    --black:#000;
    --radius:14px;
    --radius-sm:10px;
    --radius-xs:8px;
    --transition:.2s ease;
    --shadow:0 8px 24px rgba(0,0,0,.05);
}

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    background:var(--bg);
    color:var(--black);
    font-family:"Inter",sans-serif;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}

.card{
    width:min(100%,420px);
    min-height:100vh;
    margin:auto;
    display:flex;
    flex-direction:column;
}

   .hero{
    position:relative;
    width:100%;
    padding:28px 14px 24px;
    background:url("/img/vizitka/BG.svg") center/cover no-repeat;
}

.hero-bg1,
.hero-bg2{
    position:absolute;
    opacity:.6;
    pointer-events:none;
    z-index:-999;
}

.hero-bg1{
    top:73px;
    right:80px;
}

.hero-bg2{
    top:457px;
    right:7px;
}

.company-badge{
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin-bottom:24px;
    padding:5px 12px 5px 8px;
}

.company-icon{
    display:grid;
    place-items:center;
    width:60px;
    aspect-ratio:1;
    border-radius:50%;
}

.company-name{
    color:#fff;
    font-size:16px;
    font-weight:600;
    letter-spacing:.05em;
}

.avatar-wrap{
    display:flex;
    align-items:flex-end;
    gap:20px;
    margin-bottom:20px;
}

.hero-text{
    flex:1;
}

.hero-name{
    color:#fff;
    font-size:clamp(28px,5vw,36px);
    font-weight:900;
    line-height:1.1;
    margin-bottom:4px;
}

.hero-role{
    color:#fff;
    font-size:13px;
    font-weight:600;
    margin-bottom:2px;
}

.hero-company{
    color:#fff;
    font-size:12px;
}

.hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.hero-tag{
    padding:3px 10px;
    border:1px solid #fff;
    border-radius:20px;
    background:#fff;
    color:#000;
    font-size:10px;
    letter-spacing:.03em;
}

    /* ===== CONTACTS ===== */
    .contacts {
      padding: 20px 16px 8px;
      display: flex; flex-direction: column; gap: 8px;
      z-index: 99;
    }
    .contact-btn {
      display: flex; align-items: center; gap: 14px;
      background: var(--white);
      border-radius: 12px; padding: 14px 16px;
      text-decoration: none;
      transition: transform 0.15s, box-shadow 0.15s;
      border: none; cursor: pointer; width: 100%;
    }
    .contact-btn:active { transform: scale(0.98); }
    .contact-icon {
      width: 42px; height: 42px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
.contact-icon.phone, .contact-icon.email, .contact-icon.web    {color: var(--red);}
    .contact-label {
      font-size: 11px; color: var(--gray);
      font-weight: 500; margin-bottom: 1px;
    }
    .contact-value {
      font-size: 14px; font-weight: 700;
      color: var(--navy);
    }
    .contact-chevron {
      margin-left: auto;
      font-size: 18px; color: #ccc;
    }

    /* ===== PRIMARY CTA ===== */
    .cta-block { padding: 8px 16px 0; z-index: 999; }
    .cta-save {
      display: block; width: 100%;
      background: var(--red); color: #fff;
      border: none; border-radius: 12px;
      padding: 15px; font-size: 15px;
      font-weight: 800; cursor: pointer;
      text-align: center; text-decoration: none;
      letter-spacing: 0.02em;
      transition: opacity 0.15s;
      z-index:999;
    }
    .cta-save:hover { opacity: 0.88; }
    .cta-hint {
      text-align: center; font-size: 11px;
      color: var(--back); margin-top: 6px;
    }

    /* ===== ABOUT ===== */
    .about {
      margin: 16px 16px 0;
      background: var(--white);
      border-radius: 14px; padding: 16px;
      z-index: 99;
    }
    .about-title {
      font-size: 14px; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--back); margin-bottom: 10px;
    }
    .about-text {
      font-size: 13px; color: #000;
      line-height: 1.65;
    }
    .about-stats {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 8px; margin-top: 14px;
    }
    .stat {
      background: var(--red);
      border-radius: 10px; padding: 10px 8px;
      text-align: center;
    }
    .stat-num {
      font-size: 18px; font-weight: 900;
      color: var(--white); line-height: 1;
    }
    .stat-label {
      font-size: 10px; color: var(--white);
      margin-top: 3px; line-height: 1.3;
    }

    /* ===== QR SECTION ===== */
    .qr-section {
      margin: 16px 16px 0;
      background: var(--white);
      border-radius: 14px; padding: 20px;
      text-align: center;
      z-index: 99;
    }
    .qr-title {
      font-size: 13px; font-weight: 800;
      color: var(--navy); margin-bottom: 4px;
    }
    .qr-sub {
      font-size: 11px; color: var(--gray);
      margin-bottom: 16px; line-height: 1.4;
    }
    .qr-frame {
      display: inline-block;
      padding: 12px; background: #fff;
      border: 2.5px solid var(--navy);
      border-radius: 12px;
    }
    .qr-hint {
      margin-top: 12px; font-size: 11px;
      color: var(--gray); background: var(--light);
      border-radius: 8px; padding: 8px 12px;
      line-height: 1.5;
    }

    /* ===== ADDRESS ===== */
    .address {
      margin: 16px 16px 0;
      background: var(--red);
      border-radius: 14px; padding: 16px;
      display: flex; align-items: center; gap: 14px;
    }
    .addr-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: rgba(235,87,87,0.15);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
    .addr-text {
      font-size: 12px; color: rgba(255,255,255,0.6);
      line-height: 1.6;
    }
    .addr-text strong {
      display: block; font-size: 13px;
      color: #fff; margin-bottom: 1px;
    }

    /* ===== FOOTER ===== */
    footer {
      padding: 20px 16px 28px;
      text-align: center;
    }
    .footer-logo {
      font-size: 14px; font-weight: 900;
      color: var(--navy); letter-spacing: 0.06em;
      margin-bottom: 4px;
    }
    .footer-site {
      font-size: 11px; color: var(--gray);
    }
    .footer-site a { color: var(--red); text-decoration: none; }