/* Homepage hero B · automation — store-owner PC + WhatsApp phone, floating in 3D like the
   Work hero devices (float, tilt toward the pointer, soft ground shadow).
   The scene is drawn at a fixed design size and scaled to fit by assets/js/hero-duo.js. */
.fth-duo{--dw:630;--dh:560;position:relative;padding-block:8px}
.fth-duo__stage{position:relative;width:100%;height:calc(var(--dh) * var(--k, .86) * 1px);perspective:1400px;perspective-origin:50% 40%}
.fth-duo__scene{position:absolute;left:50%;top:0;width:calc(var(--dw) * 1px);height:calc(var(--dh) * 1px);
  transform-origin:50% 0;transform:translateX(-50%) scale(var(--k,.86)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-style:preserve-3d}

/* positions (desktop design: 600 × 540) */
.fth-duo__dev{position:absolute;transform-style:preserve-3d}
.fth-duo__dev--pc{left:128px;top:24px;width:500px;transform:rotateY(-7deg) rotateX(2deg);animation:duoFloatA 6.5s ease-in-out infinite}
.fth-duo__dev--ph{left:6px;top:112px;width:216px;transform:translateZ(40px) rotateY(10deg) rotateZ(-1.5deg);animation:duoFloatB 5.2s ease-in-out -1.3s infinite}
.fth-duo__shadow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(11,21,48,.32),transparent);filter:blur(6px);transform:rotateX(80deg)}
html[data-theme="dark"] .fth-duo__shadow{background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.fth-duo__shadow--pc{left:190px;top:420px;width:400px;height:70px;animation:duoShadowA 6.5s ease-in-out infinite}
.fth-duo__shadow--ph{left:-4px;top:525px;width:240px;height:50px;animation:duoShadowB 5.2s ease-in-out -1.3s infinite}

/* drei-style Float: bob + slight sway (individual properties keep the base 3D rotation) */
@keyframes duoFloatA{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -12px;rotate:-.6deg}}
@keyframes duoFloatB{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -16px;rotate:.8deg}}
@keyframes duoShadowA{0%,100%{scale:1;opacity:1}50%{scale:.9;opacity:.7}}
@keyframes duoShadowB{0%,100%{scale:1;opacity:1}50%{scale:.86;opacity:.65}}

