/* Torres Tweaks — shared stylesheet, extracted from the old inline <style>
   block in index.html so index.html/admin.html/order-success.html can all
   share one source of design tokens instead of duplicating ~120 dense CSS
   lines three times. Content below is byte-for-byte the original ruleset
   plus a small set of additions at the bottom for features that didn't
   exist before (auth control, admin page, order-success page, review form). */
:root{--void:#000000;--carbon:#111116;--carbon-2:#16161c;--ember:#c9ccd2;--ember-soft:#f0f2f5;--volt:#2dd4bf;--volt-soft:#6ee7de;--ink:#f4f4f6;--mist:#9a9aa6;--mist-dim:#6f6f7a;--line:rgba(255,255,255,0.08);--line-soft:rgba(255,255,255,0.05);--glass:rgba(255,255,255,0.035);--glass-2:rgba(255,255,255,0.02);--good:#37d67a;--warn:#ffb86b;--f-d:'Space Grotesk','Inter',sans-serif;--f-b:'Inter',system-ui,-apple-system,sans-serif;--f-m:'JetBrains Mono',ui-monospace,monospace;--r-sm:10px;--r-md:16px;--r-lg:24px;--card-w:310px;--hdr:76px;--max-w:1240px;--sh-soft:0 18px 50px rgba(0,0,0,0.45)}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

body{margin:0;font-family:var(--f-b);background:var(--void);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(221,223,228,.45) transparent}

body::-webkit-scrollbar{width:7px}

body::-webkit-scrollbar-track{background:transparent}

body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px;transition:background .25s}

body::-webkit-scrollbar-thumb:hover{background:rgba(240,242,245,.35)}

::selection{background:rgba(201,204,210,.35);color:#fff}
a{color:inherit}
ul,ol{padding-left:1.15em}
img{max-width:100%;display:block}

h1,h2,h3,h4{font-family:var(--f-d);margin:0;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
p{margin:0}

:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:6px}

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

.atmosphere{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}

.atmosphere::before{content:"";position:absolute;inset:0;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwIDEgIDAgMCAwIDAuNSAwIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+);background-size:180px 180px;opacity:.5;mix-blend-mode:overlay}

.atmosphere .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.2;animation:floaty 16s ease-in-out infinite}

.orb.o1{width:480px;height:480px;left:-120px;top:-80px;background:radial-gradient(circle,rgba(201,204,210,.1),transparent 65%)}

.orb.o2{width:420px;height:420px;right:-100px;top:18%;background:radial-gradient(circle,rgba(45,212,191,.12),transparent 65%);animation-delay:-4s}

.orb.o3{width:520px;height:520px;left:8%;bottom:-180px;background:radial-gradient(circle,rgba(201,204,210,.07),transparent 65%);animation-delay:-9s}

.atmosphere .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px}


/* ── Maintenance overlay (js/maintenance-check.js) ───────────────────────
   Full-viewport, animated - deliberately NOT a small centered box. Reuses
   the same floaty-orb language as .atmosphere above, just bigger/brighter,
   plus a pulsing icon ring, staggered text reveal, an indeterminate
   progress sweep, and a pulsing "working on it" dot trio. */
.maint-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;background:radial-gradient(ellipse 120% 80% at 50% -10%,rgba(201,204,210,.14),transparent 60%),linear-gradient(180deg,#07070b 0%,#0a0a10 100%)}

.maint-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}

.maint-content{position:relative;z-index:1;max-width:540px;width:100%;text-align:center;padding:52px 40px;border-radius:26px;background:rgba(15,15,20,.55);border:1px solid var(--line);backdrop-filter:blur(20px);box-shadow:0 30px 90px rgba(0,0,0,.5);animation:maintCardIn .7s cubic-bezier(.16,1,.3,1) both}

@keyframes maintCardIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

.maint-icon-ring{position:relative;width:100px;height:100px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(201,204,210,.35)}

.maint-icon-ring::before{content:'';position:absolute;inset:-11px;border-radius:50%;border:1px dashed rgba(201,204,210,.22)}

.maint-icon-glow{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,rgba(201,204,210,.35),transparent 70%);animation:maintPulse 2.4s ease-in-out infinite}

.maint-icon{font-size:34px;color:var(--ember-soft);position:relative;z-index:1;animation:maintIconPulse 2.4s ease-in-out infinite}

@keyframes maintPulse{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:.9;transform:scale(1.08)}}

@keyframes maintIconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.maint-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;background:rgba(201,204,210,.12);border:1px solid rgba(201,204,210,.3);color:var(--ember-soft);font-family:var(--f-m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;animation:maintFadeUp .6s ease .1s both}

.maint-title{font-size:2rem;font-weight:800;color:#fff;margin-bottom:12px;animation:maintFadeUp .6s ease .2s both}

.maint-message{color:var(--mist);line-height:1.65;font-size:.95rem;margin-bottom:28px;animation:maintFadeUp .6s ease .3s both}

@keyframes maintFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.maint-eta{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);color:var(--ink);font-size:.85rem;font-family:var(--f-m);margin-bottom:22px;animation:maintFadeUp .6s ease .35s both}

.maint-progress{height:4px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:20px;animation:maintFadeUp .6s ease .4s both}

.maint-progress-bar{height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,transparent,var(--ember-soft),transparent);animation:maintProgress 1.8s ease-in-out infinite}

@keyframes maintProgress{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

.maint-status{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--mist-dim);font-size:.78rem;font-family:var(--f-m);text-transform:uppercase;letter-spacing:.05em;animation:maintFadeUp .6s ease .5s both}

.maint-dot{width:6px;height:6px;border-radius:50%;background:var(--ember-soft);animation:maintDot 1.4s ease-in-out infinite}

.maint-dot:nth-child(2){animation-delay:.2s}

.maint-dot:nth-child(3){animation-delay:.4s}

@keyframes maintDot{0%,60%,100%{opacity:.25;transform:scale(.8)}30%{opacity:1;transform:scale(1.15)}}

.maint-eta-countdown{color:var(--ember-soft);font-weight:600}

.maint-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px;flex-wrap:wrap;animation:maintFadeUp .6s ease .55s both}

.maint-actions .btn{padding:11px 18px;font-size:.85rem}

.maint-status-popup-overlay{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}

.maint-status-popup-overlay.show{display:flex}

.maint-status-popup{position:relative;width:100%;max-width:360px;padding:26px 24px;border-radius:18px;background:rgba(15,15,20,.92);border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.5)}

.maint-status-popup h3{color:#fff;font-size:1rem;margin-bottom:16px;display:flex;align-items:center;gap:8px}

.maint-status-popup-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--mist);cursor:pointer;font-size:14px;padding:4px}

.maint-status-popup-close:hover{color:#fff}

.maint-status-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.85rem}

.maint-status-row:last-child{border-bottom:none}

.maint-status-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px currentColor;opacity:.9}

.maint-status-dot.up{background:var(--good);color:rgba(55,214,122,.18)}

.maint-status-dot.down{background:#ff4d4d;color:rgba(255,77,77,.18)}

.maint-status-dot.checking{background:var(--mist-dim);color:rgba(255,255,255,.08);animation:statusPulseMaint 1.2s ease-in-out infinite}

@keyframes statusPulseMaint{0%,100%{opacity:.4}50%{opacity:1}}

.maint-status-row-name{color:#dcdce2;flex:1}

.maint-status-row-detail{color:var(--mist-dim);font-family:var(--f-m);font-size:.78rem}

.maint-status-popup-link{display:block;text-align:center;margin-top:16px;color:var(--ember-soft);font-size:.82rem;text-decoration:none}

.maint-status-popup-link:hover{text-decoration:underline}

@media (prefers-reduced-motion: reduce){
  .ac-beam,.maint-icon-glow,.maint-icon,.maint-progress-bar,.maint-dot,.maint-status-dot.checking{animation:none}
}

@keyframes floaty{0%{transform:translate(0,0)}50%{transform:translate(14px,-18px)}100%{transform:translate(0,0)}}

header{position:fixed;top:0;left:0;right:0;z-index:1200;height:var(--hdr);display:flex;align-items:center;justify-content:center;padding:0 20px;background:linear-gradient(180deg,rgba(7,7,11,.78),rgba(7,7,11,.55));border-bottom:1px solid var(--line-soft);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);transition:height .3s,background .3s,border-color .3s}

header.scrolled{height:48px;background:rgba(7,7,11,.9);border-color:var(--line);transition:height .3s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}

header.scrolled:hover{height:64px}

.hdr-inner{width:100%;max-width:1320px;display:flex;align-items:center;justify-content:space-between;gap:16px}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;cursor:pointer}

.brand-logo{width:42px;height:42px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.2,.9,.3,1);flex-shrink:0;position:relative}

.brand-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px}

.brand-logo .fb{width:22px;height:22px;position:relative;z-index:1}

.brand:hover .brand-logo{transform:scale(1.08);filter:drop-shadow(0 6px 18px rgba(201,204,210,.35))}

.brand-text .bt-title{background:linear-gradient(120deg,#fff 0%,var(--ink) 35%,var(--ember-soft) 75%,var(--ember) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--f-d);font-weight:700;font-size:1.05rem;line-height:1.1}

.brand-text .bt-tag{font-size:11px;color:var(--mist-dim);font-family:var(--f-m);letter-spacing:.03em}

.nav-right{display:flex;align-items:center;gap:9px}

nav#mainNav{display:flex;align-items:center}

nav#mainNav a{color:#d8d8de;margin-left:20px;text-decoration:none;font-weight:500;font-size:.91rem;position:relative;padding-bottom:5px;white-space:nowrap;transition:color .2s}

nav#mainNav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ember),var(--ember-soft));transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.9,.3,1)}

nav#mainNav a:hover{color:#fff}
nav#mainNav a:hover::after,nav#mainNav a.active::after{transform:scaleX(1)}
nav#mainNav a.active{color:#fff}

.icon-lnk{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--line);color:#fff;transition:all .22s;text-decoration:none;cursor:pointer}

.icon-lnk:hover{transform:translateY(-3px);border-color:rgba(201,204,210,.4);box-shadow:0 10px 26px rgba(201,204,210,.12)}

.icon-lnk i{font-size:16px}
.icon-lnk.disc i{color:#8ea1ff}
.icon-lnk.mail i{color:var(--warn)}

.cart-wrap{position:relative}
.cart-cnt{position:absolute;top:-6px;right:-6px;background:linear-gradient(135deg,var(--ember),var(--ember-soft));color:#17171a;min-width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;padding:0 5px;box-shadow:0 6px 14px rgba(201,204,210,.4);font-family:var(--f-m)}

.nav-tickets-link{position:relative}
.ticket-badge{margin-left:5px;background:linear-gradient(135deg,var(--ember),var(--ember-soft));color:#17171a;min-width:17px;height:17px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;padding:0 4px;font-family:var(--f-m);vertical-align:middle;box-shadow:0 4px 10px rgba(201,204,210,.4)}

.lang-sw{display:flex;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}

.lang-btn{background:transparent;border:none;color:var(--mist);font-family:var(--f-m);font-size:11.5px;font-weight:700;padding:7px 10px;border-radius:7px;cursor:pointer;transition:all .2s}

.lang-btn:hover{color:#fff}
.lang-btn.active{background:linear-gradient(135deg,var(--ember),var(--ember-soft));color:#17171a}

.settings-wrap{position:relative}

.settings-dd{position:absolute;right:0;top:52px;width:290px;padding:16px;background:linear-gradient(180deg,rgba(18,18,23,.99),rgba(11,11,14,.99));border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.55);opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity .22s,transform .22s cubic-bezier(.2,.9,.3,1);z-index:1300}

.settings-dd.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.settings-dd h5{font-family:var(--f-m);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mist-dim);margin:0 0 12px}

.sd-row{display:flex;align-items:center;justify-content:space-between;gap:10px}

.sd-lbl{font-size:.88rem;color:#fff;font-weight:600}
.sd-status{font-size:11px;color:var(--mist);font-family:var(--f-m);margin-top:2px}
.sd-status.on{color:var(--good)}
.sd-note{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:11px;color:var(--mist-dim);line-height:1.5}

.sd-legal-links{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.sd-legal-links a{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:9px;background:rgba(255,255,255,.02);border:1px solid var(--line-soft);color:var(--mist);font-size:10.5px;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.sd-legal-links a:hover{background:rgba(201,204,210,.08);border-color:rgba(201,204,210,.25);color:#fff}
.sd-legal-links a i{font-size:14px;color:var(--ember-soft)}

.burger{display:none;width:40px;height:40px;border-radius:11px;background:var(--glass);border:1px solid var(--line);color:#fff;align-items:center;justify-content:center;cursor:pointer}

.mobile-nav{position:fixed;inset:0;z-index:1190;background:rgba(7,7,11,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .3s}

.mobile-nav.open{opacity:1;pointer-events:auto}
.mobile-nav a{color:#eee;text-decoration:none;font-family:var(--f-d);font-size:1.5rem;padding:14px 0;font-weight:600}
.mn-contact{display:flex;gap:14px;margin-top:24px}
.mobile-nav .sd-legal-links{max-width:320px;width:100%;margin-top:22px;border-top-color:var(--line-soft)}
.mobile-nav .sd-legal-links a{font-size:11px}

@media(max-width:1440px){nav#mainNav{display:none}.hd-only{display:none!important}.burger{display:flex}}

main{position:relative;z-index:1}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 24px}
section{position:relative}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ember-soft);font-weight:600}
.hero-greeting{font-family:var(--f-m);font-size:1rem;color:var(--volt-soft);margin-bottom:10px;min-height:1.3em}

/* scrambleReveal()'s active state (js/aceternity.js) - a soft blur/desaturate
   while characters are still resolving, sharpening as the real text locks in. */
#heroGreeting.scrambling,#accWelcomeText.scrambling{filter:blur(.5px);opacity:.85;transition:filter .25s,opacity .25s}
@media (prefers-reduced-motion: reduce){#heroGreeting.scrambling,#accWelcomeText.scrambling{filter:none;opacity:1}}

.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 4px rgba(201,204,210,.18)}

.sec-head{max-width:680px;margin-bottom:42px}
.sec-head h2{font-size:clamp(26px,3.6vw,40px);margin-top:10px;line-height:1.12}
.sec-head p{color:var(--mist);margin-top:14px;font-size:1.02rem;line-height:1.65}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

.pad{padding:96px 0}
.pad.tight{padding:72px 0}

.gp{background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--r-md);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--sh-soft)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,var(--ember),var(--ember-soft));border:none;color:#17171a;padding:13px 22px;border-radius:12px;font-weight:700;font-size:.95rem;cursor:pointer;box-shadow:0 14px 36px rgba(201,204,210,.22);font-family:var(--f-b);transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s;position:relative;overflow:hidden;text-decoration:none}

.btn::before{content:"";position:absolute;inset:-1px;border-radius:12px;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-130%);transition:transform .65s;mix-blend-mode:screen;pointer-events:none}

.btn:hover::before{transform:translateX(130%)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(201,204,210,.26)}
.btn:active{transform:translateY(-1px) scale(.98)}

.btn.sec{background:var(--glass);color:#fff;border:1px solid var(--line);box-shadow:none;font-weight:600}
.btn.sec:hover{border-color:rgba(255,255,255,.25);transform:translateY(-2px)}
.btn:disabled{opacity:.4;pointer-events:none}

.sm-btn{display:inline-flex;align-items:center;gap:7px;background:var(--glass);border:1px solid var(--line);padding:9px 13px;border-radius:10px;color:#fff;cursor:pointer;transition:all .2s;font-size:.88rem;text-decoration:none;font-family:var(--f-b);font-weight:500}

.sm-btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}

.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--glass-2);border:1px solid var(--line-soft);color:var(--mist);font-size:12.5px;font-weight:600;font-family:var(--f-m)}
.pill i{color:var(--ember-soft)}
.pill img{width:13px;height:13px;object-fit:contain}

/* opacity is the only CSS state left here - transform/spring animation is
   now owned by Motion (js/fx.js's observeReveal, motion.dev's animate()),
   not a CSS transition. This stays only as the pre-JS-paint safety net so
   below-fold content doesn't flash visible before Motion initializes; the
   .reveal-left/-right classes and testimonial-card left/right alternation
   are read directly by observeReveal() in JS to pick the spring's initial
   x-offset, they carry no CSS transform of their own any more. */
.reveal{opacity:0}

.reveal.visible{opacity:1}

.reveal.rl{transform:translateX(-36px) scale(.98)}
.reveal.rl.visible{transform:none}
.reveal.rr{transform:translateX(36px) scale(.98)}
.reveal.rr.visible{transform:none}

.d1.visible{transition-delay:.07s}
.d2.visible{transition-delay:.14s}
.d3.visible{transition-delay:.21s}
.d4.visible{transition-delay:.28s}
.d5.visible{transition-delay:.35s}
.d6.visible{transition-delay:.42s}

/* Elements that also carry data-tilt (mouse-tilt hover) need a much faster
   transform transition once revealed, or the 0.6s reveal-entrance easing
   keeps bleeding into every subsequent hover-tilt update, making the tilt
   feel laggy/syrupy instead of responsive. Opacity keeps a normal duration
   since it only ever changes once (on reveal); only transform needs to be
   fast post-reveal. Higher specificity (.reveal.visible + attr) wins over
   the base .reveal rule above without touching it. */
.reveal[data-tilt].visible{transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .16s cubic-bezier(.16,1,.3,1)}

.hero{min-height:92vh;display:flex;align-items:center;padding:calc(var(--hdr) + 48px) 0 64px;position:relative;overflow:hidden}

.hero-slideshow{position:absolute;inset:-6%;z-index:-2}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(10px) brightness(.30) saturate(.7);opacity:0;transition:opacity 2.2s cubic-bezier(0.45,0,0.55,1);will-change:opacity}
.hero-slide.active{opacity:1;z-index:1}
.hero-slide.leaving{opacity:0;z-index:0;transition:opacity 2.2s cubic-bezier(0.45,0,0.55,1)}

.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg .scan{position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0,rgba(255,255,255,.022) 1px,transparent 1px,transparent 3px);mix-blend-mode:overlay;opacity:.5}
.hero-bg .vignette{position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 30%,transparent 40%,rgba(7,7,11,.65) 100%)}

.hero-grid{display:grid;grid-template-columns:1.1fr .95fr;gap:56px;align-items:center;perspective:1700px}

.hero h1{font-size:clamp(36px,5.6vw,62px);line-height:1.04;letter-spacing:-.015em;background:linear-gradient(135deg,#fff 35%,var(--ember-soft) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}

.hero-sub{color:var(--mist);margin-top:20px;max-width:54ch;font-size:1.08rem;line-height:1.7}
.cta-row{margin-top:30px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-pills{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:40px}}

.hud-card{padding:22px;position:relative;overflow:hidden}

.hud-scan-line{position:absolute;left:-10%;right:-10%;height:80px;top:-80px;pointer-events:none;z-index:1;background:linear-gradient(180deg,transparent,rgba(45,212,191,.04) 35%,rgba(45,212,191,.18) 50%,rgba(45,212,191,.04) 65%,transparent);mix-blend-mode:screen;animation:scanMove 5.5s linear infinite}

@keyframes scanMove{to{transform:translateY(560px)}}

.hud-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;position:relative;z-index:2}

.hud-title{display:flex;align-items:center;gap:9px;font-family:var(--f-m);font-size:12px;color:var(--mist);letter-spacing:.04em;text-transform:uppercase}

.hud-gauge-wrap{position:relative;display:flex;justify-content:center;margin:4px 0;z-index:2}
.hud-gauge-svg{width:200px;height:110px;display:block;overflow:visible}

.gauge-center{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);text-align:center;pointer-events:none}
.gauge-score{font-family:var(--f-m);font-size:2rem;font-weight:700;color:#fff;line-height:1;text-shadow:0 0 20px rgba(45,212,191,.3)}
.gauge-lbl{font-size:9.5px;color:var(--mist-dim);text-transform:uppercase;letter-spacing:.07em;font-family:var(--f-m);margin-top:2px}

.hud-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:2}
.hud-metric{background:rgba(0,0,0,.25);border:1px solid var(--line-soft);border-radius:13px;padding:14px}
.hud-metric .lbl{font-family:var(--f-m);font-size:10px;color:var(--mist-dim);text-transform:uppercase;letter-spacing:.06em}
.hud-metric .val{font-family:var(--f-m);font-size:2rem;font-weight:700;margin-top:5px;display:flex;align-items:baseline;gap:5px}
.hud-metric.fps .val{color:var(--volt-soft)}
.hud-metric.ping .val{color:var(--ember-soft)}
.hud-metric .unit{font-size:.9rem;color:var(--mist)}
.hud-metric .delta{margin-top:6px;font-size:11px;font-family:var(--f-m);color:var(--good);display:flex;align-items:center;gap:4px}

.hud-bars-lbl{margin-top:12px;font-family:var(--f-m);font-size:10px;color:var(--mist-dim);text-transform:uppercase;letter-spacing:.06em;position:relative;z-index:2}
.hud-bars{margin-top:6px;height:38px;background:rgba(0,0,0,.22);border:1px solid var(--line-soft);border-radius:10px;display:flex;align-items:flex-end;gap:2px;padding:5px 6px;position:relative;z-index:2;overflow:hidden}
.hud-bar{flex:1;min-width:3px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--volt-soft),rgba(45,212,191,.18));transition:height .4s ease}

.hud-foot{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;position:relative;z-index:2}
.hud-note{font-size:10.5px;color:var(--mist-dim);line-height:1.5}

.hud-disclaimer{margin-top:10px;font-size:10.5px;color:var(--mist-dim);line-height:1.55;padding:10px 12px;background:rgba(0,0,0,.18);border-radius:9px;border-left:2px solid var(--ember);position:relative;z-index:2}

.trust-strip{padding:26px 28px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;margin-top:60px}
.trust-item{display:flex;flex-direction:column;gap:4px;min-width:120px}
.trust-item .num{font-family:var(--f-m);font-size:1.7rem;font-weight:700;color:#fff;display:flex;align-items:baseline;gap:3px}
.trust-item .num .acc{color:var(--ember-soft)}
.trust-item .lbl{font-size:12.5px;color:var(--mist)}
.trust-div{width:1px;align-self:stretch;background:var(--line-soft)}
@media(max-width:780px){.trust-div{display:none}}

.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-w),1fr));gap:22px}
.card{background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.012));border-radius:var(--r-md);padding:18px;border:1px solid var(--line);transition:transform .3s cubic-bezier(.2,.9,.3,1),box-shadow .3s,border-color .3s;position:relative;overflow:hidden;backdrop-filter:blur(10px)}
.card:hover{transform:translateY(-7px);box-shadow:0 26px 60px rgba(0,0,0,.4),0 0 0 1px rgba(201,204,210,.18) inset;border-color:rgba(201,204,210,.3)}

