:root {
    --navy: #0A3D8F;
    --brand: #1565C0;
    --sky: #42A5F5;
    --lightbg: #E8F1FD;
    --white: #FFFFFF;
    --gold: #F5A623;
    --textgray: #4A5568;
    --darknavy: #071B3E;
    --whatsapp: #25D366;
    --font-head: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, var(--navy) 0%, #0d3f8f 55%, #1a5fc8 100%);
    color: var(--white);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
  }
  body::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
  }

  .wrap { max-width: 720px; width: 100%; text-align: center; position: relative; z-index: 1; }

  .brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 36px; }
  .brand-icon {
    width: 40px; height: 40px; background: var(--gold); color: var(--navy);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px;
  }
  .brand-name { font-family: var(--font-head); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }

  .badge {
    display: inline-block; background: var(--gold); color: var(--navy);
    font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 7px 18px; border-radius: 30px; margin-bottom: 22px;
  }

  h1 {
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(30px, 5vw, 48px); line-height: 1.2; margin-bottom: 14px;
  }
  h1 span { color: var(--sky); }

  .lead {
    font-size: 16px; color: rgba(255,255,255,0.8); line-height: 1.7;
    max-width: 560px; margin: 0 auto 36px;
  }

  .products {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px;
  }
  .products span {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    padding: 9px 18px; border-radius: 30px; font-size: 13.5px; font-weight: 500;
    display: flex; align-items: center; gap: 7px;
  }

  .contact-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 22px;
    padding: 34px 28px;
    text-align: left;
    max-width: 480px;
    margin: 0 auto;
  }
  .contact-card h3 { font-family: var(--font-head); font-size: 17px; font-weight: 600; margin-bottom: 18px; text-align: center; }
  .info-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
  .info-row:last-of-type { margin-bottom: 0; }
  .info-icon {
    width: 38px; height: 38px; background: rgba(66,165,245,0.18); color: var(--sky);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
  }
  .info-row a, .info-row span.value {
    color: rgba(255,255,255,0.9); font-size: 14.5px; line-height: 1.6; text-decoration: none;
  }
  .info-row a:hover { color: var(--white); }

  .btn-whatsapp {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--whatsapp); color: var(--white); font-weight: 700; font-size: 14.5px;
    padding: 13px; border-radius: 12px; text-decoration: none; margin-top: 22px;
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  .btn-whatsapp:hover { filter: brightness(1.05); transform: translateY(-2px); color: var(--white); }

  footer.note {
    margin-top: 36px; font-size: 12.5px; color: rgba(255,255,255,0.55);
  }

  @media (max-width: 480px) {
    .contact-card { padding: 26px 20px; }
    .info-row a, .info-row span.value { font-size: 13.5px; }
  }