/* Layout: night page with slow liquid colour fields (deep Gulf water + bronze) drifting behind frosted-glass panels.
   Order: portrait hero → who I am → projects → mortgage → "find my home" questionnaire → WhatsApp */
:root{
  color-scheme:dark;
  --bg:#080B0F;
  --ink:#F3EFE8;
  --ink-2:rgba(243,239,232,.78);
  --ink-3:rgba(243,239,232,.54);
  --glass:rgba(255,255,255,.035);
  --glass-strong:rgba(255,255,255,.08);
  --edge:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.1);
  --water:#123E4A;
  --water-2:#0F3340;
  --sand:#6E4A2B;
  --pearl:#1B2230;
  --gold:#CDAA70;
  --wa:#25C26A;
  --f:"Jost",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-d:"Bodoni Moda","Didot",Georgia,serif;
  --f-ar:"Almarai","Segoe UI",Tahoma,sans-serif;
  --f-ar-d:"Alexandria","Almarai","Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.9,.24,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);isolation:isolate;color:var(--ink);font-family:var(--f);font-weight:300;font-size:17.5px;line-height:1.65;letter-spacing:.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="ar"] body{font-family:var(--f-ar)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:12px}

/* liquid background */
.caustics{position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:soft-light;opacity:.55;
  background:
   radial-gradient(38% 22% at 22% 30%,rgba(190,235,245,.22),transparent 70%),
   radial-gradient(30% 18% at 70% 62%,rgba(190,235,245,.18),transparent 70%),
   radial-gradient(26% 16% at 48% 86%,rgba(230,205,160,.14),transparent 70%),
   radial-gradient(22% 14% at 84% 18%,rgba(190,235,245,.16),transparent 70%);
  filter:blur(18px)}
.caustics.two{opacity:.4;transform:scale(1.15) rotate(12deg)}
@media (prefers-reduced-motion:no-preference){
  .caustics{animation:ripple 18s ease-in-out infinite alternate}
  .caustics.two{animation:ripple2 23s ease-in-out infinite alternate}
  @keyframes ripple{0%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-2%) scale(1.06)}100%{transform:translate(-2%,3%) scale(.98)}}
  @keyframes ripple2{0%{transform:scale(1.15) rotate(12deg) translate(0,0)}100%{transform:scale(1.2) rotate(4deg) translate(-3%,-2%)}}
}
.water{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.water::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgba(8,11,15,.35),rgba(8,11,15,.7))}
@media (max-width:820px){.blob.a{opacity:.5!important}.blob.b{opacity:.45!important}.water::after{background:linear-gradient(180deg,rgba(8,11,15,.6),rgba(8,11,15,.45) 50%,rgba(8,11,15,.65))}}
.blob{position:absolute;filter:blur(80px);opacity:.75;will-change:transform;border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}
.blob.a{width:58vw;height:58vw;background:#17505F;top:-18vw;inset-inline-start:-14vw;opacity:.95}
.blob.b{width:50vw;height:50vw;background:var(--sand);top:20vh;inset-inline-end:-18vw;opacity:.6}
.blob.c{width:46vw;height:46vw;background:var(--water-2);bottom:-20vw;inset-inline-start:24vw;opacity:.85}
.blob.d{width:30vw;height:30vw;background:var(--pearl);top:42vh;inset-inline-start:8vw;opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .glass{transition:transform .9s var(--ease),box-shadow .9s var(--ease),background .9s var(--ease)}
  .blob.a{animation:flow1 22s ease-in-out infinite}
  .blob.b{animation:flow2 26s ease-in-out infinite}
  .blob.c{animation:flow3 30s ease-in-out infinite}
  .blob.d{animation:flow2 24s ease-in-out infinite reverse}
  @keyframes flow1{0%,100%{transform:translate(0,0) rotate(0);border-radius:42% 58% 63% 37%/41% 44% 56% 59%}50%{transform:translate(8vw,6vw) rotate(40deg);border-radius:58% 42% 38% 62%/55% 61% 39% 45%}}
  @keyframes flow2{0%,100%{transform:translate(0,0) rotate(0);border-radius:61% 39% 52% 48%/44% 59% 41% 56%}50%{transform:translate(-7vw,5vw) rotate(-35deg);border-radius:40% 60% 45% 55%/60% 38% 62% 40%}}
  @keyframes flow3{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-6vw,-8vw) rotate(30deg);border-radius:55% 45% 60% 40%/45% 55% 45% 55%}}
}

.glass{position:relative;isolation:isolate;
  background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.01) 40%,rgba(255,255,255,0) 64%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px) saturate(175%) brightness(1.1);-webkit-backdrop-filter:blur(10px) saturate(175%) brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 1px 0 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 40px rgba(160,210,225,.04),0 30px 70px -36px rgba(0,0,0,.75);
  border-radius:30px}
/* specular light that follows the pointer, like light on water */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(520px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.10),rgba(170,220,235,.04) 35%,transparent 62%);
  opacity:.9;transition:opacity .9s var(--ease)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 28%);mix-blend-mode:screen}

.wrap{max-width:1100px;margin-inline:auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
section{padding-block:clamp(70px,10vw,120px)}
.center{text-align:center}
.eyebrow{font-size:12.5px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:14px}
h1,h2{font-family:var(--f-d);font-weight:400;letter-spacing:-.01em;line-height:1.08;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--gold)}
html[lang="ar"] h1,html[lang="ar"] h2{font-family:var(--f-ar-d);font-weight:400;letter-spacing:0;line-height:1.4}
html[lang="ar"] h1 em,html[lang="ar"] h2 em{font-style:normal}
h2{font-size:clamp(36px,5vw,58px);margin-top:16px}
.sub{text-wrap:pretty;font-size:clamp(18px,1.9vw,21px);color:var(--ink-2);max-width:42ch;margin:16px auto 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:999px;font:500 15px var(--f);letter-spacing:.04em;cursor:pointer;border:1px solid transparent;transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .6s var(--ease)}
html[lang="ar"] .btn{font-family:var(--f-ar);letter-spacing:0}
.btn svg{width:19px;height:19px;flex:none}
.btn.wa{background:var(--wa);color:#fff;box-shadow:0 14px 30px -14px rgba(31,168,85,.7)}
.btn.wa:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(31,168,85,.8)}
.btn.clear{background:var(--glass-strong);border-color:var(--edge);color:var(--ink);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.btn.clear:hover{transform:translateY(-2px);background:rgba(255,255,255,.14)}
.btn.dark{background:linear-gradient(135deg,#E6CB98,var(--gold));color:#14100A;font-weight:600}
.btn.dark:hover{transform:translateY(-2px)}
.btn[disabled]{opacity:.35;pointer-events:none}

/* nav */
header.top{position:fixed;top:env(safe-area-inset-top,0px);inset-inline:0;z-index:40;padding-top:12px}
.bar{display:flex;align-items:center;gap:22px;padding:8px 8px 8px 22px;border-radius:999px}
html[dir="rtl"] .bar{padding:8px 22px 8px 8px}
.brand{font-family:var(--f-d);font-weight:500;font-size:19px;letter-spacing:.01em}
html[lang="ar"] .brand{font-family:var(--f-ar-d);font-size:16px}
.brand{display:flex;align-items:center;gap:11px}.avatar{position:relative;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 6px 18px -8px rgba(0,0,0,.6)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 45%);pointer-events:none}
.sym{width:30px;height:30px;flex:none;color:var(--ink)}
.wm{display:flex;flex-direction:column;line-height:1;gap:5px;padding-inline-start:12px;border-inline-start:1px solid rgba(255,255,255,.16)}
.wm b{font:600 16px/1 "Cormorant Garamond","Bodoni Moda",Georgia,serif;letter-spacing:.2em;white-space:nowrap;
  color:var(--ink);background:linear-gradient(105deg,var(--ink) 0%,var(--ink) 42%,#F6E4BC 50%,var(--ink) 58%,var(--ink) 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sym .spark{transform-box:fill-box;transform-origin:center;opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .wm b{animation:shine 7s var(--ease) 1.2s infinite}
  @keyframes shine{0%{background-position:100% 0}35%,100%{background-position:0 0}}
  .sym .roof{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s var(--ease) .2s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .sym .spark{opacity:0;animation:twinkle 7s ease-in-out 1.4s infinite}
  @keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}8%{opacity:1;transform:scale(1) rotate(45deg)}18%{opacity:0;transform:scale(.3) rotate(90deg)}}
}
.wm small{font:400 8.5px/1 var(--f);letter-spacing:.34em;color:#D2B47E;white-space:nowrap}
html[lang="ar"] .wm small{font-family:var(--f-ar);letter-spacing:0;font-size:10px}
.brand{gap:10px!important}
@media (max-width:460px){.tools .ig{display:none}.lang{padding:8px 4px!important;font-size:13.5px!important}.bar{padding-inline-end:14px!important}.avatar{width:34px;height:34px}.sym{width:26px;height:26px}.wm{padding-inline-start:9px}.brand{gap:8px!important}.bar{gap:10px!important}.wm b{font-size:13px;letter-spacing:.11em}.wm small{font-size:7.5px;letter-spacing:.3em}}
.mark{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  background:radial-gradient(120% 120% at 28% 18%,rgba(255,255,255,.22),rgba(255,255,255,.05) 45%,rgba(255,255,255,.02) 70%,rgba(160,215,230,.08));
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -2px 6px rgba(255,255,255,.06),inset 0 0 12px rgba(170,220,235,.08),0 6px 18px -8px rgba(0,0,0,.6)}
.mark::before{content:"";position:absolute;top:3px;left:18%;right:18%;height:38%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));pointer-events:none}
.mark svg{width:100%;height:100%;position:relative}
.mark.big{width:120px;height:120px;opacity:.75}
nav.main{display:flex;gap:4px;margin-inline-start:auto;font-size:14.5px}
nav.main a{padding:8px 14px;border-radius:999px;color:var(--ink-2);transition:background .4s,color .4s}
nav.main a:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.tools{display:flex;align-items:center;gap:6px}
.ig{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--ink-2);transition:color .4s,background .4s}.ig:hover{color:var(--ink);background:rgba(255,255,255,.08)}.ig svg{width:19px;height:19px}
.lang{border:0;background:none;color:var(--ink-2);font:500 14.5px var(--f-ar);cursor:pointer;padding:8px 10px}
html[lang="ar"] .lang{font-family:var(--f)}
.top .btn{padding:9px 16px;font-size:14px}
.top .btn svg{width:16px;height:16px}
@media (max-width:860px){nav.main{display:none}.tools{margin-inline-start:auto}}

