/* Vezzuvio signal system: motion inspired by the reference, with our own imagery and color. */
.hero.wrap{background-color:#0b1018}
.hero>div.hero-mesh{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;animation:none}
.hero>.hero-mesh:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,#000,transparent 88%);opacity:.75}
.hero>.hero-mesh:after{content:"";position:absolute;inset:0;background:radial-gradient(440px circle at var(--hero-x,65%) var(--hero-y,45%),#ff6b2530,transparent 70%);mix-blend-mode:screen;transition:opacity .4s}
.hero-mesh svg{position:absolute;inset:0;width:100%;height:100%;opacity:.36;animation:meshDrift 16s ease-in-out infinite alternate}
.mesh-lines{fill:none;stroke:#ffab7b;stroke-width:1;stroke-opacity:.45;stroke-dasharray:4 12;animation:meshFlow 28s linear infinite}
.mesh-points{fill:#ff9462;filter:drop-shadow(0 0 5px #ff7b43)}
.mesh-points circle:nth-child(3n){animation:meshPulse 3.8s ease-in-out infinite alternate}
.hero>div:nth-child(2){position:relative;z-index:2;animation:heroEnter .8s cubic-bezier(.2,.8,.2,1) both}
.hero>.visual{z-index:2}
.hero h1 em{background:linear-gradient(105deg,#ff7439 10%,#ffb68c 42%,#ff6126 75%,#ff7439);background-size:220% 100%;color:transparent;-webkit-background-clip:text;background-clip:text;animation:emberShift 7s ease-in-out infinite}
.hero .visual .browser{position:relative;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .28s ease-out}
.hero .visual .browser:after{content:"";position:absolute;inset:-80% auto -80% -40%;width:23%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,#fff8,transparent);pointer-events:none;opacity:.23;animation:glassSweep 9s ease-in-out infinite}
.hero .visual:before{box-shadow:0 0 0 18px #ff77330a,0 0 0 50px #ff773306}
.visual-chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid #ffffff48;border-radius:7px;background:#111820dc;color:#fff;box-shadow:0 14px 35px #0006;font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em;backdrop-filter:blur(12px);white-space:nowrap;animation:chipFloat 6s ease-in-out infinite alternate}
.visual-chip:before{content:"";width:6px;height:6px;border-radius:50%;background:#ff753d;box-shadow:0 0 10px #ff753d}
.chip-top{top:-18px;left:-38px;transform:rotate(-5deg)}
.chip-bottom{top:105px;right:-30px;transform:rotate(4deg);animation-delay:-3s}
.feature-stage{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 80% 20%,#273344 0,#121923 35%,#0d1118 76%);color:#f5f5f3}
.feature-stage:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(180deg,#000 15%,transparent 100%)}
.feature-stage:after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(500px circle at var(--feature-x,72%) var(--feature-y,38%),#ff682524,transparent 70%);pointer-events:none}
.feature-stage .section{position:relative}
.feature-stage .section:before{content:"01 / THE WEBSITE";display:block;margin-bottom:32px;color:#ff985f;font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.21em}
.feature-stage h2{color:#fff;max-width:1000px}
.feature-stage .sectionlead{color:#c4ccd1}
.feature-stage .eyebrow{color:#ff9461}
.feature-stage .cards{position:relative}
.feature-stage .cards:before{content:"";position:absolute;top:-31px;left:0;width:100%;height:1px;background:linear-gradient(90deg,#ff793a,transparent 80%);transform:scaleX(var(--feature-line,0));transform-origin:left;transition:transform .9s ease}
.feature-stage .card{min-height:330px;border:1px solid #ffffff26;background:linear-gradient(150deg,#242b35e6,#161c25ee);box-shadow:0 15px 45px #0002;isolation:isolate}
.feature-stage .card:before{z-index:-1;background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),#ff743634,transparent 57%);opacity:1}
.feature-stage .card:after{color:#ff9b65}
.feature-stage .card h3{color:#fff}
.feature-stage .card p{color:#c6cbd0}
.feature-stage .card .num{color:#ff9966}
.feature-stage .card:hover{border-color:#ff8f5f99;box-shadow:0 25px 65px #0006,0 0 30px #ff67251e}
.portfolio-card .portfolio-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(330px circle at var(--art-x,50%) var(--art-y,40%),#ffffff9c,transparent 62%);mix-blend-mode:soft-light;opacity:0;transition:opacity .3s}
.portfolio-card:hover .portfolio-art:after,.portfolio-card:focus-visible .portfolio-art:after{opacity:1}
.portfolio-card:hover .portfolio-browser,.portfolio-card:focus-visible .portfolio-browser{box-shadow:0 30px 75px #17181c6a}
.showcase{background-color:#101720;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:78px 78px}
.showcase-stage{box-shadow:0 40px 110px #0008,0 0 80px #ff6d2518}
.steps{position:relative;--journey:0}
.steps:before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:2px;background:#ff6429;transform:scaleX(var(--journey));transform-origin:left;box-shadow:0 0 13px #ff642969;pointer-events:none}
.formsection{background-color:#0d141c;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:78px 78px}
.formsection:after{content:"";position:absolute;inset:0;background:radial-gradient(580px circle at 78% 18%,#ff6e2520,transparent 70%);pointer-events:none}
.formsection .wrap{z-index:1}
@keyframes meshFlow{to{stroke-dashoffset:-256}}
@keyframes meshDrift{from{transform:translate3d(-8px,5px,0)}to{transform:translate3d(10px,-8px,0)}}
@keyframes meshPulse{from{opacity:.3}to{opacity:1}}
@keyframes emberShift{0%,100%{background-position:0%}50%{background-position:100%}}
@keyframes glassSweep{0%,30%{left:-40%}65%,100%{left:140%}}
@keyframes chipFloat{from{translate:0 -3px}to{translate:0 5px}}
@media(max-width:980px){.hero-mesh svg{opacity:.22}.chip-top{left:-10px}.chip-bottom{right:-10px}}
@media(max-width:600px){
  .hero>.hero-mesh:before{background-size:48px 48px;opacity:.45}
  .hero-mesh svg{opacity:.14}
  .visual-chip{font-size:8px;padding:8px 10px}
  .chip-top{top:-20px;left:-5px}
  .chip-bottom{display:none}
  .feature-stage .section:before{margin-bottom:22px}
  .feature-stage .card{min-height:270px}
  .steps:before{left:0;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(var(--journey));transform-origin:top}
}
@media(prefers-reduced-motion:reduce){
  .hero-mesh svg,.mesh-lines,.mesh-points circle,.hero h1 em,.hero .visual .browser:after,.visual-chip{animation:none!important}
  .hero>div:nth-child(2){animation:none!important}
  .hero .visual .browser{transform:none!important;transition:none!important}
  .feature-stage .cards:before,.steps:before{transform:none!important}
  .feature-stage .cards:before{opacity:1}
  .visual-chip{translate:none}
}