/* Goodly is licensed (not on Google Fonts). Add files to /assets/fonts and uncomment:
  @font-face{font-family:"Goodly";src:url("../fonts/Goodly.woff2") format("woff2");font-weight:400 700;font-display:swap}
  Until then the rounded display falls back to Fredoka. */
  :root{
    --marquee-bg:#a7e9f9; --marquee-tx:#1b5586;
    --navy:#1c3f74; --lime:#d4ff64; --ribbon:#4ec9f5;
    --display:"Goodly","Fredoka",system-ui,sans-serif;
    --body:"Urbanist",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{font-family:var(--body);background:#eaf2f9;color:#fff}

  .marquee{background:var(--marquee-bg);color:var(--marquee-tx);overflow:hidden;white-space:nowrap}
  .marquee__track{display:inline-flex;will-change:transform;animation:scroll 34s linear infinite}
  .marquee__item{font-size:clamp(11px,1.05vw,13px);font-weight:500;padding:9px 36px}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

  .hero{position:relative;width:100%;overflow:hidden;color:#fff}
  .hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
  .hero__inner{position:relative;z-index:2;width:100%;aspect-ratio:1440/1010}
  .hero__logo{position:absolute;top:2%;left:50%;transform:translateX(-50%);width:clamp(96px,8.3vw,120px);z-index:4}
  .hero__copy{position:absolute;top:10.5%;left:5.5%;max-width:42%}
  .hero__copy h1{font-family:var(--display);font-weight:600;font-size:clamp(24px,4.5vw,64px);line-height:1.04;letter-spacing:.4px}
  .hero__copy .sub{font-family:var(--body);font-weight:500;font-size:clamp(11px,1.32vw,19px);line-height:1.45;margin-top:6%;max-width:430px}
  .hero__copy .nc{font-family:var(--display);font-weight:500;font-size:clamp(13px,1.75vw,25px);line-height:1.18;margin-top:5%}
  .hero__badge{position:absolute;top:10.5%;right:12.8%;width:clamp(150px,17vw,238px);aspect-ratio:238/124;
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--navy);
    background:var(--lime);border-radius:48% 52% 50% 50% / 56% 56% 44% 44%}
  .hero__badge .num{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.9vw,42px);line-height:.95}
  .hero__badge .lbl{font-family:var(--body);font-style:italic;font-weight:500;font-size:clamp(9px,1.05vw,15px);line-height:1.2;margin-top:3%}
  /* dynamic ribbon badge: pure SVG, scales crisply at any size */
  .hero__waves{position:absolute;right:10.5%;top:60%;width:clamp(118px,15.5vw,208px);height:auto;z-index:3;overflow:visible;animation:spin 22s linear infinite}
  .hero__waves text{font-family:var(--display);font-weight:700;fill:#fff;font-size:30px;letter-spacing:1.5px;paint-order:stroke;stroke:rgba(40,120,180,.45);stroke-width:2.5px}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.hero__waves{animation:none}}
  @media (max-width:760px){
    .hero__inner{aspect-ratio:auto;min-height:80vh}
    .hero__copy{max-width:70%}
    .hero__badge{width:40%;right:5%}
    .hero__waves{width:34%;right:4%;top:auto;bottom:3%}
  }

  /* ===== Not a "Normal" Water Brand ===== */
  .nnwb{background:linear-gradient(180deg,#e9f2fb 0%,#dae7f2 100%);padding:clamp(42px,6vw,92px) 5% clamp(50px,7vw,104px);text-align:center}
  .nnwb__title{font-family:var(--display);font-weight:600;color:#2f73de;font-size:clamp(30px,4.4vw,56px);line-height:1.08;margin-bottom:clamp(8px,2vw,26px)}
  .nnwb__grid{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,425px) minmax(0,1fr);align-items:center;gap:clamp(14px,2.2vw,38px)}
  .nnwb__center img{width:100%;height:auto;display:block}
  .nnwb__col{display:flex;flex-direction:column;gap:clamp(30px,4.5vw,70px)}
  .feat h3{font-family:var(--body);font-weight:700;text-transform:uppercase;color:#2f73de;font-size:clamp(15px,1.18vw,18px);letter-spacing:.3px;line-height:1.22;margin-bottom:9px}
  .feat p{font-family:var(--body);font-weight:400;color:#5d8ee8;font-size:clamp(13px,1.0vw,15px);line-height:1.55}
  @media (max-width:900px){
    .nnwb__grid{grid-template-columns:1fr 1fr;gap:30px 26px}
    .nnwb__center{grid-column:1 / -1;order:-1;max-width:300px;margin:0 auto 6px}
  }
  @media (max-width:540px){
    .nnwb__grid{grid-template-columns:1fr}
    .nnwb__col{gap:34px}
  }




  /* ===== Our Products ===== */
  .products{background:#ffffff;padding:clamp(46px,6vw,92px) 5% clamp(50px,7vw,98px);text-align:center}
  .products__title{font-family:var(--display);font-weight:600;color:#2f73de;font-size:clamp(30px,4.2vw,52px);margin-bottom:clamp(28px,4vw,56px)}
  .pgrid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
  .pcard__media{position:relative;background:#f1f6f7;border-radius:22px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:7% 6%;overflow:hidden}
  .pcard__media img{max-height:90%;max-width:100%;width:auto;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(30,70,120,.10))}
  .pill{position:absolute;top:8%;left:7%;background:#fff;color:#2f73de;font-family:var(--display);font-weight:600;font-size:clamp(11px,1.05vw,15px);padding:.32em .85em;border-radius:999px;box-shadow:0 3px 9px rgba(30,70,120,.12)}
  .count{position:absolute;top:7%;right:7%;width:clamp(46px,5.1vw,70px);height:clamp(46px,5.1vw,70px);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;line-height:1;box-shadow:0 4px 12px rgba(30,70,120,.18)}
  .count--blue{background:#3172e0}.count--navy{background:#15294a}
  .count b{font-family:var(--display);font-weight:700;font-size:clamp(15px,1.7vw,24px)}
  .count i{font-style:normal;font-weight:600;font-size:clamp(6px,.62vw,9px);letter-spacing:.6px;margin-top:1px}
  .pcard__title{font-family:var(--body);font-weight:700;text-transform:uppercase;color:#2f73de;font-size:clamp(15px,1.25vw,19px);line-height:1.25;margin-top:20px;letter-spacing:.3px}
  @media (max-width:820px){.pgrid{grid-template-columns:1fr;max-width:340px}}
  /* ===== Made in Pakistan band ===== */
  .band{position:relative;overflow:hidden;color:#fff;background:linear-gradient(165deg,#114c98 0%,#1564a7 44%,#1f84c0 72%,#33b4dd 100%);padding:clamp(40px,5.6vw,76px) 5%}
  .band__waves{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
  .band__inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,3vw,48px);align-items:center}
  .band__tag{font-family:var(--display);font-weight:700;color:var(--lime);font-size:clamp(15px,1.5vw,21px);margin-bottom:clamp(14px,1.8vw,24px)}
  .band__title{font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,54px);line-height:1.04}
  .band__title em{font-style:italic;font-weight:600}
  .band__clabel{font-family:var(--body);font-weight:400;font-size:clamp(13px,1.1vw,16px);margin-bottom:6px;opacity:.95}
  .band__num{font-family:var(--display);font-weight:700;color:var(--lime);font-size:clamp(24px,3vw,40px);line-height:1.2;letter-spacing:1px;margin-bottom:clamp(12px,1.6vw,20px)}
  .band__addr{font-family:var(--body);font-weight:400;font-size:clamp(13px,1.05vw,16px);line-height:1.4;max-width:290px}
  @media (max-width:760px){.band__inner{grid-template-columns:1fr;gap:24px}}
  /* ===== Certifications ===== */
  .certs{background:#fff;padding:clamp(46px,6vw,92px) 5% clamp(50px,7vw,96px);text-align:center}
  .certs__title{font-family:var(--display);font-weight:600;color:#2f73de;font-size:clamp(28px,4vw,52px);line-height:1.1;margin-bottom:clamp(30px,4vw,58px)}
  .certs__grid{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:start}
  .doc{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 12px 32px rgba(30,70,120,.16)}
  .doc--license{grid-column:1;grid-row:1}
  .doc--test{grid-column:1;grid-row:2}
  .doc--fbr{grid-column:2;grid-row:1 / span 2}
  @media (max-width:760px){
    .certs__grid{grid-template-columns:1fr}
    .doc--license,.doc--test,.doc--fbr{grid-column:1;grid-row:auto}
    .doc--fbr{max-width:80%;margin:0 auto}
  }
  /* ===== Pure by Nature / Refined by Standards ===== */
  .pbn{position:relative;overflow:hidden;color:#fff;background:linear-gradient(165deg,#114c98 0%,#1564a7 46%,#1f84c0 74%,#33b4dd 100%)}
  .pbn__waves{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
  .pbn__inner{position:relative;z-index:2;max-width:1340px;margin:0 auto;display:grid;grid-template-columns:1.02fr 0.98fr;gap:clamp(18px,2.6vw,44px);align-items:center;padding:clamp(40px,5vw,70px) 0 0 5%}
  .pbn__title{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.3vw,46px);line-height:1.06;margin-bottom:clamp(20px,2.4vw,34px)}
  .pbn__title .lime{color:var(--lime)}
  .pbn__body p{font-family:var(--body);font-weight:400;font-size:clamp(12px,1.0vw,15px);line-height:1.55;margin-bottom:clamp(10px,1.2vw,16px);max-width:480px}
  .pbn__num{font-family:var(--display);font-weight:700;color:var(--lime);font-size:clamp(24px,3vw,40px);line-height:1.2;letter-spacing:1px;margin-top:clamp(14px,2vw,26px)}
  .pbn__media{position:relative;align-self:end}
  .pbn__media img{display:block;width:100%;height:auto}
  .pbn__badge{position:absolute;right:9%;bottom:11%;width:clamp(120px,14vw,196px);height:auto;z-index:3;animation:spin 22s linear infinite}
  .pbn__badge text{font-family:var(--display);font-weight:700;fill:#fff;font-size:30px;letter-spacing:1.5px;paint-order:stroke;stroke:rgba(18,70,140,.5);stroke-width:2.5px}
  @media (max-width:780px){
    .pbn__inner{grid-template-columns:1fr;gap:10px;padding:clamp(36px,8vw,60px) 5% 0}
    .pbn__media{max-width:420px;margin:0 auto}
    .pbn__num{margin-bottom:20px}
  }
  /* ===== Why Choose GLICE ===== */
  .why{background:#fff;padding:clamp(46px,6vw,92px) 5% clamp(50px,7vw,96px);text-align:center}
  .why__title{font-family:var(--display);font-weight:600;color:#3172e0;font-size:clamp(28px,4vw,52px);margin-bottom:clamp(30px,4vw,58px)}
  .why__grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
  .wcard{background:#f1f6f7;border-radius:16px;padding:clamp(28px,3.2vw,46px) clamp(16px,2vw,30px);display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.6vw,34px)}
  .wcard__check{width:clamp(48px,5vw,62px);height:clamp(48px,5vw,62px);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(30,70,120,.10);flex:none}
  .wcard__check svg{width:50%;height:50%}
  .wcard p{font-family:var(--body);font-weight:500;color:#3172e0;font-size:clamp(13px,1.08vw,16px);line-height:1.42;max-width:230px}
  @media (max-width:820px){.why__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:520px){.why__grid{grid-template-columns:1fr;max-width:330px}}
  /* ===== Our Customers ===== */
  .cust{background:#fff;padding:clamp(46px,6vw,90px) 5% clamp(38px,5vw,66px);text-align:center}
  .cust__title{font-family:var(--display);font-weight:600;color:#3172e0;font-size:clamp(28px,4vw,52px);margin-bottom:clamp(34px,4.6vw,62px)}
  .cust__grid{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,2.8vw,42px) clamp(26px,3vw,50px)}
  .cust__grid img{height:clamp(54px,6.3vw,90px);width:auto;object-fit:contain;display:block}
  @media (max-width:560px){.cust__grid{gap:24px 30px}.cust__grid img{height:46px}}
  /* ===== Footer ===== */
  .ft{position:relative;background:#124f9a;color:#fff}
  .ft__wave{display:block;width:100%;height:clamp(36px,4.4vw,72px)}
  .ft__main{max-width:1180px;margin:0 auto;padding:clamp(10px,1vw,18px) 5% clamp(34px,4vw,56px);display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.7fr;gap:clamp(24px,3vw,46px)}
  .ft__logo{width:clamp(150px,15vw,212px);height:auto;display:block}
  .ft__col h4,.ft__news h4{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:clamp(12px,1vw,14px);color:rgba(255,255,255,.5);margin-bottom:clamp(14px,1.6vw,22px)}
  .ft__col a{display:block;font-family:var(--body);font-weight:500;font-size:clamp(13px,1.05vw,15px);color:#fff;text-decoration:none;margin-bottom:clamp(10px,1.2vw,15px);transition:opacity .15s;width:fit-content}
  .ft__col a:hover{opacity:.7}
  .ft__form{display:flex;flex-direction:column;gap:12px;max-width:340px}
  .ft__form input{width:100%;padding:.85em 1.2em;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;background:transparent;color:#fff;font-family:var(--body);font-size:14px;outline:none}
  .ft__form input::placeholder{color:rgba(255,255,255,.6)}
  .ft__form input:focus{border-color:#fff}
  .ft__form button{width:100%;padding:.85em 1.2em;border:none;border-radius:999px;background:#fff;color:#124f9a;font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:transform .12s,box-shadow .15s}
  .ft__form button:hover{box-shadow:0 6px 18px rgba(0,0,0,.18)}
  .ft__form button:active{transform:scale(.98)}
  .ft__form button:disabled{opacity:.6;cursor:default}
  .ft__msg{min-height:18px;font-family:var(--body);font-size:13px;line-height:1.35;margin:2px 2px 0}
  .ft__bottom{border-top:1px solid rgba(255,255,255,.16);max-width:1180px;margin:0 auto;padding:clamp(18px,2vw,26px) 5%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
  .ft__bottom .cpy{font-family:var(--body);font-size:13px;color:rgba(255,255,255,.7)}
  .ft__legal{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,40px)}
  .ft__legal a{font-family:var(--body);font-size:13px;color:rgba(255,255,255,.7);text-decoration:none;transition:color .15s}
  .ft__legal a:hover{color:#fff}
  .ft__made{font-family:var(--display);font-weight:700;color:var(--lime);font-size:clamp(14px,1.2vw,17px)}
  @media (max-width:880px){.ft__main{grid-template-columns:1fr 1fr;gap:30px}.ft__brand{grid-column:1/-1}.ft__news{grid-column:1/-1}.ft__form{max-width:420px}}
  @media (max-width:560px){.ft__main{grid-template-columns:1fr}.ft__bottom{justify-content:center;text-align:center}.ft__legal{justify-content:center}}