.icon-wrap{height:160px;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid var(--line-soft)}
.icon-wrap::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 140px at -10% -20%,rgba(201,204,210,.16),transparent 60%);mix-blend-mode:screen;pointer-events:none;animation:sweep 7s linear infinite}
@keyframes sweep{0%{transform:translateX(-60%)}100%{transform:translateX(60%)}}

svg.icon-big{width:100px;height:100px;filter:drop-shadow(0 12px 28px rgba(201,204,210,.28))}
svg.icon-sm{width:26px;height:26px}
.pulse{animation:pIcon 2.4s ease-in-out infinite;transform-origin:center}
.spin-slow{animation:spin 8s linear infinite;transform-origin:center}
.bob{animation:bIcon 3.4s ease-in-out infinite;transform-origin:center}
@keyframes pIcon{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.card h4{margin:14px 0 6px;font-size:1.06rem}
.card p.desc{color:var(--mist);font-size:.91rem;line-height:1.55;min-height:40px}
.stars{display:flex;align-items:center;gap:5px;margin-top:8px}
.stars i{font-size:11px;color:var(--ember-soft)}
.stars span{font-family:var(--f-m);font-size:11px;color:var(--mist-dim)}
.price-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}
.price{color:#fff;font-weight:700;font-family:var(--f-m);font-size:1.15rem}
.card-acts{display:flex;gap:8px}

.ribbon{position:absolute;left:13px;top:13px;display:flex;align-items:center;gap:6px;background:rgba(7,7,11,.7);backdrop-filter:blur(6px);border:1px solid rgba(201,204,210,.4);color:var(--ember-soft);padding:5px 10px;border-radius:999px;font-weight:700;font-size:11px;letter-spacing:.03em;text-transform:uppercase;z-index:2}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat-tile{padding:24px;transition:transform .3s cubic-bezier(.2,.9,.3,1),border-color .3s;position:relative;overflow:hidden}
.feat-tile:hover{transform:translateY(-5px);border-color:rgba(201,204,210,.28)}
.feat-icon{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:linear-gradient(135deg,rgba(201,204,210,.18),rgba(201,204,210,.04));border:1px solid rgba(201,204,210,.25);position:relative;z-index:2}
.feat-tile.volt .feat-icon{background:linear-gradient(135deg,rgba(45,212,191,.18),rgba(45,212,191,.04));border-color:rgba(45,212,191,.3)}
.feat-icon i,.feat-icon img{font-size:21px;color:var(--ember-soft);width:26px;height:26px;object-fit:contain}
.feat-tile.volt .feat-icon i{color:var(--volt-soft)}
.feat-tile h4{font-size:1.04rem;margin-bottom:8px;position:relative;z-index:2}
.feat-tile p{color:var(--mist);font-size:.91rem;line-height:1.6;position:relative;z-index:2}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.feat-grid{grid-template-columns:1fr}}

.about-story{max-width:720px;margin:0 auto}
.about-copy p{color:var(--mist);font-size:1rem;line-height:1.78;margin-bottom:16px}
.about-copy strong{color:#fff;font-weight:600}
.owner-tag{margin-top:22px;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px}
.ot-av{width:38px;height:38px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,var(--ember),var(--ember-soft));display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:700;color:#17171a;font-size:14px}
.ot-name{font-weight:700;color:#fff;font-size:.92rem}
.ot-role{font-size:11px;color:var(--mist-dim);font-family:var(--f-m)}

/* Timeline (about.html) - sticky-scroll year labels, pure CSS position:sticky
   scoped to each row (js/about.js renderTimeline() just builds the markup). */
.ac-timeline{position:relative;max-width:820px;margin:0 auto}
.ac-timeline-row{display:flex;gap:36px;padding:36px 0;border-bottom:1px solid var(--line-soft)}
.ac-timeline-row:last-child{border-bottom:none}
.ac-timeline-year-col{flex:0 0 130px;position:sticky;top:110px;align-self:flex-start}
.ac-timeline-year{font-family:var(--f-d);font-weight:800;font-size:2.2rem;background:linear-gradient(135deg,#fff,var(--ember-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.ac-timeline-content{flex:1;padding-top:4px}
.ac-timeline-content h4{font-size:1.15rem;color:#fff;margin-bottom:8px}
.ac-timeline-content p{color:var(--mist);line-height:1.7}
@media (max-width:640px){.ac-timeline-row{flex-direction:column;gap:8px;padding:22px 0}.ac-timeline-year-col{position:static}}

/* 3D globe (about.html, js/globe.js) - three.js canvas fills this circular
   frame; the radial-gradient background itself doubles as a fallback if
   WebGL/three.js fails to load (initGlobe() bails out silently, leaving
   this backdrop visible on its own). */
.ac-globe-wrap{width:min(460px,90vw);aspect-ratio:1/1;margin:0 auto;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 30%,#241033,#07070b 72%);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ac-globe-wrap canvas{display:block;width:100%!important;height:100%!important}

.comm-banner{position:relative;overflow:hidden;padding:64px 48px;text-align:center;background:linear-gradient(165deg,rgba(201,204,210,.08),rgba(45,212,191,.04) 60%,rgba(255,255,255,.02))}
.comm-banner::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;left:50%;top:-260px;transform:translateX(-50%);background:radial-gradient(circle,rgba(201,204,210,.18),transparent 65%);filter:blur(40px);pointer-events:none}
.comm-banner h2{font-size:clamp(26px,3.6vw,40px);max-width:760px;margin:14px auto 0}
.comm-banner p.lead{color:var(--mist);max-width:640px;margin:18px auto 0;font-size:1.02rem;line-height:1.7}
.comm-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:36px;position:relative;z-index:1}
.comm-stats .cs{display:flex;flex-direction:column;align-items:center;gap:6px}
.comm-stats .cs i{color:var(--volt-soft);font-size:18px}
.comm-stats .cs b{font-family:var(--f-m);font-size:1.15rem;color:#fff}
.comm-stats .cs span{font-size:12px;color:var(--mist)}
.comm-banner .btn{margin-top:32px;position:relative;z-index:1}
/* Lamp effect (ported animation only, not the demo's slate/blue palette) -
   a converging light-cone + glowing bar that widens in once this reveal
   section scrolls into view, reusing the same .reveal/.visible mechanism
   every other scroll-reveal on the site already drives off of. */
.comm-lamp{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.comm-lamp .lamp-cone{position:absolute;top:0;left:50%;width:0;height:280px;transform:translateX(-50%);
  background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(240,242,245,.4),transparent 70%);
  clip-path:polygon(50% 0%,0% 100%,100% 100%);transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.comm-lamp .lamp-line{position:absolute;top:0;left:50%;width:0;height:3px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#fff,transparent);
  box-shadow:0 0 30px 6px rgba(255,255,255,.55),0 0 80px 20px rgba(240,242,245,.25);
  transition:width 1.2s cubic-bezier(.16,1,.3,1) .15s}
.reveal.visible .comm-lamp .lamp-cone{width:70%}
.reveal.visible .comm-lamp .lamp-line{width:240px}
@media (prefers-reduced-motion: reduce){.comm-lamp .lamp-cone,.comm-lamp .lamp-line{transition:none;width:70%}.comm-lamp .lamp-line{width:240px}}

.partner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.partner-card{padding:26px;display:flex;flex-direction:column;gap:14px}
.partner-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.partner-logo{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(45,212,191,.22),rgba(45,212,191,.05));border:1px solid rgba(45,212,191,.3);overflow:hidden}
.partner-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.partner-logo i{font-size:24px;color:var(--volt-soft)}
.partner-badge{font-size:11px;font-family:var(--f-m);color:var(--volt-soft);background:rgba(45,212,191,.1);border:1px solid rgba(45,212,191,.25);padding:5px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.partner-card h4{font-size:1.12rem}
.partner-card p{color:var(--mist);font-size:.92rem;line-height:1.65}
.partner-card .sm-btn{align-self:flex-start;margin-top:4px}
.partner-card.add-p{align-items:center;justify-content:center;text-align:center;border-style:dashed;color:var(--mist-dim)}
.partner-card.add-p i{font-size:22px;margin-bottom:8px;color:var(--mist-dim)}

.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.help-card{padding:26px}
.help-list{list-style:none;padding:0;margin-top:10px;display:flex;flex-direction:column;gap:10px}
.help-list li{display:flex;align-items:flex-start;gap:10px;color:var(--mist);font-size:.92rem}
.help-list li i{color:var(--volt-soft);margin-top:3px;font-size:13px}
.help-list a{text-decoration:none;transition:color .2s}
.help-list a:hover{color:#fff}
.help-note{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);color:var(--mist);font-size:.85rem;line-height:1.6}
@media(max-width:860px){.help-grid{grid-template-columns:1fr}}

.contact-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.contact-card{padding:22px}
.contact-links{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.contact-links .sm-btn{justify-content:flex-start}
.form-card{padding:24px}
.form-row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.field{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--mist-dim);font-family:var(--f-m)}
.field input,.field textarea{width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:#fff;font-family:var(--f-b);font-size:.92rem;transition:border-color .2s,background .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:rgba(201,204,210,.5);background:rgba(255,255,255,.04)}
.field textarea{min-height:120px;resize:vertical}
.form-foot{margin-top:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

.legal-block{padding:26px;line-height:1.7;color:#d6d6dc}
.legal-block strong{display:block;margin-top:16px;margin-bottom:5px;color:var(--ember-soft);font-family:var(--f-d);font-size:.97rem}
.legal-block strong:first-child{margin-top:0}
.legal-block p,.legal-block ol,.legal-block ul{color:var(--mist);font-size:.92rem}
.legal-block a{color:var(--volt-soft)}
.legal-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);color:var(--mist-dim);font-size:.8rem}

footer{position:relative;z-index:1;margin-top:40px;border-top:1px solid var(--line-soft);padding:48px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer-brand .brand{pointer-events:none}
.footer-brand p{color:var(--mist);font-size:.87rem;margin-top:14px;line-height:1.6;max-width:32ch}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-col h5{font-family:var(--f-m);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mist-dim);margin-bottom:14px}
.footer-col a{display:block;color:var(--mist);text-decoration:none;font-size:.9rem;margin-bottom:10px;transition:color .2s;cursor:pointer}
.footer-col a:hover{color:#fff}
.footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;color:var(--mist-dim);font-size:.81rem}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

.cart-panel{position:fixed;right:18px;top:calc(var(--hdr) + 12px);width:380px;max-height:76vh;overflow:auto;z-index:1500;background:linear-gradient(180deg,rgba(16,16,21,.99),rgba(10,10,13,.99));border-radius:18px;padding:18px;border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.6);display:none;scrollbar-width:thin}
.cart-panel.show{display:block;animation:cartIn .3s cubic-bezier(.2,.9,.3,1)}
@keyframes cartIn{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.cart-panel h4{color:#fff;font-size:1.04rem;display:flex;align-items:center;gap:8px}
.cart-item{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.cart-item .meta{flex:1;min-width:0}
.ci-name{font-weight:600;font-size:.89rem;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-price{color:var(--mist);font-size:12px;font-family:var(--f-m);margin-top:2px}
.mini-icon{width:42px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-soft);background:rgba(255,255,255,.02);flex-shrink:0}
.cart-empty{color:var(--mist-dim);font-size:.87rem;text-align:center;padding:22px 0}

.coupon-row{display:flex;gap:8px;margin-top:12px}
.coupon-row input{flex:1;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:#fff;font-family:var(--f-m);font-size:.84rem;transition:border-color .2s}
.coupon-row input:focus{outline:none;border-color:rgba(201,204,210,.45);background:rgba(255,255,255,.04)}
.coupon-msg{margin-top:5px;font-size:11.5px;font-family:var(--f-m);min-height:16px}
.coupon-msg.ok{color:var(--good)}
.coupon-msg.err{color:#ff8b8b}

.cart-sum-block{margin-top:12px;background:rgba(0,0,0,.2);border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:5px}
.cs-row{display:flex;justify-content:space-between;align-items:center;font-size:.89rem;color:var(--mist)}
.cs-row.disc{color:var(--good);font-weight:600}
.cs-row.tot{border-top:1px solid var(--line);padding-top:8px;margin-top:4px;color:#fff;font-weight:700;font-family:var(--f-m);font-size:1.04rem}
.cs-row.tot span:last-child{color:var(--ember-soft)}
.cart-acts{margin-top:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cart-fnote{font-size:11px;color:var(--mist-dim);margin-top:10px;line-height:1.5}

.overlay{position:fixed;inset:0;background:rgba(5,5,8,.78);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:2100;padding:18px}
.overlay.show{display:flex}
.overlay.show .modal{opacity:1;transform:translateY(0) scale(1)}
.modal{width:min(960px,100%);max-height:88vh;overflow:auto;border-radius:20px;padding:24px;background:linear-gradient(180deg,rgba(15,15,19,.99),rgba(9,9,12,.99));border:1px solid var(--line);transform:translateY(26px) scale(.98);opacity:0;transition:all .4s cubic-bezier(.2,.9,.3,1);box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(201,204,210,.1) inset;scrollbar-width:thin}
.modal-grid{display:grid;grid-template-columns:1fr 340px;gap:22px}
.modal h2{color:#fff;font-size:1.5rem}
.modal p{color:var(--mist)}
.specs{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.specs li{list-style:none;display:flex;align-items:flex-start;gap:9px;padding-left:0}
.specs li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--volt);font-size:11px;margin-top:4px}
.reviews{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px}
.review{background:var(--glass);border:1px solid var(--line-soft);padding:11px 13px;border-radius:12px;margin-bottom:9px;font-size:.91rem}
.review strong{color:var(--ember-soft)}
.modal-aside{background:rgba(255,255,255,.025);border:1px solid var(--line-soft);padding:16px;border-radius:14px;align-self:start;position:sticky;top:0}
@media(max-width:900px){.modal-grid{grid-template-columns:1fr}.modal-aside{position:static}}
.mfn{font-size:11px;color:var(--mist-dim);margin-top:10px}

.agb-check-row{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(255,255,255,.02);border:1px solid rgba(201,204,210,.35);border-radius:10px;cursor:pointer;color:var(--mist);font-size:.9rem;user-select:none}
.agb-check-row a{color:var(--volt-soft)}
.agb-check-row input[type=checkbox]{width:16px;height:16px;cursor:inherit;accent-color:var(--ember);flex-shrink:0}

.agb-ok-badge{display:flex;align-items:center;gap:8px;background:rgba(55,214,122,.1);border:1px solid rgba(55,214,122,.3);color:var(--good);padding:10px 14px;border-radius:10px;margin-bottom:14px;font-weight:600;font-size:.9rem}
.agb-ok-badge i{font-size:16px}

/* Checkout summary redesigned as a real order-receipt card (line items with
   dividers, price right-aligned in tabular figures, total visually distinct)
   instead of a plain bulleted list - matches how every other e-commerce
   checkout presents a summary, per owner feedback that the old version
   "sieht schlecht aus". */
.co-summary{background:rgba(0,0,0,.22);border:1px solid var(--line-soft);border-radius:14px;padding:16px 18px;margin-bottom:16px}

.co-summary ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}

.co-summary li{display:flex;justify-content:space-between;gap:12px;font-size:.89rem;color:var(--mist);padding-bottom:9px;border-bottom:1px solid var(--line-soft)}

.co-summary li:last-of-type{border-bottom:none;padding-bottom:0}

.co-disc{color:var(--good);margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-soft);font-weight:600;font-size:.88rem;display:flex;justify-content:space-between}

.co-tot{color:#fff;font-weight:700;font-family:var(--f-m);margin-top:10px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;font-size:1.08rem}

.co-tot span:last-child{color:var(--ember-soft);font-size:1.3rem}

.checkout-pay-btn{width:100%;justify-content:center;margin-top:6px;font-size:1rem;padding:15px 20px;box-shadow:0 16px 40px -12px rgba(201,204,210,.5)}

.checkout-pay-btn i{font-size:21px}

.checkout-card-icons{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--mist-dim);font-size:22px}

.checkout-card-icons i{transition:color .2s}

.checkout-card-icons i:hover{color:var(--mist)}


/* ── Checkout page (checkout.html) - dedicated page instead of a modal,
   generous spacing between steps and a scroll-reveal per step for a calmer,
   more professional feel than the old stacked-overlay flow. ──────────── */
.checkout-page{max-width:640px}

.checkout-step{position:relative;padding:32px 34px;margin-bottom:56px;overflow:hidden}

.checkout-step:last-child{margin-bottom:0}

.checkout-step-num{position:absolute;top:22px;right:28px;font-family:var(--f-m);font-size:2.6rem;font-weight:700;color:rgba(255,255,255,.04);line-height:1;pointer-events:none}

.checkout-step h2{color:#fff;font-size:1.15rem;margin-bottom:18px;display:flex;align-items:center;gap:10px}

.checkout-step h2::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 4px rgba(201,204,210,.18);flex-shrink:0}

.checkout-empty{text-align:center;padding:60px 24px;color:var(--mist)}

.checkout-empty i{font-size:38px;color:var(--mist-dim);margin-bottom:16px;display:block}

.checkout-empty p{margin-bottom:20px;font-size:1rem}

@media(max-width:640px){.checkout-step{padding:24px 20px;margin-bottom:36px}.checkout-step-num{font-size:2rem;top:16px;right:18px}}

.checkout-trust-row{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}

.checkout-trust-row span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mist-dim);font-family:var(--f-m)}

.checkout-trust-row i{color:var(--volt-soft);font-size:12px}

.pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}

/* ── Site announcement banner(s) (js/announcements.js) ─────────────────
   Slim, dismissible strip(s) right under the fixed header - deliberately
   NOT a full-viewport takeover like .maint-overlay, since an announcement
   is informational, not a "the site is down" gate. */
.announce-bar-stack{position:fixed;top:var(--hdr);left:0;right:0;z-index:900;display:flex;flex-direction:column}

.announce-bar{display:flex;align-items:center;gap:12px;padding:11px 20px;background:rgba(17,17,22,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);color:#dcdce2;font-size:.85rem;line-height:1.5}

.announce-bar.info{border-left:3px solid var(--volt-soft)}

.announce-bar.warning{border-left:3px solid var(--warn)}

.announce-bar.promo{border-left:3px solid var(--ember-soft)}

.announce-icon{flex-shrink:0;font-size:15px}

.announce-bar.info .announce-icon{color:var(--volt-soft)}

.announce-bar.warning .announce-icon{color:var(--warn)}

.announce-bar.promo .announce-icon{color:var(--ember-soft)}

.announce-bar-content{flex:1;min-width:0}

.announce-bar-title{font-weight:700;color:#fff;margin-right:4px}

.announce-bar-close{flex-shrink:0;background:none;border:none;color:var(--mist-dim);cursor:pointer;font-size:15px;padding:4px 6px;line-height:1;border-radius:6px;transition:color .2s,background .2s}

.announce-bar-close:hover{color:#fff;background:rgba(255,255,255,.06)}

@media(max-width:640px){.announce-bar{padding:10px 14px;font-size:.8rem}}


.cookie-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:1800;max-width:680px;margin:0 auto;background:linear-gradient(180deg,rgba(20,20,25,.99),rgba(11,11,14,.99));border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:none;gap:16px;align-items:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.cookie-banner p{margin:0;color:#cfcfd6;font-size:.85rem;line-height:1.5}
.cookie-banner p strong{color:#fff}
.cookie-banner a{color:var(--volt-soft)}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
@media(max-width:600px){.cookie-banner{flex-direction:column;align-items:stretch}}


/* ── ADDITIONS FOR PHASE 5 (backend-integrated frontend) ──────────────── */

/* Auth control in the header — replaces the old free-text greeting-pill.
   .brand-logo lost its ember gradient box above (the new torres-logo.png
   asset has its own solid/opaque background, so a colored box behind it
   just looked like a mismatched square) - it now sits on --carbon-2 instead. */
.auth-wrap{display:flex;align-items:center}

.auth-login{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;background:var(--glass);border:1px solid var(--line);color:#fff;text-decoration:none;font-size:.87rem;font-weight:600;transition:all .2s;white-space:nowrap}

.auth-login:hover{border-color:rgba(88,101,242,.5);background:rgba(88,101,242,.12);transform:translateY(-2px)}

.auth-login i{color:#8ea1ff}

.auth-user{display:flex;align-items:center;gap:9px;padding:5px 8px 5px 5px;border-radius:999px;background:var(--glass);border:1px solid var(--line);transition:border-color .2s,background .2s}

.auth-user:hover{border-color:rgba(201,204,210,.3);background:rgba(255,255,255,.05)}

.auth-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--carbon-2);border:1px solid var(--line);flex-shrink:0}

.auth-name{font-size:.83rem;font-weight:600;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.auth-admin-badge{font-size:9px;font-family:var(--f-m);color:var(--ember-soft);background:rgba(201,204,210,.14);border:1px solid rgba(201,204,210,.3);padding:2px 6px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}

.auth-logout{background:none;border:none;color:var(--mist);cursor:pointer;padding:4px 6px;font-size:12px;border-radius:6px;transition:color .2s}

.auth-logout:hover{color:#fff}

.auth-banned{border-color:rgba(201,204,210,.4);background:rgba(201,204,210,.08)}

.auth-banned-badge{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-family:var(--f-m);color:#fff;background:var(--ember);padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}

/* Banned-account restricted state: header/settings/logout stay visible so
   the account still reads as "signed in", but every way to navigate or buy
   is hidden - the only thing left to do is log out. */
body.mb-banned #mainNav a,
body.mb-banned .nav-cta,
body.mb-banned .cart-wrap,
body.mb-banned #mobileNav a,
body.mb-banned #mobileNav .mn-contact{display:none!important}

body.mb-banned{overflow:hidden}


/* Full-page ban takeover: sits below the fixed header (top:var(--hdr), z-
   index under the header's 1200) so the header/settings-gear hover stays
   reachable exactly as the owner asked ("nur bannscreen und hover"), while
   everything else is replaced - no scrolling the real page content. Built
   once by auth.js's renderBanScreen() and animated in with Anime.js. */
.ban-screen{position:fixed;top:var(--hdr);left:0;right:0;bottom:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;background:radial-gradient(120% 100% at 50% 0%,rgba(201,204,210,.12),rgba(5,5,8,.97) 62%);backdrop-filter:blur(8px);opacity:0}

.ban-screen-card{position:relative;max-width:480px;width:100%;padding:38px 32px;border-radius:22px;border:1px solid rgba(201,204,210,.35);background:linear-gradient(165deg,rgba(22,22,28,.98),rgba(10,10,13,.98));box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(201,204,210,.12) inset;text-align:center;opacity:0}

.ban-screen-icon{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(201,204,210,.12);border:2px solid var(--ember);color:var(--ember);font-size:28px;box-shadow:0 0 0 8px rgba(201,204,210,.08)}

.ban-screen-title{color:#fff;font-family:var(--f-d);font-weight:700;font-size:1.4rem;margin-bottom:10px}

.ban-screen-sub{color:var(--mist);font-size:.9rem;line-height:1.6;margin-bottom:22px}

.ban-screen-info{text-align:left;background:rgba(0,0,0,.25);border:1px solid var(--line-soft);border-radius:14px;padding:15px 18px;margin-bottom:24px;font-size:.86rem;color:#dcdce2;line-height:1.85}

.ban-screen-info strong{color:var(--ember-soft)}

.ban-screen-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

@media(max-width:640px){.ban-screen-card{padding:28px 22px}}


/* Review submission form inside the product modal */
.review-form{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}

.review-form h5{font-family:var(--f-d);font-size:.94rem;color:#fff;margin:0 0 10px}

.star-input{display:flex;gap:4px;margin-bottom:10px}

.star-input button{background:none;border:none;padding:2px;cursor:pointer;font-size:18px;color:var(--line);transition:color .15s}

.star-input button.filled,.star-input button:hover{color:var(--ember-soft)}

.review-form textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:#fff;font-family:var(--f-b);font-size:.88rem;min-height:80px;resize:vertical}

.review-form textarea:focus{outline:none;border-color:rgba(201,204,210,.5);background:rgba(255,255,255,.04)}

.review-login-note{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--glass-2);border:1px solid var(--line-soft);color:var(--mist);font-size:.85rem;display:flex;align-items:center;gap:8px}

.review-login-note a{color:var(--volt-soft);font-weight:600;text-decoration:none}

.review-msg{margin-top:8px;font-size:.83rem}

.review-msg.ok{color:var(--good)}
.review-msg.err{color:#ff8b8b}


/* Minimal chrome for admin.html / order-success.html (no hero/nav-scroll needed) */
.simple-header{position:relative;z-index:1;padding:22px 0;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}

.simple-header .hdr-inner{max-width:var(--max-w);margin:0 auto;padding:0 24px}

.page-shell{position:relative;z-index:1;max-width:var(--max-w);margin:0 auto;padding:48px 24px 96px}

.admin-tab-btn.active,.admin-subtab-btn.active{background:linear-gradient(135deg,var(--ember),var(--ember-soft));color:#17171a;border-color:transparent}

.admin-section.active{display:block}

.admin-panel{padding:22px;margin-bottom:20px}

.admin-panel h3{color:#fff;font-size:1.05rem;margin-bottom:16px;display:flex;align-items:center;gap:8px}

.um-head{display:flex;align-items:center;gap:14px;padding:24px 26px;border-bottom:1px solid var(--line-soft);background:linear-gradient(135deg,rgba(201,204,210,.08),transparent 60%)}

.um-avatar{width:52px;height:52px;border-radius:50%;border:2px solid var(--line);flex-shrink:0}

.um-head-meta{flex:1;min-width:0}

.um-head-name{color:#fff;font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:9px}

.um-head-id{color:var(--mist-dim);font-family:var(--f-m);font-size:11.5px;margin-top:2px}

.um-dup-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(0,0,0,.18);border:1px solid var(--line-soft);border-radius:9px;padding:8px 12px;font-size:.83rem}

.um-dup-row .tags{display:flex;gap:6px}

.um-history-row .when{flex-shrink:0;font-family:var(--f-m);font-size:11px;color:var(--mist-dim)}

.um-ban-actions .sm-btn.danger{background:rgba(201,204,210,.12);border-color:rgba(201,204,210,.35);color:var(--ember-soft)}

.um-ban-actions .sm-btn.danger:hover{background:rgba(201,204,210,.2)}

.lic-machine .plat{color:var(--mist-dim)}


/* ── Support tickets (tickets.html) ──────────────────────────────────── */
.ticket-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid var(--line-soft);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,transform .2s}

.ticket-row:hover{border-color:var(--line);transform:translateY(-1px)}

.ticket-msg{padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft)}

.ticket-msg-admin{background:rgba(88,101,242,.08);border-color:rgba(88,101,242,.25)}

.admin-form .field{flex:1;min-width:150px}

/* Global dark-themed <select> - without this, every dropdown fell back to
   the browser's native (light/white) chrome, clashing hard with the rest of
   the admin UI. appearance:none strips that native chrome; the arrow is a
   plain inline SVG so no extra asset/request is needed. `option` styling is
   best-effort only (browsers vary in how much of the open dropdown list
   itself can be restyled), but the closed control - what's visible almost
   all the time - matches the theme fully. */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:rgba(255,255,255,.02);color:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 32px 9px 11px;font-family:var(--f-b);font-size:.85rem;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%239a9aa6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px}

select:focus{outline:none;border-color:rgba(201,204,210,.5)}

select option{background:var(--carbon);color:#fff}

.admin-form .field.check{display:flex;align-items:center;gap:8px;flex-direction:row;min-width:auto}

.admin-form .field.check label{margin:0}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-family:var(--f-m);text-transform:uppercase;letter-spacing:.03em}

.badge.on{background:rgba(55,214,122,.12);color:var(--good);border:1px solid rgba(55,214,122,.3)}

.badge.off{background:rgba(255,255,255,.04);color:var(--mist-dim);border:1px solid var(--line)}

.badge.pending{background:rgba(255,184,107,.12);color:var(--warn);border:1px solid rgba(255,184,107,.3)}

.badge.paid{background:rgba(55,214,122,.12);color:var(--good);border:1px solid rgba(55,214,122,.3)}

.badge.refunded{background:rgba(201,204,210,.12);color:var(--ember-soft);border:1px solid rgba(201,204,210,.3)}

.badge.danger{background:rgba(201,204,210,.12);color:var(--ember-soft);border:1px solid rgba(201,204,210,.3)}

.badge.info{background:rgba(45,212,191,.12);color:var(--volt-soft);border:1px solid rgba(45,212,191,.3)}

.badge.low{background:rgba(255,255,255,.04);color:var(--mist-dim);border:1px solid var(--line)}

.badge.high{background:rgba(201,204,210,.14);color:var(--ember-soft);border:1px solid rgba(201,204,210,.35)}

.admin-empty{color:var(--mist-dim);font-size:.87rem;padding:20px;text-align:center}

.admin-err{color:#ff8b8b;font-size:.85rem;margin-top:8px}


/* ── Admin UI foundation (js/adminUi.js) - toasts, confirm dialog, sortable
   tables, paginator, filter bar, generic modal, skeleton loading, hand-drawn
   SVG charts. Same tokens/components as the rest of the admin panel above -
   additive only, no new visual language. */
.admin-toast-stack{position:fixed;top:calc(var(--hdr, 76px) + 14px);right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;pointer-events:none}

.admin-toast.show{opacity:1;transform:translateX(0)}

.admin-toast-success i{color:var(--good)}

.admin-toast-error i{color:var(--ember-soft)}

.admin-toast-info i{color:var(--volt-soft)}

.btn.danger{background:linear-gradient(135deg,var(--ember),var(--ember-soft));box-shadow:0 14px 36px rgba(201,204,210,.28)}

@keyframes adminSkeletonShine{0%{background-position:100% 0}100%{background-position:0 0}}

.admin-search-results.show{display:block}

@media(max-width:860px){.admin-search-wrap input,.admin-search-wrap input:focus{width:100%}.admin-search-wrap{display:none}}

@media(max-width:640px){
  .admin-toast-stack{left:12px;right:12px}
  .admin-toast{max-width:none}
  .admin-filter-search{min-width:0;width:100%}
}


/* order-success.html */
.order-status-card{max-width:640px;margin:60px auto 0;padding:44px 40px;text-align:center}

.order-status-card h2{font-size:clamp(22px,2.6vw,28px)}

.order-status-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:26px}

.order-status-icon.pending{background:rgba(255,184,107,.12);color:var(--warn);border:1px solid rgba(255,184,107,.3)}

.order-status-icon.paid{background:rgba(55,214,122,.12);color:var(--good);border:1px solid rgba(55,214,122,.3)}

.order-status-icon.error{background:rgba(201,204,210,.12);color:var(--ember-soft);border:1px solid rgba(201,204,210,.3)}

.order-status-icon.spin i{animation:spin 1.4s linear infinite}

.order-items-list{text-align:left;margin:20px 0;padding:14px 16px;background:rgba(0,0,0,.2);border:1px solid var(--line-soft);border-radius:12px}

.order-items-list .oi-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:.88rem;color:#dcdce2}

.order-items-list .oi-tot{border-top:1px solid var(--line);margin-top:8px;padding-top:8px;font-weight:700;color:#fff;font-family:var(--f-m)}


/* ── PHASE 6 — VISUAL/CONTENT UPGRADE (Apple-style expansion pass) ─────── */

/* App showcase: the real Tweaker control-panel screenshot, framed as a
   chrome-less floating app window with an ember glow, not a raw <img>. */
.showcase-frame{position:relative;margin-top:44px}

.showcase-frame::before{content:"";position:absolute;inset:-10% -6%;background:radial-gradient(60% 60% at 50% 28%,rgba(201,204,210,.16),transparent 70%);filter:blur(36px);pointer-events:none;z-index:-1}

.showcase-window{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#000;box-shadow:0 50px 120px rgba(0,0,0,.55),0 0 0 1px rgba(201,204,210,.14) inset,0 0 100px rgba(201,204,210,.09);transition:transform .35s cubic-bezier(.2,.9,.3,1)}

.showcase-window::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--ember-soft),transparent);opacity:.75;z-index:2;pointer-events:none}

.showcase-window img{width:100%;display:block}

.showcase-points{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}

@media(max-width:980px){.showcase-points{grid-template-columns:repeat(2,1fr)}}

@media(max-width:560px){.showcase-points{grid-template-columns:1fr}}


/* Product tier guide: static, honest guidance copy (no prices/ids — those
   stay live-only in #prodGrid) helping players pick between tiers. */
.tier-guide{margin:28px 0 36px}

.tier-guide h3{color:#fff;font-size:1.1rem;margin-bottom:16px}

.tier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}

.tier-card{background:var(--glass-2);border:1px solid var(--line-soft);border-radius:14px;padding:18px;transition:transform .25s cubic-bezier(.2,.9,.3,1),border-color .25s}

.tier-card:hover{transform:translateY(-4px);border-color:rgba(201,204,210,.25)}

.tier-card i{font-size:17px;color:var(--ember-soft);margin-bottom:12px;display:block}

.tier-card .tier-for{font-family:var(--f-m);font-size:10.5px;color:var(--ember-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}

.tier-card h5{color:#fff;font-size:.94rem;margin-bottom:6px;font-family:var(--f-d)}

.tier-card p{color:var(--mist);font-size:.84rem;line-height:1.55}


/* How it works: 3-step process strip inside the "warum" (features) section. */
.how-steps-wrap{margin-bottom:36px}

.how-title{font-size:1.1rem;color:#fff;margin-bottom:18px}

.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.how-step{padding:22px 20px;border:1px solid var(--line-soft);border-radius:16px;background:var(--glass-2)}

.how-num{font-family:var(--f-m);font-size:2rem;font-weight:700;line-height:1;margin-bottom:10px;background:linear-gradient(135deg,var(--ember),var(--ember-soft));-webkit-background-clip:text;background-clip:text;color:transparent}

.how-step h4{font-size:.98rem;margin-bottom:8px}

.how-step p{color:var(--mist);font-size:.87rem;line-height:1.6}

@media(max-width:860px){.how-steps{grid-template-columns:1fr}}


/* Real feedback / social proof: aggregate rating + testimonial cards, both
   fetched live from the real reviews API by js/testimonials.js — never
   hardcoded counts. */
.feedback-stat{display:flex;align-items:center;gap:18px;padding:20px 26px;margin:8px 0 30px;flex-wrap:wrap}

.feedback-stat .fs-num{font-family:var(--f-m);font-size:2.3rem;font-weight:700;color:#fff;display:flex;align-items:baseline;gap:4px}

.feedback-stat .fs-num .acc{color:var(--ember-soft);font-size:1.5rem}

.feedback-stat .fs-lbl{color:var(--mist);font-size:.9rem;line-height:1.5}

.feedback-write-review{padding:26px 28px;margin:0 0 34px}

.feedback-write-review h3{color:#fff;font-size:1.05rem;margin-bottom:14px;display:flex;align-items:center;gap:8px}

.feedback-write-review .field label{display:block;color:var(--mist);font-size:.85rem;margin-bottom:8px}

.feedback-write-review select{width:100%;max-width:360px}

.feedback-stat .fs-lbl b{color:#fff;font-family:var(--f-m);font-weight:700}

.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}

/* InfiniteMovingCards - two rows of testimonial cards scrolling in opposite
   directions, the new default feedback preview (see js/testimonials.js
   renderMarquee()). Each row's track holds the review list twice back-to-
   back and loops via `translateX(-50%)` - at -50% the track shows exactly
   the second copy where the first began, so the loop point is invisible. */
.tc-marquee{display:flex;flex-direction:column;gap:16px;margin-bottom:8px}
.tc-marquee-row{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tc-marquee-track{display:flex;gap:18px;width:max-content;animation:tcMarqueeScroll 38s linear infinite}
.tc-marquee-track.tc-marquee-reverse{animation-direction:reverse}
.tc-marquee-row:hover .tc-marquee-track{animation-play-state:paused}
.tc-marquee-card{flex:0 0 auto;width:300px}
@keyframes tcMarqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.tc-marquee-track{animation:none}.tc-marquee-clone{display:none}}

.feedback-showmore{display:flex;margin:28px auto 0}

.testimonial-card{padding:20px}

.tc-stars{display:flex;gap:2px;margin-bottom:12px}

.tc-stars i{font-size:12px;color:var(--ember-soft)}

.tc-text{color:#dcdce2;font-size:.91rem;line-height:1.65;font-style:italic}

.tc-meta{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

.tc-who{display:flex;align-items:center;gap:8px;min-width:0}

.tc-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,.06)}

.tc-author{color:#fff;font-weight:600;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-author-link{display:inline-flex;align-items:center;gap:8px;min-width:0;text-decoration:none;transition:opacity .2s}
.tc-author-link:hover{opacity:.8}

.tc-product{color:var(--mist-dim);font-size:10.5px;font-family:var(--f-m);text-transform:uppercase;letter-spacing:.03em}


/* FAQ accordion (native <details>/<summary> — no extra JS state needed). */
.faq-block{padding:28px 30px}

.faq-block h3{color:#fff;font-size:1.1rem;margin-bottom:18px}

.faq-list{display:flex;flex-direction:column;gap:10px}

.faq-item{border:1px solid var(--line-soft);border-radius:12px;background:rgba(255,255,255,.02);overflow:hidden}

.faq-item summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;color:#fff;font-size:.9rem;transition:background .2s}

.faq-item summary:hover{background:rgba(255,255,255,.03)}

.faq-item summary::-webkit-details-marker{display:none}

.faq-item summary .chev{transition:transform .25s cubic-bezier(.2,.9,.3,1);color:var(--ember-soft);flex-shrink:0;font-size:12px}

.faq-item[open] summary .chev{transform:rotate(180deg)}

.faq-item .faq-a{padding:0 16px 16px;color:var(--mist);font-size:.87rem;line-height:1.65;animation:faqFade .25s ease}

@keyframes faqFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}


/* ── PHASE 7 — App tour (scroll-scrubbed) + premium product-card visuals ── */

/* Product card / modal visual anchor: replaces the plain centered icon with
   either a framed real-app-screenshot (bestseller products, driven by the
   live `bestseller` flag - see js/products.js productVisualHTML()) or a
   calmer version of the old icon badge for everything else. Owner feedback
   was that the old icon treatment read as "dumb 3D animation", so the looping
   spin/pulse/bob keyframes are switched off specifically inside this new
   card context (modal + cart mini-icons keep their original animated icons -
   only the grid cards change here). */
.prod-visual{position:relative;height:172px;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);background:#000}

.prod-visual.icon{background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01));display:flex;align-items:center;justify-content:center}

.prod-visual.icon .icon-wrap{width:100%;height:100%;border:none;background:transparent}

.prod-visual.icon .pulse,.prod-visual.icon .spin-slow,.prod-visual.icon .bob{animation:none}

.prod-visual.shot{box-shadow:0 18px 40px rgba(0,0,0,.35) inset}

.prod-visual .pv-chrome{position:absolute;top:0;left:0;right:0;height:22px;background:linear-gradient(180deg,rgba(20,20,26,.94),rgba(20,20,26,.6));display:flex;align-items:center;justify-content:flex-end;gap:5px;padding:0 10px;z-index:2}

.prod-visual .pv-chrome span{width:6px;height:6px;border-radius:50%;display:block}

.prod-visual .pv-chrome span:nth-child(1){background:#ff5f57}

.prod-visual .pv-chrome span:nth-child(2){background:#febc2e}

.prod-visual .pv-chrome span:nth-child(3){background:#28c840}

.prod-visual.shot img{position:absolute;left:0;right:0;top:22px;bottom:0;width:100%;height:calc(100% - 22px);object-fit:cover;object-position:top;transition:transform .5s cubic-bezier(.2,.9,.3,1)}

.prod-visual.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.4));pointer-events:none;z-index:1}

.card:hover .prod-visual.shot img{transform:scale(1.07)}

.prod-visual.modal-visual{border-radius:14px}


/* HeroParallax (App tour + Games, see #gamesHp below): rows of cards sit in
   normal document flow (not pinned/scroll-jacked like the old Apple-style
   sticky version) and slide sideways in alternating directions while easing
   out of a slight 3D tilt as the block scrolls through the viewport - GSAP
   ScrollTrigger scrub tied to the wrap's own start/end, see
   initHeroParallax() in js/aceternity.js. Only one markup is needed: JS adds
   .hp-active (and the perspective/nowrap rows below) when it actually wires
   up the scroll-scrub; without it (narrow viewport, reduced motion, or no
   GSAP) the rows just wrap normally as a static grid - no separate fallback
   markup to keep in sync. */
.hp-wrap{overflow:hidden;padding:36px 0 44px}

.hp-rows{display:flex;flex-direction:column;gap:26px}

.hp-row{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}

.hp-wrap.hp-active{perspective:1500px}

.hp-wrap.hp-active .hp-row{flex-wrap:nowrap}

.hp-card{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.015));flex:0 0 auto;width:min(320px,80vw);transition:transform .4s cubic-bezier(.2,.9,.3,1),border-color .4s,box-shadow .4s}

.hp-card:hover{transform:translateY(-6px);border-color:var(--accent-a55,rgba(201,204,210,.4));box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 44px -12px var(--accent-glow,rgba(201,204,210,.4))}

.hp-card-visual{position:relative;height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(120% 100% at 30% 0%,var(--accent-a22,rgba(201,204,210,.18)),transparent 65%),linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}

.hp-card-shot{position:relative;height:190px;overflow:hidden;background:#000}

.hp-card-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}

.hp-card-body{padding:18px 20px 22px;position:relative;z-index:1}

.hp-card-body h4{font-size:1.05rem;color:#fff;display:flex;align-items:center;gap:8px}

.hp-card-body h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent,var(--ember));box-shadow:0 0 0 4px var(--accent-a22,rgba(201,204,210,.18))}

.hp-card-body p{color:var(--mist);font-size:.87rem;line-height:1.6;margin-top:8px}

.hp-card-num{font-family:var(--f-m);font-size:11px;color:var(--ember-soft);letter-spacing:.08em;display:block;margin-bottom:2px}

@media(max-width:560px){.hp-card{width:100%}}

@media(prefers-reduced-motion:reduce){.hp-card{transition:none}}

/* Bigger, more prominent section title for these two HeroParallax sections
   specifically - the large-title language from the original Aceternity demo,
   scoped to just these two so every other section's .sec-head is untouched. */
#apptour .sec-head h2,#games .sec-head h2{font-size:clamp(2rem,5vw,3.4rem)}


/* ── PHASE 8 — connection-verifying splash ───────────────────────────────
   The page-load version of this (shown once per session before the site
   even rendered) was removed on owner instruction - these rules now exist
   solely for js/connectionCheck.js's reusable interstitial, shown right
   before a Stripe redirect (a real async wait, not decorative page-load
   fakery). Keep this CSS even though index.html's own splash markup is
   gone. */
.splash-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 100% at 50% 30%,var(--carbon) 0%,var(--void) 75%);opacity:1;transition:opacity .32s ease}

.splash-screen.splash-hide{opacity:0;pointer-events:none}

.splash-inner{display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 24px;text-align:center}

.splash-logo{width:56px;height:56px;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(201,204,210,.25),0 0 0 1px rgba(255,255,255,.08) inset}

.splash-logo img{width:100%;height:100%;object-fit:cover;display:block}

.splash-bar{width:180px;height:3px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}

.splash-bar-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--ember),var(--ember-soft));transition:width .3s cubic-bezier(.2,.9,.3,1)}

/* MultiStepLoader-style step list - each li walks pending -> active -> done
   as js/connectionCheck.js's showConnectionCheck() advances through it. */
.splash-steps{display:flex;flex-direction:column;gap:11px;text-align:left}

.splash-step{display:flex;align-items:center;gap:10px;font-family:var(--f-m);font-size:12.5px;letter-spacing:.02em;color:var(--mist-dim);transition:color .25s}

.splash-step-icon{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .25s,background .25s,box-shadow .25s}

.splash-step-icon i{font-size:9px;opacity:0;transform:scale(.5);transition:opacity .2s,transform .2s;color:#04211d}

.splash-step.active{color:var(--ink)}

.splash-step.active .splash-step-icon{border-color:var(--ember-soft);box-shadow:0 0 0 3px rgba(240,242,245,.15);animation:splashStepPulse 1s ease-in-out infinite}

.splash-step.done{color:var(--volt-soft)}

.splash-step.done .splash-step-icon{border-color:var(--volt);background:var(--volt)}

.splash-step.done .splash-step-icon i{opacity:1;transform:scale(1)}

@keyframes splashStepPulse{0%,100%{box-shadow:0 0 0 3px rgba(240,242,245,.15)}50%{box-shadow:0 0 0 6px rgba(240,242,245,.05)}}

@media(prefers-reduced-motion:reduce){.splash-screen{display:none!important}.splash-step.active .splash-step-icon{animation:none}}


/* ── PHASE 8 — mobile audit fixes (systematic pass at ~375/414/768px) ────
   1) Header was overflowing horizontally on real phone widths: below the
      1440px nav breakpoint the header still shows lang switcher + auth
      widget + settings gear + cart + burger all in one row, and
      .auth-login's "Login with Discord" label has white-space:nowrap, which
      floors its min width and defeats flexbox shrinking - on a 375-414px
      screen the row simply doesn't fit and real content gets pushed off
      the right edge / clipped. Fixed by compacting every control in that
      row (icon-only auth button, smaller icon buttons, tighter lang
      switcher, hidden brand tagline) below 480px.
   2) .settings-dd (cookie-consent dropdown) and .cart-panel were both
      absolutely/fixed-positioned with a hardcoded pixel width (290px /
      380px) anchored to the right edge of a header control - wider than a
      375px viewport, so part of each panel rendered off-screen. Fixed by
      switching both to viewport-relative left/right margins below 480px.
   3) .mobile-nav had no overflow-y:auto - on a short/landscape mobile
      viewport its (now longer, since Support+Admin were added) link list
      could exceed 100vh with no way to scroll to the clipped links. Added
      scroll capability + breathing-room padding.
   4) Form/textarea inputs on cart coupon / contact / review forms were
      below 16px font-size, which triggers iOS Safari's auto-zoom-on-focus -
      not a rendering break, but a real "doesn't look right on my phone"
      issue when the whole page suddenly zooms in on tapping a field. Bumped
      to 16px on mobile only. */
@media(max-width:480px){
  header{padding:0 12px}
  .brand{gap:8px}
  .brand-logo{width:34px;height:34px}
  .brand-text .bt-tag{display:none}
  .brand-text .bt-title{font-size:.86rem}
  .nav-right{gap:5px}
  .lang-sw{padding:2px;gap:2px}
  .lang-btn{padding:5px 6px;font-size:10.5px}
  .auth-login{padding:8px}
  .auth-login span{display:none}
  .auth-user{padding:4px 6px 4px 4px}
  .auth-name{max-width:52px}
  .auth-admin-badge{display:none}
  .icon-lnk{width:32px;height:32px}
  .icon-lnk i{font-size:13px}
  .cart-cnt{top:-4px;right:-4px;min-width:16px;height:16px;font-size:9px}
  .burger{width:32px;height:32px}
  .settings-dd{position:fixed;top:66px;left:12px;right:12px;width:auto}
  .cart-panel{left:12px;right:12px;width:auto}
  .comm-banner{padding:40px 22px}
}

.mobile-nav{overflow-y:auto;padding:70px 0 24px}

@media(max-width:600px){
  .field input,.field textarea,.coupon-row input,.review-form textarea{font-size:16px}
}


/* ── PHASE 9 — ltweaks.lol-inspired visual pass (Torres colors, not a copy)
   Floating pill nav, bolder hero typography, pill buttons/badges throughout,
   a new supported-games section with per-game accent tinting, a real
   download CTA wired to /api/download, and professional legal modals that
   replace the old scroll-to sections. See index.html for the corresponding
   markup changes (nav-cta, .hero-followup, #games, #download,
   #legalModalOverlay, restructured footer). ────────────────────────────── */

/* Floating pill nav: same header element/ids/z-index/scroll behavior as
   before (nothing in nav.js changed) - just inset from the viewport edges
   and rounded into a pill instead of a flush full-width bar. */
header{top:14px;left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 28px);max-width:1320px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(17,17,22,.72),rgba(10,10,13,.62));box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.04) inset;border-bottom:none}

header.scrolled{top:10px;background:linear-gradient(180deg,rgba(14,14,18,.92),rgba(8,8,11,.88));box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 0 1px rgba(201,204,210,.14) inset}

@media(max-width:640px){header{width:calc(100% - 16px);top:10px;border-radius:26px}}


/* Nav hover polish — replaces the plain underline with a tactile pill
   highlight (ember glow + soft fill) that fades in on hover/active. */
nav#mainNav a{margin-left:4px;padding:9px 16px;border-radius:999px;transition:color .25s,background .3s,box-shadow .3s}

nav#mainNav a::after{display:none}

nav#mainNav a:hover,nav#mainNav a.active{color:#fff;background:linear-gradient(135deg,rgba(201,204,210,.16),rgba(240,242,245,.07));box-shadow:0 0 0 1px rgba(201,204,210,.28) inset,0 8px 20px -8px rgba(201,204,210,.5)}

/* Navbar hover mega-menu — Products/Help get a dropdown panel, every other
   nav link stays a plain anchor. .nav-item wraps the trigger <a> + panel so
   :hover/:focus-within can reveal it without any JS show/hide state. */
.nav-item{position:relative;display:flex;align-items:center}

.nav-dropdown{position:absolute;top:calc(100% + 10px);left:50%;min-width:260px;padding:10px;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;z-index:120}

.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);transition:opacity .2s ease,transform .2s ease}

.nav-dd-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:#d8d8de;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}

.nav-dd-item:hover{background:rgba(255,255,255,.05);color:#fff}

.nav-dropdown-help .nav-dd-item i{width:16px;text-align:center;color:var(--ember-soft)}

.nav-dd-icon{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center}

.nav-dd-icon svg{width:22px;height:22px}

.nav-dd-txt{display:flex;flex-direction:column;flex:1;min-width:0}

.nav-dd-name{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav-dd-price{font-size:.74rem;color:var(--mist-dim);font-family:var(--f-m)}


/* Prominent pill CTA on the right of the nav, ltweaks-style — desktop only
   (hidden together with #mainNav below the existing 1440px breakpoint so it
   never contributes to the mobile header-overflow issue documented above). */
.nav-cta{display:inline-flex;align-items:center;gap:8px;margin-left:16px;padding:10px 18px;border-radius:999px;background:linear-gradient(135deg,var(--ember),var(--ember-soft));color:#17171a;font-weight:700;font-size:.87rem;text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:0 10px 26px rgba(201,204,210,.28);transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s}

.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(201,204,210,.4)}

.nav-cta i{font-size:11px}

@media(max-width:1440px){.nav-cta{display:none}}


/* More rounded-pill shapes throughout, per the new visual direction. */
.btn,.sm-btn,.icon-lnk{border-radius:999px}

.eyebrow{padding:6px 14px 6px 10px;border-radius:999px;background:rgba(201,204,210,.08);border:1px solid rgba(201,204,210,.18)}


/* Hero: bigger, bolder headline + a short punchy secondary-weight follow-up
   line beneath it (ltweaks' "Actually fast. Actually work." pattern, in our
   own honest wording — the existing .hero-sub paragraph still carries the
   fuller explanation below this). */
.hero h1{font-size:clamp(42px,6.4vw,74px)}

.hero-followup{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;font-family:var(--f-d);font-weight:600;font-size:clamp(17px,2vw,22px);color:var(--mist)}

.hero-followup span{color:var(--ember-soft);opacity:.9}


/* ── Supported games section ──────────────────────────────────────────
   Five per-game cards, image-forward via a big FA icon (or the site's own
   real FiveM/GTA assets for FiveM specifically — no official third-party
   game art/logos anywhere here, see index.html comments). Each card carries
   its own --accent custom properties inline; hovering a card tints the
   whole section's ambient background glow to match via initGamesSection()
   in js/fx.js, then fades back on mouseleave. */
#games{position:relative}

#games::before{content:"";position:absolute;left:-6%;right:-6%;top:-10%;bottom:-10%;background:radial-gradient(55% 55% at 50% 15%,var(--games-glow,rgba(201,204,210,.1)),transparent 70%);filter:blur(54px);pointer-events:none;z-index:-1;transition:background .6s ease}

.game-icon-img{position:relative;z-index:1;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.5));transition:transform .4s cubic-bezier(.2,.9,.3,1)}

.game-icon{position:relative;z-index:1;font-size:52px;color:var(--accent,var(--ember-soft));filter:drop-shadow(0 10px 22px rgba(0,0,0,.4));transition:transform .4s cubic-bezier(.2,.9,.3,1)}

.hp-card:hover .game-icon-img,.hp-card:hover .game-icon{transform:scale(1.1) translateY(-4px)}

/* Real third-party game logos (Valorant/CS:GO/Fortnite/Minecraft) are wide
   wordmarks with wildly varying native colors (CS2's is near-black) - unlike
   FiveM's square app icon (.game-icon-img above), forcing them into a fixed
   square box either crushes them illegibly thin or loses them against the
   dark card background. No background chip here (owner wanted the logos on
   a transparent background, not boxed) - stacked drop-shadows instead give
   every logo a soft white halo that lifts it off the dark card regardless of
   its own native color, without hiding any of it behind a solid fill. */
.game-logo-mark{position:relative;z-index:1;max-width:172px;max-height:74px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,255,255,.5)) drop-shadow(0 0 24px rgba(255,255,255,.22)) drop-shadow(0 10px 22px rgba(0,0,0,.5));transition:transform .4s cubic-bezier(.2,.9,.3,1)}

.hp-card:hover .game-logo-mark{transform:scale(1.06) translateY(-3px)}

.game-badge-mini{position:absolute;right:12px;bottom:12px;width:26px;height:26px;object-fit:contain;opacity:.8;z-index:1}


/* ── Download section — "Download. Install. Done." ─────────────────────
   Real state from GET /api/download/info via js/download.js: either a
   working pill download button + real version/size/date, or an honest
   disabled "coming soon" state — never a fake/broken button. */
.download-panel{position:relative;overflow:hidden;padding:64px 48px;text-align:center}

/* BackgroundRippleEffect - a grid of cells behind the download CTA panel
   that highlights on hover and ripples outward from a click (see
   attachRippleGrid() in js/aceternity.js). Sits at z-index:0, below
   .download-inner's z-index:1, so clicks/hovers on the real button/text
   still reach them normally - the grid only reacts in the empty space
   around the content. */
.ac-ripple-grid{position:absolute;inset:0;display:grid;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(16,1fr);z-index:0}
.ac-ripple-cell{border:1px solid rgba(255,255,255,.035);transition:background .25s}
.ac-ripple-cell.ac-ripple-hover{background:rgba(201,204,210,.1)}
.ac-ripple-cell.ac-ripple-active{background:rgba(45,212,191,.24);transition:background .05s}
@media (max-width:700px){.ac-ripple-grid{grid-template-columns:repeat(8,1fr)}}
@media (prefers-reduced-motion: reduce){.ac-ripple-cell{transition:none}}

.download-inner{position:relative;z-index:1;max-width:640px;margin:0 auto}

.download-inner h2{font-size:clamp(34px,5vw,58px);line-height:1.03;margin-top:14px;background:linear-gradient(135deg,#fff 30%,var(--ember-soft) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

.download-inner p{color:var(--mist);margin-top:16px;font-size:1.04rem;line-height:1.7}

.download-cta{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:14px;min-height:56px;justify-content:center}

.download-loading{color:var(--mist-dim);font-family:var(--f-m);font-size:.85rem}

.download-btn{padding:16px 34px;font-size:1.02rem}

.download-btn i{font-size:18px}

.download-meta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;color:var(--mist);font-family:var(--f-m);font-size:.82rem}

.download-meta i{color:var(--ember-soft);margin-right:5px}

.download-license-note{margin-top:12px;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:rgba(255,184,107,.1);border:1px solid rgba(255,184,107,.3);color:var(--warn);font-size:.82rem;text-decoration:none;cursor:pointer;transition:all .2s}

.download-license-note:hover{background:rgba(255,184,107,.18);border-color:rgba(255,184,107,.5);transform:translateY(-1px)}

.download-license-note i{font-size:12px}


/* ── Legal modals (AGB / Privacy / Contact) — footer-triggered, replacing
   the old scroll-to #agb/#datenschutz/#kontakt sections. Reuses the same
   .overlay/.modal chrome as the rest of the site's modals for consistency,
   with a dedicated head/icon treatment aimed at reading more "official". */
.legal-modal-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}

.legal-modal-icon{width:44px;height:44px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(201,204,210,.22),rgba(201,204,210,.05));border:1px solid rgba(201,204,210,.3);color:var(--ember-soft);font-size:18px}

.legal-modal-head h3{color:#fff;font-size:1.2rem}

.legal-modal-sub{color:var(--mist-dim);font-size:.83rem;margin-top:3px}

.legal-modal-close{margin-left:auto;flex-shrink:0}

.legal-modal-body{max-height:56vh;overflow-y:auto;padding-right:6px;scrollbar-width:thin}

.legal-modal-body .contact-quick{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}


/* Footer restructure: legal/company links dropped to three columns (Legal
   column removed, its links moved to a small row at the very bottom of the
   footer next to the copyright, opening the modals above instead of
   scrolling to a page section). */
.footer-grid{grid-template-columns:1.4fr 1fr 1fr}

.footer-legal-links{display:flex;gap:16px;flex-wrap:wrap}

.footer-legal-links a{color:var(--mist-dim);font-size:.81rem;text-decoration:none;cursor:pointer;transition:color .2s}

.footer-legal-links a:hover{color:#fff}

@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}

@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}


/* ── PHASE 10 — click-to-reveal About/Help ───────────────────────────────
   About and Help are click-to-reveal: a compact always-visible teaser +
   button, full content in a modal (reusing the .overlay/.modal +
   legal-modal-* chrome introduced for the footer legal modals, via a new
   standalone js/revealModals.js — js/legalModal.js itself is untouched);
   section reorder (community last, download after produkte) is a
   markup-only change in index.html, no new CSS needed for that part. The
   games section itself now shares the HeroParallax .hp-* rules above with
   the app-tour section. */


/* Compact click-to-reveal teaser (About / Help): mirrors .sec-head's type
   scale so it reads like a normal section header, just left-aligned with a
   single lead line + reveal button instead of the section's full content. */
.teaser-block{max-width:640px}

.teaser-block h2{font-size:clamp(26px,3.6vw,40px);margin-top:10px;line-height:1.12}

.teaser-lead{color:var(--mist);margin-top:14px;font-size:1.02rem;line-height:1.65}

.teaser-block .btn{margin-top:24px}


/* About/Help modals reuse .modal + .legal-modal-head/-icon/-sub/-close/-body
   from the legal-modal system for visual consistency, just wider to fit the
   two-column about-grid / help-grid content comfortably. Content moved into
   these modals intentionally drops its old .reveal/.rl/.rr/.dN scroll-reveal
   classes — an IntersectionObserver never fires for content inside a
   display:none overlay, so keeping those classes would leave the modal body
   permanently stuck at opacity:0 the first time it's opened. */
.modal.about-modal{width:min(880px,100%)}


/* ── PHASE 11 — animated hero background, cart panel overhaul, admin
   dashboard overview + licenses tab, checkout-redirect connection-check
   interstitial (markup shared with .splash-screen, see js/connectionCheck.js
   for the JS side). PDF invoice redesign lives entirely in js/checkout.js
   (jsPDF drawing calls), no CSS involved there. ─────────────────────────── */

/* ── BRAND INTRO VIDEO (top of page, above #home) ─────────────────────────
   Real looping brand clip (owner-provided), muted/loop/playsinline, served
   as WebM+MP4 (transcoded down from a 10MB+ GIF source to ~0.5MB each via
   ffmpeg - same visual, order-of-magnitude lighter on load) with a static
   JPG poster so nothing plays until it's actually needed. Playback itself is
   deferred to JS (see initBrandIntro() in fx.js): preload="none" + no
   autoplay attribute means zero network/decode cost until the section
   scrolls into view, and prefers-reduced-motion gets the poster frame only,
   never a moving video. The clip-path wipe + scale-settle on scroll-in is a
   one-time entrance, not a scroll-scrubbed effect like the games/app-tour
   sections - simpler here since it's a single hero moment, not a sequence.
   Framed like every other screenshot on the site (.showcase-window,
   .hero-shot-frame: rounded corners, border, black-backed drop shadow with
   an ember inset glow) instead of a raw full-bleed black bar - a full-bleed
   video flush under the fixed header had no breathing room and read as
   broken/unfinished rather than a deliberate hero moment. padding-top clears
   the fixed header (position:fixed, so this section sat partly underneath
   it before); the caption overlay gives the clip an actual purpose on the
   page instead of just being a loop with no context. */
/* Hidden from the normal homepage flow by default - js/main.js adds
   .intro-active (and only then calls initBrandIntro()) when the page was
   reached via a direct #intro link, so that link keeps working unchanged. */
.brand-intro-section{display:none;position:relative;width:100%;padding:calc(var(--hdr) + 40px) 20px 0;box-sizing:border-box;background:radial-gradient(120% 100% at 50% 0%,rgba(201,204,210,.07),transparent 62%)}

.brand-intro-section.intro-active{display:block}

.brand-intro-inner{position:relative;max-width:var(--max-w);margin:0 auto}

.brand-intro-media{position:relative;width:100%;aspect-ratio:16/9;max-height:min(50vh,600px);margin:0 auto;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:#000;box-shadow:0 50px 120px rgba(0,0,0,.55),0 0 0 1px rgba(201,204,210,.14) inset,0 0 100px rgba(201,204,210,.1);clip-path:inset(0 50% 0 50% round var(--r-lg));transition:clip-path 1.1s cubic-bezier(.16,1,.3,1)}

.brand-intro-media.visible{clip-path:inset(0 0 0 0 round var(--r-lg))}

.brand-intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.3s cubic-bezier(.16,1,.3,1)}

.brand-intro-media.visible .brand-intro-video{transform:scale(1)}

.brand-intro-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(201,204,210,.06) 50%,transparent);mix-blend-mode:screen;pointer-events:none}

.brand-intro-vignette{position:absolute;inset:0;box-shadow:inset 0 0 140px 40px rgba(7,7,11,.7);pointer-events:none}

.brand-intro-caption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 28px 26px;background:linear-gradient(0deg,rgba(7,7,11,.8),transparent);opacity:0;transform:translateY(10px);transition:opacity .5s ease .3s,transform .5s cubic-bezier(.16,1,.3,1) .3s}

.brand-intro-media.visible .brand-intro-caption{opacity:1;transform:none}

.brand-intro-caption p{color:#fff;font-family:var(--f-d);font-size:clamp(1rem,2vw,1.3rem);margin-top:8px;max-width:52ch}

@media(prefers-reduced-motion:reduce){.brand-intro-media{clip-path:inset(0 0 0 0 round var(--r-lg))}.brand-intro-video{transform:none;transition:none}.brand-intro-caption{opacity:1;transform:none;transition:none}}

@media(max-width:640px){.brand-intro-media{aspect-ratio:4/3}.brand-intro-caption{padding:12px 14px 14px}.brand-intro-caption p{font-size:.8rem;margin-top:4px}}

/* Gradient "wash" bridging the video card into the page background as the
   section scrolls out - driven by the same Motion scroll() call as the
   parallax fade on .brand-intro-media (see initBrandIntro() in fx.js), not
   a separate scroll listener. Starts fully transparent so it's invisible
   while the section is the focus; ember-tinted midtone keeps it feeling
   like part of the brand moment rather than a flat black bar. */
.brand-intro-fade{position:absolute;left:0;right:0;bottom:-1px;height:140px;pointer-events:none;opacity:0;background:linear-gradient(0deg,var(--void) 0%,rgba(201,204,210,.05) 55%,transparent 100%)}


/* ── TEAM SECTION (live Discord roster, grouped by role) ─────────────────
   Populated from GET /api/team - see initTeamSection() in fx.js. Card
   entrance uses Motion's stagger() for a real cascading reveal rather than
   the site's usual single-card .reveal spring, since this renders as one
   batch of DOM nodes after a fetch instead of scrolling into view
   incrementally like everything else. */
.team-loading{display:flex;justify-content:center;padding:40px 0;color:var(--mist-dim);font-size:22px}

.team-empty{text-align:center;padding:30px 0;color:var(--mist);font-size:.9rem}

.team-group{margin-top:30px}

.team-group:first-child{margin-top:8px}

.team-group-label{font-family:var(--f-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ember-soft);margin-bottom:14px;display:flex;align-items:center;gap:8px}

.team-group-label::after{content:"";flex:1;height:1px;background:var(--line)}

.team-group-desc{color:var(--mist);font-size:.86rem;line-height:1.6;margin:-8px 0 16px;max-width:60ch}

.team-section-compact .team-group-desc{font-size:.82rem}

.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}

.team-card{opacity:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 12px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(165deg,rgba(255,255,255,.03),rgba(255,255,255,.01));transition:transform .3s cubic-bezier(.2,.9,.3,1),border-color .3s}

.team-card:hover{transform:translateY(-4px);border-color:rgba(201,204,210,.3)}

.team-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(201,204,210,.35);box-shadow:0 10px 24px rgba(0,0,0,.4)}

.team-name{color:#fff;font-weight:600;font-size:.9rem}


/* Owner spotlight card - the single account flagged isSuperAdmin by
   functions/api/team.js, pulled out of the grid entirely and rendered above
   everything else so it visibly outranks the rest of the team, not just a
   bigger grid tile. Reuses the same radial-glow-behind-a-card language as
   the hero visual (.hero-visual::before/heroGlowPulse) for a consistent
   "alive focal point" treatment elsewhere on the page. */
.team-spotlight{position:relative;display:flex;align-items:center;gap:20px;padding:20px 26px;border-radius:18px;margin-bottom:22px;border:1px solid rgba(201,204,210,.3);background:linear-gradient(120deg,rgba(201,204,210,.1),rgba(255,255,255,.02) 60%);overflow:hidden;opacity:0}

.team-spotlight-glow{position:absolute;inset:-40% -10%;background:radial-gradient(45% 70% at 15% 50%,rgba(201,204,210,.28),transparent 70%),radial-gradient(35% 60% at 90% 20%,rgba(45,212,191,.14),transparent 70%);filter:blur(40px);z-index:0;pointer-events:none;animation:heroGlowPulse 8s ease-in-out infinite}

.team-spotlight-avatar{position:relative;z-index:1;width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--ember);box-shadow:0 0 0 5px rgba(201,204,210,.15),0 14px 34px rgba(0,0,0,.5);flex-shrink:0}

.team-spotlight-meta{position:relative;z-index:1;min-width:0}

.team-spotlight-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ember-soft);margin-bottom:6px}

