/* Kailvex Ecommerce — immersive product page */
.ecommerce-page{background:#fff}.ecommerce-page .section{padding:100px 0}.ec-hero{position:relative;min-height:860px;padding:150px 0 90px;overflow:hidden;background:radial-gradient(circle at 78% 20%,rgba(7,141,255,.14),transparent 29%),linear-gradient(180deg,#f7fbff,#fff)}.ec-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(7,93,226,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(7,93,226,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,transparent,#000 25%,#000 80%,transparent)}.ec-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);gap:65px;align-items:center}.ec-hero-copy h1{max-width:760px;font-size:clamp(3.2rem,6vw,6.35rem);line-height:.92;letter-spacing:-.065em;color:#07152e}.ec-hero-copy h1 span{color:transparent;background:linear-gradient(135deg,#0753cc,#079cff 64%,#56cbff);background-clip:text;-webkit-background-clip:text}.ec-hero-copy>p{max-width:680px;margin-top:28px;color:#58677c;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.75}.ec-proof-row{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:32px}.ec-proof-row span{display:inline-flex;align-items:center;gap:8px;color:#354761;font-size:.8rem;font-weight:850}.ec-proof-row svg{width:17px;height:17px;fill:none;stroke:#0877e7;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

/* Hero animated commerce theatre */
.commerce-theatre{position:relative;min-height:650px;perspective:1500px}.theatre-glow{position:absolute;width:520px;height:520px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(7,141,255,.25),transparent 68%);filter:blur(18px);animation:ecBreathe 5s ease-in-out infinite}.shop-scene{position:absolute;left:1%;top:12%;width:54%;height:390px;border-radius:30px;background:linear-gradient(165deg,#fff,#eff6ff);border:1px solid rgba(7,93,226,.12);box-shadow:0 35px 75px rgba(5,44,112,.15);transform:rotateY(8deg) rotateX(2deg);overflow:hidden;z-index:2}.shop-sign{height:84px;display:grid;grid-template-columns:52px 1fr;grid-template-rows:1fr 1fr;column-gap:12px;align-items:center;padding:17px 22px;background:#fff}.shop-sign__mark{grid-row:1/3;width:50px;height:50px;display:grid;place-items:center;border-radius:15px;color:#fff;background:linear-gradient(135deg,#063c99,#079cff);font-weight:950;font-size:1.3rem}.shop-sign strong{align-self:end;color:#0d2448;font-size:1.05rem}.shop-sign small{align-self:start;color:#6b7990;font-size:.66rem;font-weight:750}.shop-awning{height:56px;display:grid;grid-template-columns:repeat(5,1fr);transform-origin:top;animation:awningOpen 1.4s .35s cubic-bezier(.2,.8,.2,1) both}.shop-awning i:nth-child(odd){background:linear-gradient(#0c72e2,#0752be)}.shop-awning i:nth-child(even){background:#fff}.shop-awning i{border-radius:0 0 15px 15px;box-shadow:0 8px 12px rgba(2,29,70,.08)}.shop-window{position:absolute;left:24px;right:92px;bottom:22px;top:158px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;border-radius:18px;background:linear-gradient(150deg,#eaf5ff,#fff);border:1px solid #dbeafa}.shop-product{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:13px;background:#fff;box-shadow:0 9px 22px rgba(4,35,88,.07);animation:productPop 4.8s ease-in-out infinite}.shop-product:nth-child(2){animation-delay:-1.2s}.shop-product:nth-child(3){animation-delay:-2.4s}.shop-product span{height:82px;border-radius:10px;background:linear-gradient(145deg,#d8ebff,#f8fbff);position:relative}.shop-product span::before{content:"";position:absolute;width:44px;height:54px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:12px;background:linear-gradient(145deg,#078dff,#0644a4);box-shadow:0 10px 18px rgba(7,93,226,.22)}.shop-product b{color:#26415e;font-size:.62rem}.shop-product small{color:#0780ee;font-size:.55rem;font-weight:850}.shop-door{position:absolute;right:22px;bottom:22px;width:58px;height:208px;border-radius:14px 14px 8px 8px;background:linear-gradient(145deg,#dfeeff,#fff);border:1px solid #d6e4f2}.shop-door::before{content:"";position:absolute;width:8px;height:8px;right:8px;top:52%;border-radius:50%;background:#0c77e8}.shop-door span{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%) rotate(-6deg);padding:5px 7px;border-radius:6px;color:#fff;background:#16bd75;font-size:.47rem;font-weight:950;letter-spacing:.08em;animation:openSign 3s ease-in-out infinite}
.phone-shop{position:absolute;right:4%;top:7%;z-index:4;width:250px;height:480px;padding:15px 12px;border:8px solid #06122a;border-radius:38px;background:#fff;box-shadow:0 40px 80px rgba(3,30,75,.24);transform:rotateY(-8deg) rotateZ(2deg);animation:phoneFloat 5s ease-in-out infinite}.phone-notch{position:absolute;left:50%;top:6px;width:82px;height:20px;transform:translateX(-50%);border-radius:0 0 13px 13px;background:#06122a}.phone-head{height:54px;display:flex;align-items:end;gap:7px;padding:0 8px 10px}.phone-head span{margin-right:auto;width:64px;height:12px;border-radius:99px;background:linear-gradient(90deg,#075ce2,#31b4ff)}.phone-head i{width:20px;height:20px;border-radius:50%;background:#edf4fb}.phone-banner{height:100px;border-radius:15px;background:linear-gradient(135deg,#083c8c,#079cff);position:relative;overflow:hidden}.phone-banner::before{content:"SHOP NEW";position:absolute;left:14px;top:22px;color:#fff;font-size:.72rem;font-weight:950}.phone-banner::after{content:"";position:absolute;width:88px;height:88px;right:-8px;bottom:-28px;border:17px solid rgba(255,255,255,.15);border-radius:50%}.phone-products{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.phone-products div{padding:7px;border-radius:12px;background:#f5f9fe}.phone-products i{display:block;height:76px;border-radius:9px;background:linear-gradient(145deg,#d9ebff,#fff);position:relative}.phone-products i::after{content:"";position:absolute;width:34px;height:43px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:10px;background:linear-gradient(145deg,#097eea,#06419f)}.phone-products b,.phone-products em{display:block;height:6px;margin-top:7px;border-radius:99px;background:#cbd8e7}.phone-products em{width:58%;background:#1384ed}.phone-cart{position:absolute;right:17px;bottom:18px;width:54px;height:54px;display:grid;place-items:center;border:0;border-radius:17px;color:#fff;background:linear-gradient(135deg,#075ce2,#079cff);box-shadow:0 14px 28px rgba(7,93,226,.27)}.phone-cart svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}.phone-cart span{position:absolute;right:-5px;top:-5px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#ff6b38;color:#fff;font-size:.66rem;font-weight:950;animation:cartBadge 2s ease-in-out infinite}.flying-product{position:absolute;z-index:7;left:60%;top:41%;width:74px;height:74px;padding:8px;border-radius:19px;background:#fff;box-shadow:0 18px 38px rgba(3,35,85,.18);animation:flyToCart 5.2s ease-in-out infinite}.flying-product span{display:block;height:43px;border-radius:11px;background:linear-gradient(145deg,#079cff,#0648ad)}.flying-product small{display:block;margin-top:5px;text-align:center;color:#1876d5;font-size:.48rem;font-weight:900}.moving-trolley{position:absolute;left:8%;bottom:6%;z-index:5;width:78px;height:60px;color:#0878e6;animation:trolleyRide 7s cubic-bezier(.45,.05,.25,1) infinite}.moving-trolley svg{width:64px;height:48px;fill:none;stroke:currentColor;stroke-width:1.8}.moving-trolley span{position:absolute;width:16px;height:18px;left:21px;top:-5px;border-radius:5px;background:linear-gradient(145deg,#ffb64a,#ff7138);animation:boxBounce .8s ease-in-out infinite alternate}.payment-toast{position:absolute;z-index:8;left:31%;bottom:19%;display:flex;align-items:center;gap:11px;padding:13px 16px;border:1px solid rgba(7,93,226,.12);border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 18px 38px rgba(3,35,85,.15);backdrop-filter:blur(12px);animation:toastShow 5.2s ease-in-out infinite}.payment-toast>svg{width:25px;height:25px;fill:none;stroke:#0876e1;stroke-width:2}.payment-toast span{display:grid}.payment-toast strong{font-size:.7rem;color:#15335a}.payment-toast small{margin-top:3px;color:#718198;font-size:.55rem}.delivery-route{position:absolute;left:23%;right:6%;bottom:1%;height:58px;z-index:3}.route-line{position:absolute;left:0;right:0;top:31px;height:3px;border-radius:99px;background:linear-gradient(90deg,#cfdeed,#078dff 55%,#cfdeed);overflow:hidden}.route-line::after{content:"";position:absolute;width:70px;height:100%;background:linear-gradient(90deg,transparent,#6ccfff,transparent);animation:routeScan 2.5s linear infinite}.route-package{position:absolute;left:0;top:8px;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(135deg,#0a65d4,#079cff);animation:packageTravel 7s ease-in-out infinite}.route-package svg,.route-truck svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}.route-truck{position:absolute;left:42%;top:5px;width:58px;height:47px;display:grid;place-items:center;color:#fff;border-radius:15px;background:linear-gradient(135deg,#075ce2,#079cff);animation:truckTravel 7s ease-in-out infinite}.route-home{position:absolute;right:0;top:4px;width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid #dbe7f3;box-shadow:0 10px 24px rgba(4,35,88,.08)}.route-home::before{content:"";position:absolute;left:9px;top:14px;width:29px;height:24px;background:#0a79e8;clip-path:polygon(50% 0,100% 38%,100% 100%,0 100%,0 38%)}.route-home i{position:absolute;z-index:2;left:21px;top:25px;width:9px;height:13px;background:#fff}.scene-caption{position:absolute;left:16%;right:5%;bottom:-6%;display:flex;justify-content:space-between;color:#607086;font-size:.61rem;font-weight:850;letter-spacing:.04em}

/* General section heads */
.ec-head{grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);gap:48px;align-items:end;margin-bottom:48px}.ec-head h2{max-width:850px;font-size:clamp(2.55rem,4.5vw,4.7rem);line-height:.98}.ec-head>p{max-width:610px;justify-self:end;font-size:.96rem;line-height:1.72}
/* Journey */
.ec-journey-section{background:#fff}.commerce-journey{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:30px;border:1px solid rgba(7,93,226,.1);border-radius:32px;background:linear-gradient(145deg,#f8fbff,#fff);box-shadow:0 20px 55px rgba(4,35,88,.07);overflow:hidden}.journey-progress{position:absolute;left:8%;right:8%;top:75px;height:2px;background:#dce8f4}.journey-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#075ce2,#42c3ff);box-shadow:0 0 18px rgba(7,141,255,.5)}.commerce-journey.is-visible .journey-progress span{animation:journeyFill 3.6s .3s ease forwards}.commerce-journey article{position:relative;z-index:1;padding:19px 16px 18px;border-radius:22px;background:rgba(255,255,255,.72);transition:transform .35s ease,box-shadow .35s ease}.commerce-journey article:hover{transform:translateY(-8px);box-shadow:0 18px 38px rgba(4,35,88,.09)}.journey-icon{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 24px;border-radius:17px;color:#fff;background:linear-gradient(135deg,#075ce2,#079cff);box-shadow:0 13px 25px rgba(7,93,226,.22);opacity:.45;transform:scale(.82)}.journey-icon .ec-icon{width:auto;height:auto;background:none;box-shadow:none}.journey-icon svg{width:25px;height:25px}.commerce-journey.is-visible article{animation:journeyStep 3.8s ease infinite}.commerce-journey.is-visible article:nth-child(3){animation-delay:.65s}.commerce-journey.is-visible article:nth-child(4){animation-delay:1.3s}.commerce-journey.is-visible article:nth-child(5){animation-delay:1.95s}.commerce-journey.is-visible article:nth-child(6){animation-delay:2.6s}.commerce-journey article>b{display:block;color:#91a0b5;font-size:.72rem}.commerce-journey h3{margin-top:10px;font-size:1.08rem}.commerce-journey p{margin-top:9px;color:#65758b;font-size:.79rem;line-height:1.6}
/* Icons */
.ec-icon{width:56px;height:56px;display:grid;place-items:center;flex:0 0 auto;border-radius:17px;color:#fff;background:linear-gradient(135deg,#075ce2,#079cff);box-shadow:0 14px 28px rgba(7,93,226,.2)}.ec-icon svg{width:26px;height:26px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-product__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Features */
.ec-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.ec-feature-card{--tilt-x:0deg;--tilt-y:0deg;position:relative;min-height:330px;display:flex;flex-direction:column;padding:27px;border:1px solid rgba(7,93,226,.09);border-radius:28px;background:#fff;box-shadow:0 10px 28px rgba(4,35,88,.04);overflow:hidden;transform:perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .22s ease-out,box-shadow .4s ease,border-color .4s ease}.ec-feature-card::after{content:"";position:absolute;width:160px;height:160px;right:-80px;bottom:-80px;border-radius:50%;background:radial-gradient(circle,rgba(7,141,255,.14),transparent 68%);transition:transform .5s ease}.ec-feature-card:hover{border-color:rgba(7,93,226,.2);box-shadow:0 25px 58px rgba(4,43,108,.11)}.ec-feature-card:hover::after{transform:scale(1.45)}.ec-feature-card .ec-icon{transition:transform .4s cubic-bezier(.2,.8,.2,1)}.ec-feature-card:hover .ec-icon{transform:translateY(-6px) rotate(-5deg) scale(1.06)}.ec-feature-index{position:absolute;right:24px;top:25px;color:#d3dfec;font-size:1rem;font-weight:950}.ec-feature-card h3{margin-top:36px;font-size:1.18rem;line-height:1.17}.ec-feature-card p{margin-top:13px;color:#617086;font-size:.87rem;line-height:1.66}.ec-feature-note{margin-top:auto;padding-top:22px;color:#0768d9;font-size:.72rem;font-weight:900}
/* Operations */
.ec-operations{overflow:hidden}.ec-operations-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:center}.operations-copy h2{margin-top:14px;font-size:clamp(2.5rem,4vw,4.35rem);line-height:1}.operations-copy>p{margin-top:21px;color:#617086;line-height:1.75}.operations-points{display:grid;gap:13px;margin-top:30px}.operations-points span{display:flex;align-items:center;gap:10px;color:#31445f;font-size:.88rem;font-weight:800}.operations-points svg{width:18px;height:18px;fill:none;stroke:#0784ee;stroke-width:2.4}.dashboard-scene{position:relative;min-height:520px;perspective:1400px}.dashboard-scene::before{content:"";position:absolute;width:460px;height:460px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(7,141,255,.2),transparent 68%);filter:blur(16px)}.dashboard-window{position:absolute;inset:40px 0 40px 20px;display:grid;grid-template-columns:76px 1fr;border:1px solid rgba(255,255,255,.14);border-radius:30px;background:#07172f;box-shadow:0 35px 75px rgba(3,25,65,.24);overflow:hidden;transform:rotateY(-7deg) rotateX(3deg);animation:dashboardFloat 5.5s ease-in-out infinite}.dash-sidebar{padding:18px 14px;background:#051124;display:grid;align-content:start;justify-items:center;gap:18px}.dash-logo{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(135deg,#075ce2,#079cff);font-weight:950}.dash-sidebar i{width:34px;height:8px;border-radius:99px;background:rgba(255,255,255,.11)}.dash-sidebar i:nth-child(2){background:#0b78e6}.dash-main{padding:25px}.dash-top{display:flex;align-items:center;justify-content:space-between;color:#fff}.dash-top strong{font-size:1rem}.dash-top span{width:95px;height:11px;border-radius:99px;background:rgba(255,255,255,.09)}.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.dash-stats article{padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.055)}.dash-stats small{color:rgba(255,255,255,.48);font-size:.59rem}.dash-stats b{display:block;margin-top:8px;color:#fff;font-size:1.45rem}.dash-stats i{display:block;width:70%;height:6px;margin-top:11px;border-radius:99px;background:linear-gradient(90deg,#0b7ee9,#48c7ff)}.dash-chart{position:relative;height:175px;margin-top:15px;border-radius:18px;background:rgba(255,255,255,.045);overflow:hidden}.dash-chart::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:38px 38px}.dash-chart svg{position:absolute;inset:25px 14px 15px;width:calc(100% - 28px);height:calc(100% - 40px)}.dash-chart path{fill:none;stroke:#41c5ff;stroke-width:5;stroke-linecap:round;stroke-dasharray:700;stroke-dashoffset:700;filter:drop-shadow(0 0 8px rgba(65,197,255,.55));animation:chartDraw 4s ease-in-out infinite}.dash-orders{display:grid;gap:8px;margin-top:14px}.dash-orders i{height:28px;border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.04))}.dash-float{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:14px;color:#15375f;background:#fff;box-shadow:0 18px 38px rgba(3,35,85,.17);font-size:.69rem;font-weight:850;animation:dashFloatChip 4s ease-in-out infinite}.dash-float svg{width:20px;height:20px;fill:none;stroke:#0879e6;stroke-width:2}.dash-float--one{right:-14px;top:21%;animation-delay:-1.3s}.dash-float--two{left:-18px;bottom:17%;animation-delay:-2.5s}
/* Benefits */
.ec-benefits{background:radial-gradient(circle at 12% 10%,rgba(7,141,255,.2),transparent 27%),linear-gradient(145deg,#030914,#071a3c 60%,#092d69)}.ec-benefits .ec-head h2{color:#fff}.ec-benefits .ec-head>p{color:rgba(255,255,255,.62)}.ec-benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.ec-benefit{min-height:190px;display:grid;grid-template-columns:44px 1fr;gap:15px;padding:23px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.06);backdrop-filter:blur(10px);transition:transform .35s ease,background .35s ease,border-color .35s ease}.ec-benefit:hover{transform:translateY(-8px);background:rgba(255,255,255,.09);border-color:rgba(80,197,255,.3)}.ec-benefit>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:#d9f4ff;background:linear-gradient(135deg,#075ce2,#079cff);font-size:.68rem;font-weight:950}.ec-benefit h3{color:#fff;font-size:1rem}.ec-benefit p{margin-top:9px;color:rgba(255,255,255,.58);font-size:.78rem;line-height:1.6}
/* Use cases */
.ec-usecase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.ec-usecase-grid article{--tilt-x:0deg;--tilt-y:0deg;position:relative;min-height:390px;padding:24px;border:1px solid rgba(7,93,226,.09);border-radius:28px;background:#fff;box-shadow:0 12px 32px rgba(4,35,88,.05);transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .22s ease-out,box-shadow .4s ease}.ec-usecase-grid article:hover{box-shadow:0 26px 60px rgba(4,43,108,.12)}.usecase-number{position:absolute;right:22px;top:20px;color:#d0dce9;font-weight:950}.usecase-visual{height:190px;margin-bottom:24px;border-radius:20px;background:linear-gradient(145deg,#edf6ff,#fff);position:relative;overflow:hidden}.usecase-visual i{position:absolute;display:block;animation:usecaseFloat 4s ease-in-out infinite}.visual-grocery i{width:58px;height:58px;border-radius:16px;background:linear-gradient(145deg,#4fc56e,#178d43)}.visual-grocery i:nth-child(1){left:23px;top:35px}.visual-grocery i:nth-child(2){left:103px;top:76px;animation-delay:-1s}.visual-grocery i:nth-child(3){right:25px;top:30px;animation-delay:-2s}.visual-grocery i:nth-child(4){right:72px;bottom:19px;width:42px;height:42px;animation-delay:-3s}.visual-fashion i{width:65px;height:115px;bottom:22px;border-radius:28px 28px 15px 15px;background:linear-gradient(160deg,#075ce2,#079cff);clip-path:polygon(28% 0,42% 12%,58% 12%,72% 0,100% 19%,84% 43%,84% 100%,16% 100%,16% 43%,0 19%)}.visual-fashion i:nth-child(1){left:25px}.visual-fashion i:nth-child(2){left:50%;transform:translateX(-50%);background:linear-gradient(160deg,#ff7955,#ffaf45);animation-delay:-1.4s}.visual-fashion i:nth-child(3){right:25px;background:linear-gradient(160deg,#8e69e8,#6145b8);animation-delay:-2.8s}.visual-health i{width:55px;height:95px;bottom:25px;border-radius:14px 14px 18px 18px;background:linear-gradient(180deg,#fff 0 28%,#28ad68 28%);box-shadow:0 10px 22px rgba(4,35,88,.11)}.visual-health i:nth-child(1){left:31px}.visual-health i:nth-child(2){left:50%;transform:translateX(-50%);height:125px;background:linear-gradient(180deg,#fff 0 25%,#0a75d9 25%);animation-delay:-1.2s}.visual-health i:nth-child(3){right:31px;background:linear-gradient(180deg,#fff 0 28%,#eaa536 28%);animation-delay:-2.4s}.visual-seasonal i{width:72px;height:72px;border-radius:18px;background:linear-gradient(145deg,#ffb347,#ff5e38)}.visual-seasonal i:nth-child(1){left:24px;top:30px;transform:rotate(-7deg)}.visual-seasonal i:nth-child(2){right:25px;top:43px;background:linear-gradient(145deg,#075ce2,#079cff);animation-delay:-1.4s}.visual-seasonal i:nth-child(3){left:50%;bottom:18px;transform:translateX(-50%);background:linear-gradient(145deg,#8e65df,#5f42b5);animation-delay:-2.7s}.ec-usecase-grid h3{font-size:1.15rem}.ec-usecase-grid p{margin-top:11px;color:#627187;font-size:.86rem;line-height:1.65}
/* final */
.ec-final{padding-top:30px!important}.ec-final-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:38px;align-items:center;padding:60px;border-radius:36px;color:#fff;background:radial-gradient(circle at 80% 20%,rgba(93,208,255,.35),transparent 25%),linear-gradient(135deg,#052c72,#075ce2 58%,#079cff);box-shadow:0 30px 75px rgba(7,93,226,.24)}.ec-final-card h2{max-width:780px;margin-top:12px;color:#fff;font-size:clamp(2.4rem,4vw,4.25rem)}.ec-final-card p{max-width:670px;margin-top:18px;color:rgba(255,255,255,.72);line-height:1.7}.ec-final-card .eyebrow{color:#d9f6ff}.ec-final-actions{display:flex;flex-direction:column;gap:11px;min-width:250px}.ec-outline-light{color:#fff;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08)}.final-cart-animation{position:absolute;left:56%;right:2%;bottom:5px;height:45px;opacity:.35}.final-road{position:absolute;left:0;right:0;bottom:9px;height:2px;background:rgba(255,255,255,.4)}.final-cart{position:absolute;left:0;bottom:9px;color:#fff;animation:finalCart 7s ease-in-out infinite}.final-cart svg{width:42px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8}.final-cart i{position:absolute;width:13px;height:15px;left:14px;top:-9px;border-radius:4px;background:#ffba4b}.final-box{position:absolute;right:0;bottom:9px;color:#fff}.final-box svg{width:35px;height:35px;fill:none;stroke:currentColor;stroke-width:1.8}
/* Animations */
@keyframes ecBreathe{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.72}}@keyframes awningOpen{0%{transform:scaleY(.08) rotateX(82deg);opacity:0}100%{transform:scaleY(1) rotateX(0);opacity:1}}@keyframes productPop{50%{transform:translateY(-7px)}}@keyframes openSign{50%{transform:translate(-50%,-50%) rotate(5deg)}}@keyframes phoneFloat{50%{transform:rotateY(-5deg) rotateZ(-1deg) translateY(-11px)}}@keyframes cartBadge{50%{transform:scale(1.18)}}@keyframes flyToCart{0%,25%{left:57%;top:42%;opacity:1;transform:scale(1)}50%,58%{left:82%;top:75%;opacity:1;transform:scale(.45) rotate(15deg)}65%,100%{left:82%;top:75%;opacity:0;transform:scale(.2)}}@keyframes trolleyRide{0%,15%{left:8%;transform:translateY(0)}45%{left:42%;transform:translateY(-4px)}75%,100%{left:75%;transform:translateY(0)}}@keyframes boxBounce{to{transform:translateY(-5px) rotate(5deg)}}@keyframes toastShow{0%,35%,100%{opacity:0;transform:translateY(14px) scale(.95)}45%,78%{opacity:1;transform:none}}@keyframes routeScan{to{transform:translateX(550px)}}@keyframes packageTravel{0%,42%{left:0;opacity:1}62%,100%{left:42%;opacity:0}}@keyframes truckTravel{0%,35%{left:30%;opacity:0}48%{opacity:1}85%,100%{left:84%;opacity:1}}@keyframes journeyFill{to{width:100%}}@keyframes journeyStep{0%,18%,100%{transform:translateY(0);opacity:.65}8%{transform:translateY(-10px);opacity:1}}@keyframes dashboardFloat{50%{transform:rotateY(-4deg) rotateX(1deg) translateY(-10px)}}@keyframes chartDraw{0%,10%{stroke-dashoffset:700}60%,100%{stroke-dashoffset:0}}@keyframes dashFloatChip{50%{transform:translateY(-10px)}}@keyframes usecaseFloat{50%{translate:0 -8px;rotate:4deg}}@keyframes finalCart{0%,15%{left:0}75%,100%{left:82%}}
/* responsive */
@media(max-width:1200px){.ec-hero-grid{grid-template-columns:.9fr 1.1fr;gap:35px}.commerce-theatre{transform:scale(.9);transform-origin:center}.ec-feature-grid{grid-template-columns:repeat(3,1fr)}.ec-benefit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.ec-hero{padding-top:125px;min-height:auto}.ec-hero-grid,.ec-operations-grid,.ec-head{grid-template-columns:1fr}.ec-hero-copy{text-align:center}.ec-hero-copy>p{margin-inline:auto}.ec-proof-row,.hero-actions{justify-content:center}.commerce-theatre{min-height:640px;transform:scale(.88)}.ec-head>p{justify-self:start}.commerce-journey{grid-template-columns:repeat(3,1fr)}.journey-progress{display:none}.ec-feature-grid{grid-template-columns:repeat(2,1fr)}.ec-operations-grid{gap:25px}.dashboard-scene{min-height:500px}.ec-usecase-grid{grid-template-columns:repeat(2,1fr)}.ec-final-card{grid-template-columns:1fr}.ec-final-actions{flex-direction:row;min-width:0}.final-cart-animation{display:none}}
@media(max-width:700px){.ecommerce-page .section{padding:74px 0}.ec-hero{padding:112px 0 55px}.ec-hero-copy h1{font-size:clamp(2.8rem,14vw,4.4rem)}.commerce-theatre{min-height:475px;transform:none}.shop-scene{left:1%;top:13%;width:68%;height:300px;border-radius:23px}.shop-sign{height:66px;padding:11px 14px;grid-template-columns:40px 1fr}.shop-sign__mark{width:39px;height:39px}.shop-awning{height:40px}.shop-window{left:15px;right:58px;top:120px;bottom:15px;padding:9px;gap:6px}.shop-product{padding:6px}.shop-product span{height:55px}.shop-product:nth-child(3){display:none}.shop-window{grid-template-columns:1fr 1fr}.shop-door{right:13px;bottom:15px;width:39px;height:164px}.phone-shop{right:-1%;top:10%;width:155px;height:330px;padding:10px 8px;border-width:6px;border-radius:28px}.phone-notch{width:55px;height:14px}.phone-head{height:40px}.phone-banner{height:65px}.phone-products{gap:6px}.phone-products i{height:48px}.phone-cart{width:40px;height:40px;border-radius:13px}.flying-product,.payment-toast{display:none}.moving-trolley{bottom:7%;transform:scale(.8)}.delivery-route{left:12%;right:3%;bottom:1%}.scene-caption{display:none}.ec-head h2{font-size:clamp(2.3rem,11vw,3.45rem)}.commerce-journey,.ec-feature-grid,.ec-benefit-grid,.ec-usecase-grid{grid-template-columns:1fr}.commerce-journey{padding:20px}.commerce-journey article{display:grid;grid-template-columns:58px 1fr;column-gap:13px}.journey-icon{grid-row:1/4;margin:0}.commerce-journey article>b{display:none}.commerce-journey h3{margin-top:3px}.ec-feature-card{min-height:290px}.dashboard-scene{min-height:390px}.dashboard-window{inset:20px 0;grid-template-columns:52px 1fr}.dash-sidebar{padding:14px 8px}.dash-logo{width:34px;height:34px}.dash-main{padding:15px}.dash-stats{grid-template-columns:1fr 1fr}.dash-stats article:nth-child(3){display:none}.dash-chart{height:130px}.dash-float{display:none}.ec-final-card{padding:38px 24px}.ec-final-actions{flex-direction:column}.ec-final-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.commerce-theatre *,.dashboard-scene *,.commerce-journey *,.final-cart-animation *{animation:none!important}.journey-progress span{width:100%}.flying-product,.moving-trolley,.payment-toast{display:none}}


/* === 2026-06 ecommerce page enhancements === */
.ec-hero{min-height:800px;padding:142px 0 82px}
.ec-hero-grid{grid-template-columns:minmax(0,.98fr) minmax(450px,1.02fr);gap:42px}
.ec-hero-copy h1{font-size:clamp(2.9rem,5.2vw,5.35rem)}
.ec-hero-copy>p{font-size:clamp(.98rem,1.3vw,1.08rem)}
.ec-addon-system{background:linear-gradient(180deg,#f7fbff,#fff)}
.ec-addon-layout{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:34px;align-items:center}
.ec-addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ec-addon-card{position:relative;min-height:220px;padding:24px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 14px 34px rgba(4,35,88,.05);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease}
.ec-addon-card:hover{transform:translateY(-8px);box-shadow:0 28px 62px rgba(4,43,108,.1);border-color:rgba(7,93,226,.22)}
.ec-addon-card::after{content:"";position:absolute;width:160px;height:160px;right:-90px;bottom:-90px;border-radius:50%;background:radial-gradient(circle,rgba(7,141,255,.13),transparent 68%)}
.ec-addon-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;color:#fff;background:linear-gradient(135deg,#075ce2,#079cff);box-shadow:0 16px 28px rgba(7,93,226,.22)}
.ec-addon-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ec-addon-card h3{margin-top:18px;font-size:1.16rem;line-height:1.15}.ec-addon-card p{margin-top:10px;color:#627187;font-size:.86rem;line-height:1.62}.ec-addon-note{display:inline-flex;margin-top:16px;padding:8px 11px;border-radius:999px;background:#edf6ff;color:#0b63d4;font-size:.68rem;font-weight:850}
.ec-addon-visual{position:relative;min-height:520px;border-radius:36px;overflow:hidden;background:radial-gradient(circle at 50% 25%,rgba(7,141,255,.16),transparent 26%),linear-gradient(145deg,#020817,#082a65 62%,#0a7eef);box-shadow:0 30px 70px rgba(4,35,88,.16)}
.ec-addon-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(135deg,#000,transparent 78%)}
.ec-system-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:260px;min-height:250px;padding:24px;text-align:center;border:1px solid rgba(255,255,255,.12);border-radius:32px;background:rgba(255,255,255,.08);backdrop-filter:blur(16px);box-shadow:0 30px 60px rgba(0,0,0,.2);animation:ecHubFloat 5.5s ease-in-out infinite}
.ec-system-hub .ec-addon-icon{margin:0 auto;width:72px;height:72px;border-radius:22px}.ec-system-hub h3{margin-top:16px;color:#fff;font-size:1.4rem}.ec-system-hub p{margin-top:10px;color:rgba(255,255,255,.72);font-size:.82rem;line-height:1.65}
.ec-float-node{position:absolute;display:grid;gap:6px;min-width:150px;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.95);box-shadow:0 18px 42px rgba(0,0,0,.12);animation:dashFloatChip 4.8s ease-in-out infinite}
.ec-float-node strong{font-size:.8rem;color:#10284d}.ec-float-node small{color:#627187;font-size:.66rem}.ec-float-node--chat{left:22px;top:58px}.ec-float-node--orders{right:22px;top:78px;animation-delay:-1.2s}.ec-float-node--ship{left:34px;bottom:68px;animation-delay:-2.2s}.ec-float-node--app{right:20px;bottom:60px;animation-delay:-.8s}.ec-link-line{position:absolute;border:1px dashed rgba(110,205,255,.35);border-radius:999px;opacity:.8}
.ec-link-line--one{left:120px;top:118px;width:170px;height:120px;border-bottom:0;border-left:0}.ec-link-line--two{right:122px;top:136px;width:170px;height:110px;border-bottom:0;border-right:0}.ec-link-line--three{left:128px;bottom:118px;width:170px;height:122px;border-top:0;border-left:0}.ec-link-line--four{right:126px;bottom:112px;width:170px;height:126px;border-top:0;border-right:0}
.ec-mobile-app{background:#fff}
.ec-app-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr);gap:38px;align-items:center}
.ec-app-copy .check-list{display:grid;gap:12px;margin-top:28px}
.ec-app-copy .check-list li{display:flex;gap:12px;align-items:flex-start;color:#42556e;font-size:.92rem;line-height:1.65}
.ec-app-copy .check-list li::before{content:"";width:18px;height:18px;flex:0 0 auto;margin-top:4px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 22%,#0a79e8 24%,#0a79e8 52%,rgba(7,141,255,.2) 54%,rgba(7,141,255,.2) 100%)}
.ec-app-scene{position:relative;min-height:560px;border-radius:34px;overflow:hidden;background:linear-gradient(150deg,#f3f9ff,#fff);border:1px solid #e1ebf6;box-shadow:0 18px 46px rgba(4,35,88,.07)}
.ec-app-scene::before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(7,141,255,.16),transparent 66%)}
.app-phone{position:absolute;width:195px;height:388px;padding:12px;border:7px solid #061126;border-radius:36px;background:#fff;box-shadow:0 24px 48px rgba(4,35,88,.14)}
.app-phone::before{content:"";position:absolute;left:50%;top:5px;width:72px;height:16px;transform:translateX(-50%);border-radius:0 0 13px 13px;background:#061126}
.app-phone--one{left:72px;top:92px;transform:rotate(-10deg);z-index:2}.app-phone--two{right:74px;top:74px;transform:rotate(10deg)}
.app-screen-head{height:46px;display:flex;align-items:end;gap:6px;padding:0 5px 8px}.app-screen-head span{margin-right:auto;width:62px;height:11px;border-radius:999px;background:linear-gradient(135deg,#075ce2,#3bc0ff)}.app-screen-head i{width:18px;height:18px;border-radius:50%;background:#ecf5ff}
.app-screen-banner{height:86px;border-radius:17px;background:linear-gradient(135deg,#083786,#079cff);position:relative;overflow:hidden}.app-screen-banner::before{content:"Mega Sale";position:absolute;left:14px;top:20px;color:#fff;font-size:.72rem;font-weight:950}.app-screen-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.app-screen-grid span{display:block;height:74px;border-radius:13px;background:linear-gradient(145deg,#edf6ff,#fff);border:1px solid #deebf7}
.app-tag{position:absolute;padding:12px 15px;border:1px solid rgba(7,93,226,.1);border-radius:16px;background:#fff;box-shadow:0 14px 32px rgba(4,35,88,.08);font-size:.74rem;font-weight:850;color:#18365b;animation:floatY 4.8s ease-in-out infinite}.app-tag--one{left:24px;top:26px}.app-tag--two{right:24px;bottom:28px;animation-delay:-1.4s}.app-tag--three{left:50%;bottom:28px;transform:translateX(-50%);animation-delay:-2.1s}
@keyframes ecHubFloat{50%{transform:translate(-50%,-52%)}}
@media(max-width:1100px){.ec-addon-layout,.ec-app-layout{grid-template-columns:1fr}.ec-addon-grid{grid-template-columns:repeat(2,1fr)}.ec-addon-visual,.ec-app-scene{min-height:470px}}
@media(max-width:700px){.ec-addon-grid{grid-template-columns:1fr}.ec-addon-visual{min-height:440px}.ec-system-hub{width:225px;min-height:215px;padding:18px}.ec-float-node{min-width:124px;padding:10px 12px}.ec-link-line{display:none}.ec-app-scene{min-height:470px}.app-phone{width:150px;height:300px;padding:10px;border-width:6px;border-radius:30px}.app-phone--one{left:16px;top:114px}.app-phone--two{right:16px;top:88px}.app-screen-banner{height:60px}.app-screen-grid span{height:52px}.app-tag{font-size:.64rem;padding:9px 12px}}


/* === Scroll-led ecommerce major feature story === */
.ec-scroll-features{position:relative;overflow:visible;background:linear-gradient(180deg,#f7fbff 0,#fff 100%)}
.ec-scroll-features .section-head{margin-bottom:54px}
.ec-scroll-layout{display:grid;grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr);gap:56px;align-items:start}
.ec-scroll-stage{position:sticky;top:112px;min-height:610px;border-radius:36px;overflow:hidden;background:radial-gradient(circle at 50% 20%,rgba(7,141,255,.22),transparent 30%),linear-gradient(145deg,#020817,#072154 58%,#087ce9);box-shadow:0 30px 76px rgba(4,35,88,.2)}
.ec-scroll-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);background-size:45px 45px;mask-image:linear-gradient(135deg,#000,transparent 78%)}
.ec-scroll-stage__header{position:absolute;left:26px;right:26px;top:24px;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff}.ec-scroll-stage__header span{font-size:.67rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#94dfff}.ec-scroll-stage__header b{font-size:.7rem;color:rgba(255,255,255,.55)}
.ec-story-scene{position:absolute;inset:76px 22px 24px;z-index:2;padding:26px;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:rgba(255,255,255,.075);backdrop-filter:blur(14px);opacity:0;transform:translateY(35px) scale(.96);pointer-events:none;transition:opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.ec-story-scene.is-active{opacity:1;transform:none}
.ec-story-scene__top{display:flex;align-items:center;gap:14px}.ec-story-scene__icon{width:62px;height:62px;display:grid;place-items:center;border-radius:19px;color:#fff;background:linear-gradient(135deg,#075ce2,#22b4ff);box-shadow:0 16px 34px rgba(0,0,0,.2)}.ec-story-scene__icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.ec-story-scene h3{color:#fff;font-size:1.48rem}.ec-story-scene__top small{display:block;margin-top:4px;color:rgba(255,255,255,.56);font-size:.65rem}
.ec-story-visual{position:relative;min-height:320px;margin-top:24px;overflow:hidden;border-radius:23px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.09)}
.story-phone{position:absolute;left:50%;top:50%;width:190px;height:330px;padding:12px;transform:translate(-50%,-47%);border:7px solid #020817;border-radius:34px;background:#fff;box-shadow:0 30px 55px rgba(0,0,0,.28)}.story-phone::before{content:"";display:block;width:66px;height:16px;margin:-5px auto 9px;border-radius:0 0 12px 12px;background:#020817}.story-phone__head{height:38px;display:flex;align-items:center;gap:7px;border-bottom:1px solid #e3ebf4}.story-phone__avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#12ba74,#0a8c57)}.story-phone__head b{font-size:.63rem}.story-chat{display:grid;gap:8px;padding:12px 3px}.story-chat span{max-width:80%;padding:8px 9px;border-radius:10px 10px 10px 2px;background:#eef3f0;color:#405347;font-size:.54rem}.story-chat span:nth-child(even){justify-self:end;border-radius:10px 10px 2px 10px;background:#d9f8e7}.story-send{position:absolute;left:12px;right:12px;bottom:13px;height:35px;border-radius:999px;background:#f0f4f7;border:1px solid #dfe7ef}
.story-order-card{position:absolute;left:50%;top:50%;width:78%;transform:translate(-50%,-50%);padding:18px;border-radius:21px;background:#fff;box-shadow:0 24px 48px rgba(0,0,0,.23)}.story-order-card h4{font-size:.9rem}.story-order-items{display:grid;gap:8px;margin-top:14px}.story-order-items span{height:38px;border-radius:10px;background:linear-gradient(90deg,#edf5fd,#fff);border:1px solid #e1ebf4}.story-order-button{height:38px;margin-top:14px;border-radius:999px;background:linear-gradient(135deg,#0aad70,#21c98b)}
.story-label{position:absolute;left:50%;top:50%;width:76%;transform:translate(-50%,-50%) rotate(-2deg);padding:18px;border-radius:20px;background:#fff;box-shadow:0 24px 48px rgba(0,0,0,.23)}.story-label__barcode{height:54px;margin-top:14px;background:repeating-linear-gradient(90deg,#0b1830 0 2px,transparent 2px 5px)}.story-truck{position:absolute;right:28px;bottom:24px;width:80px;height:58px;display:grid;place-items:center;border-radius:17px;color:#fff;background:linear-gradient(135deg,#075ce2,#079cff);animation:truckBob 2.5s ease-in-out infinite}.story-truck svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.8}
.story-code{position:absolute;inset:34px;padding:18px;border-radius:20px;background:#041126;box-shadow:0 24px 48px rgba(0,0,0,.22)}.story-code__dots{display:flex;gap:6px}.story-code__dots i{width:7px;height:7px;border-radius:50%;background:#31506f}.story-code span{display:block;height:7px;margin-top:13px;border-radius:99px;background:#183968}.story-code span:nth-child(2){width:72%;background:linear-gradient(90deg,#078dff,#52cbff)}.story-code span:nth-child(3){width:88%}.story-code span:nth-child(4){width:55%;background:#1aa774}.story-code span:nth-child(5){width:80%}.story-module{position:absolute;padding:11px 13px;border-radius:14px;color:#17365d;background:#fff;box-shadow:0 14px 28px rgba(0,0,0,.18);font-size:.62rem;font-weight:850;animation:floatY 4s ease-in-out infinite}.story-module--one{left:16px;bottom:20px}.story-module--two{right:16px;top:18px;animation-delay:-1.2s}
.story-themes{position:absolute;inset:28px;display:grid;grid-template-columns:1fr 1fr;gap:13px}.story-theme{padding:11px;border-radius:17px;background:#fff;box-shadow:0 18px 35px rgba(0,0,0,.17);transform:rotate(-3deg)}.story-theme:nth-child(2){transform:rotate(3deg) translateY(18px)}.story-theme__hero{height:80px;border-radius:11px;background:linear-gradient(135deg,#083a8e,#079cff)}.story-theme__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}.story-theme__cards i{height:37px;border-radius:7px;background:#eef5fb}
.story-app-phones{position:absolute;inset:20px;display:flex;justify-content:center;gap:18px;align-items:center}.story-app-phone{width:145px;height:280px;padding:9px;border:6px solid #020817;border-radius:29px;background:#fff;box-shadow:0 24px 45px rgba(0,0,0,.22);transform:rotate(-6deg)}.story-app-phone:nth-child(2){transform:rotate(6deg) translateY(18px)}.story-app-phone::before{content:"";display:block;width:52px;height:13px;margin:-4px auto 8px;border-radius:0 0 10px 10px;background:#020817}.story-app-hero{height:62px;border-radius:12px;background:linear-gradient(135deg,#083b8d,#079cff)}.story-app-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.story-app-grid i{height:50px;border-radius:9px;background:#eef5fb}
.ec-scroll-steps{display:grid;gap:18px}.ec-scroll-step{min-height:52vh;padding:34px;border:1px solid var(--line);border-radius:30px;background:#fff;box-shadow:0 14px 38px rgba(4,35,88,.055);opacity:.42;transform:scale(.975);transition:opacity .4s ease,transform .45s var(--ease),border-color .35s ease,box-shadow .35s ease}.ec-scroll-step.is-active{opacity:1;transform:none;border-color:rgba(7,93,226,.24);box-shadow:0 26px 62px rgba(4,43,108,.11)}.ec-scroll-step__number{display:flex;align-items:center;justify-content:space-between;gap:20px}.ec-scroll-step__number span{color:#0875e5;font-size:.72rem;font-weight:950;letter-spacing:.12em}.ec-scroll-step__number i{width:52px;height:52px;display:grid;place-items:center;border-radius:17px;color:#fff;background:linear-gradient(135deg,#075ce2,#079cff);box-shadow:0 13px 26px rgba(7,93,226,.2)}.ec-scroll-step__number svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.ec-scroll-step h3{margin-top:38px;font-size:clamp(1.8rem,3vw,2.8rem)}.ec-scroll-step p{max-width:610px;margin-top:16px;color:#627187;font-size:.96rem;line-height:1.75}.ec-scroll-step ul{display:grid;gap:10px;margin:24px 0 0;padding:0;list-style:none}.ec-scroll-step li{display:flex;align-items:flex-start;gap:11px;color:#40536d;font-size:.84rem;line-height:1.55}.ec-scroll-step li::before{content:"";width:9px;height:9px;flex:0 0 auto;margin-top:7px;border-radius:50%;background:#078dff;box-shadow:0 0 0 5px rgba(7,141,255,.09)}
@keyframes truckBob{50%{transform:translateY(-7px)}}
@media(max-width:980px){.ec-scroll-layout{grid-template-columns:1fr;gap:28px}.ec-scroll-stage{position:relative;top:auto;min-height:500px}.ec-scroll-step{min-height:auto;opacity:1;transform:none}.ec-scroll-steps{grid-template-columns:repeat(2,1fr)}.ec-story-scene{inset:70px 18px 20px}}
@media(max-width:700px){.ec-scroll-stage{min-height:430px}.ec-scroll-steps{grid-template-columns:1fr}.ec-scroll-step{padding:25px;min-height:auto}.ec-scroll-step h3{margin-top:25px}.ec-story-visual{min-height:245px}.story-phone{width:150px;height:260px}.story-label,.story-order-card{width:88%}.story-code{inset:18px}.story-themes{inset:15px}.story-app-phone{width:115px;height:230px}.ec-scroll-stage__header{left:18px;right:18px}.ec-story-scene{padding:18px}.ec-story-scene h3{font-size:1.15rem}}


/* === Ecommerce scroll story centre-sync refinement === */
@media(min-width:981px){.ec-scroll-stage{top:max(98px,calc(50vh - 305px))}}
.ec-scroll-stage__header::after{content:"LIVE FEATURE PREVIEW";position:absolute;left:0;top:23px;color:rgba(255,255,255,.34);font-size:.52rem;font-weight:850;letter-spacing:.12em}
.ec-story-scene.is-active{animation:ecSceneConfirm .62s cubic-bezier(.22,1,.36,1) both}
.ec-scroll-step{opacity:.3;filter:saturate(.7);transition:opacity .35s ease,transform .45s var(--ease),filter .35s ease,border-color .35s ease,box-shadow .35s ease}
.ec-scroll-step.is-active{opacity:1;filter:none;transform:scale(1);border-color:rgba(7,93,226,.32);box-shadow:0 28px 68px rgba(4,43,108,.13)}
@keyframes ecSceneConfirm{0%{opacity:0;transform:translateY(24px) scale(.97)}100%{opacity:1;transform:none}}