/* =====================================================================
   Excelsites – overrides & additions on top of the Dizly theme
   Brand: pink #F9004D · orange #F57722 · amber #FFC20F
   ===================================================================== */
:root{
  --brand-pink:#F9004D; --brand-orange:#F57722; --brand-amber:#FFC20F;
  --brand-gradient:linear-gradient(90deg,#F9004D,#F57722 55%,#FFC20F);
  --wa:#25D366;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}

/* accessibility */
.skip-link{position:absolute;left:12px;top:-70px;z-index:100000;background:var(--brand-orange);color:#000;padding:10px 18px;border-radius:10px;font-weight:700;transition:top .2s}
.skip-link:focus{top:12px;color:#000}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--brand-amber);outline-offset:3px}

/* logos */
.header-logo img,.widget-logo img,.offcanvas__logo img{height:44px;width:auto;max-width:none}
.loader-logo img{width:64px;height:64px}
.main-menu ul li.active>a{color:var(--brand-orange)}

/* gradient accent text (theme only styled it inside the hero) */
.text-gradient{background:var(--brand-gradient);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-section .custom-hero-box .title .text-gradient{background:linear-gradient(90deg,#F9004D,#F57722,#FFC20F,#F57722,#F9004D);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (prefers-reduced-motion:reduce){.hero-section .custom-hero-box .title .text-gradient{animation:none}}

/* hero */
.hero-points{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;list-style:none;padding:0;margin:38px 0 0;color:rgba(255,255,255,.78);font-size:.95rem}
.hero-points li{display:flex;align-items:center;gap:9px}
.hero-points i{color:var(--brand-orange)}
.hero-video{position:relative;border-radius:30px;overflow:hidden;background:#fff;aspect-ratio:16/9;box-shadow:0 50px 100px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)}
.hero-video video{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.video-sound{position:absolute;right:16px;bottom:16px;z-index:12;display:inline-flex;align-items:center;gap:9px;background:rgba(17,17,17,.82);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:10px 18px;font-size:.85rem;font-weight:600;cursor:pointer;backdrop-filter:blur(8px);transition:background .25s}
.video-sound:hover{background:var(--brand-orange);color:#000}
@media (max-width:575px){.video-sound{right:10px;bottom:10px;padding:8px 13px;font-size:.78rem}.hero-video{border-radius:18px}}

/* cards / icons */
.service-card.style5 .icon-wrap i{font-size:30px;color:var(--brand-orange)}
.service-card.style5:hover .icon-wrap i{color:#fff}
.step-card{position:relative;height:100%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:30px;padding:40px 36px;transition:border-color .3s,transform .3s}
.step-card:hover{border-color:rgba(245,119,34,.5);transform:translateY(-4px)}
.step-no{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:1.5rem;font-weight:800;background:var(--brand-gradient);color:#111;margin-bottom:24px}
.step-card h3{font-size:1.4rem;font-weight:700;color:#fff;margin-bottom:12px}
.step-card p{color:rgba(255,255,255,.7);margin:0}
.step-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.step-split h4{font-size:.95rem;font-weight:700;color:var(--brand-orange);margin-bottom:10px}
.step-split ul{list-style:none;padding:0;margin:0}
.step-split li{position:relative;padding-left:20px;margin-bottom:8px;color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.5}
.step-split li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--brand-orange)}
@media (max-width:575px){.step-split{grid-template-columns:1fr}.step-card{padding:32px 26px}}
.check-list{list-style:none;padding:0;margin:0 0 34px;display:grid;gap:14px}
.check-list li{display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.88);font-weight:500}
.check-list li i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand-gradient);color:#111;font-size:12px}
.included-item{display:flex;align-items:center;gap:16px;height:100%;padding:22px 24px;border-radius:22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.included-item i{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(245,119,34,.14);color:var(--brand-orange);font-size:20px}
.included-item strong{display:block;color:#fff;font-weight:600}
.included-item span{color:rgba(255,255,255,.62);font-size:.92rem}
.icon-box-rounded-yellow i{font-size:24px;color:var(--brand-orange)}

/* pricing */
.pricing-card.style5 .amount small{font-size:1rem;font-weight:600;margin-left:6px;opacity:.7}
.pricing-note{color:rgba(255,255,255,.65);text-align:center;margin:36px auto 0;max-width:640px}
.pricing-note a{color:var(--brand-orange);text-decoration:underline}

/* breadcrumb (real artwork instead of theme placeholder) */
.breadcrumb-wrapper{background-image:url(../images/breadcrumb.webp)!important;background-size:cover;background-position:center}
.breadcrumb-wrapper::before{opacity:.3}
.breadcrumb-wrapper .page-heading{padding:170px 0 90px}
@media (max-width:991px){.breadcrumb-wrapper .page-heading{padding:130px 0 60px}}
.breadcrumb-wrapper .page-heading .h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;color:#fff;margin:0 0 14px;line-height:1.1}
.breadcrumb-items{display:flex;justify-content:center;gap:8px;list-style:none;padding:0;margin:0;color:rgba(255,255,255,.85);align-items:center}
.breadcrumb-items a{color:rgba(255,255,255,.7)}
.breadcrumb-items a:hover{color:var(--brand-orange)}

/* blog */
.blog-excerpt{color:rgba(255,255,255,.66);margin:14px 0 0;line-height:1.7}
.article-body h2{font-size:1.65rem;font-weight:700;color:#fff;margin:2.3rem 0 .9rem;line-height:1.25}
.article-body p,.article-body li{color:rgba(255,255,255,.74);line-height:1.85;font-size:1.05rem}
.article-body p{margin-bottom:1.15rem}
.article-body ul,.article-body ol{padding-left:1.4rem;margin:0 0 1.4rem}
.article-body ul{list-style:disc}.article-body ol{list-style:decimal}
.article-body li{margin-bottom:.55rem}.article-body li::marker{color:var(--brand-orange)}
.article-body a{color:var(--brand-orange);text-decoration:underline}
.article-body .lede{font-size:1.22rem;color:#fff;line-height:1.7}
.article-body strong{color:#fff}
.article-cta{margin-top:2.5rem;padding:32px;border-radius:26px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.article-cta h3{color:#fff;font-size:1.35rem;margin-bottom:8px}
.article-cta p{margin-bottom:18px}
.blog-widget-categories li.active a{color:var(--brand-orange)}
.js-post[hidden]{display:none!important}
.filter-note{display:none;margin-bottom:24px;color:rgba(255,255,255,.75)}
.filter-note.show{display:block}.filter-note a{color:var(--brand-orange);text-decoration:underline}

/* contact */
.glass-input,.form-control.glass-input,.form-select.glass-input{color:#fff}
select.glass-input option{background:#1d1d1d;color:#fff}
.form-check-label{color:rgba(255,255,255,.7);font-size:.9rem}
.form-check-label a{color:var(--brand-orange);text-decoration:underline}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status{display:none;margin-top:18px;padding:14px 18px;border-radius:14px;font-weight:600}
.form-status.ok{display:block;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.45);color:#8BF5B3}
.form-status.err{display:block;background:rgba(249,0,77,.12);border:1px solid rgba(249,0,77,.45);color:#FF9DB8}
.form-status a{color:inherit;text-decoration:underline}
.btn-whatsapp{display:inline-flex;align-items:center;gap:12px;background:var(--wa);color:#04210f;font-weight:700;padding:16px 30px;border-radius:50px;transition:transform .25s,box-shadow .25s}
.btn-whatsapp:hover{color:#04210f;transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,211,102,.35)}
.btn-whatsapp i{font-size:1.4rem}

/* sticky WhatsApp */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:100;width:60px;height:60px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;font-size:34px;line-height:1;box-shadow:0 10px 30px rgba(37,211,102,.4);text-decoration:none}
.wa-float:hover{color:#fff;transform:scale(1.06)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:wa-pulse 2.6s ease-out infinite;pointer-events:none}
.wa-float .wa-label{position:absolute;right:74px;background:#fff;color:#111;font-size:14px;font-weight:600;padding:9px 15px;border-radius:12px;white-space:nowrap;opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .25s,transform .25s}
.wa-float:hover .wa-label,.wa-float:focus-visible .wa-label{opacity:1;transform:none}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-float::before{animation:none}}
.back-to-top{right:29px!important;bottom:100px!important}
@media (max-width:575px){.wa-float{right:16px;bottom:16px;width:56px;height:56px;font-size:30px}.back-to-top{right:21px!important;bottom:84px!important}.wa-float .wa-label{display:none}}

/* footer helpers */
.footer-contact li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;color:rgba(255,255,255,.75)}
.footer-contact i{color:var(--brand-orange);margin-top:4px}
.footer-contact a{color:rgba(255,255,255,.85)}.footer-contact a:hover{color:var(--brand-orange)}

/* ---- sentence case (theme forces Title Case on headings) ---- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.title,.section-title,.single-section-title,.blog-title,.breadcrumb-wrapper .page-heading h1{text-transform:none}

/* ---- custom cursor removed: the theme's hover "blob" was a grey disc covering links. Elements stay in the DOM because main.js expects them. ---- */
.mouse-cursor,.cursor-inner,.cursor-outer{display:none!important}

/* ---- preloader: the theme tints its (single-colour) logo with a CSS filter; ours is full colour ---- */
#preloader .preloader-inner .loader-logo img{filter:none!important;width:68px;height:68px;max-width:none;object-fit:contain;border-radius:50%;display:block}

/* ---- section typography for sections that have no theme-specific rule ---- */
.xs-section .section-title{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.12;font-weight:800}
.xs-section .section-desc{font-size:1.08rem;line-height:1.75}
.mxw-530{max-width:530px}

/* ---- marquee spacing and counter legibility ---- */
.marque-section-3 .marquee-item .text-slider{margin-right:28px}
.marque-section-3 .marquee-item .text-slider img{margin-right:0}
.counter-black-box .counter-item div.outline-text{-webkit-text-stroke:1.5px rgba(255,255,255,.55)}
span.date-btn{display:inline-block}

/* ---- blog listing card: image on top of the text (theme overlaps them by 150px, which suits tiny thumbs only) ---- */
.blog-card.style5{border:2px solid var(--border);border-radius:22px;overflow:hidden;margin-bottom:40px}
.blog-card.style5 .blog-card-thumb{margin-bottom:0;padding:0;border-radius:0;display:block}
.blog-card.style5 .blog-card-thumb img{display:block;width:100%;border-radius:0;aspect-ratio:16/9;object-fit:cover}
.blog-card.style5 .blog-card-body{border:0;border-radius:0;padding:30px 36px 36px;margin-top:0}
.blog-card.style5 .blog-card-body:not(:last-child){margin-bottom:0}
.blog-card.style5 .blog-card-body .post-date{position:static;justify-content:flex-start;margin-bottom:16px}
@media (max-width:575px){.blog-card.style5 .blog-card-body{padding:24px 22px 28px}}

/* ---- small fixes from visual review ---- */
.tagcloud a{text-transform:none}
.article-body .btn-outline-quote{text-decoration:none;color:#fff}
.article-body .btn-outline-quote:hover{color:#000}
.chooseUs-thumb,.chooseUs-thumb .image-wrapper{width:100%}
.chooseUs-thumb .image-wrapper img{width:100%}
.contact .title-area p{font-weight:400}
.xs-card{padding:40px;border-radius:32px;background:var(--bg-1);border:1px solid rgba(255,255,255,.06)}
@media (max-width:575px){.xs-card{padding:28px 22px}}
/* Theme checkbox = hidden input + styled label box. Keep the input focusable (keyboard + validation) but invisible, laid over the box. */
.contaform .form-check{position:relative;padding-left:0;min-height:30px}
.contaform .form-check input[type=checkbox]{display:block;visibility:visible;opacity:0;position:absolute;left:0;top:3px;width:20px;height:20px;margin:0;float:none;z-index:10;cursor:pointer}
.contaform .form-check input[type=checkbox]:focus-visible~label:before{outline:2px solid var(--brand-amber);outline-offset:2px}
.contaform .form-check input[type=checkbox]~label{line-height:1.5;padding-top:2px}
.contaform .form-check input[type=checkbox]~label:before{border-radius:5px}

@media (max-width:575px){.footer-bottom{padding-bottom:84px}}

/* ---- blog photos ---- */
.blog-card.style4 img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.footer-news-item .img-wrap img{width:100%;height:100%;object-fit:cover}
.photo-credit{font-size:.82rem;color:rgba(255,255,255,.5);margin:12px 0 40px}
.photo-credit a{color:rgba(255,255,255,.7);text-decoration:underline}
.photo-credit a:hover{color:var(--brand-orange)}

/* =====================================================================
   Liquid glass (home page only)
   1) CSS "lite" glass on every glass surface (also the fallback on phones / reduced motion / no WebGL)
   2) Real WebGL glass (assets/js/liquidglass, see excelsites-lg.js) on .lg-glass inside .lg-root
   ===================================================================== */
body.home .custom-hero-box,body.home .service-card.style5,body.home .step-card,body.home .pricing-card.style5,
body.home .counter-black-box,body.home .cta-glass-card,body.home .footer-cta-box,body.home .accordion-item,body.home .blog-card.style4{
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 46%,rgba(255,255,255,.075));
  -webkit-backdrop-filter:blur(22px) saturate(1.7) brightness(1.06);backdrop-filter:blur(22px) saturate(1.7) brightness(1.06);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.42),inset 0 -1.5px 1px rgba(255,255,255,.09),inset 1.5px 0 0 rgba(255,255,255,.10),inset -1.5px 0 0 rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.4)}
body.home .service-card.style5:hover,body.home .step-card:hover,body.home .blog-card.style4:hover{border-color:rgba(245,119,34,.55)}
body.home .accordion-item{overflow:hidden}
body.home .footer-cta-box{border-radius:40px}

.lg-root{position:relative;isolation:isolate}
.lg-root .lg-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;border-radius:inherit}
.lg-root .lg-glass{position:relative;z-index:2}
.lg-hero{padding:56px 48px;border-radius:52px;margin-bottom:60px}
.lg-hero .custom-hero-box{margin-bottom:0}
.lg-pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:56px;border-radius:52px}
@media (max-width:1199px){
  .lg-pricing{grid-template-columns:repeat(2,minmax(0,1fr));padding:40px}
  .lg-pricing>.lg-glass:nth-of-type(3){grid-column:1/-1;width:calc(50% - 14px);justify-self:center}
}
@media (max-width:991px){.lg-hero{padding:26px 14px;border-radius:32px;margin-bottom:28px}}
@media (max-width:767px){
  .lg-pricing{grid-template-columns:1fr;padding:18px;gap:20px;border-radius:32px}
  .lg-pricing>.lg-glass:nth-of-type(3){grid-column:auto;width:auto}
}
/* when the WebGL glass is running it draws the panel (edge light, refraction, shadow): switch the CSS glass off to avoid a double layer */
.lg-root.lg-active .lg-glass{background:none!important;border-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}

/* ---- legibility over the moving glass ---- */
body.home .custom-hero-box .title{text-wrap:balance}
.lg-hero .custom-hero-box{padding:52px 40px}
.lg-hero .custom-hero-box .title{font-size:clamp(2.3rem,4.2vw,4rem)}
.lg-root.lg-active .custom-hero-box .title .text-gradient{background:linear-gradient(90deg,#fff1f5,#ffe1c4,#fff2bd,#ffe1c4,#fff1f5);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lg-root.lg-active .lg-glass h1,.lg-root.lg-active .lg-glass p,.lg-root.lg-active .lg-glass li,.lg-root.lg-active .lg-glass .amount{text-shadow:0 1px 14px rgba(0,0,0,.5)}
.lg-root.lg-active .custom-hero-box .text,.lg-root.lg-active .hero-points{color:rgba(255,255,255,.88)}
.lg-root.lg-active .pricing-card .plan-desc,.lg-root.lg-active .pricing-card .period,.lg-root.lg-active .pricing-card .amount small{color:rgba(255,255,255,.8);opacity:1}
.lg-root.lg-active .pricing-card .checklist li{color:rgba(255,255,255,.92)}
.lg-root.lg-active .pricing-card .checklist li i{color:#ffb27a}
.lg-root.lg-active .lg-glass .text-gradient{text-shadow:none}
/* fallback hero (no WebGL / phones / reduced motion): tint the frosted panel darker so the text never sits on a bright patch */
body.home .lg-hero:not(.lg-active) .lg-glass{background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 46%,rgba(255,255,255,.06)),rgba(14,14,14,.58);-webkit-backdrop-filter:blur(24px) saturate(1.4) brightness(.7);backdrop-filter:blur(24px) saturate(1.4) brightness(.7)}

/* ---- contact form alignment: the theme adds margin-top:25px to text inputs but not to the dropdown, which pushed fields out of line ---- */
.contaform #contactForm .form-control,.contaform #contactForm .form-select,.contaform #contactForm textarea{margin-top:0}

/* ---- testimonials ---- */
.xs-testi{overflow:hidden;padding:4px}
.xs-testi .swiper-slide{height:auto}
.xs-testi-card{margin:0;height:100%;padding:44px 40px 36px;border-radius:32px;display:flex;flex-direction:column;position:relative;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 46%,rgba(255,255,255,.075));
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.42),inset 0 -1.5px 1px rgba(255,255,255,.09),0 24px 60px rgba(0,0,0,.4)}
.xs-quote{font-size:34px;color:var(--brand-orange);margin-bottom:20px}
.xs-testi-card blockquote{margin:0 0 28px;flex:1}
.xs-testi-card blockquote p{font-size:1.15rem;line-height:1.75;color:rgba(255,255,255,.9);margin:0}
.xs-testi-card figcaption{display:flex;align-items:center;gap:14px}
.xs-avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#111;background:var(--brand-gradient);flex:none}
.xs-testi-card strong{display:block;color:#fff;font-weight:700}
.xs-testi-card small{color:rgba(255,255,255,.66);font-size:.9rem}
.xs-testi-nav{display:flex;align-items:center;justify-content:space-between;margin-top:26px;padding:0 4px}
.xs-testi .slider-pagination{display:flex;gap:8px;position:static;width:auto}
.xs-testi .slider-pagination .swiper-pagination-bullet{width:10px;height:10px;border-radius:6px;background:rgba(255,255,255,.3);opacity:1;margin:0;transition:width .3s,background .3s}
.xs-testi .slider-pagination .swiper-pagination-bullet-active{width:30px;background:var(--brand-orange)}
.xs-testi-arrows{display:flex;gap:10px}
.xs-testi-arrows button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.xs-testi-arrows button:hover{background:var(--brand-orange);border-color:var(--brand-orange);color:#111}
.xs-video-card{position:relative;width:100%;max-width:360px;margin:0 auto;aspect-ratio:9/16;border-radius:32px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px rgba(0,0,0,.55)}
.xs-video-card video{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:575px){.xs-testi-card{padding:32px 24px 28px}.xs-testi-card blockquote p{font-size:1.05rem}}

/* ---- thank-you page ---- */
.ty-check{width:96px;height:96px;border-radius:50%;margin:0 auto 30px;display:grid;place-items:center;background:var(--brand-gradient);color:#111;font-size:44px;box-shadow:0 20px 60px rgba(249,0,77,.35)}
.xs-testi{padding:28px;margin:-28px}
.xs-testi .slider-pagination{align-items:center;height:48px}

/* ---- name caption on the testimonial video (sits above the player controls) ---- */
.xs-video-card{margin:0 auto}
.xs-video-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:2px;padding:90px 22px 62px;pointer-events:none;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.45) 55%,rgba(0,0,0,0))}
.xs-video-caption strong{font-size:1.1rem;font-weight:700;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.xs-video-caption span{font-size:.92rem;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* =====================================================================
   Guarantee section (home): one aligned column of copy + brand visual
   ===================================================================== */
.xs-btn-primary{display:inline-flex;align-items:center;gap:12px;background:var(--brand-orange);color:#111;font-weight:700;font-size:1rem;padding:17px 34px;border-radius:999px;border:0;transition:transform .25s,box-shadow .25s,background .25s;box-shadow:0 12px 34px rgba(245,119,34,.32)}
.xs-btn-primary:hover{background:#fff;color:#111;transform:translateY(-3px);box-shadow:0 16px 40px rgba(255,255,255,.18)}
.xs-guarantee{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:56px;padding:68px 72px;border-radius:44px;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 46%,rgba(255,255,255,.075));
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.42),inset 0 -1.5px 1px rgba(255,255,255,.09),0 24px 60px rgba(0,0,0,.4)}
.xs-guarantee::before{content:"";position:absolute;right:-140px;top:-160px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(249,0,77,.26),transparent 66%);pointer-events:none}
.xs-guarantee::after{content:"";position:absolute;left:-160px;bottom:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(245,119,34,.18),transparent 66%);pointer-events:none}
.xs-guarantee-copy{position:relative;z-index:1}
.xs-guarantee .section-title{font-size:clamp(2rem,3.5vw,3.05rem);line-height:1.13;margin:0 0 22px;text-wrap:balance}
.xs-guarantee-text{color:rgba(255,255,255,.76);font-size:1.1rem;line-height:1.75;max-width:560px;margin:0 0 26px}
.xs-guarantee-points{list-style:none;padding:0;margin:0 0 34px;display:flex;flex-wrap:wrap;gap:12px 28px}
.xs-guarantee-points li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.9);font-weight:500;font-size:.98rem}
.xs-guarantee-points i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--brand-gradient);color:#111;font-size:11px}
.xs-guarantee-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.xs-guarantee-visual{position:relative;z-index:1;display:grid;place-items:center;min-height:330px}
.xs-guarantee-visual img{position:relative;z-index:1;width:min(100%,330px);height:auto}
.xs-guarantee-ring{position:absolute;width:min(100%,390px);aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(255,255,255,.2);animation:xs-spin 60s linear infinite}
.xs-guarantee-chip{position:absolute;z-index:2;left:2%;bottom:10%;display:flex;align-items:center;gap:10px;padding:9px 20px 9px 9px;border-radius:999px;background:rgba(22,22,22,.9);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(0,0,0,.5);font-weight:600;font-size:.95rem;color:#fff;white-space:nowrap;transform:rotate(-3deg)}
.xs-guarantee-chip .ck{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#F9004D,#F57722);font-size:12px;color:#fff}
@keyframes xs-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.xs-guarantee-ring{animation:none}}
@media (max-width:991px){
  .xs-guarantee{grid-template-columns:1fr;gap:12px;padding:44px 30px 36px;border-radius:34px}
  .xs-guarantee-visual{order:-1;min-height:250px}
  .xs-guarantee-visual img{width:min(70%,250px)}
  .xs-guarantee-ring{width:min(78%,290px)}
  .xs-guarantee-chip{left:50%;bottom:0;transform:translateX(-50%) rotate(-2deg)}
}
@media (max-width:575px){.xs-guarantee{padding:36px 22px 30px}.xs-guarantee-actions{flex-direction:column;align-items:stretch}.xs-guarantee-actions>a{justify-content:center;text-align:center}}
.xs-guarantee .section-title .text-gradient{display:block;width:fit-content;max-width:100%}

/* =====================================================================
   Hero: full-width background stage (the glass panel stays centred)
   ===================================================================== */
body.home .hero-section{padding-top:0}
.lg-hero{width:100%;padding:150px 24px 64px;border-radius:0;margin-bottom:0}
.lg-hero .lg-backdrop{border-radius:0}
.lg-hero .custom-hero-box{width:min(1120px,100%);margin:0 auto}
/* keep the header readable over the artwork, and melt the bottom edge into the page */
.lg-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(14,14,14,.85) 0,rgba(14,14,14,0) 200px),linear-gradient(to top,var(--body) 0,rgba(23,23,23,0) 150px)}
@media (max-width:991px){.lg-hero{padding:112px 14px 34px}}
/* darker text plate when the WebGL glass is running, and in the fallback */
.lg-root.lg-active .custom-hero-box .text,.lg-root.lg-active .hero-points{color:#fff}
.lg-root.lg-active .lg-hero .lg-glass h1,.lg-hero.lg-active .lg-glass h1,.lg-hero.lg-active .lg-glass p,.lg-hero.lg-active .lg-glass li{text-shadow:0 2px 18px rgba(0,0,0,.65)}
body.home .lg-hero:not(.lg-active) .lg-glass{background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 46%,rgba(255,255,255,.05)),rgba(12,12,12,.66)}

/* =====================================================================
   MOBILE / TABLET
   ===================================================================== */
/* header: logo + menu button always on ONE row */
#header-sticky .row{flex-wrap:nowrap}
#header-sticky .header-logo a{display:block;line-height:0}
@media (max-width:1199px){
  .header-logo img{height:38px;width:auto}
  .header__hamburger{line-height:0}
  button.sidebar__toggle{margin:0;padding:0;width:46px;height:46px;display:grid;place-items:center;font-size:20px;color:#fff;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);cursor:pointer;-webkit-tap-highlight-color:transparent}
  button.sidebar__toggle:hover,button.sidebar__toggle:active{background:var(--brand-orange);border-color:var(--brand-orange);color:#111}
  .transparent-header{padding:14px 0}
}
@media (max-width:575px){.header-logo img{height:32px}button.sidebar__toggle{width:44px;height:44px}}
/* testimonial carousel must not push past the screen edge on phones */
@media (max-width:991px){.xs-testi{padding:0 0 26px;margin:0}}

/* ---- phones: rhythm, spacing, readable cards ---- */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
.tagcloud a{text-transform:none!important}
@media (max-width:991px){
  .lg-pricing .lg-backdrop{display:none}
  .lg-pricing{padding:0!important;background:none}
  body.home .lg-pricing:not(.lg-active) .lg-glass{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 46%,rgba(255,255,255,.05)),rgba(20,20,20,.78)}
  .xs-testi-card{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35)}
}
@media (max-width:767px){
  .container{--bs-gutter-x:2rem}
  .section-padding{padding-top:60px!important;padding-bottom:60px!important}
  .xs-section .section-title{font-size:clamp(1.85rem,7.6vw,2.3rem);line-height:1.15}
  .xs-section .section-desc,.text-white-50.fs-5{font-size:1rem!important;line-height:1.7}
  .mb-80{margin-bottom:36px!important}
  .service-card.style5{padding:26px 22px}
  .step-card{padding:26px 22px}
  .pricing-card.style5{padding:30px 22px}
  .counter-black-box{padding:26px 18px!important}
  .accordion-body{font-size:1rem!important;line-height:1.7!important;padding:4px 20px 20px!important}
  .accordion-button{font-size:1rem!important;line-height:1.4;padding:18px 20px!important}
  .marque-section-3 .text-style{font-size:2rem!important}
  .marque-section-3 .text-slider img{width:26px}
  .fancy-box{padding:18px!important;gap:14px!important}
  .fancy-box .icon-box-rounded-yellow{width:48px;height:48px;flex:none}
  .about-card-v2{padding:28px 22px!important}
  .contaform.style1{padding:26px 20px!important}
  #contactForm button[type=submit]{width:100%;display:flex;justify-content:center}
  .blog-card.style4 .p-4{padding:22px!important}
  /* footer */
  .footer-section .widget-area{padding-top:56px!important}
  .footer-cta-box{padding:30px 22px!important;border-radius:28px!important}
  .footer-cta-box .cta-title{font-size:1.9rem;line-height:1.15}
  .footer-link{display:inline-block;padding:7px 0}
  .footer-widget .widget-title{margin-bottom:16px}
  .pb-80{padding-bottom:40px!important}
  .footer-bottom{padding-top:18px;padding-bottom:84px}
  /* breadcrumb pages */
  .breadcrumb-wrapper .page-heading{padding:104px 0 44px}
  .breadcrumb-items a{display:inline-block;padding:6px 2px}
  /* button rows: stack full width */
  .xs-actions>a{width:100%;justify-content:center;text-align:center}
  /* animations: shorter, no stagger delay, so content is there when the eye arrives */
  .wow{animation-duration:.55s!important;animation-delay:0s!important}
}
@media (max-width:575px){
  .hero-points{gap:10px 18px;font-size:.9rem}
  .lg-hero .custom-hero-box{padding:34px 20px}
  .step-split h4{font-size:.9rem}
  .article-cta{padding:24px}
  .blog-card.style5 .blog-title{font-size:1.35rem;line-height:1.3}
}

/* ---- mobile menu panel ---- */
.header-logo a{padding:6px 0;display:block}
.widget-logo a{display:inline-block}
@media (max-width:1199px){
  .offcanvas__info{width:min(340px,88vw)!important}
  .offcanvas__top{gap:12px;flex-wrap:nowrap}
  .offcanvas__logo img{height:30px!important;width:auto;max-width:100%}
  .offcanvas__close button{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;padding:0}
  .mean-container .mean-nav ul li a{padding:14px 0!important;font-size:1.06rem!important;border-bottom:1px solid rgba(255,255,255,.08)}
  .mean-container .mean-nav ul li:last-child a{border-bottom:0}
  .offcanvas-cta{width:100%;justify-content:center;margin:8px 0 26px}
  .offcanvas__contatext a{text-transform:none!important;word-break:break-all;display:inline-block;padding:6px 0}
  .offcanvas__contact .h4{font-size:1.15rem;margin-bottom:14px}
  .offcanvas__contact .social-icon a{width:44px;height:44px;display:grid;place-items:center}
}
a.hover-yellow{display:inline-block;padding:6px 0}
/* ---- floating buttons: smaller on phones so they do not smother content ---- */
@media (max-width:767px){
  .wa-float{width:52px;height:52px;font-size:28px;right:14px;bottom:14px}
  .back-to-top{width:40px!important;height:40px!important;right:20px!important;bottom:76px!important;font-size:14px!important}
}
/* ---- testimonial carousel: card height follows the quote on phones ---- */
@media (max-width:991px){.xs-testi .swiper-slide{height:auto}.xs-testi-card{height:auto}.xs-testi .swiper-wrapper{align-items:flex-start}}