.flow-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:66px 0 68px;
  background:
    radial-gradient(ellipse 48% 50% at 50% 49%,rgba(0,123,85,.2),transparent 75%),
    radial-gradient(ellipse 34% 58% at 100% 25%,rgba(0,155,103,.12),transparent 75%),
    #061413;
}
.flow-section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 24%,transparent 78%,rgba(0,0,0,.12));
}
.flow-inner{width:min(1140px,calc(100% - 64px));margin-inline:auto}
.flow-heading{max-width:790px;margin:0 auto 34px;text-align:center}
.flow-eyebrow{display:flex;align-items:center;justify-content:center;gap:18px;color:#55edb8;font-size:10px;font-weight:850;letter-spacing:.22em;text-transform:uppercase}
.flow-eyebrow::before,.flow-eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.flow-heading h2{margin:14px 0 13px;font-size:clamp(34px,3.4vw,45px);line-height:1.08;letter-spacing:-.05em}
.flow-heading h2 span{color:#cce9e1}
.flow-heading p{max-width:700px;margin:0 auto;color:#a7bdb6;font-size:14px;line-height:1.6}
.flow-journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:end}
.flow-step{min-width:0;position:relative}
.flow-visual{height:310px;position:relative;display:flex;align-items:flex-end;justify-content:center}
.flow-visual::before{content:"";position:absolute;left:12%;right:12%;bottom:10px;height:58px;border-radius:50%;background:rgba(0,197,135,.18);filter:blur(34px)}
.flow-visual img{position:relative;z-index:1;display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.32))}
.flow-visual-phone img{max-width:80%;max-height:310px}
.flow-visual-assistant img{max-width:95%;max-height:255px}
.flow-visual-order img{max-width:84%;max-height:285px;transform:rotate(-5deg) skewX(-6deg);transform-origin:center bottom}
.flow-visual-ready img{max-width:90%;max-height:285px;transform:rotate(-1deg) skewX(-1deg);transform-origin:center bottom}
.flow-step:not(:last-child) .flow-visual::after{content:"→";position:absolute;z-index:3;right:-20px;bottom:42%;color:#74f7c3;font-size:27px;font-weight:800;text-shadow:0 0 20px rgba(0,240,148,.45)}
.flow-step-copy{display:grid;grid-template-columns:39px minmax(0,1fr);align-items:start;gap:10px;min-height:80px;margin-top:15px}
.flow-number{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(71,243,177,.6);border-radius:50%;background:rgba(1,64,48,.78);box-shadow:0 0 0 5px rgba(2,31,26,.8),inset 0 0 14px rgba(33,233,158,.13);color:#d7fff0;font-size:18px;font-weight:800;line-height:1}
.flow-step-copy h3{margin:0 0 4px;font-size:14px;line-height:1.25;letter-spacing:-.02em}
.flow-step-copy p{margin:0;color:#a1b8b1;font-size:12px;line-height:1.45}
.flow-section + .features-section{padding-top:52px}

@media (max-width:1000px){
  .flow-section{padding:64px 0}
  .flow-heading{margin-bottom:28px}
  .flow-journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px;max-width:760px;margin-inline:auto}
  .flow-visual{height:285px}
  .flow-visual-phone img{max-height:285px}
  .flow-visual-assistant img{max-height:240px}
  .flow-visual-order img,.flow-visual-ready img{max-height:265px}
  .flow-step:nth-child(2) .flow-visual::after{display:none}
}
@media (max-width:620px){
  .flow-section{padding:56px 0 60px}
  .flow-inner{width:min(100% - 32px,430px)}
  .flow-heading{margin-bottom:31px}
  .flow-eyebrow{gap:9px;font-size:9px;letter-spacing:.16em;white-space:nowrap}
  .flow-eyebrow::before,.flow-eyebrow::after{width:17px}
  .flow-heading h2{font-size:clamp(29px,8vw,36px);margin:16px 0 14px}
  .flow-heading h2 br{display:none}
  .flow-heading p{font-size:14px}
  .flow-journey{grid-template-columns:1fr;gap:18px;max-width:360px}
  .flow-step{padding:18px 18px 20px;border:1px solid rgba(70,228,170,.14);border-radius:20px;background:linear-gradient(155deg,rgba(7,39,32,.75),rgba(4,22,20,.7))}
  .flow-visual{height:235px}
  .flow-visual-phone img{max-width:74%;max-height:235px}
  .flow-visual-assistant img{max-width:80%;max-height:210px}
  .flow-visual-order img,.flow-visual-ready img{max-width:74%;max-height:225px}
  .flow-step:not(:last-child) .flow-visual::after{display:none}
  .flow-step-copy{min-height:0;margin-top:18px;grid-template-columns:42px 1fr}
  .flow-step-copy h3{font-size:16px}
  .flow-step-copy p{font-size:13px}
  .flow-section + .features-section{padding-top:36px}
}
@media (prefers-reduced-motion:reduce){.flow-step,.flow-visual img{animation:none!important;transition:none!important}}