/* ============================================================ CODESTAN · ORDERING & DELIVERY PLATFORM — page-unique layer Motion identity: logistics network — traveling order packet, route drawing, status transitions, dashboard order-flow. Accent: --pa (#c5f99b) set on by js/ordering.js ============================================================ */ :root{--pa:#c5f99b} /* ============ 01 · HERO — ECOSYSTEM RING ============ */ .od-ring-wrap{position:relative;max-width:560px;margin-inline:auto} .od-ring{width:100%;height:auto;display:block} .od-ring-dash{animation:odDashMove 26s linear infinite} @keyframes odDashMove{to{stroke-dashoffset:-560}} .od-node-c{fill:#101310;stroke:#2e342e;stroke-width:1.5;transition:stroke .4s} .od-node:hover .od-node-c{stroke:var(--pa)} .od-node-i{fill:none;stroke:var(--pa);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .od-node-t{font-size:13px;font-weight:600;fill:var(--text-p1);text-anchor:middle;letter-spacing:.02em} .od-hub-c{fill:#0c0e0c;stroke:var(--pa);stroke-opacity:.5;stroke-width:1.5} .od-hub-pulse{fill:none;stroke:var(--pa);stroke-width:1.2;opacity:0;animation:odHubPulse 2.6s var(--ease) infinite} @keyframes odHubPulse{0%{opacity:.55;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.55)}} .od-hub-t1{font-size:10px;letter-spacing:.22em;fill:var(--text-p2);text-anchor:middle} .od-hub-t2{font-size:17px;font-weight:700;fill:var(--pa);text-anchor:middle} .od-ring-stage{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px; font-size:13.5px;color:var(--text-p1);min-height:22px} .od-ring-stage span:last-child{transition:opacity .3s} .od-ring-dot{width:8px;height:8px;border-radius:50%;background:var(--pa);flex:0 0 auto; animation:pdPulse 1.8s ease-in-out infinite} /* ============ 02 · LIVE ORDER JOURNEY ============ */ .od-jr-visual{padding:18px;min-height:560px} .od-jr-stage{display:grid;grid-template-columns:132px 1fr;gap:18px;height:100%;min-height:524px} .od-jr-rail{position:relative} .od-jr-line{position:absolute;top:22px;bottom:22px;left:50%;width:2px; background:linear-gradient(180deg,transparent,#2c2c2c 8%,#2c2c2c 92%,transparent)} .od-jr-st{position:absolute;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px} .od-jr-st i{width:11px;height:11px;border-radius:50%;background:#181c18;border:2px solid #3a3a3a; transition:.45s var(--ease);flex:0 0 auto} .od-jr-st.done i{background:var(--pa);border-color:var(--pa)} .od-jr-st.cur i{background:var(--pa);border-color:var(--pa);box-shadow:0 0 0 6px rgba(197,249,155,.14); animation:pdPulse 1.6s ease-in-out infinite} .od-jr-card{position:absolute;left:4px;right:4px;top:7%;transform:translateY(-50%);z-index:2; background:#141914;border:1px solid var(--pa);border-radius:12px;padding:10px 8px;text-align:center; box-shadow:0 10px 30px -10px rgba(197,249,155,.35); transition:top .65s var(--ease)} .od-jr-card-id{display:block;font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--pa)} .od-jr-card-st{display:block;font-size:9px;color:var(--text-p2);margin-top:4px;line-height:1.3;min-height:22px} .od-jr-iface{position:relative;border:1px solid #262a26;border-radius:16px;background:#0e110e; padding:18px;overflow:hidden;min-height:520px} .od-jr-iface-in{animation:odIfaceIn .5s var(--ease)} @keyframes odIfaceIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .od-if-head{display:flex;align-items:center;gap:10px;margin-bottom:16px} .od-if-head .od-if-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:rgba(197,249,155,.1);border:1px solid rgba(197,249,155,.3);flex:0 0 auto} .od-if-head .od-if-ico svg{width:17px;height:17px;stroke:var(--pa);fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .od-if-head h4{font-size:14.5px;color:#eef4ee} .od-if-head p{font-size:10.5px;color:var(--text-p2);margin:0} /* phone mini (stage 1 + others reuse) */ .od-if-phone{width:min(210px,72%);margin:0 auto;border:1.5px solid #2e342e;border-radius:22px; padding:12px;background:#101310} .od-if-phone .bar{height:7px;border-radius:4px;background:#232823;margin-bottom:8px} .od-if-phone .bar.w60{width:60%}.od-if-phone .bar.w40{width:40%}.od-if-phone .bar.w80{width:80%} .od-if-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #262a26; border-radius:10px;margin-bottom:8px;font-size:10.5px;color:var(--text-p1);background:#121511} .od-if-row i{width:16px;height:16px;border-radius:5px;background:#232823;flex:0 0 auto} .od-if-row b{margin-inline-start:auto;color:var(--pa);font-size:10px} .od-if-check{width:52px;height:52px;border-radius:50%;margin:14px auto;display:grid;place-items:center; background:rgba(197,249,155,.12);border:1.5px solid var(--pa)} .od-if-check svg{width:24px;height:24px;stroke:var(--pa);fill:none;stroke-width:2.4;stroke-linecap:round; stroke-linejoin:round} .od-if-check svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:odDraw .7s .25s var(--ease) forwards} @keyframes odDraw{to{stroke-dashoffset:0}} .od-if-big{font-size:12px;color:var(--text-p1);text-align:center;margin-top:6px} /* vendor ticket */ .od-if-ticket{border:1px dashed #3a403a;border-radius:12px;padding:14px;background:#121511;margin-bottom:12px} .od-if-ticket .t-id{font-size:10px;letter-spacing:.14em;color:var(--pa);margin-bottom:8px} /* kitchen progress */ .od-if-kprog{height:9px;border-radius:5px;background:#1c211c;overflow:hidden;margin:10px 0 6px} .od-if-kprog i{display:block;height:100%;width:0;border-radius:5px; background:linear-gradient(90deg,rgba(197,249,155,.5),var(--pa));transition:width 1.1s var(--ease)} .od-if-ksteps{display:flex;justify-content:space-between;font-size:9px;color:var(--text-p2)} .od-if-ksteps b{color:var(--pa);font-weight:600} /* driver card */ .od-if-driver{display:flex;align-items:center;gap:12px;border:1px solid #262a26;border-radius:12px; padding:12px;background:#121511;margin-bottom:12px} .od-if-avatar{width:42px;height:42px;border-radius:50%;flex:0 0 auto; background:radial-gradient(circle at 34% 30%,#2b332b,#161a16);border:1.5px solid rgba(197,249,155,.4); display:grid;place-items:center} .od-if-avatar svg{width:20px;height:20px;stroke:var(--pa);fill:none;stroke-width:1.7;stroke-linecap:round} .od-if-driver h5{font-size:12.5px;color:#eef4ee} .od-if-driver p{font-size:9.5px;color:var(--text-p2);margin:2px 0 0} /* mini map in journey */ .od-if-map{border:1px solid #262a26;border-radius:12px;overflow:hidden;background:#0b0d0b} .od-if-map svg{display:block;width:100%;height:auto} .od-if-maproute{fill:none;stroke:var(--pa);stroke-width:2;stroke-linecap:round; stroke-dasharray:1;stroke-dashoffset:1;animation:odRouteDraw 2.2s var(--ease) forwards} @keyframes odRouteDraw{to{stroke-dashoffset:0}} .od-if-mapdot{fill:var(--pa)} /* delivered stamp */ .od-if-stamp{margin:18px auto 8px;width:max-content;padding:10px 22px;border:2px solid var(--pa); border-radius:10px;color:var(--pa);font-size:15px;font-weight:800;letter-spacing:.14em; transform:rotate(-5deg);animation:odStamp .45s var(--ease)} @keyframes odStamp{from{transform:rotate(-5deg) scale(1.7);opacity:0}to{transform:rotate(-5deg) scale(1);opacity:1}} .od-if-stars{display:flex;justify-content:center;gap:6px;margin-top:12px} .od-if-stars svg{width:20px;height:20px;fill:var(--pa);stroke:none} /* static (REDUCE / mobile) stacked stages */ .od-jr-static{display:none} .od-jr-static .od-jr-scard{display:flex;gap:12px;align-items:flex-start;border:1px solid #262a26; border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#121511} .od-jr-static .od-jr-scard i{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid; place-items:center;font-style:normal;font-size:10.5px;color:var(--pa); border:1px solid rgba(197,249,155,.4);background:rgba(197,249,155,.07)} .od-jr-static h5{font-size:13px;color:#eef4ee;margin-bottom:2px} .od-jr-static p{font-size:11px;color:var(--text-p2);margin:0;line-height:1.5} .page-product.is-static-jr .od-jr-stage{display:none} .page-product.is-static-jr .od-jr-static{display:block} .page-product.is-static-jr .od-jr-visual{min-height:0} /* ============ 03 · CHALLENGES — mini transformations ============ */ .od-ch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .od-ch{border:1px solid #262a26;border-radius:18px;background:#121511;padding:22px; transition:border-color .35s,transform .45s var(--ease)} .od-ch:hover{border-color:#374037;transform:translateY(-4px)} .od-ch-viz{height:74px;display:grid;place-items:center;margin-bottom:16px;border-radius:12px; background:#0d100d;border:1px solid #20241f} .od-ch-viz svg{width:130px;height:70px} .od-ch-before{font-size:12.5px;color:var(--text-p2);margin:0 0 4px} .od-ch-x svg{width:16px;height:16px;stroke:var(--pa);fill:none;stroke-width:2;stroke-linecap:round; stroke-linejoin:round;margin:6px 0} .od-ch-after{font-size:14.5px;color:var(--pa);line-height:1.35} /* viz pieces */ .od-ch-viz .p{fill:#3a403a;transition:fill .6s} .od-ch-viz .l{fill:none;stroke:#3a403a;stroke-width:1.6;stroke-dasharray:90;stroke-dashoffset:90; transition:stroke-dashoffset 1s var(--ease) .2s,stroke .6s} .od-ch-viz .hub{fill:none;stroke:var(--pa);stroke-width:1.6;opacity:0;transition:opacity .5s .9s} .od-ch-viz .hub-in{fill:var(--pa);opacity:0;transition:opacity .5s .9s} .od-ch.in .od-ch-viz .l{stroke-dashoffset:0;stroke:var(--pa)} .od-ch.in .od-ch-viz .hub,.od-ch.in .od-ch-viz .hub-in{opacity:1} .od-ch-viz .clk{fill:none;stroke:#3a403a;stroke-width:1.6} .od-ch-viz .clk-h,.od-ch-viz .clk-m{stroke:#3a403a;stroke-width:1.8;stroke-linecap:round; transform-origin:36px 32px;transition:stroke .6s} .od-ch.in .od-ch-viz .clk-m{animation:odSpinClk 3s linear infinite;stroke:var(--pa)} .od-ch.in .od-ch-viz .clk-h{stroke:var(--pa)} @keyframes odSpinClk{to{transform:rotate(360deg)}} .od-ch-viz .ok{fill:none;stroke:var(--pa);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .7s var(--ease) .5s} .od-ch.in .od-ch-viz .ok{stroke-dashoffset:0} .od-ch-viz .mess{fill:none;stroke:#3a403a;stroke-width:1.4;stroke-dasharray:4 5;transition:opacity .6s .4s} .od-ch.in .od-ch-viz .mess{opacity:.15} .od-ch-viz .clean{fill:none;stroke:var(--pa);stroke-width:2;stroke-dasharray:120;stroke-dashoffset:120; transition:stroke-dashoffset 1s var(--ease) .5s} .od-ch.in .od-ch-viz .clean{stroke-dashoffset:0} .od-ch-viz .clean-p{fill:var(--pa);opacity:0;transition:opacity .4s 1.3s} .od-ch.in .od-ch-viz .clean-p{opacity:1;animation:pdPulse 1.8s 1.4s ease-in-out infinite} .od-ch-viz .fog{fill:#232823;opacity:.9;transition:opacity .8s .3s} .od-ch.in .od-ch-viz .fog{opacity:.12} .od-ch-viz .pin{fill:none;stroke:var(--pa);stroke-width:1.8;stroke-linejoin:round; stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .9s var(--ease) .5s} .od-ch.in .od-ch-viz .pin{stroke-dashoffset:0} .od-ch-viz .pin-c{fill:var(--pa);opacity:0;transition:opacity .4s 1.2s} .od-ch.in .od-ch-viz .pin-c{opacity:1} .od-ch-viz .rc{fill:none;stroke:#3a403a;stroke-width:1.4;transition:opacity .6s .4s} .od-ch.in .od-ch-viz .rc{opacity:.2} .od-ch-viz .ledger{fill:none;stroke:var(--pa);stroke-width:1.6;opacity:0;transition:opacity .6s .5s} .od-ch-viz .ledger-l{stroke:var(--pa);stroke-width:1.6;stroke-linecap:round;opacity:0;transition:opacity .6s .8s} .od-ch.in .od-ch-viz .ledger,.od-ch.in .od-ch-viz .ledger-l{opacity:1} .od-ch-viz .flat{stroke:#3a403a;stroke-width:1.8;stroke-linecap:round} .od-ch-viz .bar{fill:var(--pa);transform:scaleY(0);transform-origin:bottom;transform-box:fill-box; transition:transform .7s var(--ease)} .od-ch.in .od-ch-viz .b1{transform:scaleY(1);transition-delay:.4s} .od-ch.in .od-ch-viz .b2{transform:scaleY(1);transition-delay:.6s} .od-ch.in .od-ch-viz .b3{transform:scaleY(1);transition-delay:.8s} /* ============ 04 · PLATFORM ECOSYSTEM ============ */ .od-eco{max-width:960px;margin:0 auto} .od-eco-svg svg{width:100%;height:auto;display:block} .od-eco-node{cursor:pointer} .od-eco-path{fill:none;stroke:#2c2c2c;stroke-width:1.4;stroke-dasharray:5 7;transition:stroke .5s} .od-eco-path.on{stroke:var(--pa);animation:odDashMove 3.5s linear infinite} .od-eco-node-c{fill:#101310;stroke:#2e342e;stroke-width:1.4;transition:.45s} .od-eco-node.on .od-eco-node-c{stroke:var(--pa);fill:#141a12} .od-eco-node-t{font-size:11.5px;fill:var(--text-p1);text-anchor:middle;font-weight:600;transition:fill .4s} .od-eco-node.on .od-eco-node-t{fill:var(--pa)} .od-eco-hub-c{fill:#0c0e0c;stroke:var(--pa);stroke-opacity:.55;stroke-width:1.5} .od-eco-hub-t{font-size:11px;font-weight:800;letter-spacing:.12em;fill:var(--pa);text-anchor:middle} .od-eco-chip{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px; border:1px solid #262a26;border-radius:14px;background:#121511;padding:14px 20px;min-height:64px} .od-eco-chip b{font-size:14px;color:#eef4ee} .od-eco-chip span{font-size:12px;color:var(--pa);font-weight:700} .od-eco-chip p{font-size:11.5px;color:var(--text-p2);margin:0} /* ============ 05 · CUSTOMER EXPERIENCE ============ */ .od-cx{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;max-width:980px;margin:0 auto} .od-phone{position:relative;width:280px;height:560px;border-radius:38px;border:2px solid #2e342e; background:#0b0d0b;padding:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);margin-inline:auto} .od-phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:96px;height:22px; border-radius:0 0 14px 14px;background:#0b0d0b;z-index:2;border:1.5px solid #2e342e;border-top:0} .od-phone-screen{height:100%;border-radius:28px;background:#101310;overflow:hidden;position:relative; display:flex;flex-direction:column} .od-cx-ui{padding:34px 14px 14px;display:flex;flex-direction:column;gap:9px;height:100%; animation:odIfaceIn .45s var(--ease)} .od-cx-ui .cx-head{font-size:13px;font-weight:700;color:#eef4ee} .od-cx-ui .cx-sub{font-size:9.5px;color:var(--text-p2);margin-top:-6px} .od-cx-search{display:flex;align-items:center;gap:8px;border:1px solid #262a26;border-radius:10px; padding:8px 10px;font-size:9.5px;color:var(--text-ph)} .od-cx-card{border:1px solid #262a26;border-radius:12px;padding:10px;background:#121511} .od-cx-card .cx-img{height:52px;border-radius:8px;margin-bottom:8px; background:linear-gradient(120deg,#1d241c,#26301f)} .od-cx-card h6{font-size:10.5px;color:#eef4ee} .od-cx-card p{font-size:8.5px;color:var(--text-p2);margin:2px 0 0} .od-cx-card b{font-size:10px;color:var(--pa)} .od-cx-row2{display:grid;grid-template-columns:1fr 1fr;gap:9px} .od-cx-btn{margin-top:auto;text-align:center;background:var(--pa);color:#121212;font-size:11px; font-weight:700;border-radius:10px;padding:10px} .od-cx-btn.ghost{background:transparent;border:1px solid rgba(197,249,155,.45);color:var(--pa)} .od-cx-track{display:flex;flex-direction:column;gap:0} .od-cx-tr{display:flex;gap:9px;align-items:flex-start;padding:6px 0} .od-cx-tr i{width:14px;height:14px;border-radius:50%;border:2px solid #3a3a3a;flex:0 0 auto;margin-top:1px} .od-cx-tr.done i{border-color:var(--pa);background:var(--pa)} .od-cx-tr.cur i{border-color:var(--pa);animation:pdPulse 1.6s ease-in-out infinite} .od-cx-tr span{font-size:9.5px;color:var(--text-p1)} .od-cx-tr:not(.done):not(.cur) span{color:var(--text-ph)} .od-cx-stars{display:flex;gap:6px;justify-content:center;padding:10px 0} .od-cx-stars svg{width:22px;height:22px;fill:var(--pa)} .od-cx-side{min-width:0} .od-cx-stepname{font-size:clamp(22px,2.4vw,30px);font-weight:700;color:#eef4ee;margin-bottom:10px; min-height:1.3em} .od-cx-stepdesc{font-size:14.5px;color:var(--text-p2);line-height:1.65;max-width:48ch;margin:0 0 26px; min-height:3.2em} .od-cx-dots{display:flex;flex-wrap:wrap;gap:8px} .od-cx-dot{font:inherit;font-size:11px;padding:7px 13px;border-radius:999px;cursor:pointer; border:1px solid #2c2c2c;background:#121511;color:var(--text-p2);transition:.3s} .od-cx-dot.on{border-color:var(--pa);color:var(--pa);background:rgba(197,249,155,.08)} /* ============ 06 · VENDOR DASHBOARD ============ */ .od-vend{display:grid;grid-template-columns:210px 1fr;border:1px solid #262a26;border-radius:20px; overflow:hidden;background:#0c0e0c;min-height:430px} .od-vend-nav{background:#101310;border-inline-end:1px solid #262a26;padding:18px 12px; display:flex;flex-direction:column;gap:4px} .od-vend-nav button{display:flex;align-items:center;gap:10px;font:inherit;font-size:12px;text-align:start; color:var(--text-p2);padding:9px 12px;border-radius:9px;cursor:default;transition:.3s} .od-vend-nav button i{width:8px;height:8px;border-radius:3px;background:#2c322c;flex:0 0 auto;transition:.3s} .od-vend-nav button.on{color:var(--pa);background:rgba(197,249,155,.07)} .od-vend-nav button.on i{background:var(--pa)} .od-vend-main{padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0} .od-vend-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .od-vend-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:1} .od-vend-col{border:1px solid #22261f;border-radius:14px;padding:12px;background:#101310;min-width:0} .od-vend-col h5{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-p2); margin-bottom:10px} .od-vorder{border:1px solid #262a26;border-radius:10px;padding:10px;background:#121511;margin-bottom:8px; animation:odIfaceIn .5s var(--ease)} .od-vorder .vo-top{display:flex;justify-content:space-between;font-size:10px;margin-bottom:6px} .od-vorder .vo-top b{color:var(--pa)} .od-vorder .vo-items{font-size:9.5px;color:var(--text-p2);line-height:1.5} .od-vorder .vo-st{display:inline-block;margin-top:8px;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase; padding:3px 8px;border-radius:999px;border:1px solid rgba(197,249,155,.4);color:var(--pa)} .od-vorder .vo-prog{height:5px;border-radius:3px;background:#1c211c;margin-top:8px;overflow:hidden} .od-vorder .vo-prog i{display:block;height:100%;background:var(--pa);border-radius:3px; transition:width .9s var(--ease)} .od-vempty{font-size:10.5px;color:var(--text-ph);text-align:center;padding:22px 6px;border:1px dashed #2c2c2c; border-radius:10px} /* ============ 07 · DELIVERY MAP ============ */ .od-map{max-width:1020px;margin:0 auto;position:relative} .od-map-svg{width:100%;height:auto;display:block;border:1px solid #262a26;border-radius:20px;background:#0b0d0b} .od-map-streets path{stroke:#1d211d;stroke-width:2;fill:none} .od-map-streets .diag{stroke:#181c18;stroke-width:1.4} .od-map-blocks rect{fill:#121511;stroke:#20241f} .od-map-route{fill:none;stroke:var(--pa);stroke-width:3;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1;animation:odRouteDraw 8s linear infinite} .od-map-route-done{fill:none;stroke:var(--pa);stroke-opacity:.18;stroke-width:7;stroke-linecap:round} .od-map-poi .poi-c{fill:#101310;stroke:var(--pa);stroke-width:1.6} .od-map-poi .poi-i{stroke:var(--pa);stroke-width:1.6;stroke-linecap:round;fill:none} .od-map-driver .drv-halo{fill:var(--pa);opacity:.16;animation:pdPulse 1.8s ease-in-out infinite} .od-map-driver .drv-c{fill:var(--pa);stroke:#0b0d0b;stroke-width:2} .od-map-hud{position:absolute;inset-inline-start:26px;top:22px;display:flex;flex-direction:column;gap:12px; pointer-events:none} .od-map-status{display:flex;align-items:center;gap:9px;background:rgba(12,14,12,.85);backdrop-filter:blur(6px); border:1px solid #2c2c2c;border-radius:999px;padding:9px 16px;font-size:12.5px;color:var(--text-p1); width:max-content;max-width:70vw} .od-map-toast{background:rgba(16,19,16,.92);border:1px solid rgba(197,249,155,.4);border-radius:14px; padding:11px 16px;width:max-content;max-width:70vw;transform:translateY(-8px);opacity:0;transition:.5s var(--ease)} .od-map-toast.show{transform:none;opacity:1} .od-map-toast b{display:block;font-size:11px;color:var(--pa);margin-bottom:2px} .od-map-toast span{font-size:11px;color:var(--text-p1)} [dir="rtl"] .od-map-hud{inset-inline-start:auto;inset-inline-end:26px} /* ============ 08 · OPS COMMAND CENTER ============ */ .od-ops{border:1px solid #262a26;border-radius:20px;background:#0c0e0c;padding:22px} .od-ops-kpis{display:grid;grid-template-columns:repeat(9,1fr);gap:9px;margin-bottom:18px} .od-ops-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .od-ops-col{border:1px solid #22261f;border-radius:14px;background:#101310;padding:12px;min-height:210px} .od-ops-col h5{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-p2); margin-bottom:10px;display:flex;justify-content:space-between;align-items:center} .od-ops-col h5 b{color:var(--pa);font-size:12px} .od-oc-chip{border:1px solid #262a26;border-radius:9px;background:#121511;padding:8px 10px;margin-bottom:7px; font-size:10px;color:var(--text-p1);display:flex;justify-content:space-between;gap:8px; animation:odIfaceIn .45s var(--ease)} .od-oc-chip b{color:var(--pa);font-weight:600} .od-oc-chip.hot{border-color:rgba(197,249,155,.5)} /* ============ 09 · MODULES VIEW ============ */ .od-mod-view{border:1px solid #262a26;border-radius:20px;background:#101210;padding:28px;min-height:380px} .od-mod-view-in{animation:odIfaceIn .45s var(--ease)} .od-mod-top{display:flex;align-items:center;gap:16px;margin-bottom:18px} .od-mod-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto; background:rgba(197,249,155,.09);border:1px solid rgba(197,249,155,.35)} .od-mod-ico svg{width:25px;height:25px;stroke:var(--pa);fill:none;stroke-width:1.7;stroke-linecap:round; stroke-linejoin:round} .od-mod-top h3{font-size:20px;color:#eef4ee} .od-mod-top p{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pa);margin:3px 0 0} .od-mod-view>p{font-size:14px;color:var(--text-p2);line-height:1.7;margin:0 0 20px;max-width:56ch} .od-mod-feats{display:flex;flex-direction:column;gap:9px} .od-mod-feats span{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-p1)} .od-mod-feats svg{width:15px;height:15px;stroke:var(--pa);fill:none;stroke-width:2.2;stroke-linecap:round; stroke-linejoin:round;flex:0 0 auto} /* ============ 10 · MULTI-VENDOR ============ */ .od-mv{position:relative;max-width:1080px;margin:0 auto} .od-mv-links{position:absolute;inset:0;width:100%;height:100%} .od-mv-links .mv-l{fill:none;stroke:#2c2c2c;stroke-width:1.5;stroke-dasharray:6 8} .od-mv.in .od-mv-links .mv-l{stroke:var(--pa);stroke-opacity:.5;animation:odDashMove 4s linear infinite} .od-mv-grid{position:relative;display:grid;grid-template-columns:1fr 1.1fr 1fr;grid-template-rows:auto auto; gap:18px;align-items:stretch} .od-mv-card{border:1px solid #262a26;border-radius:16px;background:#101310;padding:18px} .od-mv-card h4{font-size:14px;color:#eef4ee;display:flex;align-items:center;gap:9px;margin-bottom:4px} .od-mv-card h4 i{width:9px;height:9px;border-radius:50%;background:var(--mvc,#c5f99b);flex:0 0 auto} .od-mv-card>p{font-size:10.5px;color:var(--text-p2);margin:0 0 12px} .od-mv-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px} .od-mv-stats div{background:#121511;border:1px solid #22261f;border-radius:9px;padding:7px 9px} .od-mv-stats b{display:block;font-size:13px;color:var(--mvc,#c5f99b)} .od-mv-stats span{font-size:8.5px;color:var(--text-p2)} .od-mv-hub{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;justify-content:center; text-align:center;border:1px solid rgba(197,249,155,.4);border-radius:20px; background:radial-gradient(circle at 50% 0%,rgba(197,249,155,.08),#0e110e 65%);padding:30px 24px} .od-mv-hub h3{font-size:clamp(19px,2vw,25px);color:#f0f6f0;margin-bottom:10px} .od-mv-hub p{font-size:13px;color:var(--text-p2);line-height:1.65;margin:0 0 18px} .od-mv-a{grid-column:1;grid-row:1}.od-mv-b{grid-column:1;grid-row:2} .od-mv-c{grid-column:3;grid-row:1}.od-mv-d{grid-column:3;grid-row:2} /* ============ 11 · OUTCOMES ============ */ .od-oc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .od-oc-card{border:1px solid #262a26;border-radius:16px;background:#121511;padding:22px; transition:border-color .35s,transform .45s var(--ease)} .od-oc-card:hover{border-color:rgba(197,249,155,.4);transform:translateY(-4px)} .od-oc-card svg{width:24px;height:24px;stroke:var(--pa);fill:none;stroke-width:1.7;stroke-linecap:round; stroke-linejoin:round;margin-bottom:14px} .od-oc-card h4{font-size:14.5px;color:#eef4ee;margin-bottom:7px} .od-oc-card p{font-size:12px;color:var(--text-p2);line-height:1.6;margin:0} /* ============ 12 · ANALYTICS STICKY ============ */ .od-an-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:1100px;margin:0 auto 14px} .od-an-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:1100px;margin:0 auto} .od-an-panel{border:1px solid #262a26;border-radius:14px;background:#101310;padding:13px;min-height:150px; transition:opacity .5s var(--ease),transform .5s var(--ease)} .od-an-panel.hidden{opacity:0;transform:translateY(22px);pointer-events:none} .od-an-panel h6{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-p2); margin-bottom:4px} .od-an-panel .an-val{font-size:17px;font-weight:700;color:var(--pa);display:block;margin-bottom:8px} .od-an-panel svg{width:100%;height:auto;display:block} .od-an-panel .an-lab{font-size:7.5px;fill:#7d8b7d} .od-an-kpis .pd-kpi{transition:opacity .5s var(--ease),transform .5s var(--ease)} .od-an-kpis .pd-kpi.hidden{opacity:0;transform:translateY(14px)} .an-bars rect{fill:var(--pa);opacity:.85;transform-box:fill-box;transform-origin:bottom} .an-line{fill:none;stroke:var(--pa);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .an-area{fill:var(--pa);opacity:.12} .an-grid-l{stroke:#1d211d;stroke-width:1} .an-donut-bg{fill:none;stroke:#1d211d;stroke-width:7} .an-donut-fg{fill:none;stroke:var(--pa);stroke-width:7;stroke-linecap:round} .an-heat rect{fill:var(--pa)} /* ============ 13 · NOTIFICATIONS ============ */ .od-nt-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1020px;margin:0 auto} .od-nt-copy h2{font-size:clamp(26px,3.2vw,40px);line-height:1.12;color:#f0f6f0;margin-bottom:16px} .od-nt-copy p{font-size:15.5px;color:var(--text-p2);line-height:1.65;margin:0 0 24px;max-width:50ch} .od-phone-sm{width:300px;height:520px} .od-nt-feed{height:100%;border-radius:28px;background:#101310;padding:40px 12px 12px;overflow:hidden; display:flex;flex-direction:column;gap:8px} .od-nt-item{display:flex;gap:10px;align-items:flex-start;border:1px solid #262a26;border-radius:13px; padding:10px 12px;background:#121511;transition:border-color .4s,opacity .4s} .od-nt-item.now{border-color:rgba(197,249,155,.5);animation:odIfaceIn .45s var(--ease)} .od-nt-item.old{opacity:.45} .od-nt-item i{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center; background:rgba(197,249,155,.08);border:1px solid rgba(197,249,155,.25)} .od-nt-item i svg{width:13px;height:13px;stroke:var(--pa);fill:none;stroke-width:1.8;stroke-linecap:round; stroke-linejoin:round} .od-nt-item>div{flex:1;min-width:0} .od-nt-item b{display:block;font-size:10.5px;color:#eef4ee} .od-nt-item span{font-size:9px;color:var(--text-p2)} .od-nt-item em{margin-inline-start:auto;font-style:normal;font-size:8.5px;color:var(--text-ph); align-self:center;flex:0 0 auto} /* ============ 14 · PAYMENT FLOW ============ */ .od-pay{max-width:1020px;margin:0 auto} .od-pay-chain{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0; border:1px solid #262a26;border-radius:18px;background:#101310;padding:26px 22px;margin-bottom:22px} .od-pay-chain::before{content:'';position:absolute;top:50%;inset-inline:60px;height:2px; background:repeating-linear-gradient(90deg,#2c2c2c 0 8px,transparent 8px 16px)} .od-pay-node{position:relative;text-align:center;z-index:1} .od-pay-node i{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 10px;border-radius:50%; background:#0e110e;border:1.5px solid #3a403a;transition:.4s} .od-pay-node i svg{width:20px;height:20px;stroke:var(--text-p2);fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;transition:.4s} .od-pay-node.on i{border-color:var(--pa);box-shadow:0 0 22px -4px rgba(197,249,155,.4)} .od-pay-node.on i svg{stroke:var(--pa)} .od-pay-node span{font-size:11px;color:var(--text-p1);font-weight:600} .od-pay-pulse{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%; background:var(--pa);box-shadow:0 0 14px 2px rgba(197,249,155,.5);z-index:2; inset-inline-start:60px;animation:odPayRun 5.5s var(--ease) infinite} @keyframes odPayRun{0%{inset-inline-start:60px;opacity:0}8%{opacity:1} 92%{opacity:1}100%{inset-inline-start:calc(100% - 70px);opacity:0}} .od-pay-methods{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap} .od-pay-lab{font-size:12px;color:var(--text-p2);letter-spacing:.06em;text-transform:uppercase} /* ============ 15 · INTEGRATIONS LEGEND ============ */ .od-int-legend{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-top:26px} .od-int-legend span{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-p2)} .od-int-legend i{font-style:normal} .od-int-legend em{display:inline-block;font-style:normal;font-size:8.5px;letter-spacing:.1em; text-transform:uppercase;padding:3px 8px;border-radius:999px} .od-int-legend em.av{background:var(--brand-dim);color:var(--brand);border:1px solid var(--brand-line)} .od-int-legend em.su{background:#171a17;color:var(--text-p1);border:1px solid #2c2c2c} .od-int-legend em.cu{background:transparent;color:var(--text-p2);border:1px dashed #3a3a3a} /* ============ 16 · MOBILE APPS ============ */ .od-mb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:end} .od-mb{display:flex;flex-direction:column;gap:14px} .od-mb .od-phone{width:100%;max-width:250px;height:440px} .od-mb .od-phone.wide{max-width:100%;height:440px;aspect-ratio:auto} .od-mb h4{text-align:center;font-size:14px;color:#eef4ee} .od-mb p{text-align:center;font-size:11px;color:var(--text-p2);margin:-8px 0 0} .od-mb-ui{padding:32px 12px 12px;display:flex;flex-direction:column;gap:8px;height:100%} .od-mb-ui .bar{height:7px;border-radius:4px;background:#232823} .od-mb-ui .bar.w50{width:50%}.od-mb-ui .bar.w70{width:70%}.od-mb-ui .bar.acc{background:rgba(197,249,155,.4)} .od-mb-ui .tile{border:1px solid #262a26;border-radius:9px;background:#121511;padding:8px} .od-mb-ui .tile b{display:block;font-size:9px;color:var(--pa)} .od-mb-ui .tile span{font-size:8px;color:var(--text-p2)} .od-mb-ui .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px} .od-mb-ui .mapline{height:56px;border-radius:9px;border:1px solid #262a26;position:relative;overflow:hidden; background:#0b0d0b} .od-mb-ui .mapline svg{position:absolute;inset:0;width:100%;height:100%} .od-mb-ui .cta{margin-top:auto;background:var(--pa);color:#121212;text-align:center;font-size:10px; font-weight:700;border-radius:9px;padding:9px} /* ============ 17 · AI-READY ============ */ .od-ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .od-ai-card{position:relative;border:1px solid #262a26;border-radius:16px;background:#121511;padding:24px; overflow:hidden;transition:border-color .35s,transform .45s var(--ease)} .od-ai-card:hover{border-color:rgba(197,249,155,.4);transform:translateY(-4px)} .od-ai-card svg{width:24px;height:24px;stroke:var(--pa);fill:none;stroke-width:1.7;stroke-linecap:round; stroke-linejoin:round;margin-bottom:14px} .od-ai-card h4{font-size:15px;color:#eef4ee;margin-bottom:7px} .od-ai-card p{font-size:12.5px;color:var(--text-p2);line-height:1.6;margin:0 0 16px} .od-ai-badge{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--pa);border:1px dashed rgba(197,249,155,.45);border-radius:999px; padding:5px 12px} .od-ai-badge i{width:6px;height:6px;border-radius:50%;background:var(--pa);animation:pdPulse 2s ease-in-out infinite} .od-ai-card:last-child{grid-column:1/-1;display:flex;align-items:center;gap:20px;padding:20px 24px} .od-ai-card:last-child p{margin:0;font-size:13px} /* ============ 19 · BUILDER BAND ============ */ .od-builder{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px; border:1px solid rgba(197,249,155,.35);border-radius:24px;overflow:hidden; background:linear-gradient(120deg,#131a10,#0d100d 60%);padding:44px 48px} .od-builder-glow{position:absolute;inset:-40%;pointer-events:none; background:conic-gradient(from 180deg,transparent 70%,rgba(197,249,155,.12) 85%,transparent 96%); animation:pdSpin 9s linear infinite} .od-builder>*:not(.od-builder-glow){position:relative;z-index:1} .od-builder h2{font-size:clamp(24px,3vw,36px);color:#f2f7f2;margin-bottom:10px} .od-builder p{font-size:15px;color:var(--text-p2);margin:0;max-width:52ch;line-height:1.6} /* ============ 20 · CASE STUDY ============ */ .od-case-visual{display:flex;flex-direction:column;gap:16px;min-height:440px} .od-case-art{flex:1;border:1px solid #262a26;border-radius:16px;background:#0d100d; display:grid;place-items:center;overflow:hidden;min-height:220px} .od-case-art svg{width:min(78%,320px);height:auto} .od-case-art-in{animation:odIfaceIn .5s var(--ease)} .od-case-meta{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:11.5px; color:var(--text-p2)} .od-case-num{font-weight:700;color:var(--pa);letter-spacing:.1em} .od-case-texts .pd-story-text{display:none} .od-case-texts .pd-story-text.on{display:block} .page-product.is-static-case .od-case-texts .pd-story-text{display:block;margin-bottom:34px} .ca-art-l{fill:none;stroke:var(--pa);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ca-art-dim{fill:none;stroke:#3a403a;stroke-width:1.6;stroke-linecap:round} .ca-art-f{fill:var(--pa)} /* ============ 23 · FINALE ============ */ .od-finale-eco{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,90%); opacity:.5;pointer-events:none} /* ============ RESPONSIVE ============ */ @media (max-width:960px){ .od-ch-grid{grid-template-columns:1fr 1fr} .od-oc-grid{grid-template-columns:1fr 1fr} .od-an-grid{grid-template-columns:1fr 1fr} .od-ops-kpis{grid-template-columns:repeat(3,1fr)} .od-ops-flow{grid-template-columns:1fr 1fr} .od-mb-grid{grid-template-columns:1fr 1fr} .od-ai-grid{grid-template-columns:1fr 1fr} .od-mv-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto} .od-mv-hub{grid-column:1/-1;grid-row:auto;order:-1} .od-mv-a,.od-mv-b,.od-mv-c,.od-mv-d{grid-column:auto;grid-row:auto} .od-mv-links{display:none} .od-vend{grid-template-columns:1fr} .od-vend-nav{flex-direction:row;overflow-x:auto;border-inline-end:0;border-bottom:1px solid #262a26} .od-vend-nav button{white-space:nowrap} .od-builder{flex-direction:column;align-items:flex-start;padding:34px 28px} } @media (max-width:860px){ .pd-space{height:auto!important} .od-cx{grid-template-columns:1fr;gap:30px} .od-cx-side{order:-1;text-align:center} .od-cx-stepdesc{margin-inline:auto} .od-cx-dots{justify-content:center} .od-nt-grid{grid-template-columns:1fr;gap:34px} .od-jr-visual{min-height:0} .od-pay-chain{grid-template-columns:repeat(3,1fr);gap:18px} .od-pay-chain::before,.od-pay-pulse{display:none} .od-an-kpis{grid-template-columns:1fr 1fr} .od-case-visual{min-height:0} } @media (max-width:560px){ .od-ch-grid{grid-template-columns:1fr} .od-oc-grid{grid-template-columns:1fr} .od-an-grid{grid-template-columns:1fr} .od-ops-flow{grid-template-columns:1fr} .od-mb-grid{grid-template-columns:1fr} .od-ai-grid{grid-template-columns:1fr} .od-vend-cols{grid-template-columns:1fr} .od-vend-kpis{grid-template-columns:1fr} .od-map-hud{inset-inline-start:12px;top:12px} .od-pay-chain{grid-template-columns:1fr 1fr} .od-ring-stage{font-size:12px} } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce){ .pd-space{height:auto!important} .od-ring-dash,.od-hub-pulse,.od-ring-dot,.od-jr-st.cur i,.od-map-route,.od-map-driver .drv-halo, .od-pay-pulse,.od-builder-glow,.od-ai-badge i,.od-ch.in .od-ch-viz .clk-m, .od-ch.in .od-ch-viz .clean-p{animation:none!important} .od-map-route{stroke-dashoffset:0} .od-jr-card{transition:none} .od-jr-iface-in,.od-vorder,.od-oc-chip,.od-nt-item.now,.od-cx-ui,.od-mod-view-in,.od-case-art-in, .od-if-stamp{animation:none!important} .od-ch-viz *{transition:none!important} .od-ch .od-ch-viz .l{stroke-dashoffset:0;stroke:var(--pa)} .od-ch .od-ch-viz .hub,.od-ch .od-ch-viz .hub-in,.od-ch .od-ch-viz .clean-p,.od-ch .od-ch-viz .pin-c{opacity:1} .od-ch .od-ch-viz .clean,.od-ch .od-ch-viz .pin{stroke-dashoffset:0;stroke:var(--pa)} .od-ch .od-ch-viz .ok{stroke-dashoffset:0} .od-ch .od-ch-viz .mess,.od-ch .od-ch-viz .rc{opacity:.2} .od-ch .od-ch-viz .fog{opacity:.12} .od-ch .od-ch-viz .ledger,.od-ch .od-ch-viz .ledger-l{opacity:1} .od-ch .od-ch-viz .bar{transform:scaleY(1)} .od-mv .od-mv-links .mv-l{stroke:var(--pa);stroke-opacity:.5;animation:none} .od-if-check svg path{stroke-dashoffset:0;animation:none} .od-if-maproute{stroke-dashoffset:0;animation:none} .od-an-panel,.od-an-kpis .pd-kpi{transition:none} .od-map-toast{transition:none} .od-pay-node i{border-color:var(--pa)} .od-pay-node i svg{stroke:var(--pa)} }