/* =========================
   Base / Resets / Globals
========================= */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  max-width: 100vw;
  overflow-x: clip;
  background-color: transparent; /* <-- was black; move black into ::before */
  color: white;
  position: relative; /* establish stacking context */
}
p { font-family: "Open Sans", sans-serif; }
video { pointer-events: none; } /* prevents scroll issue on mobile */

/* Simple fadeIn utility (if needed) */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.8s ease-in-out forwards; }

/* let the global background show through large content sections */
section.bg-black {
  background-color: transparent !important;
}

/* optional: broaden only for main layout blocks */
main.bg-black,
div.bg-black[role="main"] {
  background-color: transparent !important;
}
/* =========================
   Global Stage Background
   (same vibe across all sections)
========================= */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;                 /* sits behind your content but above the transparent body */
  background:
    /* radial ambient blobs (on top of grid) */
    radial-gradient(60rem 40rem at 10% -10%, rgba(240,68,48,.15), transparent 60%),
    radial-gradient(50rem 40rem at 110% 110%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(35rem 25rem at 30% 120%, rgba(167,139,250,.12), transparent 60%),
    /* grid lines */
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.06) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 34px),
    /* solid black base at the very bottom */
    linear-gradient(#000, #000);
  filter: saturate(120%);
  background-attachment: fixed;
}
/* grid + glows at z:-1; scanline slightly above at z:0 */
body::after {
  content:"";
  position: fixed;
  inset:0;
  z-index: 0; /* <= above ::before, below content */
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.06), transparent);
  animation: sweep 6s linear infinite;
  pointer-events:none;
}

/* =========================
   Heading font: DM Serif Text
========================= */
:root{
  --heading-font: "DM Serif Text", serif;
}

/* apply to native headings and your custom heading classes */
h1, h2, h3, h4, h5, h6,
.bebas-neue-regular,
.svc-title {
  font-family: var(--heading-font) !important;
  font-weight: 400;          /* DM Serif Text looks best at 400 */
  letter-spacing: 0.02em;    /* tighten from the wide Bebas look */
  line-height: 1.2;
}

/* optional: if you don’t want headings forced uppercase anywhere */
.bebas-neue-regular {
  text-transform: none !important;
}


@keyframes sweep{
  0%{transform:translateY(-100%);opacity:0}
  15%{opacity:.35}
  100%{transform:translateY(200%);opacity:0}
}

/* Global ambient glows */
.global-glow{
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:-1;
  animation: pulse 10s ease-in-out infinite;
}
.glow-cyan   { width:600px; height:600px; top:30%; left:-15%; background:rgba(0,246,255,.6); }
.glow-violet { width:600px; height:600px; top:60%; right:-20%; background:rgba(167,139,250,.55); animation-delay:4s; }
.glow-orange { width:600px; height:600px; bottom:-10%; left:30%; background:rgba(255,106,0,.45); animation-delay:2s; }
@keyframes pulse{ 0%,100%{opacity:.18; transform:scale(1);} 50%{opacity:.35; transform:scale(1.12);} }

/* =========================
   Header / Navbar (mobile tweaks)
========================= */
@media (max-width: 640px) {
  #navbar .max-w-7xl > .flex {
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    gap: 6px;
  }
  #navbar .flex-shrink-0 img[alt="Logo"] { height: 28px; width: auto; }
  #navbar .flex-shrink-0 h6 { font-size: 0.9rem; margin: 0; }
  #navbar i.fab, #navbar i.fas, #navbar i.fa-solid { font-size: 1rem; line-height: 1; }
  #navbar .max-w-7xl > .flex > .flex-1:first-child,
  #navbar .max-w-7xl > .flex > .flex-1:last-child { display:flex; align-items:center; }
  #navbar .max-w-7xl > .flex > .flex-1:last-child { justify-content:flex-end; }
  #navbar .max-w-7xl > .flex > .flex-1 a { margin: 0 6px; }
  #navbar .group > span { display: none !important; }
}

