/* ============================================================
   Homzy shared design system — petrol on navy/cream, Cairo.
   Used by every web page (landing sections split into pages,
   the browse app, and the shared header/footer/chat widget).
   ============================================================ */
:root{
  --navy:#0B1D36; --navy-2:#122744;
  --teal:#0B5563; --teal-d:#08414C; --teal-l:#E2EEF0; --teal-on-navy:#3F9AAA;
  --cream:#F7F2EE; --card:#FFFFFF;
  --green:#22C55E; --amber:#F59E0B; --muted:#6B7280;
  --line:#EBE5DE; --line-2:#E2DAD1;
  --shadow:0 18px 50px rgba(11,29,54,.13); --shadow-sm:0 6px 20px rgba(11,29,54,.08);
  --r:18px;
  --ff:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
  --fd:"Poppins","Cairo",sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* overflow-x:clip (not hidden) prevents horizontal scroll WITHOUT making <body> a
   scroll container — which would break the sticky navbar (position:sticky). */
body{margin:0; font-family:var(--ff); color:var(--navy); background:var(--cream); line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0; line-height:1.2; font-weight:800;}
p{margin:0;} a{color:inherit; text-decoration:none;} img{display:block; max-width:100%;}
.wrap{max-width:1160px; margin:0 auto; padding:0 22px;}
.section{padding:74px 0;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:var(--teal-d); background:var(--teal-l); padding:6px 14px; border-radius:100px;}
.sec-head{text-align:center; max-width:680px; margin:0 auto 44px;}
.sec-head h1,.sec-head h2{font-size:clamp(26px,3.4vw,38px); margin-top:14px;}
.sec-head p{color:#40506a; font-size:17px; margin-top:14px;}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--ff); font-weight:700; font-size:15px; cursor:pointer; padding:13px 22px; border-radius:14px; border:1.5px solid transparent; transition:transform .12s, box-shadow .2s, background .2s, border-color .2s; white-space:nowrap;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-teal{background:var(--teal); color:#fff; box-shadow:0 10px 24px rgba(11,85,99,.28);}
.btn-teal:hover{background:var(--teal-d);}
.btn-navy{background:var(--navy); color:#fff;} .btn-navy:hover{background:var(--navy-2);}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--line-2);} .btn-ghost:hover{border-color:var(--navy);}
.btn-wa{background:var(--green); color:#fff;}
.btn-sm{padding:11px 18px; font-size:14px; border-radius:12px;}

/* ============================================================
   Header / navbar (redesigned) — clean, premium, RTL, sticky
   ============================================================ */
/* the #hz-header wrapper must not box the header, or position:sticky would be
   constrained to the wrapper's (tiny) height and scroll away immediately. */
#hz-header{display:contents;}
header.hz-nav{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.9); backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--line); transition:box-shadow .2s, background .2s;}
header.hz-nav.scrolled{background:rgba(255,255,255,.97); box-shadow:0 4px 22px -16px rgba(11,29,54,.3);}
.hz-nav-in{display:flex; align-items:center; gap:12px; height:70px;}
.hz-logo{display:flex; align-items:center; gap:10px; font-weight:800; flex:none;}
.hz-logo .mk{width:36px; height:36px; flex:none;}
.hz-logo .nm{font-size:20px; font-family:var(--fd); letter-spacing:-.5px;} .hz-logo .nm b{color:var(--teal);}

/* center navigation */
.hz-links{display:flex; align-items:center; gap:2px; margin-inline:12px;}
.hz-navlink{font-weight:600; font-size:14.5px; color:var(--navy); opacity:.74; padding:8px 13px; border-radius:10px; position:relative; white-space:nowrap; transition:opacity .15s, background .15s, color .15s;}
.hz-navlink:hover{opacity:1; background:rgba(11,85,99,.06);}
.hz-navlink.active{opacity:1; color:var(--teal-d); font-weight:800; background:rgba(11,85,99,.08);}
.hz-navlink.active::after{content:""; position:absolute; inset-inline:13px; bottom:3px; height:2px; border-radius:2px; background:var(--teal);}

/* right cluster */
.hz-nav-cta{margin-inline-start:auto; display:flex; align-items:center; gap:8px; flex:none;}
.hz-lang{font-family:var(--ff); font-weight:700; font-size:13px; cursor:pointer; background:#fff; border:1px solid var(--line-2); border-radius:10px; padding:0 11px; height:40px; color:var(--navy); transition:border-color .15s, background .15s;}
.hz-lang:hover{border-color:var(--navy); background:var(--teal-l);}
.hz-crm-entry{display:none;align-items:center;justify-content:center;height:40px;padding:0 10px;border:1px solid var(--line-2);border-radius:10px;color:var(--teal-d);font:700 13px var(--ff);white-space:nowrap;}

/* icon buttons (bell) */
.hz-bell{position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; cursor:pointer; background:#fff; border:1px solid var(--line-2); border-radius:11px; color:var(--navy); transition:border-color .15s, background .15s;}
.hz-bell:hover{border-color:var(--navy); background:var(--teal-l);}
.hz-bell[hidden]{display:none;}   /* class display must not override the hidden attr */
.hz-bell svg{width:20px; height:20px;}
.hz-bell-badge{position:absolute; top:-5px; inset-inline-end:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:100px; background:#E5484D; color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; font-family:var(--ff); box-shadow:0 0 0 2px #fff;}

/* login button */
.hz-login{font-family:var(--ff); font-weight:800; font-size:14px; cursor:pointer; background:var(--navy); border:1px solid var(--navy); border-radius:11px; padding:0 16px; height:40px; display:inline-flex; align-items:center; color:#fff; transition:background .15s;}
.hz-login:hover{background:var(--navy-2);}

/* product switcher + profile */
.hz-prod,.hz-prof{position:relative;}
.hz-prod-btn{display:inline-flex; align-items:center; gap:7px; height:40px; font-family:var(--ff); font-weight:700; font-size:13.5px; color:var(--navy); background:#fff; border:1px solid var(--line-2); border-radius:11px; padding:0 11px; cursor:pointer; transition:border-color .15s, background .15s;}
.hz-prod-btn:hover{border-color:var(--navy); background:var(--teal-l);}
.hz-prod-btn .pi{display:inline-flex; color:var(--teal-d);} .hz-prod-btn .pi svg{width:17px; height:17px;}
.hz-prod-btn .pn{white-space:nowrap;}
.hz-prod-btn .chev{width:15px; height:15px; opacity:.55; transition:transform .18s;}
.hz-prod.open .hz-prod-btn .chev{transform:rotate(180deg);}

.hz-prof-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer; padding:0; background:none;}
.hz-prof-btn .av{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,var(--navy),var(--teal)); color:#fff; font-weight:800; font-size:15px; font-family:var(--fd); box-shadow:0 0 0 1px var(--line-2); transition:box-shadow .15s;}
.hz-prof-btn:hover .av{box-shadow:0 0 0 2px var(--teal);}

/* dropdown menus (shared) — subtle entrance, no layout shift */
.hz-menu{position:absolute; top:calc(100% + 9px); inset-inline-end:0; min-width:232px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px -22px rgba(11,29,54,.42); padding:6px; z-index:90; opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top; pointer-events:none; transition:opacity .16s ease, transform .16s ease;}
.hz-menu.open{opacity:1; transform:none; pointer-events:auto;}
.hz-menu-item{display:flex; align-items:center; gap:11px; width:100%; text-align:start; font-family:var(--ff); font-weight:700; font-size:14px; color:var(--navy); background:none; border:none; border-radius:10px; padding:10px 11px; cursor:pointer; text-decoration:none; transition:background .13s;}
.hz-menu-item:hover{background:var(--teal-l);}
.hz-menu-item .mi{display:inline-flex; color:var(--teal-d);} .hz-menu-item .mi svg{width:18px; height:18px;}
.hz-menu-item.accent{color:var(--teal-d);} .hz-menu-item.accent .mi{color:var(--teal);}
.hz-menu-item.danger{color:#B42318;} .hz-menu-item.danger .mi{color:#B42318;}
.hz-menu-item.danger:hover{background:#FDECEA;}
.hz-menu-sep{height:1px; background:var(--line); margin:5px 6px;}
.hz-menu-row{display:flex; align-items:center; gap:12px; padding:11px; border-radius:11px; text-decoration:none; transition:background .13s;}
.hz-menu-row:hover,.hz-menu-row.on{background:var(--teal-l);}
.hz-menu-row .ri{display:inline-flex; width:34px; height:34px; border-radius:9px; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line-2); color:var(--teal-d); flex:none;} .hz-menu-row .ri svg{width:19px; height:19px;}
.hz-menu-row .rt{display:flex; flex-direction:column; line-height:1.25;} .hz-menu-row .rt b{font-size:14px; color:var(--navy);} .hz-menu-row .rt small{font-size:11.5px; color:var(--muted);}
.hz-menu-row .dot{margin-inline-start:auto; width:8px; height:8px; border-radius:50%; background:var(--teal); flex:none;}
.hz-prof-head{display:flex; align-items:center; gap:11px; padding:10px 11px 12px; margin-bottom:4px; border-bottom:1px solid var(--line);}
.hz-prof-head .av.lg,.hz-draw-prof .av.lg{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,var(--navy),var(--teal)); color:#fff; font-weight:800; font-size:17px; font-family:var(--fd); flex:none;}
.hz-prof-head .pn,.hz-draw-prof .pn{display:flex; flex-direction:column; line-height:1.3;} .hz-prof-head .pn b,.hz-draw-prof .pn b{font-size:14.5px; color:var(--navy);} .hz-prof-head .pn small,.hz-draw-prof .pn small{font-size:12px; color:var(--muted);}

/* notifications dropdown */
.hz-notif{position:fixed; top:78px; inset-inline-end:14px; width:min(340px,calc(100vw - 28px)); background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px -24px rgba(11,29,54,.45); z-index:90; overflow:hidden; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .16s ease, transform .16s ease;}
.hz-notif.open{opacity:1; transform:none; pointer-events:auto;}
.hz-notif-h{display:flex; align-items:center; justify-content:space-between; padding:12px 15px; border-bottom:1px solid var(--line); font-weight:800; color:var(--navy); font-size:14px;}
.hz-notif-h a{color:var(--teal-d); font-size:12.5px; font-weight:700; text-decoration:none;}
.hz-notif-list{max-height:60vh; overflow:auto;}
.hz-notif-item{display:flex; gap:10px; padding:11px 15px; border-bottom:1px solid var(--line);}
.hz-notif-item.unread{background:var(--teal-l);}
.hz-notif-item .i{font-size:17px; flex:none;}
.hz-notif-item .b .t{font-weight:800; color:var(--navy); font-size:13px;}
.hz-notif-item .b .m{color:#40506a; font-size:12px; margin-top:1px; line-height:1.5;}
.hz-notif-item .b .d{color:var(--muted); font-size:10.5px; margin-top:3px;}
.hz-notif-empty{padding:26px 15px; text-align:center; color:var(--muted); font-size:13px;}

/* CRM workspace sub-navigation */
.hz-crmsub{position:sticky; top:70px; z-index:58; background:#fff; border-bottom:1px solid var(--line);}
.hz-crmsub-in{display:flex; gap:2px; align-items:center; overflow-x:auto; scrollbar-width:none;}
.hz-crmsub-in::-webkit-scrollbar{display:none;}
.hz-crmtab{font-family:var(--ff); font-weight:700; font-size:14px; color:var(--muted); padding:13px 15px; white-space:nowrap; border-bottom:2.5px solid transparent; transition:color .15s, border-color .15s;}
.hz-crmtab:hover{color:var(--navy);}
.hz-crmtab.active{color:var(--teal-d); border-bottom-color:var(--teal);}

/* hamburger (mobile) */
.hz-menu-btn{display:none; background:#fff; border:1px solid var(--line-2); border-radius:11px; width:40px; height:40px; cursor:pointer; align-items:center; justify-content:center; color:var(--navy);}
.hz-menu-btn svg{width:22px; height:22px;}

/* mobile drawer */
.hz-draw-bk{position:fixed; inset:0; background:rgba(11,29,54,.45); z-index:95; opacity:0; pointer-events:none; transition:opacity .2s;}
.hz-draw-bk.open{opacity:1; pointer-events:auto;}
.hz-draw{position:fixed; top:0; bottom:0; width:min(320px,86vw); background:#fff; z-index:96; display:flex; flex-direction:column; padding:16px; transition:transform .24s cubic-bezier(.3,.9,.3,1); overflow-y:auto;}
/* explicit physical side + hide direction per writing direction (deterministic) */
html[dir="rtl"] .hz-draw{left:0; right:auto; transform:translateX(-101%); box-shadow:24px 0 60px -30px rgba(11,29,54,.5);}
html[dir="ltr"] .hz-draw{right:0; left:auto; transform:translateX(101%); box-shadow:-24px 0 60px -30px rgba(11,29,54,.5);}
.hz-draw.open{transform:translateX(0) !important;}
.hz-draw-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.hz-draw-x{width:38px; height:38px; border:1px solid var(--line-2); border-radius:10px; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--navy);} .hz-draw-x svg{width:20px; height:20px;}
.hz-draw-nav{display:flex; flex-direction:column; gap:2px;}
.hz-draw-link{display:flex; align-items:center; gap:11px; padding:13px 12px; border-radius:11px; font-weight:700; font-size:15.5px; color:var(--navy);}
.hz-draw-link svg{width:20px; height:20px; color:var(--teal-d);}
.hz-draw-link:hover{background:var(--teal-l);}
.hz-draw-link.active{background:var(--teal-l); color:var(--teal-d);}
.hz-draw-prod{display:flex; flex-direction:column; gap:2px; margin-top:8px; padding-top:10px; border-top:1px solid var(--line);}
.hz-draw-sep{height:1px; background:var(--line); margin:12px 0;}
.hz-draw-prof{display:flex; align-items:center; gap:11px; padding:6px 4px 12px;}
.hz-draw-item{display:flex; align-items:center; gap:11px; width:100%; text-align:start; padding:12px; border-radius:11px; font-family:var(--ff); font-weight:700; font-size:14.5px; color:var(--navy); background:none; border:none; cursor:pointer; text-decoration:none;}
.hz-draw-item svg{width:19px; height:19px; color:var(--teal-d);}
.hz-draw-item:hover{background:var(--teal-l);}
.hz-draw-item.accent{color:var(--teal-d);}
.hz-draw-item.danger{color:#B42318;} .hz-draw-item.danger svg{color:#B42318;}
.hz-draw-cta{display:block; text-align:center; background:var(--navy); color:#fff; font-weight:800; padding:13px; border-radius:12px; margin-top:4px;}
body.hz-noscroll{overflow:hidden;}

/* feedback modal */
.hz-fb-ov{position:fixed; inset:0; background:rgba(11,29,54,.5); z-index:120; display:flex; align-items:center; justify-content:center; padding:18px; opacity:0; pointer-events:none; transition:opacity .18s;}
.hz-fb-ov.open{opacity:1; pointer-events:auto;}
.hz-fb{background:#fff; border-radius:18px; width:min(460px,100%); padding:20px; box-shadow:0 30px 70px -30px rgba(11,29,54,.5); transform:translateY(8px) scale(.98); transition:transform .18s;}
.hz-fb-ov.open .hz-fb{transform:none;}
.hz-fb-h{display:flex; align-items:center; justify-content:space-between; font-size:17px; color:var(--navy);}
.hz-fb-x{width:34px; height:34px; border:none; background:var(--cream); border-radius:9px; cursor:pointer; color:var(--navy); display:flex; align-items:center; justify-content:center;} .hz-fb-x svg{width:18px; height:18px;}
.hz-fb-p{color:var(--muted); font-size:13.5px; margin:8px 0 12px; line-height:1.6;}
.hz-fb textarea{width:100%; border:1.5px solid var(--line-2); border-radius:12px; padding:11px; font-family:var(--ff); font-size:14px; resize:vertical; outline:none;}
.hz-fb textarea:focus{border-color:var(--teal);}
.hz-fb-msg{font-weight:800; font-size:13px; min-height:18px; margin:8px 0;}
.hz-fb-a{display:flex; gap:10px;} .hz-fb-a .btn{flex:1;}

/* Broker/client visibility toggles */
body[data-mode=client] .only-broker{display:none !important;}
body[data-mode=broker] .only-client{display:none !important;}

/* ---------- Footer ---------- */
footer.hz-foot{background:var(--navy); color:#fff; padding:52px 0 26px; margin-top:16px;}
.hz-foot-grid{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.hz-foot-brand{max-width:300px;}
.hz-foot-brand p{opacity:.7; font-size:14px; margin-top:12px;}
.hz-foot-col h4{font-size:14px; opacity:.6; font-weight:700; margin-bottom:12px; text-transform:uppercase; letter-spacing:.5px;}
.hz-foot-col a{display:block; opacity:.85; font-size:15px; margin-bottom:9px;}
.hz-foot-col a:hover{opacity:1; color:var(--teal-on-navy);}
.hz-foot-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:36px; padding-top:20px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; opacity:.65;}

/* ---------- Cards (features / cities / projects) ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.fcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px 22px; transition:transform .18s, box-shadow .18s, border-color .18s;}
.fcard:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent;}
.fic{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; background:var(--teal-l);}
.fcard h3{font-size:19px;} .fcard p{color:#5b6b82; font-size:15px; margin-top:9px;}
.ccard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:transform .16s, box-shadow .16s;}
.ccard:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm);}
.ccard .nm{font-weight:800; font-size:17px;} .ccard .co{font-size:13px; color:var(--muted);} .ccard .co b{color:var(--teal-d);}
.pcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; cursor:pointer; transition:transform .18s, box-shadow .18s;}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.pcard .img{height:180px; background:#e9e2da center/cover no-repeat; position:relative;}
.pcard .img .tag{position:absolute; top:12px; inset-inline-start:12px; background:rgba(11,29,54,.86); color:#fff; font-size:11px; font-weight:700; padding:5px 11px; border-radius:100px;}
.pcard .img .mk2{position:absolute; top:12px; inset-inline-end:12px; background:var(--teal); color:#fff; font-size:10px; font-weight:800; padding:4px 9px; border-radius:100px;}
.pcard .b{padding:16px 17px;} .pcard .b .nm{font-weight:800; font-size:17px; line-height:1.3;}
.pcard .b .dv{font-size:13px; color:var(--muted); margin-top:3px;}
.pcard .b .row{display:flex; align-items:center; gap:6px; margin-top:9px; font-size:13px; color:#40506a; flex-wrap:wrap;}
.pcard .b .row .pill{background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:3px 9px; font-weight:600;}
.pcard .b .pr{margin-top:9px; font-weight:800; color:var(--teal-d); font-size:15px;}
.pcard .img .mk2.rdy{background:#1E8E5A;} .pcard .img .mk2.off{background:#0B5563;}
.pcard .b .meta2{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; font-size:11.5px; color:var(--muted); flex-wrap:wrap;}
.pcard .b .meta2 .del{font-weight:600; color:#40506a;}
.pcard .b .det{margin-top:12px; width:100%; border:1.5px solid var(--teal); background:transparent; color:var(--teal-d); font-family:var(--ff); font-weight:800; font-size:13.5px; padding:9px 12px; border-radius:10px; cursor:pointer; transition:background .15s,color .15s;}
.pcard .b .det:hover{background:var(--teal); color:#fff;}
.skeleton{background:linear-gradient(100deg,#efe8e0 30%,#f6f1ea 50%,#efe8e0 70%); background-size:200% 100%; animation:sk 1.3s infinite;}
@keyframes sk{to{background-position:-200% 0;}}
.empty{grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted);}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------- Launch splash (shown once when the app is opened) ---------- */
.hz-splash{position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 12%, #12335a 0%, var(--navy,#0B1D36) 62%);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overflow:hidden;
  opacity:1; transition:opacity .5s ease;}
.hz-splash.out{opacity:0; pointer-events:none;}
.hz-splash::after{content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(11,85,99,.38), transparent 62%); filter:blur(6px);
  animation:hzsGlow 2.4s ease-in-out infinite;}
/* Base state (no animation) is the final, fully-visible state so the splash is
   always readable — even in webviews that throttle/freeze CSS animations. The
   animations only add the entrance motion; `.settled` (set by JS after a short
   grace) strips them as a guaranteed floor. */
.hz-splash .hz-s-in{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 26px;}
.hz-splash .hz-s-logo{width:104px; height:104px; display:flex; align-items:center; justify-content:center;
  border-radius:28px; background:rgba(255,255,255,.06); box-shadow:0 20px 60px rgba(0,0,0,.35);
  opacity:1; animation:hzsLogo .9s cubic-bezier(.2,.8,.2,1) backwards;}
.hz-splash .hz-s-logo svg{width:66px; height:66px;}
.hz-splash .hz-s-logo svg path{stroke-dasharray:180; stroke-dashoffset:0; animation:hzsDraw 1s ease .25s backwards;}
.hz-splash .hz-s-name{margin-top:20px; color:#fff; font-family:var(--fd,'Poppins',sans-serif); font-weight:800;
  font-size:40px; letter-spacing:.5px; opacity:1; animation:hzsRise .7s ease .35s backwards;}
.hz-splash .hz-s-slogan{margin-top:10px; color:rgba(255,255,255,.82); font-family:var(--ff,'Cairo',sans-serif);
  font-weight:600; font-size:16px; max-width:22em; line-height:1.5; opacity:1; animation:hzsRise .7s ease .55s backwards;}
.hz-splash .hz-s-bar{margin-top:26px; width:120px; height:3px; border-radius:100px; overflow:hidden;
  background:rgba(255,255,255,.14); opacity:1; animation:hzsRise .6s ease .7s backwards;}
.hz-splash .hz-s-bar i{display:block; height:100%; width:40%; border-radius:100px; background:var(--teal,#0B5563);
  animation:hzsBar 1.3s ease-in-out .8s infinite;}
.hz-splash.settled *{animation:none !important;}
.hz-splash.settled .hz-s-logo svg path{stroke-dashoffset:0;}
.hz-splash.settled .hz-s-bar i{width:100%;}
@keyframes hzsLogo{from{opacity:0; transform:translateY(14px) scale(.86);} to{opacity:1; transform:none;}}
@keyframes hzsDraw{from{stroke-dashoffset:180;} to{stroke-dashoffset:0;}}
@keyframes hzsRise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@keyframes hzsBar{0%{transform:translateX(-140%);}100%{transform:translateX(340%);}}
@keyframes hzsGlow{0%,100%{transform:scale(.9); opacity:.55;}50%{transform:scale(1.06); opacity:.9;}}
@media(prefers-reduced-motion:reduce){
  .hz-splash *{animation:none !important;}
  .hz-splash .hz-s-logo svg path{stroke-dashoffset:0;}
}

/* ---------- 360° Virtual Tour ---------- */
.hz-tour{position:fixed; inset:0; z-index:2147483200; background:#05070d; display:none; flex-direction:column;}
.hz-tour.open{display:flex; animation:pop .2s ease;}
.hz-tour .tbar{position:absolute; top:0; inset-inline:0; z-index:5; display:flex; align-items:center; gap:10px; padding:14px 16px calc(14px + env(safe-area-inset-top));
  background:linear-gradient(#000a,transparent); color:#fff;}
.hz-tour .tbar b{font-weight:800; font-size:15px;} .hz-tour .tbar .sub{font-size:11.5px; opacity:.75;}
.hz-tour .tbar .x{margin-inline-start:auto; background:rgba(255,255,255,.16); border:none; color:#fff; width:38px; height:38px; border-radius:11px; cursor:pointer; font-size:20px; backdrop-filter:blur(4px);}
.hz-tour .pano{flex:1; width:100%; height:100%;}
.hz-tour .rooms{position:absolute; inset-inline:0; bottom:0; z-index:5; display:flex; gap:8px; overflow-x:auto; padding:12px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,#000c); -webkit-overflow-scrolling:touch;}
.hz-tour .rooms::-webkit-scrollbar{display:none;}
.hz-tour .rm{flex:none; width:82px; height:56px; border-radius:10px; overflow:hidden; border:2px solid transparent; cursor:pointer; position:relative; background:#1a2233;}
.hz-tour .rm img{width:100%; height:100%; object-fit:cover;}
.hz-tour .rm.on{border-color:#5FD0DE;} .hz-tour .rm span{position:absolute; inset-inline:0; bottom:0; font-size:10px; color:#fff; background:#000a; padding:2px 4px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.hz-tour .loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px;}
.hz-tour-btn{display:inline-flex; align-items:center; gap:7px; cursor:pointer;}
.hz-360-badge{position:absolute; top:8px; inset-inline-start:8px; z-index:2; background:rgba(11,29,54,.82); color:#fff; font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:100px; display:flex; align-items:center; gap:4px; pointer-events:none;}

/* ---------- CRM Voice Assistant ---------- */
.hz-asst-fab{position:fixed; inset-inline-start:22px; bottom:22px; z-index:80; width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,#0B5563,#0B1D36); color:#fff; border:none; cursor:pointer;
  box-shadow:0 12px 30px rgba(11,29,54,.4); display:flex; align-items:center; justify-content:center; transition:transform .16s;}
.hz-asst-fab:hover{transform:scale(1.07);} .hz-asst-fab svg{width:26px; height:26px;}
.hz-asst{position:fixed; inset-inline-start:22px; bottom:92px; z-index:81; width:340px; max-width:calc(100vw - 32px);
  background:#fff; border-radius:20px; box-shadow:0 24px 70px rgba(11,29,54,.34); border:1px solid var(--line); overflow:hidden; display:none;}
.hz-asst.open{display:block; animation:pop .2s ease;}
.hz-asst .ah{background:var(--navy); color:#fff; padding:13px 16px; display:flex; align-items:center; gap:10px;}
.hz-asst .ah b{font-weight:800; font-size:15px;} .hz-asst .ah .sub{font-size:11px; opacity:.7;}
.hz-asst .ah .x{margin-inline-start:auto; background:rgba(255,255,255,.15); border:none; color:#fff; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:16px;}
.hz-asst .ab{padding:18px 16px; text-align:center;}
.hz-asst .bigmic{width:82px; height:82px; border-radius:50%; border:none; cursor:pointer; margin:4px auto 10px; display:flex; align-items:center; justify-content:center;
  background:var(--teal-l,#E4F1F2); color:var(--teal-d,#0B5563); transition:transform .15s;}
.hz-asst .bigmic svg{width:34px; height:34px;}
.hz-asst .bigmic.rec{background:#B42318; color:#fff; animation:micpulse 1s infinite;}
.hz-asst .status{font-weight:700; color:var(--navy); font-size:13.5px; min-height:18px;}
.hz-asst .tr{color:var(--muted); font-size:13px; margin-top:8px; line-height:1.5; min-height:16px;}
.hz-asst .res{margin-top:12px; padding:11px 13px; border-radius:12px; font-size:13.5px; font-weight:700; text-align:start; display:none;}
.hz-asst .res.ok{display:block; background:#E7F6EC; color:#137a3e;} .hz-asst .res.err{display:block; background:#FDECEC; color:#B42318;}
.hz-asst .res.info{display:block; background:var(--cream); color:var(--navy);}
.hz-asst .hint{margin-top:12px; font-size:11.5px; color:var(--muted); line-height:1.6; text-align:start; background:var(--cream); border-radius:10px; padding:9px 11px;}
.hz-asst .res .go{display:inline-block; margin-top:7px; color:var(--teal-d); font-weight:800; text-decoration:none;}
@media(max-width:900px){ .hz-asst{inset-inline:12px; width:auto; bottom:12px;} .hz-asst-fab{inset-inline-start:16px; bottom:16px;} }

/* ---------- Chat widget ---------- */
.chat-fab{position:fixed; inset-inline-end:22px; bottom:22px; z-index:80; width:60px; height:60px; border-radius:50%; background:var(--teal); color:#fff; border:none; cursor:pointer; box-shadow:0 12px 30px rgba(11,85,99,.42); display:flex; align-items:center; justify-content:center; transition:transform .16s;}
.chat-fab:hover{transform:scale(1.06);} .chat-fab svg{width:28px; height:28px;}
.chat-panel{position:fixed; inset-inline-end:22px; bottom:94px; z-index:80; width:384px; max-width:calc(100vw - 32px); height:min(620px, calc(100vh - 130px)); background:#fff; border-radius:22px; box-shadow:0 24px 70px rgba(11,29,54,.32); display:none; flex-direction:column; overflow:hidden; border:1px solid var(--line);}
.chat-panel.open{display:flex; animation:pop .2s ease;}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:none;}}
.cp-head{display:flex; align-items:center; gap:11px; padding:13px 15px; background:var(--navy); color:#fff;}
.cp-head .a{width:37px; height:37px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.cp-head .nm{font-weight:800; font-size:15px; line-height:1.15;} .cp-head .sub{font-size:11px; opacity:.72;}
.cp-head .btns{margin-inline-start:auto; display:flex; gap:6px;}
.cp-head .ic{background:rgba(255,255,255,.14); border:none; color:#fff; width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center;}
.cp-ctx{padding:8px 14px; background:var(--teal-l); color:var(--teal-d); font-size:12px; font-weight:700; display:none; align-items:center; gap:7px; border-bottom:1px solid var(--line);}
.cp-ctx.show{display:flex;}
.cp-log{flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:12px; background:radial-gradient(120% 55% at 50% 0%,#fbf9f7,var(--cream) 70%);}
.msg{max-width:85%; padding:10px 13px; font-size:13.5px; line-height:1.55; border-radius:16px; white-space:pre-wrap;}
.msg.bot{background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-inline-start-radius:5px; box-shadow:0 2px 6px rgba(11,29,54,.04);}
.msg.me{background:var(--teal); color:#fff; align-self:flex-end; border-bottom-inline-end-radius:5px;}
.rec-card{align-self:flex-start; max-width:90%; background:#fff; border:1px solid var(--line); border-radius:15px; padding:11px; box-shadow:var(--shadow-sm);}
.rec-card .badge{display:inline-block; font-size:10px; font-weight:800; color:var(--teal-d); background:var(--teal-l); padding:3px 9px; border-radius:100px; margin-bottom:6px;}
.rec-card .t{font-weight:800; font-size:14px;} .rec-card .a{font-size:12px; color:var(--muted); margin-top:2px;}
.rec-card .pr{font-weight:800; font-size:15px; margin-top:6px;}
.rec-card .meta{display:flex; gap:7px; margin-top:7px; flex-wrap:wrap;}
.rec-card .meta span{font-size:11px; background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:3px 8px; color:#40506a;}
.rec-card a.wa{display:inline-flex; align-items:center; gap:6px; margin-top:9px; font-size:12px; font-weight:700; color:#fff; background:var(--green); padding:6px 11px; border-radius:9px;}
.rec-card .rec-pdf{display:block; width:100%; margin-top:10px; font-family:var(--ff); font-weight:800; font-size:13px; color:#fff; background:var(--navy); border:none; border-radius:10px; padding:9px 12px; cursor:pointer; transition:background .15s;}
.rec-card .rec-pdf:hover{background:var(--navy-2);}
.rec-card .rec-pdf:disabled{opacity:.6; cursor:default;}
.rec-contact{align-self:flex-start; max-width:90%; margin-top:2px; font-family:var(--ff); font-weight:800; font-size:13.5px; color:#fff; background:var(--teal); border:none; border-radius:12px; padding:11px 16px; cursor:pointer; box-shadow:0 8px 20px rgba(11,85,99,.28); transition:background .15s;}
.rec-contact:hover{background:var(--teal-d);}
.rec-contact:disabled{opacity:.7; cursor:default;}
.typing{display:flex; gap:4px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:16px; align-self:flex-start; width:fit-content;}
.typing i{width:7px; height:7px; border-radius:50%; background:#c3c9d2; animation:blink 1.3s infinite;}
.typing i:nth-child(2){animation-delay:.2s;} .typing i:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.3;} 40%{opacity:1;}}
.cp-chips{display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 8px;}
.cp-chips button{font-family:var(--ff); font-size:13px; font-weight:600; background:#fff; border:1px solid var(--line-2); border-radius:100px; padding:8px 13px; cursor:pointer; color:var(--navy);}
.cp-chips button:hover{border-color:var(--teal); color:var(--teal-d);}
.cp-form{display:flex; gap:9px; padding:12px 13px; border-top:1px solid var(--line); background:#fff;}
.cp-form input{flex:1; border:1px solid var(--line-2); background:var(--cream); border-radius:100px; padding:11px 16px; font-family:var(--ff); font-size:14px; outline:none;}
.cp-form input:focus{border-color:var(--teal); background:#fff;}
.cp-form button{width:44px; height:44px; flex:none; border:none; border-radius:50%; background:var(--teal); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.cp-form button:disabled{opacity:.5; cursor:default;}
.cp-form .cp-mic{background:#fff; color:var(--teal-d); border:1.5px solid var(--line-2); font-size:18px;}
.cp-form .cp-mic:hover{border-color:var(--teal);}
.cp-form .cp-mic.rec{background:#B42318; color:#fff; border-color:#B42318; animation:micpulse 1s infinite;}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(180,35,24,.4);}50%{box-shadow:0 0 0 6px rgba(180,35,24,0);}}

/* ============================================================
   Mobile app-like shell — bottom tab bar + "More" sheet.
   Shown only on phones (<=900px); desktop keeps the top nav.
   ============================================================ */
/* ---------- Responsive: mobile = top-bar hamburger → slide-in drawer ---------- */
@media(max-width:900px){
  .hz-links{display:none;}                 /* main nav moves into the drawer */
  .hz-menu-btn{display:inline-flex;}        /* show the hamburger / menu+profile trigger */
  .hz-prof{display:none;}                   /* profile lives in the drawer on mobile */
  .hz-login{display:none;}                  /* login CTA is in the drawer */
  .hz-prod-btn .pn,.hz-prod-btn .chev{display:none;} /* compact switcher: icon only */
  .hz-prod-btn{width:40px; padding:0; justify-content:center;}
  .chat-panel{inset:0; width:100%; max-width:100%; height:100vh; height:100dvh; border-radius:0;}
  .chat-panel .cp-head{padding-top:calc(13px + env(safe-area-inset-top));}
  .chat-panel .cp-form{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
  .grid-3{grid-template-columns:1fr 1fr;} .grid-4{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   Global polish & accessibility (added without changing the look)
   ============================================================ */
html{ text-rendering:optimizeLegibility; -moz-osx-font-smoothing:grayscale; }
body{ -webkit-tap-highlight-color:transparent; }
::selection{ background:var(--teal-on-navy); color:#fff; }
::-moz-selection{ background:var(--teal-on-navy); color:#fff; }
/* visible keyboard-focus ring (only for keyboard users, not mouse clicks) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--teal-on-navy); outline-offset:2px;
}
/* honor reduced-motion: kill transforms/animations for users who ask */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}
@media(max-width:560px){
  .grid-3,.grid-4{grid-template-columns:1fr;} .section{padding:52px 0;}
  .hz-nav-in{gap:8px;}
}