/*
Theme Name: CHLORO KING
Theme URI: https://example.com/chloroking
Author: Aquasolve Water Clinic
Description: Custom responsive WordPress theme for CHLORO KING advanced disinfection solutions.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: chloroking
*/


:root{
  --navy:#071a2a; --navy2:#0b2b45; --cyan:#08d2dc; --blue:#0a82ef;
  --text:#102334; --muted:#607384; --soft:#f2f7fa; --white:#fff;
  --shadow:0 18px 60px rgba(4,31,51,.12);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:#fff}
.container{width:min(1160px,calc(100% - 40px));margin:auto}
.nav-wrap{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid #e9f0f4}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--navy)} .brand b{font-family:Montserrat;font-size:18px;letter-spacing:.4px}.brand small{display:block;font-size:9px;letter-spacing:1px;color:#647887;margin-top:2px}
.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy2),var(--blue));color:white;font-weight:800}
.nav-links{display:flex;gap:28px;align-items:center}.nav-links a{text-decoration:none;color:#294152;font-weight:600;font-size:14px}
.menu{display:none;background:none;border:0;font-size:24px}
.btn{display:inline-block;border:0;border-radius:12px;padding:15px 20px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:white!important;text-decoration:none;font-weight:800;box-shadow:0 10px 26px rgba(9,145,215,.25)}
.btn.small{padding:11px 15px}.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.25);box-shadow:none}.btn.white{background:#fff;color:var(--navy)!important}.btn.outline-white{background:transparent;border:1px solid rgba(255,255,255,.6);box-shadow:none}
.hero{min-height:690px;position:relative;overflow:hidden;background:radial-gradient(circle at 80% 30%,#144f71 0,#09263a 32%,#061824 70%);color:white;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:75px 0}
.eyebrow{font-size:12px;letter-spacing:2.4px;font-weight:800;color:#58ecf0;margin-bottom:16px}.eyebrow.dark{color:#087eb3}
h1,h2,h3{font-family:Montserrat;margin-top:0}h1{font-size:64px;line-height:1.02;letter-spacing:-2.8px;margin-bottom:24px}h1 span{color:#58edf1}h2{font-size:40px;line-height:1.12;letter-spacing:-1.5px}h3{font-size:18px}
.lead{max-width:690px;font-size:18px;line-height:1.8;color:#c8d9e2}.hero-actions{display:flex;gap:12px;margin:30px 0 40px}
.trust-row{display:flex;gap:35px;border-top:1px solid rgba(255,255,255,.13);padding-top:24px}.trust-row div{display:flex;flex-direction:column;gap:5px}.trust-row strong{font-size:13px}.trust-row span{font-size:11px;color:#9bb2c0}
.product-stage{height:510px;position:relative;display:grid;place-items:center}.halo{position:absolute;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle,#22ddeb55 0,#0b85ff18 45%,transparent 68%);filter:blur(3px)}
.pack{position:relative;width:245px;height:365px;border-radius:24px;background:linear-gradient(155deg,#f7ffff,#d8f6f7 45%,#56dbe3 46%,#0d85ac 100%);box-shadow:0 35px 90px rgba(0,0,0,.34);color:#082238;padding:40px 28px;transform:rotate(-4deg);border:1px solid rgba(255,255,255,.7)}
.pack:after{content:"";position:absolute;inset:10px;border:1px solid rgba(8,34,56,.12);border-radius:18px}.crown{font-size:34px;color:#0878a7}.pack h2{font-size:36px;line-height:.92;margin:18px 0 14px}.pack p{font-size:11px;letter-spacing:1.5px;font-weight:800}.wave{position:absolute;bottom:28px;right:24px;font-size:26px;font-weight:800;color:#fff}
.float-card{position:absolute;background:rgba(255,255,255,.96);color:#153548;padding:11px 14px;border-radius:10px;font-size:12px;font-weight:800;box-shadow:var(--shadow)}.one{left:20px;top:130px}.two{right:0;top:245px}.three{left:45px;bottom:55px}
.hero-orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb1{width:260px;height:260px;background:#08d2dc12;top:-70px;left:-80px}.orb2{width:340px;height:340px;border:1px solid #23d9e01a;right:-100px;bottom:-130px}
.section{padding:92px 0}.soft{background:var(--soft)}.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.copy p{font-size:17px;line-height:1.8;color:#526879;margin-top:0}.note{border-left:4px solid var(--cyan);padding-left:18px;font-size:14px!important}
.section-head{max-width:720px;margin-bottom:38px}.section-head p{color:var(--muted);line-height:1.7}.cards{display:grid;gap:18px}.cards.four{grid-template-columns:repeat(4,1fr)}.card{background:white;border:1px solid #e6eff3;border-radius:18px;padding:28px;box-shadow:0 10px 35px rgba(7,38,58,.06)}.card p{color:#647786;line-height:1.65;font-size:14px}.icon{width:48px;height:48px;border-radius:14px;background:#e7fbfc;color:#087e9a;display:grid;place-items:center;font-weight:800;margin-bottom:22px}
.dark-section{background:linear-gradient(145deg,#061723,#0b2d44);color:white}.light p{color:#afc5d2}.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.app{padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.045);font-weight:700;color:#d9e7ed}
.product-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.mock-box{height:420px;border-radius:28px;background:linear-gradient(145deg,#052439,#0e95b5 60%,#4de1e3);display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;box-shadow:var(--shadow);text-align:center}.mock-box .crown{color:white;font-size:46px}.mock-box .big{font-family:Montserrat;font-size:46px;font-weight:800;letter-spacing:-2px}.mock-box span{font-size:11px;letter-spacing:2px;margin-top:8px}
.specs{margin:26px 0;border-top:1px solid #e7edf1}.specs div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #e7edf1}.specs span{color:#718492;font-size:14px}.specs b{font-size:14px}.narrow{max-width:850px}
details{background:white;border:1px solid #e3ecef;border-radius:14px;padding:20px 22px;margin:12px 0}summary{cursor:pointer;font-weight:800}details p{color:#627584;line-height:1.7}
.cta{padding:70px 0;background:linear-gradient(135deg,#0784b7,#0cb9c3);color:white}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}.cta h2{margin-bottom:10px}.cta p{margin:0;color:#dff8fa}.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
footer{background:#04131e;color:#8fa8b7;padding:30px 0;font-size:12px}.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:25px;align-items:center}.footer-brand{color:white}

@media(max-width:900px){
  .menu{display:block}.nav-links{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;padding:20px;flex-direction:column;border-bottom:1px solid #e5edf0}.nav-links.open{display:flex}
  .hero-grid,.split,.product-grid{grid-template-columns:1fr}.hero{min-height:auto}.hero-grid{padding:60px 0}h1{font-size:46px}.product-stage{height:430px}.cards.four,.app-grid{grid-template-columns:repeat(2,1fr)}.cta-inner{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.split{gap:25px}
}
@media(max-width:560px){
  .container{width:min(100% - 28px,1160px)}h1{font-size:39px}h2{font-size:31px}.lead{font-size:16px}.hero-actions,.trust-row{flex-direction:column}.trust-row{gap:18px}.cards.four,.app-grid{grid-template-columns:1fr}.product-stage{height:380px}.pack{width:210px;height:315px;padding:34px 23px}.pack h2{font-size:31px}.float-card{font-size:10px}.one{left:0}.two{right:0}.three{left:8px}.section{padding:68px 0}.mock-box{height:320px}.mock-box .big{font-size:36px}
}