:root{color-scheme:dark}
html{background:#060606;scroll-behavior:smooth}
body{margin:0;background:#060606;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#f3f1eb;text-decoration:none}
a:hover{color:#ffffff}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:1px solid #e8eaef;outline-offset:2px}
.title-gradient{margin:0;padding-bottom:.16em;font-family:"Montserrat",system-ui,sans-serif;font-weight:300;line-height:1.06;letter-spacing:-.03em;text-wrap:balance;background:linear-gradient(122deg,#f3f1eb 0%,#f3f1eb 18%,#a6a8a5 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
[dir="rtl"] .title-gradient{font-family:"GE SS Two","IBM Plex Sans Arabic",system-ui,sans-serif;line-height:1.25;letter-spacing:0;background-image:linear-gradient(238deg,#f3f1eb 0%,#f3f1eb 18%,#a6a8a5 100%)}
.btn{display:inline-flex;align-items:center;gap:.75rem;min-height:2.75rem;padding-block:.4rem;padding-inline:1.55rem .45rem;border:0;border-radius:999px;background:#ffffff0e;box-shadow:inset 0 1px 1px #ffffff29,inset 0 -14px 24px -16px #ffffff29;color:#f3f1eb;font-family:inherit;font-size:1rem;line-height:1;cursor:pointer;transition:background-color .18s ease,transform .18s ease}
.btn:hover{background:#ffffff16;transform:translateY(-1px)}
.btn-icon{display:grid;place-items:center;width:1.95rem;height:1.95rem;border-radius:50%;background:linear-gradient(#fff 0%,#e6e7ee 55%,#c9ccd6 100%);color:#0d0d0d}
[dir="rtl"] .btn-icon svg{transform:scaleX(-1)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem}
.card{padding:.35rem;border-radius:12px;transition:background-color .18s ease}
.card:hover{background:#ffffff0b}
.split{display:grid;grid-template-columns:5fr 8fr;gap:4rem;align-items:start}
.sticky{position:sticky;top:6rem}
.nav-links{display:flex;gap:1.75rem}
.field{width:100%;min-height:2.75rem;padding:.7rem .9rem;border:1px solid #ffffff14;border-radius:8px;background:#0d0d0d;color:#f3f1eb;font:inherit;font-size:.95rem}
.field:hover{border-color:#ffffff29}
.t{fill:#3a3d3a}.l{fill:#191b19}.r{fill:#292b29}
.ring{fill:none;stroke:#3a3d3a;stroke-width:14}
summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
.plus{transition:transform .18s ease;color:#a6a8a5}
details[open] .plus{transform:rotate(45deg)}
.built{animation:vyra-build 11s cubic-bezier(.4,0,.6,1) infinite alternate}
.nozzle{animation:vyra-nozzle 11s cubic-bezier(.4,0,.6,1) infinite alternate}
@keyframes vyra-build{0%{clip-path:inset(72% 0 0 0)}82%,100%{clip-path:inset(0 0 0 0)}}
@keyframes vyra-nozzle{0%{transform:translateY(72%)}82%,100%{transform:translateY(0)}}
main>section:first-of-type::before{content:"";position:absolute;inset:-25%;background:radial-gradient(38% 38% at 65% 40%,#f3f1eb24,transparent 70%),radial-gradient(30% 30% at 32% 62%,#b9e64a14,transparent 70%);animation:vyra-drift 16s ease-in-out infinite alternate;pointer-events:none}
main>section:first-of-type>div{position:relative}
@keyframes vyra-drift{from{transform:translate3d(7%,-4%,0) scale(1)}to{transform:translate3d(-7%,5%,0) scale(1.12)}}
@keyframes vyra-rise{from{opacity:.25;transform:translateY(28px)}to{opacity:1;transform:none}}
section img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease}
section img:hover{transform:scale(1.02);filter:brightness(1.1)}
.card svg{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover svg{transform:scale(1.05)}
@supports (animation-timeline:view()){.card,section img,ol li,details{animation:vyra-rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}}
@media (prefers-reduced-motion:reduce){main>section:first-of-type::before,.card,section img,ol li,details{animation:none}section img,.card svg{transition:none}}
.skip{position:absolute;right:16px;top:-64px;z-index:20;padding:.75rem 1rem;border-radius:8px;background:#f3f1eb;color:#060606}
.skip:focus{top:8px}
.nav-cta{display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:1.1rem;border-radius:999px;background:#ffffff0e;box-shadow:inset 0 1px 1px #ffffff29;transition:background-color .18s ease}
.nav-cta:hover{background:#ffffff16}
@keyframes vyra-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:scroll()){header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#b9e64a;transform-origin:right;animation:vyra-progress linear both;animation-timeline:scroll()}}
.card{position:relative}
@media (hover:hover){.card::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;opacity:0;background:radial-gradient(240px at var(--mx,50%) var(--my,40%),#f3f1eb1f,transparent 70%);transition:opacity .18s ease}.card:hover::after{opacity:1}}
.wheel-stage:focus-visible{outline:1px solid #e8eaef;outline-offset:-1px}
@keyframes vyra-hero{from{opacity:.15;transform:translateY(14px)}to{opacity:1;transform:none}}
main>section:first-of-type>div>:is(p,h1,a){animation:vyra-hero .8s cubic-bezier(.2,.8,.2,1) both}
main>section:first-of-type>div>h1{animation-delay:.08s}
main>section:first-of-type>div>p:nth-of-type(2){animation-delay:.16s}
main>section:first-of-type>div>a{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){main>section:first-of-type>div>:is(p,h1,a){animation:none}}
details[open]>p{animation:vyra-rise .28s ease both}
summary:hover{color:#ffffff}
@media (prefers-reduced-motion:reduce){details[open]>p{animation:none}}
.field{transition:border-color .18s ease,background-color .18s ease}
.field:focus{outline:none;border-color:#b9e64a;background:#141514}
tbody tr{transition:background-color .18s ease}
tbody tr:hover{background:#ffffff0b}
html{scroll-padding-top:6rem}
p{text-wrap:pretty}
::selection{background:#b9e64a;color:#171918}
.title-gradient::selection{-webkit-text-fill-color:#171918}
.card-link{display:inline-flex;align-items:center;min-height:2.75rem;margin-inline:.25rem;font-size:.9rem;color:#f3f1eb}
.card-link:hover{color:#b9e64a}
.card>div:first-child{overflow:hidden}
.pimg{display:block;width:100%;height:100%;object-fit:cover}
.build{position:relative;height:72rem}
.build-pin{position:sticky;top:5.5rem;height:34rem;overflow:hidden;border-radius:24px;background:#0b0c0b}
.build-pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:none;transform:none;filter:none}
.build-pin .build-ghost{filter:grayscale(1) brightness(.28) contrast(1.2)}
.build-line{position:absolute;left:0;right:0;top:0;height:2px;background:#b9e64a;box-shadow:0 0 18px #b9e64a;opacity:0}
.build-copy{position:absolute;left:0;right:0;bottom:0;padding:5rem 1.5rem 1.5rem;background:linear-gradient(transparent,#060606e6);text-align:center}
@keyframes vyra-print{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vyra-line{from{top:100%;opacity:1}to{top:0;opacity:1}}
@keyframes vyra-zoom{from{transform:scale(1.16);filter:brightness(.55)}to{transform:scale(1);filter:brightness(1)}}
@supports (animation-timeline:view()){.build{view-timeline-name:--build}.build-pin .build-img{animation:vyra-print linear both;animation-timeline:--build;animation-range:contain 0% contain 100%}.build-line{animation:vyra-line linear both;animation-timeline:--build;animation-range:contain 0% contain 100%}.card .pimg,.wide-img{animation:vyra-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}}
@supports not (animation-timeline:view()){.build{height:auto}.build-pin{position:relative;top:0}}
@media (prefers-reduced-motion:reduce){.build{height:auto}.build-pin{position:relative;top:0}.build-pin .build-img,.build-line,.card .pimg,.wide-img{animation:none}}
@media (max-width:640px){.build-pin{height:26rem}.build{height:60rem}}
@keyframes vyra-recede{to{transform:scale(.95);opacity:.35}}
@supports (animation-timeline:view()){main>section:first-of-type{animation:vyra-recede linear both;animation-timeline:view();animation-range:exit 0% exit 90%}}
@media (prefers-reduced-motion:reduce){main>section:first-of-type{animation:none}}
@supports (animation-timeline:view()){h2.title-gradient:not(#build-title){animation:vyra-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}}
@media (prefers-reduced-motion:reduce){h2.title-gradient{animation:none}}
@media (hover:hover){.card{transition:background-color .18s ease,translate .25s ease}.card:hover{translate:0 -3px}}
.pimg,.wide-img,.w-card img,.build-pin img{background:#141514}
.wheel-pin{display:block;height:calc(30rem + 900px + 3rem)}
.wheel-pin .wheel-stage{position:sticky;top:5.5rem}
@media (max-width:900px){.wheel-pin .wheel-stage{top:7.5rem}}
@media (max-width:640px){.wheel-pin{height:calc(23rem + 900px + 3rem)}}
html,body{overflow-x:clip}
header nav{max-width:1180px!important;min-height:56px!important;padding-inline:clamp(20px,5vw,48px)!important;box-sizing:content-box}
main{padding-inline:clamp(20px,5vw,48px)!important}
main>section:first-of-type{max-width:1180px;margin:8px auto 0;padding:clamp(64px,10vw,120px) 24px!important;border:0!important;border-radius:28px}
main>div{max-width:1180px!important;gap:clamp(96px,12vw,160px)!important;padding-block:clamp(96px,12vw,160px)!important}
h1.title-gradient{font-size:clamp(40px,7.4vw,80px)!important}
h2.title-gradient{font-size:clamp(32px,4.6vw,52px)!important;line-height:1.25}
main p{line-height:1.7}
.grid3{gap:clamp(28px,3vw,40px) clamp(16px,2vw,24px)!important}
.card{padding:0!important}.card:hover{background:none!important}
.card>div:first-child{border-radius:18px!important}
.card>div:nth-child(2){padding:16px 0 4px!important}
.card h3{font-size:17px!important}
.card>div:nth-child(2) span{font-size:15px!important}
.card>p{margin:0!important;font-size:15px!important;color:#a6a8a5!important}
.card-link{margin:0!important;font-size:15px}
#shop>div:first-child{margin-bottom:clamp(32px,4vw,48px)!important}
.split{grid-template-columns:5fr 7fr!important;gap:clamp(40px,7vw,96px)!important}
main section[aria-label]{gap:clamp(32px,4vw,48px)!important;text-align:center}
td,th{padding-block:18px!important}
#business h2{margin-bottom:clamp(32px,4vw,48px)!important}
form{padding:clamp(24px,3vw,40px)!important;gap:20px!important;border-radius:24px!important}
.field{min-height:48px;border-radius:12px}
.build-pin{height:min(72vh,640px);border-radius:28px;top:72px}
.wheel-stage{border-radius:0;margin-inline:calc(50% - 50vw)}.wheel-pin .wheel-stage{top:max(72px,calc(50vh - 16rem))}
.wheel-pin>p{position:sticky;top:calc(max(72px,calc(50vh - 16rem)) + 30.75rem)}
footer>div{max-width:1180px!important;padding-block:48px!important;line-height:1.7}
footer{padding-inline:clamp(20px,5vw,48px)!important}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)!important}.wheel-pin .wheel-stage,.build-pin{top:116px}.wheel-pin>p{top:calc(116px + 23.75rem)}.build-pin{height:min(62vh,520px)}}
@media (max-width:560px){main>section:first-of-type{border-radius:22px}.build-pin,.wheel-stage{border-radius:22px}}
.wheel-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(transparent,#060606 68%);pointer-events:none}
.wheel-stage>div:last-of-type{z-index:2}
main::before{content:"";position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.2;background:url(/assets/grain-s.d53a75c2ed.png),repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 5px)}
header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#060606f5!important}
@keyframes vyra-zoom{from{transform:scale(1.1)}to{transform:scale(1)}}
.wheel-stage::after{height:44%!important;background:linear-gradient(transparent,#060606 42%)!important}
.build-pin img{height:calc(100% - 9rem)!important;bottom:auto!important}
.build-copy{height:9rem;box-sizing:border-box;padding:1.5rem!important;background:#0b0c0b!important;display:grid;align-content:center}
@keyframes vyra-line{from{top:calc(100% - 9rem);opacity:1}to{top:0;opacity:1}}
#shop>div:first-child{flex-direction:column;align-items:center!important;text-align:center}
#business h2{text-align:center}
.split{grid-template-columns:minmax(0,1fr)!important;max-width:760px;width:100%;margin-inline:auto;gap:32px!important;text-align:center}
.sticky{position:static!important}
.split>div>p{margin-inline:auto!important}
.split ol,.split form,.split details,.split>ul{text-align:start}
#about ul{justify-content:center}
footer>div{justify-content:center!important;text-align:center}
footer nav{justify-content:center}
.card-link{min-height:44px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
table{min-width:0!important}
form>div,.field{min-width:0;max-width:100%}
h1,h2,h3,p{overflow-wrap:anywhere}
main>section:first-of-type{min-height:calc(100svh - 72px);box-sizing:border-box}
.build-pin{height:min(calc(100svh - 96px),640px)}
@media (max-width:900px){.wheel-pin>p{top:calc(116px + 30.75rem)}.build-pin{height:min(calc(100svh - 136px),520px)}main>section:first-of-type{min-height:calc(100svh - 124px)}}
@media (max-width:640px){.wheel-pin>p{top:calc(116px + 23.75rem)}}
.v-btn{position:relative;display:block;padding:0;border:0;background:none;cursor:pointer;width:min(340px,70vw);aspect-ratio:218/107;border-radius:8px}
.v-btn span{display:block;position:absolute;inset:0}
.v-free{animation:none}
.vs1,.vs2{background:repeating-linear-gradient(180deg,#f3f1eb 0 2px,#9a9c99 2px 3px)}
.vs1{clip-path:polygon(0 0,22.7% 0,60.5% 100%,37.3% 100%)}
.vs2{clip-path:polygon(76.4% 0,100% 0,68.2% 83%,56.4% 50.5%)}
.slice{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.wheel-stage{--r:900px;--cw:250px;--ch:312px;position:relative;overflow:hidden;height:30rem;touch-action:pan-y;cursor:grab;user-select:none;border-radius:24px}
.wheel-stage:active{cursor:grabbing}
.wheel{position:absolute;left:50%;top:calc(var(--r) + 190px);width:0;height:0}
.w-card{position:absolute;left:calc(var(--cw) / -2);top:calc(var(--ch) / -2);width:var(--cw);height:var(--ch)}
.w-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px;pointer-events:none;animation:none}
@media (max-width:640px){.wheel-stage{--r:560px;--cw:164px;--ch:206px;height:23rem}.wheel{top:calc(var(--r) + 130px)}}
@media (prefers-reduced-motion:reduce){.slice{transition:none}}
@media (max-width:900px){
.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
.split{grid-template-columns:minmax(0,1fr);gap:2rem}
.sticky{position:static}
header nav{flex-wrap:wrap}
.nav-links{order:3;width:100%;overflow-x:auto;gap:1.25rem;white-space:nowrap;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{display:inline-flex;align-items:center;min-height:2.75rem}
}
@media (max-width:560px){.grid3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
:root{--head:96px;--wh:30rem;--wtop:max(104px,calc(96px + (100svh - 96px - var(--wh) - 3.5rem)/2))}
header{background:#060606!important}
header nav{min-height:0!important;column-gap:.5rem;row-gap:0;padding-top:4px;padding-bottom:4px;box-sizing:border-box}
header nav{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:0 .5rem!important}
header nav>a:first-child img:first-child{height:14px!important}
header nav>a:first-child img:last-child{height:13px!important}
.nav-links{grid-column:1/-1;grid-row:2;width:auto!important}
header nav>div:last-child{gap:.75rem!important}
.nav-cta{min-height:2.25rem;padding-inline:.85rem;font-size:.8rem;white-space:nowrap}
.nav-links{min-height:2.75rem}
.wheel-pin .wheel-stage{top:var(--wtop)!important}
.wheel-pin>p{top:calc(var(--wtop) + var(--wh) + .75rem)!important}
.build-pin{top:104px!important;height:min(calc(100svh - 120px),520px)!important}
main>section:first-of-type{min-height:calc(100svh - 112px)!important}
}
@media (max-width:640px){:root{--wh:23rem}}
@media (max-width:350px){.nav-cta{display:none}}
.wheel-pin .wheel-stage{margin-bottom:3.5rem}
.wheel-pin>p{margin-top:-2.75rem!important}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.built,.nozzle{animation:none}
.btn,.card,.plus{transition:none}
}