*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#020204;font-family:'Oswald',Arial,Helvetica,sans-serif;color:#fff}
.page{position:relative;width:100%;height:100vh;min-height:620px;overflow:hidden;background:
radial-gradient(ellipse 55% 52% at 50% 42%,#170713 0%,#080309 42%,#020204 78%);
isolation:isolate}

/* side light architecture — soft wide glow + thin hot core, matching reference */
.light{position:absolute;top:0;height:100%;z-index:-4;pointer-events:none;animation:drift 11s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,black 8%,black 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,black 8%,black 78%,transparent 100%)}
.light::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);filter:blur(.4px)}
.light.red{width:130px;background:linear-gradient(90deg,transparent 0%,rgba(229,9,20,.02) 32%,rgba(229,9,20,.16) 50%,rgba(229,9,20,.02) 68%,transparent 100%);filter:blur(9px)}
.light.red::before{background:linear-gradient(180deg,transparent 0%,rgba(255,190,180,.95) 8%,#ff3b30 30%,#e5091f 70%,rgba(255,120,110,.9) 92%,transparent 100%);box-shadow:0 0 10px 1px rgba(255,60,50,.9),0 0 26px 5px rgba(229,9,20,.5)}
.light.purple{width:95px;background:linear-gradient(90deg,transparent 0%,rgba(148,30,255,.02) 32%,rgba(148,30,255,.13) 50%,rgba(148,30,255,.02) 68%,transparent 100%);filter:blur(13px)}
.light.purple::before{background:linear-gradient(180deg,transparent 0%,rgba(230,200,255,.95) 8%,#a339ff 30%,#7c00ff 70%,rgba(190,130,255,.9) 92%,transparent 100%);box-shadow:0 0 10px 1px rgba(148,30,255,.85),0 0 26px 5px rgba(124,0,255,.45)}

.l1{left:calc(6.2% - 75px);animation-delay:0s}
.l2{left:calc(18.2% - 55px);animation-delay:-4s}
.r1{right:calc(6.4% - 75px);animation-delay:-2s}
.r2{right:calc(18.4% - 55px);animation-delay:-6s}

.floor{position:absolute;left:0;right:0;bottom:0;height:40%;z-index:-3;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(6,2,5,.28) 55%,rgba(3,1,3,.7) 85%,rgba(2,1,2,.92) 100%)}
.floor::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 30%);mix-blend-mode:screen}

.atmosphere{position:absolute;left:50%;top:32%;width:56%;height:50%;transform:translate(-50%,-50%);z-index:-5;background:radial-gradient(ellipse,rgba(210,0,50,.16),transparent 66%);filter:blur(55px);animation:breathe 6s ease-in-out infinite alternate}

.particles{position:absolute;inset:0;z-index:-2;pointer-events:none}.particle{position:absolute;width:1px;height:1px;border-radius:50%;background:#fff;opacity:.18;animation:twinkle 4s ease-in-out infinite}

.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,transparent 15%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.76) 100%)}
.grain{position:absolute;inset:-50%;z-index:10;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .14s steps(2) infinite}

/* perfectly centered content */
.hero{position:absolute;z-index:5;left:50%;top:41%;width:min(1100px,92vw);transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:column;align-items:center}

.brand{width:100%;text-align:center;line-height:.86}
.ca-unnat{font-family:'Anton',Impact,sans-serif;font-size:clamp(52px,7.2vw,108px);font-weight:400;letter-spacing:.01em;
  background:linear-gradient(180deg,#ff4a3d 0%,#f22a22 22%,#d81a1a 48%,#a01212 72%,#6b0a0a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(229,9,20,.4));
  animation:titleIn 2.2s cubic-bezier(.16,1,.3,1) both}
.audit-aura{margin-top:10px;font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(50px,8vw,120px);letter-spacing:.005em;
  background:linear-gradient(180deg,#f2f0ef 0%,#ffffff 22%,#e7e5e3 48%,#c2bfbd 68%,#88807e 88%,#3a3432 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,255,255,.12));
  animation:titleIn 2.35s .08s cubic-bezier(.16,1,.3,1) both}

.divider{margin-top:22px;width:min(430px,60vw);height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22) 35%,rgba(229,9,20,.9) 50%,rgba(255,255,255,.22) 65%,transparent);box-shadow:0 0 12px rgba(229,9,20,.6);animation:fadeUp 1.2s 1.35s both}

.workspace{margin-top:22px;font-family:'Oswald',sans-serif;font-size:clamp(9px,1vw,13px);font-weight:400;letter-spacing:.52em;color:rgba(255,255,255,.5);padding-left:.52em;animation:fadeUp 1.2s 1.55s both}

.start{margin-top:38px;width:min(400px,68vw);height:72px;border:1px solid rgba(229,9,20,.72);background:rgba(4,3,7,.48);color:#fff;display:flex;align-items:center;justify-content:center;gap:30px;cursor:pointer;font-family:'Oswald',sans-serif;font-size:12px;font-weight:500;letter-spacing:.36em;padding-left:.36em;box-shadow:0 0 26px rgba(229,9,20,.08),inset 0 0 22px rgba(229,9,20,.025);backdrop-filter:blur(10px);animation:fadeUp 1.2s 1.9s both;transition:.35s ease}
.start strong{font-size:23px;font-weight:300;color:#f0222b;line-height:1;transition:transform .3s}
.start:hover{transform:translateY(-3px);border-color:#e50914;background:rgba(229,9,20,.075);box-shadow:0 0 35px rgba(229,9,20,.22),inset 0 0 25px rgba(229,9,20,.04)}
.start:hover strong{transform:translateX(6px)}

.footer{position:absolute;z-index:5;left:0;right:0;bottom:31px;margin:0 auto;width:max-content;display:flex;align-items:center;justify-content:center;gap:31px;white-space:nowrap;color:rgba(255,255,255,.4);font-family:'Oswald',sans-serif;font-size:10px;font-weight:400;letter-spacing:.42em;padding-left:.42em;opacity:0;animation:fadeUpFooter 1.2s 2.2s forwards}
.footer i{display:block;width:5px;height:5px;border-radius:50%;background:#e50914;box-shadow:0 0 9px rgba(229,9,20,.8)}

@keyframes titleIn{0%{opacity:0;transform:scale(3.8);filter:blur(17px)}55%{opacity:1;filter:blur(1px)}100%{transform:scale(1);filter:blur(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUpFooter{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
@keyframes drift{from{translate:-16px 0}to{translate:16px 0}}
@keyframes breathe{from{opacity:.55;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes twinkle{0%,100%{opacity:.06;transform:scale(.7)}50%{opacity:.35;transform:scale(1.5)}}
@keyframes grain{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}

@media(max-width:700px){
.page{min-height:570px}
.hero{top:45%}
.divider{width:70vw}
.workspace{letter-spacing:.28em;padding-left:.28em}
.start{width:82vw;height:64px;gap:18px;letter-spacing:.24em;padding-left:.24em}
.footer{bottom:22px;gap:15px;font-size:7px;letter-spacing:.26em;padding-left:.26em}
.footer i{width:4px;height:4px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}