.elementor-1529 .elementor-element.elementor-element-4616a78{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-1529 .elementor-element.elementor-element-41f4bab{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1529 .elementor-element.elementor-element-0d49764{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1529 .elementor-element.elementor-element-0022a42{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:column;}.elementor-1529 .elementor-element.elementor-element-fd409db{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1529 .elementor-element.elementor-element-f2d0865{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1529 .elementor-element.elementor-element-88ba1ea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1529 .elementor-element.elementor-element-cd455af .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-1529 .elementor-element.elementor-element-cd455af .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-1529 .elementor-element.elementor-element-cd455af{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-1529 .elementor-element.elementor-element-cd455af .elementor-icon-list-text{transition:color 0.3s;}.elementor-1529 .elementor-element.elementor-element-eb339be{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:1024px){.elementor-1529 .elementor-element.elementor-element-0022a42{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-1529 .elementor-element.elementor-element-0022a42{--e-con-grid-template-columns:1;--grid-auto-flow:row;}}/* Start custom CSS *//* ============================================================
   LOXI – GOD MODE LUXURY BLACK & GOLD SYSTEM
   Works with: whyloxi-* classes
   Paste at VERY END of your CSS
   ============================================================ */

/* ---------- Core tokens ---------- */
:root{
  --loxi-bg:#000;
  --loxi-bg2:#070707;
  --loxi-ink:rgba(255,255,255,.92);
  --loxi-muted:rgba(255,255,255,.72);
  --loxi-dim:rgba(255,255,255,.55);

  --loxi-gold:#D4AF37;
  --loxi-gold2:#F6D98F;
  --loxi-gold3:#A87412;

  --loxi-glow: rgba(212,175,55,.22);
  --loxi-glow2: rgba(212,175,55,.12);

  --loxi-radius:22px;
  --loxi-radius2:16px;

  --loxi-border: 1px solid rgba(212,175,55,.18);
  --loxi-border2: 1px solid rgba(255,255,255,.08);

  --loxi-shadow: 0 28px 90px rgba(0,0,0,.72);
  --loxi-shadow2: 0 18px 55px rgba(0,0,0,.55);

  --loxi-font: "Inter","Fira GO",sans-serif;
}

/* ---------- Page sections base (no layout break) ---------- */
.whyloxi-hero,
.whyloxi-biometrics,
.whyloxi-control,
.whyloxi-production,
.whyloxi-install,
.whyloxi-warranty,
.whyloxi-final{
  color: var(--loxi-ink);
  font-family: var(--loxi-font);
}

.whyloxi-hero{
  position: relative;
  isolation: isolate;
}

.whyloxi-hero::before{
  content:"";
  position:absolute;
  inset:-120px -80px -80px -80px;
  background:
    radial-gradient(900px 380px at 20% 20%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(820px 420px at 75% 30%, rgba(246,217,143,.07), transparent 60%),
    radial-gradient(900px 520px at 50% 90%, rgba(255,255,255,.03), transparent 65%);
  filter: blur(0px);
  z-index:-1;
  pointer-events:none;
}

/* subtle grain (premium, not noisy) */
.whyloxi-hero::after{
  content:"";
  position:absolute;
  inset:-80px;
  background-image:
    linear-gradient(transparent 0, transparent 100%);
  opacity:.0;
  z-index:-1;
  pointer-events:none;
}

/* ---------- Typography: GOD hierarchy ---------- */
.whyloxi-title{
  font-family: var(--loxi-font) !important;
  font-weight: 900 !important;
  font-size: clamp(42px, 5.2vw, 86px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.9px !important;
  margin: 0 0 14px 0 !important;

  background: linear-gradient(180deg,
    #ffffff 0%,
    #fff6da 22%,
    var(--loxi-gold2) 55%,
    var(--loxi-gold) 78%,
    var(--loxi-gold3) 100%
  ) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color: transparent !important;

  text-shadow:
    0 18px 55px rgba(0,0,0,.75),
    0 0 26px rgba(212,175,55,.12) !important;
}

.whyloxi-subtitle{
  font-family: var(--loxi-font) !important;
  font-weight: 650 !important;
  font-size: clamp(20px, 2.2vw, 34px) !important;
  line-height: 1.25 !important;
  letter-spacing: .1px !important;
  color: rgba(255,255,255,.92) !important;
  margin: 0 0 18px 0 !important;
  text-shadow: 0 12px 38px rgba(0,0,0,.65);
}

.whyloxi-lead{
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.75 !important;
  color: var(--loxi-muted) !important;
  max-width: 62ch;
}

/* section titles */
.whyloxi-section-title{
  font-family: var(--loxi-font) !important;
  font-weight: 850 !important;
  font-size: clamp(26px, 2.6vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.3px !important;
  margin: 0 0 22px 0 !important;
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 16px 42px rgba(0,0,0,.7);
  position: relative;
}

/* gold hairline accent under section titles */
.whyloxi-section-title::after{
  content:"";
  display:block;
  width: 96px;
  height: 2px;
  margin-top: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--loxi-gold), rgba(212,175,55,.0));
  opacity: .9;
}

/* body + note */
.whyloxi-body{
  font-size: clamp(15px, 1.1vw, 18px) !important;
  line-height: 1.8 !important;
  color: var(--loxi-muted) !important;
  max-width: 72ch;
}

.whyloxi-note{
  margin-top: 16px !important;
  font-weight: 650 !important;
  color: rgba(255,255,255,.90) !important;
}

/* ---------- Grid & Cards: GOD glass + depth ---------- */
.whyloxi-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.whyloxi-grid > .e-con{
  flex: 0 0 calc(25% - 21px);
}

/* responsive */
@media (max-width: 1024px){
  .whyloxi-grid > .e-con{ flex: 0 0 calc(50% - 14px); }
}
@media (max-width: 767px){
  .whyloxi-grid > .e-con{ flex: 0 0 100%; }
}

.whyloxi-card{
  position: relative;
  overflow: hidden;
  border-radius: var(--loxi-radius);
  border: var(--loxi-border2);
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(212,175,55,.10), transparent 55%),
    radial-gradient(900px 520px at 90% 85%, rgba(246,217,143,.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--loxi-shadow2);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  padding: 28px 26px;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              border-color .35s ease,
              box-shadow .35s ease,
              filter .35s ease;
}

/* premium inner stroke */
.whyloxi-card::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: calc(var(--loxi-radius) - 2px);
  border: 1px solid rgba(212,175,55,.14);
  opacity: .55;
  pointer-events:none;
}

/* moving gold sheen */
.whyloxi-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg,
    transparent 35%,
    rgba(246,217,143,.10) 45%,
    rgba(212,175,55,.18) 50%,
    rgba(246,217,143,.10) 55%,
    transparent 65%
  );
  transform: translateX(-35%) rotate(6deg);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events:none;
}

.whyloxi-card:hover{
  transform: translateY(-6px);
  border-color: rgba(212,175,55,.28);
  box-shadow: 0 34px 110px rgba(0,0,0,.78);
  filter: saturate(1.05);
}

.whyloxi-card:hover::after{
  opacity: 1;
}

/* card titles & text */
.whyloxi-card-title,
.whyloxi-card h3{
  font-family: var(--loxi-font) !important;
  font-weight: 850 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  margin: 0 0 12px 0 !important;
  color: rgba(255,255,255,.96) !important;
  letter-spacing: -0.2px;
  text-shadow: 0 14px 36px rgba(0,0,0,.7);
}

.whyloxi-card-text,
.whyloxi-card p{
  margin: 0 !important;
  color: var(--loxi-muted) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

/* small gold dot bullet inside cards (optional if you add list) */
.whyloxi-card ul{
  margin: 14px 0 0 0;
  padding-left: 18px;
}
.whyloxi-card li{
  color: var(--loxi-muted);
  line-height: 1.7;
}
.whyloxi-card li::marker{
  color: var(--loxi-gold);
}

/* ---------- Icon List styling (Elementor Icon List) ---------- */
.whyloxi-bullets .elementor-icon-list-item{
  padding: 8px 0 !important;
}
.whyloxi-bullets .elementor-icon-list-text{
  color: rgba(255,255,255,.88) !important;
  font-weight: 600 !important;
}
.whyloxi-bullets .elementor-icon-list-icon i,
.whyloxi-bullets .elementor-icon-list-icon svg{
  color: var(--loxi-gold) !important;
  fill: var(--loxi-gold) !important;
}

/* ---------- Warranty block: stronger trust panel ---------- */
.whyloxi-warranty{
  position: relative;
  border-radius: var(--loxi-radius);
}

.whyloxi-warranty::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: var(--loxi-radius);
  background: radial-gradient(1000px 520px at 50% 30%, rgba(212,175,55,.10), transparent 60%);
  pointer-events:none;
}

/* ---------- Final CTA: God tier button ---------- */
.whyloxi-final-title{
  font-family: var(--loxi-font) !important;
  font-weight: 900 !important;
  font-size: clamp(26px, 3vw, 48px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.4px !important;
  margin: 0 0 12px 0 !important;
  color: rgba(255,255,255,.96) !important;
}

.whyloxi-final-text{
  color: var(--loxi-muted) !important;
  line-height: 1.8 !important;
  max-width: 70ch;
}

/* target Elementor button inside your CTA wrapper */
.whyloxi-cta a,
a.whyloxi-cta,
.whyloxi-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 18px 38px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(212,175,55,.22) !important;

  background: linear-gradient(135deg,
    #b88a1a 0%,
    var(--loxi-gold2) 38%,
    var(--loxi-gold) 70%,
    var(--loxi-gold3) 100%
  ) !important;

  color: #070707 !important;
  font-weight: 900 !important;
  letter-spacing: .4px !important;
  text-decoration: none !important;

  box-shadow:
    0 26px 85px rgba(0,0,0,.72),
    0 14px 38px rgba(212,175,55,.18) !important;

  transform: translateY(0);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}

.whyloxi-cta a::before,
a.whyloxi-cta::before,
.whyloxi-cta::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg,
    transparent 42%,
    rgba(255,255,255,.55) 50%,
    transparent 58%
  );
  transform: translateX(-45%) rotate(10deg);
  opacity:.0;
  transition: opacity .25s ease;
}

.whyloxi-cta a:hover,
a.whyloxi-cta:hover,
.whyloxi-cta:hover{
  transform: translateY(-3px);
  filter: saturate(1.03) contrast(1.02);
  box-shadow:
    0 34px 110px rgba(0,0,0,.78),
    0 18px 52px rgba(212,175,55,.26) !important;
}

.whyloxi-cta a:hover::before,
a.whyloxi-cta:hover::before,
.whyloxi-cta:hover::before{
  opacity: .22;
}

/* ---------- Micro-motion (safe) ---------- */
@media (prefers-reduced-motion: no-preference){
  .whyloxi-card{
    will-change: transform;
  }
  .whyloxi-title{
    animation: loxiTitleBreath 7.5s ease-in-out infinite;
  }
  @keyframes loxiTitleBreath{
    0%,100%{ filter: brightness(1) saturate(1); }
    50%{ filter: brightness(1.02) saturate(1.08); }
  }
}

/* ---------- Mobile polish ---------- */
@media (max-width: 767px){
  .whyloxi-card{ padding: 24px 20px; border-radius: 18px; }
  .whyloxi-section-title::after{ width: 72px; }
  .whyloxi-cta a, a.whyloxi-cta, .whyloxi-cta{ width: 100%; }
}

/* ---------- Make sure Elementor default titles don’t add weird gaps ---------- */
.whyloxi-hero h1, .whyloxi-hero h2, .whyloxi-hero h3,
.whyloxi-biometrics h1, .whyloxi-biometrics h2, .whyloxi-biometrics h3,
.whyloxi-control h1, .whyloxi-control h2, .whyloxi-control h3,
.whyloxi-production h1, .whyloxi-production h2, .whyloxi-production h3,
.whyloxi-install h1, .whyloxi-install h2, .whyloxi-install h3,
.whyloxi-warranty h1, .whyloxi-warranty h2, .whyloxi-warranty h3,
.whyloxi-final h1, .whyloxi-final h2, .whyloxi-final h3{
  margin-top: 0 !important;
}
/* FIX CTA: remove huge gold bar look */
.whyloxi-cta,
.whyloxi-cta a{
  width: auto !important;
  max-width: fit-content !important;
  padding: 16px 30px !important;
  border-radius: 14px !important;
}

/* if Elementor button wrapper stretches full width */
.whyloxi-final .elementor-button-wrapper{
  display: flex !important;
  justify-content: flex-start !important; /* or center */
}

/* kill any full-width background around button */
.whyloxi-final .elementor-widget-button{
  background: transparent !important;
  padding: 0 !important;
}
/* Make each card feel separate */
.whyloxi-card{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 18px !important;
  padding: 26px 24px !important;
}

/* If your 4 items are not separate containers and are inside one big box,
   add dividers so they don't blend */
.whyloxi-grid{
  gap: 18px !important;
}
/* Make each card feel separate */
.whyloxi-card{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 18px !important;
  padding: 26px 24px !important;
}

/* If your 4 items are not separate containers and are inside one big box,
   add dividers so they don't blend */
.whyloxi-grid{
  gap: 18px !important;
}
/* Rhythm: consistent breathing between sections */
.whyloxi-biometrics,
.whyloxi-control,
.whyloxi-production,
.whyloxi-install,
.whyloxi-warranty,
.whyloxi-final{
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

/* tighten where needed on mobile */
@media (max-width: 767px){
  .whyloxi-biometrics,
  .whyloxi-control,
  .whyloxi-production,
  .whyloxi-install,
  .whyloxi-warranty,
  .whyloxi-final{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}/* End custom CSS */