.team-spotlight-tag i{color:#ffce54;display:inline-block;animation:crownBob 2.6s ease-in-out infinite}

@keyframes crownBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-2px) rotate(-6deg)}}

.team-spotlight-name{color:#fff;font-family:var(--f-d);font-weight:700;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.1}

.team-spotlight,.team-card{will-change:transform}


/* Leadership row: the two "Owner"-labeled role groups merged into one row,
   sized a step above the regular grid but clearly secondary to the
   spotlight above it. */
.team-leadership{margin-top:0}

.team-grid.leadership{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}

.team-card.lead{border-color:rgba(201,204,210,.22);background:linear-gradient(165deg,rgba(201,204,210,.06),rgba(255,255,255,.015))}

.team-card.lead .team-avatar{width:76px;height:76px;border-color:rgba(201,204,210,.5)}

.team-title{font-family:var(--f-m);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ember-soft);margin-top:4px}


/* Quieter presentation on owner instruction ("nicht so aufdringlich") -
   extra breathing room above/below so it doesn't compete with Download
   right above it, and everything scaled down a notch (smaller heading,
   smaller cards/avatars, tighter grid) so it reads as a quiet credibility
   note rather than a second hero moment. The spotlight card stays
   proportionally elevated within that compact footprint rather than
   growing into a second hero block. */
