/* ============================================================
   MawashiTech — Theme v3 "Platform" (reference: vetster.com)
   Navy + olive-green accent, light friendly sections, pill CTAs,
   floating product-UI cards. Logo, photos and chatbot untouched.
   ============================================================ */
:root{
  --navy-900:#0d1f33;
  --navy-800:#122941;
  --navy-700:#16314f;   /* brand navy (nav, headings, dark bands) */
  --navy-600:#1f456b;
  --navy-500:#2c5d8a;
  --green-800:#46591b;
  --green-700:#566b22;
  --green-600:#6f8230;
  --green:#879a3c;       /* logo olive — the accent (Vetster-pink role) */
  --green-400:#a0b258;
  --green-300:#c2d18b;
  --accent:#879a3c;
  --bg:#ffffff;
  --bg-soft:#f5f8fa;     /* light blue-gray section alt */
  --bg-tint:#eef3f0;
  --ink:#16314f;
  --body-c:#4d5b6a;
  --muted:#6b7886;
  --line:rgba(22,49,79,.1);
  --hairline:rgba(22,49,79,.14);
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-card:0 0 0 1px rgba(22,49,79,.05), 0 2px 6px rgba(22,49,79,.04), 0 12px 32px -12px rgba(22,49,79,.12);
  --shadow-card-h:0 0 0 1px rgba(22,49,79,.07), 0 4px 10px rgba(22,49,79,.06), 0 22px 48px -14px rgba(22,49,79,.18);
  --shadow-float:0 18px 44px -12px rgba(13,31,51,.28), 0 4px 12px -4px rgba(13,31,51,.14);
  --maxw:1200px;
  --font-display:"Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:"Manrope", system-ui, sans-serif;
}
body.rtl{
  --font-display:"Cairo", system-ui, sans-serif;
  --font-body:"Cairo", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--body-c);
  font-family:var(--font-body);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.rtl{ font-size:18px; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:rgba(135,154,60,.28); }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:clamp(72px,8.5vw,120px) 0; position:relative; }
h1,h2,h3,h4{ color:var(--ink); }

/* icons */
svg.i16{ width:16px; height:16px; } svg.i18{ width:18px; height:18px; }
svg.i20{ width:20px; height:20px; } svg.i22{ width:22px; height:22px; }
svg.i24{ width:24px; height:24px; }
body.rtl .rtl-flip{ transform:scaleX(-1); }

/* ============================================================ Buttons (pills) */
.btn{
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15.5px;
  padding:14px 28px; border-radius:100px; border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s, filter .25s;
  white-space:nowrap; letter-spacing:.005em;
}
.btn:active{ transform:scale(.97); }
.btn-sm{ padding:10px 20px; font-size:14px; }
.btn-lg{ padding:17px 34px; font-size:16.5px; }
.btn svg{ transition:transform .25s var(--ease); }
.btn:hover svg.rtl-flip{ transform:translateX(3px); }
body.rtl .btn:hover svg.rtl-flip{ transform:scaleX(-1) translateX(3px); }

