/* ============================================================
   ACE 360 — MODERN 3D DESIGN LAYER (v2)
   Reskins the entire existing site into the glass/depth language.
   Loads on top of style.css; restyles existing classes so every
   page (theme- and Elementor-rendered) upgrades with no markup change.
   ============================================================ */

:root{
	--bg:#08080A;
	--violet:#7C5CFF;
	--glass:rgba(255,255,255,.055);
	--glass-line:rgba(255,255,255,.10);
}

body{background:var(--bg);position:relative}

/* ---------- global gradient-mesh backdrop (injected in footer) ---------- */
.ace-mesh{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.ace-mesh span{position:absolute;border-radius:50%;filter:blur(100px);opacity:.5}
.ace-mesh .m1{width:640px;height:640px;background:radial-gradient(circle,rgba(251,169,31,.55),transparent 60%);top:-180px;left:-140px;animation:aceMesh1 24s ease-in-out infinite}
.ace-mesh .m2{width:600px;height:600px;background:radial-gradient(circle,rgba(124,92,255,.45),transparent 60%);top:26%;right:-180px;animation:aceMesh2 30s ease-in-out infinite}
.ace-mesh .m3{width:560px;height:560px;background:radial-gradient(circle,rgba(251,169,31,.3),transparent 60%);bottom:-200px;left:32%;animation:aceMesh1 34s ease-in-out infinite reverse}
.ace-mesh .ace-stars{position:absolute;inset:0;opacity:.6}
@keyframes aceMesh1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,44px)}}
@keyframes aceMesh2{0%,100%{transform:translate(0,0)}50%{transform:translate(-54px,60px)}}
@media(prefers-reduced-motion:reduce){.ace-mesh span{animation:none}}

/* the old per-section orbs are replaced by the global mesh */
.ace-sbg{display:none !important}

/* sections become transparent so the mesh shows through */
.section,.section-sm{background:transparent !important}
.bg-sand{background:radial-gradient(1200px 500px at 50% -10%,rgba(124,92,255,.06),transparent 70%) !important}
.bg-navy{background:radial-gradient(1200px 500px at 50% 120%,rgba(251,169,31,.06),transparent 70%) !important}
.hero,.page-hero{background:transparent !important}

/* ---------- original full-width header (glass pill removed) ---------- */
.site-header{top:0 !important;left:0;right:0;padding:16px 0 !important;display:block !important;background:transparent !important;position:fixed !important;z-index:1000 !important;transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}
.site-header .nav{width:auto !important;max-width:1200px !important;margin:0 auto !important;gap:24px;padding:0 clamp(20px,5vw,40px) !important;border-radius:0 !important;background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:none !important;border:0 !important;display:flex;align-items:center;justify-content:space-between}
.site-header.scrolled{background:rgba(9,9,11,.82) !important;backdrop-filter:blur(14px) saturate(1.3) !important;-webkit-backdrop-filter:blur(14px) saturate(1.3) !important;box-shadow:0 10px 34px -14px rgba(0,0,0,.7) !important;border-bottom:1px solid var(--glass-line)}
.site-header.scrolled .nav{background:transparent !important}
.site-header .phone{display:inline-flex !important;align-items:center;gap:7px;color:#fff;font-size:14px;font-weight:600;white-space:nowrap}
.site-header .phone svg{width:16px;height:16px}
@media(max-width:1024px){.site-header .phone{display:none !important}}
.site-header .nav-cta{gap:10px}

/* ---------- glassmorphism on every card type ---------- */
.card,.pcard,.tcard,.feat,.quote,.info-tile,.form-card,.stat,.plan,.step{
	background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.018)) !important;
	border:1px solid var(--glass-line) !important;
	backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
	box-shadow:0 30px 60px -34px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
	position:relative;overflow:hidden;
}
.card:hover,.pcard:hover,.tcard:hover,.feat:hover{
	border-color:rgba(251,169,31,.42) !important;
	box-shadow:0 34px 70px -30px rgba(251,169,31,.32),inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* cursor-follow glow on service cards */
.card::after{content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),rgba(251,169,31,.12),transparent 42%);
	opacity:0;transition:opacity .3s}
.card:hover::after{opacity:1}

/* icon tiles get a gradient chip look */
.card .ci,.feat .fi{
	background:linear-gradient(135deg,rgba(251,169,31,.22),rgba(251,169,31,.05)) !important;
	border:1px solid rgba(251,169,31,.28);color:var(--gold-2) !important;border-radius:16px}

