/* ============================================================
   iSupply — Digital Procurement Platform  |  isupply.ae
   One stylesheet for EN (ltr) and AR (rtl) via logical props.
   Palette sampled from brand collateral:
   teal #008080 · wave #7FBFBF · mints #A6D2D2/#D6EAEA
   amber #FFBD59 (buyers) · olive #868877 (suppliers)
   ============================================================ */
@import url("../fonts/fonts.css");

:root{
  --teal:#008080;
  --teal-ink:#045F5F;
  --teal-deep:#053B3B;
  --wave:#7FBFBF;
  --mint:#A6D2D2;
  --mint-soft:#D6EAEA;
  --mint-mist:#EDF6F5;
  --paper:#FBFDFD;
  --white:#FFFFFF;
  --ink:#17201F;
  --ink-soft:#42504E;
  --line:#DCE9E8;
  --amber:#FFBD59;
  --amber-ink:#6F4708;
  --amber-mist:#FFF4E2;
  --olive:#868877;
  --olive-ink:#5C5E4F;
  --olive-mist:#F0F0EB;
  --danger:#B4423C;
  --font-display:"Poppins","IBM Plex Sans Arabic",sans-serif;
  --font-body:"IBM Plex Sans","IBM Plex Sans Arabic",sans-serif;
  --shadow-sm:0 1px 2px rgba(5,59,59,.06),0 2px 8px rgba(5,59,59,.05);
  --shadow-md:0 2px 6px rgba(5,59,59,.07),0 12px 32px rgba(5,59,59,.10);
  --shadow-lg:0 4px 10px rgba(5,59,59,.08),0 24px 64px rgba(5,59,59,.14);
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --wrap:1160px;
  --dur:.45s;
  --ease:cubic-bezier(.22,.9,.3,1);
}
[dir="rtl"]{
  --font-display:"IBM Plex Sans Arabic","Poppins",sans-serif;
  --font-body:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--paper); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal); text-decoration:none}
a:hover{color:var(--teal-ink)}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.18; margin:0 0 .5em; color:var(--ink); font-weight:700; letter-spacing:-.01em}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0; line-height:1.4}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.22rem}
p{margin:.35em 0 1em}
strong{font-weight:600}
::selection{background:var(--mint-soft); color:var(--teal-deep)}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,4vw,40px)}
.skip{position:absolute; inset-inline-start:-999px; top:0; background:var(--teal); color:#fff; padding:10px 18px; z-index:200; border-radius:0 0 var(--r-sm) var(--r-sm)}
.skip:focus{inset-inline-start:12px; color:#fff}

/* ---------- notched chip (brand motif) ---------- */
.chip{
  display:inline-block; font-family:var(--font-display); font-weight:600;
  font-size:.82rem; letter-spacing:.09em; text-transform:uppercase;
  color:#fff; background:var(--teal); padding:.55em 1.7em .6em;
  clip-path:polygon(0 12%, 100% 0, 96% 100%, 2% 92%);
  margin-block-end:1.1rem;
}
[dir="rtl"] .chip{clip-path:polygon(0 0, 100% 12%, 98% 92%, 4% 100%); letter-spacing:0; font-size:.92rem}
.chip--amber{background:var(--amber); color:var(--amber-ink)}
.chip--olive{background:var(--olive-ink); color:#fff}

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-block-end:1px solid var(--line);
}
.top__in{display:flex; align-items:center; gap:24px; min-height:74px}
.brand{display:flex; align-items:center; flex-shrink:0}
.brand img{width:150px; height:auto}
.nav{display:flex; gap:4px; margin-inline-start:auto; align-items:center}
.nav a{
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  color:var(--ink-soft); padding:.55em .8em; border-radius:var(--r-sm);
  transition:color .2s,background .2s; white-space:nowrap;
}
.nav a:hover{color:var(--teal); background:var(--mint-mist)}
.nav a[aria-current="page"]{color:var(--teal)}
.nav a[aria-current="page"]::after{
  content:""; display:block; height:3px; margin-top:2px; border-radius:2px;
  background:var(--teal); clip-path:polygon(0 30%,100% 0,97% 100%,3% 85%);
}
.top__cta{display:flex; gap:10px; align-items:center; margin-inline-start:12px}
.lang{
  font-family:var(--font-display); font-weight:600; font-size:.85rem;
  border:1.5px solid var(--line); border-radius:99px; padding:.42em 1em;
  color:var(--ink-soft); transition:.2s;
}
.lang:hover{border-color:var(--teal); color:var(--teal)}
.burger{display:none; background:none; border:0; padding:10px; cursor:pointer; margin-inline-start:auto}
.burger span{display:block; width:24px; height:2.5px; background:var(--teal-deep); margin:5px 0; border-radius:2px; transition:.3s}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  padding:.78em 1.7em; border-radius:99px; border:2px solid transparent;
  cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s, background .2s, color .2s;
  text-align:center;
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--teal); color:#fff; box-shadow:0 6px 18px rgba(0,128,128,.28)}
.btn--primary:hover{background:var(--teal-ink); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,128,128,.34)}
.btn--ghost{border-color:var(--teal); color:var(--teal); background:transparent}
.btn--ghost:hover{background:var(--mint-mist); transform:translateY(-2px)}
.btn--amber{background:var(--amber); color:var(--amber-ink); box-shadow:0 6px 18px rgba(255,189,89,.4)}
.btn--amber:hover{background:#F5AE3D; color:var(--amber-ink); transform:translateY(-2px)}
.btn--big{font-size:1.06rem; padding:.95em 2.2em}
.btn--sm{font-size:.88rem; padding:.55em 1.3em}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:
  linear-gradient(155deg,var(--white) 0%,var(--mint-mist) 55%,var(--mint-soft) 130%)}
