:root{--bg:#07070c;--fg:#fff;--mut:#a3a3b8;--v:#6a4bff;--b:'Manrope',system-ui,sans-serif;--s:'Instrument Serif',Georgia,serif;--g:linear-gradient(135deg,#e0b8ff,#5b3bff 50%,#3aa0ff)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font:400 1.05rem/1.7 var(--b);color:var(--fg);background:var(--bg);overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;z-index:90;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #9d8bff;outline-offset:3px}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
section{padding:clamp(4.5rem,10vw,9rem) 0}
.soft{background:rgba(255,255,255,.035)}
.center{text-align:center}
h2{font:800 clamp(2rem,6vw,4.6rem)/1 var(--b);text-transform:uppercase;letter-spacing:-.03em;margin-bottom:2.5rem}
h2 em{font:400 1em var(--s);letter-spacing:-.02em}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--g);transform:scaleX(0);transform-origin:0;z-index:95}
.glow{position:fixed;left:0;top:0;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(106,75,255,.22),transparent 65%);pointer-events:none;transform:translate(-50%,-50%);z-index:1}
.pre{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;font:800 clamp(4rem,18vw,12rem) var(--b);transition:transform .9s cubic-bezier(.8,0,.2,1)}
.pre.done{transform:translateY(-100%)}

