
:root{
  --navy:#07345a;--navy2:#062b4b;--blue:#087fc1;--cyan:#12b5c5;
  --pale:#eef9fc;--text:#17324a;--muted:#6a7e90;--line:#e4edf3;
  --white:#fff;--gold:#f3ad19;--max:1180px;
  --shadow:0 16px 42px rgba(9,55,84,.11)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.55}
body.loading{overflow:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(var(--max),calc(100% - 36px));margin:auto}

/* loader */
#loader{position:fixed;inset:0;background:#fff;display:grid;place-items:center;z-index:99999;transition:.65s ease}
#loader.done{opacity:0;visibility:hidden}
.loader-box{text-align:center}
.loader-tooth{width:70px;height:82px;margin:auto;position:relative;filter:drop-shadow(0 10px 15px rgba(8,127,193,.18));animation:toothFloat 1.5s ease-in-out infinite}
.loader-tooth:before{content:"";position:absolute;inset:3px 8px;background:linear-gradient(145deg,#fff,#e8fbfe);border:3px solid var(--cyan);border-radius:48% 48% 40% 40%/38% 38% 60% 60%}
.loader-tooth:after{content:"";position:absolute;width:25px;height:25px;left:23px;top:25px;border:4px solid transparent;border-top-color:var(--blue);border-right-color:var(--cyan);border-radius:50%;animation:spin .9s linear infinite}
.loader-line{width:110px;height:5px;border-radius:99px;background:#e4f5f8;margin:10px auto;overflow:hidden}
.loader-line:after{content:"";display:block;width:45%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--cyan));animation:sweep 1.1s ease-in-out infinite}
.loader-text{font-size:10px;text-transform:uppercase;letter-spacing:2px;font-weight:800;color:#718798}

/* header */
.header{height:76px;position:sticky;top:0;z-index:500;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid #edf2f5}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.logo{display:flex;align-items:center;gap:8px;color:var(--navy);font-weight:900;line-height:1;position:relative;flex:0 1 180px;min-width:130px}
.logo-tooth{display:block;width:100%;height:48px;object-fit:contain;object-position:left center;line-height:1}
.logo b,.logo small{display:none}
.navlinks{display:flex;gap:22px;align-items:center;font-size:12px;color:#2b4960}
.navlinks a{position:relative;padding:28px 0}
.navlinks a:after{content:"";position:absolute;left:0;right:100%;bottom:20px;height:2px;background:var(--blue);transition:.25s}
.navlinks a:hover,.navlinks a.active{color:var(--blue)}
.navlinks a:hover:after,.navlinks a.active:after{right:0}
.navbtn{padding:11px 17px;border-radius:25px;background:var(--blue);color:#fff;font-weight:800;font-size:11px;box-shadow:0 9px 20px rgba(8,127,193,.22);transition:.25s}
.navbtn:hover{transform:translateY(-2px);box-shadow:0 13px 25px rgba(8,127,193,.3)}
.menu{display:none;border:0;background:none;font-size:26px;color:var(--navy)}

/* hero */
.hero{background:linear-gradient(100deg,#fbfeff,#fff);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:48% 52%;min-height:490px}
.hero-copy{display:flex;justify-content:center;flex-direction:column;padding:50px 20px 40px 0;position:relative;z-index:2}
.eyebrow{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;font-weight:850;color:#61778a;margin-bottom:11px}
.hero h1{font-size:49px;line-height:1.02;letter-spacing:-2px;margin:0 0 15px;color:var(--navy)}
.hero h1 span{color:var(--blue)}
.hero p{font-size:14px;color:#586f82;max-width:560px;margin:0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:23px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 17px;border-radius:7px;font-size:11px;font-weight:850;transition:.25s;border:1px solid transparent}
.btn.primary{background:var(--navy);color:#fff;box-shadow:0 9px 20px rgba(7,52,90,.17)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 13px 25px rgba(7,52,90,.25)}
.btn.outline{background:#fff;border-color:#1986bc;color:var(--blue)}
.btn.outline:hover{background:#f2fbfd;transform:translateY(-2px)}
.hero-photo{position:relative;overflow:hidden;min-height:490px}
.hero-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hero-photo:hover img{transform:scale(1.035)}
.hero-photo:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(18,181,197,.14);filter:blur(35px);right:10%;top:10%;z-index:1;animation:glow 5s ease-in-out infinite}
.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 18%);z-index:2;pointer-events:none}
.float-card{position:absolute;z-index:5;background:#fff;border:1px solid #e7eff4;border-radius:13px;box-shadow:var(--shadow);padding:12px 14px;animation:float 4s ease-in-out infinite}
.float-card.one{right:20px;top:32px}.float-card.two{right:25px;bottom:28px;animation-delay:-1.7s}
.float-card strong{display:block;font-size:12px;color:var(--navy)}.float-card span{display:block;color:var(--muted);font-size:10px}
.hero-particles{position:absolute;inset:0;z-index:4;pointer-events:none}
.hero-particles i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--cyan);opacity:0;animation:particle 4s ease-in-out infinite}
.hero-particles i:nth-child(1){left:12%;top:28%;animation-delay:.3s}.hero-particles i:nth-child(2){left:74%;top:24%;animation-delay:1s}.hero-particles i:nth-child(3){left:61%;top:73%;animation-delay:1.8s}.hero-particles i:nth-child(4){left:24%;top:68%;animation-delay:2.6s}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:8px}
.stat{text-align:center;padding:15px 8px}.stat strong{font-size:19px;color:var(--navy);display:block}.stat span{font-size:9px;color:var(--muted)}

/* common */
.section{padding:60px 0}.section.soft{background:#f7fcfe}
.section-head{text-align:center;margin-bottom:29px}.section-head h2,.page-head h1{font-size:31px;line-height:1.1;letter-spacing:-.8px;color:var(--navy);margin:0}
.section-head p{font-size:12px;color:var(--muted);margin:8px auto 0;max-width:720px}
.section-head .eyebrow{margin-bottom:6px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.card{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:0 6px 22px rgba(15,65,95,.05);transition:.3s;position:relative}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card:after{content:"✦";position:absolute;top:9px;right:11px;color:var(--cyan);opacity:0;transform:scale(.5);transition:.25s}
.card:hover:after{opacity:1;transform:scale(1)}
.card img{width:100%;height:135px;object-fit:cover;transition:.65s}
.card:hover img{transform:scale(1.06)}
.card-body{padding:14px}.card h3{font-size:13px;color:var(--navy);margin:0 0 5px}.card p{font-size:10.5px;color:var(--muted);margin:0 0 9px}.more{font-size:10px;color:var(--blue);font-weight:850}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.feature{background:#fff;border:1px solid var(--line);border-radius:11px;text-align:center;padding:21px 16px}
.icon{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;background:#e8f8fb;color:var(--cyan);font-size:19px;animation:iconBreath 3.4s ease-in-out infinite}
.feature h3{font-size:12px;color:var(--navy);margin:0 0 5px}.feature p{font-size:10px;color:var(--muted);margin:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.split img{width:100%;height:350px;object-fit:cover;border-radius:13px;box-shadow:var(--shadow)}
.split h2{font-size:31px;line-height:1.1;color:var(--navy);margin:0 0 10px}.split p{color:var(--muted);font-size:13px}
.checks{display:grid;gap:8px;margin:18px 0}.check{display:flex;gap:9px;font-size:12px}.check i{font-style:normal;color:var(--cyan);font-weight:900}
.before-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.before-after{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:11px;overflow:hidden;position:relative}.before-after img{height:190px;width:100%;object-fit:cover;transition:.5s}.before-after:hover img{transform:scale(1.04)}
.ba-label{position:absolute;bottom:8px;padding:4px 7px;border-radius:4px;background:rgba(20,32,42,.72);color:#fff;font-size:9px;font-weight:800;z-index:3}.ba-label.before{left:8px}.ba-label.after{right:8px;background:#087fc1}
.before-after:after{content:"";position:absolute;top:0;bottom:0;left:-20%;width:13%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-15deg);animation:shine 4.2s ease-in-out infinite;pointer-events:none}
.testimonial{background:#fff;border:1px solid var(--line);border-radius:11px;padding:18px}.stars{color:var(--gold);font-size:11px;letter-spacing:1px}.testimonial p{font-size:11px;color:var(--muted);margin:10px 0}.testimonial b{font-size:11px;color:var(--navy)}
.cta{background:linear-gradient(105deg,#e9f8fc,#f7fcfe);border:1px solid #dceff4;border-radius:13px;padding:23px 27px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.cta h2{font-size:22px;color:var(--navy);margin:0}.cta p{font-size:11px;color:var(--muted);margin:4px 0 0}.cta .btn{animation:pulse 2.8s ease-in-out infinite}

/* inner pages */
.page-head{padding:46px 0 34px;background:linear-gradient(135deg,#f0fafc,#fff);border-bottom:1px solid var(--line)}
.crumb{font-size:9px;color:#7890a1;margin-bottom:8px}.page-head p{color:var(--muted);font-size:13px;max-width:720px;margin:8px 0 0}
.detail{display:grid;grid-template-columns:1fr 300px;gap:26px}.article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:27px}.article h2{font-size:22px;color:var(--navy);margin:27px 0 8px}.article p,.article li{font-size:12px;color:var(--muted)}.article ul{padding-left:20px}.side{border:1px solid var(--line);border-radius:14px;padding:19px;height:max-content;position:sticky;top:96px;background:#fff}.side h3{font-size:13px;color:var(--navy);margin:0 0 8px}.side a{display:block;padding:8px 0;border-bottom:1px solid var(--line);font-size:10px;color:#536d80}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.gallery img{width:100%;height:230px;object-fit:cover;border-radius:11px;transition:.4s}.gallery img:hover{transform:scale(1.025);box-shadow:var(--shadow)}
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.blog-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:.3s}.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.blog-card img{width:100%;height:160px;object-fit:cover}.blog-card .body{padding:15px}.tag{display:inline-block;padding:4px 8px;border-radius:20px;background:#e9f8fc;color:#087fc1;font-size:8px;font-weight:850}.blog-card h3{font-size:14px;color:var(--navy);margin:8px 0 5px}.blog-card p{font-size:10px;color:var(--muted);margin:0 0 8px}
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px}.contact-card,.form-card{border:1px solid var(--line);border-radius:14px;padding:23px}.contact-card h2{color:var(--navy);font-size:24px;margin:0 0 8px}.contact-row{padding:12px 0;border-bottom:1px solid var(--line)}.contact-row b{display:block;font-size:11px;color:var(--navy)}.contact-row span{font-size:10px;color:var(--muted)}.form{display:grid;grid-template-columns:1fr 1fr;gap:11px}.field{display:grid;gap:5px}.field.full{grid-column:1/-1}.field label{font-size:9px;font-weight:850;color:var(--navy)}input,select,textarea{font:inherit;border:1px solid #d9e5ed;border-radius:8px;padding:9px 10px;outline:none}textarea{min-height:115px}
.faq{display:grid;gap:8px}.faq-item{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}.faq-q{padding:10px 12px;font-size:11px;font-weight:800;color:var(--navy);display:flex;justify-content:space-between;cursor:pointer}.faq-a{max-height:0;overflow:hidden;padding:0 12px;color:var(--muted);font-size:10px;transition:.35s}.faq-item.open .faq-a{max-height:100px;padding:0 12px 11px}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.step{text-align:center;border:1px solid var(--line);border-radius:11px;padding:16px;background:#fff}.step-num{width:38px;height:38px;margin:auto;border-radius:50%;display:grid;place-items:center;background:#e8f8fb;color:var(--blue);font-weight:900}.step h3{font-size:11px;color:var(--navy);margin:8px 0 3px}.step p{font-size:9px;color:var(--muted);margin:0}

/* animations */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1)}
.reveal.left{transform:translateX(-30px)}.reveal.right{transform:translateX(30px)}.reveal.show{opacity:1;transform:none}
@keyframes toothFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes sweep{0%{margin-left:-50%}100%{margin-left:110%}}
@keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes glow{0%,100%{transform:translate(0) scale(1)}50%{transform:translate(-18px,12px) scale(1.12)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes particle{0%,100%{opacity:0;transform:translateY(8px) scale(.4)}35%,65%{opacity:1;transform:translateY(-7px) scale(1)}}
@keyframes iconBreath{0%,100%{box-shadow:0 0 0 0 rgba(18,181,197,0)}50%{box-shadow:0 0 0 7px rgba(18,181,197,.07);transform:scale(1.04)}}
@keyframes shine{0%,55%{left:-25%}78%,100%{left:125%}}
@keyframes pulse{0%,100%{box-shadow:0 7px 17px rgba(7,52,90,.15)}50%{box-shadow:0 10px 26px rgba(8,127,193,.28)}}

.footer{background:var(--navy2);color:#a9c3d1;padding:38px 0 15px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}.footer h3{color:#fff;font-size:12px;margin:0 0 10px}.footer p,.footer a{font-size:10px;color:#a9c3d1}.footer-links{display:grid;gap:6px}.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:25px;padding-top:12px;font-size:9px;color:#7895a8}

@media(max-width:950px){
 .navlinks{display:none}.menu{display:block}.navbtn{display:none}.hero-grid{grid-template-columns:1fr}.hero-photo{min-height:390px}.grid4,.feature-grid{grid-template-columns:repeat(2,1fr)}.detail,.contact{grid-template-columns:1fr}.side{position:static}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
 .container{width:calc(100% - 26px)}.header,.nav{height:68px}.navlinks{position:absolute;top:68px;left:13px;right:13px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;flex-direction:column;align-items:stretch;gap:0}.navlinks.open{display:flex}.navlinks a{padding:10px}.navlinks a:after{bottom:5px}.hero h1{font-size:39px}.hero-copy{padding:42px 0}.hero-photo{min-height:330px}.stats{grid-template-columns:1fr 1fr}.grid4,.grid3,.feature-grid,.before-grid,.gallery,.blog,.process{grid-template-columns:1fr}.split{grid-template-columns:1fr}.split img{height:270px}.cta{display:block}.cta .btn{margin-top:14px}.form{grid-template-columns:1fr}.field.full{grid-column:auto}.footer-grid{grid-template-columns:1fr}.before-after img{height:180px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