/* =========================
   WhatsApp Floating Button
========================= */
.whatsapp-float {
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
  background-color: #25D366; padding: 12px; border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  display:flex; align-items:center; justify-content:center;
}
.whatsapp-float:hover { background-color: #1ebe5d; }

/* =========================
   HERO — rings + holo style
========================= */
.holo{
  position:relative;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  backdrop-filter:blur(10px);
}
.holo::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from 0deg,rgba(240,68,48,.55),rgba(56,189,248,.45),rgba(167,139,250,.55),rgba(240,68,48,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.22; filter:blur(.6px) saturate(110%);
  border-radius:1rem;
  transition:opacity .3s ease;
}
.holo:hover::before{ opacity:.45; }

.icon-glow{ box-shadow:0 0 24px rgba(240,68,48,.25), inset 0 0 12px rgba(255,255,255,.06); }

@keyframes ringspin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.video-wrap{ position:relative; isolation:isolate; }
.video-wrap::before{
  content:""; position:absolute; inset:-18px; border-radius:1.2rem;
  background:
    radial-gradient(120px 120px at 25% 20%, rgba(240,68,48,.22), transparent 60%),
    radial-gradient(150px 150px at 80% 70%, rgba(56,189,248,.18), transparent 60%);
  filter:blur(24px); z-index:0; opacity:.7;
}
.video-ring{
  position:absolute; inset:-14px; z-index:1; pointer-events:none; border-radius:1.2rem;
  border:1px dashed rgba(255,255,255,.12); padding:12px;
}
.video-ring::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:conic-gradient(from 0deg,rgba(240,68,48,.6),rgba(56,189,248,.5),rgba(167,139,250,.6),rgba(240,68,48,.6));
  animation:ringspin 18s linear infinite; opacity:.35;
  mask:radial-gradient(closest-side, transparent 82%, #000 83%);
}
.solar-rings{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.solar-rings .ring{ position:absolute; border-radius:1.2rem; mix-blend:screen; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.solar-rings .ring.outer{ inset:-110px; border:1px solid rgba(240,68,48,.26); animation:ringspin 40s linear infinite; }
.solar-rings .ring.outer::after{
  content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%; background:rgba(240,68,48,.9);
  filter:blur(1px); box-shadow:0 0 14px rgba(240,68,48,.6);
}
.solar-rings .ring.mid{ inset:-76px; border:1px dashed rgba(56,189,248,.24); animation:ringspin 28s linear reverse infinite; }
.solar-rings .ring.mid::after{
  content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%; background:rgba(56,189,248,.9);
  filter:blur(1px); box-shadow:0 0 14px rgba(56,189,248,.55);
}
.solar-rings .ring.inner{ inset:-44px; border:1px solid rgba(167,139,250,.26); animation:ringspin 20s linear infinite; }
.solar-rings .ring.inner::after{
  content:""; position:absolute; top:50%; right:-5px; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:rgba(167,139,250,.95);
  filter:blur(.8px); box-shadow:0 0 12px rgba(167,139,250,.55);
}
@media (max-width:640px){ .solar-rings{ display:none; } }
@media (prefers-reduced-motion:reduce){ .video-ring::after, .solar-rings .ring{ animation:none!important } }

/* =========================
   OUR SERVICES — non-blocky cards
========================= */
#our-services { isolation: isolate; }

.svc-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.svc-card::before{
  content:""; position:absolute; inset:-2px; border-radius: 20px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(240,68,48,.6), rgba(56,189,248,.5), rgba(167,139,250,.6), rgba(240,68,48,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.22; filter: blur(.6px) saturate(110%);
  transition: opacity .35s ease;
}
.svc-card:hover{
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.svc-card:hover::before{ opacity:.45; }
.svc-card-inner{ position:relative; z-index:1; padding: 22px 18px 18px 18px; }

.svc-icon{
  width: 56px; height: 56px; border-radius: 9999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 22px rgba(240,68,48,.25), inset 0 0 12px rgba(255,255,255,.06);
  margin-bottom: 10px;
  font-size: 24px;
}

.svc-title{
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 6px;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.svc-desc{ color: rgba(255,255,255,.85); font-size: .95rem; margin-bottom: 10px; }
.svc-list{
  margin: 0; padding-left: 1.1rem; list-style: disc;
  color: rgba(255,255,255,.85); font-size: .92rem; line-height: 1.5;
}

@media (max-width: 640px){
  .svc-card-inner{ padding: 18px 16px; }
}

/* =========================
   Extra components you had
   (partners carousel, reviews, etc.)
   — left intact so future sections work
========================= */

/* Owl carousel images (default white appearance, color on hover) */
.owl-carousel .item img{
  height: 200px;
  max-width: 160px;
  object-fit: contain;
  margin: auto;
  padding: 0.5rem;
  filter: grayscale(100%) brightness(1) contrast(0.8);
  transition: filter 0.3s ease;
}
.owl-carousel .item img:hover{ filter: none; }

/* Partners carousel tooltip + larger logos */
.partners-carousel .owl-stage-outer { overflow: visible !important; }
.partners-carousel .item { position: relative; overflow: visible; }
.partners-carousel .item::after{
  position: absolute; left: 50%; bottom:110%; transform: translate(-50%, 8px);
  background: rgba(0,0,0,0.85); color:#fff; padding:10px 14px; border-radius:10px;
  width: max(220px, 28ch); max-width: 300px; line-height:1.4; font-size:.9rem; text-align:left;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); pointer-events:none; opacity:0; transition: opacity .25s ease, transform .25s ease; z-index:20; white-space:normal;
  content: attr(data-tooltip);
}
.partners-carousel .item::before{
  content:""; position: absolute; left:50%; bottom:102%; transform: translateX(-50%);
  border:8px solid transparent; border-top-color: rgba(0,0,0,0.85); opacity:0; transition: opacity .25s ease; z-index:20;
}
.partners-carousel .item:hover::after,
.partners-carousel .item:hover::before { opacity:1; transform: translate(-50%, 0); }
.partners-carousel .item img{
  height: 300px !important; max-width:260px !important; object-fit:contain !important; margin:auto !important; padding: .5rem !important;
  transition: filter .3s ease !important;
}
/* Services carousel thumbnails smaller (if used) */
.services-carousel .item img{ height:120px; max-width:120px; object-fit:contain; }

/* Trusted title color consistency */
.trusted-title { color:#fff !important; }

/* Scroll-right helper (if needed) */
@keyframes scroll-right { from{ transform: translateX(-50%);} to{ transform: translateX(0%);} }
.animate-scroll-right { animation: scroll-right 30s linear infinite; }

/* Stacked badge/carousel (sb-*) — kept for future usage */
:root{ --sb-dur: 27s; --sb-count: 8; --sb-delay: calc(var(--sb-dur) / var(--sb-count)); }
.sb-wrapper{ width:100%; display:flex; justify-content:center; padding-top:30px; padding-bottom:90px; }
.sb-carousel{ position:relative; width:100%; max-width:760px; display:flex; justify-content:center; flex-direction:column; min-height:112px; }
.sb-item{ position:absolute; inset-inline:0; padding:0 12px; display:flex; align-items:center; gap:0; opacity:0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); will-change: transform, opacity; animation: sb-vertical var(--sb-dur) linear infinite; }
.sb-item:nth-child(1){ animation-delay: calc(var(--sb-delay) * 0); }
.sb-item:nth-child(2){ animation-delay: calc(var(--sb-delay) * 1); }
.sb-item:nth-child(3){ animation-delay: calc(var(--sb-delay) * 2); }
.sb-item:nth-child(4){ animation-delay: calc(var(--sb-delay) * 3); }
.sb-item:nth-child(5){ animation-delay: calc(var(--sb-delay) * 4); }
.sb-item:nth-child(6){ animation-delay: calc(var(--sb-delay) * 5); }
.sb-item:nth-child(7){ animation-delay: calc(var(--sb-delay) * 6); }
.sb-item:nth-child(8){ animation-delay: calc(var(--sb-delay) * 7); }
.sb-item-head{ position:absolute; top:-36px; left:50%; transform:translateX(-50%); border-radius:50%; background:#fff; width:72px; height:72px; padding:10px; display:flex; align-items:center; justify-content:center; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.sb-item-head img{ width:100%; height:100%; object-fit:contain; filter: grayscale(60%) contrast(1.05) brightness(1.05); transition: filter .25s ease; }
.sb-item:hover .sb-item-head img{ filter:none; }
.sb-item-body{ position:relative; width:100%; background: rgba(17,17,17,.85); border-radius:12px; padding:56px 20px 20px 20px; color:#fff; border:2px solid rgba(255,255,255,0.18); backdrop-filter: blur(6px); text-align:center; }
.sb-item-body::before{
  content:""; position:absolute; inset:-4px; border-radius:14px;
  background: linear-gradient(90deg,#00f6ff,#ff00ff,#ff6a00,#00f6ff); background-size:300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sb-glow 6s linear infinite; pointer-events:none; opacity:.75;
}
.sb-title{ margin:8px 0 0; font-size:1rem; letter-spacing:.02em; white-space:nowrap; }
@keyframes sb-vertical{
  0%{ transform: translateY(100%) scale(.55); opacity:0; visibility:hidden; }
  3%,12.5%{ transform: translateY(100%) scale(.75); opacity:.4; visibility:visible; }
  15.5%,25%{ transform: translateY(0) scale(1); opacity:1; visibility:visible; }
  28%,37.5%{ transform: translateY(-100%) scale(.75); opacity:.4; visibility:visible; }
  40.5%{ transform: translateY(-100%) scale(.55); opacity:0; visibility:visible; }
  100%{ transform: translateY(-100%) scale(.55); opacity:0; visibility:hidden; }
}
@keyframes sb-glow{ 0%{ background-position:0% 50%; } 100%{ background-position:300% 50%; } }
@media (max-width:640px){
  .sb-item-head{ width:72px;height:72px;margin-right:-36px;padding:10px; }
  .sb-item-body{ padding-left:64px; }
  .sb-carousel{ min-height:96px; }
}

/* Reviews (marquee) */
.review-section{ padding:40px 20px; overflow:hidden; position:relative; }
.review-heading{
  text-align:center; font-size:3rem; margin-bottom:70px !important; color:white;
  font-family:"Open Sans", sans-serif; font-weight:700; line-height:1.2;
}
.review-slider{ display:flex; gap:20px; animation: scroll 100s linear infinite; width:max-content; margin-bottom:30px; }
@keyframes scroll{ 0%{ transform: translateX(0%);} 100%{ transform: translateX(-100%);} }
.review-track{ display:flex; gap:20px; width:max-content; }
.review-card{ min-width:300px; max-width:400px; padding:20px; background-color:transparent; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,0.1); position:relative; color:white; }
.review-name{ font-size:18px; font-weight:bold; margin-bottom:10px; color:white; }
.review-stars{ margin-bottom:10px; }
.star{ color:yellow; font-size:20px; }
.review-text{ font-size:14px; color:white; }

/* Footer mobile tweaks */
@media (max-width: 768px) {
  footer .max-w-7xl { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 12px; }
  footer .max-w-7xl > div,
  footer .max-w-7xl > a { width: 100%; text-align: center !important; }
  footer .flex.items-center { justify-content: center !important; flex-wrap: wrap; gap: 12px; }
  footer .flex.items-center a { font-size: 1rem; }
  footer .text-xs, footer .text-sm { text-align: center !important; }
}

/* Extra helpers */
.phone-number { font-size: 1.125rem; }
@media (max-width: 640px) {
  .phone-number { font-size: .9rem; padding-right: 6px; }
  .phone-icon { display:none; }
}

/* Retro TV block kept for future usage (unchanged) */
.main_wrapper{ display:flex; align-items:center; justify-content:flex-end; width:100%; padding-right:2rem; }
/* (All the .tv/.screen styling from your snippet is preserved if you use that component again) */


/* Service card thumbnail */
.svc-thumb{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 16 / 9;              /* consistent ratio */
  margin-bottom: 14px;
  background: #0b0b0b;               /* safe fallback while image loads */
}

/* subtle neon ring border around the image */
.svc-thumb::before{
  content:"";
  position:absolute; inset:-2px; border-radius:16px; pointer-events:none;
  background: conic-gradient(from 0deg,
    rgba(240,68,48,.6), rgba(56,189,248,.5), rgba(167,139,250,.6), rgba(240,68,48,.6)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.25; filter: blur(.6px) saturate(110%);
  transition: opacity .35s ease;
}
.svc-card:hover .svc-thumb::before{ opacity:.45; }

.svc-thumb img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.05);
  transition: transform .6s ease, filter .6s ease;
  filter: saturate(1.05) contrast(1.03) brightness(.96);
}
.svc-card:hover .svc-thumb img{
  transform: scale(1.12);
  filter: saturate(1.15) contrast(1.06) brightness(1);
}

/* soft top-to-bottom scrim for depth */
.svc-thumb::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
  pointer-events:none;
}

/* icon as a floating puck on the image */
.svc-icon-overlay{
  position: absolute;
  left: 12px; bottom: 12px;
  width: 56px; height: 56px;
  margin: 0;                        /* override base margin if any */
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 22px rgba(240,68,48,.25), inset 0 0 12px rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  border-radius:9999px;
  font-size:24px;
}

/* small mobile tweak */
@media (max-width:640px){
  .svc-icon-overlay{ width:48px; height:48px; font-size:20px; left:10px; bottom:10px; }
}




/* =========================
   WHY US — Stats + Expertise
========================= */
.gradient-text{
  background: linear-gradient(90deg,#f04430,#a78bfa,#22d3ee,#f04430);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-pan 8s linear infinite;
}
@keyframes gradient-pan{ 0%{background-position:0% 50%} 100%{background-position:300% 50%} }

/* Stat cards */
.stat-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  padding: 22px 18px;
  text-align: center;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.stat-card::before{
  content:""; position:absolute; inset:-2px; border-radius:20px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(240,68,48,.6), rgba(56,189,248,.5), rgba(167,139,250,.6), rgba(240,68,48,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.22; filter: blur(.6px) saturate(110%); transition: opacity .35s ease;
}
.stat-card:hover{ transform: translateY(-6px); border-color: rgba(255,255,255,.28); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.stat-card:hover::before{ opacity:.45; }

.stat-glow{
  position:absolute; inset:-20%; z-index:0; opacity:.35;
  background:
    radial-gradient(400px 200px at 20% 0%, rgba(240,68,48,.25), transparent 60%),
    radial-gradient(300px 240px at 80% 100%, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(220px 220px at 50% 40%, rgba(167,139,250,.22), transparent 60%);
  filter: blur(30px); pointer-events:none;
}
.stat-value{
  position:relative; z-index:1;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1; font-weight: 700;
  margin-bottom: 6px;
}
.stat-value .suffix{ opacity:.9; margin-left: 2px; }
.stat-label{
  position:relative; z-index:1;
  color: rgba(255,255,255,.82);
  font-size: 0.95rem;
  letter-spacing:.02em;
}

/* Expertise items (glassy chips) */
.exp-item{
  position: relative;
  overflow: hidden;
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  padding: 14px 16px 14px 18px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.exp-item::before{
  content:""; position:absolute; inset:-2px; border-radius:16px; pointer-events:none;
  background: linear-gradient(90deg,#00f6ff,#ff00ff,#ff6a00,#00f6ff);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.25; animation: exp-glow 6s linear infinite;
}
@keyframes exp-glow{ 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
.exp-item:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,.28); box-shadow: 0 8px 22px rgba(0,0,0,.4); }

.exp-ico{
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 9999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 16px; color: #a7f3d0; /* minty check */
  box-shadow: 0 0 16px rgba(56,189,248,.25), inset 0 0 10px rgba(255,255,255,.06);
  margin-top: 2px;
}
.exp-item p{ margin:0; color: rgba(255,255,255,.9); line-height:1.6; }
.exp-item p strong{ color:#fff; }


/* Headings: DM Serif Text (you already loaded it) */
.heading-serif{
  font-family: "DM Serif Text", serif;
  letter-spacing: .02em;
}

/* Softer glass container (less neon than .holo) */
.holo-lite{
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
  backdrop-filter: blur(8px);
}

/* Trusted-by minimal belt */
#trusted-by-min .logo-belt{
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  border-radius: 16px;
}

/* edge fades so items don’t feel clipped */
#trusted-by-min .logo-belt::before,
#trusted-by-min .logo-belt::after{
  content:"";
  position:absolute;
  top:0; bottom:0; width:80px;
  pointer-events:none; z-index:2;
  background: linear-gradient(to right, rgba(0,0,0,.9), transparent);
}
#trusted-by-min .logo-belt::after{
  right:0; left:auto;
  transform: scaleX(-1);
}

/* track + groups */
#trusted-by-min .belt-track{
  display:flex; width:max-content; align-items:center; gap:42px;
  will-change: transform;
}
#trusted-by-min .belt-group{ display:flex; align-items:center; gap:42px; }

/* motion */
@keyframes belt-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes belt-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
#trusted-by-min .belt-left  { animation: belt-left 36s linear infinite; }
#trusted-by-min .belt-right { animation: belt-right 40s linear infinite; }

/* pause on hover */
#trusted-by-min .logo-belt:hover .belt-track{ animation-play-state: paused; }

/* logos */
#trusted-by-min .logo{
  height: 64px; width: auto; display:block;
  object-fit: contain; opacity:.9;
  filter: grayscale(100%) brightness(1) contrast(0.9);
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
  will-change: transform, filter, opacity;
}
#trusted-by-min .logo:hover{
  filter: none; opacity:1; transform: translateY(-2px) scale(1.02);
}

/* responsive tweaks */
@media (max-width: 768px){
  #trusted-by-min .logo { height: 52px; }
  #trusted-by-min .belt-track, #trusted-by-min .belt-group { gap: 28px; }
  #trusted-by-min .logo-belt::before, #trusted-by-min .logo-belt::after { width: 56px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #trusted-by-min .belt-left, #trusted-by-min .belt-right { animation: none; }
}


/* Headline font */
#reviews .heading-serif{ font-family:"DM Serif Text",serif; letter-spacing:.02em; }

/* invisible frame to position edges/nav (no box visuals) */
#reviews .rv-frame{ position:relative; }

/* edge fades (optional) */
#reviews .rv-edge{
  position:absolute; top:0; bottom:0; width:80px; z-index:3; pointer-events:none;
  background: linear-gradient(to right, rgba(0,0,0,.9), transparent);
}
#reviews .rv-left{ left:0; }
#reviews .rv-right{ right:0; transform: scaleX(-1); }

/* nav buttons (floating) */
#reviews .rv-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  z-index:4; border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  width:40px; height:40px; border-radius:9999px;
  display:grid; place-items:center; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
#reviews .rv-nav:hover{ background: rgba(0,0,0,.8); border-color: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.05); }
#reviews .rv-nav.prev{ left:6px; }
#reviews .rv-nav.next{ right:6px; }

/* review card (subtle glass, no outer container) */
#reviews .rv-card{
  height:100%;
  display:flex; flex-direction:column;
  min-height: 190px;
  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:18px 18px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  position:relative;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#reviews .rv-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
/* minimal accent line */
#reviews .rv-card::before{
  content:""; position:absolute; left:16px; right:16px; top:0; height:2px; border-radius:2px;
  background: linear-gradient(90deg, rgba(240,68,48,.35), rgba(167,139,250,.30), rgba(56,189,248,.30));
  opacity:.55;
}
/* soft quote watermark */
#reviews .rv-card::after{
  content:"“"; position:absolute; right:12px; bottom:-8px;
  font-family:"DM Serif Text",serif; font-size:64px; line-height:1; color:rgba(255,255,255,.06);
  pointer-events:none;
}

/* text + stars */
#reviews .review-name{ font-weight:700; letter-spacing:.02em; margin-bottom:6px; }
#reviews .review-stars{ display:flex; gap:6px; margin-bottom:10px; }
#reviews .review-stars .fa-star{ font-size:16px; }
#reviews .review-stars .fa-solid{ color:#f6c343; }
#reviews .review-stars .fa-regular{ color:rgba(255,255,255,.32); }
#reviews .review-text{ color:rgba(255,255,255,.9); line-height:1.55; font-size:.95rem; }

/* make Owl items same height and spacing */
#reviews .owl-carousel .owl-stage{ display:flex; }
#reviews .owl-carousel .owl-item{ display:flex; padding: 2px; }
#reviews .owl-carousel .rv-card{ width:100%; }

/* dots */
#reviews .owl-dots{ margin-top:14px; }
#reviews .owl-dot span{ background:rgba(255,255,255,.3); }
#reviews .owl-dot.active span{ background:#fff; }

/* responsive */
@media (max-width:768px){
  #reviews .rv-edge{ display:none; }
  #reviews .rv-nav{ display:none; }
}

/* ===== Heading gradient (subtle, theme-matched) ===== */
.heading-gradient{
  /* soft white → cyan tint → warm orange */
  background-image: linear-gradient(
    90deg,
    #ffffff 0%,
    #a7f3ff 45%,
    #ffd1a6 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent; /* Safari/iOS fix */
  text-shadow: 0 0 0 rgba(0,0,0,0);     /* ensures crisp edges */
}

/* Optional: a bolder variant if you want it on specific headings */
.heading-gradient-strong{
  background-image: linear-gradient(90deg,#00f6ff 0%,#a78bfa 50%,#ff6a00 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* If you want all main H1/H2 to default to the gradient: uncomment
h1, h2 { @apply heading-gradient; }  (Tailwind) 
or duplicate the .heading-gradient properties onto h1,h2 here. */


/* ============ Associations (Logo Wall) ============ */
#associations { position: relative; }

/* Responsive grid (no carousel) */
.assoc-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
}
@media (min-width: 640px){ .assoc-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1024px){ .assoc-grid{ grid-template-columns: repeat(8, minmax(0,1fr)); } }

/* Chip-style item with subtle glass + gradient stroke (lighter than full "holo") */
.assoc-item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);

  padding: 16px 8px 12px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.assoc-item::after{
  content:"";
  position:absolute; inset:-2px; border-radius:16px;
  background: conic-gradient(from 0deg, rgba(240,68,48,.45), rgba(56,189,248,.35), rgba(167,139,250,.45), rgba(240,68,48,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.18; pointer-events:none; transition: opacity .25s ease;
}
.assoc-item:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.assoc-item:hover::after{ opacity:.4; }

/* Logo behavior (white/mono → color on hover) */
.assoc-logo{
  height: 92px; width: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(1) contrast(0.9);
  transition: filter .25s ease, transform .25s ease;
}
.assoc-item:hover .assoc-logo{
  filter: none;
  transform: scale(1.03);
}

/* Caption */
.assoc-cap{
  margin-top: 8px;
  font-size: .8rem;
  color: rgba(255,255,255,.78);
}

/* Gentle vertical stagger per column to avoid "blocky" lines */
.assoc-grid > li:nth-child(8n+1) .assoc-item,
.assoc-grid > li:nth-child(8n+4) .assoc-item,
.assoc-grid > li:nth-child(8n+7) .assoc-item{ transform: translateY(6px); }
.assoc-grid > li:nth-child(8n+2) .assoc-item,
.assoc-grid > li:nth-child(8n+5) .assoc-item{ transform: translateY(-6px); }
/* Hover should still lift a bit */
.assoc-grid > li .assoc-item:hover{ transform: translateY(-2px) scale(1.02); }

/* Optional: very subtle float animation so the wall feels alive */
@keyframes assoc-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }
.assoc-grid > li:nth-child(3n) .assoc-item{ animation: assoc-float 8s ease-in-out infinite; }
.assoc-grid > li:nth-child(3n+1) .assoc-item{ animation: assoc-float 9.5s ease-in-out infinite; }
.assoc-grid > li:nth-child(3n+2) .assoc-item{ animation: assoc-float 11s ease-in-out infinite; }
.assoc-grid > li .assoc-item:hover{ animation: none; } /* stop float on hover */

/* Use your existing heading gradient + serif (already added earlier) */
.heading-serif{ font-family: "DM Serif Text", serif; }


/* ============ SISTER COMPANIES (non-monotonous grid) ============ */

.sister-grid{
  display:grid;
  gap:20px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width:768px){ .sister-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:22px; } }

/* each tile gets a soft glass + accent border and mild variation */
.sister-card{
  --accent: #f04430;
  position: relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:18px 14px 16px;
  border-radius:16px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  overflow:hidden;
}
.sister-card::before{
  /* subtle gradient stroke */
  content:""; position:absolute; inset:-2px; border-radius:18px; pointer-events:none;
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent), white 10%), rgba(56,189,248,.35), rgba(167,139,250,.45), color-mix(in oklab, var(--accent), white 10%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.18; transition: opacity .25s ease;
}
.sister-card:hover{
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 14px 28px rgba(0,0,0,0.35);
}
.sister-card:hover::before{ opacity:.38; }

/* accent presets per company */
.accent-cyan  { --accent:#22d3ee; }
.accent-amber { --accent:#f59e0b; }
.accent-red   { --accent:#ef4444; }
.accent-green { --accent:#22c55e; }

/* logo cluster with orbit + glow ring */
.logo-stack{
  position:relative;
  width:88px; height:88px;
  display:grid; place-items:center;
  border-radius:50%;
  margin-bottom:10px;
}
.logo-ring{
  position:absolute; inset:0; border-radius:50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 24px color-mix(in oklab, var(--accent), transparent 70%);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent), transparent 70%) 0%, transparent 60%);
  opacity:.6; transition: opacity .25s ease, transform .25s ease;
}
.logo-orbit{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background: var(--accent);
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--accent), white 20%));
  animation: sister-orbit 6.5s linear infinite;
  transform-origin: 44px 44px; /* half of stack size for circular path */
  opacity:.8;
}
@keyframes sister-orbit{
  from{ transform: rotate(0deg) translateX(36px) rotate(0deg); }
  to  { transform: rotate(360deg) translateX(36px) rotate(-360deg); }
}