/* hero: portrait first */
.hero{padding-block:120px 40px}
.hero-card{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;min-height:560px}
.portrait{position:relative;min-height:420px;background:linear-gradient(160deg,rgba(18,62,74,.55),rgba(110,74,43,.4));display:grid;place-items:center;overflow:hidden}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.portrait .ph{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink-3);font-size:14px}
.portrait .ph b{font-family:var(--f-d);font-size:96px;font-weight:400;line-height:1;color:rgba(255,255,255,.18)}
.hero-text{padding:clamp(32px,5vw,64px);display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(44px,6.4vw,76px);margin-top:12px}
.hero .sub{margin-inline:0}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero .facts{display:flex;gap:34px;flex-wrap:wrap;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.hero .facts b{display:block;font-family:var(--f-d);font-size:30px;font-weight:400;line-height:1}
.hero .facts span{font-size:14px;color:var(--ink-3)}
@media (max-width:820px){.hero-card{grid-template-columns:1fr}.portrait{min-height:0;aspect-ratio:4/4.4}}

/* who */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:38px}
.who .glass{padding:18px 20px;border-radius:22px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start}
.who h3{font-size:17px;font-family:var(--f-d);font-weight:500;margin:2px 0 3px;letter-spacing:0;line-height:1.3}
html[lang="ar"] .who h3{font-family:var(--f-ar-d);font-weight:500;font-size:16px}
.who p{margin:0;color:var(--ink-3);font-size:14.5px;line-height:1.55;grid-column:2}
.who .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--edge);color:var(--gold);grid-row:1/3}
.who .ic svg{width:18px;height:18px}
.socials{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.socials a{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:15px;font-weight:500;color:var(--ink-2);transition:transform .5s var(--ease),color .4s}
.socials a:hover{transform:translateY(-2px);color:var(--ink)}
.socials svg{width:18px;height:18px}
@media (max-width:820px){.who{grid-template-columns:1fr}}

/* projects */
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.chip{border:1px solid var(--edge);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink-2);padding:10px 18px;border-radius:999px;font:500 15px var(--f);cursor:pointer;transition:all .5s var(--ease)}
html[lang="ar"] .chip{font-family:var(--f-ar)}
.chip:hover{color:var(--ink);background:rgba(255,255,255,.1)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.more{display:inline-flex;align-items:center;gap:6px}.chip.more svg{width:12px;height:12px;transition:transform .5s var(--ease)}.chip.more[aria-expanded="true"] svg{transform:rotate(180deg)}
.chips-more{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;width:100%;overflow:hidden;max-height:0;opacity:0;transition:max-height .6s var(--ease),opacity .5s var(--ease)}.chips-more.open{max-height:300px;opacity:1;margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.tile{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;overflow:hidden;border-radius:28px;transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.tile:hover{transform:translateY(-6px);border-color:rgba(205,170,112,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 50px 80px -40px rgba(0,0,0,.9)}
.tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.art{aspect-ratio:4/3;max-width:100%;position:relative;overflow:hidden}
.art svg,.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tile:hover .art svg,.tile:hover .art img{transform:scale(1.05)}
.tile .body{padding:20px 24px 24px;min-width:0}
.tile .dev{font-size:13px;font-weight:600;color:var(--gold)}
.tile h3{font-size:22px;font-family:var(--f-d);font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:3px 0 2px}
html[lang="ar"] .tile h3{letter-spacing:0;font-size:20px}
.tile .area{font-size:15px;color:var(--ink-3)}

/* featured projects */
.feat{margin-top:44px;gap:20px}
.feat .tile{border-radius:26px;position:relative;isolation:isolate}
.feat .art{aspect-ratio:4/3.1}
.feat .art::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(8,11,15,.55),transparent);pointer-events:none}
.feat .tile .body{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:18px 22px 22px}
.feat .tile .body>div{min-width:0}
.feat .tile h3{margin:4px 0 2px}
.feat .go{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--edge);color:var(--gold);transition:background .5s var(--ease),color .5s var(--ease)}
.feat .go svg{width:14px;height:14px}
html[dir="rtl"] .feat .go svg{transform:scaleX(-1)}
.feat .tile:hover .go{background:var(--gold);color:#14100A;border-color:transparent}
/* developers list */
.devpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease),opacity .6s var(--ease);opacity:0}
.devpanel.open{grid-template-rows:1fr;opacity:1}
.devpanel>.devlist{overflow:hidden;min-height:0}
.devlist{display:grid;gap:12px;max-width:760px;margin:26px auto 0}
.drow{border-radius:24px;overflow:hidden}
.dhead{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:16px;padding:16px 20px}
.dhead:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:24px}
.badge{flex:none;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font:500 15px var(--f);letter-spacing:.06em;color:#fff;border:1px solid rgba(255,255,255,.18)}
.badge.logo{display:block;box-sizing:border-box;width:92px;height:52px;border-radius:14px;padding:3px;overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px -10px rgba(0,0,0,.6)}
.badge.logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px}
.dhead .nm{font-family:var(--f-d);font-size:21px;font-weight:500;line-height:1.2}
html[lang="ar"] .dhead .nm{font-family:var(--f-ar-d);font-size:18px;font-weight:400}
.dhead small{display:block;font-size:14px;color:var(--ink-3)}
.dhead .chev{margin-inline-start:auto;width:16px;height:16px;color:var(--ink-3);transition:transform .5s var(--ease)}
.drow.open .chev{transform:rotate(180deg)}
.dbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.drow.open .dbody{grid-template-rows:1fr}
.dbody>div{overflow:hidden;min-height:0}
.proj{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;width:100%;padding:14px 20px 14px 128px;border-top:1px solid var(--line);transition:background .4s}
html[dir="rtl"] .proj{padding:14px 128px 14px 20px}
.proj:hover{background:rgba(255,255,255,.05)}
.proj:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.proj{color:var(--ink)}.proj b{font-weight:500;font-size:16.5px;color:var(--ink)}
.proj span{font-size:14.5px;color:var(--ink-3)}
.proj i{margin-inline-start:auto;font-style:normal;color:var(--gold);font-size:14px;white-space:nowrap}
@media (max-width:560px){.proj,html[dir="rtl"] .proj{padding-inline:20px}.proj{flex-wrap:wrap;gap:2px 12px}}
.sheet .art.logo-art{aspect-ratio:auto;height:150px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(18,62,74,.6),rgba(110,74,43,.45))}
.sheet .art.logo-art .badge{width:76px;height:76px;border-radius:22px;font-size:22px}.sheet .art.logo-art .badge.logo{width:180px;height:100px;border-radius:20px;padding:6px}