.team-section-compact{margin-top:12px;margin-bottom:12px}

.team-section-compact .sec-head h2{font-size:clamp(1.3rem,2.6vw,1.7rem)}

.team-section-compact .sec-head p{font-size:.88rem}

.team-section-compact .team-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}

.team-section-compact .team-card{padding:14px 10px;gap:8px}

.team-section-compact .team-avatar{width:48px;height:48px}

.team-section-compact .team-name{font-size:.82rem}

.team-section-compact .team-group{margin-top:22px}

.team-section-compact .team-spotlight{padding:16px 20px;gap:16px;margin-bottom:16px}

.team-section-compact .team-spotlight-avatar{width:64px;height:64px}

.team-section-compact .team-spotlight-name{font-size:clamp(1rem,2vw,1.2rem)}

.team-section-compact .team-grid.leadership{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}

.team-section-compact .team-card.lead .team-avatar{width:58px;height:58px}

@media(max-width:520px){.team-spotlight{flex-direction:column;text-align:center}}


/* ── FLOATING "TO THE TWEAKS" BUTTON (bottom-left) ────────────────────────
   Entrance animated with Anime.js (js/vendor/anime.min.js, self-hosted UMD
   build - same no-CDN-dependency reasoning as Motion) rather than Motion,
   on owner instruction to use Anime.js for scroll-driven animation work
   going forward. */
