:root{

  --indigo:  #4f46e5;  
  --violet:  #7c3aed;  
  --fuchsia: #c026d3;  
  --pink:    #ec4899;  
  --blue:    #38bdf8;  
  --teal:    #14b8a6;  
  --emerald: #10b981;  
  --amber:   #f59e0b;  
  --gold:    #fbbf24;  


  --ink:   #0f172a;   
  --ink-2: #0b1224;
  --text:  #ffffff;

  --glass-1: rgba(255,255,255,.14);
  --glass-2: rgba(255,255,255,.08);
  --stroke:  rgba(255,255,255,.18);


  --sh-xl:  0 40px 120px rgba(0,0,0,.55);
  --sh-lg:  0 24px 64px  rgba(0,0,0,.38);
  --sh-md:  0 14px 36px  rgba(0,0,0,.28);
  --sh-sm:  0 8px 22px   rgba(0,0,0,.20);

  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;

  --t-fast: .22s;
  --t-mid:  .45s;
  --t-slow: 1.2s;
}

html, body {
  background: var(--ink);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection{
  background: linear-gradient(90deg,var(--indigo),var(--pink));
  color:#fff;
}
[hidden]{ display:none !important; }
img,svg,canvas,video{ max-width:100%; height:auto; }
html{ scroll-behavior: smooth; }

*{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
*::-webkit-scrollbar{ width:8px; height:8px }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.28); border-radius:999px }
*::-webkit-scrollbar-track{ background: transparent }


body::before{
  content:"";
  position:fixed; inset:-18%;
  background:
    radial-gradient(60% 40% at 20% 10%, rgba(124,58,237,.20), transparent 60%),
    radial-gradient(50% 40% at 82% 18%, rgba(56,189,248,.16), transparent 62%),
    radial-gradient(40% 40% at 50% 84%, rgba(236,72,153,.14), transparent 70%);
  filter: blur(42px);
  z-index:-50;
  animation: bgFloat var(--t-slow) linear infinite alternate;
}
@keyframes bgFloat{ to{ transform: translateY(-2%) } }


#lux-stars{
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.95) 50%, transparent 51%) repeat,
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.85) 50%, transparent 51%) repeat,
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.8)  50%, transparent 51%) repeat,
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,.75) 50%, transparent 51%) repeat;
  background-size: 520px 520px, 640px 640px, 460px 460px, 520px 520px;
  opacity:.45;
  animation: starDrift 46s linear infinite;
  z-index:-40;
}
@keyframes starDrift{
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100%{ background-position: 980px 820px, -900px 700px, 1200px -900px, -800px -640px; }
}


#lux-aurora{
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(79,70,229,.0),
      rgba(124,58,237,.20),
      rgba(236,72,153,.16),
      rgba(56,189,248,.12),
      rgba(16,185,129,.14),
      rgba(251,191,36,.10),
      rgba(79,70,229,.0));
  filter: blur(58px);
  opacity:.6;
  animation: aurora 18s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:-35;
}
@keyframes aurora{
  0%{ transform: translate(-2%, -2%) rotate(0deg) }
  100%{ transform: translate(2%, 2%) rotate(2deg) }
}


#lux-noise{
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity:.25;
  z-index:-30;
}

#lux-grid{
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/ 100% 32px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/ 32px 100%;
  mask-image: radial-gradient(closest-side at 50% 50%, #000 60%, transparent 100%);
  opacity:.4;
  z-index:-25;
}


.lux-nav{
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid var(--stroke);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(12px);
  transition: background var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}
header.sticky .lux-nav{ background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); }

.lux-link{
  position:relative;
  color: rgba(255,255,255,.85);
  transition: color var(--t-fast);
}
.lux-link:hover{ color:#fff; }
.lux-link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg,var(--indigo),var(--pink));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast);
  border-radius:999px;
}
.lux-link:hover::after{ transform: scaleX(1); }

.lux-mobile-link{
  display:block;
  padding:.65rem .9rem;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  transition: background var(--t-fast), transform var(--t-fast);
}
.lux-mobile-link:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }


.lux-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; font-weight:800; border:0; cursor:pointer; user-select:none;
  padding:.7rem 1.1rem; border-radius:16px;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.lux-btn:active{ transform: translateY(1px) scale(.995); }
.lux-btn:focus-visible{ outline: 3px solid rgba(255,255,255,.25); outline-offset: 2px; }

.lux-btn--xl{ padding: .95rem 1.35rem; border-radius:20px; font-size:1.05rem; }

.lux-btn--primary{
  color:#0b1020;
  background:
    linear-gradient(180deg,#fff,#f5f7ff);
  box-shadow: 0 14px 40px rgba(255,255,255,.18);
  position:relative; overflow:hidden;
}
.lux-btn--primary::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, var(--indigo), var(--violet), var(--pink), var(--blue), var(--emerald));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; filter: hue-rotate(0deg);
  animation: borderShift 7s linear infinite;
}
.lux-btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 22px 60px rgba(255,255,255,.25); }

