/* YOUR STUDIO / PRECISION PASS — original atmosphere & section layouts preserved. */
/* 01. Make the opening website a measured takeover rather than a 2.68x zoom.
   It shifts into the space left by the copy, but not into the lower marquee. */
@media (min-width:901px) and (prefers-reduced-motion:no-preference) {
  .hero-device {
    transform: translate3d(calc(var(--hero-exit,0) * -12vw), calc(var(--hero-exit,0) * -2vh), 0)
      scale(calc(1 + var(--hero-exit,0) * .22));
  }
  /* Keep the scroll text at the foot visible, instead of underneath the preview. */
  .hero-huge-word { bottom:2%; z-index:3; color:#e8d9ff16; }
  .hero-device { z-index:2; }
  .hero-copy { z-index:5; }
}
/* 02. Proper stepped staircase. The blocks touch and their top faces create
   an ascending contour, rather than a grid of floating information cards. */
.staircase {
  position:absolute;
  right:3.3%; bottom:13%;
  width:48%; height:69%;
  display:flex; flex-direction:column; justify-content:flex-end;
  pointer-events:none;
  z-index:2;
}
.staircase-label { align-self:flex-end; font-size:clamp(8px,.75vw,11px);
  font-weight:850; letter-spacing:.14em; color:#d4b7fc; margin-bottom:19px;
  text-align:right; white-space:nowrap; }
.staircase-label span {margin-left:6px;font-size:1.6em}
.staircase-steps{height:76%; width:100%; display:flex; align-items:flex-end;
  justify-content:flex-end; isolation:isolate; padding-left:10px;}
.stair-block{
  --visible:clamp(0, (var(--design-local,1) - var(--start,0)) * 6, 1);
  height:calc(23% + var(--step)*17%);
  flex:1 1 0; position:relative; min-width:0; margin-right:-1px;
  background:linear-gradient(112deg,#2a103f 0%,#7534b2 45%,#371852 96%);
  border:1px solid #bb80ec80; border-bottom:0;
  box-shadow:inset 6px 0 12px #0b081e40, 0 0 18px #7a3dbd35;
  opacity:var(--visible);
  transform:translate3d(0,calc((1 - var(--visible))*48px),0);
}
.stair-block::before{content:"";position:absolute;left:0;right:0;top:-11px;height:11px;
  background:linear-gradient(100deg,#ecbdff,#a46bea 56%,#59347f);
  clip-path:polygon(15% 0,100% 0,85% 100%,0 100%);
  filter:drop-shadow(0 0 5px #b469e54d);}
.stair-block::after{content:"";position:absolute;inset:9px 4px auto auto;
  height:calc(100% - 14px);width:1px;background:#e7c5ff20;}
.stair-final{background:linear-gradient(115deg,#5b2b83,#af6af0 52%,#50216e);}
.stair-final span{position:absolute;right:33%;top:9px;color:#f1dfff;font-size:23px;font-weight:900;}
.staircase-floor{height:3px; width:102%;margin-left:-1%;
  background:linear-gradient(90deg,transparent,#c08cff 45%,#b47ae0 86%,transparent);
  box-shadow:0 0 15px #ba7df87a;}
@media (min-width:901px) and (prefers-reduced-motion:no-preference) {
  .stair-block { transition:none; }
}
/* 03. The actual masonry wall: visible courses with offset joints and
   half bricks at alternating ends. Lower courses settle first as you scroll. */
.process-card:nth-child(2) .glyph-build {
  right:4%;top:16%;width:44%;height:66%;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;transform:none!important;
}
.brick-wall.masonry-wall{width:100%;height:auto;max-width:400px;
  display:flex;flex-direction:column-reverse;gap:5px;transform:perspective(1000px) rotateY(-9deg) rotateX(3deg);
  overflow:visible;
}
.brick-course{display:flex;gap:5px;width:100%;height:43px;}
.masonry-brick{--brick-visible:clamp(0,(var(--card-local,1) - var(--brick-start,0))*7,1);
  display:block;flex:1;min-width:0;position:relative;
  background:linear-gradient(120deg,#cb9ce8 0%,#9c5fc2 17%,#64318c 55%,#28103d 100%);
  border:1px solid #b68bd0;border-bottom:2px solid #261037;
  box-shadow:inset 2px 2px 0 #f0cafa8a,inset -4px -5px 8px #1d0d3299,0 3px 9px #05010c80;
  clip-path:polygon(0 0,94% 0,100% 9%,100% 100%,0 100%);
  opacity:var(--brick-visible);
  transform:translate3d(0,calc((1 - var(--brick-visible))*-76px),0)
     scale(calc(.93 + var(--brick-visible)*.07));
}
.masonry-brick.masonry-half{flex:.5;}
.masonry-brick::before{content:"";position:absolute;top:0;left:0;right:0;height:18%;
  background:linear-gradient(95deg,#e0b7f9b0,#b780e875,transparent);}
.masonry-brick::after{content:"";position:absolute;bottom:7px;left:9px;width:37%;height:1px;
  background:#e4b9fa24;box-shadow:4px -6px 0 #e0b7fa16;}
.build-label{font-size:10px;letter-spacing:.16em;color:#dec2f6;text-align:center;}
/* 04. Final mini-site is a steady upright browser preview, not a spinning tile. */
.process-card:nth-child(3) .glyph-care {transform:none!important;}
.launch-browser {transform:none!important;border-color:#ad78edaa;
  box-shadow:0 20px 38px #0009,0 0 15px #a85feb2e;}
@media (min-width:901px) and (prefers-reduced-motion:no-preference) {
  .launch-browser {opacity:clamp(.50,calc(.50 + var(--card-local,0)*.50),1);
    transform:translate3d(0,calc((1 - var(--card-local,0))*17px),0)
      scale(calc(.96 + var(--card-local,0)*.04))!important;}
}
@media(max-width:900px){
 .staircase{width:48%;right:3%;}
 .brick-course{height:32px;gap:3px;}
 .brick-wall.masonry-wall{gap:3px;transform:none;}
 .process-card:nth-child(2) .glyph-build{top:15%;height:60%;}
 .launch-browser{transform:none!important;}
}
@media(prefers-reduced-motion:reduce){
 .stair-block{--visible:1!important;transform:none!important;}
 .masonry-brick{--brick-visible:1!important;transform:none!important;}
 .launch-browser{opacity:1!important;transform:none!important;}
}
/* Small screens: keep the masonry and mini-browser distinct from the headlines. */
@media(max-width:580px){
  .process-card:nth-child(2) .glyph-build {right:3%;width:48%;top:14%;height:55%;gap:8px;}
  .process-card:nth-child(2) .build-label {font-size:6px;letter-spacing:.07em;white-space:nowrap;}
  .process-card:nth-child(3) .process-glyph {right:4%;top:13%;height:41%;width:53%;opacity:.66;}
  .process-card:nth-child(3) .launch-browser {max-height:100%;}
  .process-card:nth-child(3) .launch-body {gap:5px;padding:8px 12px;}
  .process-card:nth-child(3) .launch-body strong{font-size:18px;}
  .process-card:nth-child(3) .launch-cta{font-size:6px;padding:6px;}
}

/* Symbol cleanup - design accents without stars or arrows */
.brand { gap:10px; }
.brand > span:first-child { letter-spacing:-.045em; }
.tag-lower { letter-spacing:.055em; }
.hero-points i, .terminal-symbol { color:#bd91f6; font-size:15px; font-weight:850; font-style:normal; }
.terminal-symbol { width:15px; display:inline-block; text-align:center; flex-shrink:0; }
.visual-browser-bar { justify-content:flex-end; }
.plan-top { justify-content:flex-start; }
.demo-top { gap:10px; }
.nav-contact { display:inline-flex; align-items:center; justify-content:center; }