.to-tweaks-fab{position:fixed;left:18px;bottom:18px;z-index:1400;display:flex;align-items:center;gap:9px;padding:13px 20px 13px 17px;border-radius:999px;border:1px solid rgba(201,204,210,.35);background:linear-gradient(135deg,var(--ember),var(--ember-soft));color:#17171a;font-family:var(--f-b);font-weight:700;font-size:.88rem;cursor:pointer;box-shadow:0 16px 40px rgba(201,204,210,.35);opacity:0;transform:translateY(20px) scale(.9)}

.to-tweaks-fab:hover{box-shadow:0 20px 50px rgba(201,204,210,.5)}

.to-tweaks-fab i{font-size:14px}

@media(max-width:640px){.to-tweaks-fab{left:12px;bottom:12px;padding:11px 16px 11px 14px;font-size:.82rem}}

@media(prefers-reduced-motion:reduce){.to-tweaks-fab{opacity:1;transform:none}}

@media(max-width:640px){.brand-intro-section{padding-top:calc(var(--hdr) + 20px)}}


/* Animated sliding background inside the hero, underneath the existing
   .scan/.vignette layers - transform-only (translate3d + scale) so it's
   compositor-driven and never triggers layout/paint of surrounding content.
   Purely decorative, off entirely under prefers-reduced-motion. */
.hero-bg .aura{position:absolute;inset:-25%;background:radial-gradient(38% 38% at 22% 28%,rgba(201,204,210,.09),transparent 65%),radial-gradient(34% 34% at 78% 72%,rgba(45,212,191,.08),transparent 65%),radial-gradient(30% 30% at 55% 12%,rgba(240,242,245,.06),transparent 65%);filter:blur(4px);animation:auraDrift 24s ease-in-out infinite alternate;will-change:transform}

@keyframes auraDrift{0%{transform:translate3d(-2%,-1%,0) scale(1)}50%{transform:translate3d(2.5%,2%,0) scale(1.07)}100%{transform:translate3d(-1.5%,2.5%,0) scale(1.03)}}

@media(prefers-reduced-motion:reduce){.hero-bg .aura{animation:none}}


/* Smoother "premium" easing curve, layered onto a curated set of existing
   hover transitions for a more fluid feel across the whole site (owner:
   "clean transitions...avoid anything janky") - swaps only the timing
   function, every duration/property already set above is untouched. */
.card,.hp-card,.feat-tile,.partner-card,.tier-card,.faq-item summary .chev{transition-timing-function:cubic-bezier(.16,1,.3,1)}


/* ── Cart panel — full visual overhaul (rendering/styling only; cart.js's
   state/localStorage/checkout contract is untouched — only updateCartUI()'s
   generated markup + this CSS changed). The panel now animates OPEN and
   CLOSED via opacity/transform instead of a hard display:none/block toggle
   (still driven by the exact same .show class cart.js already adds/removes
   — no JS change needed for the mechanism), and each line groups same-
   product units into one row with a quantity stepper instead of a flat row
   per unit, for a clearer overview. */
.cart-panel{position:fixed;right:18px;top:calc(var(--hdr) + 12px);width:400px;max-height:78vh;overflow:auto;z-index:1500;background:linear-gradient(180deg,rgba(17,17,22,.99),rgba(10,10,13,.99));border-radius:22px;padding:20px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;scrollbar-width:thin;display:block;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.97);transform-origin:top right;transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1),visibility 0s linear .32s}

.cart-panel.show{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);animation:none;transition:opacity .34s cubic-bezier(.16,1,.3,1),transform .34s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s}

.cart-panel h4{padding-bottom:14px;margin-bottom:2px;border-bottom:1px solid var(--line-soft)}

.cart-item{display:flex;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line-soft)}

.cart-item:last-child{border-bottom:none}

.mini-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-soft);background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.01));flex-shrink:0}

.ci-info{flex:1;min-width:0}

.ci-price-row{display:flex;align-items:center;gap:6px;margin-top:3px;font-family:var(--f-m);font-size:11.5px;color:var(--mist)}

.ci-price-row .ci-x{color:var(--mist-dim)}

.ci-qty-ctrl{display:flex;align-items:center;gap:1px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:999px;padding:3px;flex-shrink:0}

.ci-qty-btn{width:24px;height:24px;border-radius:50%;border:none;background:transparent;color:var(--mist);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:10px;transition:background .2s,color .2s,transform .2s}

.ci-qty-btn:hover{background:rgba(201,204,210,.16);color:#fff}

.ci-qty-btn:active{transform:scale(.9)}

.ci-qty-val{min-width:18px;text-align:center;font-family:var(--f-m);font-size:.82rem;color:#fff;font-weight:600}

.ci-line-total{font-family:var(--f-m);font-weight:700;font-size:.88rem;color:var(--ember-soft);flex-shrink:0;min-width:58px;text-align:right}

.cart-empty{color:var(--mist-dim);font-size:.87rem;text-align:center;padding:30px 0}

.cart-empty i{display:block;margin-bottom:8px;font-size:22px;opacity:.32}

.coupon-row input{border-radius:12px}

.cart-sum-block{margin-top:14px;border-radius:14px;padding:14px 16px}

.cs-row.tot{font-size:1.08rem}

.cart-acts{margin-top:16px}


/* ── Admin dashboard overview — at-a-glance stat cards ────────────────── */
.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}

.admin-stat-card{background:var(--glass-2);border:1px solid var(--line-soft);border-radius:14px;padding:16px 18px;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s}

.admin-stat-card:hover{transform:translateY(-3px);border-color:rgba(201,204,210,.25)}

.admin-stat-card .asc-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(201,204,210,.18),rgba(201,204,210,.04));border:1px solid rgba(201,204,210,.25);color:var(--ember-soft);font-size:14px;margin-bottom:12px}

