/* ---------- sections ---------- */
.sec{padding-block:56px 40px}
.sec-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px}
.sec-head > div:first-child{display:flex; flex-direction:column; gap:8px; min-width:0}
.h2{font-weight:800; font-size:clamp(30px,4vw,44px); line-height:1.08}
.lead{font-size:17px; color:var(--ink-2); line-height:1.6}

/* hero */
.hero{display:flex; flex-wrap:wrap; gap:40px; align-items:stretch; padding-block:56px 40px}
.hero-l{flex:1 1 560px; min-width:0; display:flex; flex-direction:column; gap:24px}
.hero-r{flex:1 1 340px; min-width:0; display:flex}
.hero h1{font-weight:800; font-size:clamp(38px,5.4vw,66px); line-height:1.04; letter-spacing:-.03em}
:root[lang="ar"] .hero h1{line-height:1.3; letter-spacing:0}
.hero h1 .home-word{color:var(--primary); position:relative; white-space:nowrap; display:inline-block}
.hero h1 .home-word svg{position:absolute; inset-inline-start:0; bottom:-.16em; width:100%; height:.32em; overflow:visible}
.hero h1 .home-word path{stroke:var(--sand); stroke-width:6; fill:none; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:0; animation:draw 1.4s .9s cubic-bezier(.6,.1,.2,1) backwards}
@keyframes draw{from{stroke-dashoffset:420}}
.hero .sub{font-size:19px; line-height:1.6; color:var(--ink-2); max-width:560px}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes rise{from{opacity:0; transform:translateY(14px)}}
.search{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow)}
.search .grp{display:flex; flex-direction:column; gap:10px}
.budget-row{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.budget-val{font-family:var(--f-display); font-weight:700; font-size:20px}
.consult{position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:28px; padding:28px; display:flex; flex-direction:column; gap:20px; flex:1 1 auto}
.consult::before{content:""; position:absolute; inset-inline-end:-70px; top:-70px; width:240px; height:240px; border-radius:50%; background:var(--primary-soft); animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08)}}
.consult > *{position:relative}
.portrait{position:relative; margin:-12px -12px 0; height:340px; border-radius:20px; overflow:hidden; background:var(--sand)}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.consult:hover .portrait img{transform:scale(1.03)}
.avail{position:absolute; inset-inline-start:14px; top:14px; display:inline-flex; align-items:center; gap:2px; padding:7px 12px; border-radius:999px; background:var(--card); color:var(--ink); font-size:13px; font-weight:700; box-shadow:var(--shadow)}
.avatar{width:88px; height:88px; border-radius:26px; background:var(--sand); color:var(--warm); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.who{display:flex; align-items:center; gap:16px}
.who-name{font-family:var(--f-display); font-weight:700; font-size:24px; display:block}
.quote{font-size:17px; line-height:1.6; color:var(--ink-3)}
.facts{display:flex; flex-direction:column; gap:10px; font-size:15px; color:var(--ink-3)}
.facts > div{display:flex; align-items:flex-start; gap:10px} .facts svg{color:var(--primary); flex:0 0 auto; margin-top:2px}
.status-dot{width:9px; height:9px; border-radius:50%; background:var(--primary); display:inline-block; margin-inline-end:6px; box-shadow:0 0 0 0 var(--primary); animation:pulse 2.4s infinite}
.status-dot.off{background:var(--warm); animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 7px transparent}}
.mini-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-top:1px solid var(--line-3); padding-top:16px}
.mini-stats b{display:block; font-family:var(--f-display); font-size:26px; font-weight:800; line-height:1.1}
.mini-stats span{font-size:13px; color:var(--ink-2)}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto}
.cta-row > *{flex:1 1 130px}