/* reportage */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.reel{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:9/13;padding:20px;border-radius:26px;overflow:hidden;transition:transform .9s var(--ease)}
.reel:hover{transform:translateY(-5px)}
.reel .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .7s var(--ease),background .7s var(--ease)}
.reel:hover .play{transform:translate(-50%,-60%) scale(1.08);background:rgba(255,255,255,.2)}
.reel .play svg{width:20px;height:20px;margin-inline-start:3px}
.reel .tag{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500}
html[lang="ar"] .reel .tag{letter-spacing:0;font-size:13px}
.reel h3{margin:6px 0 4px;font-family:var(--f-d);font-weight:500;font-size:20px;line-height:1.25}
html[lang="ar"] .reel h3{font-family:var(--f-ar-d);font-size:17px}
.reel span.on{font-size:14px;color:var(--ink-3)}
@media (max-width:820px){.reels{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}.reels::-webkit-scrollbar{display:none}.reel{scroll-snap-align:center}}

.proj.has-ph{padding-inline-start:20px!important}
.pth{flex:none;width:76px;height:56px;border-radius:12px;object-fit:cover;display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 18px -10px rgba(0,0,0,.7);transition:transform .7s var(--ease)}
.proj:hover .pth{transform:scale(1.05)}
.sheet .art.ph-art{aspect-ratio:16/10;position:relative;overflow:hidden;background:#0B0F14}
.sheet .art.ph-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sheet .art.ph-art::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(10,14,20,.75),transparent);pointer-events:none}
.ph-badge{position:absolute;bottom:14px;inset-inline-start:16px;z-index:2}
.ph-badge .badge.logo{width:84px;height:46px}

/* calculator */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:44px}
.calc .glass{padding:clamp(26px,4vw,42px)}
.field{margin-bottom:30px}.field:last-child{margin-bottom:0}
.field label{display:flex;justify-content:space-between;gap:10px;font-size:16px;color:var(--ink-2);margin-bottom:14px}
.field output{color:var(--ink);font-weight:600}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;background:linear-gradient(to right,var(--gold) var(--p,20%),rgba(255,255,255,.14) var(--p,20%));outline:none}
html[dir="rtl"] input[type=range]{background:linear-gradient(to left,var(--gold) var(--p,20%),rgba(255,255,255,.14) var(--p,20%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2);cursor:pointer}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2);cursor:pointer}
.result{display:flex;flex-direction:column;justify-content:center}
.result .k{font-size:15px;color:var(--ink-3)}
.result .big{font-family:var(--f-d);font-size:clamp(44px,6vw,64px);font-weight:400;line-height:1.05;margin:10px 0 6px;font-variant-numeric:tabular-nums}
.result .s{font-size:14.5px;color:var(--ink-3)}
@media (max-width:820px){.calc{grid-template-columns:1fr}}