.logo-img{
  width:64px; height:64px; object-fit:contain;
  filter: grayscale(10%) contrast(1.05) brightness(1.05);
  transition: transform .25s ease;
}
.sister-card:hover .logo-ring { opacity:1; transform: scale(1.04); }
.sister-card:hover .logo-img  { transform: scale(1.03); }

/* text */
.sister-title{
  font-size: clamp(18px, 2.2vw, 22px);
  margin-top: 6px;
}
.sister-sub{
  color: rgba(255,255,255,.75);
  font-size: .92rem;
  margin-top: 2px;
}

/* gentle stagger + tiny tilt so tiles don’t feel uniform */
.sister-grid > li:nth-child(4n+1) .sister-card{ transform: translateY(4px) rotate(-.2deg); }
.sister-grid > li:nth-child(4n+2) .sister-card{ transform: translateY(-2px) rotate(.15deg); }
.sister-grid > li:nth-child(4n+3) .sister-card{ transform: translateY(2px) rotate(.2deg); }
.sister-grid > li:nth-child(4n+4) .sister-card{ transform: translateY(-4px) rotate(-.15deg); }
.sister-grid > li .sister-card:hover{ rotate: 0deg; } /* reset tilt on hover */


/* ===== Footer: compact mode (overrides) ===== */
#site-footer{
  padding-top: 14px;        /* was big via Tailwind classes */
  padding-bottom: 14px;
}

