/* WEB PANEL PROXY public CSS */
* {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      background: #f4f1ea;
      color: #171717;
    }

    .topbar {
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 7vw;
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      background: #171717;
      color: #fff;
      font-weight: 700;
    }

    .brand-name {
      font-size: 17px;
      font-weight: 650;
      letter-spacing: 0.02em;
    }

    nav {
      display: flex;
      gap: 34px;
    }

    nav a {
      color: #555;
      text-decoration: none;
      font-size: 14px;
    }

    nav a:hover {
      color: #111;
    }

    .hero {
      min-height: 610px;
      padding: 100px 7vw 80px;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 60px;
      align-items: center;
    }

    .hero-content {
      max-width: 760px;
    }

    .label {
      margin-bottom: 25px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #777;
    }

    h1 {
      margin: 0;
      font-size: clamp(48px, 6vw, 88px);
      line-height: 0.97;
      letter-spacing: -0.055em;
      font-weight: 600;
    }

    .lead {
      margin: 36px 0;
      max-width: 590px;
      font-size: 18px;
      line-height: 1.7;
      color: #666;
    }

    .button {
      display: inline-block;
      padding: 14px 22px;
      background: #171717;
      color: white;
      text-decoration: none;
      font-size: 14px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .button:hover {
      transform: translateY(-2px);
      opacity: 0.88;
    }

    .hero-visual {
      height: 390px;
      position: relative;
    }

    .shape {
      position: absolute;
    }

    .shape-one {
      width: 210px;
      height: 210px;
      right: 30px;
      top: 20px;
      border-radius: 50%;
      background: #d9603b;
    }

    .shape-two {
      width: 220px;
      height: 220px;
      right: 140px;
      top: 145px;
      background: #2c5d63;
      transform: rotate(15deg);
    }

    .shape-three {
      width: 120px;
      height: 120px;
      right: 5px;
      bottom: 10px;
      border: 2px solid #171717;
      transform: rotate(45deg);
    }

    .info {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin: 0 7vw 70px;
      border-top: 1px solid rgba(0, 0, 0, 0.14);
      border-bottom: 1px solid rgba(0, 0, 0, 0.14);
    }

    .info-card {
      min-height: 235px;
      padding: 35px 35px 40px 0;
    }

    .info-card + .info-card {
      padding-left: 35px;
      border-left: 1px solid rgba(0, 0, 0, 0.14);
    }

    .number {
      margin-bottom: 45px;
      font-size: 12px;
      color: #999;
    }

    .info-card h2 {
      margin: 0 0 18px;
      font-size: 20px;
      font-weight: 600;
    }

    .info-card p {
      margin: 0;
      max-width: 330px;
      color: #666;
      line-height: 1.7;
    }

    .online {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .online span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #3a9561;
      box-shadow: 0 0 0 4px rgba(58, 149, 97, 0.12);
    }

    footer {
      display: flex;
      justify-content: space-between;
      padding: 0 7vw 40px;
      font-size: 12px;
      color: #888;
    }

    @media (max-width: 800px) {
      nav {
        display: none;
      }

      .hero {
        grid-template-columns: 1fr;
        padding-top: 70px;
      }

      .hero-visual {
        height: 280px;
      }

      .info {
        grid-template-columns: 1fr;
      }

      .info-card,
      .info-card + .info-card {
        padding: 28px 0;
        border-left: 0;
      }

      .info-card + .info-card {
        border-top: 1px solid rgba(0, 0, 0, 0.14);
      }

      h1 {
        font-size: 50px;
      }
    }