/* ── PC (monitor + stand) ── */
.fth-pc{position:relative;border-radius:16px;padding:10px 10px 0;background:linear-gradient(180deg,#1c2433,#0d121c);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 2px 0 rgba(255,255,255,.12) inset,0 30px 60px -10px rgba(11,21,48,.35),0 50px 90px -30px rgba(11,21,48,.35)}
html[data-theme="dark"] .fth-pc{box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 40px 80px -10px rgba(0,0,0,.7)}
.fth-pc__screen{position:relative;aspect-ratio:16/10;border-radius:7px;overflow:hidden;background:#f6f8fc}
.fth-pc__screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%)}
.fth-pc__chin{height:22px;display:grid;place-items:center}
.fth-pc__chin::after{content:"";width:6px;height:6px;border-radius:50%;background:#2c3646}
.fth-pc__neck{width:74px;height:52px;margin:0 auto;background:linear-gradient(90deg,#9aa3b2,#d7dce4 45%,#8c95a5);clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}
.fth-pc__base{width:190px;height:12px;margin:0 auto;border-radius:3px 3px 10px 10px;background:linear-gradient(180deg,#d7dce4,#8c95a5);box-shadow:0 10px 20px -6px rgba(11,21,48,.35)}

/* dashboard inside the PC (always light, like a real admin screen) */
.fth-dash{display:flex;height:100%;font:500 11px/1.3 var(--font,Inter,sans-serif);color:#0b1530;text-align:left}
.fth-dash__side{width:34px;flex:none;background:#0b1530;display:flex;flex-direction:column;align-items:center;gap:9px;padding-top:12px}
.fth-dash__side i{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.18)}
.fth-dash__side i.on{background:#25d366}
.fth-dash__main{flex:1;min-width:0;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.fth-dash__top{display:flex;align-items:center;justify-content:space-between}
.fth-dash__top b{display:block;font-size:13.5px;font-weight:700;color:#0b1530}
html[data-theme] .fth-dash__top small{display:block;font-size:9px!important;color:#5b6785!important}
.fth-dash__live{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;background:#dcfce7;color:#15803d;font-weight:700;font-size:9px}
.fth-dash__live span{width:6px;height:6px;border-radius:50%;background:#16a34a;animation:duoPulse 1.6s ease-in-out infinite}
@keyframes duoPulse{50%{opacity:.3}}
.fth-dash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fth-dash__kpis div{background:#fff;border:1px solid #e3e8f2;border-radius:7px;padding:6px 8px}
html[data-theme] .fth-dash__kpis small{display:block;font-size:9.5px!important;color:#5b6785!important}
.fth-dash__kpis b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;color:#0b1530;transition:color .3s}
.fth-dash__chart{height:40px;display:flex;align-items:flex-end;gap:5px;padding:0 2px;border-bottom:1px solid #e3e8f2}
.fth-dash__chart i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(180deg,#60a5fa,#2563eb);transition:height .6s cubic-bezier(.2,.9,.3,1.2)}
.fth-dash__chart i:last-child{background:linear-gradient(180deg,#4ade80,#16a34a)}
.fth-dash__orders{display:flex;flex-direction:column;gap:3px}
.fth-dash__row{display:grid;grid-template-columns:66px 1fr 62px 100px;gap:6px;align-items:center;padding:5px 7px;border-radius:5px;background:#fff;font-size:10.5px;color:#3a4766}
.fth-dash__row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fth-dash__row span:first-child{font-weight:700;color:#0b1530}
.fth-dash__row--head{background:none;padding-block:0;font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:#8a94ad}
.fth-dash__row--head span:first-child{color:#8a94ad;font-weight:500}
.fth-dash__row em{font-style:normal;font-weight:700;font-size:9.5px;padding:2px 6px;border-radius:99px}
.fth-dash__row em.paid{background:#dcfce7;color:#15803d}
.fth-dash__row em.wait{background:#fef3c7;color:#a16207}
.fth-dash__row em.sent{background:#e0e7ff;color:#4338ca}
.fth-dash__row.is-new{animation:duoRowIn .5s cubic-bezier(.2,.9,.3,1.2) both;box-shadow:0 0 0 1px #bfdbfe}
.fth-dash__row.is-flash{animation:duoFlash 1.2s ease both}
@keyframes duoRowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes duoFlash{0%{background:#bbf7d0}100%{background:#fff}}
html[data-theme][data-theme] .fth-duo .fth-dash span:not(#_),html[data-theme][data-theme] .fth-duo .fth-dash b:not(#_){color:inherit!important}
html[data-theme][data-theme] .fth-duo .fth-dash__top b:not(#_),html[data-theme][data-theme] .fth-duo .fth-dash__kpis b:not(#_){color:#0b1530!important}
html[data-theme][data-theme] .fth-duo .fth-dash__live:not(#_){color:#15803d!important}

/* ── phone sized for the duo ── */
.fth-duo .fth-phone{width:100%;border-radius:32px;padding:8px;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 30px 60px -10px rgba(11,21,48,.4)}
.fth-duo .fth-screen{border-radius:25px}
.fth-duo .fth-wa-head{padding:10px 12px}
.fth-duo .fth-wa-head b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fth-duo .fth-wa-head>div{min-width:0}
.fth-duo .fth-chat{height:330px;padding:10px 9px;font-size:11.5px;gap:6px}
.fth-duo .fth-msg{max-width:86%}

/* floating proof cards */
.fth-duo .fth-result{position:absolute;z-index:5}
.fth-duo .r1{right:-10px;top:-14px;animation:duoFloatB 6s ease-in-out -2s infinite}
.fth-duo .r2{right:6%;bottom:9%;animation:duoFloatA 7s ease-in-out -4s infinite}

/* narrow column (< 440px, set by hero-duo.js): phone in front and larger, PC behind (design 430 × 560) */
.fth-duo.is-narrow{--dw:430;--dh:560}
.fth-duo.is-narrow .fth-duo__dev--pc{left:60px;top:14px;width:370px;transform:rotateY(-9deg) rotateX(3deg)}
.fth-duo.is-narrow .fth-duo__dev--ph{left:0;top:150px;width:218px}
.fth-duo.is-narrow .fth-duo__shadow--pc{left:90px;top:320px;width:300px}
.fth-duo.is-narrow .fth-duo__shadow--ph{left:-6px;top:560px;width:230px}
.fth-duo.is-narrow .r1{right:-4px;top:-8px}
.fth-duo.is-narrow .r2{display:none}
@media (max-width:980px){.fth-phone-wrap .fth-result,.fth-duo .fth-result{display:inline-flex}}
@media (max-width:560px){.fth-duo .r1 small{display:none}}
@media (prefers-reduced-motion:reduce){
  .fth-duo__dev,.fth-duo__shadow,.fth-duo .fth-result,.fth-dash__live span{animation:none}
  .fth-duo__scene{--tx:0deg!important;--ty:0deg!important}
}

/* WhatsApp header subtitle stays readable on the green bar in light mode too */
html[data-theme][data-theme] .ft-hero .fth-wa-head small:not(#_){color:rgba(255,255,255,.82)!important}

/* ── third device: customer checkout phone (right of the WhatsApp phone, below the PC) ── */
.fth-duo{--dh:600}
.fth-duo__dev--pay{left:262px;top:300px;width:168px;transform:translateZ(70px) rotateY(-8deg) rotateZ(1.5deg);animation:duoFloatB 5.8s ease-in-out -2.6s infinite;z-index:3}
.fth-duo__shadow--pay{left:262px;top:600px;width:190px;height:40px;animation:duoShadowB 5.8s ease-in-out -2.6s infinite}
.fth-paydev{border-radius:26px;padding:7px;background:linear-gradient(180deg,#1c2433,#0b1220);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 26px 50px -12px rgba(11,21,48,.45)}
html[data-theme="dark"] .fth-paydev{box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 30px 60px -10px rgba(0,0,0,.7)}
.fth-paydev__screen{position:relative;border-radius:20px;overflow:hidden;background:#fff;padding:9px 11px 10px;display:flex;flex-direction:column;gap:8px;font:500 10px/1.3 var(--font,Inter,sans-serif);color:#0b1530;text-align:left;height:290px}
.fth-paydev__top{display:flex;justify-content:space-between;font-weight:700;font-size:9.5px}
.fth-paydev__lock{color:#15803d;font-weight:700}
.fth-paydev__lock::before{content:"🔒 ";font-size:8px}
.fth-paydev__merchant{display:flex;align-items:center;gap:7px;padding-bottom:7px;border-bottom:1px solid #edf1f7}
.fth-paydev__merchant i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:#25d366;color:#fff;font-style:normal;font-weight:800;font-size:9.5px}
.fth-paydev__merchant b{display:block;font-size:10.5px}
.fth-paydev__merchant small{display:block;font-size:8.5px;color:#64748b}
.fth-paydev__amount small{display:block;font-size:8.5px;color:#64748b}
.fth-paydev__amount b{display:block;font-size:21px;font-weight:800;letter-spacing:-.03em}
.fth-paydev__lines{display:grid;gap:3px}
.fth-paydev__lines span{display:flex;justify-content:space-between;font-size:9px;color:#475569}
.fth-paydev__lines em{font-style:normal}
.fth-paydev__methods{display:flex;gap:4px}
.fth-paydev__methods span{flex:1;text-align:center;padding:4px 0;border:1px solid #e2e8f0;border-radius:6px;font-size:8.5px;font-weight:700;color:#475569}
.fth-paydev__methods span.on{border-color:#0ba4db;background:#e6f7fd;color:#0b7fae}
.fth-paydev__status{position:relative;flex:1;border-radius:10px;background:#f6f8fc;display:grid;place-items:center;overflow:hidden}
.fth-paydev__wait,.fth-paydev__ok{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;transition:opacity .45s,transform .45s}
.fth-paydev__wait{font-size:9.5px;color:#64748b;flex-direction:row;gap:6px}
.fth-paydev__spin{width:12px;height:12px;border-radius:50%;border:2px solid #cbd5e1;border-top-color:#0ba4db;animation:duoSpin .9s linear infinite}
@keyframes duoSpin{to{transform:rotate(360deg)}}
.fth-paydev__tick{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#16a34a;color:#fff;font-weight:800;font-size:13px;box-shadow:0 0 0 5px #dcfce7}
.fth-paydev__ok b{font-size:11px;margin-top:4px}
.fth-paydev__ok small{font-size:8.5px;color:#15803d}
.fth-paydev__screen[data-state="wait"] .fth-paydev__ok{opacity:0;transform:scale(.9)}
.fth-paydev__screen[data-state="ok"] .fth-paydev__wait{opacity:0}
.fth-paydev__screen[data-state="ok"] .fth-paydev__status{background:#f0fdf4}
.fth-paydev__foot{text-align:center;font-size:8px;color:#94a3b8;letter-spacing:.02em}
html[data-theme][data-theme] .fth-duo .fth-paydev__screen :is(b,span,small,em,div):not(#_){color:inherit}
html[data-theme][data-theme] .fth-duo .fth-paydev__screen:not(#_){color:#0b1530!important}
html[data-theme][data-theme] .fth-duo .fth-paydev__lock:not(#_){color:#15803d!important}
html[data-theme][data-theme] .fth-duo .fth-paydev__ok small:not(#_){color:#15803d!important}
html[data-theme][data-theme] .fth-duo :is(.fth-paydev__merchant small,.fth-paydev__amount small,.fth-paydev__wait):not(#_){color:#64748b!important}
html[data-theme][data-theme] .fth-duo .fth-paydev__merchant i:not(#_),html[data-theme][data-theme] .fth-duo .fth-paydev__tick:not(#_){color:#fff!important}

/* desktop: "Open 24/7" card moves right so it doesn't sit on the new phone */
.fth-duo .r2{right:-2%;bottom:14%}

/* narrow / mobile: WhatsApp phone left, checkout phone right, PC behind — group is centred */
.fth-duo.is-narrow{--dw:430;--dh:600}
.fth-duo.is-narrow .fth-duo__dev--pc{left:30px;top:10px;width:370px}
.fth-duo.is-narrow .fth-duo__dev--ph{left:8px;top:150px;width:206px}
.fth-duo.is-narrow .fth-duo__dev--pay{left:236px;top:270px;width:178px;transform:translateZ(70px) rotateY(-10deg) rotateZ(1.5deg)}
.fth-duo.is-narrow .fth-duo__shadow--ph{left:0;top:585px;width:220px}
.fth-duo.is-narrow .fth-duo__shadow--pay{left:230px;top:590px;width:190px}
.fth-duo.is-narrow .fth-duo__shadow--pc{left:60px;top:300px}
@media (prefers-reduced-motion:reduce){.fth-paydev__spin{animation:none}}

/* Floor shadows: flat ellipses pushed behind the devices (the old rotateX(80deg) blur plane
   intersected the phones in 3D and washed them out with a pale rectangle). */
.fth-duo__shadow{transform:translateZ(-120px)!important;height:26px!important;filter:blur(8px)}
/* checkout phone: size to its content so nothing is clipped */
.fth-paydev__screen{height:auto;min-height:300px}
.fth-paydev__merchant b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.fth-paydev__merchant>div{min-width:0}
.fth-paydev__status{flex:none;height:76px}
.fth-paydev__amount b{font-size:19px}
.fth-duo__dev--pay{width:180px}
.fth-paydev__merchant small{white-space:nowrap}
.fth-paydev__lines span{gap:6px}.fth-paydev__lines em:last-child{white-space:nowrap}
html[data-theme][data-theme] .fth-duo .fth-paydev__lines span:not(#_){color:#475569!important}
html[data-theme][data-theme] .fth-duo .fth-paydev__methods span:not(#_){color:#475569!important;background:#fff}
html[data-theme][data-theme] .fth-duo .fth-paydev__methods span.on:not(#_){color:#0b7fae!important;background:#e6f7fd}
html[data-theme][data-theme] .fth-duo :is(.fth-paydev__amount b,.fth-paydev__merchant b,.fth-paydev__ok b,.fth-paydev__top span:first-child):not(#_){color:#0b1530!important}
html[data-theme][data-theme] .fth-duo .fth-paydev__foot:not(#_){color:#94a3b8!important}
.fth-duo .r2{right:-5%;bottom:6%}