.hero__waves{
  position:absolute; inset-inline-end:-12%; bottom:-24%; width:68%; max-width:980px;
  opacity:.9; pointer-events:none; animation:drift 26s ease-in-out infinite alternate;
}
[dir="rtl"] .hero__waves{transform:scaleX(-1)}
@keyframes drift{from{translate:0 0}to{translate:-34px -22px}}
.hero__rings{position:absolute; top:0; inset-inline-end:0; width:230px; opacity:.7; pointer-events:none}
[dir="rtl"] .hero__rings{transform:scaleX(-1)}
.hero__in{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,72px); align-items:center; padding-block:clamp(64px,9vw,120px)}
.hero p.lead{font-size:1.18rem; color:var(--ink-soft); max-width:34em}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap; margin-block-start:1.6rem}
.hero__note{margin-block-start:1.1rem; font-size:.92rem; color:var(--teal-ink); display:flex; align-items:center; gap:.5em}
.hero__note .ring-dot{flex-shrink:0}
.accent{color:var(--teal)}

/* double-ring marker (badge motif) */
.ring-dot{
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--teal); box-shadow:inset 0 0 0 2.5px #fff, inset 0 0 0 4px var(--teal);
  display:inline-block;
}

/* RFQ demo card in hero */
.rfq-card{
  position:relative; background:var(--white); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:26px 26px 20px; max-width:430px;
  justify-self:end; width:100%;
  border:1px solid var(--line);
}
[dir="rtl"] .rfq-card{justify-self:start}
.rfq-card__head{display:flex; align-items:center; gap:12px; border-block-end:1px dashed var(--line); padding-block-end:14px; margin-block-end:14px}
.rfq-card__head img{width:34px; height:34px}
.rfq-card__head .t{font-family:var(--font-display); font-weight:600; font-size:.95rem}
.rfq-card__head .s{font-size:.8rem; color:var(--ink-soft)}
.rfq-card__tag{margin-inline-start:auto; font-size:.72rem; font-weight:600; background:var(--mint-mist); color:var(--teal-ink); padding:.35em .9em; border-radius:99px}
.quote-row{display:flex; align-items:center; gap:12px; padding:.68em .2em; border-block-end:1px solid var(--mint-mist); opacity:0; animation:qin .6s var(--ease) forwards}
.quote-row:nth-child(2){animation-delay:.5s}
.quote-row:nth-child(3){animation-delay:1s}
.quote-row:nth-child(4){animation-delay:1.5s; border-block-end:0}
@keyframes qin{from{opacity:0; translate:0 10px}to{opacity:1; translate:0 0}}
.quote-row .av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.8rem; color:#fff; flex-shrink:0}
.quote-row .who{font-size:.88rem; font-weight:600}
.quote-row .meta{font-size:.75rem; color:var(--ink-soft)}
.quote-row .aed{margin-inline-start:auto; font-family:var(--font-display); font-weight:700; color:var(--teal); font-variant-numeric:tabular-nums; white-space:nowrap}
.quote-row.best .aed{color:var(--amber-ink); background:var(--amber-mist); padding:.25em .7em; border-radius:8px}
.rfq-card__foot{margin-block-start:10px; font-size:.78rem; color:var(--ink-soft); text-align:center}