.admin-stat-card .asc-val{font-family:var(--f-m);font-weight:700;font-size:1.5rem;color:#fff;line-height:1}

.admin-stat-card .asc-lbl{margin-top:6px;color:var(--mist);font-size:.79rem;line-height:1.4}

.admin-stat-card.warn .asc-icon{background:linear-gradient(135deg,rgba(255,184,107,.2),rgba(255,184,107,.05));border-color:rgba(255,184,107,.3);color:var(--warn)}

.admin-stat-card.warn .asc-val{color:var(--warn)}

.admin-stat-card.danger .asc-icon{background:linear-gradient(135deg,rgba(201,204,210,.22),rgba(201,204,210,.06));border-color:rgba(201,204,210,.35);color:var(--ember-soft)}

.admin-stat-card.danger .asc-val{color:var(--ember-soft)}

.admin-stat-card.good .asc-icon{background:linear-gradient(135deg,rgba(55,214,122,.2),rgba(55,214,122,.05));border-color:rgba(55,214,122,.3);color:var(--good)}

.admin-stat-card.good .asc-val{color:var(--good)}


/* ── PHASE 12 — mobile pass for this update's new UI (cart overhaul, admin
   overview + licenses tab). Placed last so it wins the cascade over the
   unconditional rules above at narrow widths, same pattern already
   established by the "PHASE 8 — mobile audit fixes" block earlier in this
   file for the previous pass's own new UI. Re-verified (not just assumed)
   that PHASE 8's own fixes are still intact — none of the selectors it
   targets were touched by PHASE 11 above. ────────────────────────────────── */
@media(max-width:480px){
  .cart-panel{left:10px;right:10px;width:auto;max-height:80vh;padding:16px;border-radius:18px}
  .mini-icon{width:38px;height:38px}
  .ci-line-total{min-width:44px;font-size:.82rem}
  .ci-qty-ctrl{padding:2px}
  .ci-qty-btn{width:21px;height:21px}
  .admin-stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .admin-stat-card{padding:13px 14px}
  .admin-stat-card .asc-val{font-size:1.2rem}
  .admin-tabs{gap:6px}
  .admin-tab-btn{padding:8px 12px;font-size:.8rem}
}

@media(max-width:360px){
  .admin-stats-grid{grid-template-columns:1fr 1fr}
  .ci-price-row{font-size:10.5px}
}


/* ── PHASE 13 — sitewide easing audit ─────────────────────────────────────
   Owner feedback across several passes: "clean transitions...avoid anything
   janky." PHASE 11 already introduced cubic-bezier(.16,1,.3,1) - a slightly
   flatter/faster deceleration than the older (.2,.9,.3,1) curve used
   elsewhere - and applied it to .card/.hp-card/.feat-tile/.partner-card/
   .tier-card/.faq-item's chevron. Auditing every remaining transition in
   this file turned up a second group that still falls back to the browser
   default `ease` (because their `transition:` shorthand never named a
   timing function): small interactive chrome (icon buttons, pill buttons,
   the auth pill, nav links, lang switch, admin/settings/coupon/review
   inputs, quantity stepper, disabled-state checkbox row, testimonial/
   partner/tier cards' own already-bezier'd hover just needed the same
   override applied here too for full coverage) plus a couple of larger
   surfaces (product cards' box-shadow/border-color companions to their
   already-bezier'd transform, the settings dropdown, the cart quantity
   controls). `transition-timing-function` as its own declaration re-applies
   to every property named in the element's `transition:` shorthand, so one
   line per selector is enough - no need to touch/duplicate each existing
   `transition:` value. Ambient looping keyframes (orb float, aura drift,
   icon pulse/bob/spin, scan-line, live-dot pulse) are intentionally left on
   their own ease-in-out/linear timing - those are correct as-is for a
   continuous loop, only discrete state-change transitions were in scope. */
.icon-lnk,.sm-btn,.btn,.btn::before,.auth-login,.auth-logout,.settings-dd,
.lang-btn,nav#mainNav a,.footer-col a,.footer-legal-links a,
.field input,.field textarea,.coupon-row input,.review-form textarea,
.agb-check-row,.admin-form input,.admin-form select,.admin-form textarea,
.admin-tab-btn,.ci-qty-btn,.legal-modal-close,.download-btn{
  transition-timing-function:cubic-bezier(.16,1,.3,1)
}


/* ── PHASE 14 — real FiveM/GTA key-art on the flagship games card ─────────
   Owner supplied images/brand-assets/GTA1.png, GTA2.png and GTA4.png (his
   own existing desktop-app assets, not scraped) specifically to upgrade the
   #games FiveM card beyond the plain letter-watermark treatment the other
   four (still-abstract, no-official-art) cards keep. GTA2.png is genuinely
   new content here (not a duplicate of anything already in images/); GTA1
   and GTA4 are pixel-identical to the pre-existing images/GTA1.png and
   images/GTA4.png already used in the hero slideshow - reusing that same
   art in this new card context, no existing image file's content changed.
   Scoped strictly to [data-game="fivem"] - Valorant/CS:GO/Fortnite/
   Minecraft keep their existing abstract/icon-only treatment untouched. */
.fivem-keyart{position:absolute;inset:0;z-index:0;overflow:hidden}

.fivem-keyart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;filter:saturate(.7) brightness(.56) contrast(1.08);transform:scale(1.06);transition:transform .8s cubic-bezier(.16,1,.3,1)}

.fivem-keyart::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 30% 0%,var(--accent-a22,rgba(201,204,210,.22)),transparent 60%),linear-gradient(165deg,rgba(7,7,11,.12),rgba(7,7,11,.58) 78%);pointer-events:none}

.hp-card[data-game="fivem"]:hover .fivem-keyart img{transform:scale(1.13)}


/* Two small "photo scattered" corner accents (GTA1 + GTA4) - only on the
   larger pinned/hero card, where there's room to do a collage justice; the
   compact grid fallback keeps just the single GTA2 background for clarity
   at its smaller size. */
.fivem-corner{position:absolute;z-index:1;width:76px;height:58px;border-radius:9px;overflow:hidden;border:2px solid rgba(255,255,255,.14);box-shadow:0 14px 30px rgba(0,0,0,.5);pointer-events:none}

.fivem-corner img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.85)}

.fivem-corner.c1{left:20px;bottom:20px;transform:rotate(-6deg)}

.fivem-corner.c2{right:20px;bottom:64px;transform:rotate(5deg)}

@media(max-width:640px){.fivem-corner{width:56px;height:44px}.fivem-corner.c1{left:12px;bottom:12px}.fivem-corner.c2{right:12px;bottom:46px}}


/* ── PHASE 14 — real-hardware detection strip (showcase "Automatic system
   detection" tile) + platform trust row (download section), both using
   images/brand-assets/{monitor,AMD,intel,Nvidia,windows,discord}
.png. Icons
   sit on a light chip specifically because AMD.png's mark is a solid dark
   fill - on this site's near-black background it would otherwise be
   unreadable, same underlying reason product/partner logo swatches
   elsewhere in this file use a lighter backing. */
.hw-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

.hw-chip{width:38px;height:38px;border-radius:11px;background:linear-gradient(165deg,#f2f2f4,#dcdce2);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 18px rgba(0,0,0,.28);transition:transform .3s cubic-bezier(.16,1,.3,1)}

.hw-chip img{width:22px;height:22px;object-fit:contain}

.hw-chip.mono img{width:20px;height:20px;filter:none}

.feat-tile:hover .hw-chip{transform:translateY(-2px)}

.dl-platforms{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px;color:var(--mist);font-size:.85rem;font-family:var(--f-m)}

.dl-platforms .dp-icons{display:flex;align-items:center;gap:8px}

.dl-platforms .dp-icons img{width:20px;height:20px;object-fit:contain;opacity:.9}

.dl-platforms .dp-icons .dp-chip{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center}


/* ── PHASE 14 — sitewide eyebrow icon consistency: every section eyebrow
   except Showcase/Games already carries a small inline brand icon (see
   hero/features/about/community/products in index.html) - these two were
   the odd ones out. Reuses images/brand-assets/{fm,fivem,gta,steam}
.png
   (fm.png and fivem.png are pixel-identical to each other and to the
   pre-existing images/FiveM.png; gta.png is pixel-identical to
   images/GTALOGO.png - no image content changed, just the same established
   inline-icon convention extended to these two headings, plus steam.png as
   a purely decorative "the platforms you already play on" accent with no
   implied Steam integration). No dedicated class needed - matches the
   sizing already set inline on every sibling eyebrow icon in index.html. */

/* ── PHASE 14 — a bit more ambient "breathing" motion on a section that read
   static next to the scroll-scrubbed showcase/app-tour/games sections: the
   community banner's blurred glow circle. transform/opacity only, already
   covered by the sitewide prefers-reduced-motion kill-switch at the top of
   this file. (The download panel's own glow layer was replaced by the
   BackgroundRippleEffect grid - see .ac-ripple-grid.) */
.comm-banner::before{animation:bannerGlowBreathe 9s ease-in-out infinite}

@keyframes bannerGlowBreathe{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}


/* Testimonial cards are appended dynamically (js/testimonials.js) without
   d1..d6 delay classes - this gives the grid the same per-card stagger wave
   every other card grid in this file already has, CSS-only (the JS side
   already adds the plain .reveal class + calls observeRevealAll(), see
   testimonials.js - untouched). */
.testimonial-grid .testimonial-card.reveal:nth-child(6n+2){transition-delay:.08s}

.testimonial-grid .testimonial-card.reveal:nth-child(6n+3){transition-delay:.16s}

.testimonial-grid .testimonial-card.reveal:nth-child(6n+4){transition-delay:.24s}

.testimonial-grid .testimonial-card.reveal:nth-child(6n+5){transition-delay:.32s}

.testimonial-grid .testimonial-card.reveal:nth-child(6n+6){transition-delay:.4s}

.testimonial-grid .testimonial-card.reveal:nth-child(6n+7){transition-delay:.48s}


/* Partner cards get the same subtle 3D tilt-on-hover the showcase screenshot
   and every games-grid card already have (data-tilt added in index.html,
   bound automatically by the existing generic initTilt() in js/fx.js - no
   JS change needed) - just needed a transform transition here so the reset
   on mouseleave eases instead of snapping. */
.partner-card{transition:transform .35s cubic-bezier(.16,1,.3,1)}


/* ── PHASE 15 — critical polish pass: hero emphasis, reused game-profile
   imagery, cart click-outside-to-close (JS-only, no CSS here), sitewide
   reveal/scrollbar tuning (both edited in place near the top of this file
   rather than appended here, so the cascade order still matches where each
   rule conceptually belongs). This block covers what genuinely needed new,
   scoped selectors instead. ──────────────────────────────────────────────── */

/* Hero right-hand visual: the existing Performance Monitor HUD stays exactly
   where it is (owner referenced "an animation on the right" without a new
   screenshot to go by, and this site has been through several full-redesign
   attempts that all got reverted - see project memory - so the safer, better
   read of the brief is to make the EXISTING right-column widget read as a
   deliberate, alive focal point rather than to gamble on a new layout).
   .hero-visual wraps the same reveal.d2 node the HUD already sat in - one
   added class, no markup restructuring - and gets its own ambient glow +
   mouse-tilt (data-tilt, reusing the generic initTilt() every other tilt
   card on this site already uses - see js/fx.js). The tilt lives on this
   OUTER wrapper specifically so it composes with, instead of fighting, the
   INNER .hud-card's own idle-float/materialize animation below (two
   independent transform layers on two different elements, same trick this
   file already leans on for parallax orbs vs. their container). */
.hero-visual{position:relative;perspective:1600px;display:flex;flex-direction:column;gap:18px}

.hero-visual::before{content:"";position:absolute;inset:-16% -12%;background:radial-gradient(55% 55% at 45% 32%,rgba(45,212,191,.22),transparent 70%),radial-gradient(48% 48% at 72% 78%,rgba(201,204,210,.16),transparent 70%);filter:blur(52px);z-index:-1;pointer-events:none;opacity:.85;animation:heroGlowPulse 8s ease-in-out infinite}

@keyframes heroGlowPulse{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}


/* Large hero product screenshot (real Tweaker control panel), the dominant
   right-side visual per explicit owner direction. Held at a permanent slight
   3D angle ("bisschen seitlich") via the baked-in rotateY/rotateX in
   heroShotFloat below rather than sitting dead flat, with a diagonal glare
   sweep on hover for a tactile, premium-device feel, plus a floating live
   metric chip overlapping its bottom-left corner (a common premium SaaS hero
   pattern) so the shot reads as an alive product, not a static screenshot.
   The mouse-follow tilt (data-tilt on .hero-visual, generic initTilt() in
   js/fx.js) composes on top of this baked-in angle since it targets the
   OUTER wrapper while the angle lives on the INNER frame - two independent
   transform layers on two different elements. All keyframes are
   transform/opacity only (compositor-friendly) and neutralized by the
   sitewide prefers-reduced-motion kill-switch at the top of this file. */
.hero-shot-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 60px 140px rgba(0,0,0,.6),0 0 0 1px rgba(201,204,210,.16) inset,0 0 120px rgba(201,204,210,.14);animation:heroShotFloat 7.5s ease-in-out infinite}

.hero-shot-img{display:block;width:100%;height:auto;object-fit:cover;object-position:top}

.hero-shot-chrome{position:absolute;top:14px;left:16px;display:flex;gap:6px;z-index:2}

.hero-shot-chrome span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}

.hero-shot-chrome span:first-child{background:rgba(201,204,210,.55)}

.hero-shot-glare{position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.13) 47%,rgba(255,255,255,.03) 55%,transparent 68%);transform:translateX(-45%);transition:transform 1s cubic-bezier(.16,1,.3,1);pointer-events:none;mix-blend-mode:overlay;z-index:1}

.hero-visual:hover .hero-shot-glare{transform:translateX(45%)}

@keyframes heroShotFloat{0%,100%{transform:rotateY(-9deg) rotateX(3deg) rotateZ(-.6deg) translateY(0)}50%{transform:rotateY(-9deg) rotateX(3deg) rotateZ(-.6deg) translateY(-11px)}}


.hero-shot-badge{position:absolute;left:-16px;bottom:-18px;display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:14px;background:linear-gradient(180deg,rgba(22,22,28,.94),rgba(11,11,15,.94));backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5);animation:heroBadgeFloat 6s ease-in-out 1.1s infinite;z-index:3}

.hsb-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(45,212,191,.14);color:var(--volt);font-size:14px;flex-shrink:0}

.hsb-val{font-family:var(--f-m);font-weight:700;color:#fff;font-size:.98rem;line-height:1.15}

.hsb-lbl{font-size:10.5px;color:var(--mist-dim);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}

@keyframes heroBadgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@media(max-width:640px){.hero-shot-badge{left:10px;bottom:-14px;padding:9px 13px}.hsb-icon{width:28px;height:28px;font-size:12px}.hsb-val{font-size:.86rem}.hsb-lbl{font-size:9.5px}}


/* Headline gets a slow-drifting gradient sheen instead of a static two-stop
   fill - same colors, same weight/size, just alive. Background-position
   easing (not transform) so the glyphs themselves never move/blur. */
.hero h1{background-size:220% auto;animation:heroTextShine 7s ease-in-out infinite alternate}

@keyframes heroTextShine{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* SplitText (initHeroTextReveal, js/fx.js) briefly wraps the H1's text in
   .htxt-word/.htxt-char spans to animate it in, then reverts back to plain
   text once settled - the gradient/background-clip has to be re-declared on
   those transient spans too, since a parent's background-clip:text doesn't
   cascade to child elements that now hold the actual text nodes. */
.hero h1 .htxt-word,.hero h1 .htxt-char{background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}


/* Thin fixed scroll-progress indicator (initScrollProgressBar, js/fx.js,
   GSAP + ScrollTrigger) - a hairline bar pinned to the very top edge of the
   viewport, above the header, scaleX driven 1:1 by scroll position (scrub). */
.scroll-progress-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:1300;background:linear-gradient(90deg,var(--ember),var(--ember-soft));transform-origin:left center;transform:scaleX(0);pointer-events:none}


/* Reused-screenshot treatment for the four games with no dedicated real
   imagery was removed on owner instruction - the app's own Game Profiles
   screen only has real per-game art for FiveM/GTA Online, so reusing it as
   a background for Valorant/CS:GO/Fortnite/Minecraft was misleading rather
   than helpful. Those four now carry real logo marks instead (see
   .game-logo-mark below); the decorative oversized letter watermark that
   stood in for them before real logos existed has been removed. FiveM's own
   dedicated .fivem-keyart treatment is unaffected. */

/* Testimonial cards had no hover state at all - every other card grid on
   this site (products, games, partners, tiers) lifts on hover, so this one
   read as flat/unfinished by comparison. */
.testimonial-card{transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s cubic-bezier(.16,1,.3,1)}

.testimonial-card:hover{transform:translateY(-4px);border-color:rgba(201,204,210,.22)}

/* ── js/aceternity.js — vanilla ports of a handful of ui.aceternity.com
   component patterns, restyled to this site's own ember/volt palette. Kept
   in one block so every new "big UI update" effect is easy to find/remove
   as a unit if any one of them doesn't work out. ──────────────────────── */
@property --ac-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --ac-rot{syntax:'<angle>';initial-value:0deg;inherits:false}

/* GlowingEffect - pointer-tracked conic-gradient ring, masked to a thin
   border so it never needs to bleed outside an overflow:hidden parent. */
.ac-glow{position:relative}
.ac-glow-ring{position:absolute;inset:-3px;border-radius:inherit;padding:3px;pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:6;filter:blur(1.5px) drop-shadow(0 0 12px rgba(201,204,210,.5));
  background:conic-gradient(from var(--ac-angle,0deg),transparent 0deg,var(--ember) 35deg,var(--volt) 70deg,transparent 130deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* BackgroundGradient (always-on) / HoverBorderGradient (hover-only) - a
   slowly rotating conic-gradient ring, same masked-border technique. */
.ac-bg-gradient,.ac-hbg{position:relative}
.ac-bg-gradient::after,.ac-hbg::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--ac-rot,0deg),var(--ember),var(--volt),var(--ember-soft),var(--ember));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:acRotate 7s linear infinite}
.ac-bg-gradient::after{opacity:.85}
.ac-hbg::after{opacity:0;transition:opacity .3s}
.ac-hbg:hover::after{opacity:1}
@keyframes acRotate{to{--ac-rot:360deg}}
@media (prefers-reduced-motion: reduce){
  .ac-bg-gradient::after,.ac-hbg::after{animation:none}
  .ac-glow-ring{transition:none}
}

/* CanvasRevealEffect - animated dot-grid canvas, fades in on hover only. */
.ac-canvas-reveal{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s ease;pointer-events:none;border-radius:inherit}
.ac-canvas-reveal.show{opacity:1}

/* EvervaultCard - cursor-spotlight of "encrypted" characters behind a
   tile's own content. */
.ac-evervault-host{position:relative;overflow:hidden}
.ac-evervault-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit}

/* GlareCard - moving specular highlight layer over a 3D-tilted card. */
.ac-glare-host{transition:transform .15s ease-out}
.ac-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5}

/* GlareCard applied to the customer portal's license keys - each card gets
   attachGlare() (see js/aceternity.js) for the tilt+specular effect. Styled
   like a brushed-metal award plaque (owner ask: "glänzende Metall-
   Auszeichnung", bigger and more prominent than a plain settings row) -
   a diagonal brushed-metal texture layer, embossed edge highlight/shadow,
   and a corner sheen, while keeping the site's own ember/volt accents for
   the hover glow and key text so it still reads as this site, not a generic
   metal skin. */
.lic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.lic-card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:26px 28px;display:flex;flex-direction:column;gap:16px;transition:transform .15s ease-out,border-color .25s,box-shadow .25s;
  background:linear-gradient(150deg,#3c3c44 0%,#1c1c22 38%,#28282f 62%,#3c3c44 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 22px 50px rgba(0,0,0,.5)}
.lic-card::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0px,rgba(255,255,255,.04) 1px,transparent 1px,transparent 3px)}
.lic-card::after{content:"";position:absolute;top:-40%;right:-30%;width:70%;height:80%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%)}
.lic-card:hover{border-color:rgba(240,242,245,.4);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 26px 60px rgba(0,0,0,.55),0 0 40px -14px rgba(240,242,245,.4)}
.lic-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:1}
.lic-card-eyebrow{display:flex;align-items:center;gap:6px;font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.lic-card-eyebrow i{color:var(--ember-soft)}
.lic-card-product{font-family:var(--f-d);font-weight:800;font-size:1.4rem;color:#f4f4f6;letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,255,255,.12),0 2px 5px rgba(0,0,0,.6);position:relative;z-index:1}
.lic-card-key{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:13px 16px;color:var(--volt-soft);cursor:pointer;transition:all .2s;font-family:var(--f-b);position:relative;z-index:1;box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.lic-card-key:hover{border-color:var(--volt-soft);background:rgba(0,0,0,.42)}
.lic-card-key-text{font-family:var(--f-m);font-size:13.5px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lic-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:rgba(255,255,255,.45);position:relative;z-index:1}
.lic-card-foot i{margin-right:4px}
@media (max-width:560px){.lic-card{padding:20px 22px}.lic-card-product{font-size:1.2rem}}
@media (prefers-reduced-motion: reduce){.lic-card{transition:none}}

/* ── License reveal "moment" card (order-success) - CometCard's 3D
   tilt+trail animation (attachCometCard) over a GlareCard-style brushed-
   metal mirror surface in silver, engraved-look key text centered. Bigger
   and more deliberate than the compact account-page .lic-card above -
   this is the one time the customer actually sees the key appear. */
.ac-license-reveal-group{display:flex;flex-direction:column;align-items:center;gap:22px;margin:8px 0 28px}
.alr-group-title{display:flex;align-items:center;gap:10px;font-family:var(--f-d);font-size:1.05rem;color:var(--ink);justify-content:center}
.alr-group-title i{color:var(--ember-soft)}
.ac-license-reveal{position:relative;overflow:hidden;width:100%;max-width:480px;padding:40px 36px 32px;border-radius:20px;text-align:center;
  background:linear-gradient(155deg,#1a1a1e 0%,#0c0c10 55%,#151519 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 -1px 0 rgba(0,0,0,.6) inset,0 30px 70px rgba(0,0,0,.55),0 0 50px -18px rgba(240,242,245,.35);
  transition:box-shadow .25s}
.ac-license-reveal::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 1px,transparent 1px,transparent 3px)}
.ac-license-reveal::after{content:"";position:absolute;top:-50%;left:-20%;width:80%;height:100%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%)}
.ac-license-reveal:hover{box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 -1px 0 rgba(0,0,0,.6) inset,0 34px 80px rgba(0,0,0,.6),0 0 60px -14px rgba(240,242,245,.5)}
.alr-eyebrow{position:relative;z-index:1;font-family:var(--f-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px}
.alr-key{position:relative;z-index:1;font-family:var(--f-m);font-weight:700;font-size:clamp(1.5rem,5vw,2.1rem);letter-spacing:.04em;word-break:break-all;
  background:linear-gradient(180deg,#fff 0%,#c9ccd2 55%,#8b8d93 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.5)) drop-shadow(0 2px 1px rgba(0,0,0,.8));margin-bottom:28px}
.alr-stats{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 30px;margin-bottom:26px}
.alr-stat{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:100px}
.alr-lbl{font-family:var(--f-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.alr-val{font-family:var(--f-b);font-size:.92rem;font-weight:600;color:#f4f4f6}
.alr-copy{position:relative;z-index:1}
@media (max-width:560px){.ac-license-reveal{padding:32px 22px 26px}}
@media (prefers-reduced-motion: reduce){.ac-license-reveal{transition:none}}

/* BackgroundBeams - drifting SVG strokes behind content. */
.ac-beams{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ac-beam{fill:none;stroke-width:1.5;opacity:.32;stroke-dasharray:120 400;animation:acBeamDrift 11s linear infinite}
.ac-beam-0{stroke:var(--ember)}
.ac-beam-1{stroke:var(--volt)}
.ac-beam-2{stroke:var(--ember-soft)}
@keyframes acBeamDrift{to{stroke-dashoffset:-520}}
@media (prefers-reduced-motion: reduce){.ac-beam{animation:none}}

/* LoaderOne - small reusable dot-bounce spinner. */
.ac-loader-one{display:inline-flex;gap:6px;align-items:center;justify-content:center}
.ac-loader-one span{width:8px;height:8px;border-radius:50%;background:var(--ember-soft);animation:acLoaderBounce 1s ease-in-out infinite}
.ac-loader-one span:nth-child(2){background:var(--volt);animation-delay:.15s}
.ac-loader-one span:nth-child(3){animation-delay:.3s}
@keyframes acLoaderBounce{0%,80%,100%{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}

/* FileUpload - dependency-free drag&drop dropzone (js/aceternity.js
   attachFileDropzone()), used in the admin Download tab. */
.ac-dropzone{position:relative;display:flex;align-items:center;justify-content:center;min-height:140px;border:1.5px dashed var(--line);border-radius:var(--r-md);background:var(--glass);cursor:pointer;transition:border-color .2s,background .2s;padding:20px}
.ac-dropzone:hover{border-color:rgba(240,242,245,.4)}
.ac-dropzone.drag-active{border-color:var(--ember-soft);background:rgba(201,204,210,.06)}
.ac-dropzone-idle,.ac-dropzone-file{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--mist);pointer-events:none}
.ac-dropzone-file{flex-direction:row;text-align:left}
.ac-dropzone-icon{font-size:26px;color:var(--ember-soft)}
.ac-dropzone-text{font-size:.85rem;max-width:26ch}
.ac-dropzone-filename{color:#fff;font-weight:600;font-size:.9rem}
.ac-dropzone-filesize{color:var(--mist-dim);font-family:var(--f-m);font-size:.78rem;margin-top:2px}

/* Terminal - fake typed-command console (js/aceternity.js
   attachTerminalType()), used in the new #sicherheit section. */
.ac-terminal{background:#0c0c10;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);font-family:var(--f-m);font-size:.82rem}

.ac-evervault-security{position:relative;overflow:hidden;background:#0c0c10;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.45);min-height:170px;display:flex;align-items:center;justify-content:center}
.ac-evervault-label{position:relative;z-index:1;font-family:var(--f-d);font-weight:800;font-size:2.6rem;letter-spacing:.02em;color:rgba(255,255,255,.9);pointer-events:none;text-shadow:0 2px 20px rgba(0,0,0,.8)}
.ac-terminal-head{display:flex;gap:6px;padding:12px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line-soft)}
.ac-terminal-dot{width:10px;height:10px;border-radius:50%}
.ac-terminal-dot.r{background:#ff5f56}
.ac-terminal-dot.y{background:#ffbd2e}
.ac-terminal-dot.g{background:#27c93f}
.ac-terminal-body{padding:20px;min-height:170px;color:#c8c8d0;line-height:1.9}
.ac-terminal-line{white-space:pre-wrap;word-break:break-word}
.ac-terminal-prompt{color:var(--volt-soft)}
.ac-terminal-output{color:var(--mist)}
.ac-terminal-output.ok{color:var(--good)}
.ac-terminal-cursor{display:inline-block;width:7px;height:14px;background:var(--ember-soft);vertical-align:middle;margin-left:2px;animation:acTermBlink 1s step-end infinite}
@keyframes acTermBlink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.ac-terminal-cursor{animation:none}}

/* #sicherheit layout - terminal + copy side by side, mirrored per row so
   neither instance sits in the same "boring centered" spot (owner ask). */
/* GTA6 poster reveal - layered images scale/blur into place together,
   staggered per-layer via inline transition-delay (see index.html), the
   first time the poster scrolls into view (js/aceternity.js
   initGtaPosterReveal()). Sits directly above the HeroParallax rows in
   #games, not part of the scroll-scrubbed rows themselves. */
.ac-gta-block{display:flex;align-items:center;gap:40px;margin-top:40px;flex-wrap:wrap;justify-content:center}
.ac-gta-poster{position:relative;width:min(420px,80vw);aspect-ratio:1/1;flex-shrink:0;border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 28%,#2a1133,#080611 72%);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.ac-gta-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(6px);transform:scale(var(--gta-scale,1.3));transition:opacity .8s ease-out,transform 1.8s cubic-bezier(.16,1,.3,1),filter .8s ease-out}
.ac-gta-poster.in-view .ac-gta-layer{opacity:1;filter:blur(0);transform:scale(1)}
.ac-gta-logo{clip-path:inset(0 0 100% 0);transition:opacity .8s ease-out,transform 1.8s cubic-bezier(.16,1,.3,1),filter .8s ease-out,clip-path 1.2s cubic-bezier(.16,1,.3,1)}
.ac-gta-poster.in-view .ac-gta-logo{clip-path:inset(0 0 0% 0)}
.ac-gta-copy{flex:1 1 280px;min-width:260px;max-width:420px}
.ac-gta-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.3);color:var(--volt-soft);font-family:var(--f-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.ac-gta-copy h3{font-size:1.4rem;color:#fff;margin-bottom:10px}
.ac-gta-copy p{color:var(--mist);line-height:1.7}
@media (max-width:760px){.ac-gta-block{flex-direction:column;text-align:center}.ac-gta-copy{max-width:100%}}
@media (prefers-reduced-motion: reduce){.ac-gta-layer,.ac-gta-logo{transition:none;opacity:1;filter:none;transform:scale(1);clip-path:inset(0 0 0% 0)}}

/* TextHoverEffect - large outline-only footer wordmark; a colored fill
   shows through an SVG mask whose radial gradient follows the cursor (see
   attachTextHoverMask() in js/aceternity.js). Outline-only text elsewhere,
   so this reads as a signature flourish rather than a real heading. */
.ac-th-wrap{width:100%;overflow:hidden;padding:14px 0 6px}
.ac-text-hover{width:100%;height:auto;max-height:150px;display:block}
.ac-th-outline,.ac-th-fill{font-family:var(--f-d);font-weight:800;letter-spacing:-.01em;font-size:78px}
.ac-th-outline{fill:transparent;stroke:rgba(255,255,255,.14);stroke-width:1px}
@media (max-width:640px){.ac-th-outline,.ac-th-fill{font-size:46px}}

/* CometCard - 3D-tilted card with a fading comet-tail of gradient blobs
   trailing the cursor (js/aceternity.js attachCometCard()), used for the
   public profile card. */
.ac-comet-host{position:relative;overflow:hidden;transition:transform .15s ease-out}
.ac-comet-trail{position:absolute;top:0;left:0;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,.4),transparent 70%);pointer-events:none;opacity:0;transition:opacity .25s;z-index:0}

/* Public profile page (profile.html) */
.ac-profile-card{max-width:380px;margin:0 auto;padding:40px 32px;border-radius:var(--r-lg);text-align:center;background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ac-profile-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid rgba(201,204,210,.4);box-shadow:0 12px 30px rgba(0,0,0,.4);position:relative;z-index:1}
.ac-profile-name{font-family:var(--f-d);font-weight:800;font-size:1.5rem;color:#fff;margin-top:18px;position:relative;z-index:1}
.ac-profile-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px;position:relative;z-index:1}
.ac-profile-meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);color:var(--mist-dim);font-size:.82rem;font-family:var(--f-m);position:relative;z-index:1}

/* HeroHighlight - a colored block sweeps in behind "actually work" /
   "tatsächlich funktionieren" in the hero title, once on first paint (timed
   to land just after initHeroTextReveal()'s own SplitText char-in animation
   settles - see js/fx.js). Text color is untouched (matches the original
   Aceternity Highlight component's own behavior) - ember-on-white reads
   fine, like a highlighter mark. */
.hero-highlight{color:#fff;-webkit-text-fill-color:#fff}

#sicherheit .sec-row{display:flex;align-items:center;gap:48px;margin-top:48px;flex-wrap:wrap}
#sicherheit .sec-row.reverse{flex-direction:row-reverse}
.sec-term-wrap{flex:1 1 380px;min-width:280px}
.sec-copy{flex:1 1 320px;min-width:260px}
.sec-copy h3{font-size:1.35rem;color:#fff;margin-bottom:10px}
.sec-copy p{color:var(--mist);line-height:1.75}
@media (max-width:760px){#sicherheit .sec-row,#sicherheit .sec-row.reverse{flex-direction:column}}
@media (prefers-reduced-motion: reduce){.ac-loader-one span{animation:none;opacity:.9}}