.contact-hero{
      min-height: 38vh;
      display: grid;
      place-items: center;
      padding: 50px 20px 20px;
      background:
        linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.25)),
        url('/Img/Kindercity2.webp');
      background-size: cover; background-position: center;
      border-bottom: 2px solid #00ccff55;
    }
    .contact-hero .inner{
      backdrop-filter: blur(6px);
      background: rgba(0,0,0,.45);
      padding: 24px 26px;
      border-radius: 14px;
      color: #e9eef5;
      text-align: center;
      box-shadow: 0 0 25px rgba(0,204,255,.2);
      max-width: 820px;
    }
    .contact-wrap{
      max-width: 880px; margin: 28px auto; padding: 0 20px;
    }
    .contact-card{
      background: rgba(15,15,20,.85);
      border-radius: 16px;
      box-shadow: 0 0 20px rgba(0,204,255,.15);
      border: 1px solid rgba(0,204,255,.12);
      padding: 20px;
    }
    .contact-card h2{
      margin: 2px 0 12px; color: #00ccff;
    }
    .contact-grid{
      display: grid; gap: 14px;
      grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 760px){
      .contact-grid{ grid-template-columns: 1fr; }
    }
    .form-field{
      display: grid; gap: 6px;
    }
    .form-field label{ color: #cfe3ef; }
    .form-field input, .form-field textarea{
      background: rgba(4,8,12,.6);
      border: 1px solid rgba(0,204,255,.18);
      border-radius: 10px;
      padding: 10px 12px; color: #e9eef5;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .form-field input:focus, .form-field textarea:focus{
      border-color: #00ccff; box-shadow: 0 0 0 3px rgba(0,204,255,.15);
    }
    .form-actions{
      display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px;
    }
    .btn{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px; border-radius:10px; text-decoration:none;
      background:linear-gradient(135deg,#00ccff,#00a9d8);
      color:#081018; font-weight:700; border:0;
      box-shadow:0 5px 20px rgba(0,204,255,.35);
      cursor:pointer;
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn:hover{ transform: translateY(-2px); filter: brightness(1.05); box-shadow:0 9px 30px rgba(0,204,255,.45); }

    .optional {
      display: block;
      font-size: 0.85em;
      color: #8ab7c7;
      margin-top: 6px;
      font-style: italic;
    }

    /* --- Confirmation popup --- */
    .popup-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(6px);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s ease;
      z-index: 9999;
    }
    .popup-overlay.show {
      opacity: 1;
      pointer-events: all;
    }
    .popup-box {
      background: rgba(15,20,25,0.9);
      border: 1px solid rgba(0,204,255,.3);
      box-shadow: 0 0 40px rgba(0,204,255,.25);
      border-radius: 12px;
      text-align: center;
      padding: 30px 40px;
      color: #e9eef5;
      animation: popIn .35s ease forwards;
    }
    @keyframes popIn {
      from { transform: scale(.8); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .popup-box h3 {
      color: #00ccff;
      margin-bottom: 10px;
    }
    .popup-box button {
      margin-top: 16px;
      background: linear-gradient(135deg,#00ccff,#00a9d8);
      color: #081018;
      font-weight: bold;
      border: none;
      border-radius: 8px;
      padding: 8px 16px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,204,255,.3);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .popup-box button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,204,255,.4);
    }

    #popupLimit .popup-box h3 {
      color: #ff5555;
      text-shadow: 0 0 10px rgba(255, 85, 85, 0.5);
    }
    #popupConfirm .popup-box h3 {
      color: #00ccff;
      text-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
    }