.lux-btn--glass{
  color:#fff;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid var(--stroke);
  box-shadow: var(--sh-sm);
  backdrop-filter: blur(8px);
}
.lux-btn--glass:hover{ background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10)); transform: translateY(-2px); }


@keyframes borderShift{ 0%{filter:hue-rotate(0)} 100%{filter:hue-rotate(360deg)} }

.lux-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem .75rem; border-radius:999px;
  background: rgba(255,255,255,.10);
  border:1px solid var(--stroke);
  backdrop-filter: blur(8px);
  font-weight:700; color: rgba(255,255,255,.88);
}
.lux-title{
  font-weight:900;
  letter-spacing:-.02em;
  font-size: clamp(2.2rem, 4vw + 1rem, 4rem);
  line-height: 1.05;
}
.lux-gradient-text{
  background: linear-gradient(90deg, var(--gold), var(--pink), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 24px rgba(255,255,255,.18);
}


.lux-card{
  border:1px solid rgba(255,255,255,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  box-shadow: var(--sh-xl);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.lux-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 44px 140px rgba(0,0,0,.52);
}
.lux-glow{
  position:absolute; inset:-24px;
  background: radial-gradient(60% 40% at 50% 50%, rgba(255,255,255,.18), transparent 70%);
  filter: blur(32px);
  border-radius: 999px;
}


.lux-tile{
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid var(--stroke);
  backdrop-filter: blur(8px);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.lux-tile:hover{ transform: translateY(-3px); box-shadow: var(--sh-md); }
.lux-kpi{ font-size:1.5rem; font-weight:900; letter-spacing:-.02em; }
.lux-kpi-label{ color: rgba(255,255,255,.75); font-size:.8rem; }


#lux-orb{
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.95), rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 60%),
    radial-gradient(120% 90% at 30% 70%, rgba(124,58,237,.55), transparent 60%),
    radial-gradient(120% 90% at 70% 35%, rgba(56,189,248,.45), transparent 60%),
    radial-gradient(120% 90% at 50% 50%, rgba(236,72,153,.40), transparent 60%);
  border-radius: 16px;
  position:relative; overflow:hidden;
  filter: saturate(1.15);
  animation: orbHue 10s linear infinite alternate;
}
#lux-orb::before{
  content:"";
  position:absolute; inset:-18% -38%;
  background:
    radial-gradient(60% 40% at 40% 40%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(60% 40% at 60% 60%, rgba(255,255,255,.18), transparent 60%);
  filter: blur(40px);
  animation: orbPulse 6s ease-in-out infinite;
}
#lux-orb::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 60% at -10% 50%, rgba(255,255,255,.25), transparent 50%);
  mix-blend-mode: screen;
  animation: orbSweep 5.6s ease-in-out infinite;
}
@keyframes orbHue{ 0%{ filter:hue-rotate(0) saturate(1.1) } 100%{ filter:hue-rotate(20deg) saturate(1.25) } }
@keyframes orbPulse{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.06) } }
@keyframes orbSweep{ 0%{ transform: translateX(-40%) } 100%{ transform: translateX(40%) } }

.lux-marquee{
  overflow:hidden; position:relative;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.lux-marquee__track{
  display:flex; gap:40px; white-space:nowrap;
  animation: marquee 16s linear infinite;
  color: rgba(255,255,255,.85); font-weight:700;
}
.lux-marquee__track span{ display:inline-block; padding:.3rem .1rem; }
@keyframes marquee{
  from{ transform: translateX(0) }
  to{   transform: translateX(-50%) }
}


.lux-section-title{
  font-weight:900; letter-spacing:-.02em;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 2.4rem);
  position:relative; display:inline-block;
}
.lux-section-title::after{
  content:"";
  display:block; height:3px; margin:.6rem auto 0;
  width:min(220px,40%); border-radius:999px;
  background: linear-gradient(90deg,var(--indigo),var(--pink),var(--blue));
  filter: drop-shadow(0 0 10px rgba(255,255,255,.3));
}

.lux-feature{
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid var(--stroke);
  backdrop-filter: blur(10px);
  padding:1.25rem;
  box-shadow: var(--sh-md);
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.lux-feature:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.28);
  box-shadow: var(--sh-lg);
}
.lux-feature__icon{ font-size:2rem; margin-bottom:.6rem }
.lux-feature__title{ font-weight:800; font-size:1.15rem; margin-bottom:.25rem }
.lux-feature__text{ color: rgba(255,255,255,.88) }
.lux-feature__meta{ margin-top:.45rem; font-weight:700 }


