:root{--ink:#071b2a;--paper:#f5f2eb;--lime:#d7fa76;--orange:#ff7846;--muted:#61707a;--line:#d9d8d1}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans Arabic",Arial,sans-serif;line-height:1.7}
.shell{width:min(1120px,calc(100% - 40px));margin:auto}
.announcement{background:#082232;color:#d9f8aa;text-align:center;font-size:13px;padding:8px 16px}
.nav{height:86px;display:flex;align-items:center;gap:30px;justify-content:space-between}
.brand{display:flex;align-items:center;direction:ltr;gap:10px;text-decoration:none;color:var(--ink);font-family:Manrope,sans-serif;font-size:19px;font-weight:800;letter-spacing:-1.2px}
.brand>span:last-child span{color:#24967a}
.brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:var(--ink);color:var(--lime);font-size:11px;letter-spacing:-1px}
.nav nav{display:flex;gap:25px;margin-inline-start:auto}
.nav nav a{color:#38505c;text-decoration:none;font-size:14px}
.button{border:0;background:var(--ink);color:white;text-decoration:none;font:600 15px "IBM Plex Sans Arabic";padding:14px 21px;border-radius:8px;display:inline-flex;align-items:center;gap:18px;cursor:pointer;transition:.2s}
.button:hover{background:#16425a;transform:translateY(-2px)}
.button b{color:var(--lime);font-size:19px}
.button-small{padding:10px 15px;font-size:13px}
.menu-toggle{display:none}
.hero{min-height:595px;display:grid;grid-template-columns:1.04fr .96fr;gap:50px;align-items:center;padding-block:63px 45px}
.eyebrow,.section-label{font-size:12px;color:#44705f;font-weight:700;letter-spacing:.4px}
.eyebrow span{display:inline-block;width:8px;height:8px;background:var(--orange);border-radius:50%;margin-left:8px}
.hero h1{font-size:clamp(46px,5.3vw,74px);line-height:1.12;letter-spacing:-2.5px;margin:15px 0 21px}
.hero h1 em{font-style:normal;color:#248a73}
.lead{max-width:570px;color:#4d5c64;font-size:18px;line-height:1.9}
.hero-actions{display:flex;gap:25px;align-items:center;margin-top:30px}
.text-link{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid #90a59d;padding-bottom:4px}
.text-link span{color:#2f9b7c;font-size:18px}
.trust{margin-top:62px;display:flex;align-items:center;gap:17px;flex-wrap:wrap;color:#59666c;font-size:12px}
.trust strong{font-family:Manrope,sans-serif;font-size:14px;color:#536063}
.hero-visual{position:relative;min-height:410px;margin:0;border-radius:25px;overflow:hidden;background:#0b2a39;box-shadow:0 20px 42px #00141d33}
.hero-visual img{display:block;width:100%;height:100%;min-height:410px;object-fit:cover}
.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#061b2ca6 0%,transparent 48%);pointer-events:none}
.hero-visual figcaption,.catalog-banner figcaption{position:absolute;bottom:18px;right:18px;z-index:1;color:#eaf6ed;background:#061c2cd9;border:1px solid #88c5ae78;padding:7px 11px;border-radius:7px;font-size:11px}
.hero-visual figcaption span{color:var(--lime);margin-left:7px;font-weight:700}
.orbit{position:absolute;border:1px solid #5d929478;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.orbit-one{width:270px;height:270px}
.orbit-two{width:440px;height:440px}
.data-node{position:absolute;border-radius:14px;color:#eef7ec;box-shadow:0 14px 30px #00141d66}
.data-node.store{top:38px;right:48px;background:#e9f4d6;color:#163c3c;padding:12px 21px}
.store small,.store span{display:block;font-size:11px}
.store b{font:700 26px Manrope}
.data-node.core{top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;text-align:center;display:grid;place-content:center;background:#ff7846;z-index:2}
.core i{font-style:normal;font-size:19px}
.core b{font:800 19px Manrope;line-height:1.2}
.core small{font-size:10px}
.data-node.channel{background:#173f4d;padding:9px 13px;display:flex;gap:7px;align-items:center;font-size:11px}
.channel i{font-style:normal;color:var(--lime)}
.channel.one{left:43px;top:82px}
.channel.two{left:50px;bottom:80px}
.channel.three{right:23px;bottom:88px}
.pulse{position:absolute;width:9px;height:9px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 7px #d7fa762e}
.p1{left:29%;top:31%}
.p2{right:23%;bottom:29%}
.problem{background:var(--ink);color:#f6f4ed;padding:78px 0}
.split{display:grid;grid-template-columns:23% 1fr;gap:40px}
.split .section-label{color:#b9d991}
.split h2,.section-head h2,.integration-copy h2,.catalog-layout h2,.security h2,.readiness h2{font-size:clamp(29px,3.4vw,46px);letter-spacing:-1.5px;line-height:1.35;margin:0 0 13px}
.split p:not(.section-label){color:#a8bbc0;max-width:670px}
.workflow{padding:100px 0}
.section-head{max-width:700px}
.section-head h2{margin-top:8px}
.section-head.compact{max-width:780px}
.section-head.compact>p:last-child{color:var(--muted);margin-top:-2px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:45px}
.steps article{padding:23px 20px 0;border-inline-start:1px solid var(--line);min-height:190px}
.steps article:first-child{border-inline-start:0}
.steps span{color:#269379;font:700 14px Manrope}
.steps h3{margin:20px 0 5px;font-size:20px}
.steps p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.services{background:#dce9dc;padding:94px 0}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:43px}
.service-card{background:#eef5eb;padding:24px;min-height:252px;display:flex;flex-direction:column;align-items:start}
.service-card.featured{background:#1d5e5c;color:white}
.card-icon{width:38px;height:38px;background:#d0f86e;color:#173d3c;border-radius:50%;display:grid;place-items:center;font-size:19px}
.service-card h3{font-size:18px;line-height:1.5;margin:27px 0 8px}
.service-card p{font-size:13px;line-height:1.7;color:#597168;margin:0}
.featured p{color:#d1e8df}
.service-card a{margin-top:auto;color:inherit;text-decoration:none;font-size:13px;font-weight:700}
.service-card a b{color:#67c3a4;font-size:17px}
.integrations{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding:105px 0}
.integration-copy>p:not(.section-label){color:var(--muted);max-width:450px}
.integration-list{border-top:1px solid var(--line)}
.integration-list>div{display:grid;grid-template-columns:54px 1fr auto;gap:15px;align-items:center;padding:14px 3px;border-bottom:1px solid var(--line)}
.integration-list i{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-style:normal;background:#e5e4dc}
.integration-list b{font:700 16px Manrope}
.integration-list small{font-size:11px;color:var(--muted)}
.salla{color:#428a7d}
.shopify{color:#4a9e65}
.woo{color:#7854a6}
.magento{color:#e66c42}
.catalog-demo{background:#f4c742;padding:92px 0}
.catalog-layout{display:grid;grid-template-columns:1fr .85fr;gap:90px;align-items:center}
.catalog-layout>div>p:not(.section-label){max-width:510px}
.check-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}
.check-list span{border:1px solid #a37b17;border-radius:20px;padding:5px 10px;font-size:12px}
.catalog-banner{position:relative;margin:0;min-height:300px;overflow:hidden;border:7px solid #fffefa;box-shadow:10px 13px 0 #c19017}
.catalog-banner img{display:block;width:100%;height:100%;min-height:300px;object-fit:cover}
.security{padding:90px 0;display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}
.security-items{border-top:1px solid var(--line)}
.security-items p{display:grid;grid-template-columns:180px 1fr;gap:16px;border-bottom:1px solid var(--line);margin:0;padding:20px 0}
.security-items b{font-size:15px}
.security-items span{color:var(--muted);font-size:14px}
.readiness{background:#113747;color:white;padding:88px 0}
.readiness-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}
.readiness .eyebrow{color:#bce79b}
.readiness>p{color:#c4d5d7}
.note{font-size:13px;color:#a9c1c4;border-right:2px solid var(--lime);padding-right:13px}
.readiness form{background:#f3f5ef;color:var(--ink);padding:26px;border-radius:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.readiness label{display:block;font-size:12px;font-weight:700;margin-bottom:13px}
.readiness input,.readiness select,.readiness textarea{display:block;width:100%;font:400 14px "IBM Plex Sans Arabic";background:#fff;border:1px solid #d7ded6;border-radius:5px;padding:10px;margin-top:5px;color:var(--ink)}
.readiness textarea{resize:vertical}
.form-status{font-size:13px;margin:11px 0 0;color:#1e756a;min-height:22px}
footer{min-height:105px;display:flex;align-items:center;gap:28px;font-size:12px;color:#788387}
footer p{margin-right:auto}
footer a{color:#316e67}
@media(max-width:760px){.nav{height:68px}
.nav nav,.nav>.button{display:none}
.menu-toggle{display:block;border:0;background:transparent;color:var(--ink);font-size:23px}
.nav.open{height:auto;min-height:68px;flex-wrap:wrap;padding-block:15px}
.nav.open nav{display:flex;order:3;width:100%;flex-direction:column;gap:10px}
.nav.open>.button{display:inline-flex}
.hero,.split,.integrations,.catalog-layout,.security,.readiness-grid{grid-template-columns:1fr;gap:36px}
.hero{padding-block:45px}
.hero-visual,.hero-visual img{min-height:350px}
.trust{margin-top:35px}
.split{gap:7px}
.workflow,.services,.integrations,.security{padding-block:65px}
.steps,.service-grid{grid-template-columns:1fr 1fr}
.steps article:nth-child(3){border-inline-start:0}
.service-grid{gap:9px}
.service-card{min-height:225px;padding:17px}
.integration-list>div{grid-template-columns:46px 1fr}
.integration-list small{grid-column:2}
.catalog-layout{gap:45px}
.catalog-banner,.catalog-banner img{min-height:245px}
.security-items p{grid-template-columns:1fr;gap:3px}
.form-row{grid-template-columns:1fr}
.readiness-grid{gap:35px}
footer{padding-block:25px;flex-wrap:wrap;gap:13px}
footer p{margin-right:0;width:100%}
}
@media(max-width:440px){.shell{width:min(100% - 28px,1120px)}
.steps,.service-grid{grid-template-columns:1fr}
.steps article,.steps article:nth-child(3){border-inline-start:0;border-bottom:1px solid var(--line);min-height:0;padding-bottom:20px}
.hero h1{letter-spacing:-1.5px}
.hero-actions{gap:15px;flex-wrap:wrap}
.hero-visual,.hero-visual img{min-height:310px}
.catalog-banner,.catalog-banner img{min-height:210px}
}