/* ==========================================================================
   Dirt Busters — FX layer: gradients, glows, 3D and motion.
   Loaded after db.css. Everything here is decorative; reduced-motion users
   get the static version.
   ========================================================================== */
@property --db-angle{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ---------- Top bar: live dot + gradient sweep ---------- */
.db-topbar{background:linear-gradient(90deg,#070f33,#13235f 40%,#0b1640 60%,#070f33);background-size:200% 100%;animation:db-sweep 12s linear infinite}
@keyframes db-sweep{to{background-position:-200% 0}}
.db-topbar .db-dot{box-shadow:0 0 0 0 rgba(22,198,90,.7);animation:db-ping 1.8s infinite}
@keyframes db-ping{0%{box-shadow:0 0 0 0 rgba(22,198,90,.75)}80%{box-shadow:0 0 0 12px rgba(22,198,90,0)}100%{box-shadow:0 0 0 0 rgba(22,198,90,0)}}

/* Header gets a glowing slime underline */
.db-header{border-bottom:0;background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 10px 30px -18px rgba(11,22,64,.5)}
.db-header::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--slime),#7dffa9,var(--red),var(--slime));background-size:300% 100%;animation:db-sweep 6s linear infinite;box-shadow:0 0 14px rgba(22,198,90,.8)}
.db-nav a{position:relative}
.db-nav a:hover,.db-nav .current-menu-item>a{background:linear-gradient(135deg,var(--navy-3),var(--navy));box-shadow:0 6px 18px -6px rgba(31,53,144,.8)}
.db-call{background:linear-gradient(135deg,#ff4a4f,var(--red) 55%,#a80f15);box-shadow:0 8px 24px -6px rgba(226,38,44,.85),inset 0 1px 0 rgba(255,255,255,.35);animation:db-throb 2.8s ease-in-out infinite}
@keyframes db-throb{0%,100%{box-shadow:0 8px 24px -6px rgba(226,38,44,.85),0 0 0 0 rgba(226,38,44,.4),inset 0 1px 0 rgba(255,255,255,.35)}50%{box-shadow:0 8px 24px -6px rgba(226,38,44,.85),0 0 0 10px rgba(226,38,44,0),inset 0 1px 0 rgba(255,255,255,.35)}}

/* ---------- Hero: animated aurora, scan grid, floating slime orbs ---------- */
.db-hero{background:
  radial-gradient(60% 70% at 85% 15%,rgba(22,198,90,.35),transparent 60%),
  radial-gradient(50% 60% at 0% 100%,rgba(226,38,44,.28),transparent 60%),
  radial-gradient(40% 50% at 50% 50%,rgba(31,53,144,.9),transparent 70%),
  linear-gradient(160deg,#060d2e 0%,#0f1d57 45%,#0b1640 100%)!important;overflow:hidden;isolation:isolate}
.db-hero::before{content:"";position:absolute;inset:-2px;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(125,255,169,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(125,255,169,.09) 1px,transparent 1px);
  background-size:46px 46px;transform:perspective(700px) rotateX(58deg) translateY(38%) scale(2.2);transform-origin:50% 100%;
  mask-image:linear-gradient(0deg,#000 10%,transparent 70%);-webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 70%);animation:db-grid 7s linear infinite}
@keyframes db-grid{to{background-position:0 46px,0 0}}
.db-hero>.wp-block-columns::before,.db-hero>.wp-block-columns::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);z-index:-1;pointer-events:none;animation:db-orb 14s ease-in-out infinite}
.db-hero>.wp-block-columns{position:relative}
.db-hero>.wp-block-columns::before{width:340px;height:340px;right:6%;top:-80px;background:radial-gradient(circle,rgba(22,198,90,.55),transparent 65%)}
.db-hero>.wp-block-columns::after{width:260px;height:260px;left:-120px;bottom:-60px;background:radial-gradient(circle,rgba(226,38,44,.45),transparent 65%);animation-delay:-7s}
@keyframes db-orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,30px) scale(1.15)}66%{transform:translate(-30px,20px) scale(.9)}}
.db-hero h1{text-shadow:0 6px 0 rgba(0,0,0,.25),0 0 40px rgba(22,198,90,.15)}
.db-hero h1 .db-hl,.db-cta h2 .db-hl-red,.db h2 .db-hl{background:linear-gradient(90deg,#16c65a,#7dffa9,#16c65a,#0ea84a);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:db-shine 5s linear infinite;filter:drop-shadow(0 0 18px rgba(22,198,90,.45))}
.db-cta h2 .db-hl-red{background-image:linear-gradient(90deg,#b8161c,#ff5a5f,#e2262c,#b8161c);filter:none}
@keyframes db-shine{to{background-position:-250% 0}}
.db-hero .db-eyebrow,.db-hero .db-crumb{animation:db-rise .8s both}
.db-hero h1{animation:db-rise .9s .1s both}
.db-hero h1+p,.db-hero p:not(.db-eyebrow):not(.db-crumb){animation:db-rise .9s .25s both}
.db-hero .wp-block-buttons{animation:db-rise .9s .4s both}
@keyframes db-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* Hero photo: 3D tilted card with glow + hazard tag */
.db-frame{background:linear-gradient(135deg,#7dffa9,var(--slime) 40%,#0a7b36);transform:perspective(1000px) rotateY(-12deg) rotateX(5deg);box-shadow:-30px 40px 80px -30px rgba(0,0,0,.8),0 0 60px -10px rgba(22,198,90,.55);transition:transform .5s cubic-bezier(.2,.8,.2,1);animation:db-float 6s ease-in-out infinite}
.db-frame:hover{transform:perspective(1000px) rotateY(0) rotateX(0) scale(1.02)}
@keyframes db-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.db-frame img{position:relative;z-index:1}
.db-frame::after{background:linear-gradient(135deg,#ff4a4f,var(--red));box-shadow:0 10px 24px -6px rgba(226,38,44,.8);transform:rotate(-4deg);z-index:3}
.db-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);background-size:250% 100%;animation:db-glint 5s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes db-glint{0%,60%{background-position:150% 0}100%{background-position:-100% 0}}

/* Stat tiles: glass + glow */
.db-stats>.wp-block-column{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border:1px solid rgba(125,255,169,.22);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 20px 40px -24px rgba(0,0,0,.8);transition:transform .35s,box-shadow .35s}
.db-stats>.wp-block-column:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 30px -4px rgba(22,198,90,.5)}
.db-stat-n{text-shadow:0 0 22px rgba(125,255,169,.6)}

/* ---------- Buttons: gradient, glow, shimmer ---------- */
.db .wp-block-button__link{position:relative;overflow:hidden;background:linear-gradient(135deg,#7dffa9 -20%,var(--slime) 45%,#0a9a44);border:0;box-shadow:0 12px 28px -10px rgba(22,198,90,.95),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .25s,box-shadow .25s}
.db .wp-block-button__link::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
.db .wp-block-button__link:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 36px -10px rgba(22,198,90,1),0 0 0 4px rgba(22,198,90,.18),inset 0 1px 0 rgba(255,255,255,.45)}
.db .wp-block-button__link:hover::after{left:130%}
.db .db-btn-red .wp-block-button__link{background:linear-gradient(135deg,#ff6b6f -20%,var(--red) 45%,#a80f15);box-shadow:0 12px 28px -10px rgba(226,38,44,.95),inset 0 1px 0 rgba(255,255,255,.35)}
.db .db-btn-red .wp-block-button__link:hover{box-shadow:0 18px 36px -10px rgba(226,38,44,1),0 0 0 4px rgba(226,38,44,.2),inset 0 1px 0 rgba(255,255,255,.35)}
.db .db-btn-ghost .wp-block-button__link{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.5);box-shadow:none;backdrop-filter:blur(4px)}
.db .db-btn-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.12);box-shadow:0 0 24px -4px rgba(255,255,255,.35)}
.db-cta .wp-block-button__link{background:linear-gradient(135deg,#1f3590,#0b1640)!important;box-shadow:0 14px 30px -10px rgba(11,22,64,.9)!important}
.db-cta .db-btn-red .wp-block-button__link{background:linear-gradient(135deg,#ff6b6f -20%,var(--red) 45%,#a80f15)!important}
.db-cta .db-btn-ghost .wp-block-button__link{background:transparent!important;border:2px solid var(--navy)!important;box-shadow:none!important}

/* ---------- Trust strip: floating 3D badges ---------- */
.db-trust{background:linear-gradient(180deg,#fff,#eef3fb)!important}
.db-badgerow{perspective:900px}
.db-badgerow figure{transform-style:preserve-3d;animation:db-bob 5s ease-in-out infinite}
.db-badgerow figure:nth-child(2n){animation-delay:-1.2s}.db-badgerow figure:nth-child(3n){animation-delay:-2.5s}
.db-badgerow img{filter:drop-shadow(0 14px 18px rgba(11,22,64,.28));transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s!important}
.db-badgerow figure:hover img{transform:rotateY(18deg) scale(1.15) translateZ(30px);filter:drop-shadow(0 20px 26px rgba(22,198,90,.45))}
@keyframes db-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- Section backgrounds ---------- */
.db-paper{background:radial-gradient(60% 50% at 100% 0%,rgba(22,198,90,.09),transparent 60%),radial-gradient(50% 50% at 0% 100%,rgba(31,53,144,.08),transparent 60%),#f3f6fb!important}
.db-dark{background:radial-gradient(70% 60% at 90% 10%,rgba(22,198,90,.18),transparent 60%),radial-gradient(60% 60% at 10% 90%,rgba(31,53,144,.8),transparent 60%),linear-gradient(180deg,#13235f,#0b1640)!important}
.db-deep{background:radial-gradient(60% 80% at 50% 120%,rgba(22,198,90,.28),transparent 60%),linear-gradient(180deg,#0b1640,#060d2e)!important;overflow:hidden}
.db-protect{background:radial-gradient(60% 70% at 100% 0%,rgba(22,198,90,.28),transparent 60%),radial-gradient(50% 60% at 0% 100%,rgba(31,53,144,.9),transparent 60%),linear-gradient(160deg,#0f1d57,#060d2e)!important;overflow:hidden}
.db-drip::after{filter:drop-shadow(0 8px 10px rgba(22,198,90,.45))}

/* ---------- Cards: 3D tilt + glow border ---------- */
.db-cards,.db-steps,.db-methods,.db-contact-cards{perspective:1200px}
.db-cards>.wp-block-column,.db-steps>.wp-block-column,.db-methods>.wp-block-column,.db-contact-cards>.wp-block-column{transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .3s;will-change:transform}
.db-cards>.wp-block-column{box-shadow:0 24px 50px -28px rgba(11,22,64,.55);overflow:hidden}
.db-cards>.wp-block-column::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(22,198,90,.16),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.db-cards>.wp-block-column:hover::before{opacity:1}
.db-cards>.wp-block-column:hover{box-shadow:0 34px 60px -28px rgba(11,22,64,.7),0 0 0 1px rgba(22,198,90,.35)}
.db-cards .db-ico{background:linear-gradient(135deg,var(--navy-3),var(--navy-2));box-shadow:0 10px 22px -8px rgba(31,53,144,.9),inset 0 1px 0 rgba(255,255,255,.2);transform:translateZ(40px);transition:transform .4s}
.db-cards>.wp-block-column:hover .db-ico{transform:translateZ(50px) rotate(-8deg) scale(1.1)}
.db-cards h3,.db-cards p{transform:translateZ(20px)}
.db-dark .db-cards>.wp-block-column{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}

/* Methods: gradient glass panels */
.db-methods>.wp-block-column:first-child{background:linear-gradient(145deg,#2a44b0,#13235f 60%,#0b1640)}
.db-methods>.wp-block-column:last-child{background:linear-gradient(145deg,#1fd46a,#0c7a3a 55%,#064a23)}
.db-methods>.wp-block-column{box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18)}
.db-methods>.wp-block-column::after{content:"";position:absolute;width:260px;height:260px;right:-80px;top:-80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%)}
.db-methods h3{text-shadow:0 2px 14px rgba(0,0,0,.35)}

/* Steps: numbered with gradient numerals */
.db-steps>.wp-block-column::before{background:linear-gradient(135deg,#7dffa9,var(--slime) 50%,var(--navy-3));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:2.8rem}
.db-steps>.wp-block-column{box-shadow:0 24px 50px -28px rgba(11,22,64,.5);border-bottom:4px solid transparent;border-image:linear-gradient(90deg,var(--slime),var(--navy-3)) 1}

/* Split media: 3D photo stacks */
.db-split figure{perspective:1000px}
.db-split figure img{transform:perspective(1000px) rotateY(8deg);box-shadow:30px 40px 70px -30px rgba(11,22,64,.7);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.db-split .wp-block-column:last-child figure img{transform:perspective(1000px) rotateY(-8deg);box-shadow:-30px 40px 70px -30px rgba(11,22,64,.7)}
.db-split figure:hover img{transform:perspective(1000px) rotateY(0) scale(1.02)}

/* Before/after: glowing 3D slab */
.db-compare{transform:perspective(1200px) rotateY(10deg) rotateX(3deg);box-shadow:30px 40px 80px -30px rgba(11,22,64,.75),0 0 0 6px #fff,0 0 0 8px rgba(22,198,90,.5);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.db-compare:hover{transform:perspective(1200px) rotateY(0) rotateX(0)}
.db-compare .db-handle{background:linear-gradient(180deg,#7dffa9,var(--slime));box-shadow:0 0 18px rgba(22,198,90,.9)}
.db-compare .db-handle::after{box-shadow:0 0 0 6px rgba(22,198,90,.3),0 0 26px rgba(22,198,90,.9);animation:db-nudge 2.4s ease-in-out infinite}
@keyframes db-nudge{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(-65%,-50%)}75%{transform:translate(-35%,-50%)}}

/* Protection: price flip + video phone glow */
.db-price>div{transition:transform .4s}
.db-price .new{background:linear-gradient(135deg,#7dffa9,var(--slime) 50%,#0a9a44);box-shadow:0 18px 36px -12px rgba(22,198,90,.9);transform:perspective(600px) rotateY(-10deg) scale(1.05);animation:db-pulse 3s ease-in-out infinite}
@keyframes db-pulse{0%,100%{box-shadow:0 18px 36px -12px rgba(22,198,90,.9)}50%{box-shadow:0 18px 50px -6px rgba(22,198,90,1)}}
.db-shorts{border:0;padding:6px;background:conic-gradient(from var(--db-angle),#16c65a,#7dffa9,#1f3590,#e2262c,#16c65a);animation:db-spin 5s linear infinite;box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 60px -10px rgba(22,198,90,.6);transform:perspective(1000px) rotateY(-10deg)}
.db-shorts iframe,.db-shorts video{border-radius:20px;background:#000}
@keyframes db-spin{to{--db-angle:360deg}}
.db-video{border:0;padding:6px;background:conic-gradient(from var(--db-angle),#16c65a,#7dffa9,#1f3590,#e2262c,#16c65a);animation:db-spin 5s linear infinite;box-shadow:0 30px 60px -24px rgba(11,22,64,.8)}
.db-video video{border-radius:16px}
.db-video{width:calc(100% - 40px);max-width:380px;margin:56px auto 8px!important}
@media (max-width:640px){.db-video{width:calc(100% - 64px);margin:44px auto 4px!important}}

/* Hazard band: moving stripes + red glow */
.db-hazard{background:radial-gradient(60% 80% at 100% 50%,rgba(226,38,44,.22),transparent 60%),#0d0d12!important;border:0;position:relative}
.db-hazard::before,.db-hazard::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(-45deg,var(--red) 0 22px,#111 22px 44px);background-size:62px 14px;animation:db-stripes 1.6s linear infinite}
.db-hazard::before{top:0}.db-hazard::after{bottom:0;animation-direction:reverse}
@keyframes db-stripes{to{background-position:62px 0}}
.db-hazard .db-quote{background:linear-gradient(90deg,rgba(22,198,90,.14),transparent);padding:16px 20px;border-radius:0 14px 14px 0;text-shadow:0 0 20px rgba(22,198,90,.35)}

/* Area chips pop */
.db .db-areas li{transition:transform .25s,box-shadow .25s,background .25s}
.db .db-areas li:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 10px 20px -8px rgba(22,198,90,.8);background:var(--slime);color:var(--ink);border-color:var(--slime)}

/* CTA: animated gradient + rings */
.db-cta{background:linear-gradient(120deg,#0ea84a,#16c65a 30%,#7dffa9 50%,#16c65a 70%,#0ea84a)!important;background-size:250% 100%!important;animation:db-sweep 10s linear infinite;overflow:hidden}
.db-cta::before,.db-cta::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;border:44px solid rgba(255,255,255,.14);animation:db-orb 12s ease-in-out infinite}
.db-cta::before{left:-100px;top:-120px}.db-cta::after{right:-90px;bottom:-140px;animation-delay:-6s}
.db-cta>*{position:relative;z-index:1}

/* FAQ + form glow */
.db .wp-block-details{transition:box-shadow .3s,transform .3s}
.db .wp-block-details:hover,.db .wp-block-details[open]{box-shadow:0 16px 36px -18px rgba(22,198,90,.6);transform:translateX(4px)}
.db-form{box-shadow:0 40px 80px -40px rgba(11,22,64,.6),0 0 0 1px rgba(22,198,90,.15);border-top:0;position:relative;overflow:hidden}
.db-form::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--slime),#7dffa9,var(--red),var(--slime));background-size:300% 100%;animation:db-sweep 5s linear infinite}
.db-form button{background:linear-gradient(135deg,#ff6b6f -20%,var(--red) 45%,#a80f15);box-shadow:0 14px 30px -10px rgba(226,38,44,.95)}

/* Gallery: 3D hover lift + glow caption */
.db .db-grid{perspective:1400px}
.db .db-grid figure{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transform-style:preserve-3d}
.db .db-grid figure:hover{transform:translateY(-8px) rotateX(6deg);box-shadow:0 30px 50px -24px rgba(11,22,64,.8),0 0 0 3px var(--slime)}
.db .db-grid figure img{transition:transform .6s}
.db .db-grid figure:hover img{transform:scale(1.08)}
.db-lightbox img{box-shadow:0 0 0 4px var(--slime),0 0 80px rgba(22,198,90,.45);animation:db-zoomin .35s cubic-bezier(.2,.8,.2,1)}
@keyframes db-zoomin{from{transform:scale(.85);opacity:0}}

/* Footer glow */
.db-footer{background:radial-gradient(60% 60% at 90% 0%,rgba(22,198,90,.14),transparent 60%),linear-gradient(180deg,#0b1640,#050a24)}
.db-fcall{text-shadow:0 0 22px rgba(125,255,169,.6)}
.db-footer .db-credit{color:var(--slime-glow);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(125,255,169,.4);transition:color .2s,border-color .2s}
.db-footer .db-credit:hover{color:#fff;border-color:#fff}
.db-float{background:linear-gradient(135deg,#ff6b6f,var(--red) 50%,#a80f15);animation:db-bobf 2.6s ease-in-out infinite,db-throb 2.6s ease-in-out infinite}
@keyframes db-bobf{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* ---------- Scroll reveal ---------- */
.db-reveal{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.db-reveal.in{opacity:1;transform:none}
.db-cards.db-reveal>.wp-block-column,.db-steps.db-reveal>.wp-block-column{opacity:0;transform:translateY(40px) rotateX(10deg);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.db-cards.db-reveal.in>.wp-block-column,.db-steps.db-reveal.in>.wp-block-column{opacity:1;transform:none}
.db-cards.in>.wp-block-column:nth-child(2),.db-steps.in>.wp-block-column:nth-child(2){transition-delay:.1s}
.db-cards.in>.wp-block-column:nth-child(3),.db-steps.in>.wp-block-column:nth-child(3){transition-delay:.2s}
.db-cards.in>.wp-block-column:nth-child(4),.db-steps.in>.wp-block-column:nth-child(4){transition-delay:.3s}
.db-cards.in>.wp-block-column:nth-child(5){transition-delay:.4s}
.db-cards.in>.wp-block-column:nth-child(6){transition-delay:.5s}

/* Spotlight that follows the cursor on dark sections */
.db-spot{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(500px circle at var(--sx,50%) var(--sy,50%),rgba(125,255,169,.10),transparent 50%);transition:opacity .3s}

/* ---------- Stain-protection "force field" demo ---------- */
.db-bead{position:relative;max-width:420px;margin:0 auto;perspective:1100px;padding:30px 0}
.db-swatch{position:relative;aspect-ratio:1/1;border-radius:28px;transform:rotateX(52deg) rotateZ(-28deg);transform-style:preserve-3d;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 3px,transparent 3px 7px),repeating-linear-gradient(-45deg,rgba(0,0,0,.08) 0 3px,transparent 3px 7px),linear-gradient(135deg,#c9b99a,#a8977a 60%,#8d7d62);
  box-shadow:0 60px 60px -30px rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,255,255,.15);animation:db-swatch 9s ease-in-out infinite}
@keyframes db-swatch{0%,100%{transform:rotateX(52deg) rotateZ(-28deg)}50%{transform:rotateX(48deg) rotateZ(-22deg)}}
.db-swatch::before{content:"";position:absolute;inset:-14px;border-radius:36px;border:2px solid rgba(125,255,169,.6);box-shadow:0 0 30px rgba(22,198,90,.7),inset 0 0 30px rgba(22,198,90,.4);transform:translateZ(18px);animation:db-field 3s ease-in-out infinite}
@keyframes db-field{0%,100%{opacity:.55}50%{opacity:1}}
.db-swatch .d{position:absolute;width:44px;height:44px;border-radius:50%;transform:translateZ(22px);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 10%,rgba(190,225,255,.55) 22%,rgba(90,150,220,.35) 60%,rgba(40,90,170,.5) 100%);
  box-shadow:6px 10px 12px rgba(0,0,0,.35),inset -4px -6px 10px rgba(20,60,130,.35);animation:db-drop 4.5s ease-in infinite}
.db-swatch .d1{left:18%;top:22%}.db-swatch .d2{left:58%;top:16%;width:30px;height:30px;animation-delay:-1s}
.db-swatch .d3{left:40%;top:52%;width:56px;height:56px;animation-delay:-2s;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0 9%,rgba(170,40,70,.45) 30%,rgba(120,15,45,.7) 100%)}
.db-swatch .d4{left:70%;top:62%;width:34px;height:34px;animation-delay:-3s}
.db-swatch .d5{left:22%;top:70%;width:26px;height:26px;animation-delay:-3.6s}
@keyframes db-drop{0%{opacity:0;transform:translateZ(160px) scale(.6)}18%{opacity:1;transform:translateZ(22px) scale(1.15,.85)}26%{transform:translateZ(22px) scale(.95,1.05)}34%,80%{opacity:1;transform:translateZ(22px) scale(1)}100%{opacity:0;transform:translateZ(22px) translate(60px,60px) scale(.7)}}
.db-bead-cap{text-align:center;margin-top:36px!important;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--slime-glow);text-shadow:0 0 18px rgba(22,198,90,.7)}
.db-bead-tag{position:absolute;top:6px;right:0;background:linear-gradient(135deg,#7dffa9,var(--slime));color:var(--ink);font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;padding:6px 14px;border-radius:99px;box-shadow:0 10px 24px -8px rgba(22,198,90,.9);z-index:3}

/* ---------- FAQ cards: navy gradient so they stand off the white ---------- */
.db .wp-block-details{background:linear-gradient(135deg,#1f3590 0%,#13235f 55%,#0b1640 100%);border-left:5px solid var(--slime);box-shadow:0 18px 36px -20px rgba(11,22,64,.8),inset 0 1px 0 rgba(255,255,255,.12)}
.db .wp-block-details summary{color:#fff}
.db .wp-block-details>*:not(summary){color:#c9d2ee}
.db .wp-block-details summary::after,.db .wp-block-details[open] summary::after{background-color:var(--slime);background-image:linear-gradient(var(--navy-2),var(--navy-2)),linear-gradient(var(--navy-2),var(--navy-2));background-size:12px 2px,2px 12px;background-position:center center,center center;background-repeat:no-repeat;box-shadow:0 0 16px rgba(22,198,90,.6);transition:transform .25s ease}
.db .wp-block-details[open] summary::after{transform:translateY(-50%) rotate(45deg);background-color:var(--red);background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);box-shadow:0 0 16px rgba(226,38,44,.6)}
.db .wp-block-details:hover,.db .wp-block-details[open]{box-shadow:0 22px 44px -18px rgba(22,198,90,.55),inset 0 1px 0 rgba(255,255,255,.12)}

/* ---------- Google reviews ---------- */
.db-revhead{display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 22px;margin-top:6px}
.db-revhead .sc{font-family:var(--f-display);font-size:2.2rem;line-height:1;color:#fff;text-shadow:0 0 20px rgba(255,200,40,.45)}
.db-revhead .st{color:#ffc928;font-size:1.4rem;letter-spacing:2px;text-shadow:0 0 14px rgba(255,201,40,.6)}
.db-revhead .ct{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#c9d2ee}
.db-revhead svg{width:26px;height:26px}
.db-paper .db-revhead{background:#fff;border-color:#e1e7f2;box-shadow:0 10px 30px -18px rgba(11,22,64,.4)}
.db-paper .db-revhead .sc{color:var(--navy);text-shadow:none}
.db-paper .db-revhead .ct{color:var(--muted)}
.db-marquee{overflow:hidden;margin-top:34px;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.db-marquee+.db-marquee{margin-top:6px}
.db-track{display:flex;gap:20px;width:max-content;animation:db-marq 110s linear infinite}
.db-marquee.rev .db-track{animation-direction:reverse;animation-duration:130s}
.db-marquee:hover .db-track{animation-play-state:paused}
@keyframes db-marq{to{transform:translateX(calc(-50% - 10px))}}
.db-rev{position:relative;width:340px;flex:0 0 auto;margin:0;text-align:left;background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03));border:1px solid rgba(125,255,169,.22);border-radius:20px;padding:24px 22px 20px;color:#dbe2f6;display:flex;flex-direction:column;gap:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 40px -26px rgba(0,0,0,.9);transition:transform .3s,box-shadow .3s,border-color .3s}
.db-rev:hover{transform:translateY(-6px);border-color:rgba(125,255,169,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 30px -6px rgba(22,198,90,.55)}
.db-rev::before{content:"\201C";position:absolute;right:16px;top:-8px;font-family:Georgia,serif;font-size:5rem;line-height:1;color:var(--slime);opacity:.35}
.db-rev blockquote{margin:0;padding:0;border:0;font-size:1rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.db-rev figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.db-rev-av{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-cond);font-weight:700;font-size:1.2rem;color:#fff;background:linear-gradient(135deg,var(--slime),var(--navy-3));box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.db-rev b{display:block;color:#fff;font-family:var(--f-cond);font-size:1.1rem;letter-spacing:.03em}
.db-rev small{display:flex;align-items:center;gap:6px;color:#9fb0de;font-size:.82rem}
.db-rev small svg{width:14px;height:14px}
.db-revgrid{columns:3 300px;column-gap:22px;margin-top:40px;text-align:left}
.db-revgrid .db-rev{width:auto;break-inside:avoid;margin:0 0 22px}
.db-revgrid .db-rev blockquote{-webkit-line-clamp:unset;display:block}
.db-paper .db-rev{background:#fff;color:#3d4668;border:1px solid #e3e8f2;box-shadow:0 20px 40px -26px rgba(11,22,64,.45)}
.db-paper .db-rev b{color:var(--navy)}
.db-paper .db-rev small{color:var(--muted)}
.db-paper .db-rev:hover{border-color:var(--slime);box-shadow:0 26px 50px -24px rgba(22,198,90,.5)}
@media (max-width:640px){.db-rev{width:280px}.db-revhead .sc{font-size:1.8rem}}

/* ---------- Mobile menu button: centred lines, hover glow, morph to X ---------- */
.db-burger{position:relative;width:52px;height:48px;padding:0!important;border:0;border-radius:14px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:linear-gradient(135deg,var(--navy-3),var(--navy) 55%,var(--navy-2));box-shadow:0 8px 20px -8px rgba(11,22,64,.8),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .3s;-webkit-tap-highlight-color:transparent}
@media (max-width:960px){.db-burger{display:flex!important}}
.db-burger span{display:block;width:24px;height:3px;margin:0!important;border-radius:3px;background:#fff;transform-origin:center;transition:transform .35s cubic-bezier(.6,-0.3,.3,1.4),opacity .2s,width .25s,background .25s}
.db-burger span:nth-child(2){width:18px;align-self:center}
.db-burger:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(22,198,90,.7),0 0 0 3px rgba(22,198,90,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.db-burger:hover span{background:var(--slime-glow)}
.db-burger:hover span:nth-child(2){width:24px}
.db-burger:active{transform:scale(.9)}
.db-burger::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(22,198,90,.6);pointer-events:none}
.db-burger.pop::after{animation:db-burst .5s ease-out}
@keyframes db-burst{from{box-shadow:0 0 0 0 rgba(22,198,90,.6)}to{box-shadow:0 0 0 16px rgba(22,198,90,0)}}
.db-burger[aria-expanded="true"]{background:linear-gradient(135deg,#ff6b6f,var(--red) 55%,#a80f15);box-shadow:0 10px 24px -8px rgba(226,38,44,.85),inset 0 1px 0 rgba(255,255,255,.25)}
.db-burger[aria-expanded="true"] span{background:#fff}
.db-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.db-burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.db-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:960px){
  .db-nav{display:block!important;visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s;box-shadow:0 24px 40px -20px rgba(11,22,64,.5)}
  .db-nav.open{visibility:visible;opacity:1;transform:none;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
  .db-nav li{opacity:0;transform:translateX(-14px);transition:opacity .3s,transform .3s}
  .db-nav.open li{opacity:1;transform:none}
  .db-nav.open li:nth-child(2){transition-delay:.05s}.db-nav.open li:nth-child(3){transition-delay:.1s}.db-nav.open li:nth-child(4){transition-delay:.15s}.db-nav.open li:nth-child(5){transition-delay:.2s}
}

/* ---------- Phones/tablets: no hover tilt, so every card looks the same ---------- */
@media (hover:none),(max-width:960px){
  .db-cards>.wp-block-column,.db-steps>.wp-block-column,.db-methods>.wp-block-column,.db-contact-cards>.wp-block-column,.db-stats>.wp-block-column{transform:none!important}
  .db-cards>.wp-block-column:hover,.db-stats>.wp-block-column:hover,.db-rev:hover,.db .wp-block-details:hover{transform:none}
  .db-cards>.wp-block-column::before{display:none}
  .db-cards>.wp-block-column:hover .db-ico{transform:translateZ(40px)}
  .db-cards>.wp-block-column:hover{box-shadow:0 24px 50px -28px rgba(11,22,64,.55)}
  .db-cards,.db-steps,.db-methods,.db-contact-cards,.db-badgerow,.db .db-grid{perspective:none!important}
  .db-cards>.wp-block-column,.db-steps>.wp-block-column,.db-methods>.wp-block-column,.db-contact-cards>.wp-block-column{transform-style:flat!important;will-change:auto!important}
  .db-cards *,.db-steps *,.db-methods *,.db-contact-cards *{transform:none!important}
}

/* ---------- Mobile: keep it smooth ---------- */
@media (max-width:960px){
  .db-frame,.db-compare,.db-split figure img,.db-split .wp-block-column:last-child figure img,.db-shorts,.db-price .new{transform:none}
  .db-hero>.wp-block-columns::before{width:220px;height:220px}
  .db-bead{max-width:270px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .db-reveal,.db-cards.db-reveal>.wp-block-column,.db-steps.db-reveal>.wp-block-column{opacity:1!important;transform:none!important}
}