:root { --bd-blue:#168fbd; --bd-mint:#5ecbc9; --bd-ink:#043b50; }
.banner-demo { background:#f3f8f9; color:var(--bd-ink); }
.banner-demo__version { margin:0; padding:12px 24px; color:#64757b; background:#eef1f2; font-size:13px; font-weight:800; }
.banner-demo__hero { position:relative; min-height:650px; overflow:hidden; padding:80px 0 !important; }
.banner-demo__hero--light { background:#eefafd; }
.banner-demo__hero--light { padding-top:45px !important; }
.banner-demo__hero--mint { background:var(--bd-mint); }
.banner-demo__hero--navy { background:#0c5f80; }
.banner-demo__inner { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; gap:20px; min-height:490px; }
.banner-demo__copy { position:relative; z-index:3; max-width:690px; }
.banner-demo__eyebrow { display:inline-flex; padding:8px 17px; border:1px solid #8bd9ec; border-radius:999px; color:var(--bd-blue); background:rgba(255,255,255,.8); font-size:14px; font-weight:800; }
.banner-demo h1 { margin:20px 0 8px; color:var(--bd-ink); font-family:var(--title-font),"Noto Sans HK",sans-serif; font-size:clamp(39px,4.7vw,68px); line-height:1.12; letter-spacing:-.04em; }
.banner-demo__hero--light h1 { white-space:nowrap; font-size:clamp(34px,4.2vw,62px); }
.banner-demo h2 { margin:0; color:var(--bd-ink); font-family:var(--title-font),"Noto Sans HK",sans-serif; font-size:clamp(24px,2.7vw,38px); line-height:1.3; }
.banner-demo h2 strong { color:#ef8f39; font-weight:900; }
.banner-demo__proof { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; color:#236b7b; font-size:13px; font-weight:800; line-height:1.4; }
.banner-demo__proof-item { display:inline-flex; align-items:center; gap:6px; margin:0; padding:8px 10px; border:1px solid rgba(22,143,189,.18); border-radius:999px; background:rgba(255,255,255,.7); box-shadow:0 4px 12px rgba(32,101,116,.06); color:#236b7b; font:inherit; }
.banner-demo__proof-item i { color:var(--bd-blue); font-size:12px; }
.banner-demo__lead { max-width:620px; margin:19px 0 0; color:#365d69; font-size:17px; line-height:1.85; }
.banner-demo__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:29px; }
.banner-demo__actions a { display:inline-flex; align-items:center; gap:9px; min-height:52px; padding:14px 21px; border-radius:999px; font-size:15px; font-weight:800; transition:transform .2s ease,filter .2s ease; }
.banner-demo__actions a:hover { transform:translateY(-2px); filter:brightness(.95); }
.banner-demo__phone:hover { color:#fff; }
.banner-demo__whatsapp:hover { color:#075f61; }
.banner-demo__phone { color:#fff; background:var(--bd-blue); box-shadow:0 9px 20px rgba(22,143,189,.2); }
.banner-demo__whatsapp { color:#075f61; background:#a8e7d8; box-shadow:0 9px 20px rgba(31,150,128,.15); }
.banner-demo__whatsapp span { margin-left:3px; font-size:20px; }
.banner-demo__visual { position:relative; min-height:520px; }
.banner-demo__visual img { position:absolute; z-index:2; right:-8%; bottom:-35px; width:min(790px,126%); max-width:none; border:10px solid #fff; border-radius:110px 28px 110px 28px; box-shadow:0 26px 55px rgba(23,77,93,.18); }
.banner-demo__ring { position:absolute; z-index:1; border:2px solid rgba(22,143,189,.32); border-radius:50%; }
.banner-demo__ring--one { top:-2%; right:2%; width:300px; height:300px; }
.banner-demo__ring--two { bottom:-8%; left:-2%; width:210px; height:210px; border-color:rgba(94,203,201,.5); }
.banner-demo__paw { position:absolute; z-index:3; right:4%; bottom:8%; color:rgba(22,143,189,.35); font-size:52px; transform:rotate(-18deg); }
.banner-demo__pet { position:absolute; z-index:3; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; background:#fff; box-shadow:0 12px 26px rgba(23,77,93,.16); font-size:22px; color:var(--bd-blue); animation:banner-demo-pet-float 5.5s ease-in-out infinite; }
.banner-demo__pet--bone { top:9%; left:-4%; color:#ef8f39; }
.banner-demo__pet--dog { top:-5%; right:12%; animation-delay:.9s; }
.banner-demo__pet--cat { bottom:16%; left:-7%; color:var(--bd-mint); animation-delay:1.8s; }
@keyframes banner-demo-pet-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
.banner-demo__decor { position:absolute; top:-180px; right:-100px; width:620px; height:280px; border-radius:0 0 50% 50%; background:rgba(94,203,201,.9); }
.banner-demo__hero--mint h1,.banner-demo__hero--mint h2 { color:#fff; }
.banner-demo__hero--mint h2 strong { color:#ffe05b; }
.banner-demo__hero--mint .banner-demo__lead { color:rgba(255,255,255,.9); }
.banner-demo__hero--mint .banner-demo__proof-item { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.14); }
.banner-demo__hero--mint .banner-demo__proof-item i { color:#ffe05b; }
.banner-demo__hero--mint .banner-demo__decor { background:rgba(255,255,255,.1); }
.banner-demo__hero--mint .banner-demo__phone { color:#168fbd; background:#fff; }
.banner-demo__hero--mint .banner-demo__whatsapp { color:#fff; background:#25d366; }
.banner-demo__hero--mint .banner-demo__whatsapp:hover { color:#fff; }
.banner-demo__hero--navy h1,.banner-demo__hero--navy h2 { color:#fff; }
.banner-demo__hero--navy h2 strong { color:#6fe2d8; }
.banner-demo__hero--navy .banner-demo__lead { color:rgba(255,255,255,.84); }
.banner-demo__hero--navy .banner-demo__proof-item { color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.12); }
.banner-demo__hero--navy .banner-demo__proof-item i { color:#6fe2d8; }
.banner-demo__hero--navy .banner-demo__decor { background:rgba(94,203,201,.25); }
.banner-demo__hero--navy .banner-demo__phone { color:#0c5f80; background:#fff; }
.banner-demo__hero--navy .banner-demo__whatsapp { color:#fff; background:#25d366; }
.banner-demo__hero--navy .banner-demo__whatsapp:hover { color:#fff; }
@media (max-width:991px) { .banner-demo__hero { padding:60px 0 40px !important; } .banner-demo__hero--light { padding-top:105px !important; } .banner-demo__hero--light h1 { white-space:normal; } .banner-demo__inner { grid-template-columns:1fr; gap:10px; } .banner-demo__copy { max-width:700px; margin:0 auto; text-align:center; } .banner-demo__eyebrow { justify-content:center; } .banner-demo__proof { justify-content:center; } .banner-demo__lead { margin-right:auto; margin-left:auto; } .banner-demo__actions { justify-content:center; } .banner-demo__visual { width:min(670px,100%); min-height:365px; margin:0 auto; } .banner-demo__visual img { right:0; bottom:-30px; width:100%; } .banner-demo__pet { width:46px; height:46px; font-size:17px; } .banner-demo__ring--one { width:220px; height:220px; } .banner-demo__ring--two { width:160px; height:160px; } }
@media (max-width:767px) { .banner-demo__hero { min-height:700px; padding:45px 0 25px !important; } .banner-demo__hero--light { padding-top:78px !important; } .banner-demo h1 { font-size:39px; } .banner-demo h2 { font-size:25px; } .banner-demo__lead { font-size:15px; line-height:1.8; } .banner-demo__proof { justify-content:center; gap:5px; font-size:11px; } .banner-demo__proof-item { padding:7px 8px; } .banner-demo__actions { display:grid; grid-template-columns:1fr; } .banner-demo__actions a { justify-content:center; } .banner-demo__visual { min-height:260px; } .banner-demo__visual img { right:-14%; bottom:-22px; width:125%; border-width:6px; border-radius:70px 20px 70px 20px; } .banner-demo__pet { width:40px; height:40px; font-size:15px; } .banner-demo__pet--bone { top:6%; left:0; } .banner-demo__pet--dog { top:-8%; } .banner-demo__pet--cat { left:-4%; } .banner-demo__ring--two { display:none; } .banner-demo__decor { width:370px; height:150px; } }