:root{ --vlxe:cubic-bezier(.16,1,.3,1); }
.vlx-loader{
  position:fixed; inset:0; z-index:100000; display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(180deg,#050507,#030304);
  transition:transform .82s cubic-bezier(.86,0,.07,1), opacity .55s ease;
}
.vlx-loader::before{ content:""; position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%); }
.vlx-loader.is-done{ transform:translateY(-100%); opacity:.96; pointer-events:none; }
.vlx-loader-inner{ position:relative; z-index:1; width:min(420px,78vw); text-align:center; }
.vlx-loader-logo{ width:76px; height:76px; margin:0 auto 18px; border-radius:20px; display:grid; place-items:center;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 38px rgba(255,255,255,.08);
  animation:vlxLoaderMark 2.4s ease-in-out infinite; }
.vlx-loader-logo img{ width:52px; height:52px; object-fit:contain; }
.vlx-loader-mark{ font-family:Rajdhani,Inter,sans-serif; font-size:clamp(2.6rem,8vw,4.4rem); line-height:.9; font-weight:800; letter-spacing:0; text-transform:uppercase; color:#fff; }
.vlx-loader-mark span{ color:#d6d6d6; }
.vlx-loader-line{ height:2px; margin:24px 0 12px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); }
.vlx-loader-line i{ display:block; width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#fff,#bdbdbd,#fff); box-shadow:0 0 18px rgba(255,255,255,.24); transition:width .16s ease; }
.vlx-loader-meta{ display:flex; justify-content:space-between; align-items:center; font:700 12px/1 JetBrains Mono,Consolas,monospace; color:rgba(255,255,255,.58); text-transform:uppercase; letter-spacing:.12em; }
.vlx-loader-meta b{ color:#fff; font:inherit; }
.vlx-grain{ position:fixed; inset:-50%; z-index:99991; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  animation:vlxGrain 6s steps(6) infinite; mix-blend-mode:screen; }
.navbar.vlx-scrolled{ background:rgba(6,6,8,.90); border-color:rgba(255,255,255,.12); box-shadow:0 18px 50px rgba(0,0,0,.28); }
.page.active{ animation:vlxPageIn .38s var(--vlxe) both; }
.vlx-tilt-target{ transform:perspective(900px) rotateX(var(--vlx-rx,0deg)) rotateY(var(--vlx-ry,0deg)); transform-style:preserve-3d;
  transition:transform .18s var(--vlxe), box-shadow .22s var(--vlxe), border-color .22s var(--vlxe); will-change:transform; }
.vlx-tilt-target:hover{ border-color:rgba(255,255,255,.18); }
@keyframes vlxGrain{0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}30%{transform:translate(3%,-2%)}50%{transform:translate(-2%,4%)}70%{transform:translate(4%,2%)}90%{transform:translate(-3%,3%)}100%{transform:translate(0,0)}}
@keyframes vlxPageIn{ from{ opacity:.55; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes vlxLoaderMark{0%,100%{transform:translateY(0); box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 30px rgba(255,255,255,.08)}50%{transform:translateY(-5px); box-shadow:0 32px 84px rgba(0,0,0,.54),0 0 46px rgba(255,255,255,.13)}}
.navbar{ height:76px; background:rgba(7,7,11,.70); border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(155%) blur(16px); -webkit-backdrop-filter:saturate(155%) blur(16px);
  transition:background .3s var(--vlxe), box-shadow .3s var(--vlxe), border-color .3s var(--vlxe), height .3s var(--vlxe); }
.navbar::before{ display:none !important; }
.nav-links{ background:transparent !important; border:0 !important; border-radius:0 !important; gap:28px !important; padding:0 !important; }
.nav-link{ position:relative; padding:8px 0 !important; border-radius:0 !important; color:rgba(255,255,255,.74) !important;
  font-size:15px !important; font-weight:800 !important; letter-spacing:0 !important; transition:color .22s var(--vlxe), transform .22s var(--vlxe); background:transparent !important; box-shadow:none !important; outline:0 !important; border:0 !important; }
.nav-link:focus,.nav-link:focus-visible,.nav-link:active{ outline:0 !important; box-shadow:none !important; }
.nav-link:hover,.nav-link.active{ color:#fff !important; transform:translateY(-1px); }
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:-9px; height:2px; border-radius:2px;
  background:#fff; box-shadow:0 0 16px rgba(255,255,255,.38); transition:right .28s var(--vlxe); }
.nav-link:hover::after, .nav-link.active::after{ right:0; }
.nav-link.cta-link{ padding:11px 20px !important; border:1px solid rgba(255,255,255,.82) !important; border-radius:999px !important; color:#fff !important;
  background:rgba(255,255,255,.03) !important; box-shadow:none !important; }
.nav-link.cta-link::after{ display:none; }
.nav-link.cta-link:hover{ background:#fff !important; color:#050505 !important; box-shadow:0 10px 30px rgba(255,255,255,.18) !important; }
.hero{ position:relative; overflow:hidden; }
.hero-bg{ position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.08), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 46px);
  animation:vlxHeroGlow 8s ease-in-out infinite; }
@keyframes vlxHeroGlow{ 0%,100%{opacity:.82;} 50%{opacity:1;} }
.hero-inner, .hero-content{ position:relative; z-index:2; }
.hero-badge{ animation:vlxBadge 3.4s var(--vlxe) infinite; }
@keyframes vlxBadge{ 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} 50%{box-shadow:0 0 22px rgba(255,255,255,.18);} }
.gradient-text, .hero-title span{ background-size:200% auto; animation:vlxShine 6s linear infinite; }
@keyframes vlxShine{}
.btn-hero-primary, .checkout-cta-btn, .cta-link{ position:relative; overflow:hidden;
  transition:transform .18s var(--vlxe), box-shadow .18s var(--vlxe); }
.btn-hero-primary:hover, .checkout-cta-btn:hover, .cta-link:hover{ transform:translateY(-2px); }
.btn-hero-primary::after, .checkout-cta-btn::after{ content:""; position:absolute; top:0; left:-60%; width:38%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg);
  animation:vlxSheen 4s var(--vlxe) infinite; pointer-events:none; }
@keyframes vlxSheen{}
.feature-card,.workflow-card,.style-preview-card,.trust-item,.dashboard-metric,.dashboard-flow-card,.roadmap-card-top,.coming-style-video-card{
  transition:transform .22s var(--vlxe), box-shadow .22s var(--vlxe), border-color .22s var(--vlxe); }
.feature-card:hover,.workflow-card:hover,.style-preview-card:hover,.trust-item:hover,.dashboard-metric:hover,.dashboard-flow-card:hover,.roadmap-card-top:hover,.coming-style-video-card:hover{
  transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.4); }
.feature-icon{ transition:transform .3s var(--vlxe); }
.feature-card:hover .feature-icon{ transform:scale(1.12) rotate(-4deg); }
.form-group input, .mp-field input, input[type=text], input[type=email], input[type=password]{
  transition:border-color .2s var(--vlxe), box-shadow .2s var(--vlxe), background .2s var(--vlxe); }
.form-group input:focus, .mp-field input:focus,
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus{
  box-shadow:0 0 0 3px rgba(255,255,255,.12); outline:none; }
html.vlx-fx .feature-card, html.vlx-fx .workflow-card, html.vlx-fx .style-preview-card,
html.vlx-fx .trust-item, html.vlx-fx .dashboard-metric, html.vlx-fx .dashboard-flow-card,
html.vlx-fx .roadmap-card-top, html.vlx-fx .coming-style-video-card,
html.vlx-fx .section-title, html.vlx-fx .section-subtitle,
html.vlx-fx .affiliate-apply-copy, html.vlx-fx .affiliate-apply-visual,
html.vlx-fx .affiliate-steps, html.vlx-fx .affiliate-form{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--vlxe), transform .6s var(--vlxe); }
html.vlx-fx .vlx-in{ opacity:1 !important; transform:none !important; }
.modal-box{ animation:vlxModal .3s var(--vlxe) both; }
@keyframes vlxModal{ from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ *{animation:none !important;} html.vlx-fx *{opacity:1 !important; transform:none !important;} .vlx-grain{ display:none!important; } }