*{box-sizing:border-box}
:root{
  --teal:#063c50;
  --teal-dark:#032c3d;
  --navy:#062e49;
  --green:#48b84c;
  --orange:#f28a22;
  --purple:#6958c7;
  --blue:#167bc1;
  --text:#10253a;
  --muted:#66717b;
  --line:#e3e7ea;
  --bg:#f8fafb;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:#e9edf0;
  font-family:"Noto Sans Devanagari","Nirmala UI",Arial,sans-serif;
  color:var(--text);
}
button,a{font:inherit}
button{cursor:pointer}
.webcard{
  width:100%;
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  background:#fff;
  box-shadow:0 0 28px rgba(0,0,0,.13);
  overflow:hidden;
}

/* Header */
.business-header{
  background:linear-gradient(135deg,#063b50,#07566a);
  color:#fff;
  padding:22px 18px 81px;
}
.brand-row{display:flex;align-items:center;gap:12px}
.brand-logo{
  width:68px;height:68px;border-radius:50%;
  background:#fff;
  color:#12435a;
  border:4px solid rgba(255,255,255,.88);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  flex:none;box-shadow:0 4px 10px rgba(0,0,0,.16)
}
.brand-logo span{font-family:Georgia,serif;font-size:31px;font-weight:900;line-height:25px}
.brand-logo small{font-size:5px;font-weight:900;letter-spacing:.2px}
.brand-info h1{margin:0;font-size:23px;line-height:1.1;font-weight:800}
.brand-info p{margin:4px 0 0;font-size:13px;opacity:.9}
.tagline{text-align:center;margin:15px 0 0;font-size:13px;opacity:.95}

/* Quick actions */
.quick-actions{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:14px 9px 12px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.quick-actions a{
  text-decoration:none;color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:10px;
}
.action-icon{
  width:43px;height:43px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:22px;
  box-shadow:0 2px 7px rgba(0,0,0,.08)
}
.action-icon.call{background:#41b64c}
.action-icon.whatsapp{background:#27b84c;font-size:25px}
.action-icon.email{background:#6958c8}
.action-icon.location{background:#117bc1;font-size:24px}
.quick-actions b{font-size:10px;font-weight:700}

/* Sections */
.section{padding:14px 14px 4px}
.section-heading h2,.about-section h2,.inquiry-section h2{
  margin:0 0 11px;font-size:17px;font-weight:800;color:#172b3d
}
.section-heading h2:after{
  content:"";display:block;width:38px;height:3px;margin-top:5px;
  border-radius:3px;background:var(--orange)
}

/* Products */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.product-card{min-width:0;text-align:center}
.product-image{
  height:76px;border-radius:8px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)
}
.product-image:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%);
}
.product-image span{font-size:34px;position:relative;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.product-image i{
  position:absolute;bottom:3px;left:4px;right:4px;
  font-style:normal;font-size:7px;font-weight:700;
  background:rgba(255,255,255,.86);border-radius:4px;padding:2px
}
.product-one{background:linear-gradient(135deg,#d9c18a,#f4e5c1)}
.product-two{background:linear-gradient(135deg,#c7d4dd,#f5f7f9)}
.product-three{background:linear-gradient(135deg,#e9c9a5,#f6eadb)}
.product-four{background:linear-gradient(135deg,#d8dfb1,#f8f8df)}
.product-five{background:linear-gradient(135deg,#c8d0e0,#eef2f9)}
.product-six{background:linear-gradient(135deg,#d8c0a9,#f4e6d9)}
.product-card h3{font-size:9px;line-height:1.3;margin:5px 0 0;font-weight:700}
.extra-product,.extra-gallery{display:none}
.outline-btn{
  display:block;margin:11px auto 7px;border:0;
  background:var(--teal);color:#fff;border-radius:16px;
  padding:6px 17px;font-size:10px;font-weight:700;
  box-shadow:0 3px 8px rgba(6,60,80,.16)
}

/* Services */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.service-card{text-align:center}
.service-icon{
  width:43px;height:43px;border-radius:50%;margin:auto;
  display:grid;place-items:center;font-size:20px;
  background:#f2f5f7
}
.service-icon.blue{color:#2383bb;background:#edf7fc}
.service-icon.green{color:#4ba74e;background:#eef9ed}
.service-icon.orange{color:#ef7e2d;background:#fff2e8}
.service-card h3{font-size:9px;margin:5px 0 0;line-height:1.3}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gallery-item{
  height:76px;border-radius:8px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:5px;
  color:#fff;font-size:8px;font-weight:800;
  background-size:cover;
}
.gallery-item:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.55))
}
.gallery-item span{position:relative}
.gallery-one{background:linear-gradient(135deg,#c69762,#5b7a62 50%,#d8c6a5)}
.gallery-two{background:linear-gradient(135deg,#b7c4cf,#475b67 45%,#d5a66f)}
.gallery-three{background:linear-gradient(135deg,#e1bd8c,#927258 50%,#c8d3bd)}
.gallery-four{background:linear-gradient(135deg,#8ba27d,#e2c19c)}
.gallery-five{background:linear-gradient(135deg,#c3a37f,#778f9b)}
.gallery-six{background:linear-gradient(135deg,#d6b07b,#6f8265)}

/* About */
.about-section{
  margin:14px 14px 0;padding:13px 14px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.about-section p{margin:0;font-size:11px;line-height:1.65;color:#3f4e59}

/* Inquiry */
.inquiry-section{text-align:center;padding:16px 20px 18px;background:#f7fafb}
.inquiry-section h2{font-size:16px;margin-bottom:3px}
.inquiry-section p{font-size:10px;color:var(--muted);margin:0 0 10px}
.primary-btn{
  border:0;border-radius:7px;padding:9px 17px;
  color:#fff;background:var(--teal);font-size:11px;font-weight:800;
  box-shadow:0 4px 10px rgba(6,60,80,.18)
}

/* Visitor count */
.visitor-footer{
  background:linear-gradient(135deg,#062e49,#073e59);
  color:#fff;min-height:58px;padding:9px 17px;
  display:flex;align-items:center;justify-content:space-between
}
.visitor-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.eye{
  width:27px;height:27px;border-radius:50%;background:#fff;color:#083b55;
  display:grid;place-items:center;font-size:15px
}
.visitor-footer strong{color:#ffd52c;font-size:22px}

/* Modal */
.modal{
  display:none;position:fixed;inset:0;background:rgba(2,18,28,.62);
  z-index:50;padding:20px;align-items:center;justify-content:center
}
.modal.open{display:flex}
.modal-box{
  width:min(390px,100%);background:#fff;border-radius:15px;padding:20px;
  position:relative;box-shadow:0 15px 45px rgba(0,0,0,.3)
}
.modal-box h2{margin:0;color:var(--teal);font-size:20px}
.modal-box>p{font-size:11px;color:var(--muted);margin:5px 0 15px}
.close-modal{
  position:absolute;right:12px;top:9px;border:0;background:#eef2f4;
  width:31px;height:31px;border-radius:50%;font-size:23px;line-height:1;color:#345
}
form label{display:block;font-size:11px;font-weight:700;margin:10px 0}
input,textarea{
  width:100%;margin-top:5px;border:1px solid #d5dce1;border-radius:7px;
  padding:9px;font-family:inherit;font-size:11px;outline:none
}
textarea{min-height:80px;resize:vertical}
input:focus,textarea:focus{border-color:#287a91}
form .primary-btn{width:100%;margin-top:5px}

/* Desktop preview */
@media(min-width:700px){
  body{padding:30px}
  .webcard{border-radius:18px}
}

/* Small phones */
@media(max-width:340px){
  .brand-info h1{font-size:20px}
  .product-grid,.gallery-grid{gap:6px}
  .product-image,.gallery-item{height:68px}
  .quick-actions{padding-left:5px;padding-right:5px}
}