/* =====================================================================
   Zoxi Media - site theme (black / orange / yellow / green, light hero)
   Loaded LAST on every page, so it only restyles - no content changes.
   ===================================================================== */
:root{
  --black:#111111; --charcoal:#2B2B2B; --muted:#676560; --off:#F7F7F2; --line:#E4E3E2;
  --t-orange:#FF6A00; --flame:#FF3D00; --yellow:#FFC107; --green:#16A34A; --green-d:#0B5D3B; --green-l:#E8F6EE;
  --grad:linear-gradient(100deg,#FFC107 0%,#FF6A00 55%,#FF3D00 100%);
  --t-shadow:0 18px 40px -18px rgba(17,17,17,.25);
  /* the old variable names used across the pages */
  --violet:#FF6A00; --violet-light:#FFC107; --orange:#FF6A00; --dark:#111111; --indigo:#111111;
  --cyan:#16A34A; --bg:#F7F7F2;
  --font-display:'Sora','Inter',system-ui,sans-serif;
}
::selection{background:#FFC107;color:#111;}
body{color:#111;}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.025em;}

/* ---------- Buttons: pill shapes like the reference ---------- */
.btn{border-radius:999px;font-weight:700;}
.btn-primary{background:var(--grad);color:#fff;border:0;box-shadow:0 14px 30px -12px rgba(255,61,0,.55);}
.btn-primary:hover{box-shadow:0 20px 36px -12px rgba(255,61,0,.65);filter:saturate(1.08);}
.btn-dark{background:#111;color:#fff;}
.btn-dark:hover{background:#2B2B2B;}
.btn-outline{background:transparent;color:#111;border:2px solid #111;}
.btn-outline:hover{background:#111;color:#fff;border-color:#111;}

/* ---------- Header ---------- */
.site-header{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);}
.site-header.scrolled,.site-header.is-scrolled{box-shadow:0 10px 30px -18px rgba(17,17,17,.25);}
.topbar{background:#111;}

/* ---------- Hero: white with warm glows (left text dark) ---------- */
.hero{
  background:
    radial-gradient(600px 380px at 92% 10%,rgba(255,193,7,.16),transparent 70%),
    radial-gradient(520px 420px at 0% 100%,rgba(255,106,0,.06),transparent 70%),
    radial-gradient(420px 320px at 55% 60%,rgba(22,163,74,.05),transparent 70%),
    #FFFFFF !important;
  color:#111 !important;
}
.hero-mesh{opacity:1;}
.hero-mesh .blob{opacity:.16;filter:blur(90px);animation:t-breathe 6s ease-in-out infinite;}
.hero-mesh .blob1{background:#FFC107;}
.hero-mesh .blob2{background:#16A34A;opacity:.08;animation-delay:-2s;}
.hero-mesh .blob3{background:#16A34A;opacity:.07;animation-delay:-4s;}
.hero .particles span{background:rgba(17,17,17,.18);}
.hero h1,.hero .hero-copy h1{color:#111 !important;}
.hero h1 .grad,.hero .grad{background:var(--grad) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;}
.hero p,.hero .lead,.hero p.lead,.hero .hero-copy>p{color:#676560 !important;}
.hero-eyebrow{background:#E8F6EE !important;border:0 !important;color:#0B5D3B !important;}
.hero-eyebrow .dot{background:#16A34A !important;animation:t-ping 1.8s infinite;}
.hero .btn-ghost{background:transparent !important;color:#111 !important;border:2px solid #111 !important;backdrop-filter:none;}
.hero .btn-ghost:hover{background:#111 !important;color:#fff !important;}
.hero-stats-inline div b,.hero-stats-inline b{color:#111 !important;}
.hero-stats-inline div span,.hero-stats-inline span{color:#676560 !important;}
.hero ul li,.hero .hero-copy li{color:#2B2B2B;}
.hero .hero-copy a:not(.btn){color:#111;}
/* right-side visuals were drawn for a dark background: give them a dark "screen" */
.hero .hero-visual{
  position:relative;background:#111;border-radius:28px;padding:26px;
  box-shadow:0 40px 80px -36px rgba(17,17,17,.55);
  animation:t-float 6s ease-in-out infinite;
}
.hero .hero-visual::before{content:'';position:absolute;inset:-1px;border-radius:29px;padding:1px;background:linear-gradient(135deg,#4A4A4A,#161616);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none;}

/* breadcrumb strip above heroes */
.breadcrumb-bar{background:#FFFFFF;}

/* ---------- Section labels: soft green pill like the reference ---------- */
.eyebrow{background:#E8F6EE;border-color:transparent;color:#0B5D3B;}
.eyebrow::before{background:#16A34A;box-shadow:0 0 0 0 rgba(22,163,74,.55);animation:t-ping 1.8s infinite;}

/* ---------- Light sections ---------- */
.section-alt{background:#F7F7F2;}

/* ---------- Cards ---------- */
.card,.service-card,.testi-card,.feature-card,.bento-card,.related-card,.case-card,.zxrv-card{border-color:#E4E3E2;}
.card:hover,.service-card:hover,.feature-card:hover,.bento-card:hover,.related-card:hover{box-shadow:var(--t-shadow);}

/* ---------- Footer ---------- */
footer{background:#111 !important;}

/* =====================================================================
   Motion - same family as the reference site; switched off for people
   who ask for reduced motion.
   ===================================================================== */
@keyframes t-float{50%{transform:translateY(-14px);}}
@keyframes t-breathe{50%{transform:scale(1.12);opacity:.5;}}
@keyframes t-ping{70%{box-shadow:0 0 0 10px rgba(22,163,74,0);}100%{box-shadow:0 0 0 0 rgba(22,163,74,0);}}
@keyframes t-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes t-pulse{50%{transform:scale(1.15);}}
@keyframes t-swing{0%,100%{transform:rotate(0);}25%{transform:rotate(12deg);}75%{transform:rotate(-12deg);}}
@keyframes t-shake{0%,70%,100%{transform:rotate(0);}75%{transform:rotate(-10deg);}80%{transform:rotate(10deg);}85%{transform:rotate(-6deg);}90%{transform:rotate(6deg);}}
@keyframes t-spin{100%{transform:rotate(360deg);}}

/* icons on cards gently move, each a little differently */
main .card-icon>*,main .service-icon>*,main .rc-icon>*,main .bento-icon>*,main .fi-icon>*,main .ab-value-icon>*{display:inline-block;transform-origin:50% 50%;}
main :nth-child(5n+1)>.card-icon>*,main :nth-child(5n+1)>.service-icon>*,main :nth-child(5n+1)>.rc-icon>*,main :nth-child(5n+1)>.bento-icon>*{animation:t-bounce 2.4s ease-in-out infinite;}
main :nth-child(5n+2)>.card-icon>*,main :nth-child(5n+2)>.service-icon>*,main :nth-child(5n+2)>.rc-icon>*,main :nth-child(5n+2)>.bento-icon>*{animation:t-pulse 2s ease-in-out infinite;}
main :nth-child(5n+3)>.card-icon>*,main :nth-child(5n+3)>.service-icon>*,main :nth-child(5n+3)>.rc-icon>*,main :nth-child(5n+3)>.bento-icon>*{animation:t-swing 2.6s ease-in-out infinite;}
main :nth-child(5n+4)>.card-icon>*,main :nth-child(5n+4)>.service-icon>*,main :nth-child(5n+4)>.rc-icon>*,main :nth-child(5n+4)>.bento-icon>*{animation:t-shake 3s ease-in-out infinite;}
main :nth-child(5n)>.card-icon>*,main :nth-child(5n)>.service-icon>*,main :nth-child(5n)>.rc-icon>*,main :nth-child(5n)>.bento-icon>*{animation:t-bounce 2.8s ease-in-out infinite;}
main .card-icon,main .service-icon,main .rc-icon,main .bento-icon,main .fi-icon,main .ab-value-icon{background:#F2F1EA;color:#111;}
main :nth-child(3n+1)>.card-icon,main :nth-child(3n+1)>.service-icon,main :nth-child(3n+1)>.rc-icon,main :nth-child(3n+1)>.bento-icon{background:#E8F6EE;color:#0B5D3B;}
main :nth-child(3n+2)>.card-icon,main :nth-child(3n+2)>.service-icon,main :nth-child(3n+2)>.rc-icon,main :nth-child(3n+2)>.bento-icon{background:#FFF6D6;color:#111;}

@media (prefers-reduced-motion:reduce){
  .hero .hero-visual,.hero-mesh .blob,.eyebrow::before,.hero-eyebrow .dot,
  main .card-icon>*,main .service-icon>*,main .rc-icon>*,main .bento-icon>*{animation:none !important;}
}
@media (max-width:760px){
  .hero .hero-visual{padding:16px;border-radius:22px;animation:none;}
}

/* =====================================================================
   Hero variants - every page gets its own look (class hv-1 .. hv-8 on
   the hero section + one decorative <span class="hv-deco">).
   ===================================================================== */
.hero .hv-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.hero .hv-deco::before,.hero .hv-deco::after{content:'';position:absolute;}

/* 2 - dot field, off-white, frame tilted with an orange offset block */
.hero.hv-2{background:radial-gradient(520px 420px at 85% 30%,rgba(255,193,7,.22),transparent 70%),#F7F7F2 !important;}
.hero.hv-2 .hv-deco{background-image:radial-gradient(rgba(17,17,17,.13) 1.2px,transparent 1.3px);background-size:22px 22px;
  mask-image:linear-gradient(90deg,transparent,#000 55%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);}
.hero.hv-2 .hero-visual{transform:rotate(-2.5deg);box-shadow:16px 16px 0 #FFC107,0 40px 80px -36px rgba(17,17,17,.5);animation:t-sway 7s ease-in-out infinite;}

/* 3 - tracking grid + green glow, green frame */
.hero.hv-3{background:radial-gradient(560px 420px at 80% 20%,rgba(22,163,74,.13),transparent 70%),radial-gradient(420px 360px at 5% 90%,rgba(255,193,7,.16),transparent 70%),#FFFFFF !important;}
.hero.hv-3 .hv-deco{background-image:linear-gradient(rgba(17,17,17,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.06) 1px,transparent 1px);background-size:44px 44px;
  mask-image:radial-gradient(70% 80% at 70% 40%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(70% 80% at 70% 40%,#000 30%,transparent 75%);}
.hero.hv-3 .hero-visual::before{background:linear-gradient(135deg,#16A34A,#0B5D3B);opacity:.9;}

/* 4 - sun rings behind the visual */
.hero.hv-4{background:#FFFDF6 !important;}
.hero.hv-4 .hv-deco::before{width:760px;height:760px;right:-180px;top:50%;margin-top:-380px;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(17,17,17,.08) 0 2px,transparent 2px 46px);animation:t-spin 90s linear infinite;}
.hero.hv-4 .hv-deco::after{width:420px;height:420px;right:30px;top:50%;margin-top:-210px;border-radius:50%;background:radial-gradient(circle,rgba(255,193,7,.35),transparent 70%);animation:t-breathe 6s ease-in-out infinite;}
.hero.hv-4 .hero-visual{border-radius:36px;}

/* 5 - split: warm gradient panel on the right */
.hero.hv-5{background:#FFFFFF !important;}
.hero.hv-5 .hv-deco::before{top:0;bottom:0;right:0;width:44%;background:linear-gradient(160deg,#FFF8E1 0%,#F7F7F2 70%,#F2F1EA 100%);border-radius:0 0 0 120px;}
.hero.hv-5 .hv-deco::after{top:12%;right:38%;width:90px;height:90px;border-radius:24px;background:#111;opacity:.06;transform:rotate(18deg);animation:t-float 7s ease-in-out infinite;}
.hero.hv-5 .hero-visual{box-shadow:0 50px 90px -40px rgba(17,17,17,.75);}
.hero.hv-5 .hero-visual::before{opacity:0;}

/* 6 - soft diagonal stripes, frame tilted the other way */
.hero.hv-6{background:radial-gradient(600px 400px at 90% 90%,rgba(255,193,7,.14),transparent 70%),#FFFFFF !important;}
.hero.hv-6 .hv-deco{background:repeating-linear-gradient(135deg,rgba(17,17,17,.035) 0 14px,transparent 14px 34px);
  mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);}
.hero.hv-6 .hero-visual{transform:rotate(2deg);animation:t-sway2 8s ease-in-out infinite;}

/* 7 - wave at the bottom + flame glow, round gradient-ring frame */
.hero.hv-7{background:radial-gradient(560px 420px at 8% 15%,rgba(22,163,74,.08),transparent 70%),radial-gradient(500px 380px at 95% 20%,rgba(255,193,7,.18),transparent 70%),#FFFFFF !important;}
.hero.hv-7 .hv-deco::before{left:-5%;right:-5%;bottom:-1px;height:140px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C240 10 480 130 720 70 S1200 10 1440 70 V140 H0Z' fill='%23F7F7F2'/%3E%3Cpath d='M0 95 C260 45 520 145 760 95 S1220 55 1440 95 V140 H0Z' fill='%23ECEAE3' opacity='.7'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;}
.hero.hv-7 .hero-visual{border-radius:40px;padding:30px;}
.hero.hv-7 .hero-visual::before{border-radius:41px;opacity:1;background:var(--grad);}

/* 8 - floating pixel blocks (like the logo's spark) */
.hero.hv-8{background:radial-gradient(560px 420px at 75% 45%,rgba(255,193,7,.12),transparent 70%),#FFFFFF !important;}
.hero.hv-8 .hv-deco::before,.hero.hv-8 .hv-deco::after{width:22px;height:22px;border-radius:6px;background:#111;}
.hero.hv-8 .hv-deco::before{right:46%;top:18%;box-shadow:60px 40px 0 -4px #FFC107,-40px 120px 0 -6px #16A34A,140px -10px 0 -8px #FF6A00,30px 300px 0 -5px #FFC107;animation:t-float 6s ease-in-out infinite;opacity:.8;}
.hero.hv-8 .hv-deco::after{right:6%;bottom:14%;background:#FFC107;box-shadow:-70px -30px 0 -6px #111,-20px -110px 0 -8px #16A34A,40px -200px 0 -4px #FFC107;animation:t-float 7s ease-in-out -3s infinite;opacity:.8;}
.hero.hv-8 .hero-visual{border-radius:20px;}

@keyframes t-sway{0%,100%{transform:rotate(-2.5deg) translateY(0);}50%{transform:rotate(-1deg) translateY(-12px);}}
@keyframes t-sway2{0%,100%{transform:rotate(2deg) translateY(0);}50%{transform:rotate(.5deg) translateY(-12px);}}
@media (max-width:960px){
  .hero.hv-5 .hv-deco::before{width:100%;top:auto;height:38%;border-radius:80px 80px 0 0;}
  .hero.hv-2 .hero-visual,.hero.hv-6 .hero-visual{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .hero .hv-deco::before,.hero .hv-deco::after,.hero.hv-2 .hero-visual,.hero.hv-6 .hero-visual{animation:none !important;}
}
/* keep hero content above the decorative layer */
.hero{isolation:isolate;}
.hero>.container,.hero>.hero-inner,.hero>div:not(.hero-mesh):not(.particles){position:relative;z-index:2;}
/* world map: land visible on the dark map panel */
.map-country{fill:#2F2F2F !important;stroke:#474747 !important;stroke-width:.6 !important;}
.map-country:hover{fill:#FFC107 !important;}