/* ==========================================================================
   MaxAB — static rebuild of maxab.io
   Design tokens taken from the live site: Poppins, #1B2032 dark sections,
   #FFCE32 buttons, #2560A6 / #E3EDFA icon circles, #F2F3F3 news band.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --dark:#1B2032;          /* dark section background */
  --heading:#272D3A;       /* headings on light backgrounds */
  --body:#5C6770;          /* body copy */
  --page:#ECEFEF;          /* page background */
  --grey:#F2F3F3;          /* news band */
  --white:#FFFFFF;
  --yellow:#FFCE32;        /* primary button */
  --yellow-dark:#F0BE1E;
  --btn-text:#1D1D1B;
  --blue:#005DBE;          /* MaxAB brand blue (from the new logo) */
  --blue-soft:#E3EDFA;     /* filled icon circles on light */
  --line:#E2E5E8;

  --maxw:1206px;
  --gutter:30px;
  --pad-y:110px;
  --header-h:96px;

  --font:"Poppins",Arial,Helvetica,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px;}
body{
  margin:0;font-family:var(--font);font-size:16px;font-weight:400;line-height:1.75;
  color:var(--body);background:var(--page);overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block;}
a{color:var(--blue);text-decoration:none;}
button{font:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-weight:600;line-height:1.25;margin:0 0 20px;color:var(--heading);}
h1{font-size:60px;}
h2{font-size:46px;}
h3{font-size:26px;}
h4{font-size:14px;}
p{margin:0 0 20px;}
p:last-child{margin-bottom:0;}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;}
.skip-link{position:absolute;inset-block-start:-70px;inset-inline-start:20px;background:var(--yellow);color:var(--btn-text);padding:10px 18px;font-weight:600;z-index:300;transition:.2s;}
.skip-link:focus{inset-block-start:0;}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--pad-y);}
.section--dark{background:var(--dark);color:rgba(255,255,255,.75);}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--light{background:var(--white);}
.section--grey{background:var(--grey);}
.center{text-align:center;}
.lead{font-size:16px;line-height:1.9;}
.section--dark .lead{color:rgba(255,255,255,.75);}

/* ---------- Buttons (flat, 2px radius — as on maxab.io) ---------- */
.btn{
  display:inline-block;background:var(--yellow);color:var(--btn-text);
  padding:13px 29px;border-radius:2px;border:0;font-size:14px;font-weight:600;
  line-height:1.4;transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:var(--yellow-dark);color:var(--btn-text);}
.btn--wide{padding-inline:46px;}
.btn--block{display:block;width:100%;text-align:center;}

