:root{
    --bg:#f7f7f8;
      --card:#ffffff;
        --accent:#1f7a8c;
          --muted:#777;
            --radius:12px;
              --maxwidth:1100px;
                --gap:18px;
                }
                *{box-sizing:border-box}
                html,body{height:100%}
                body{
                  margin:0;
                    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
                      background:var(--bg);
                        color:#111;
                          -webkit-font-smoothing:antialiased;
                            -moz-osx-font-smoothing:grayscale;
                              line-height:1.45;
                              }
                              .container{max-width:var(--maxwidth);margin:0 auto;padding:24px}
                              .header-inner{display:flex;align-items:center;justify-content:space-between}
                              .site-header{background:#fff;box-shadow:0 2px 8px rgba(25,25,25,0.04);position:sticky;top:0;z-index:20}
                              .logo{font-weight:700;color:var(--accent);text-decoration:none;font-size:20px}
                              .main-nav a{margin-left:14px;text-decoration:none;color:var(--muted);font-weight:600}

                              /* Hero */
                              .hero{padding:56px 0;background:linear-gradient(180deg, #eaffff 0%, #f7fbfc 100%);margin-bottom:12px}
                              .hero h1{margin:0 0 8px;font-size:34px}
                              .hero p{color:var(--muted);margin:0}

                              /* Product grid */
                              .product-section h2{margin:0 0 16px}
                              .product-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px,1fr));gap:var(--gap)}
                              .product-card{background:var(--card);border-radius:12px;padding:14px;text-align:center;box-shadow:0 6px 18px rgba(18,18,18,0.05)}
                              .product-card img{width:100%;height:160px;object-fit:cover;border-radius:8px}
                              .product-card h3{margin:10px 0 6px;font-size:16px}
                              .price{color:var(--accent);font-weight:700;margin-bottom:10px}
                              .btn{display:inline-block;padding:8px 12px;border-radius:8px;border:0;background:#eee;cursor:pointer}
                              .btn.primary{background:var(--accent);color:#fff}
                              .btn.small{padding:6px 10px;font-size:13px}

                              /* Contact form */
                              .contact-form{display:grid;gap:12px;max-width:700px}
                              .contact-form label{display:block}
                              .contact-form span{display:block;font-weight:600;margin-bottom:6px}
                              .contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;background:#fff}
                              .contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(31,122,140,0.08)}

                              /* Popup */
                              .popup{position:fixed;right:20px;top:20px;background:var(--accent);color:#fff;padding:14px;border-radius:12px;display:none;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,0.15)}
                              .popup-inner{display:flex;align-items:center;gap:12px}
                              .popup p{margin:0}

                              /* Footer */
                              .site-footer{padding:20px 0;text-align:center;color:var(--muted);font-size:14px;margin-top:40px}

                              /* Responsive tweaks */
                              @media (max-width:640px){
                                .hero h1{font-size:24px}
                                  .product-card img{height:140px}
                                  }
}