.lux-step{
  border-radius: var(--r-lg);
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  padding:1rem 1.1rem;
  position:relative; overflow:hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.lux-step::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(135deg, var(--indigo), var(--violet), var(--pink), var(--blue), var(--emerald));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.0; transition: opacity var(--t-fast);
  pointer-events:none;
}
.lux-step:hover{ transform: translateY(-4px); box-shadow: var(--sh-md); }
.lux-step:hover::after{ opacity:.9; }
.lux-step__num{ font-size:1.25rem; font-weight:900; color:#fff; opacity:.9 }
.lux-step__title{ font-weight:800; margin:.2rem 0 }
.lux-step__text{ color: rgba(255,255,255,.88) }

.lux-price{
  position:relative;
  border-radius: var(--r-xl);
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow: var(--sh-md);
  padding:1.15rem 1.15rem 1.25rem;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.lux-price:hover{ transform: translateY(-6px); box-shadow: var(--sh-lg); }
.lux-price__title{ font-weight:900; letter-spacing:.02em; }
.lux-price__value{ font-size:2rem; font-weight:900; margin:.35rem 0 .75rem }
.lux-price__value span{ font-size:.95rem; opacity:.8; margin-left:.15rem }
.lux-price__list{ margin:.35rem 0 1rem; color: rgba(255,255,255,.9); }
.lux-price__list li{ margin:.3rem 0; display:flex; gap:.45rem; }
.lux-price__list li::before{ content:"•"; color: var(--gold); margin-top:.05rem }

.lux-price--highlight{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10));
  border: 1px solid transparent;
}
.lux-price--highlight::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(135deg, var(--indigo), var(--pink), var(--blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; animation: borderShift 8s linear infinite;
}
.lux-price__badge{
  position:absolute; top:12px; right:12px;
  font-size:.75rem; letter-spacing:.03em; font-weight:900;
  background: linear-gradient(90deg, var(--indigo), var(--pink));
  padding:.3rem .55rem; border-radius:999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.lux-testimonial{
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid var(--stroke);
  padding:1rem 1.15rem;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
  transform-style: preserve-3d;
}
.lux-testimonial:hover{
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow: var(--sh-lg);
}
.lux-testimonial__head{ display:flex; align-items:center; gap:.65rem; }
.lux-avatar{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  border:1px solid var(--stroke);
  font-weight:800;
}
.lux-testimonial__text{ margin-top:.7rem; color:rgba(255,255,255,.92) }


.lux-faq{
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.08);
  border:1px solid var(--stroke);
  padding: .9rem 1rem;
  box-shadow: var(--sh-sm);
  backdrop-filter: blur(6px);
  transition: background var(--t-fast), transform var(--t-fast);
}
.lux-faq summary{
  cursor:pointer; list-style:none; font-weight:800; display:flex; align-items:center; justify-content:space-between;
}
.lux-faq summary::-webkit-details-marker{ display:none; }
.lux-faq[open]{ background: rgba(255,255,255,.12); transform: translateY(-2px); }
.lux-faq p{ margin-top:.6rem; color:rgba(255,255,255,.88) }

.lux-cta{
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  box-shadow: var(--sh-lg);
  padding: 1.25rem;
}
.lux-cta::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(135deg, var(--indigo), var(--violet), var(--pink), var(--blue), var(--emerald));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
  animation: borderShift 8s linear infinite;
}

#support-fab{
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  position: fixed;
}
#support-fab::after{
  content:"";
  position:absolute; inset:-6px; border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  animation: fabPulse 2.2s ease-out infinite;
}
@keyframes fabPulse{
  0%{ transform: scale(.9); opacity:.6 }
  70%,100%{ transform: scale(1.18); opacity:0 }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation: none !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 360px){
  .lux-nav{ padding:.65rem .75rem !important; }
  .lux-title{ font-size: 1.95rem !important; line-height: 1.12 !important; }
  #lux-orb{ height: 52vw; }
}


a:hover{ text-decoration: none; }


.animate-pulse{ position:relative; }
.animate-pulse::after{
  content:"";
  position:absolute; inset:-4px; border-radius:inherit;
  border:2px solid rgba(255,255,255,.25);
  animation: ringPulse 2.2s ease-out infinite;
}
@keyframes ringPulse{
  0%{ transform: scale(.9); opacity:.6 }
  70%{ transform: scale(1.15); opacity:0 }
  100%{ transform: scale(1.2); opacity:0 }
}



.low-power *, @media (prefers-reduced-motion: reduce) {
  animation: none !important;
  transition: none !important;
}

.low-power .lux-card,
.low-power .lux-nav,
.low-power .lux-tile,
.low-power .lux-cta {
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,.12) !important;
}


.low-power #lux-aurora,
.low-power #lux-stars,
.low-power #lux-noise,
.low-power #lux-grid {
  display: none !important;
}


@media (max-width: 640px) {
  .lux-card,.lux-nav,.lux-tile,.lux-cta { box-shadow: none; }
  #lux-orb { filter: none; }
}


section, .lux-card, .lux-price, .lux-step, .lux-feature {
  content-visibility: auto;
  contain-intrinsic-size: 1000px 800px;
}