/* ---------- gradient buttons ---------- */
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2)) !important;color:#111 !important;
	box-shadow:0 18px 40px -16px rgba(251,169,31,.65) !important;border:0 !important}
.btn-outline-light{background:var(--glass) !important;border:1px solid var(--glass-line) !important;color:#fff !important;
	backdrop-filter:blur(10px)}
.btn-outline-light:hover{border-color:rgba(255,255,255,.28) !important}

/* ---------- gradient stat numbers ---------- */
.stat .num,.stats .num{
	background:linear-gradient(120deg,var(--gold),var(--gold-2));-webkit-background-clip:text;background-clip:text;
	color:transparent !important}

/* ---------- glass hero visual + section media ---------- */
.hero-visual,.frame,.split-media .frame{
	border-radius:24px;
	background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
	border:1px solid var(--glass-line);backdrop-filter:blur(10px);
	box-shadow:0 40px 90px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.10);padding:14px}

/* eyebrow pills */
.eyebrow{display:inline-flex;align-items:center;gap:8px;
	background:rgba(251,169,31,.08);border:1px solid rgba(251,169,31,.22);
	color:var(--gold-2) !important;padding:8px 14px;border-radius:999px;font-family:var(--font-m);
	font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- CTA band → gradient glass ---------- */
.cta-band{
	background:linear-gradient(135deg,rgba(251,169,31,.15),rgba(124,92,255,.13)) !important;
	border:1px solid var(--glass-line) !important;backdrop-filter:blur(20px);border-radius:28px !important;
	box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}

/* ---------- tech strip → marquee ---------- */
.strip{border-top:1px solid var(--glass-line);border-bottom:1px solid var(--glass-line);background:transparent;overflow:hidden}
.strip .wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.strip .tech{animation:aceMarquee 26s linear infinite}
@keyframes aceMarquee{to{transform:translateX(-10px)}}

/* footer becomes translucent */
.footer{background:rgba(10,10,12,.5) !important;backdrop-filter:blur(20px);border-top:1px solid var(--glass-line)}

/* keep content above the mesh */
.site-header,.footer,main,.ace-fullwidth,section,.section,.page-hero,.hero{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){.strip .tech{animation:none}}

/* mobile performance: drop heavy per-card blur, keep the translucent look */
@media(max-width:760px){
	.card,.pcard,.tcard,.feat,.quote,.info-tile,.form-card,.stat,.hero-visual,.frame{
		backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
	.ace-mesh span{opacity:.35;filter:blur(70px)}
	.site-header .nav{gap:12px;padding:9px 10px 9px 16px}
}

/* ============================================================
   Elementor hardening — make the reskin win inside Elementor
   and let the gradient-mesh show through Elementor wrappers.
   ============================================================ */
.elementor, .elementor-section, .elementor-container, .elementor-row,
.e-con, .e-con-inner, .e-parent, .elementor-widget-wrap,
.elementor-column-wrap, .elementor-widget-container, .elementor-widget{
	background-color:transparent !important;
}
.elementor .section, .elementor .section-sm, .elementor .hero, .elementor .page-hero{
	background:transparent !important;
}
.elementor .bg-sand{background:radial-gradient(1200px 500px at 50% -10%,rgba(124,92,255,.06),transparent 70%) !important}
.elementor .bg-navy{background:radial-gradient(1200px 500px at 50% 120%,rgba(251,169,31,.06),transparent 70%) !important}

.elementor .card, .elementor .pcard, .elementor .tcard, .elementor .feat,
.elementor .quote, .elementor .stat, .elementor .plan, .elementor .step,
.elementor .info-tile, .elementor .form-card{
	background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.018)) !important;
	border:1px solid var(--glass-line) !important;
	box-shadow:0 30px 60px -34px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.elementor .hero-visual, .elementor .frame, .elementor .split-media .frame{
	background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015)) !important;
	border:1px solid var(--glass-line) !important;border-radius:24px !important;
}
.elementor .btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2)) !important;color:#111 !important;border:0 !important}
.elementor .btn-outline-light{background:var(--glass) !important;border:1px solid var(--glass-line) !important;color:#fff !important}
.elementor .num{background:linear-gradient(120deg,var(--gold),var(--gold-2)) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.elementor .cta-band{background:linear-gradient(135deg,rgba(251,169,31,.15),rgba(124,92,255,.13)) !important;border:1px solid var(--glass-line) !important;border-radius:28px !important}

/* ============================================================
   INTENSIFY — make the modern look unmistakable on the live site.
   Ambient light now covers the whole page (fixed), brighter mesh,
   clearly-frosted glass cards.
   ============================================================ */
body{
	background:
		radial-gradient(1100px 780px at 12% 2%, rgba(251,169,31,.13), transparent 58%),
		radial-gradient(1000px 760px at 100% 26%, rgba(124,92,255,.13), transparent 58%),
		radial-gradient(1000px 800px at 0% 72%, rgba(124,92,255,.10), transparent 60%),
		radial-gradient(1100px 820px at 100% 96%, rgba(251,169,31,.11), transparent 60%),
		#08080A !important;
	background-attachment:fixed !important;
}
.ace-mesh span{opacity:.72;filter:blur(110px)}
.ace-mesh .m1{width:720px;height:720px}
.ace-mesh .m2{width:700px;height:700px}
.ace-mesh .m3{width:660px;height:660px}
.ace-mesh::before,.ace-mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(120px);opacity:.5}
.ace-mesh::before{width:600px;height:600px;background:radial-gradient(circle,rgba(124,92,255,.45),transparent 60%);top:50%;left:-160px;animation:aceMesh2 32s ease-in-out infinite}
.ace-mesh::after{width:640px;height:640px;background:radial-gradient(circle,rgba(251,169,31,.42),transparent 60%);top:74%;right:-170px;animation:aceMesh1 36s ease-in-out infinite}

/* clearly-frosted glass on all cards (theme + Elementor) */
.card,.pcard,.tcard,.feat,.quote,.stat,.info-tile,.form-card,.step,.plan,
.elementor .card,.elementor .pcard,.elementor .tcard,.elementor .feat,
.elementor .quote,.elementor .stat,.elementor .info-tile,.elementor .form-card,.elementor .step{
	background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.035)) !important;
	border:1px solid rgba(255,255,255,.17) !important;
	box-shadow:0 34px 66px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.20) !important;
	backdrop-filter:blur(18px) saturate(1.3) !important;-webkit-backdrop-filter:blur(18px) saturate(1.3) !important;
}
.hero-visual,.frame,.split-media .frame,
.elementor .hero-visual,.elementor .frame{
	background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03)) !important;
	border:1px solid rgba(255,255,255,.16) !important;
}
@media(max-width:760px){
	.card,.pcard,.tcard,.feat,.quote,.stat,.info-tile,.form-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
}