/* ---------- sections ---------- */
.sec{padding-block:clamp(60px,8vw,104px); position:relative}
.sec--mist{background:linear-gradient(180deg,var(--paper),var(--mint-mist) 45%,var(--paper))}
.sec--deep{background:var(--teal-deep); color:var(--mint-soft)}
.sec--deep h2,.sec--deep h3{color:#fff}
.sec--deep .card{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); box-shadow:none}
.sec--deep .card:hover{box-shadow:0 12px 32px rgba(0,0,0,.25); background:rgba(255,255,255,.09)}
.sec--deep .card h3{color:#fff}
.sec--deep .card p{color:var(--mint)}
.sec--deep .card__ic{background:rgba(255,255,255,.12); color:var(--mint-soft)}
.sec__head{max-width:680px; margin-block-end:clamp(28px,4vw,52px)}
.sec__head.center{margin-inline:auto; text-align:center}
.sec__head p{color:var(--ink-soft); font-size:1.06rem}
.sec--deep .sec__head p{color:var(--mint)}

/* pillar grid */
.grid{display:grid; gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 24px; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.card h3{margin-block:14px 8px}
.card p{margin:0; color:var(--ink-soft); font-size:.95rem}
.card__ic{
  width:46px; height:46px; border-radius:12px; background:var(--mint-mist);
  display:grid; place-items:center; color:var(--teal);
}
.card__ic svg{width:24px; height:24px}
.card--amber .card__ic{background:var(--amber-mist); color:var(--amber-ink)}
.card--olive .card__ic{background:var(--olive-mist); color:var(--olive-ink)}

/* steps timeline */
.steps{display:grid; gap:0; row-gap:34px; counter-reset:step; position:relative; margin-block-start:8px}
.steps--6{grid-template-columns:repeat(6,1fr)}
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps--6::before{content:""; position:absolute; top:23px; inset-inline:8.3%; height:2px; background:repeating-linear-gradient(90deg,var(--mint) 0 10px,transparent 10px 18px)}
.step{position:relative; padding:0 12px; text-align:center}
.step__n{
  counter-increment:step; width:48px; height:48px; margin-inline:auto; border-radius:50%;
  background:#fff; border:2px solid var(--teal); position:relative; z-index:1;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:var(--teal);
  box-shadow:inset 0 0 0 3.5px #fff, inset 0 0 0 5px var(--mint-soft);
}
.step__n::after{content:counter(step)}
.step--off .step__n{border-color:var(--olive); color:var(--olive-ink); border-style:dashed}
.step h3{font-size:.95rem; margin:14px 0 4px}
.step p{font-size:.82rem; color:var(--ink-soft); margin:0}
.steps-key{display:flex; gap:26px; justify-content:center; margin-block-start:34px; font-size:.86rem; color:var(--ink-soft); flex-wrap:wrap}
.steps-key span{display:flex; align-items:center; gap:.5em}
.steps-key i{width:14px;height:14px;border-radius:50%;border:2px solid var(--teal);display:inline-block}
.steps-key i.off{border-color:var(--olive); border-style:dashed}

/* audience split band */
.split{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.panel{
  border-radius:var(--r-lg); padding:clamp(26px,3.5vw,42px); position:relative; overflow:hidden;
  background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.panel--buyer{border-block-start:5px solid var(--amber)}
.panel--supplier{border-block-start:5px solid var(--olive)}
.panel ul{list-style:none; padding:0; margin:1em 0 1.4em}
.panel li{padding-inline-start:1.7em; position:relative; margin-block:.55em; color:var(--ink-soft); font-size:.97rem}
[dir="rtl"] .panel li{padding-inline-start:1.7em}
.panel li::before{
  content:""; position:absolute; inset-inline-start:0; top:.42em; width:11px; height:11px;
  border-radius:50%; border:2px solid var(--teal);
}
.panel--buyer li::before{border-color:var(--amber)}
.panel--supplier li::before{border-color:var(--olive)}

/* categories */
.cats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cat{
  display:flex; gap:14px; align-items:flex-start; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px;
  transition:transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.cat:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--mint)}
.cat__ic{width:42px; height:42px; flex-shrink:0; border-radius:10px; background:var(--mint-mist); color:var(--teal); display:grid; place-items:center}
.cat__ic svg{width:22px; height:22px}
.cat h3{font-size:1rem; margin:0 0 2px}
.cat p{font-size:.82rem; color:var(--ink-soft); margin:0}
.cat--wide{grid-column:1/-1; flex-direction:column; background:var(--mint-mist); border-color:var(--mint-soft)}
.subcats{display:flex; flex-wrap:wrap; gap:8px; margin-block-start:4px}
.subcats span{background:#fff; border:1px solid var(--mint-soft); color:var(--teal-ink); font-size:.8rem; padding:.3em .9em; border-radius:99px}

/* pricing */
.audience-pick{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-block-end:38px}
.audience-pick button{
  font-family:var(--font-display); font-weight:600; font-size:.95rem; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--ink-soft);
  border-radius:99px; padding:.65em 1.6em; transition:.2s;
}
.audience-pick button[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:#fff; box-shadow:0 4px 14px rgba(0,128,128,.25)}
.audience-pick button:hover{border-color:var(--teal); color:var(--teal)}
.audience-pick button[aria-pressed="true"]:hover{color:#fff}
.price-group{display:none}
.price-group.on{display:block}
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; align-items:stretch}
.plan{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 28px; display:flex; flex-direction:column; position:relative;
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s;
}
.plan:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.plan--hot{border:2px solid var(--teal); box-shadow:var(--shadow-md)}
.plan__flag{
  position:absolute; top:-14px; inset-inline-start:50%; translate:-50% 0;
  background:var(--amber); color:var(--amber-ink); font-size:.72rem; font-weight:700;
  font-family:var(--font-display); padding:.35em 1.2em; border-radius:99px; white-space:nowrap;
}
[dir="rtl"] .plan__flag{translate:50% 0}
.plan h3{font-size:1.05rem}
.plan .for{font-size:.82rem; color:var(--ink-soft); min-height:2.2em}
.plan .aed{font-family:var(--font-display); font-weight:700; font-size:2.1rem; color:var(--teal); margin-block:6px 2px; font-variant-numeric:tabular-nums}
.plan .aed small{font-size:.95rem; font-weight:600; color:var(--ink-soft)}
.plan .per{font-size:.82rem; color:var(--ink-soft); margin-block-end:14px}
.plan ul{list-style:none; margin:0 0 22px; padding:0; flex:1}
.plan li{font-size:.9rem; color:var(--ink-soft); padding-inline-start:1.6em; position:relative; margin-block:.5em}
.plan li::before{
  content:""; position:absolute; inset-inline-start:0; top:.36em;
  width:10px; height:10px; border-radius:50%; border:2px solid var(--teal);
}
.plan .btn{width:100%}
.addons{margin-block-start:30px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.addon{background:var(--mint-mist); border:1px dashed var(--mint); border-radius:var(--r-md); padding:16px 20px; font-size:.92rem; color:var(--teal-deep)}
.addon strong{color:var(--teal-ink)}
.vat-note{margin-block-start:22px; font-size:.85rem; color:var(--ink-soft); text-align:center}

/* free trial band */
.trial{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:linear-gradient(120deg,var(--teal) 0%,var(--teal-ink) 100%);
  color:#fff; border-radius:var(--r-lg); padding:clamp(24px,4vw,40px);
  box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.trial::after{
  content:""; position:absolute; inset-inline-end:-60px; top:-60px; width:240px; height:240px;
  border:1.5px solid rgba(255,255,255,.25); border-radius:50%;
  box-shadow:0 0 0 28px transparent, inset 0 0 0 14px rgba(255,255,255,.06);
}
.trial h3{color:#fff; font-size:1.35rem; margin:0}
.trial p{margin:0; color:var(--mint-soft)}
.trial .btn{margin-inline-start:auto; background:#fff; color:var(--teal); flex-shrink:0}
.trial .btn:hover{background:var(--mint-soft); color:var(--teal-deep)}

/* comparison strip (stats) */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center}
.fact{padding:22px 10px}
.fact+.fact{border-inline-start:1px solid var(--line)}
.fact .n{font-family:var(--font-display); font-weight:700; font-size:2.2rem; color:var(--teal); font-variant-numeric:tabular-nums}
.sec--deep .fact .n{color:var(--amber)}
.fact .l{font-size:.88rem; color:var(--ink-soft)}
.sec--deep .fact .l{color:var(--mint)}

/* FAQ */
.tabs{display:flex; gap:10px; justify-content:center; margin-block-end:30px; flex-wrap:wrap}
.tabs button{
  font-family:var(--font-display); font-weight:600; font-size:.95rem; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--ink-soft); border-radius:99px;
  padding:.6em 1.7em; transition:.2s;
}
.tabs button[aria-selected="true"]{background:var(--teal); border-color:var(--teal); color:#fff}
.tabs button.t-amber[aria-selected="true"]{background:var(--amber); border-color:var(--amber); color:var(--amber-ink)}
.tabs button.t-olive[aria-selected="true"]{background:var(--olive); border-color:var(--olive); color:#fff}
.faq-panel{display:none; max-width:820px; margin-inline:auto}
.faq-panel.on{display:block}
.qa{border:1px solid var(--line); border-radius:var(--r-md); background:#fff; margin-block-end:12px; overflow:hidden}
.qa summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:600; font-size:1rem; padding:18px 22px;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:""; margin-inline-start:auto; width:10px; height:10px; flex-shrink:0;
  border-inline-end:2.5px solid var(--teal); border-block-end:2.5px solid var(--teal);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.qa[open] summary::after{transform:rotate(225deg)}
.qa[open]{box-shadow:var(--shadow-sm)}
.qa .a{padding:0 22px 20px; color:var(--ink-soft); font-size:.96rem}
.qa .a p{margin:0}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:start}
.c-lines{list-style:none; margin:1.4em 0; padding:0}
.c-lines li{display:flex; gap:16px; align-items:center; padding-block:14px; border-block-end:1px solid var(--mint-mist)}
.c-lines .ic{width:44px; height:44px; flex-shrink:0; border-radius:50%; background:var(--mint-mist); color:var(--teal); display:grid; place-items:center}
.c-lines .ic svg{width:21px; height:21px}
.c-lines .t{font-size:.8rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-display); font-weight:600}
[dir="rtl"] .c-lines .t{letter-spacing:0}
.c-lines .v{font-weight:600; color:var(--ink); direction:ltr; unicode-bidi:embed}
[dir="rtl"] .c-lines .v.bidi-ok{direction:rtl}
.form{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,36px); box-shadow:var(--shadow-sm)}
.form label{display:block; font-family:var(--font-display); font-weight:600; font-size:.88rem; margin-block:14px 6px}
.form input,.form select,.form textarea{
  width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:.7em .9em; font:inherit; font-size:.95rem; color:var(--ink); background:var(--paper);
  transition:border-color .2s, box-shadow .2s;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--mint-soft)}
.form button{margin-block-start:20px; width:100%}
.form .hint{font-size:.8rem; color:var(--ink-soft); margin-block-start:10px; text-align:center}

/* CTA band */
.cta-band{
  text-align:center; background:
    radial-gradient(120% 160% at 50% 120%,var(--mint-soft) 0%,transparent 60%),
    var(--paper);
}
.cta-band .btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-block-start:1.8rem}

/* legal prose */
.prose{max-width:780px}
.prose h2{font-size:1.35rem; margin-block-start:2em}
.prose h3{font-size:1.05rem; margin-block-start:1.6em}
.prose li{margin-block:.4em; color:var(--ink-soft)}
.prose p{color:var(--ink-soft)}
.updated{font-size:.85rem; color:var(--ink-soft); background:var(--mint-mist); display:inline-block; padding:.4em 1.1em; border-radius:99px; margin-block-end:1.5em}

/* page hero (inner pages) */
.phero{
  position:relative; overflow:hidden; padding-block:clamp(52px,7vw,84px);
  background:linear-gradient(150deg,var(--white),var(--mint-mist) 70%);
  border-block-end:1px solid var(--line);
}
.phero .wrap{position:relative}
.phero p{max-width:38em; color:var(--ink-soft); font-size:1.1rem; margin-block-end:0}
.phero__rings{position:absolute; top:-40px; inset-inline-end:0; width:210px; opacity:.55; pointer-events:none}
[dir="rtl"] .phero__rings{transform:scaleX(-1)}

/* footer */
.foot{background:var(--teal-deep); color:var(--mint-soft); margin-block-start:0}
.foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(24px,4vw,48px); padding-block:clamp(44px,6vw,64px)}
.foot__brand p{font-size:.9rem; color:var(--mint); max-width:26em}
.foot__logo{background:#fff; display:inline-block; padding:10px 16px; border-radius:10px; margin-block-end:14px}
.foot__logo img{width:130px}
.foot h3{color:#fff; font-size:.95rem; margin-block-end:.9em}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-block:.55em}
.foot a{color:var(--mint); font-size:.92rem}
.foot a:hover{color:#fff}
.foot__meta{border-block-start:1px solid rgba(255,255,255,.14); padding-block:20px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:.84rem; color:var(--mint)}
.foot__meta .soc{display:flex; gap:10px; margin-inline-start:auto}
.foot__meta .soc a{
  width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3);
  display:grid; place-items:center; color:var(--mint-soft); transition:.2s;
}
.foot__meta .soc a:hover{border-color:var(--amber); color:var(--amber)}
.foot__meta .soc svg{width:17px; height:17px}
.foot__contact li{display:flex; gap:10px; align-items:center; font-size:.92rem; color:var(--mint)}
.foot__contact svg{width:16px; height:16px; flex-shrink:0; color:var(--amber)}
.foot__contact .ltr{direction:ltr; unicode-bidi:embed}

/* modal (app link placeholder) */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px}
.modal__bg{position:absolute; inset:0; background:rgba(5,59,59,.55); backdrop-filter:blur(3px)}
.modal__box{
  position:relative; background:#fff; border-radius:var(--r-lg); max-width:430px; width:100%;
  padding:34px 30px; text-align:center; box-shadow:var(--shadow-lg);
  animation:pop .35s var(--ease);
}
@keyframes pop{from{opacity:0; scale:.92}to{opacity:1; scale:1}}
.modal__box img{width:52px; margin-inline:auto; margin-block-end:12px}
.modal__box h3{font-size:1.2rem}
.modal__box p{color:var(--ink-soft); font-size:.95rem}
.modal__box .btn{margin-block-start:8px}
.modal__x{position:absolute; top:14px; inset-inline-end:14px; background:none; border:0; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--ink-soft); padding:6px}
.modal__x:hover{color:var(--danger)}

/* 404 */
.nf{min-height:60vh; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden}
.nf .code{font-family:var(--font-display); font-weight:700; font-size:clamp(5rem,16vw,9rem); color:var(--mint-soft); line-height:1}
.nf h1{margin-block-start:-.4em}

/* reveal on scroll */
.rv{opacity:0; translate:0 26px; transition:opacity .7s var(--ease), translate .7s var(--ease)}
.rv.in{opacity:1; translate:0 0}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; translate:none; transition:none}
  .hero__waves{animation:none}
  .quote-row{animation:none; opacity:1}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .steps--6,.steps--4,.steps--3{grid-template-columns:repeat(3,1fr)}
  .steps--6::before{display:none}
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact+.fact{border-inline-start:0}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{
    position:fixed; inset-block-start:74px; inset-inline:0; background:#fff;
    flex-direction:column; align-items:stretch; padding:18px 22px 26px; gap:6px;
    border-block-end:1px solid var(--line); box-shadow:var(--shadow-md);
    translate:0 -130%; transition:translate .35s var(--ease); z-index:99;
  }
  .nav.open{translate:0 0}
  .nav a{font-size:1.05rem; padding:.8em .6em}
  .burger{display:block}
  .top__cta .btn{display:none}
  .hero__in{grid-template-columns:1fr; padding-block:56px 64px}
  .rfq-card{justify-self:stretch; max-width:none}
  [dir="rtl"] .rfq-card{justify-self:stretch}
  .split{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .trial .btn{margin-inline-start:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .grid--3,.grid--2,.grid--4,.cats{grid-template-columns:1fr}
  .steps--6,.steps--4,.steps--3{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr}
  .brand img{width:124px}
  .hero__actions .btn{width:100%}
}