:root{
      --mint:#b7ecec;
      --mint-soft:#e6f7f7;
      --peach:#fde3cf;
      --cream:#fff6df;
      --blue-soft:#dff1ff;
      --ink:#1f2937;
      --ink-soft:#4b5563;
      --accent:#1f4ae0;
      --white:#ffffff;

      --border: rgba(31,41,55,0.14);
      --shadow: 0 16px 40px rgba(31,41,55,0.10);
    }

    *{ margin:0; padding:0; box-sizing:border-box; }
    body{
      font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
      background: var(--cream);
      color: var(--ink);
      line-height: 1.6;
    }
    a{ color:inherit; text-decoration:none; }
    .container{ max-width: 1100px; margin: 0 auto; padding: 0 20px; }

    /* =========================
       NAV (bez boxova za linkove)
    ========================= */
    nav{
      background: var(--white);
      border-bottom: 1px solid rgba(31,41,55,0.10);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .nav-container{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding: 14px 0;
      gap: 14px;
    }
    .logo{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight: 800;
      font-size: 18px;
      letter-spacing: .2px;
    }
    .logo small{
      display:block;
      font-weight:600;
      font-size:12px;
      color: var(--ink-soft);
      margin-top:2px;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap: 18px;
    }
    .nav-links a{
      color: var(--ink-soft);
      font-weight: 600;
      white-space: nowrap;
    }
    .nav-links a:hover{ color: var(--accent); }
    .contact-btn{
      color: var(--accent);
      font-weight: 800;
    }

    .menu-toggle{
      display:none;
      background:none;
      border:none;
      color: var(--ink);
      font-size: 22px;
      cursor: pointer;
      padding: 10px;
      border-radius: 12px;
    }

    /* =========================
       HERO
    ========================= */
    .contact-hero{
      text-align:center;
      padding: 64px 0 36px;
      background: linear-gradient(90deg, var(--peach), var(--cream));
      border-bottom: 1px solid rgba(31,41,55,0.06);
    }
    .contact-hero h1{
      font-size: 40px;
      margin-bottom: 10px;
      letter-spacing: -0.4px;
    }
    .contact-hero p{
      font-size: 16px;
      max-width: 720px;
      margin: 0 auto;
      color: var(--ink-soft);
    }

    /* =========================
       CONTENT
    ========================= */
    main.container{ padding: 26px 20px 0; }
    .contact-container{
      display:flex;
      gap: 24px;
      padding: 28px 0 18px;
      flex-wrap: wrap;
    }

    .contact-info-card, .contact-form-card{
      flex: 1;
      min-width: 320px;
      background: var(--mint-soft);
      padding: 26px;
      border-radius: 18px;
      border: 1px solid rgba(31,41,55,0.08);
      box-shadow: 0 6px 18px rgba(31,41,55,0.06);
    }
    .contact-form-card{
      background: var(--white);
    }

    h2{
      color: var(--ink);
      margin-bottom: 18px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(31,41,55,0.10);
      font-size: 20px;
    }

    .contact-method{
      display:flex;
      gap: 14px;
      margin-bottom: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(31,41,55,0.08);
    }
    .contact-method:last-child{
      border-bottom:none;
      padding-bottom:0;
      margin-bottom:0;
    }

    .contact-icon{
      width: 44px;
      height: 44px;
      background: var(--blue-soft);
      border-radius: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      color: var(--accent);
      font-size: 18px;
      flex: 0 0 auto;
    }
    .contact-method h3{
      font-size: 16px;
      margin-bottom: 3px;
    }
    .muted{
      font-size: 13px;
      color: var(--ink-soft);
    }
    .email-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255,255,255,0.65);
      border: 1px solid rgba(31,41,55,0.10);
      font-weight: 700;
    }
    .email-pill i{ color: var(--accent); }

    .hours-list{ list-style:none; margin-top: 10px; }
    .hours-list li{
      display:flex;
      justify-content:space-between;
      gap: 12px;
      padding: 8px 0;
      border-bottom: 1px dashed rgba(31,41,55,0.14);
      font-size: 14px;
    }
    .hours-list li:last-child{ border-bottom:none; }

    /* =========================
       FORM
    ========================= */
    .form-group{ margin-bottom: 16px; }
    .form-label{
      display:block;
      margin-bottom: 6px;
      font-weight: 700;
      font-size: 13px;
    }
    .required{ color: #c2410c; }

    .form-control{
      width: 100%;
      padding: 12px 14px;
      border: 1px solid rgba(31,41,55,0.18);
      border-radius: 12px;
      font-size: 15px;
      background: #fff;
      outline: none;
    }
    .form-control:focus{
      border-color: rgba(31,74,224,0.55);
      box-shadow: 0 0 0 3px rgba(31,74,224,0.15);
    }
    textarea.form-control{
      min-height: 140px;
      resize: vertical;
    }

    .captcha-box{
      margin-bottom: 10px;
      padding: 14px;
      background: var(--blue-soft);
      border-radius: 14px;
      border: 1px solid rgba(31,41,55,0.10);
    }
    .captcha-box strong{ color: var(--ink); }
    #captcha-question{ font-weight: 900; color: var(--accent); }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      width: 100%;
      background: var(--accent);
      color: #fff;
      padding: 12px 16px;
      border-radius: 14px;
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: 800;
      transition: transform 0.12s ease, filter 0.12s ease;
      margin-top: 6px;
    }
    .btn:hover{
      filter: brightness(0.95);
      transform: translateY(-1px);
    }

    .form-message{
      padding: 12px 14px;
      border-radius: 14px;
      margin-bottom: 14px;
      display: none;
      font-size: 14px;
      border: 1px solid rgba(31,41,55,0.10);
    }
    .success{ background: #e8f7ef; color: #14532d; border-color: rgba(20,83,45,0.18); }
    .error{ background: #fdecec; color: #7f1d1d; border-color: rgba(127,29,29,0.18); }

    .spinner{
      display:none;
      width: 18px;
      height: 18px;
      border: 3px solid rgba(255,255,255,0.35);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* =========================
       FOOTER (lagan, tvoj stil)
    ========================= */
    .site-footer{
      background: #fafafa;
      padding: 44px 20px 34px;
      margin-top: 44px;
      border-top: 1px solid rgba(31,41,55,0.08);
    }
    .site-footer__inner{ max-width: 900px; margin: 0 auto; }
    .site-footer__nav{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap: 22px;
      margin-bottom: 18px;
    }
    .site-footer__nav a{
      color: #666;
      font-size: 14px;
      padding: 6px 0;
    }
    .site-footer__nav a:hover{ color: var(--accent); }
    .site-footer__brand{
      text-align:center;
      color: #2f4d3b;
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .site-footer__copy{
      text-align:center;
      color: #483939;
      font-size: 13px;
    }

    /* =========================
       MOBILE
    ========================= */
    @media (max-width: 768px) {
      .menu-toggle{ display:block; }

      .nav-links{
        display:none;
        position:absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 14px 20px 18px;
        text-align: center;
        border-top: 1px solid rgba(31,41,55,0.10);
        box-shadow: var(--shadow);
      }
      .nav-links.active{ display:flex !important; }

      .nav-links a{
        margin: 10px 0;
      }

      .contact-hero{ padding: 54px 0 28px; }
      .contact-hero h1{ font-size: 30px; }

      .contact-container{ padding-top: 18px; }
    }

    @media (max-width: 480px) {
      .contact-info-card, .contact-form-card{ min-width: 100%; }
    }