/* Targeted refinement pass: October 2026. Preserve the original atmosphere and scroll stages. */
.eyebrow {gap:13px}
.services-intro h2 .white-word{color:#f7f3ff;text-shadow:none}
.visual-meta{justify-content:flex-start}
.visual-float span{margin-top:0}
.float-b{top:24%}
.host-stats div:last-child{justify-items:end;text-align:right}
.orbit-node{display:none!important}
.care-header{justify-content:flex-start}
.care-outlined{top:4%;right:5%;font-size:180px;line-height:1;opacity:.58}
.care-terminal{display:flex;flex-direction:column;bottom:14%;height:50%;backdrop-filter:none}
.terminal-heading{flex:none}
.terminal-row{flex:1;min-height:0;padding:9px 0}
.terminal-row:last-of-type{border-bottom:none}
.terminal-foot{display:flex;justify-content:center;text-align:center;border-top:1px solid #69478155;margin:0;padding:11px 15px}

/* First section: a real transition into an edge-to-edge website preview. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .hero-copy{transform:translate3d(calc(var(--hero-exit,0)* -110vw),0,0);opacity:calc(1 - var(--hero-exit,0)*1.75)}
 .hero-device{transform:translate3d(calc(var(--hero-exit,0)* -29vw),calc(var(--hero-exit,0)* -3vh),0) scale(calc(1 + var(--hero-exit,0)*1.68));z-index:5}
 .hero-bottom{opacity:calc(1 - var(--hero-exit,0)*1.65)}
 .hero-huge-word{bottom:5%;font-size:clamp(108px,11.8vw,215px);letter-spacing:-.077em;color:#ffffff0e;left:0;z-index:0;will-change:transform}
}

/* The design demonstration: three actions unfold in sequence from the scroll position. */
.journey-steps{position:absolute;right:4%;top:17%;width:45%;height:67%;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:6px;z-index:2;transform:perspective(700px) rotateY(-8deg)}
.journey-step{position:relative;display:flex;flex-direction:column;gap:5px;border:1px solid #b97aff80;background:linear-gradient(110deg,#3a1e55ed,#140d25f5);padding:13px 12px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);min-height:68px;box-shadow:0 10px 25px #0005}
.journey-step small{font-size:9px;font-weight:800;color:#bf92f2}
.journey-step b{font-size:clamp(9px,1.15vw,16px);font-weight:900;color:#fff;line-height:1}
.journey-step span{font-size:9px;color:#ae9abf}
.journey-connector{align-self:center;font-size:23px;line-height:1;color:#d3a7ff;filter:drop-shadow(0 0 8px #af5ffe)}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .journey-step-1{opacity:clamp(0,calc(var(--design-local,0)*5),1);transform:translateX(calc((1 - var(--design-local,0))*45px))}
 .journey-connector-1{opacity:clamp(0,calc((var(--design-local,0) - .17)*5),1)}
 .journey-step-2{opacity:clamp(0,calc((var(--design-local,0) - .28)*5),1);transform:translateX(calc((1 - var(--design-local,0))*-39px))}
 .journey-connector-2{opacity:clamp(0,calc((var(--design-local,0) - .45)*5),1)}
 .journey-step-3{opacity:clamp(0,calc((var(--design-local,0) - .60)*5),1);transform:translateX(calc((1 - var(--design-local,0))*33px))}
}

/* First process card: incoming phone conversation */
.glyph-discover{right:5%;top:14%;width:39%;height:75%}
.phone-frame{width:min(100%,290px);height:100%;max-height:430px;min-height:250px;margin:auto;border:3px solid #b78be9;border-radius:35px;background:linear-gradient(160deg,#170e29,#251039 72%,#100e1a);box-shadow:0 15px 50px #02010ac9,0 0 28px #8e4de851,inset 0 0 0 5px #36234d;position:relative;overflow:hidden;padding:24px 13px 16px;display:flex;flex-direction:column;gap:14px}
.phone-top{height:35px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:8px;letter-spacing:.11em;color:#c9b8db;border-bottom:1px solid #a47ac744;padding-bottom:12px}
.phone-top i{height:7px;width:40px;position:absolute;top:8px;left:50%;transform:translateX(-50%);background:#08070e;border-radius:8px}
.phone-bubble{padding:12px 13px;font-size:clamp(9px,1vw,12px);line-height:1.3;max-width:89%;border-radius:12px 12px 12px 3px;color:#ede1ff;background:#44305d;box-shadow:0 4px 18px #0004}
.bubble-second{align-self:flex-end;background:#9c68ea;color:#120d1a;border-radius:12px 12px 3px 12px;font-weight:800}
.bubble-third{background:#5a387b}
.phone-compose{margin-top:auto;padding:10px 14px;border:1px solid #b588d14a;border-radius:25px;color:#857497;font-size:9px;display:flex;justify-content:space-between;align-items:center}
.phone-compose span{background:#ba8dfa;color:#110a1a;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-weight:900}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .phone-bubble{opacity:clamp(0,calc((var(--card-local,0) - .03)*5),1);transform:translate3d(0,calc((1 - var(--card-local,0))*22px),0)}
 .bubble-second{opacity:clamp(0,calc((var(--card-local,0) - .30)*5),1)}
 .bubble-third{opacity:clamp(0,calc((var(--card-local,0) - .60)*5),1)}
}

/* Second process card: visible masonry assembled through scroll. */
.process-card:nth-child(2) .glyph-build{right:5%;top:22%;width:42%;height:58%;transform:none!important;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px}
.brick-wall{width:100%;max-width:345px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:39px;gap:5px;transform:perspective(800px) rotateY(-15deg) rotateX(8deg)}
.wall-brick{border:1px solid #d19cfa99;background:linear-gradient(130deg,#d4a2ff 0%,#a15de8 18%,#54217b 66%,#2a1444 100%);clip-path:polygon(0 0,96% 0,100% 12%,100% 100%,0 100%);box-shadow:inset 1px 2px 6px #f0d7ff6e,0 5px 12px #0006}
.wall-brick:nth-child(8n+5),.wall-brick:nth-child(8n+6),.wall-brick:nth-child(8n+7),.wall-brick:nth-child(8n+8){transform:translateX(5px)}
.build-label{font-size:9px;letter-spacing:.16em;font-weight:900;color:#cda7f9}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .wall-brick{opacity:clamp(0,calc((var(--card-local,0) - var(--brick-start,0)) * 5),1);filter:brightness(calc(.65 + var(--card-local,0)*.35))}
}

/* Third process card: an actual mini-site preview, not an abstract symbol. */
.process-card:nth-child(3) .process-glyph{right:3%;top:20%;height:63%;width:45%;opacity:1}
.launch-browser{width:100%;height:100%;max-height:320px;border:1px solid #b887ef88;background:#10101d;box-shadow:15px 25px 45px #0009;transform:perspective(850px) rotateY(-10deg) rotateZ(2deg);overflow:hidden}
.launch-chrome{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:8px;background:#21162b;color:#ab98c1}
.launch-chrome>span:first-child{color:#b885f4;letter-spacing:2px}
.launch-chrome b{font-weight:600}
.launch-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 15px;border-bottom:1px solid #8e65bd55;color:#e5d9ee;font-size:9px;background:#190e27}
.launch-nav span{font-size:6px}
.launch-body{height:calc(100% - 93px);padding:22px 24px;background:radial-gradient(circle at 100% 10%,#6333a3,#0f0d1b 75%);display:flex;flex-direction:column;gap:10px}
.launch-body small{font-size:7px;color:#c49aff;letter-spacing:.13em}
.launch-body strong{font-size:clamp(22px,2.3vw,38px);line-height:.9;letter-spacing:-.06em;color:white}
.launch-body p{font-size:9px;color:#b8a8c7;margin:0}
.launch-cta{margin-top:auto;display:inline-block;align-self:flex-start;background:#b78aff;color:#130b20;font-size:9px;font-weight:900;padding:10px 12px}
.launch-status{height:24px;display:flex;align-items:center;padding:0 12px;font-size:8px;letter-spacing:.08em;color:#b895e0;background:#120e1d}
.process-card:nth-child(3) h3{font-size:clamp(38px,3.35vw,59px);white-space:nowrap}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .launch-browser{opacity:clamp(.35,calc(.35 + var(--card-local,0)*.65),1);transform:perspective(850px) rotateY(calc(-22deg + var(--card-local,0)*12deg)) rotateZ(calc(5deg - var(--card-local,0)*3deg)) scale(calc(.82 + var(--card-local,0)*.18))}
}

/* Pricing and contact legibility. */
.contact-email{display:block;margin:28px 0 20px;color:#be8fff;font-size:clamp(16px,2vw,31px);font-weight:900;letter-spacing:-.05em;overflow-wrap:anywhere;text-shadow:0 0 24px #7b3dc16a}
.contact-email:hover{color:#ead5ff}
.contact-layout h2{font-size:clamp(50px,6vw,100px);line-height:.94}
.contact-panel h3{margin:0 0 12px}
/* Keep cards readable on narrow screens */
@media(max-width:900px){
 .hero-huge-word{transform:none!important;left:0;bottom:5%;font-size:110px;opacity:.4}
 .phone-frame{max-height:265px;min-height:0;width:180px;padding:16px 8px 8px;border-radius:23px;gap:7px}
 .phone-bubble{font-size:8px;padding:8px}
 .phone-top{font-size:6px;height:20px}
 .process-card:nth-child(2) .glyph-build{top:15%;height:52%}
 .brick-wall{grid-auto-rows:28px;gap:3px}
 .build-label{font-size:7px}
 .launch-nav{padding:10px 8px}
 .launch-body{padding:14px}
 .launch-body strong{font-size:22px}
 .process-card:nth-child(3) h3{font-size:clamp(27px,4.7vw,43px)}
 .contact-layout h2{font-size:clamp(48px,8.5vw,90px)}
}
@media(max-width:580px){
 .contact-email{font-size:clamp(16px,5.5vw,26px)}
 .process-card:nth-child(3) h3{font-size:clamp(26px,7.1vw,36px)}
 .process-card:nth-child(3) .process-glyph{width:60%;right:-10%;opacity:.43}
 .process-card:nth-child(2) .glyph-build{opacity:.50}
 .process-card:nth-child(1) .glyph-discover{opacity:.45;right:-1%;width:55%}
 .process-card:nth-child(3) .process-card-copy{max-width:95%}
}