header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(7,7,12,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo img{height:34px;filter:invert(1)}
nav{display:flex;gap:2rem}
nav a{position:relative;font-weight:600;font-size:.95rem}
nav a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--g);transform:scaleX(0);transform-origin:right;transition:transform .35s}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;position:relative}
.burger i{position:absolute;left:8px;right:8px;height:2px;background:#fff;transition:.3s}
.burger i:first-child{top:15px}.burger i:last-child{top:23px}
.open .burger i:first-child{top:19px;transform:rotate(45deg)}
.open .burger i:last-child{top:19px;transform:rotate(-45deg)}

.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;padding:110px 0 4rem;background:radial-gradient(60% 60% at 90% 90%,rgba(58,90,255,.22),transparent),radial-gradient(40% 50% at 0% 100%,rgba(140,40,120,.2),transparent)}
.hero-in{position:relative;padding-left:clamp(0px,20vw,300px)}
.ring{--R:270px;position:absolute;left:-2%;top:50%;width:1px;height:1px;perspective:1300px;margin-top:-10px}
.cyl{position:absolute;inset:0;transform-style:preserve-3d;animation:spin 24s linear infinite}
.cyl span{position:absolute;left:0;top:0;translate:-50% -50%;transform:rotateY(calc(var(--i)*40deg)) translateZ(var(--R));font:800 clamp(1.2rem,2.6vw,2rem) var(--b);text-transform:uppercase;white-space:nowrap;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes spin{from{transform:rotateX(-16deg) rotateZ(-14deg) rotateY(0)}to{transform:rotateX(-16deg) rotateZ(-14deg) rotateY(360deg)}}
h1{font:800 clamp(3.4rem,12vw,9.5rem)/.92 var(--b);text-transform:uppercase;letter-spacing:-.04em}
.w{display:block;overflow:hidden;padding-bottom:.1em}
.w.a{font:400 1em var(--s);letter-spacing:-.02em}
.w.b{padding-left:.5em}
.l{display:inline-block;transform:translateY(110%);animation:up 1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*60ms + 1.7s)}
@keyframes up{to{transform:none}}
.role{margin-top:2rem;font-weight:600;font-size:clamp(1rem,2vw,1.25rem);max-width:36ch}
.lead{margin-top:1rem;max-width:46ch;color:var(--mut)}
.cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}
.role,.lead,.cta{opacity:0;animation:fade 1s 2.5s forwards}
@keyframes fade{to{opacity:1}}
.btn{display:inline-block;padding:.95rem 1.8rem;border-radius:99px;background:#fff;color:#000;font-weight:700;transition:background .3s,color .3s,transform .2s}
.btn:hover{background:#7f66ff;color:#fff}
.btn.ghost{background:none;color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.btn.ghost:hover{background:#fff;color:#000}

.marquee{border-block:1px solid #24242e;overflow:hidden;padding:1.2rem 0;font:800 clamp(1.6rem,4vw,3rem) var(--b);text-transform:uppercase}
.track{display:flex;width:max-content;animation:scroll 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{white-space:nowrap;color:transparent;-webkit-text-stroke:1px #fff}
.track span:nth-child(even){font:400 1em var(--s);color:#fff;-webkit-text-stroke:0}
.track span::after{content:"\2726";margin:0 2rem;font:400 1rem var(--b);color:#7f66ff;-webkit-text-stroke:0}
@keyframes scroll{to{transform:translateX(-50%)}}

.about .wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.about p{margin-bottom:1.2rem;max-width:56ch;color:#d4d4e0}
.photos{position:relative;isolation:isolate;padding-bottom:16%}
.photos::before{content:"";position:absolute;inset:8% -8% 4% 12%;background:radial-gradient(circle,rgba(106,75,255,.4),transparent 65%);filter:blur(40px);z-index:-1}
.photo{overflow:hidden;border-radius:.6rem;background:#14141c;transition:transform .2s}
.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.8) contrast(1.05);transition:filter .5s}
.photo:hover img{filter:none}
.photo.main{width:82%;aspect-ratio:4/5}
.photo.side{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:1;border:6px solid var(--bg);box-shadow:0 30px 60px rgba(0,0,0,.55);animation:float 7s ease-in-out infinite}

.tabs{display:flex;justify-content:center;align-items:center;gap:1.2rem;margin-bottom:3rem}
.tabnames{display:flex;gap:clamp(.8rem,3vw,2.5rem)}
.tabnames button{background:none;border:0;cursor:pointer;color:#5c5c6c;font:800 clamp(1rem,2.6vw,1.8rem) var(--b);text-transform:uppercase;transition:color .3s}
.tabnames button.on,.tabnames button:hover{color:#fff}
.arr{width:44px;height:44px;border-radius:50%;background:none;border:1px solid #555;color:#fff;font-size:1.1rem;cursor:pointer;transition:background .3s}
.arr:hover{background:#fff;color:#000}
.bubbles{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 1.2rem;min-height:300px}
.bubbles[hidden]{display:none}
.bub{width:min(var(--s),42vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;padding:1rem;cursor:default;background:radial-gradient(circle at 35% 20%,rgba(255,255,255,.6),rgba(226,160,255,.55) 16%,rgba(70,45,225,.95) 55%,#2f6dff);box-shadow:inset 0 0 40px rgba(120,200,255,.55),0 24px 70px rgba(70,45,225,.4);animation:pop .8s cubic-bezier(.2,1.4,.4,1) backwards,float 6s ease-in-out infinite;animation-delay:calc(var(--k)*.15s),calc(.8s + var(--k)*.7s);transition:transform .4s}
.bub:hover{transform:scale(1.1)}
.bub span{font:800 clamp(.8rem,1.7vw,1.15rem)/1.2 var(--b);text-transform:uppercase;text-align:center}
@keyframes pop{from{transform:scale(0);opacity:0}}
@keyframes float{50%{translate:0 -14px}}

.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid #3a3a48;padding-top:1.2rem}
.steps li::before{content:"0" counter(s);display:block;font:800 3.4rem var(--b);color:transparent;-webkit-text-stroke:1.5px #9d8bff}
.steps h3{font:800 1.2rem var(--b);text-transform:uppercase;margin:.4rem 0}
.steps p{font-size:.95rem;color:var(--mut)}

.mail{display:inline-block;font:800 clamp(1.4rem,4.5vw,3.4rem)/1.2 var(--b);border-bottom:3px solid #7f66ff;word-break:break-all;transition:color .3s}
.mail:hover{color:#b3a4ff}
.social{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.5rem}
.social a{padding:.8rem 1.4rem;border-radius:99px;box-shadow:inset 0 0 0 1.5px #555;font-weight:600;transition:background .3s,box-shadow .3s,transform .2s}
.social a:hover{background:#6a4bff;box-shadow:none}
.clocks{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;margin-top:3.5rem;color:var(--mut);font-size:.9rem}
.clocks b{display:block;color:#fff;font:800 1.6rem var(--b);font-variant-numeric:tabular-nums}
footer{padding:1.6rem 0;font-size:.9rem;color:#888;border-top:1px solid #24242e}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

.rv{opacity:0;transform:translateY(28px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

@media(max-width:900px){.about .wrap{grid-template-columns:1fr}.photos{max-width:460px}.steps{grid-template-columns:repeat(2,1fr)}.hero-in{padding-left:0}.ring{--R:190px;left:12%;opacity:.55}}
@media(max-width:768px){
  .burger{display:block}
  nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:1.2rem;padding:1.5rem 1.25rem 2rem;background:var(--bg);transform:translateY(-130%);visibility:hidden;transition:transform .4s,visibility .4s}
  nav a{font-size:1.3rem}
  .open nav{transform:none;visibility:visible}
}
@media(max-width:520px){.steps{grid-template-columns:1fr}.ring{--R:150px;left:35%}.bub{width:min(var(--s),46vw)}}
@media(pointer:coarse){.glow{display:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.l,.rv{transform:none}.rv{opacity:1}}