/* questionnaire */
.quiz{max-width:760px;margin:44px auto 0;padding:clamp(26px,5vw,52px);overflow:hidden}
.progress{display:flex;gap:6px;margin-bottom:34px}
.progress i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.12);transition:background .6s var(--ease)}
.progress i.on{background:var(--gold)}
.step{display:none}
.step.show{display:block;animation:slideIn .7s var(--ease)}
@keyframes slideIn{from{transform:translateX(24px);opacity:0}}
html[dir="rtl"] .step.show{animation-name:slideInR}
@keyframes slideInR{from{transform:translateX(-24px);opacity:0}}
.step h3{font-size:clamp(26px,3.4vw,34px);font-family:var(--f-d);font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:0 0 6px}
html[lang="ar"] .step h3{letter-spacing:0}
.step .hint{color:var(--ink-3);font-size:15px;margin:0 0 24px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.opts.three{grid-template-columns:repeat(3,1fr)}
.opt{all:unset;box-sizing:border-box;cursor:pointer;padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--edge);font-size:17px;font-weight:400;color:var(--ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;gap:12px;transition:all .5s var(--ease);min-width:0}
.opt:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.opt small{display:block;font-weight:400;font-size:14px;color:var(--ink-3)}
.opt .tick{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);display:grid;place-items:center;transition:all .4s var(--ease);margin-inline-start:auto}
.opt[aria-pressed="true"]{background:rgba(205,170,112,.12);border-color:var(--gold)}
.opt[aria-pressed="true"] .tick{background:var(--gold);border-color:var(--gold)}
.opt[aria-pressed="true"] .tick::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--bg)}
@media (max-width:560px){.opts,.opts.three{grid-template-columns:1fr}}
.nav-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:32px}
.back{border:0;background:none;color:var(--ink-2);font:500 15.5px var(--f);cursor:pointer;padding:10px 4px}
html[lang="ar"] .back{font-family:var(--f-ar)}
.back[hidden]{display:none}
.summary{display:grid;gap:0;margin:6px 0 26px}
.summary div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.summary span{color:var(--ink-3)}
.summary b{text-align:end;font-weight:500}
.nameinput{width:100%;padding:16px 18px;border-radius:18px;border:1px solid var(--edge);background:rgba(255,255,255,.05);font:400 17px var(--f);backdrop-filter:blur(14px);color:var(--ink);outline:none;margin-bottom:22px;transition:border-color .4s}
html[lang="ar"] .nameinput{font-family:var(--f-ar)}
.nameinput:focus{border-color:var(--gold);background:rgba(255,255,255,.08)}
.nameinput::placeholder{color:var(--ink-3)}
.reach{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.reach a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;font:400 13px var(--f);letter-spacing:.01em;color:var(--ink-2);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:color .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease);min-width:0;overflow-wrap:anywhere}
.reach a:hover{color:var(--ink);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.reach svg{width:14px;height:14px;flex:none}.reach .r-wa svg{color:#3FD07E}
.free{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.free p{margin:0;font-size:16px;color:var(--ink-2)}
.free b{color:var(--ink)}

.areabar{display:flex;align-items:center;gap:12px;margin-bottom:14px}.areasearch{margin:0;flex:1;padding:13px 16px;font-size:16px}
.areacount{font-size:14px;color:var(--gold);white-space:nowrap}
.areas{display:flex;flex-wrap:wrap;gap:8px;max-height:min(380px,52vh);overflow-y:auto;padding:2px;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(180deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);padding-bottom:28px}
.plabel{display:block;font-size:14px;color:var(--ink-3);margin:4px 0 10px}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pchip{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 18px;border-radius:999px;font-size:15px;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--edge);transition:all .4s var(--ease)}
.pchip:hover{background:rgba(255,255,255,.09)}.pchip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pchip[aria-pressed="true"]{background:rgba(205,170,112,.18);border-color:var(--gold)}
.opt.area{padding:10px 15px;border-radius:999px;font-size:15px;width:auto}
.opt.area[aria-pressed="true"]{background:rgba(205,170,112,.18);border-color:var(--gold);color:var(--ink)}


/* ===== luxury layer ===== */
.intro{position:fixed;inset:0;z-index:100;background:#06080B;display:grid;place-items:center;transition:clip-path 1.2s cubic-bezier(.77,0,.18,1),opacity .6s ease 1s;clip-path:inset(0 0 0 0)}
.intro.go{clip-path:inset(0 0 100% 0)}
.intro.gone{display:none}
.intro-in{display:flex;flex-direction:column;align-items:center;gap:16px}
.intro svg{width:78px;height:78px}
.intro .i-roof,.intro .i-e{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s cubic-bezier(.65,0,.35,1) forwards}
.intro .i-e{animation-delay:.2s}
.intro-name{font:600 22px "Cormorant Garamond",Georgia,serif;letter-spacing:.42em;padding-left:.42em;color:#F3EFE8;opacity:0;transform:translateY(10px);animation:fadeUp .6s var(--ease) .35s forwards}
.intro-line{width:0;height:1px;background:linear-gradient(90deg,transparent,#D2B47E,transparent);animation:grow .7s var(--ease) .45s forwards}
.intro-sub{font:400 10px var(--f);letter-spacing:.5em;padding-left:.5em;color:#D2B47E;opacity:0;animation:fadeUp .6s var(--ease) .55s forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes grow{to{width:180px}}
@keyframes draw{to{stroke-dashoffset:0}}
.progress-line{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#8E6E3E,#F3DDAE,#C9A56B);box-shadow:0 0 12px rgba(243,221,174,.6)}
html[dir="rtl"] .progress-line{transform-origin:100% 50%}
#dust{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
/* portrait: slow light sweep + depth */
.portrait img{transform:scale(1.06);transition:transform 1.6s var(--ease)}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,240,210,.16) 48%,transparent 60%);background-size:250% 100%;background-position:120% 0;z-index:1}
.portrait::before{content:"";position:absolute;inset:auto 0 0 0;height:40%;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(6,8,11,.55),transparent)}
/* headings: mask reveal */
.js .reveal.pre h2{clip-path:inset(-.1em -.2em 100% -.2em)}
.reveal h2{clip-path:inset(-.1em -.2em -.3em -.2em);padding-bottom:.06em;transition:clip-path 1.4s cubic-bezier(.77,0,.18,1) .1s}
h1 em,h2 em{background:linear-gradient(105deg,#B8925A,#F3DDAE 45%,#C9A56B 60%,#E8CF9E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero h1{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .portrait::after{animation:sweep 9s ease-in-out 2.4s infinite}
  @keyframes sweep{0%{background-position:120% 0}30%,100%{background-position:-20% 0}}
}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* sheet */
.modal{position:fixed;inset:0;z-index:60;background:rgba(4,6,9,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:fade .5s var(--ease)}
.sheet{width:100%;max-width:560px;max-height:100%;overflow:auto;position:relative;animation:up .7s var(--ease);background:linear-gradient(150deg,rgba(30,38,48,.86),rgba(12,16,22,.9))}
.sheet .art{aspect-ratio:16/10}
.sheet .in{padding:28px 30px 32px}
.sheet h3{font-size:30px;font-family:var(--f-d);font-weight:500;letter-spacing:-.02em;line-height:1.15;margin:4px 0 10px}
html[lang="ar"] .sheet h3{letter-spacing:0;font-size:26px}
.sheet p{margin:0 0 24px;color:var(--ink-2)}
.sheet .btn{width:100%}
.x{position:absolute;top:14px;inset-inline-end:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--edge);background:rgba(8,11,15,.55);backdrop-filter:blur(10px);cursor:pointer;display:grid;place-items:center;color:var(--ink);z-index:2}
.x svg{width:16px;height:16px}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(30px) scale(.97)}}

.float{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));inset-inline-end:calc(24px + env(safe-area-inset-right,0px));z-index:35;width:58px;height:58px;border-radius:50%;background:rgba(37,194,106,.92);color:#fff;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 16px 36px -12px rgba(37,194,106,.55);transition:transform .6s var(--ease)}
.float:hover{transform:scale(1.06)}
.float{border:1px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
.float svg{position:absolute;transition:transform .6s var(--ease),opacity .4s var(--ease)}
.float .ic-x{width:22px;height:22px;opacity:0;transform:rotate(-90deg) scale(.6)}
.dial.open .float .ic-wa{opacity:0;transform:rotate(90deg) scale(.6)}
.dial.open .float .ic-x{opacity:1;transform:none}
.dial.open .float{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 36px -12px rgba(0,0,0,.6)}
.dial-items{position:fixed;z-index:35;bottom:calc(94px + env(safe-area-inset-bottom,0px));right:calc(29px + env(safe-area-inset-right,0px));direction:ltr;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
html[dir="rtl"] .dial-items{right:auto;left:calc(29px + env(safe-area-inset-left,0px));align-items:flex-start}
.dial.open .dial-items{pointer-events:auto}
.di{display:flex;align-items:center;gap:10px;justify-content:flex-end;opacity:0;transform:translateY(14px) scale(.85);transition:transform .55s var(--ease) calc(var(--i)*45ms),opacity .4s var(--ease) calc(var(--i)*45ms)}
html[dir="rtl"] .di{flex-direction:row-reverse}
.dial-items{counter-reset:none}
.dial.open .di{opacity:1;transform:none}
.di .ci{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px -12px rgba(0,0,0,.7);transition:background .4s}
.di .ci.wa{color:#fff;background:rgba(37,194,106,.9)}
.di:hover .ci{background:rgba(255,255,255,.16)}.di:hover .ci.wa{background:#25C26A}
.di .ci svg{width:21px;height:21px}
.di .lb{font:500 13px var(--f);padding:6px 12px;border-radius:999px;color:var(--ink);background:rgba(10,14,20,.6);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);white-space:nowrap}
.float svg{width:27px;height:27px}
.dial{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.dial.away{opacity:0;transform:translateY(16px);pointer-events:none}

footer{padding-block:30px 110px;font-size:13.5px;color:var(--ink-3)}
footer .wrap{flex-direction:column;align-items:center;text-align:center;gap:14px!important}
.f-brand{display:flex;flex-direction:column;gap:6px;align-items:center}
.f-name{font:600 15px "Cormorant Garamond",Georgia,serif;letter-spacing:.3em;color:var(--ink)}
.f-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.hero .facts b .count{font:inherit;color:inherit;display:inline}
.sheet .art.logo-art .badge.logo img{position:static;transform:none!important}
.f-links a{color:var(--ink-2);transition:color .4s;position:relative}
.f-links a+a::before{display:none;content:"";position:absolute;inset-inline-start:0;top:50%;width:3px;height:3px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%)}
html[dir="rtl"] .f-links a+a::before{transform:translate(50%,-50%)}
.f-links a:hover{color:var(--gold)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px}

@media (prefers-reduced-motion:no-preference){
  .reveal{transition:transform 1.2s var(--ease),opacity 1.2s var(--ease);transition-delay:var(--d,0s)}
  .js .reveal.pre{transform:translate3d(0,36px,0);opacity:.001}
  .feat .tile.reveal:nth-child(3n+2){--d:.08s}.feat .tile.reveal:nth-child(3n+3){--d:.16s}
  .hero-card{animation:rise 1.4s var(--ease) both}
  .hero-text > *{animation:rise 1.4s var(--ease) both}
  .hero-text > *:nth-child(2){animation-delay:.1s}.hero-text > *:nth-child(3){animation-delay:.2s}.hero-text > *:nth-child(4){animation-delay:.3s}.hero-text > *:nth-child(5){animation-delay:.4s}
  @keyframes rise{from{transform:translateY(26px)}}
}
/* water: soft colour fields painted once as gradients and moved with transforms only (GPU-friendly, no live blur) */
.blob{filter:none!important;border-radius:50%!important;background-color:transparent!important;will-change:transform}
.blob.a{background-image:radial-gradient(closest-side,#17505F,rgba(23,80,95,.55) 45%,rgba(23,80,95,0))!important;width:78vw;height:78vw;top:-28vw;inset-inline-start:-24vw}
.blob.b{background-image:radial-gradient(closest-side,#6E4A2B,rgba(110,74,43,.5) 45%,rgba(110,74,43,0))!important;width:68vw;height:68vw;top:12vh;inset-inline-end:-27vw}
.blob.c{background-image:radial-gradient(closest-side,#0F3340,rgba(15,51,64,.55) 45%,rgba(15,51,64,0))!important;width:64vw;height:64vw;bottom:-29vw;inset-inline-start:15vw}
.blob.d{background-image:radial-gradient(closest-side,#1B2230,rgba(27,34,48,.55) 45%,rgba(27,34,48,0))!important;width:44vw;height:44vw;top:35vh;inset-inline-start:1vw}
.caustics{filter:none!important}
@media (prefers-reduced-motion:no-preference){
  .blob.a{animation:w1 22s ease-in-out infinite!important}
  .blob.b{animation:w2 26s ease-in-out infinite!important}
  .blob.c{animation:w3 30s ease-in-out infinite!important}
  .blob.d{animation:w2 24s ease-in-out infinite reverse!important}
  @keyframes w1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8vw,6vw,0) scale(1.08,.94)}}
  @keyframes w2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7vw,5vw,0) scale(.94,1.06)}}
  @keyframes w3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vw,-8vw,0) scale(1.06)}}
}
/* hover magnify: anything you point at grows smoothly, with a soft spring */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  :root{--spring:cubic-bezier(.34,1.56,.64,1)}
  .btn,.chip,.pchip,.opt,.socials a,nav.main a,.lang,.ig,.di,.ci,.avatar,.sym,.mark,.badge,.who .ic,.x,.float,.drow,.reel,.pth,.wm{transition:transform .6s var(--spring),box-shadow .6s var(--ease),background .45s var(--ease),border-color .45s var(--ease),color .4s var(--ease)!important;will-change:transform}
  .btn:hover{transform:scale(1.06)!important;box-shadow:0 18px 40px -16px rgba(205,170,112,.55)}
  .chip:hover,.pchip:hover,.socials a:hover{transform:scale(1.09)!important}
  nav.main a:hover,.lang:hover{transform:scale(1.12)!important}
  .ig:hover,.di:hover,.ci:hover{transform:scale(1.22)!important;color:var(--gold)!important}
  .brand:hover .avatar{transform:scale(1.14)}
  .brand:hover .sym{transform:scale(1.14) translateY(-1px)}
  .brand:hover .wm{transform:translateX(3px)}
  html[dir="rtl"] .brand:hover .wm{transform:translateX(-3px)}
  .opt:hover{transform:scale(1.04)!important}
  .who .glass:hover .ic{transform:scale(1.22) rotate(-6deg);border-color:rgba(205,170,112,.55)}
  .drow:hover{transform:scale(1.02);border-color:rgba(205,170,112,.3)}
  .dhead:hover .badge{transform:scale(1.12)}
  .proj:hover .pth{transform:scale(1.12)!important}
  .x:hover{transform:scale(1.15) rotate(90deg)!important}
  .float:hover{transform:scale(1.16)!important}
  .tile,.reel{transition:transform .75s var(--spring),opacity 1.2s var(--ease),box-shadow .7s var(--ease),border-color .6s var(--ease)!important;transform-style:preserve-3d}
  .tile.reveal.pre{transition:none!important}
  .tile.reveal{transition-delay:var(--d,0s)!important}
  .tile:hover,.reel:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.045)!important}
  .btn:active,.chip:active,.pchip:active,.opt:active,.tile:active,.reel:active{transform:scale(.96)!important;transition-duration:.15s!important}
}
html.scrolling .blob,html.scrolling .caustics{animation-play-state:paused!important}
.tile,.reel{will-change:auto}

/* ===================== v3 additions ===================== */
.skip{position:fixed;top:-60px;inset-inline-start:16px;z-index:200;background:var(--gold);color:#14100A;padding:10px 16px;border-radius:12px;font-weight:600;transition:top .3s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
:focus-visible{outline:2px solid var(--gold-2,#E6CB98);outline-offset:3px}
bdi{unicode-bidi:isolate}

/* hero */
.hero .wa-inline{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:8px 6px;color:var(--ink-2);font-size:15px;border-radius:12px;transition:color .4s var(--ease)}
.hero .wa-inline svg{width:20px;height:20px;color:#3FD07E;flex:none}
.hero .wa-inline .num{color:var(--ink-3);font-size:14px;border-inline-start:1px solid var(--line);padding-inline-start:10px}
.hero .wa-inline:hover{color:var(--ink)}
.hero .facts b .count{font:inherit}
@media (max-width:820px){
  .hero{padding-block:84px 24px}
  .hero-text{padding:20px 22px 28px}
  .hero h1{margin-top:8px}
  .hero h1{font-size:clamp(40px,11vw,56px)}
  .hero .sub{font-size:16px;line-height:1.55}
  .hero .sub{margin-top:12px}
  .hero .actions{margin-top:18px}
  .hero .actions .btn{flex:1 1 auto}
  .hero .facts{margin-top:26px;padding-top:20px;gap:22px}
  .hero .facts b{font-size:24px}
}

/* about: how I work */
.how{list-style:none;margin:40px auto 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;max-width:1100px}
.how li{grid-column:span 2;display:flex;gap:14px;padding:20px 22px;border-radius:22px;align-items:flex-start}
.how li:nth-child(4){grid-column:2/span 2}
.how .n{flex:none;font-family:var(--f-d);font-size:22px;color:var(--gold);line-height:1;padding-top:3px;min-width:30px}
.how h3{margin:0 0 4px;font-family:var(--f-d);font-weight:500;font-size:18px;line-height:1.3}
html[lang="ar"] .how h3{font-family:var(--f-ar-d);font-size:16.5px}
.how p{margin:0;color:var(--ink-3);font-size:14.5px;line-height:1.6}
@media (max-width:980px){.how{grid-template-columns:1fr 1fr}.how li,.how li:nth-child(4){grid-column:auto}.how li:last-child{grid-column:1/-1}}
@media (max-width:620px){.how{grid-template-columns:1fr}}

/* projects */
.tile .stag{position:absolute;top:12px;inset-inline-start:12px;z-index:2;padding:5px 11px;border-radius:999px;font-size:12px;letter-spacing:.06em;color:var(--ink);background:rgba(8,11,15,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[lang="ar"] .tile .stag{letter-spacing:0}
.tile{position:relative;isolation:isolate}
.devwrap{margin-top:46px;text-align:center}
.devtitle{font:500 12.5px var(--f);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
html[lang="ar"] .devtitle{letter-spacing:0;font-size:14px;font-family:var(--f-ar)}
.devstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.devchip{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:999px;color:var(--ink-2);font-size:14px;position:relative;isolation:isolate;transition:transform .5s var(--ease),border-color .5s var(--ease),color .4s}
html[dir="rtl"] .devchip{padding:7px 7px 7px 14px}
.devchip .badge.logo{width:58px;height:32px;border-radius:999px;padding:2px 6px}
.devchip .badge{width:32px;height:32px;border-radius:50%;font-size:11px}
.devchip:hover{color:var(--ink);border-color:rgba(205,170,112,.4)}
.devchip[aria-pressed="true"]{border-color:var(--gold);color:var(--ink);background:rgba(205,170,112,.12)}
.devchip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.devnote{max-width:640px;margin:18px auto 0;font-size:13px;color:var(--ink-3);line-height:1.6}
.allpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease),opacity .6s var(--ease);opacity:0}
.allpanel.open{grid-template-rows:1fr;opacity:1}
.allpanel>.allin{overflow:hidden;min-height:0}
.filters{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end;padding:16px;border-radius:22px;margin-top:26px}
.fl{display:flex;flex-direction:column;gap:6px;min-width:0}
.fl span{font-size:12.5px;color:var(--ink-3);letter-spacing:.04em}
.fl select{appearance:none;-webkit-appearance:none;width:100%;min-width:0;padding:12px 36px 12px 14px;border-radius:14px;border:1px solid var(--edge);color:var(--ink);font:400 15px var(--f);background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23CDAA70' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center/12px;cursor:pointer}
html[dir="rtl"] .fl select{padding:12px 14px 12px 36px;background-position:left 14px center;font-family:var(--f-ar)}
.fl select:focus-visible{box-shadow:0 0 0 3px rgba(205,170,112,.25)}
@media (max-width:820px){.fl select,.nameinput,.qsearch,input[type=search]{font-size:16px!important}}
.fl select:focus{border-color:var(--gold);outline:none}
.fl select option{background:#0E131A;color:var(--ink)}
.reset{all:unset;cursor:pointer;padding:12px 16px;border-radius:14px;color:var(--gold);font-size:14.5px}
.reset:hover{background:rgba(255,255,255,.06)}
.reset:focus-visible{outline:2px solid var(--gold)}
.count-line{margin:16px 4px 0;font-size:14px;color:var(--ink-3)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:14px 0 6px}
.pgrid .tile .art{aspect-ratio:16/10}
.pgrid .tile .body{padding:14px 16px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.pgrid .tile h3{font-size:18px;margin:3px 0 1px}
html[lang="ar"] .pgrid .tile h3{font-size:17px}
.pgrid .tile .area{font-size:14px}
.pgrid .go,.feat .go{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--edge);color:var(--gold)}
.pgrid .go svg,.feat .go svg{width:14px;height:14px}
html[dir="rtl"] .pgrid .go svg,html[dir="rtl"] .feat .go svg{transform:scaleX(-1)}
.empty,.dataerr{grid-column:1/-1;text-align:center;color:var(--ink-2);padding:30px 10px}
@media (max-width:900px){.filters{grid-template-columns:1fr 1fr}.reset{grid-column:1/-1;justify-self:center}}
@media (max-width:420px){.filters{grid-template-columns:1fr}}

/* project window facts */
.facts2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:4px 0 22px}
.facts2 div{padding:10px 0;border-top:1px solid var(--line);min-width:0}
.facts2 dt{font-size:12.5px;color:var(--ink-3)}
.facts2 dd{margin:2px 0 0;font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.sheet{max-height:calc(100dvh - 32px)}
@media (max-width:480px){.facts2{grid-template-columns:1fr}}

/* mortgage */
.calc-in{display:flex;flex-direction:column;gap:22px}
.cf label,.cf-head label,.cf.two label{display:block;font-size:14.5px;color:var(--ink-2);margin-bottom:8px}
.cf-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.cf-head label{margin:0}
.cin{width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--edge);background:rgba(255,255,255,.05);color:var(--ink);font:500 18px var(--f);font-variant-numeric:tabular-nums;outline:none;transition:border-color .4s}
.cin:focus{border-color:var(--gold);background:rgba(255,255,255,.08)}
.cf input[type=range]{margin-top:16px}
.cf.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seg{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--edge);background:rgba(255,255,255,.04)}
.seg button{all:unset;cursor:pointer;padding:6px 14px;border-radius:999px;font-size:13.5px;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg button:focus-visible{outline:2px solid var(--gold)}
.cnote{margin:0;font-size:13.5px;color:#F0B27A;min-height:0}
.cnote:empty{display:none}
.cnote.soft{color:var(--ink-3)}
.rlist{margin:18px 0 18px;display:grid}
.rlist div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.rlist dt{color:var(--ink-3);font-size:14.5px}
.rlist .pct{color:var(--ink-3);font-weight:400;font-size:13px;margin-inline-start:6px}
.rlist dt{flex:1 1 auto;min-width:0}
.rlist dd{flex:none;white-space:nowrap;direction:ltr;margin:0;font-variant-numeric:tabular-nums;font-weight:500;text-align:end}
.result .s{font-size:13px;line-height:1.6}

/* finder */
.qcount{margin:-20px 0 18px;font-size:13px;color:var(--ink-3);letter-spacing:.04em}
.summary div{align-items:baseline}
.summary .edit{all:unset;cursor:pointer;font-size:13px;color:var(--gold);padding:2px 4px;border-radius:6px;flex:none}
.summary .edit:focus-visible{outline:2px solid var(--gold)}
.summary b{flex:1}
.wa-send{width:100%;margin-top:6px}
.after{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.privacy{margin:22px 0 0;font-size:13px;color:var(--ink-3);text-align:center}
.step h3:focus{outline:none}

/* contact */
#contact{padding-top:40px}
.contact{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:38px}
.cc{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:22px;min-width:0;position:relative;isolation:isolate}
.cc b{display:block;font-weight:500;font-size:16px}
.cc small{display:block;color:var(--ink-3);font-size:14px;overflow-wrap:anywhere}
.cc>span:nth-child(2){min-width:0}
.ci2{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--edge);color:var(--gold);background:rgba(255,255,255,.04)}
.ci2 svg{width:20px;height:20px}
.ci2.wa{background:rgba(37,194,106,.9);color:#fff;border-color:transparent}
.cc.primary{border-color:rgba(63,208,126,.35)}
.cc .go2{width:14px;height:14px;margin-inline-start:auto;color:var(--ink-3);flex:none}
html[dir="rtl"] .cc .go2{transform:scaleX(-1)}
a.cc:hover{border-color:rgba(205,170,112,.4)}
@media (max-width:980px){.contact{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.contact{grid-template-columns:1fr}}

/* footer */
.f-legal{max-width:640px;margin:0 auto;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.f-copy{font-size:12.5px}

/* floating WhatsApp: one tap */
a.float svg{position:static!important;width:27px;height:27px;opacity:1!important;transform:none!important}
.float{transition:transform .6s var(--ease),opacity .5s var(--ease)}
.float.away{opacity:0;transform:translateY(16px) scale(.9)!important;pointer-events:none}
.modal:not([hidden])~.float,body:has(.modal:not([hidden])) .float{opacity:0;pointer-events:none}

.contact{grid-template-columns:repeat(2,1fr);max-width:860px;margin-inline:auto}
.cc small{overflow-wrap:normal;word-break:normal}
@media (max-width:560px){.contact{grid-template-columns:1fr}.cc small{overflow-wrap:anywhere}}
.sheet .btn{margin:2px 0 18px}
.mnote{margin:6px 0 0!important;font-size:13px;color:var(--ink-3)!important}
.facts2{margin:0 0 4px}
@media (max-width:480px){.facts2{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.float{width:52px;height:52px;bottom:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-end:calc(16px + env(safe-area-inset-right,0px))}a.float svg{width:24px;height:24px}}
.rlist dt{line-height:1.35}
@media (max-width:420px){.rlist dd{font-size:15px}.rlist .pct{display:block;margin:2px 0 0;text-align:end}}

/* v3.1 */
.f-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.f-links a{color:var(--ink-2)}.f-links a:hover{color:var(--gold)}
.cf-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cf-head output{font:500 19px var(--f);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cf-head output .sub2{color:var(--ink-3);font-size:14px;font-weight:400}
.cf input[type=range]{margin-top:18px;height:6px;touch-action:pan-y}
.calc-in .cf+.cf{margin-top:26px}
.dial .float svg{position:absolute}
@media (max-width:600px){
  .dial-items{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:calc(18px + env(safe-area-inset-right,0px))}
  html[dir="rtl"] .dial-items{left:calc(18px + env(safe-area-inset-left,0px))}
  .dial .float svg.ic-wa{width:24px;height:24px}
}
/* developers: two swipeable rows on phones instead of a tall stack */
@media (max-width:820px){
  #devStrip{display:grid!important;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;justify-content:start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 16px 10px;margin-inline:-16px;gap:10px!important;mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent)}
  #devStrip::-webkit-scrollbar{display:none}
  #devStrip .devchip{scroll-snap-align:start}
}
.cf-head label{white-space:nowrap}
@media (max-width:420px){.cf-head output{font-size:16.5px}.cf-head output .sub2{font-size:12.5px}.cf-head label{font-size:14px}}

/* mobile menu */
.menu-btn{all:unset;display:none;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border-radius:50%;position:relative;flex:none}
.menu-btn span{position:absolute;left:13px;right:13px;height:1.6px;border-radius:2px;background:var(--ink);transition:transform .45s var(--ease),top .45s var(--ease)}
.menu-btn span:first-child{top:18px}.menu-btn span:last-child{top:25px}
.menu-btn[aria-expanded="true"] span:first-child{top:21.5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{top:21.5px;transform:rotate(-45deg)}
.menu-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:860px){.menu-btn{display:block}}
.m-menu{position:relative;margin-top:10px;padding:10px;border-radius:26px;display:flex;flex-direction:column;animation:menuIn .45s var(--ease)}
.m-menu[hidden]{display:none}
.m-menu>a{padding:15px 18px;border-radius:16px;font-size:17px;color:var(--ink);transition:background .3s}
.m-menu>a:hover,.m-menu>a:focus-visible{background:rgba(255,255,255,.07);outline:none}
html[lang="ar"] .m-menu>a{font-family:var(--f-ar)}
.m-soc{display:flex;gap:10px;padding:10px 8px 6px;border-top:1px solid var(--line);margin-top:6px}
.m-soc a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--edge);color:var(--ink-2)}
.m-soc a svg{width:19px;height:19px}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.m-menu{animation:none}}
.result .mort-wa{display:flex!important;margin-top:18px;width:100%;justify-content:center;white-space:nowrap}
.mort-wa svg{width:19px;height:19px;color:#3FD07E}

@media (max-width:420px){.bar .sym{display:none}.wm{border-inline-start:0!important;padding-inline-start:2px!important}.menu-btn{width:40px;height:40px}.menu-btn span{left:11px;right:11px}.menu-btn span:first-child{top:16px}.menu-btn span:last-child{top:23px}.menu-btn[aria-expanded="true"] span{top:19.5px!important}}
@media (max-width:400px){.bar{gap:6px!important;padding-inline:10px 8px!important}.avatar{width:32px!important;height:32px!important}.wm b{font-size:12px!important;letter-spacing:.08em!important}.wm small{font-size:7px!important;letter-spacing:.2em!important}.lang{padding:8px 2px!important;font-size:13px!important}.tools{gap:2px!important}}
.calc>*,.calc-in,.cf{min-width:0}
.cf-head{flex-wrap:wrap;row-gap:4px}
@media (max-width:420px){.cf-head output .sub2{display:block;text-align:end;margin-top:3px}}
@media (max-width:560px){
.summary div{display:grid;grid-template-columns:1fr auto;grid-template-areas:"q e" "a a";row-gap:5px;column-gap:12px;align-items:start}
.summary div>span{grid-area:q;font-size:14px}
.summary div>b{grid-area:a;text-align:start;font-size:16.5px}
.summary div>.edit{grid-area:e;padding:4px 6px;margin-top:-4px}}

:root{--flow:cubic-bezier(.16,1,.3,1)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ai-launch[hidden]{display:none}
/* ===== AI assistant ===== */
.ai-launch{all:unset;box-sizing:border-box;position:fixed;z-index:36;bottom:calc(24px + env(safe-area-inset-bottom,0px));inset-inline-start:calc(24px + env(safe-area-inset-left,0px));display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;cursor:pointer;
  font:500 14px var(--f);color:var(--ink);background:rgba(12,17,23,.72);border:1px solid rgba(205,170,112,.45);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 16px 40px -16px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .7s var(--flow),opacity .5s,border-color .5s}
html[lang="ar"] .ai-launch{font-family:var(--f-ar)}
.ai-launch:hover{transform:translateY(-2px);border-color:var(--gold)}
.ai-launch:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ai-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(205,170,112,.6);animation:aiPulse 2.4s ease-out infinite}
@keyframes aiPulse{0%{box-shadow:0 0 0 0 rgba(205,170,112,.55)}70%{box-shadow:0 0 0 10px rgba(205,170,112,0)}100%{box-shadow:0 0 0 0 rgba(205,170,112,0)}}
@media (prefers-reduced-motion:reduce){.ai-dot{animation:none}}
html.ai-open .ai-launch{opacity:0;pointer-events:none}
.ai-panel{position:fixed;z-index:60;bottom:calc(20px + env(safe-area-inset-bottom,0px));inset-inline-start:calc(20px + env(safe-area-inset-left,0px));width:min(400px,calc(100vw - 32px));height:min(620px,calc(100svh - 110px));display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:rgba(10,14,20,.86);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 40px 90px -30px rgba(0,0,0,.9);animation:aiIn .6s var(--flow)}
.ai-panel[hidden]{display:none}
@keyframes aiIn{from{opacity:0;transform:translateY(18px) scale(.98)}}
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 14px 18px;border-bottom:1px solid var(--line)}
.ai-id{display:flex;align-items:center;gap:12px}
.ai-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#1B4A57,#0C1117);border:1px solid rgba(205,170,112,.5)}
.ai-av svg{width:24px;height:24px}
.ai-id b{display:block;font-weight:500;color:var(--ink);font-size:15.5px}
.ai-id small{display:flex;align-items:center;gap:6px;color:var(--ink-3);font-size:12.5px}
.ai-id small::before{content:"";width:7px;height:7px;border-radius:50%;background:#3FD07E}
.ai-x{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);border:1px solid var(--edge)}
.ai-x svg{width:14px;height:14px}.ai-x:focus-visible{outline:2px solid var(--gold)}
.ai-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.ai-m{max-width:86%;padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.6;color:var(--ink);word-wrap:break-word}
.ai-m.bot{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--line);border-end-start-radius:6px}
.ai-m.me{align-self:flex-end;background:linear-gradient(135deg,rgba(233,211,164,.95),rgba(201,165,107,.95));color:#14100A;border-end-end-radius:6px}
.ai-m.err{border-color:rgba(232,168,124,.4);color:#F1C9A8}
.ai-m.typing{display:flex;gap:5px;padding:14px 16px}
.ai-m.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:aiDot 1.2s infinite}
.ai-m.typing i:nth-child(2){animation-delay:.15s}.ai-m.typing i:nth-child(3){animation-delay:.3s}
@keyframes aiDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.ai-sugg{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px}
.ai-sugg:empty{display:none}
.ai-chip{all:unset;cursor:pointer;padding:8px 12px;border-radius:999px;border:1px solid rgba(205,170,112,.4);color:var(--ink-2);font-size:13px;transition:background .4s,color .4s}
.ai-chip:hover,.ai-chip:focus-visible{background:rgba(205,170,112,.14);color:var(--ink)}
.ai-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.ai-form textarea{flex:1;min-width:0;resize:none;max-height:120px;padding:12px 14px;border-radius:16px;border:1px solid var(--edge);background:rgba(255,255,255,.05);color:var(--ink);font:400 16px/1.4 var(--f);outline:none}
html[lang="ar"] .ai-form textarea{font-family:var(--f-ar)}
.ai-form textarea:focus{border-color:var(--gold)}
.ai-send{all:unset;cursor:pointer;flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#E9D3A4,#C9A56B);color:#14100A}
.ai-send svg{width:20px;height:20px}html[dir="rtl"] .ai-send svg{transform:scaleX(-1)}
.ai-send:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ai-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px 12px;font-size:11.5px;color:var(--ink-3)}
.ai-wa{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(37,194,106,.14);color:#7FD9A4;font-size:12.5px;font-weight:500}
.ai-wa svg{width:15px;height:15px}
@media (max-width:600px){
  .ai-launch{bottom:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-start:calc(16px + env(safe-area-inset-left,0px));padding:13px 16px;font-size:13.5px}
  .ai-panel{inset:auto 0 0 0;width:100%;height:min(86svh,680px);border-radius:26px 26px 0 0;bottom:0}
  html.ai-open .dial{opacity:0;pointer-events:none}
}

.ai-launch[hidden]{display:none}

/* compact assistant button on phones */
@media (max-width:600px){
  .ai-launch{width:54px;height:54px;padding:0;justify-content:center;border-radius:50%}
  .ai-launch>span:not(.ai-dot){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ai-launch .ai-dot{width:22px;height:22px;background:none;box-shadow:none;animation:none;position:relative}
  .ai-launch .ai-dot::before{content:"";position:absolute;inset:0;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 10h8M8 13h5' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 10h8M8 13h5' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
  .ai-launch::after{content:"";position:absolute;top:9px;inset-inline-end:9px;width:8px;height:8px;border-radius:50%;background:#3FD07E;box-shadow:0 0 0 2px #0C1117}
}

/* ===== AI button: transparent glass with a shimmer + sparkle mark ===== */
.ai-launch{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.26)!important;
  backdrop-filter:blur(18px) saturate(180%)!important;-webkit-backdrop-filter:blur(18px) saturate(180%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.06),0 14px 40px -14px rgba(0,0,0,.7),0 0 0 0 rgba(233,201,135,.0)!important;
  overflow:hidden;isolation:isolate;animation:aiGlow 3.6s ease-in-out infinite}
.ai-launch::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,244,214,.38) 48%,transparent 62%);background-size:260% 100%;background-position:130% 0;animation:aiShine 4.2s cubic-bezier(.45,0,.25,1) infinite}
.ai-launch .ai-dot{display:none!important}
.ai-spark{display:grid;place-items:center;width:20px;height:20px;flex:none;filter:drop-shadow(0 0 6px rgba(233,201,135,.75))}
.ai-spark svg{width:100%;height:100%;animation:aiTwinkle 3.6s ease-in-out infinite;transform-origin:50% 50%}
@keyframes aiShine{0%,35%{background-position:130% 0}75%,100%{background-position:-30% 0}}
@keyframes aiGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 40px -14px rgba(0,0,0,.7),0 0 0 0 rgba(233,201,135,0)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 40px -14px rgba(0,0,0,.7),0 0 26px 2px rgba(233,201,135,.28)}}
@keyframes aiTwinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(12deg)}}
@media (prefers-reduced-motion:reduce){.ai-launch,.ai-launch::before,.ai-spark svg{animation:none!important}}
@media (max-width:600px){
  .ai-launch{width:56px!important;height:56px!important;padding:0!important;border-radius:50%!important;justify-content:center}
  .ai-launch .ai-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ai-launch::after{display:none!important}
  .ai-spark{width:26px;height:26px}
}
@media (max-width:600px){.ai-launch>.ai-spark{position:static!important;width:26px!important;height:26px!important;clip:auto!important;overflow:visible!important;white-space:normal!important}}

.ai-src{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.ai-src a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

/* ===== Phones & tablets: same look, far less GPU work (smooth scrolling) ===== */
@media (hover:none) and (pointer:coarse), (max-width:820px){
  html{-webkit-tap-highlight-color:transparent}
  a,button,.opt,.chip,.tile,.devchip,label,select,input[type=range]{touch-action:manipulation}
  /* water background: soft gradients instead of 80px live blur */
  .blob{filter:none!important;border-radius:50%!important;will-change:transform;opacity:1!important}
  .blob.a{background:radial-gradient(closest-side,rgba(23,80,95,.62),rgba(23,80,95,.22) 55%,transparent)!important}
  .blob.b{background:radial-gradient(closest-side,rgba(205,170,112,.26),rgba(205,170,112,.08) 55%,transparent)!important}
  .blob.c{background:radial-gradient(closest-side,rgba(31,110,125,.5),rgba(31,110,125,.16) 55%,transparent)!important}
  .blob.d{background:radial-gradient(closest-side,rgba(200,225,230,.16),transparent)!important}
  .blob.a{width:120vw!important;height:120vw!important;top:-45vw!important}
  .blob.b{width:110vw!important;height:110vw!important}
  .blob.c{width:110vw!important;height:110vw!important}
  .caustics{display:none!important}
  /* glass without live backdrop blur on the many repeated elements */
  .glass,.chip,.opt,.nameinput,.reach a,.tile .stag,.reel .play,.btn.clear,.x,.devchip{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .glass{background:linear-gradient(135deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.03) 45%,rgba(255,255,255,.02) 70%,rgba(255,255,255,.045) 100%),rgba(12,18,24,.55)}
  .chip,.opt{background-color:rgba(14,20,27,.6)}
  .tile .stag{background:rgba(8,11,15,.78)}
  .x{background:rgba(8,11,15,.8)}
  /* fewer always-running paints */
  .ai-launch{animation:none!important}
  .ch-light{animation:none!important}
}
@media (hover:none) and (pointer:coarse) and (prefers-reduced-motion:no-preference), (max-width:820px) and (prefers-reduced-motion:no-preference){
  .blob.a{animation:wm1 26s ease-in-out infinite!important}
  .blob.b{animation:wm2 30s ease-in-out infinite!important}
  .blob.c{animation:wm2 34s ease-in-out infinite reverse!important}
  .blob.d{animation:none!important}
  @keyframes wm1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(10vw,8vw,0)}}
  @keyframes wm2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-9vw,7vw,0)}}
}

/* splash never blocks the page: it lifts on its own even if scripts are slow or fail */
.intro{animation:introAuto .5s ease 2.6s forwards}
@keyframes introAuto{to{opacity:0;visibility:hidden;pointer-events:none}}
.intro{transition:clip-path 1s cubic-bezier(.77,0,.18,1),opacity .5s ease .8s}
@media (hover:none) and (pointer:coarse), (max-width:820px){
  .top .bar.glass{backdrop-filter:blur(14px) saturate(150%)!important;-webkit-backdrop-filter:blur(14px) saturate(150%)!important;background:rgba(10,15,21,.62)}
}
/* assistant window: solid dark so text is always readable (incl. Instagram/Facebook in-app browsers) */
.ai-panel{background:#0B1016!important;background-image:linear-gradient(180deg,#101820,#0A0E13)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 30px 80px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)!important}
.ai-panel::before,.ai-panel::after{display:none!important}
.ai-head{background:#0E151C}
.ai-m.bot{background:#18212B!important;border-color:rgba(255,255,255,.1)!important;color:#F3EFE8}
.ai-chip{background:#121A22!important}
.ai-form{background:#0E151C}
.ai-form textarea{background:#141C25!important}
.ai-note{color:rgba(243,239,232,.62)!important}
/* menus and the project window: solid too */
.sheet.glass{background:linear-gradient(180deg,#111A22,#0A0F14)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* menu: back to its original see-through glass */
.m-menu.glass{background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.01) 40%,rgba(255,255,255,0) 64%,rgba(255,255,255,.03) 100%)!important;backdrop-filter:blur(10px) saturate(175%) brightness(1.1)!important;-webkit-backdrop-filter:blur(10px) saturate(175%) brightness(1.1)!important}
/* assistant on phones: a small neat window on the side, not a full sheet */
@media (max-width:600px){
  .ai-panel{inset:auto!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;inset-inline-start:calc(12px + env(safe-area-inset-left,0px))!important;width:min(330px,calc(100vw - 24px))!important;height:min(470px,calc(100svh - 170px))!important;border-radius:24px!important}
  .ai-head{padding:11px 12px 10px 14px}
  .ai-av{width:34px;height:34px}.ai-av svg{width:19px;height:19px}
  .ai-id{gap:9px}.ai-id b{font-size:14px}.ai-id small{font-size:11.5px}
  .ai-x{width:32px;height:32px}
  .ai-log{padding:12px 12px;gap:8px}
  .ai-m{font-size:14px;line-height:1.55;padding:9px 12px;border-radius:16px;max-width:90%}
  .ai-sugg{gap:6px;padding:0 12px 8px}
  .ai-chip{font-size:12.5px!important;padding:7px 11px!important}
  .ai-form{padding:8px 10px}
  .ai-form textarea{padding:9px 12px;font-size:16px;border-radius:14px}
  .ai-foot{padding:6px 12px 10px;font-size:10.5px}
  .ai-wa{padding:6px 10px;font-size:12px}
}