/* ShehabArt sub-pages: deep-navy ground, cyan light, glass panels. */
:root{
  --abyss:#010a1e; --deep:#061633; --glass:rgba(10,32,66,.42); --line:rgba(120,200,255,.16);
  --ink:#dff6ff; --mist:#8fb3c9; --cyan:#3ce8ff; --tide:#2a8cff;
  --display:"Urbanist","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Manrope","Segoe UI",system-ui,sans-serif;
  --ar:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--abyss)}
body{margin:0;min-height:100vh;background:var(--abyss);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow-x:hidden}
#sea{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 50% at 80% 0%,rgba(42,140,255,.16),transparent 70%),radial-gradient(60% 50% at 0% 100%,rgba(60,232,255,.08),transparent 70%)}
a{color:inherit}
.ar{font-family:var(--ar);direction:rtl}

.top{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding-block:calc(20px + env(safe-area-inset-top,0px)) 20px}
.home{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:18px}
.home svg{width:30px;height:30px}
.crumbs{display:flex;gap:6px;flex-wrap:wrap}
.crumbs a{font-size:13px;letter-spacing:.08em;text-decoration:none;color:var(--mist);padding:7px 14px;border-radius:999px;border:1px solid transparent;transition:color .25s,border-color .25s}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--cyan);border-color:var(--line);outline:none}
.crumbs a[aria-current]{color:var(--ink);border-color:var(--line);background:var(--glass)}

.wrap{max-width:1180px;margin:0 auto;padding-block:clamp(24px,6vh,64px) 80px}
.head{display:grid;gap:10px;margin-bottom:clamp(28px,5vh,52px)}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--cyan)}
.head h1{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(40px,7vw,84px);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.head h1 b{font-weight:600;background:linear-gradient(90deg,var(--cyan),var(--tide));-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{margin:0;max-width:52ch;color:var(--mist);font-size:16px}

.foot{max-width:1180px;margin:0 auto;padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;color:var(--mist);font-size:13px}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a{text-decoration:none}.foot a:hover{color:var(--cyan)}

.btn{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--display);letter-spacing:.04em;text-decoration:none;color:var(--cyan);
  padding:10px 20px;border-radius:999px;border:1.5px solid rgba(60,232,255,.55);background:rgba(1,10,30,.35);cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.btn:hover,.btn:focus-visible{background:var(--cyan);color:var(--abyss);box-shadow:0 0 28px rgba(60,232,255,.45);outline:none}
.btn.ghost{border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--abyss)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}