#site-footer .footer-inner{
  gap: 10px;                /* tighter column spacing */
}

@media (min-width:768px){
  #site-footer .footer-inner{
    gap: 14px;
    grid-template-columns: 1fr 1.4fr 0.9fr; /* slightly narrower middle */
  }
}

/* Brand + tag line */
#site-footer .footer-brand{
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); /* smaller heading */
  line-height: 1.1;
  margin-bottom: 2px;
}
#site-footer .footer-tag{
  font-size: .9rem;
  margin-top: 4px;
}

/* Address chip */
#site-footer .footer-address{
  padding: 8px 10px;         /* was 10px 12px */
  border-radius: 10px;
}
#site-footer .footer-address i{ margin-top: 2px; }

/* Phone chip */
#site-footer .footer-link{
  padding: 5px 8px;          /* was 6px 10px */
  border-radius: 9px;
  gap: 6px;
  font-size: .95rem;
}

/* Social icons */
#site-footer .footer-social{ gap: 10px; margin: 4px 0 8px; }
#site-footer .soc{
  width: 34px; height: 34px; /* was 40 */
  border-radius: 10px;
}

/* Back to top */
#site-footer .footer-top{
  padding: 6px 10px;         /* was 8px 12px */
  font-size: .92rem;
  border-radius: 9999px;
}