/* ---------- Header ---------- */
.header{
  position:absolute;inset-block-start:0;inset-inline:0;z-index:120;
  transition:background .25s ease,box-shadow .25s ease,position 0s;
}
.header.is-stuck{position:fixed;background:var(--dark);box-shadow:0 2px 14px rgba(0,0,0,.25);}
.header__inner{display:flex;align-items:center;gap:24px;min-height:var(--header-h);}
.brand{flex:0 0 auto;display:block;}
.brand img{height:58px;width:auto;}
.header.is-stuck .brand img{height:46px;}
.nav{margin-inline-start:auto;}
.nav__list{display:flex;align-items:center;gap:34px;}
.nav__link{
  display:block;font-size:16px;font-weight:400;color:rgba(255,255,255,.7);
  padding-block:6px;transition:color .2s;position:relative;
}
.nav__link:hover,.nav__link.is-active{color:#fff;}
.nav__link.is-active::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;background:var(--yellow);
}
.lang-switch{
  font-size:14px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.45);
  padding:7px 16px;border-radius:2px;transition:.2s;
}
.lang-switch:hover{background:#fff;color:var(--dark);}
.nav-toggle{
  display:none;width:44px;height:44px;background:transparent;border:0;color:#fff;
  align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:24px;height:2px;background:currentColor;position:relative;transition:.2s;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;inset-inline-start:0;width:24px;height:2px;background:currentColor;transition:.2s;}
.nav-toggle span::before{inset-block-start:-7px;}
.nav-toggle span::after{inset-block-start:7px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{inset-block-start:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{inset-block-start:0;transform:rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  position:relative;background-color:#1D1D1B;
  background-image:url("https://www.maxab.io/wp-content/uploads/2022/02/Intro_Background_4.jpeg"),
                   url("../assets/warehouse.svg");
  background-size:cover;background-position:center;
  padding-block:calc(var(--header-h) + 70px) 90px;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(15,18,26,.86) 0%, rgba(15,18,26,.72) 45%, rgba(15,18,26,.45) 100%);
}
.hero__inner{position:relative;display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;min-height:520px;}
.hero h1{color:#fff;max-width:12ch;margin-bottom:26px;}
.hero p{color:#fff;font-size:20px;line-height:1.8;max-width:34ch;margin-bottom:34px;}
.store-badge img{height:52px;width:auto;}
.hero__visual img{width:100%;max-width:430px;max-height:580px;object-fit:contain;margin-inline-start:auto;}

/* ---------- Parallax band ---------- */
.parallax{
  background-color:var(--dark);
  background-image:url("https://sitedev.maxab.io/wp-content/uploads/2021/12/ProductFeatures_7-scaled.jpg"),
                   url("../assets/warehouse.svg");
  background-size:cover;background-position:center;background-attachment:fixed,scroll;
  min-height:460px;
}

/* ---------- Icon circles ---------- */
.icon-circle{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  margin-inline:auto;margin-bottom:22px;background:var(--blue);color:#fff;flex:0 0 auto;
}
.icon-circle--soft{background:var(--blue-soft);color:var(--blue);}
.icon-circle svg{width:34px;height:34px;}

/* ---------- Platform pillars ---------- */
.pillars{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:24px;text-align:center;
}
.pillar h4{color:#fff;font-size:14px;margin:0;letter-spacing:.02em;}

/* ---------- Product lines ---------- */
.prod-head{max-width:760px;text-align:start;margin-bottom:70px;}
.prod-head h2{margin-bottom:10px;}
.prod-head p{font-size:20px;color:var(--body);}
.prod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px;}
.prod h3{margin-bottom:14px;}
.prod p{margin-bottom:18px;}
.prod ul{}
.prod li{position:relative;padding-inline-start:26px;margin-bottom:8px;font-size:15px;}
.prod li::before{
  content:"✻";position:absolute;inset-inline-start:0;inset-block-start:-1px;color:var(--blue);font-size:14px;
}

/* ---------- Two-column text section ---------- */
.intro{display:grid;grid-template-columns:1fr 2fr;gap:50px;align-items:start;}
.intro h2{margin:0;}
.intro p{font-size:16px;line-height:1.95;}

/* ---------- Numbered supplier blocks ---------- */
.numbered{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 60px;margin-block-start:70px;}
.numbered h2{font-size:24px;margin-bottom:12px;}
.numbered p{font-size:15px;line-height:1.9;}

/* ---------- CTA strip ---------- */
.cta-strip{background:var(--dark);padding-block:69px;text-align:center;}
.cta-strip h2{font-size:34px;color:#fff;margin-bottom:28px;}

/* ---------- News ---------- */
.news-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-block-start:44px;}
.press{
  background:#fff;display:grid;place-items:center;min-height:120px;padding:24px;
  transition:box-shadow .2s ease,transform .2s ease;
}
.press:hover{box-shadow:0 10px 26px rgba(0,0,0,.09);transform:translateY(-2px);}
.press img{max-height:52px;width:auto;object-fit:contain;}
.press__name{display:none;font-weight:600;color:var(--heading);font-size:15px;text-align:center;}
.press.no-img img{display:none;}
.press.no-img .press__name{display:block;}

/* ---------- Careers ---------- */
.careers{text-align:center;padding-block:138px;}
.careers h2{color:#fff;margin-bottom:30px;}

/* ---------- Sign-up forms ---------- */
.signup-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start;}
.form-card{background:#fff;padding:40px;box-shadow:0 12px 40px rgba(27,32,50,.09);}
.tabs{display:flex;border-bottom:2px solid var(--line);margin-bottom:28px;}
.tab{
  flex:1;padding:12px 8px;background:transparent;border:0;border-bottom:3px solid transparent;
  margin-bottom:-2px;font-size:14px;font-weight:600;color:var(--body);transition:.2s;
}
.tab[aria-selected="true"]{color:var(--heading);border-bottom-color:var(--yellow);}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--heading);margin-bottom:7px;letter-spacing:.02em;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:2px;
  font:inherit;font-size:15px;color:var(--heading);background:#fff;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(37,96,166,.13);}
.field textarea{min-height:110px;resize:vertical;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.error-msg{display:block;color:#C62828;font-size:12px;margin-block-start:5px;}
.form-status{display:none;margin-block-start:16px;padding:12px 16px;background:#E8F5E9;color:#1B5E20;font-size:14px;font-weight:600;}
.form-status.is-visible{display:block;}
.form-status.is-error{background:#FDECEC;color:#A62121;}
.form-note{font-size:13px;margin-block-start:14px;}
.signup-list li{position:relative;padding-inline-start:26px;margin-bottom:14px;}
.signup-list li::before{content:"✻";position:absolute;inset-inline-start:0;color:var(--yellow);}
.signup-list strong{color:var(--heading);display:block;font-weight:600;}

/* ---------- Footer ---------- */
.footer{background:var(--dark);color:rgba(255,255,255,.7);padding-block:60px 0;font-size:14px;}
.footer__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;}
.footer img.footer-logo{height:70px;width:auto;}
.footer h4{color:#fff;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;}
.footer a{color:rgba(255,255,255,.7);}
.footer a:hover{color:var(--yellow);}
.footer__links li{margin-bottom:10px;}
.socials{display:flex;gap:12px;margin-block-start:20px;}
.socials a{width:36px;height:36px;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;transition:.2s;}
.socials a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--btn-text);}
.footer__bottom{
  margin-block-start:44px;border-block-start:1px solid rgba(255,255,255,.12);
  padding-block:22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:13px;
}


/* ---------- Countries row (hero) ---------- */
.countries{
  position:relative;margin-block-start:54px;padding-block-start:30px;
  border-block-start:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;gap:46px;flex-wrap:wrap;
}
.countries__label{
  display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:17px;
}
.country{text-align:center;color:#fff;font-size:15px;font-weight:500;}
.country .flag{
  display:block;width:96px;height:64px;object-fit:cover;margin:0 auto 10px;
  border:1px solid rgba(255,255,255,.35);
}

/* ---------- Store badges ---------- */
.store-badges{display:flex;gap:14px;flex-wrap:wrap;}
.store-badges img{height:54px;width:auto;}

/* ---------- Why MaxAB cards ---------- */
.why-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin-block-start:60px;}
.why-card{
  background:rgba(255,255,255,.05);padding:30px 18px;text-align:center;
  transition:background .2s ease,transform .2s ease;
}
.why-card:hover{background:rgba(255,255,255,.09);transform:translateY(-3px);}
.why-card .icon-circle{width:62px;height:62px;margin-bottom:16px;}
.why-card .icon-circle svg{width:28px;height:28px;}
.why-card h4{color:#fff;font-size:14px;margin:0;line-height:1.5;}

/* ---------- Verticals ---------- */
.vert-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px;}
.vert .icon-circle{margin-inline:0;}
.vert h3{margin-bottom:14px;}
.vert p{margin-bottom:18px;}
.vert ul{border-block-start:1px solid var(--line);padding-block-start:20px;}
.vert li{position:relative;padding-inline-start:26px;margin-bottom:10px;font-size:15px;}
.vert li::before{content:"✻";position:absolute;inset-inline-start:0;inset-block-start:-1px;color:var(--blue);}

/* ---------- Our Network ---------- */
.network-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block-start:56px;}
.network-card{
  background:rgba(255,255,255,.05);padding:34px 28px;
}
.network-card .icon-circle{margin-inline:0;width:62px;height:62px;margin-bottom:18px;}
.network-card .icon-circle svg{width:28px;height:28px;}
.network-card h3{font-size:20px;margin-bottom:10px;}
.network-card p{font-size:15px;color:rgba(255,255,255,.72);}

/* ---------- Supplier logos ---------- */
.supplier-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-block-start:50px;}
.supplier-logo{
  background:#fff;border:1px solid var(--line);min-height:96px;display:grid;place-items:center;
  padding:16px;text-align:center;font-weight:600;color:var(--heading);font-size:14px;line-height:1.35;
}
.supplier-logo img{max-height:52px;width:auto;}
.supplier-note{margin-block-start:22px;font-size:13px;color:var(--body);}

/* ---------- Fintech services ---------- */
.fin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-block-start:56px;}
.fin-item{
  background:rgba(255,255,255,.05);padding:24px 20px;display:flex;align-items:center;gap:14px;
  color:#fff;font-weight:500;font-size:15px;line-height:1.45;
}
.fin-item svg{flex:0 0 auto;width:24px;height:24px;color:var(--yellow);}
.fintech-split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.fintech-split img{width:100%;max-width:400px;max-height:520px;object-fit:contain;margin-inline:auto;}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .parallax{background-attachment:scroll;}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  h1{font-size:46px;} h2{font-size:36px;}
  .why-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .news-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .supplier-logos{grid-template-columns:repeat(4,minmax(0,1fr));}
  .fin-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1024px){
  :root{--pad-y:80px;}
  .nav-toggle{display:flex;}
  .nav{
    position:fixed;inset-block-start:0;inset-inline-end:0;width:min(320px,86vw);height:100dvh;
    background:var(--dark);padding:90px 30px 30px;margin:0;overflow-y:auto;
    transform:translateX(110%);transition:transform .3s ease;box-shadow:-6px 0 30px rgba(0,0,0,.3);
  }
  [dir="rtl"] .nav{transform:translateX(-110%);}
  .nav.is-open{transform:none;}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;}
  .nav__link{padding-block:14px;border-block-end:1px solid rgba(255,255,255,.1);font-size:17px;}
  .header__actions{margin-inline-start:auto;display:flex;align-items:center;gap:14px;z-index:130;}
  .hero__inner{grid-template-columns:1fr;text-align:center;min-height:0;}
  .hero h1,.hero p{max-width:none;margin-inline:auto;}
  .hero::before{background:rgba(15,18,26,.75);}
  .hero__visual img{margin-inline:auto;max-width:320px;}
  .intro{grid-template-columns:1fr;gap:20px;}
  .prod-grid{grid-template-columns:1fr;gap:56px;}
  .numbered{grid-template-columns:1fr;gap:36px;}
  .signup-grid{grid-template-columns:1fr;gap:40px;}
  .parallax{min-height:340px;background-attachment:scroll;}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vert-grid{grid-template-columns:1fr;gap:50px;}
  .network-grid{grid-template-columns:1fr;}
  .fin-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fintech-split{grid-template-columns:1fr;gap:36px;}
  .countries{gap:26px;}
  .prod-head{text-align:center;margin-inline:auto;}
}
@media (max-width:700px){
  h1{font-size:34px;} h2{font-size:28px;} h3{font-size:22px;}
  .hero p{font-size:17px;}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));}
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
  .cta-strip h2{font-size:24px;}
  .careers{padding-block:80px;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .why-grid{grid-template-columns:1fr;}
  .supplier-logos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fin-grid{grid-template-columns:1fr;}
  .country .flag{width:74px;height:50px;}
  .store-badges img{height:46px;}
  .form-card{padding:26px 22px;}
  .footer__grid{grid-template-columns:1fr;}
  .footer__bottom{justify-content:flex-start;}
}