/* the one loud accent (Vetster-pink role -> logo olive) */
.btn-green{ background:var(--accent); color:#15200a; box-shadow:0 12px 28px -8px rgba(135,154,60,.55); }
.btn-green:hover{ filter:brightness(1.07); box-shadow:0 16px 34px -8px rgba(135,154,60,.6); }
.btn-primary{ background:var(--accent); color:#15200a; box-shadow:0 12px 28px -8px rgba(135,154,60,.5); }
.btn-primary:hover{ filter:brightness(1.07); }
.btn-navy{ background:var(--navy-700); color:#fff; box-shadow:0 10px 26px -8px rgba(22,49,79,.4); }
.btn-navy:hover{ background:var(--navy-600); }
.btn-ghost{ background:rgba(22,49,79,.05); color:var(--navy-700); border-color:var(--hairline); }
.btn-ghost:hover{ background:rgba(22,49,79,.09); }
.btn-ghost-light{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.4); backdrop-filter:blur(8px); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.2); }
.btn-outline{ background:transparent; color:var(--navy-700); border-color:rgba(22,49,79,.3); }
.btn-outline:hover{ background:var(--navy-700); color:#fff; border-color:var(--navy-700); }

.icon-btn{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:100px; border:1px solid var(--hairline); background:transparent; color:var(--navy-700); transition:background .2s, border-color .2s; }
.icon-btn:hover{ background:rgba(22,49,79,.06); }
.icon-btn.light{ color:#fff; border-color:rgba(255,255,255,.25); }
.icon-btn.light:hover{ background:rgba(255,255,255,.12); }

/* ============================================================ Nav — solid navy (Vetster) */
.nav{ position:fixed; inset:0 0 auto 0; z-index:60; padding:13px 0;
  background:var(--navy-700); box-shadow:0 1px 0 rgba(255,255,255,.06);
  transition:padding .3s var(--ease), box-shadow .3s; }
.nav-scrolled{ padding:9px 0; box-shadow:0 10px 30px -12px rgba(13,31,51,.5); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:42px; height:42px; object-fit:contain; }
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:20px; color:#fff; letter-spacing:-.01em; }
.brand-name.light{ color:#fff; }
.nav-links{ display:flex; gap:2px; margin-inline-start:auto; }
.nav-links a{ font-family:var(--font-display); font-weight:600; font-size:14.5px; color:rgba(255,255,255,.86); padding:9px 14px; border-radius:100px; transition:background .2s, color .2s; }
.nav-links a:hover{ background:rgba(255,255,255,.1); color:#fff; }
body.rtl .nav-links a{ font-weight:700; }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-cta{ background:var(--accent); color:#15200a; }
.lang-btn{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); color:#fff; font-weight:700; font-size:13.5px; padding:9px 15px; border-radius:100px; transition:.25s; font-family:var(--font-display); }
body.rtl .lang-btn{ font-family:"Plus Jakarta Sans",sans-serif; }
.lang-btn:hover{ background:#fff; color:var(--navy-700); border-color:#fff; }
.nav-burger{ display:none; color:#fff; border-color:rgba(255,255,255,.3); }
.nav-mobile{ display:none; flex-direction:column; gap:6px; padding:16px 28px 22px; background:var(--navy-700); border-top:1px solid rgba(255,255,255,.1); box-shadow:0 24px 40px -18px rgba(13,31,51,.5); }
.nav-mobile a{ padding:13px 8px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.1); color:#fff; font-family:var(--font-display); }
.nav-mobile .btn{ margin-top:12px; }

/* ============================================================ Glows */
.glow{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.4; pointer-events:none; z-index:0; }
.glow-green{ width:440px; height:440px; background:radial-gradient(circle, var(--green) 0%, transparent 68%); top:-80px; inset-inline-end:-60px; opacity:.2; }
.glow-navy{ width:520px; height:520px; background:radial-gradient(circle, var(--navy-500) 0%, transparent 70%); bottom:-160px; inset-inline-start:-120px; opacity:.16; }
.glow.big{ width:680px; height:680px; }
.glow.soft{ opacity:.12; }

/* ============================================================ Hero — Vetster split: copy left, product card right */
.hero{ position:relative; overflow:hidden; }
.hero-vet{ color:#fff; }
.hv-bg{ position:absolute; inset:0; z-index:0; }
.hv-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation:hvSettle 2s var(--ease) both; }
@keyframes hvSettle{ from{ transform:scale(1.09); } to{ transform:scale(1.04); } }
.hv-scrim{ position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(13,31,51,.94) 0%, rgba(13,31,51,.82) 34%, rgba(13,31,51,.45) 64%, rgba(13,31,51,.3) 100%); }
body.rtl .hv-scrim{ background:linear-gradient(260deg, rgba(13,31,51,.94) 0%, rgba(13,31,51,.82) 34%, rgba(13,31,51,.45) 64%, rgba(13,31,51,.3) 100%); }
.hv-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding-top:clamp(120px,16vh,170px); padding-bottom:clamp(56px,8vh,96px); min-height:92svh; }

@keyframes hvUp{ from{ opacity:0; transform:translateY(14px); filter:blur(6px); } to{ opacity:1; transform:none; filter:blur(0); } }
.hv-stage{ animation:hvUp .7s var(--ease) both; }
.hv-stage.s1{ animation-delay:.08s; } .hv-stage.s2{ animation-delay:.18s; }
.hv-stage.s3{ animation-delay:.3s; }  .hv-stage.s4{ animation-delay:.42s; }
.hv-stage.s5{ animation-delay:.54s; } .hv-stage.s6{ animation-delay:.5s; }

.hv-badge{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green-300); background:rgba(11,26,43,.55); border:1px solid rgba(160,178,88,.45); padding:9px 17px; border-radius:100px; backdrop-filter:blur(10px); box-shadow:0 6px 20px -8px rgba(0,0,0,.5); }
body.rtl .hv-badge{ letter-spacing:0; text-transform:none; font-size:14px; }
.hv-badge .hb-dot{ width:7px; height:7px; border-radius:50%; background:var(--green-400); box-shadow:0 0 0 0 rgba(160,178,88,.6); animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(160,178,88,.5);} 70%{box-shadow:0 0 0 9px rgba(160,178,88,0);} 100%{box-shadow:0 0 0 0 rgba(160,178,88,0);} }

.hv-title{ font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; line-height:1.05;
  font-size:clamp(40px,5.4vw,68px); margin:22px 0 0; color:#fff; text-wrap:balance; }
.hv-title .accent{ color:var(--green-400); }
body.rtl .hv-title{ letter-spacing:0; line-height:1.25; }
.hv-sub{ color:rgba(255,255,255,.85); font-size:clamp(16.5px,1.4vw,19px); line-height:1.65; max-width:520px; margin:20px 0 0; }
.hv-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.hv-avail{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:30px;
  font-family:var(--font-display); font-weight:700; font-size:13px; color:rgba(255,255,255,.75); }
.hv-avail b{ color:#fff; font-size:15px; }
.hv-avail .sep{ width:1px; height:16px; background:rgba(255,255,255,.3); }

/* product-UI zone (Vetster's floating phone/cards) */
.hv-zone{ position:relative; display:flex; justify-content:center; }
.chat-preview{ width:min(380px,100%); background:#fff; border-radius:24px; box-shadow:var(--shadow-float); overflow:hidden; position:relative; z-index:2; }
.cp-head{ display:flex; align-items:center; gap:11px; padding:14px 16px; background:var(--navy-700); color:#fff; }
.cp-avatar{ width:36px; height:36px; border-radius:10px; background:#fff; padding:3px; }
.cp-meta{ display:flex; flex-direction:column; line-height:1.25; }
.cp-meta strong{ font-size:14px; font-family:var(--font-display); }
.cp-meta span{ font-size:11.5px; opacity:.85; display:flex; align-items:center; gap:5px; }
.cp-body{ padding:16px 15px 18px; display:flex; flex-direction:column; gap:10px; background:linear-gradient(180deg,#f7fafc,#fff); }
.cp-bubble{ font-size:13.5px; padding:11px 14px; border-radius:14px; max-width:90%; line-height:1.5; color:var(--ink); }
.cp-ai{ background:var(--bg-soft); border:1px solid var(--line); border-bottom-inline-start-radius:5px; align-self:flex-start; }
.cp-quick{ display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.cp-quick span{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--navy-700);
  background:#fff; border:1px solid var(--line); padding:11px 13px; border-radius:12px; box-shadow:0 1px 3px rgba(22,49,79,.05); }
.cp-quick svg{ color:var(--green-700); flex:none; }
.cp-typing{ display:flex; align-items:center; gap:6px; padding:4px 4px 0; }
.cp-typing span{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:bounce 1.2s infinite; }
.cp-typing span:nth-child(2){ animation-delay:.15s; } .cp-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }

/* floating chips (Vetster's appointment cards) */
.hv-float{ position:absolute; z-index:3; background:#fff; border-radius:16px; box-shadow:var(--shadow-float);
  padding:13px 18px; display:flex; flex-direction:column; line-height:1.15; animation:floatY 5.5s ease-in-out infinite; }
.hv-float b{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--navy-700); }
.hv-float small{ font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
body.rtl .hv-float small{ letter-spacing:0; text-transform:none; font-size:12px; }
.hv-float .dotrow{ display:flex; align-items:center; gap:6px; }
.hv-float .dotrow i{ width:8px; height:8px; border-radius:50%; background:#5fd07a; }
/* both chips sit on the LOWER half so they never cover the card header */
.hv-float.f1{ bottom:64px; inset-inline-start:-26px; animation-delay:.6s; }
.hv-float.f2{ bottom:-22px; inset-inline-end:-16px; }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* ============================================================ Navy strip under hero (Vetster press band) */
.mq-band{ background:var(--navy-800); padding:17px 0; overflow:hidden; position:relative; z-index:4; border-top:1px solid rgba(255,255,255,.06); }
.mq{ overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track{ display:flex; width:max-content; animation:marquee 30s linear infinite; color:rgba(255,255,255,.6); }
.mq:hover .mq-track{ animation-play-state:paused; }
.mq-item{ display:inline-flex; align-items:center; gap:28px; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase; padding-inline-end:28px; white-space:nowrap; }
body.rtl .mq-item{ font-family:var(--font-body); letter-spacing:.02em; text-transform:none; font-size:14.5px; }
.mq-sep{ color:var(--green-400); font-size:13px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
body.rtl .mq-track{ animation-name:marquee-rtl; }
@keyframes marquee-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }

/* ============================================================ Section head — centered bold navy (Vetster) */
.sec-head{ max-width:720px; margin-bottom:54px; margin-inline:auto; text-align:center; }
.kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-700); justify-content:center; }
body.rtl .kicker{ font-family:var(--font-body); letter-spacing:0; text-transform:none; font-size:15px; }
.kicker-line{ width:30px; height:2px; background:var(--accent); border-radius:2px; }
.sec-title{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; line-height:1.12; color:var(--navy-700); font-size:clamp(30px,3.9vw,46px); margin:16px 0 0; text-wrap:balance; }
body.rtl .sec-title{ letter-spacing:0; line-height:1.32; }
.sec-sub{ color:var(--muted); font-size:17.5px; margin:16px auto 0; line-height:1.7; max-width:600px; }

/* ============================================================ Services — light tile cards (Vetster 3-up style) */
.services{ background:var(--bg-soft); }
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.svc-card{ position:relative; background:#fff; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-card); height:100%; transition:box-shadow .35s var(--ease), transform .35s var(--ease); }
.svc-card:hover{ box-shadow:var(--shadow-card-h); transform:translateY(-5px); }
.svc-media{ position:relative; height:168px; overflow:hidden; }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.svc-card:hover .svc-media img{ transform:scale(1.05); }
.svc-tag{ position:absolute; top:12px; inset-inline-start:12px; font-family:var(--font-display); font-weight:800; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-700); background:rgba(255,255,255,.92); backdrop-filter:blur(6px); padding:6px 12px; border-radius:100px; box-shadow:0 2px 8px rgba(13,31,51,.12); }
body.rtl .svc-tag{ font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:12px; }
.svc-body{ padding:20px 22px 24px; position:relative; }
.svc-ico{ position:absolute; top:-24px; inset-inline-end:18px; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--accent); color:#15200a; box-shadow:0 10px 22px -6px rgba(135,154,60,.55); }
.svc-body h3{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--navy-700); margin:0 0 9px; letter-spacing:-.01em; }
body.rtl .svc-body h3{ letter-spacing:0; }
.svc-body p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.6; }
.svc-more{ display:inline-flex; margin-top:16px; color:var(--green-700); transition:transform .3s var(--ease); }
.svc-card:hover .svc-more{ transform:translateX(4px); }
body.rtl .svc-card:hover .svc-more{ transform:translateX(-4px); }

/* ============================================================ Stats — white, navy numerals (Vetster trust strip) */
.stats-band{ position:relative; overflow:hidden; background:#fff; color:var(--ink); padding:clamp(52px,6.5vw,84px) 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; z-index:2; }
.stat-item{ text-align:center; padding:8px 20px; position:relative; }
.stat-item + .stat-item::before{ content:""; position:absolute; inset-inline-start:0; top:14%; bottom:14%; width:1px; background:var(--line); }
.stat-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(40px,4.8vw,62px); color:var(--navy-700); line-height:1; letter-spacing:-.02em; }
.stat-label{ font-family:var(--font-display); font-weight:700; color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-top:12px; }
body.rtl .stat-label{ letter-spacing:0; text-transform:none; font-size:14px; }

/* ============================================================ Pricing */
.pricing{ background:var(--bg-soft); }
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.price-card{ background:#fff; border-radius:24px; padding:36px 32px 34px; height:100%; display:flex; flex-direction:column; box-shadow:var(--shadow-card); position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.price-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card-h); }
.price-card.featured{ background:var(--navy-700); color:#fff; box-shadow:0 30px 70px -20px rgba(13,31,51,.5); }
.price-card.featured h3{ color:#fff; }
.price-pop{ position:absolute; top:20px; inset-inline-end:22px; font-family:var(--font-display); font-weight:800; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#15200a; background:var(--accent); padding:6px 13px; border-radius:100px; }
body.rtl .price-pop{ font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:12.5px; }
.price-top h3{ font-family:var(--font-display); font-weight:800; font-size:24px; margin:0 0 7px; letter-spacing:-.01em; }
.price-for{ font-size:14px; color:var(--muted); margin:0; }
.price-card.featured .price-for{ color:rgba(255,255,255,.72); }
.price-amount{ margin:24px 0 22px; display:flex; flex-direction:column; gap:10px; }
.price-soon{ font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--green-700); letter-spacing:-.01em; }
.price-card.featured .price-soon{ color:var(--green-300); }
.price-bar{ height:5px; width:66px; border-radius:100px; background:repeating-linear-gradient(90deg, var(--accent) 0 9px, transparent 9px 15px); opacity:.5; }
.price-feats{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:13px; flex:1; }
.price-feats li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; line-height:1.45; color:var(--ink); }
.price-card.featured .price-feats li{ color:rgba(255,255,255,.92); }
.pf-check{ flex:none; margin-top:2px; color:var(--green-600); }
.price-card.featured .pf-check{ color:var(--green-300); }
.price-btn{ width:100%; }
.price-card.featured .btn-outline{ color:#fff; border-color:rgba(255,255,255,.5); }
.price-card.featured .btn-outline:hover{ background:#fff; color:var(--navy-700); border-color:#fff; }

/* ============================================================ About */
.about{ background:#fff; }
.about-grid{ display:grid; grid-template-columns:1fr 1.02fr; gap:68px; align-items:center; }
.about .sec-head{ margin-inline:0; text-align:start; max-width:none; }
.about .kicker{ justify-content:flex-start; }
.about-media{ position:relative; }
.am-main{ border-radius:26px; overflow:hidden; box-shadow:var(--shadow-card-h); }
.am-main img{ width:100%; height:450px; object-fit:cover; transition:transform .8s var(--ease); }
.about-media:hover .am-main img{ transform:scale(1.03); }
.am-2,.am-3{ position:absolute; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-float); border:5px solid #fff; }
.am-2{ width:156px; height:156px; bottom:-32px; inset-inline-end:-24px; }
.am-2 img,.am-3 img{ width:100%; height:100%; object-fit:cover; }
.am-3{ width:122px; height:122px; top:-28px; inset-inline-start:-24px; }
.am-badge{ position:absolute; bottom:34px; inset-inline-start:-24px; background:#fff; border-radius:16px; padding:14px 18px; box-shadow:var(--shadow-float); display:flex; flex-direction:column; line-height:1.1; }
.am-badge svg{ color:var(--green-700); margin-bottom:7px; }
.am-badge b{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--navy-700); }
.am-badge span{ font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
body.rtl .am-badge span{ letter-spacing:0; text-transform:none; font-size:12.5px; }
.about-lead{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,1.7vw,21px); color:var(--navy-700); line-height:1.5; margin:18px 0 0; letter-spacing:-.01em; }
body.rtl .about-lead{ font-weight:800; letter-spacing:0; }
.about-body{ color:var(--muted); font-size:17.5px; margin:16px 0 10px; line-height:1.75; }
.about-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.about-points{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.about-points li{ display:flex; align-items:flex-start; gap:13px; font-size:16px; color:var(--ink); line-height:1.5; }
.ap-check{ flex:none; width:26px; height:26px; border-radius:100px; background:rgba(135,154,60,.16); color:var(--green-700); display:grid; place-items:center; margin-top:1px; }

/* ============================================================ How — clean steps on light */
.how{ background:var(--bg-soft); }
.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
.how-rail{ position:absolute; top:31px; inset-inline:10%; height:2px; background:repeating-linear-gradient(90deg, rgba(22,49,79,.18) 0 10px, transparent 10px 18px); z-index:0; }
.how-step{ position:relative; z-index:1; text-align:center; }
.how-num{ width:62px; height:62px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:21px; color:#fff; background:var(--navy-700); box-shadow:0 12px 26px -8px rgba(22,49,79,.45); border:5px solid var(--bg-soft); }
.how-card{ background:#fff; border-radius:20px; padding:26px 24px; box-shadow:var(--shadow-card); height:100%; transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.how-step:hover .how-card{ box-shadow:var(--shadow-card-h); transform:translateY(-3px); }
.how-card h3{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--navy-700); margin:0 0 10px; }
.how-card p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.65; }

/* ============================================================ CTA */
.cta-sec{ background:#fff; }
.cta-card{ position:relative; overflow:hidden; background:linear-gradient(165deg, var(--navy-600), var(--navy-800)); border-radius:32px; padding:clamp(56px,7vw,88px) 40px; text-align:center; box-shadow:0 34px 80px -24px rgba(13,31,51,.5); }
.cta-pattern{ position:absolute; inset:0; opacity:.4;
  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:44px 44px; -webkit-mask-image:radial-gradient(circle at 50% 40%, #000, transparent 72%); mask-image:radial-gradient(circle at 50% 40%, #000, transparent 72%); }
.cta-mark{ width:82px; height:82px; object-fit:contain; margin:0 auto 24px; position:relative; z-index:2; opacity:.96; }
.cta-title{ position:relative; z-index:2; font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; color:#fff; font-size:clamp(30px,4.4vw,50px); max-width:20ch; margin:0 auto; line-height:1.14; text-wrap:balance; }
body.rtl .cta-title{ letter-spacing:0; line-height:1.32; }
.cta-sub{ position:relative; z-index:2; color:rgba(255,255,255,.8); font-size:17.5px; max-width:560px; margin:20px auto 34px; line-height:1.7; }
.cta-card .btn-green{ position:relative; z-index:2; }
.cta-card .glow-green.big{ inset-inline-end:auto; inset-inline-start:50%; transform:translateX(-50%); top:auto; bottom:-300px; opacity:.4; }

/* ============================================================ Footer */
.footer{ background:var(--navy-900); color:rgba(255,255,255,.68); padding:64px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .brand-mark{ width:46px; height:46px; }
.footer-brand p{ margin:16px 0 0; max-width:300px; font-size:14.5px; line-height:1.7; }
.footer-col h4{ font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.92); margin:0 0 16px; }
body.rtl .footer-col h4{ font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14.5px; color:rgba(255,255,255,.62); transition:color .2s; }
.footer-col a:hover{ color:var(--green-300); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:18px; padding-top:24px; font-size:13.5px; color:rgba(255,255,255,.5); flex-wrap:wrap; }
.foot-disc{ display:inline-flex; align-items:center; gap:8px; }
.foot-disc svg{ color:var(--green-400); }

/* ============================================================ Chat widget (functionality untouched) */
.chat-fab{ position:fixed; bottom:26px; inset-inline-end:26px; z-index:70; width:60px; height:60px; border-radius:50%; border:none; background:var(--accent); color:#15200a; display:grid; place-items:center; box-shadow:0 16px 38px -8px rgba(135,154,60,.6); transition:transform .25s var(--ease), opacity .25s, filter .25s; }
.chat-fab:hover{ transform:scale(1.06); filter:brightness(1.06); }
.chat-fab:active{ transform:scale(.95); }
.chat-fab.hidden{ opacity:0; pointer-events:none; transform:scale(.7); }
.fab-ping{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--green-400); animation:ping 2.4s ease-out infinite; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.45); opacity:0; } }
.chat-backdrop{ position:fixed; inset:0; z-index:69; background:rgba(13,31,51,.32); backdrop-filter:blur(3px); display:none; animation:fadeIn .25s var(--ease) both; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.chat-panel{ position:fixed; bottom:26px; inset-inline-end:26px; z-index:71; width:384px; max-width:calc(100vw - 36px); height:566px; max-height:calc(100vh - 52px); background:#fff; border-radius:24px; box-shadow:0 40px 90px -20px rgba(13,31,51,.45), 0 0 0 1px rgba(22,49,79,.06); display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(14px) scale(.97); pointer-events:none; transition:opacity .24s var(--ease), transform .24s var(--ease); transform-origin:bottom right; }
body.rtl .chat-panel{ transform-origin:bottom left; }
.chat-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.chat-head{ display:flex; align-items:center; gap:12px; padding:15px 16px; background:var(--navy-700); color:#fff; }
.chat-avatar{ width:40px; height:40px; border-radius:12px; background:#fff; padding:4px; flex:none; }
.chat-meta{ display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0; }
.chat-meta strong{ font-family:var(--font-display); font-size:15px; }
.chat-meta span{ font-size:11.5px; opacity:.85; display:flex; align-items:center; gap:6px; }
.live-dot{ width:7px; height:7px; border-radius:50%; background:#5fd07a; display:inline-block; box-shadow:0 0 0 0 rgba(95,208,122,.6); animation:pulse 2s infinite; }
.chat-body{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:11px; background:linear-gradient(180deg,var(--bg-soft),#fff); }
.bubble{ font-size:14px; line-height:1.55; padding:11px 14px; border-radius:16px; max-width:84%; animation:bubbleIn .3s var(--ease) both; color:var(--ink); }
@keyframes bubbleIn{ from{ opacity:0; transform:translateY(6px); filter:blur(3px); } to{ opacity:1; transform:none; filter:blur(0); } }
.bubble.ai{ background:#fff; align-self:flex-start; border-bottom-inline-start-radius:5px; box-shadow:var(--shadow-card); }
.bubble.user{ background:var(--navy-700); color:#fff; align-self:flex-end; border-bottom-inline-end-radius:5px; }
.bubble.typing{ display:flex; gap:5px; align-self:flex-start; }
.bubble.typing span{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:bounce 1.2s infinite; }
.bubble.typing span:nth-child(2){ animation-delay:.15s; } .bubble.typing span:nth-child(3){ animation-delay:.3s; }
.chat-quick{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.chat-quick button{ display:flex; align-items:center; gap:10px; text-align:start; background:#fff; border:1px solid var(--line); color:var(--navy-700); font-weight:700; font-size:13.5px; padding:12px 14px; border-radius:14px; transition:border-color .2s, background .2s, transform .2s var(--ease); }
.chat-quick button:hover{ border-color:rgba(135,154,60,.5); background:rgba(135,154,60,.06); transform:translateY(-1px); }
.chat-quick button:active{ transform:scale(.98); }
.chat-quick svg{ color:var(--green-700); flex:none; }
.chat-input{ display:flex; align-items:center; gap:9px; padding:12px 13px; border-top:1px solid var(--line); background:#fff; }
.chat-input input{ flex:1; border:1px solid var(--line); background:var(--bg-soft); border-radius:100px; padding:12px 17px; font-family:inherit; font-size:14px; color:var(--ink); outline:none; transition:border-color .2s, box-shadow .2s, background .2s; }
.chat-input input:focus{ border-color:rgba(135,154,60,.6); box-shadow:0 0 0 3px rgba(135,154,60,.12); background:#fff; }
.chat-send{ flex:none; width:44px; height:44px; border-radius:50%; border:none; background:var(--accent); color:#15200a; display:grid; place-items:center; transition:filter .2s, transform .15s var(--ease); }
.chat-send:hover{ filter:brightness(1.07); }
.chat-send:active{ transform:scale(.92); }

/* ============================================================ Responsive */
@media (max-width:980px){
  .nav-links{ display:none; } .nav-cta{ display:none; } .nav-burger{ display:inline-grid; }
  .nav-mobile{ display:flex; }
  .hv-grid{ grid-template-columns:1fr; gap:54px; padding-top:120px; min-height:0; }
  .hv-zone{ padding-bottom:26px; }
  .hv-float.f1{ inset-inline-start:0; }
  .hv-float.f2{ inset-inline-end:0; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:32px 0; }
  .stat-item:nth-child(3)::before{ display:none; }
  .price-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .about-grid{ grid-template-columns:1fr; gap:84px; }
  .how-grid{ grid-template-columns:1fr; gap:28px; } .how-rail{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding:0 20px; }
  .svc-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; gap:28px; }
  .stat-item + .stat-item::before{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .hv-title{ font-size:clamp(34px,9.4vw,44px); }
  .hv-float{ display:none; }
  .chat-panel{ bottom:0; inset-inline:0; width:100%; max-width:100%; height:82vh; border-radius:24px 24px 0 0; }
  .chat-fab{ bottom:18px; inset-inline-end:18px; }
}

/* ============================================================ Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.1ms !important; }
  html{ scroll-behavior:auto; }
  .hv-bg img{ transform:scale(1.04); animation:none; }
  .hv-float{ animation:none; }
  .mq-track{ animation:none; transform:none; }
  .fab-ping,.live-dot,.hb-dot{ animation:none; }
}