@font-face{font-family:"Golos Text";src:url("assets/golos-text-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;font-family:"Golos Text",Arial,sans-serif;background:#080909;color:#e5e5e5;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:280px}
.stage{min-height:100svh;display:grid;place-items:center;padding:40px 24px;background:radial-gradient(ellipse at 50% 48%,#141414 0, #0b0c0c 37%,#080909 72%);overflow:hidden}
.card-wrap{width:min(100%,370px);perspective:1100px}
.card{--px:31%;--py:19%;--rx:0deg;--ry:0deg;--sweep:-12deg;position:relative;isolation:isolate;min-height:528px;display:flex;flex-direction:column;padding:29px 28px 25px;border:1px solid #414144;border-radius:19px;background:#101112;box-shadow:0 30px 65px #000a,0 5px 12px #0008,inset 0 0 0 5px #ffffff02;overflow:hidden;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .55s cubic-bezier(.2,.7,.2,1);}
.card.is-tracking{transition:transform .09s linear;will-change:transform}
.card:after{content:"";pointer-events:none;position:absolute;z-index:7;inset:0;border-radius:inherit;box-shadow:inset 0 1px 1px #ffffff20,inset 0 -1px 1px #ffffff12}
.foil,.contours,.glare{position:absolute;inset:0;pointer-events:none}
.foil{z-index:-3;background:conic-gradient(from var(--sweep) at var(--px) var(--py),#e449311b,#f8877018,#e8c39008,#4770661c,#6f96b21d,#937c9b22,#ff230d24,#e449311b);opacity:.8}
.contours{z-index:-2;inset:-30%;background:repeating-radial-gradient(ellipse at var(--px) var(--py),transparent 0 5px,#dce5ee19 5.3px 5.8px,transparent 6.1px 8px);transform:rotate(-26deg) scaleX(.84);mask-image:linear-gradient(135deg,#000 3%,#0008 40%,#0001 68%,#0005);opacity:.7}
.glare{z-index:6;background:radial-gradient(ellipse at var(--px) var(--py),#fff2 0,#fff05a05 22%,transparent 53%);mix-blend-mode:screen;opacity:.33}
.card-header{display:flex;align-items:center;justify-content:space-between;min-height:22px;position:relative;z-index:8}
.logo{display:block;opacity:.94}
.cross{position:relative;width:12px;height:12px;opacity:.45}
.cross:before,.cross:after,.registration:before,.registration:after{content:"";position:absolute;background:#bcbcbc}
.cross:before,.registration:before{height:1px;width:100%;top:50%;left:0}
.cross:after,.registration:after{width:1px;height:100%;left:50%;top:0}
.art{position:relative;flex:1;min-height:257px;display:grid;place-items:center}
.mark,.mark-shadow{position:absolute;width:100%;height:125px;mask:url("assets/supras-mark.svg") center/contain no-repeat}
.mark-shadow{mask:none;transform:translate(0,2px);filter:blur(7px);opacity:.28}
.mark-shadow:before{content:"";position:absolute;inset:0;background:#000;mask:url("assets/supras-mark.svg") center/contain no-repeat}
.mark{background:linear-gradient(calc(115deg + var(--sweep)),#551811 0%,#ff0b00 26%,#ff5839 37%,#ffc5ad 43%,#d5cedb 48%,#86a9a7 53%,#8d6172 59%,#ff2d16 69%,#741b13 84%,#290e0c 100%);background-size:180% 180%;background-position:var(--px) var(--py);filter:drop-shadow(0 0 12px #fa210923);opacity:.93}
.mark:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 2px,#0005 2.4px 3px);mix-blend-mode:multiply;opacity:.5}
.registration{position:absolute;width:7px;height:7px;opacity:.2;bottom:42px}
.registration-left{left:0}.registration-right{right:0}
.card-copy{position:relative;z-index:8;margin-bottom:28px}
.eyebrow{font-size:12px;line-height:1.5;color:#b4adb0;letter-spacing:.04em;margin:0 0 10px}
h1{font-size:32px;line-height:1.14;font-weight:400;letter-spacing:-1.1px;margin:0;color:#ededed}
.card-footer{position:relative;z-index:8;border-top:1px solid #ffffff16;padding-top:18px;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.signature{font-size:12px;letter-spacing:.025em;color:#a09c9e}
.contact{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:-10px -8px -10px 0;padding:10px 8px;color:#d5d1d3;text-decoration:none;font-size:14px;transition:color .18s,background .18s;border-radius:6px}
.contact[href]:hover{color:#fff;background:#ffffff0b}
.contact:focus-visible{outline:2px solid #ff543e;outline-offset:4px}
.contact[aria-disabled="true"]{cursor:default}
@media(max-width:420px){.stage{padding:28px 23px}.card{min-height:490px;padding:25px 24px 23px}.art{min-height:234px}.mark,.mark-shadow{height:110px}h1{font-size:30px}.eyebrow{font-size:12px}}
@media(prefers-reduced-motion:reduce){.card,.card.is-tracking{transform:none!important;transition:none}.contact{transition:none}}