@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@400;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap');
:root{--paper:#f7f6ee;--ink:#102920;--pine:#12382c;--muted:#4b6257;--line:#d6ddd2;--mint:#d6f5b4}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font:500 16px/1.85 "Noto Sans Arabic",Tahoma,sans-serif}a{color:inherit;text-decoration:none}button,select,textarea{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #4c8c56;outline-offset:4px}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.35}p{color:var(--muted)}.wrap{width:min(1180px,calc(100% - 72px));margin-inline:auto}.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:76px}header,footer{border-block-end:1px solid var(--line)}nav{display:flex;gap:28px;font-size:14px}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800}.mark{display:inline-grid;place-items:center;width:35px;height:35px;border-radius:10px;background:var(--pine);color:var(--mint);font-size:23px;line-height:1}.hero,.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.hero{padding-block:72px 78px}.eyebrow{font-size:13px;font-weight:800;color:#39734e;margin-bottom:13px}.hero h1{font-size:clamp(38px,5.1vw,73px);font-weight:800;line-height:1.22}.hero em{font-style:normal;color:#34744c}.hero-copy>p:not(.eyebrow){max-width:40ch;margin-top:22px}.actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:28px}.button,.secondary{display:inline-flex;align-items:center;gap:10px;border-radius:9px;font-weight:700;font-size:14px}.button{background:var(--pine);color:#fff;padding:12px 17px;border:1px solid transparent}.button:hover{background:#24563f}.secondary{border:0;background:transparent;color:inherit;text-decoration:underline;text-underline-offset:5px;padding:5px 0}.hero figure{background:#142f25;border-radius:20px;overflow:hidden;box-shadow:0 18px 45px #1029201c}.hero img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.hero figcaption{padding:13px 20px;color:#e2f4d8;font-size:13px}.hero figcaption b{color:#a2cd80;margin-inline:8px}.section{padding-block:64px;border-top:1px solid var(--line)}h2{font-size:clamp(29px,4vw,51px);font-weight:800}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}.grid article{background:#fffdf6;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px}.grid h3{font-size:19px}.grid p{font-size:14px}.grid a{font-size:13px;font-weight:800;color:#34744c;margin-top:auto;padding-top:7px}.symbol{display:grid;place-items:center;width:39px;height:39px;border-radius:9px;background:#e8f1df;color:#29583e;font-size:23px}.demo{background:#103329;color:#fff;padding-block:65px}.demo .eyebrow,.demo .secondary{color:var(--mint)}.demo p{color:#dbebde}.demo .split>div:first-child p:not(.eyebrow),.quote .split p,.quote h2+p{margin:15px 0}.chat{background:#f4f6ec;color:var(--ink);padding:18px;border-radius:16px}.chat-head{display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);padding-bottom:11px}.chat #messages{display:grid;gap:7px;min-height:110px;align-content:start;padding:12px 0}.chat p.bubble{color:var(--ink);background:#e3eadf;border-radius:10px;padding:7px 12px;width:fit-content;font-size:14px}.chat p.visitor{background:#d6f5b4;margin-inline-start:auto}.choices{display:flex;gap:8px;flex-wrap:wrap}.choices button{border:1px solid #b8cfb9;background:white;border-radius:8px;padding:5px 10px;color:var(--pine);font-size:13px}.quote{align-items:start}.quote form{padding:20px;background:#fffdf6;border:1px solid var(--line);border-radius:14px}label{display:block;margin-bottom:12px;font-weight:700;font-size:14px}select,textarea{display:block;width:100%;padding:9px 11px;margin-top:4px;border:1px solid #a9b9ad;border-radius:8px;background:#fff;color:var(--ink)}textarea{resize:vertical}#result{margin-top:12px}.whatsapp-request{margin-inline-start:14px}#status{font-size:13px;margin-top:6px}footer{border-block-start:1px solid var(--line);border-block-end:0}footer a{font-size:14px}[hidden]{display:none!important}
@media(max-width:850px){.grid{grid-template-columns:repeat(2,1fr)}.hero,.split{gap:28px}.wrap{width:calc(100% - 44px)}}
@media(max-width:610px){.wrap{width:calc(100% - 32px)}.nav{min-height:65px;flex-wrap:wrap;gap:7px;padding-block:9px}.nav nav{width:100%;gap:17px}.hero,.split{grid-template-columns:1fr}.hero,.section,.demo{padding-block:40px}.grid{grid-template-columns:1fr}.hero h1{font-size:43px}.grid article{padding:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dark interface, with the service cards and booking demo as distinct surfaces. */
:root {
  color-scheme: dark;
  --paper: #090f1b;
  --ink: #edf5ff;
  --pine: #69f0c4;
  --muted: #adbed1;
  --line: #29384e;
  --mint: #82f5d0;
}
body {
  background:
    radial-gradient(ellipse at 12% 7%, #133a4d 0, transparent 38rem),
    var(--paper);
}
header { background: #0a1321; }
nav a:hover, .secondary:hover { color: var(--mint); }
.mark { background: #182c3c; color: var(--mint); border: 1px solid #37566a; }
.hero {
  position: relative;
  isolation: isolate;
  min-height: 540px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#577b9b24 1px, transparent 1px), linear-gradient(90deg, #577b9b24 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 23% 45%, #000, transparent 64%);
  pointer-events: none;
}
.eyebrow, .hero em, .grid a { color: var(--mint); }
.hero h1 { font-size: clamp(37px, 4.3vw, 62px); }
.hero figure {
  background: #101c2d;
  border: 1px solid #3a5368;
  box-shadow: 0 16px 48px #02070c9c;
}
.hero figcaption { color: #c3d2e3; }
.hero figcaption b { color: var(--mint); }
.button { background: var(--pine); color: #09231f; }
.button:hover { background: #a2ffdf; }
.whatsapp-button {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  border: 1px solid #407962;
  border-radius: 9px;
  color: var(--mint);
  font-size: 14px;
  font-weight: 700;
}
.whatsapp-button:hover { background: #15382f; }
.grid article, .quote form {
  background: linear-gradient(155deg, #152337, #0e1726);
}
.grid article:hover { border-color: #4d837a; }
.symbol { background: #1b3847; color: var(--mint); }
.demo { background: #0d1929; border-block: 1px solid var(--line); }
.demo p { color: var(--muted); }
.chat { background: #131f30; border: 1px solid #354a64; }
.chat p.bubble { background: #22334b; }
.chat p.visitor { background: #174e45; }
.choices button { background: #182b3b; border-color: #48756f; color: var(--mint); }
select, textarea { background: #0b1423; border-color: #536781; }
textarea::placeholder { color: #9bacbf; }
@media (max-width: 610px) {
  .hero { min-height: 0; }
  .hero h1 { font-size: clamp(33px, 8vw, 43px); }
}

.whatsapp-button {
  gap: 8px;
  min-height: 46px;
  background: #25d366;
  border-color: transparent;
  color: #062315;
  padding: 10px 16px;
  font-weight: 800;
}
.whatsapp-button:hover { background: #55e98b; }
.whatsapp-icon { display: block; flex: none; }
.whatsapp-float {
  position: fixed;
  inset-inline-end: max(16px, env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  color: white;
  background: #087e45;
  box-shadow: 0 6px 24px #0008;
}
.whatsapp-float:hover { background: #076a3b; }
body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }