/* ============================================================ ZenvX DigiResearch — "BAD BOY" face Dark, high-motion award-site skin. Only active when . The minimal face is untouched. ============================================================ */ html[data-face="bad"]{ --ink:#F4F3F1; --ink2:#8C8880; --canvas:#08080A; --soft:#0D0D10; --soft2:#131318; --line:#22222A; --blue:#5E9FE8; --blue-d:#9CC7FA; --blue-soft:#0F2136; --green:#5BD39B; --acid:#C8FF3D; --r:2px; --r-lg:4px; scroll-behavior:smooth; } html[data-face="bad"] body{ background:var(--canvas); color:var(--ink); overflow-x:hidden; } /* ---------- ambient background: gradient blobs + grain ---------- */ html[data-face="bad"] .fx-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } html[data-face="bad"] .fx-bg b{ position:absolute; display:block; border-radius:50%; filter:blur(90px); opacity:.55; } html[data-face="bad"] .fx-bg b:nth-child(1){ width:52vw; height:52vw; left:-12vw; top:-14vw; background:radial-gradient(circle at 30% 30%,#2783DE,transparent 70%); animation:fxDrift1 22s ease-in-out infinite; } html[data-face="bad"] .fx-bg b:nth-child(2){ width:44vw; height:44vw; right:-10vw; top:24vh; background:radial-gradient(circle at 60% 40%,#6C3BF4,transparent 70%); animation:fxDrift2 27s ease-in-out infinite; } html[data-face="bad"] .fx-bg b:nth-child(3){ width:38vw; height:38vw; left:26vw; bottom:-16vw; background:radial-gradient(circle at 50% 50%,#0E7C5A,transparent 70%); animation:fxDrift3 31s ease-in-out infinite; } @keyframes fxDrift1{50%{transform:translate3d(8vw,6vh,0) scale(1.15)}} @keyframes fxDrift2{50%{transform:translate3d(-7vw,-5vh,0) scale(1.1)}} @keyframes fxDrift3{50%{transform:translate3d(5vw,-7vh,0) scale(1.2)}} html[data-face="bad"] .fx-grain{ position:fixed; inset:-150%; z-index:2; pointer-events:none; opacity:.06; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); animation:grain 1.1s steps(3) infinite; } @keyframes grain{ 0%{transform:translate3d(0,0,0)} 33%{transform:translate3d(-2%,1%,0)} 66%{transform:translate3d(1%,-2%,0)} 100%{transform:translate3d(0,0,0)} } html[data-face="bad"] header, html[data-face="bad"] main, html[data-face="bad"] footer, html[data-face="bad"] .wa-float{position:relative; z-index:3} /* ---------- preloader ---------- */ .fx-load{ position:fixed; inset:0; z-index:120; display:none; background:#08080A; color:#F4F3F1; align-items:flex-end; justify-content:space-between; padding:clamp(24px,6vw,72px); font-family:inherit; } html[data-face="bad"] .fx-load{display:flex} html[data-face="bad"].fx-loaded .fx-load{ transform:translateY(-101%); transition:transform 1s cubic-bezier(.76,0,.24,1); } .fx-load .fx-word{ font-size:clamp(34px,9vw,120px); font-weight:800; letter-spacing:-.04em; line-height:.9; } .fx-load .fx-word em{font-style:normal; color:#5E9FE8} .fx-load .fx-pct{ font-size:clamp(34px,9vw,120px); font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:#5E9FE8; } .fx-load .fx-bar{ position:absolute; left:0; bottom:0; height:2px; width:0%; background:#5E9FE8; transition:width .18s linear; } /* ---------- page transition curtain ---------- */ .fx-curtain{ position:fixed; inset:0; z-index:118; background:#08080A; transform:translateY(101%); pointer-events:none; display:none; } html[data-face="bad"] .fx-curtain{display:block} html[data-face="bad"].fx-leaving .fx-curtain{ transform:translateY(0); transition:transform .62s cubic-bezier(.76,0,.24,1); } /* ---------- custom cursor ---------- */ .fx-cur,.fx-dot{ position:fixed; top:0; left:0; z-index:200; pointer-events:none; border-radius:50%; display:none; mix-blend-mode:difference; } html[data-face="bad"] .fx-cur, html[data-face="bad"] .fx-dot{display:block} .fx-cur{ width:42px; height:42px; margin:-21px 0 0 -21px; border:1px solid rgba(255,255,255,.75); transition:width .25s ease,height .25s ease,margin .25s ease,background .25s ease,opacity .25s ease; } .fx-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:#fff; } html[data-face="bad"].fx-hot .fx-cur{ width:86px; height:86px; margin:-43px 0 0 -43px; background:rgba(255,255,255,.92); border-color:transparent; } html[data-face="bad"].fx-hot .fx-dot{opacity:0} @media (hover:none),(max-width:900px){ html[data-face="bad"] .fx-cur, html[data-face="bad"] .fx-dot{display:none!important} } /* ---------- face switch (present in both faces) ---------- */ .face{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:5px 11px 5px 9px; background:transparent; font:inherit; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--ink2); cursor:pointer; white-space:nowrap; transition:color .2s ease,border-color .2s ease,background .2s ease; } .face:hover{color:var(--ink); border-color:var(--ink2)} .face i{ width:8px; height:8px; border-radius:50%; background:var(--ink2); box-shadow:0 0 0 0 rgba(94,159,232,.6); transition:background .2s ease; } html[data-face="bad"] .face{ border-color:#2E2E38; color:var(--acid); background:rgba(200,255,61,.06); } html[data-face="bad"] .face i{ background:var(--acid); animation:pulseDot 1.6s ease-out infinite; } @keyframes pulseDot{ 0%{box-shadow:0 0 0 0 rgba(200,255,61,.5)} 100%{box-shadow:0 0 0 10px rgba(200,255,61,0)} } /* ---------- header ---------- */ html[data-face="bad"] .hdr{ background:rgba(8,8,10,.62); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid rgba(255,255,255,.07); } html[data-face="bad"] .mark{ background:linear-gradient(135deg,#5E9FE8,#6C3BF4); box-shadow:0 0 22px rgba(94,159,232,.55); } html[data-face="bad"] .bn{letter-spacing:-.03em} html[data-face="bad"] .bn em{color:var(--blue); font-style:normal} html[data-face="bad"] .nav a{ position:relative; color:var(--ink2); text-transform:uppercase; font-size:12px; letter-spacing:.12em; font-weight:700; } html[data-face="bad"] .nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--acid); transition:right .35s cubic-bezier(.76,0,.24,1); } html[data-face="bad"] .nav a:hover{color:var(--ink)} html[data-face="bad"] .nav a:hover::after{right:0} html[data-face="bad"] .nav a[aria-current="page"]{color:var(--ink)} html[data-face="bad"] .nav a[aria-current="page"]::after{right:0; background:var(--blue)} html[data-face="bad"] .lang{border-color:#26262E} html[data-face="bad"] .lang-btn{color:var(--ink2)} html[data-face="bad"] .lang-btn[aria-pressed="true"]{background:#1B1B22; color:var(--ink)} html[data-face="bad"] .burger span{background:var(--ink)} @media(max-width:980px){ html[data-face="bad"] .nav{ background:rgba(8,8,10,.97); border-bottom:1px solid rgba(255,255,255,.08); } } /* ---------- buttons ---------- */ html[data-face="bad"] .btn{ position:relative; overflow:hidden; border-radius:999px; background:var(--ink); color:#08080A; border:1px solid var(--ink); text-transform:uppercase; letter-spacing:.1em; font-size:12px; font-weight:800; will-change:transform; } html[data-face="bad"] .btn::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(100deg,#5E9FE8,#C8FF3D); transform:translateY(101%); transition:transform .45s cubic-bezier(.76,0,.24,1); } html[data-face="bad"] .btn:hover::before{transform:translateY(0)} html[data-face="bad"] .btn>*{position:relative; z-index:1} html[data-face="bad"] .btn:hover{color:#08080A; border-color:transparent} html[data-face="bad"] .btn-ghost{ background:transparent; color:var(--ink); border-color:#2E2E38; } html[data-face="bad"] .btn-ghost::before{background:var(--ink)} html[data-face="bad"] .btn-ghost:hover{color:#08080A} /* ---------- hero + kinetic type ---------- */ html[data-face="bad"] .hero{ padding-top:clamp(90px,16vh,180px); padding-bottom:clamp(70px,12vh,140px); background:transparent; } html[data-face="bad"] h1{ font-size:clamp(46px,10.5vw,148px); line-height:.88; letter-spacing:-.045em; font-weight:800; text-wrap:balance; } html[data-face="bad"] h1 .accent{ background:linear-gradient(100deg,#5E9FE8 10%,#C8FF3D 90%); -webkit-background-clip:text; background-clip:text; color:transparent; } html[data-face="bad"] h2{ font-size:clamp(30px,5.2vw,64px); line-height:1.02; letter-spacing:-.035em; } html[data-face="bad"] h3{letter-spacing:-.02em} html[data-face="bad"] .eyebrow{ color:var(--acid); letter-spacing:.24em; font-size:11px; } html[data-face="bad"] .lead{color:#B9B5AE; max-width:44ch} html[data-face="bad"] .pill{ border-color:#2A2A34; background:rgba(255,255,255,.03); color:#CFCBC4; text-transform:uppercase; letter-spacing:.14em; font-size:11px; } html[data-face="bad"] .pill i{background:var(--acid); box-shadow:0 0 10px var(--acid)} html[data-face="bad"] .hero-note{color:#6F6C66} /* char-split animation */ html[data-face="bad"] .fx-char{ display:inline-block; transform:translateY(110%) rotate(6deg); opacity:0; } html[data-face="bad"] .fx-line{display:inline} html[data-face="bad"] .fx-w{display:inline-block; white-space:nowrap} html[data-face="bad"].fx-loaded .fx-char{ animation:charIn .9s cubic-bezier(.16,1,.3,1) forwards; } @keyframes charIn{to{transform:translateY(0) rotate(0); opacity:1}} /* ---------- marquee ---------- */ .fx-marquee{display:none} html[data-face="bad"] .fx-marquee{ display:block; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; background:rgba(255,255,255,.02); } html[data-face="bad"] .fx-marquee .fx-track{ display:flex; gap:44px; width:max-content; animation:marq 26s linear infinite; } html[data-face="bad"] .fx-marquee span{ font-size:clamp(26px,5vw,64px); font-weight:800; letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1px #3A3A46; white-space:nowrap; } html[data-face="bad"] .fx-marquee span:nth-child(even){ -webkit-text-stroke:1px var(--blue); color:transparent; } html[data-face="bad"] .fx-marquee:hover .fx-track{animation-play-state:paused} @keyframes marq{to{transform:translate3d(-50%,0,0)}} /* ---------- sections, cards, tilt ---------- */ html[data-face="bad"] .sec-soft{background:rgba(255,255,255,.02)} html[data-face="bad"] .card, html[data-face="bad"] .price-card, html[data-face="bad"] .step, html[data-face="bad"] .person, html[data-face="bad"] .cl-item, html[data-face="bad"] .row, html[data-face="bad"] .faq details{ background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); border-color:rgba(255,255,255,.08); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } html[data-face="bad"] .card{ transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .5s ease; transform-style:preserve-3d; will-change:transform; } html[data-face="bad"] .card:hover{ border-color:rgba(94,159,232,.5); box-shadow:0 24px 70px -30px rgba(94,159,232,.5); } html[data-face="bad"] .ico{ background:linear-gradient(135deg,rgba(94,159,232,.22),rgba(108,59,244,.22)); color:var(--blue-d); border:1px solid rgba(94,159,232,.3); } html[data-face="bad"] .check li::before{color:var(--acid)} html[data-face="bad"] .step-n{ background:transparent; color:var(--acid); border:1px solid rgba(200,255,61,.35); } html[data-face="bad"] .price{letter-spacing:-.04em} html[data-face="bad"] .price-card.hi{ border-color:rgba(94,159,232,.45); box-shadow:0 0 0 1px rgba(94,159,232,.15),0 30px 90px -40px rgba(94,159,232,.55); } html[data-face="bad"] .tc, html[data-face="bad"] .hint, html[data-face="bad"] .role{color:#7E7A73} html[data-face="bad"] .band{ background:linear-gradient(110deg,#101018,#0B0B10 55%,#101820); border:1px solid rgba(255,255,255,.09); overflow:hidden; position:relative; } html[data-face="bad"] .band::after{ content:""; position:absolute; width:60vw; height:60vw; right:-20vw; top:-30vw; background:radial-gradient(circle,rgba(94,159,232,.22),transparent 65%); pointer-events:none; } html[data-face="bad"] .avatar{ background:linear-gradient(135deg,#5E9FE8,#6C3BF4); color:#08080A; } html[data-face="bad"] .faq summary{color:var(--ink)} html[data-face="bad"] .faq .ans{color:#A9A59E} /* ---------- forms ---------- */ html[data-face="bad"] .field input, html[data-face="bad"] .field select, html[data-face="bad"] .field textarea{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); color:var(--ink); border-radius:2px; } html[data-face="bad"] .field input:focus, html[data-face="bad"] .field select:focus, html[data-face="bad"] .field textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(94,159,232,.18); outline:none; } html[data-face="bad"] .field input::placeholder, html[data-face="bad"] .field textarea::placeholder{color:#5F5C57} html[data-face="bad"] .form{ background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)); border-color:rgba(255,255,255,.08); } html[data-face="bad"] .status.ok{color:var(--green)} html[data-face="bad"] .status.err{color:#FF6B6B} /* ---------- footer ---------- */ html[data-face="bad"] .ftr{ background:#050507; border-top:1px solid rgba(255,255,255,.07); color:#8C8880; } html[data-face="bad"] .ftr a{color:#B9B5AE} html[data-face="bad"] .ftr a:hover{color:var(--acid)} html[data-face="bad"] .ftr h4{color:var(--ink)} /* ---------- scroll reveal ---------- */ html[data-face="bad"] .fx-rv{ opacity:0; transform:translateY(38px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms); } html[data-face="bad"] .fx-rv.in{opacity:1; transform:none} /* ---------- scroll progress bar ---------- */ .fx-prog{ position:fixed; left:0; top:0; height:2px; width:0%; z-index:130; display:none; background:linear-gradient(90deg,#5E9FE8,#C8FF3D); } html[data-face="bad"] .fx-prog{display:block} /* ---------- misc ---------- */ html[data-face="bad"] ::selection{background:var(--acid); color:#08080A} html[data-face="bad"] .wa-float{ background:var(--acid); color:#08080A; box-shadow:0 10px 40px -10px rgba(200,255,61,.6); } html[data-face="bad"] .wa-float svg{fill:#08080A} @media (prefers-reduced-motion:reduce){ html[data-face="bad"] *, html[data-face="bad"] *::before, html[data-face="bad"] *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } html[data-face="bad"] .fx-rv{opacity:1; transform:none} html[data-face="bad"] .fx-char{opacity:1; transform:none} } @media(max-width:720px){.face span{display:none}.face{padding:5px 8px}} /* gradient hero line animates as one block (per-char gradient clipping breaks) */ html[data-face="bad"] h1 .accent{ display:inline-block; transform:translateY(55%); opacity:0; } html[data-face="bad"].fx-loaded h1 .accent{ animation:charIn 1s cubic-bezier(.16,1,.3,1) .5s forwards; } @media (prefers-reduced-motion:reduce){ html[data-face="bad"] h1 .accent{transform:none; opacity:1} }