:root{color-scheme:dark;--bg:#020817;--blue:#0b82ff;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;font-synthesis:none}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-width:300px;min-height:100%;background:var(--bg);color:#f7f9ff}
body{min-height:100vh;min-height:100svh;overflow-x:hidden}
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse 65% 65% at 50% -10%,#08316a 0%,#061936 27%,#020918 75%,#010511 100%)}
.backdrop__blue{position:absolute;inset:0;background:radial-gradient(ellipse 26% 21% at 50% 11%,rgba(0,77,233,.36),transparent 80%);opacity:.78}
.circuit-map{position:absolute;inset:0;width:100%;height:100%;display:block;transform:none}
.backdrop__floor{position:absolute;left:0;right:0;bottom:0;height:27%;background:radial-gradient(ellipse 38% 54% at 50% 98%,rgba(0,87,219,.26),transparent 75%),linear-gradient(to bottom,transparent 0%,rgba(0,30,85,.14) 45%,rgba(2,7,18,.8) 100%);border-top:1px solid rgba(29,87,189,.035)}
.backdrop__vignette{position:absolute;inset:0;background:radial-gradient(ellipse 85% 95% at 50% 46%,transparent 53%,rgba(0,0,9,.54) 100%)}
.page{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding:clamp(20px,4vh,50px) 22px;perspective:1400px}
.card{--rollX:0deg;--rollY:0deg;--lightX:50%;--lightY:4%;--shadowX:0px;--shadowY:28px;position:relative;isolation:isolate;display:flex;align-items:center;flex-direction:column;justify-content:center;width:min(890px,calc(100vw - 100px));padding:clamp(46px,7vh,82px) clamp(32px,5vw,80px) clamp(38px,5vh,58px);border:1px solid rgba(71,159,255,.83);border-radius:34px; background:radial-gradient(ellipse 65% 41% at var(--lightX) var(--lightY),rgba(21,85,185,.24),transparent 85%),linear-gradient(160deg,rgba(8,30,64,.92) 0%,rgba(2,12,34,.97) 48%,rgba(4,17,42,.96) 100%);box-shadow:var(--shadowX) var(--shadowY) 65px rgba(0,0,14,.72),0 0 29px rgba(5,95,255,.26),inset 0 0 39px rgba(4,52,120,.17);transform:rotateX(var(--rollX)) rotateY(var(--rollY));transform-style:preserve-3d;text-align:center;text-decoration:none;color:inherit;cursor:pointer;outline-offset:6px;backface-visibility:hidden;will-change:transform,box-shadow;transition:box-shadow .15s ease,background .15s ease;-webkit-tap-highlight-color:transparent}
.card__border{position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:0 -2px 11px rgba(65,148,255,.45),-1px 0 4px rgba(36,147,255,.42),1px 0 4px rgba(249,42,101,.48),0 3px 17px rgba(0,84,255,.35)}
.card__border::before{content:"";position:absolute;left:25%;right:25%;top:-3px;height:4px;border-radius:100%;background:#128aff;filter:blur(5px);box-shadow:0 0 34px 7px rgba(0,111,255,.83)}
.card__border::after{content:"";position:absolute;right:-1px;top:14%;height:45%;width:2px;background:linear-gradient(transparent,rgba(255,60,104,.71),transparent);filter:blur(2px)}
.card__shine{position:absolute;inset:1px;border-radius:inherit;z-index:-1;pointer-events:none;opacity:.48;background:radial-gradient(ellipse 32% 36% at var(--lightX) var(--lightY),rgba(98,170,255,.27),transparent 100%)}
.logo{position:relative;display:block;width:min(100%,660px);height:auto;margin:0 auto;user-select:none;filter:drop-shadow(0 5px 7px rgba(0,0,7,.4));transform:translateZ(36px)}
.message{display:block;margin-top:clamp(25px,5.4vh,52px);font-weight:400;line-height:1.29;letter-spacing:-.025em;font-size:clamp(23px,2.45vw,36px);color:#d6ddf4;transform:translateZ(24px);text-shadow:0 0 9px rgba(104,148,255,.09)}
.customer{display:flex;width:100%;align-items:center;justify-content:center;gap:clamp(12px,2.5vw,34px);margin-top:clamp(22px,3vh,32px);font-size:clamp(30px,3vw,44px);font-weight:760;white-space:nowrap;letter-spacing:-.03em;transform:translateZ(30px);text-shadow:0 0 12px rgba(133,192,255,.12)}
.customer strong{font-weight:760}
.customer__rule{height:2px;flex:1;max-width:95px;background:linear-gradient(90deg,transparent,#216dd7)}
.customer__rule:last-child{transform:scaleX(-1)}
.cta{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,16px);margin-top:clamp(27px,3.7vh,42px);width:min(100%,546px);min-height:82px;padding:13px 18px;border:2px solid #41e0ff;border-radius:999px;background:linear-gradient(175deg,#078dfa 0%,#0559e9 44%,#003ec9 100%);box-shadow:0 0 28px rgba(0,107,255,.67),0 10px 38px rgba(0,72,221,.34),inset 0 2px 12px rgba(111,207,255,.32),inset 0 -2px 8px rgba(1,16,94,.54);color:#fff;font-size:clamp(15px,1.55vw,23px);font-weight:670;white-space:nowrap;transform:translateZ(45px);transition:filter .2s ease,box-shadow .2s ease,transform .2s ease}
.cta svg{flex-shrink:0}
.card:hover .cta,.card:focus-visible .cta{filter:brightness(1.18);box-shadow:0 0 42px 4px rgba(0,142,255,.87),0 8px 31px rgba(3,94,255,.44),inset 0 2px 18px rgba(151,240,255,.36)}
.card:focus-visible{outline:3px solid #83efff}
.card:active .cta{transform:translateZ(45px) scale(.985)}
@media(max-height:800px) and (min-width:721px){.card{padding-top:clamp(27px,5.5vh,55px);padding-bottom:clamp(29px,5vh,48px)}.logo{width:min(100%,590px)}.message{font-size:clamp(24px,2.2vw,32px);margin-top:26px}.customer{font-size:clamp(30px,2.9vw,40px);margin-top:19px}.cta{min-height:66px;margin-top:25px}}
@media(max-width:720px){.page{padding:24px 17px}.card{width:min(100%,455px);border-radius:26px;padding:clamp(46px,7vh,68px) 19px clamp(38px,6vh,58px)}.logo{width:min(100%,370px)}.message{margin-top:clamp(33px,6vh,52px);font-size:clamp(18px,4.35vw,24px);line-height:1.45;letter-spacing:-.01em}.customer{font-size:clamp(26px,6.6vw,33px);gap:11px;margin-top:clamp(22px,4vh,34px)}.customer__rule{max-width:23px}.cta{width:100%;min-height:62px;margin-top:clamp(28px,5vh,44px);padding:10px 7px;gap:7px;font-size:clamp(12px,3.4vw,17px)}.cta svg:first-child{width:21px;height:21px}.cta svg:last-child{width:18px;height:18px}}
@media(max-height:600px) and (max-width:720px){.page{padding:18px}.card{padding:21px 16px}.logo{max-width:240px}.message{margin-top:12px;font-size:17px}.customer{margin-top:11px;font-size:23px}.cta{margin-top:15px;min-height:48px}}
@media(prefers-reduced-motion:reduce){.moving-lights{display:none}.card,.card *, .card::before,.card::after{transition:none!important;animation:none!important}.card{transform:none!important}}