/* Ambient + stripe: slimmer & softer */
#site-footer .footer-stripe{ height: 1px; opacity: .6; }
#site-footer .foot-ambient.a,
#site-footer .foot-ambient.b{
  width: 220px; height: 220px; filter: blur(52px); opacity: .2;
}

/* Bottom line */
#site-footer .footer-bottom{
  margin-top: 8px;           /* was 32px-ish via mt-8 */
  padding-top: 10px;         /* was 24px-ish via pt-6 */
}

/* Extra-tight on small screens */
@media (max-width: 480px){
  #site-footer{
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #site-footer .footer-brand{
    font-size: 1.2rem;
  }
  #site-footer .footer-address span{
    font-size: .9rem;
  }
  #site-footer .footer-link span{
    font-size: .92rem;
  }
}


/* =========================
   THEME VARIABLES
   (Light is default, Dark overrides below)
========================= */
:root {
  color-scheme: light dark;

  /* Base palette */
  --bg: #ffffff;
  --text: #0b0b0b;
  --muted: rgba(11,11,11,.75);
  --border: rgba(0,0,0,.12);
  --surface-1: rgba(0,0,0,.05);
  --surface-2: rgba(0,0,0,.03);
  --edge-fade: rgba(255,255,255,.92); /* for edge masks on light */

  /* Theme accents (same across modes) */
  --accent-1:#f04430; /* orange */
  --accent-2:#a78bfa; /* violet */
  --accent-3:#22d3ee; /* cyan */
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --text: #ffffff;
  --muted: rgba(255,255,255,.78);
  --border: rgba(255,255,255,.12);
  --surface-1: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.03);
  --edge-fade: rgba(0,0,0,.92); /* for edge masks on dark */
}