/* areas */
.areas{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.area-card{display:flex; align-items:center; gap:14px; padding:16px; border-radius:20px; background:var(--card); border:2px solid var(--line); text-align:start; color:var(--ink); transition:border-color .2s, transform .2s, box-shadow .2s}
.area-card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.area-card[aria-pressed="true"]{border-color:var(--primary)}
.area-ico img{width:100%; height:100%; object-fit:cover; border-radius:inherit}
.area-ico{width:56px; height:56px; overflow:hidden; border-radius:16px; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.area-card b{font-size:17px; display:block} .area-card small{font-size:14px; color:var(--ink-2); display:block; line-height:1.4}

/* unit cards */
.grid-units{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px}
@media (max-width:400px){ .grid-units{grid-template-columns:1fr} }
.ucard{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; animation:rise .5s cubic-bezier(.2,.7,.2,1) backwards}
.ucard:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.ucard:hover .art{transform:translateY(-3px) scale(1.03)}
.photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.photo.in{opacity:1}
.uimg .photo.peek{opacity:0}
.ucard:hover .uimg .photo, .ucard:focus-within .uimg .photo{transform:scale(1.05)}
.ucard:hover .uimg .photo.peek.in, .ucard:focus-within .uimg .photo.peek.in{opacity:1}
.peek-tag, .ph-count{position:absolute; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--card); color:var(--ink); font-size:12px; font-weight:700; transition:opacity .4s}
.ph-count{inset-inline-start:12px}
.peek-tag{inset-inline-end:12px; opacity:0}
.ucard:hover .peek-tag, .ucard:focus-within .peek-tag{opacity:1}
.uimg{position:relative; height:200px; display:flex; align-items:center; justify-content:center; overflow:hidden; text-decoration:none}
.art{width:150px; height:104px; opacity:.6; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.art .sun{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-3px)}}
.uimg-wrap{position:relative}
.uimg-wrap .type{position:absolute; inset-inline-start:14px; top:14px; padding:7px 12px; border-radius:999px; background:var(--card); color:var(--ink); font-size:13px; font-weight:700}
.uimg .ph{position:absolute; inset-inline-start:14px; bottom:12px; color:var(--ink-2); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.fav{position:absolute; inset-inline-end:12px; top:12px; width:44px; height:44px; border-radius:50%; border:none; background:var(--card); color:var(--ink); display:flex; align-items:center; justify-content:center; transition:transform .2s}
.fav:hover{transform:scale(1.08)}
.fav[aria-pressed="true"]{color:var(--heart)} .fav[aria-pressed="true"] svg{fill:var(--heart)}
.fav.pop svg{animation:pop .45s ease}
@keyframes pop{30%{transform:scale(1.4)} 60%{transform:scale(.9)}}
.ubody{padding:20px; display:flex; flex-direction:column; gap:14px; flex:1 1 auto}
.ubody h3{font-weight:700; font-size:21px; line-height:1.2}
.ubody h3 a{color:inherit; text-decoration:none} .ubody h3 a:hover{color:var(--primary)}
.loc{display:flex; align-items:flex-start; gap:6px; color:var(--ink-2); font-size:15px; line-height:1.4} .loc svg{flex:0 0 auto; margin-top:2px}
.specs{display:flex; gap:8px; flex-wrap:wrap}
.spec{display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:10px; background:var(--fill); font-size:14px}
.pricebar{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line-3); flex-wrap:wrap}
.price{font-family:var(--f-display); font-weight:800; font-size:22px; line-height:1.15}
.perm{font-size:13px; color:var(--ink-2)}
.pb-r{display:flex; flex-direction:column; gap:4px; align-items:flex-end}
.plan-note{font-size:13px; color:var(--warm-ink); white-space:nowrap}
.uacts{display:flex; gap:8px} .uacts .btn{min-height:46px; font-size:15px; border-radius:12px}
.uacts .btn-strong{flex:1 1 auto}
.cmp-btn[aria-pressed="true"]{background:var(--sand); border-color:var(--sand); color:var(--on-sand)}
.empty{background:var(--card); border:1.5px dashed var(--line-2); border-radius:var(--r-card); padding:48px 24px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.empty b{font-family:var(--f-display); font-size:26px}
.empty span{color:var(--ink-2); font-size:17px; max-width:460px}

/* compounds row */
.crow{display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; scrollbar-width:thin; scroll-padding-inline:2px}
.ccard{flex:0 0 260px; scroll-snap-align:start; text-align:start; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:0; overflow:hidden; display:flex; flex-direction:column; color:var(--ink); text-decoration:none; transition:transform .25s, box-shadow .25s}
.ccard:hover{transform:translateY(-3px); box-shadow:var(--shadow); color:var(--ink)}
.ccard .top{height:120px; width:100%; display:flex; align-items:flex-end; justify-content:space-between; padding:12px; position:relative; overflow:hidden}
.ccard .top .art{position:absolute; inset-inline-end:8px; top:10px; width:110px; height:76px; opacity:.5}
.ccard .dev{position:relative; padding:5px 10px; border-radius:999px; background:var(--card); font-size:12px; font-weight:700}
.ccard .bd{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.ccard .nm{font-family:var(--f-display); font-weight:700; font-size:18px; line-height:1.2}
.ccard .from{font-size:13px; color:var(--ink-2)}
.ccard .pr{font-weight:800; font-size:17px; margin-top:-6px}
.row-nav{display:flex; gap:8px}

/* developers */
.devs{display:flex; flex-wrap:wrap; gap:10px}
.devs span{padding:12px 18px; border-radius:14px; background:var(--card); border:1px solid var(--line); font-weight:700; font-size:15px; color:var(--ink-3)}

/* story */
.story{background:var(--card); border:1px solid var(--line); border-radius:32px; padding:40px; display:flex; flex-wrap:wrap; gap:40px}
@media (max-width:640px){ .story{padding:24px; border-radius:24px} }
.story-l{flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:18px}
.story-photo{margin:0; height:340px; border-radius:24px; overflow:hidden; background:var(--sand)}
.story-photo img{width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block}
.tl{flex:1 1 420px; min-width:0; list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.tl li{display:flex; gap:18px}
.tl .rail{display:flex; flex-direction:column; align-items:center}
.tl .dot{width:18px; height:18px; border-radius:50%; background:#C9B79A; border:4px solid var(--primary-soft); flex:0 0 auto}
.tl li:last-child .dot{background:var(--primary)}
.tl .ln{width:2px; flex:1 1 auto; background:var(--line)}
.tl li:last-child .ln{background:transparent}
.tl .tx{display:flex; flex-direction:column; gap:4px; padding-bottom:28px}
.tl .yr{font-family:var(--f-display); font-weight:800; font-size:20px; color:var(--primary)}
.tl .tt{font-weight:700; font-size:18px}
.tl .ds{color:var(--ink-2); font-size:16px; line-height:1.55}

/* how */
.how{background:var(--primary-soft)}
.how .wrap{padding-block:72px; display:flex; flex-direction:column; gap:40px}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px}
.step{background:var(--card); border-radius:var(--r-card); padding:28px; display:flex; flex-direction:column; gap:14px}
.step .n{width:52px; height:52px; border-radius:16px; background:var(--sand); color:var(--on-sand); font-family:var(--f-display); font-weight:800; font-size:24px; display:flex; align-items:center; justify-content:center}
.step h3{font-size:24px}
.step p{color:var(--ink-2); line-height:1.6}

/* contact */
.contact{display:flex; flex-wrap:wrap; gap:32px; padding-block:72px}
.contact > div{flex:1 1 420px; min-width:0}
.form-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:28px}
@media (max-width:640px){ .form-card{padding:20px} }
.form{display:flex; flex-direction:column; gap:18px; margin:0}
.frow{display:flex; gap:14px; flex-wrap:wrap}
.done{display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-block:12px; animation:rise .5s backwards}
.done-ic{width:56px; height:56px; border-radius:50%; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center}
.done-ic path{stroke-dasharray:30; animation:check .6s .15s ease backwards}
@keyframes check{from{stroke-dashoffset:30}}
.done b{font-family:var(--f-display); font-size:26px}

/* footer */
.ftr{border-top:1px solid var(--line); margin-top:24px}
.ftr .wrap{padding-block:40px 120px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; color:var(--ink-2); font-size:15px}
.ftr .col{display:flex; flex-direction:column; gap:8px; min-width:0}
.ftr a{color:var(--ink-2); text-decoration:none} .ftr a:hover{color:var(--primary)}
.ftr strong{color:var(--ink); font-family:'Bricolage Grotesque',var(--f-display); font-size:20px}