/* header stacking + mobile (full-width, not a pill) */
.site-header{z-index:1000 !important;position:fixed !important}
.mobile-nav{z-index:1010 !important}
.scrim{z-index:1005 !important}
main,.ace-fullwidth,section,.section,.section-sm,.page-hero,.hero,.footer,.ace-v2{z-index:auto !important}
@media(min-width:901px){ .site-header .burger{display:none !important} }
@media(max-width:900px){
	.site-header .nav-links{display:none !important}
	.site-header .burger{display:inline-flex !important}
	.site-header .nav{padding:0 20px !important}
}

/* ============================================================
   ELEMENTOR EDITOR VISIBILITY
   In the editor there's no dark body/mesh, so light text + reveal
   elements look invisible. Force a dark canvas and reveal everything
   so the page is fully visible and editable.
   ============================================================ */
body.elementor-editor-active,
.elementor-editor-active .elementor,
.elementor-editor-active #wpwrap,
.elementor-editor-active .ace-fullwidth{background-color:#0A0A0B !important}
.elementor-editor-active .reveal,
.elementor-editor-active [class*="reveal"]{opacity:1 !important;transform:none !important;visibility:visible !important}
.elementor-editor-active .ace-field,
.elementor-editor-active .ace-sbg{display:none !important}
.elementor-editor-active .frame img,
.elementor-editor-active .split-media img,
.elementor-editor-active .hero-visual img,
.elementor-editor-active .pcard img,
.elementor-editor-active .tcard img{opacity:1 !important;visibility:visible !important}

/* FAQ spacing — tighter block + item gaps */
.faq-block{padding:40px 0 !important}
.faq-block .sec-head{margin-bottom:18px !important;max-width:680px}
.faq-item{margin-bottom:10px !important}
.ace-v2 .faq-block{padding:40px 0 66px !important}