/* Base text/bg (doesn't fight Tailwind classes; just sets defaults) */
html, body { background: var(--bg); color: var(--text); }

/* Repaint your global stage background with variables */
body::before{
  background:
    radial-gradient(60rem 40rem at 10% -10%, color-mix(in oklab, var(--accent-1), transparent 85%), transparent 60%),
    radial-gradient(50rem 40rem at 110% 110%, color-mix(in oklab, var(--accent-3), transparent 87%), transparent 60%),
    radial-gradient(35rem 25rem at 30% 120%, color-mix(in oklab, var(--accent-2), transparent 87%), transparent 60%),
    /* grid lines tuned per mode */
    repeating-linear-gradient(0deg,  color-mix(in oklab, var(--text), transparent 92%) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--text), transparent 94%) 0 1px, transparent 1px 34px),
    linear-gradient(var(--bg), var(--bg));
}

/* Glows blend nicer on light if we switch the mode */
html[data-theme="light"] .global-glow { mix-blend-mode: multiply; opacity:.55; filter: blur(140px) saturate(110%); }
html[data-theme="dark"]  .global-glow { mix-blend-mode: screen;   opacity:.32; filter: blur(120px) }

/* Glass cards & chips (point the shared components at theme vars) */
.holo,
.holo-lite,
.stat-card,
.exp-item,
#reviews .rv-card,
.sister-card,
.assoc-item,
.footer-address,
.footer-top,
.soc {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2)) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

