/* Home: animated request flow (guest -> OBEDIO -> crew -> guest). One serif for spoken words, one sans for labels. */
.flow{position:relative;max-width:1300px}
.flow .scene-toolbar{margin-bottom:22px}
.flow-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(48px,.7fr) minmax(0,.9fr) minmax(48px,.7fr) minmax(0,1.05fr);align-items:center;padding:56px 44px 48px;border:1px solid rgba(185,161,106,.22);background:radial-gradient(120% 140% at 50% 0%,#18211f 0%,#121718 55%,#0f1314 100%);overflow:hidden}
.flow-node{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
/* Guest node */
.flow-guest{gap:18px}
.flow-device{position:relative;width:min(210px,100%);aspect-ratio:1}
.flow-device img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 22px 30px rgba(0,0,0,.55));transition:transform .25s ease}
.flow-led{position:absolute;left:50%;top:50%;width:52%;height:52%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px rgba(255,255,255,0);transition:box-shadow .5s ease,opacity .5s ease;opacity:0}
.flow-check{position:absolute;right:4%;top:4%;width:34px;height:34px;border-radius:50%;background:#76c4a0;color:#0f1a16;display:grid;place-items:center;font:600 17px/1 'Hanken Grotesk',sans-serif;opacity:0;transform:scale(.6);transition:opacity .4s ease,transform .4s ease;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.flow-bubble{position:relative;min-height:64px;display:flex;align-items:flex-end}
.flow-bubble span,.flow-translate .flow-text{font:italic 400 clamp(21px,1.9vw,27px)/1.18 'Cormorant Garamond',serif;color:#efe6d2;letter-spacing:-.01em;text-align:center}
.flow-bubble span{display:block;padding:12px 18px;border:1px solid rgba(214,190,138,.35);border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.03);opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.flow-wave{display:flex;align-items:center;gap:4px;height:26px;opacity:0;transition:opacity .3s ease}
.flow-wave i{display:block;width:3px;height:6px;border-radius:2px;background:#c6aa70}
/* Links */
.flow-link{position:relative;height:1px;background:linear-gradient(90deg,rgba(198,170,112,.15),rgba(198,170,112,.45),rgba(198,170,112,.15));align-self:center;margin-top:-40px}
.flow-dot{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#f0d9a2;box-shadow:0 0 14px 3px rgba(240,217,162,.55);opacity:0}
/* Core node */
.flow-core{gap:16px;margin-top:-40px}
.flow-core-mark{position:relative;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(198,170,112,.45);background:radial-gradient(circle,#1d2624 0%,#141b1b 70%)}
.flow-core-mark img{width:76px;height:auto}
.flow-core-mark:before,.flow-core-mark:after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(198,170,112,.5);opacity:0}
.flow-translate{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:74px;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.flow-lang{font:600 11px/1 'Hanken Grotesk',sans-serif;letter-spacing:.18em;color:#c6aa70;padding:6px 10px;border:1px solid rgba(198,170,112,.4);border-radius:20px}
/* Crew node: rugged Wear OS watch */
.flow-crew .watchx{width:min(176px,100%)}
.flow-ui{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 30%,#2a3533 0%,#151b1c 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;padding:12%;text-align:center;opacity:.25;transition:opacity .4s ease}
.flow-ui-loc{font:600 clamp(11px,1vw,13px)/1.1 'Hanken Grotesk',sans-serif;letter-spacing:.06em;color:#e3cfa0}
.flow-ui-req{font:500 clamp(12px,1.05vw,14px)/1.2 'Hanken Grotesk',sans-serif;color:#f2efe8}
.flow-ui-btn{position:relative;margin-top:4%;min-width:74%;padding:7% 9%;white-space:nowrap;border-radius:40px;background:#76c4a0;color:#0f1a16;font:700 clamp(9.5px,.85vw,11.5px)/1 'Hanken Grotesk',sans-serif;letter-spacing:.06em;transition:transform .2s ease,background .3s ease}
.flow-ui-btn .done{display:none}
.flow-caption{margin-top:72px;font:400 12px/1.4 'Hanken Grotesk',sans-serif;letter-spacing:.04em;color:#9ca8ab}
/* Steps */
.flow-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.flow-steps li{position:relative;padding-top:18px;border-top:1px solid rgba(185,161,106,.25);opacity:.5;transition:opacity .4s ease}
.flow-steps li:before{content:'';position:absolute;left:0;top:-1px;height:2px;width:100%;background:#c6aa70;transform:scaleX(0);transform-origin:left;transition:transform .6s ease}
.flow-steps .flow-num{display:block;font:500 12px/1 'Hanken Grotesk',sans-serif;letter-spacing:.14em;color:#c6aa70;margin-bottom:12px}
.refresh-site .flow-steps h2{font:500 19px/1.3 'Hanken Grotesk',sans-serif;letter-spacing:0;color:#f2efe8;margin:0 0 8px}
.refresh-site .flow-steps p{font:400 14.5px/1.6 'Hanken Grotesk',sans-serif;color:#aeb8bb;margin:0}
.flow-steps .flow-platform{margin-top:8px!important;font-size:12px!important;letter-spacing:.04em;color:#8e9a9d!important}
/* ---- Phases ---- */
.flow[data-phase="1"] .flow-device img{transform:scale(.965)}
.flow[data-phase="1"] .flow-led,.flow[data-phase="2"] .flow-led{opacity:1;box-shadow:0 0 0 2px rgba(248,240,222,.85),0 0 22px 6px rgba(248,240,222,.35)}
.flow[data-phase="1"] .flow-wave{opacity:1}
.flow[data-phase="1"] .flow-wave i{animation:flowWave .9s ease-in-out infinite}
.flow-wave i:nth-child(2n){animation-delay:.15s!important}.flow-wave i:nth-child(3n){animation-delay:.3s!important}.flow-wave i:nth-child(5n){animation-delay:.45s!important}
@keyframes flowWave{0%,100%{height:5px}50%{height:24px}}
.flow:not([data-phase="0"]) .flow-bubble span{opacity:1;transform:none}
.flow[data-phase="2"] .flow-link-a .flow-dot{animation:flowX .9s cubic-bezier(.6,0,.3,1) forwards}
.flow[data-phase="2"] .flow-core-mark:before,.flow[data-phase="3"] .flow-core-mark:before{animation:flowRing 1.4s ease-out infinite}
.flow[data-phase="3"] .flow-core-mark:after{animation:flowRing 1.4s .5s ease-out infinite}
@keyframes flowRing{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.45);opacity:0}}
.flow[data-phase="3"] .flow-translate,.flow[data-phase="4"] .flow-translate,.flow[data-phase="5"] .flow-translate,.flow[data-phase="6"] .flow-translate,.flow[data-phase="final"] .flow-translate{opacity:1;transform:none}
.flow[data-phase="4"] .flow-link-b .flow-dot{animation:flowX .9s cubic-bezier(.6,0,.3,1) forwards}
.flow[data-phase="4"] .flow-ui,.flow[data-phase="5"] .flow-ui,.flow[data-phase="6"] .flow-ui,.flow[data-phase="final"] .flow-ui{opacity:1}
.flow[data-phase="4"] .flow-crew .watchx{animation:flowBuzz .5s .9s ease-in-out 2}
@keyframes flowBuzz{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.5deg)}75%{transform:rotate(2.5deg)}}
.flow[data-phase="5"] .flow-ui-btn{animation:flowTap .5s ease forwards}
@keyframes flowTap{40%{transform:scale(.9)}100%{transform:scale(1)}}
.flow[data-phase="5"] .flow-ui-btn .go,.flow[data-phase="6"] .flow-ui-btn .go,.flow[data-phase="final"] .flow-ui-btn .go{display:none}
.flow[data-phase="5"] .flow-ui-btn .done,.flow[data-phase="6"] .flow-ui-btn .done,.flow[data-phase="final"] .flow-ui-btn .done{display:inline}
.flow[data-phase="5"] .flow-link-b .flow-dot{animation:flowXr .7s .35s cubic-bezier(.6,0,.3,1) forwards;background:#9fdcc0;box-shadow:0 0 14px 3px rgba(118,196,160,.6)}
.flow[data-phase="5"] .flow-link-a .flow-dot{animation:flowXr .7s 1.05s cubic-bezier(.6,0,.3,1) forwards;background:#9fdcc0;box-shadow:0 0 14px 3px rgba(118,196,160,.6)}
@keyframes flowX{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes flowXr{0%{left:100%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:0;opacity:0}}
.flow[data-phase="6"] .flow-led,.flow[data-phase="final"] .flow-led{opacity:1;box-shadow:0 0 0 2px rgba(232,203,140,.95),0 0 30px 10px rgba(232,203,140,.45)}
.flow[data-phase="6"] .flow-led{animation:flowGlow 1.6s ease-in-out infinite}
@keyframes flowGlow{50%{box-shadow:0 0 0 2px rgba(232,203,140,.95),0 0 44px 16px rgba(232,203,140,.3)}}
.flow[data-phase="6"] .flow-check,.flow[data-phase="final"] .flow-check{opacity:1;transform:none}
.flow[data-phase="1"] .flow-steps li[data-step="1"],.flow[data-phase="2"] .flow-steps li[data-step="1"],.flow[data-phase="3"] .flow-steps li[data-step="2"],.flow[data-phase="4"] .flow-steps li[data-step="3"],.flow[data-phase="5"] .flow-steps li[data-step="3"],.flow[data-phase="6"] .flow-steps li[data-step="4"]{opacity:1}
.flow[data-phase="1"] .flow-steps li[data-step="1"]:before,.flow[data-phase="2"] .flow-steps li[data-step="1"]:before,.flow[data-phase="3"] .flow-steps li[data-step="2"]:before,.flow[data-phase="4"] .flow-steps li[data-step="3"]:before,.flow[data-phase="5"] .flow-steps li[data-step="3"]:before,.flow[data-phase="6"] .flow-steps li[data-step="4"]:before{transform:scaleX(1)}
.flow[data-phase="final"] .flow-steps li{opacity:1}
.flow[data-phase="final"] .flow-bubble span{opacity:1;transform:none}
/* ---- Tablet / phone: vertical flow ---- */
@media(max-width:900px){
 .flow-stage{grid-template-columns:1fr;padding:36px 20px 32px;gap:0;justify-items:center}
 .flow-link{width:1px;height:56px;margin:6px 0;background:linear-gradient(180deg,rgba(198,170,112,.15),rgba(198,170,112,.5),rgba(198,170,112,.15))}
 .flow-core{margin-top:0}
 .flow-dot{left:50%;top:0;margin:-5.5px 0 0 -5.5px}
 .flow[data-phase="2"] .flow-link-a .flow-dot,.flow[data-phase="4"] .flow-link-b .flow-dot{animation-name:flowY}
 .flow[data-phase="5"] .flow-link-a .flow-dot,.flow[data-phase="5"] .flow-link-b .flow-dot{animation-name:flowYr}
 .flow-device{width:170px}
 .flow-node{width:100%}
 .flow-crew .watchx{width:164px}
 .flow-bubble{min-height:0;margin-bottom:4px}
 .flow-steps{grid-template-columns:1fr 1fr;gap:22px 18px}
}
@keyframes flowY{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
@keyframes flowYr{0%{top:100%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:0;opacity:0}}
@media(max-width:520px){.flow-steps{grid-template-columns:1fr}.flow-bubble span,.flow-translate .flow-text{font-size:22px}}
@media(prefers-reduced-motion:reduce){.flow *{animation:none!important;transition:none!important}}