.visual-atmosphere,.flow-section{position:relative;min-height:620px;padding-top:120px;padding-bottom:120px;display:grid;grid-template-columns:.7fr 1.3fr;align-items:center;gap:50px;isolation:isolate}.visual-atmosphere:before,.flow-section:before{content:'';position:absolute;inset:0 -20vw;background:radial-gradient(ellipse at 72% 40%,rgb(var(--accent-rgb) / 0.071),transparent 35%),linear-gradient(90deg,transparent,rgb(var(--surface-2-rgb) / 0.086) 50%,transparent);z-index:-2}.visual-atmosphere:after,.flow-section:after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgb(var(--accent-2-rgb) / 0.035) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--accent-2-rgb) / 0.035) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,transparent,black 35%,transparent);z-index:-1;opacity:.35}.atmosphere-copy h2,.flow-header h2{font-size:clamp(2.5rem,4.8vw,5rem);line-height:1.35;margin:18px 0}.atmosphere-copy p,.flow-header p{color:var(--muted);font-size:.84rem;max-width:340px}.data-legend{display:flex;flex-direction:column;gap:8px;margin-top:32px}.data-legend span{color:var(--dim);font-size:.67rem}.data-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-left:8px;box-shadow:0 0 12px var(--orange)}.data-legend span:nth-child(2) i{background:var(--info);box-shadow:0 0 12px var(--info)}.data-legend span:nth-child(3) i{background:var(--success);box-shadow:0 0 12px var(--success)}.visual-stage{height:520px;position:relative;perspective:1100px}.stage-grid{position:absolute;inset:14% 2%;background-image:linear-gradient(rgb(var(--accent-2-rgb) / 0.063) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--accent-2-rgb) / 0.063) 1px,transparent 1px);background-size:34px 34px;transform:perspective(500px) rotateX(58deg) rotateZ(-9deg);transform-origin:center bottom;mask-image:radial-gradient(ellipse,black 15%,transparent 72%);opacity:.6}.stage-glow{position:absolute;width:380px;height:380px;right:20%;top:14%;background:rgb(var(--accent-rgb) / 0.102);filter:blur(70px);border-radius:50%}.browser-glass{position:absolute;background:rgb(var(--surface-2-rgb) / 0.600);border:1px solid rgb(var(--hi-rgb) / 0.133);border-radius:7px;overflow:hidden;backdrop-filter:blur(15px);box-shadow:0 32px 70px #000b,0 1px 0 rgb(var(--hi-rgb) / 0.067) inset,0 0 50px rgb(var(--accent-rgb) / 0.071);transform-style:preserve-3d;transition:transform .25s ease}.browser-glass img{display:block;width:100%;height:235px;object-fit:cover;opacity:.85;filter:saturate(.78) contrast(1.05)}.browser-bar{height:34px;display:flex;align-items:center;gap:5px;padding:0 13px;background:rgb(var(--ink-rgb) / 0.800);border-bottom:1px solid rgb(var(--hi-rgb) / 0.071)}.browser-bar i{width:6px;height:6px;border-radius:50%;background:var(--accent)}.browser-bar i:nth-child(2){background:var(--faint)}.browser-bar i:nth-child(3){background:var(--success)}.browser-bar span{font:500 .53rem 'Space Grotesk';color:var(--muted);margin-right:auto;direction:ltr}.layer-back{width:53%;left:5%;top:20%;transform:rotate(-7deg) translateZ(-30px)}.layer-front{width:59%;right:3%;top:12%;transform:rotate(5deg) translateZ(40px)}.signal-chip{position:absolute;display:flex;align-items:center;gap:8px;background:rgb(var(--surface-1-rgb) / 0.867);border:1px solid rgb(var(--accent-2-rgb) / 0.400);box-shadow:0 14px 30px #0009;padding:9px 12px;backdrop-filter:blur(12px);font-size:.62rem}.signal-chip b{font:600 .62rem 'Space Grotesk';color:var(--success)}.signal-chip span{color:var(--soft)}.chip-one{top:6%;left:10%;transform:rotate(-4deg)}.chip-two{bottom:15%;right:5%;transform:rotate(4deg)}.chip-two b{color:var(--accent-2);font-size:1rem}.flow-section{display:block;min-height:530px;border-top:1px solid var(--line)}.flow-header{display:flex;justify-content:space-between;align-items:end}.flow-header p{margin:0}.flow-visual{height:230px;position:relative;margin-top:70px;display:flex;align-items:center;justify-content:space-between;padding:0 10%}.flow-line{position:absolute;right:15%;left:15%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--info),var(--success),transparent);box-shadow:0 0 18px var(--accent);opacity:.7}.flow-line:before,.flow-line:after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;top:-3px;background:var(--accent-soft);box-shadow:0 0 15px var(--accent);animation:flow-dot 3.5s linear infinite}.flow-line:before{left:28%}.flow-line:after{left:68%;animation-delay:1.6s}.flow-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;width:120px;height:120px;justify-content:center;background:rgb(var(--surface-1-rgb) / 0.867);border:1px solid rgb(var(--hi-rgb) / 0.133);backdrop-filter:blur(16px);box-shadow:0 20px 45px #000a,0 1px 0 rgb(var(--hi-rgb) / 0.067) inset;border-radius:50%;transition:.3s}.flow-node:hover{transform:translateY(-8px) scale(1.06);border-color:var(--accent)}.node-icon{font-size:1.7rem;color:var(--accent-2)}.flow-node b{font-size:.75rem}.flow-node small{font-size:.58rem;color:var(--muted)}.flow-particle{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent-soft);box-shadow:0 0 16px var(--accent);animation:particle-float 5s ease-in-out infinite}.p-one{right:35%;top:20%}.p-two{right:54%;bottom:17%;animation-delay:1s}.p-three{left:25%;top:28%;animation-delay:2s;background:var(--info);box-shadow:0 0 16px var(--info)}@keyframes flow-dot{0%{transform:translateX(0);opacity:0}15%,75%{opacity:1}100%{transform:translateX(390px);opacity:0}}@keyframes particle-float{0%,100%{transform:translate(0,0);opacity:.3}50%{transform:translate(15px,-24px);opacity:1}}@media(max-width:850px){.visual-atmosphere{display:flex;flex-direction:column;padding-top:80px}.atmosphere-copy{width:100%}.visual-stage{width:100%;height:410px;transform:scale(.9)}.flow-header{display:block}.flow-visual{padding:0 2%;transform:scale(.85);transform-origin:center}.flow-line:before,.flow-line:after{display:none}}@media(max-width:500px){.visual-stage{transform:scale(.72);height:315px;margin-top:-40px}.browser-glass img{height:190px}.flow-visual{transform:scale(.67);margin-left:-50px;margin-right:-50px}.flow-section{overflow:hidden}}