/* Review edges adapt to mode */
#reviews .rv-edge { background: linear-gradient(to right, var(--edge-fade), transparent); }

/* Navbar backdrop stays readable in both modes */
#navbar { background-color: color-mix(in oklab, var(--bg), black 20%) !important; backdrop-filter: blur(10px); }

/* Heading gradient still looks great on both modes */
.heading-gradient{
  background-image: linear-gradient(90deg,#ffffff 0%,#a7f3ff 45%,#ffd1a6 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ========== Tailwind utility remaps for light mode ==========
   Your markup uses text-white / text-white/xx / bg-white/5 / border-white/10 etc.
   These overrides flip them when data-theme="light" is set.
*/
html[data-theme="light"] .text-white               { color:#0b0b0b !important; }
html[data-theme="light"] .text-white\/85           { color:rgba(11,11,11,.85) !important; }
html[data-theme="light"] .text-white\/80           { color:rgba(11,11,11,.80) !important; }
html[data-theme="light"] .text-white\/75           { color:rgba(11,11,11,.75) !important; }
html[data-theme="light"] .text-white\/70           { color:rgba(11,11,11,.70) !important; }
html[data-theme="light"] .text-white\/60           { color:rgba(11,11,11,.60) !important; }
html[data-theme="light"] .text-white\/55           { color:rgba(11,11,11,.55) !important; }

html[data-theme="light"] .border-white\/10         { border-color: rgba(0,0,0,.10) !important; }
html[data-theme="light"] .bg-white\/5              { background-color: rgba(0,0,0,.05) !important; }

/* substring match catches hover:bg-white/[.08] etc without escaping */
html[data-theme="light"] [class*="hover:bg-white/"]:hover { background-color: rgba(0,0,0,.08) !important; }

/* Icon default colors (Font Awesome) can follow text color */
html[data-theme="light"] i.fab, 
html[data-theme="light"] i.fas,
html[data-theme="light"] i.fa-solid,
html[data-theme="light"] i.fa-regular { color: var(--text); }

/* Owl dots contrast on light */
html[data-theme="light"] #reviews .owl-dot span { background: rgba(0,0,0,.25); }
html[data-theme="light"] #reviews .owl-dot.active span { background: rgba(0,0,0,.85); }

/* Animated footer top border keeps theme accents */
#site-footer::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height: var(--footer-border-height, 2px);
  background: linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3),var(--accent-1));
  background-size: 300% 100%;
  animation: footerBorderPan var(--footer-border-speed, 8s) linear infinite;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-1), transparent 75%),
              0 0 18px color-mix(in oklab, var(--accent-2), transparent 80%);
  pointer-events:none; z-index:2;
}
@keyframes footerBorderPan { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }