.scroll-progress{position:fixed;z-index:30;left:0;top:0;width:var(--scroll-progress,0%);height:3px;background:linear-gradient(90deg,#53dcff,#9e6bff,#eac276);box-shadow:0 0 16px rgba(83,220,255,.7);pointer-events:none}
.hero{--mode-accent:#eac276;--mode-glow:rgba(234,194,118,.26);transition:background-color .5s}
.hero[data-mode="chaos"]{--mode-accent:#ad78ff;--mode-glow:rgba(173,120,255,.38)}
.hero[data-mode="real"]{--mode-accent:#53dcff;--mode-glow:rgba(83,220,255,.32)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.hero-inner{position:relative;z-index:1;min-height:800px}
.hero-content{max-width:740px}
.hero h1{font-size:clamp(3.6rem,6.65vw,7.5rem)}
.hero h1 em{color:var(--mode-accent);text-shadow:0 0 34px var(--mode-glow);transition:color .45s,text-shadow .45s}
.hero .eyebrow{color:var(--mode-accent);transition:color .45s}
.hero .eyebrow::before{background:var(--mode-accent);box-shadow:0 0 14px var(--mode-accent);transition:background .45s,box-shadow .45s}
.portrait-area{isolation:isolate}
.portrait-area::after{background:var(--mode-accent);opacity:.23;transition:background .55s}
.portrait-frame{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s ease-out,border-color .45s;will-change:transform;border-color:var(--mode-accent)}
.portrait-area::before{border-color:var(--mode-accent);opacity:.52;transition:border-color .45s}
.portrait-ui.top{border-color:var(--mode-accent);transition:border-color .45s}
.portrait-ui.top .tiny-square{background:var(--mode-accent);box-shadow:0 0 12px var(--mode-accent);transition:background .45s}
.orbit{position:absolute;z-index:-1;left:-6%;top:3%;width:112%;aspect-ratio:1;border-radius:50%;pointer-events:none}
.orbit-one{border:1px dashed rgba(83,220,255,.26);animation:orbit 70s linear infinite}
.orbit-two{left:3%;top:13%;width:94%;border:1px solid rgba(158,107,255,.14);border-left-color:var(--mode-accent);border-right-color:var(--mode-accent);animation:orbit 48s linear infinite reverse;transition:border-color .45s}
.orbit-one::before,.orbit-two::before{content:"";position:absolute;top:14%;left:14%;width:7px;height:7px;background:var(--mode-accent);border-radius:50%;box-shadow:0 0 18px var(--mode-accent);transition:background .45s}
.mode-console{position:relative;margin-top:2.4rem;width:min(100%,640px);padding:1.05rem 1.2rem 1.15rem;background:linear-gradient(145deg,rgba(35,32,67,.84),rgba(9,14,35,.88));border:1px solid rgba(158,107,255,.5);box-shadow:0 22px 55px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(16px);clip-path:polygon(0 0,calc(100% - 19px) 0,100% 19px,100% 100%,19px 100%,0 calc(100% - 19px))}
.mode-console::before{content:"";position:absolute;top:0;left:0;width:42%;height:2px;background:linear-gradient(90deg,var(--mode-accent),transparent);box-shadow:0 0 20px var(--mode-accent);transition:background .45s}
.console-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--mode-accent);font-size:.72rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase;transition:color .45s}
.console-wave{height:18px;display:flex;align-items:center;gap:3px}
.console-wave i{display:block;width:2px;height:25%;background:var(--mode-accent);box-shadow:0 0 8px var(--mode-accent);animation:wave 1.1s ease-in-out infinite alternate}
.console-wave i:nth-child(2),.console-wave i:nth-child(6){animation-delay:-.7s}
.console-wave i:nth-child(3),.console-wave i:nth-child(5){animation-delay:-.3s}
.console-wave i:nth-child(4){animation-delay:-.9s}
.mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;margin-top:.9rem;border-bottom:1px solid rgba(178,161,221,.27)}
.mode-tab{position:relative;min-height:47px;border:0;border-bottom:2px solid transparent;background:transparent;color:#bcb9d1;text-align:left;padding:.65rem .3rem;font:750 .88rem/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.mode-tab span{color:#777baf;font-size:.68rem;letter-spacing:.08em;margin-right:.4rem}
.mode-tab:hover{color:#fff;background:rgba(255,255,255,.04)}
.mode-tab[aria-selected="true"]{color:var(--white);border-color:var(--mode-accent);background:linear-gradient(0deg,rgba(158,107,255,.12),transparent)}
.mode-tab[aria-selected="true"] span{color:var(--mode-accent)}
.mode-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.mode-panel{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1rem;min-height:122px;padding-top:1.2rem;transition:opacity .16s,transform .16s}
.mode-panel.is-switching{opacity:0;transform:translateY(7px)}
.mode-kicker{display:block;color:var(--mode-accent);font-size:.65rem;font-weight:850;letter-spacing:.19em;text-transform:uppercase;margin-bottom:.38rem;transition:color .45s}
.mode-panel h2{font:800 clamp(1.2rem,1.8vw,1.62rem)/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.035em;margin:0 0 .4rem}
.mode-panel p{color:#c6c3d9;font-size:.89rem;line-height:1.5;max-width:430px;margin:0}
.mode-panel a{color:var(--mode-accent);font-size:.77rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding-bottom:.2rem;border-bottom:1px solid currentColor;transition:color .45s}
.mode-panel a:hover{color:#fff}
.mode-panel a span{font-size:1.1rem;margin-left:.3rem}
.vibe-card{background:radial-gradient(320px circle at var(--card-x,50%) var(--card-y,50%),rgba(158,107,255,.22),transparent 65%),linear-gradient(145deg,rgba(46,37,88,.55),rgba(13,15,35,.8))}
.motion-ready .section-head,.motion-ready .vibe-card,.motion-ready .about-grid,.motion-ready .connect-inner{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.motion-ready .section-head.is-visible,.motion-ready .vibe-card.is-visible,.motion-ready .about-grid.is-visible,.motion-ready .connect-inner.is-visible{opacity:1;transform:translateY(0)}
.motion-ready .vibe-card:nth-child(2){transition-delay:.1s}
.motion-ready .vibe-card:nth-child(3){transition-delay:.2s}
.motion-ready .vibe-card.is-visible:hover{transform:translateY(-5px)}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes wave{to{height:100%}}
@media(max-width:900px){.hero-inner{min-height:0}.hero-content{max-width:740px}.portrait-area{margin-top:1rem}.orbit{top:1%}.orbit-two{top:11%}}
@media(max-width:600px){.hero h1{font-size:clamp(2rem,15vw,5.3rem)}.mode-console{margin-top:2rem;padding:.95rem .85rem 1.15rem}.mode-tab{font-size:.79rem;padding:.58rem .2rem}.mode-tab span{display:block;margin:0 0 .17rem}.mode-panel{grid-template-columns:1fr;gap:.8rem;min-height:0}.mode-panel a{justify-self:start}.orbit{display:none}.hero-canvas{opacity:.55}}
@media(max-width:380px){.mode-tab{font-size:.72rem}.mode-panel h2{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){.orbit,.console-wave i{animation:none}.portrait-frame{transform:none!important}.motion-ready .section-head,.motion-ready .vibe-card,.motion-ready .about-grid,.motion-ready .connect-inner{opacity:1;transform:none;transition:none}.mode-panel{transition:none}}