/* ==========================================================================
   site-chrome.css — the ONE header, mobile menu and footer for rayanalawi.com
   Generated markup lives in rayanalawi-update/chrome.py. Everything is scoped
   to .sc-* so it can't collide with page styles.
   ========================================================================== */
.sc-hdr,.sc-sheet,.sc-ft{
  --sc-d:#2A225D;--sc-n:#4A3B8C;--sc-p:#6A56B1;--sc-m:#C84FAA;--sc-pk:#E595D0;
  --sc-ease:cubic-bezier(.2,.8,.2,1);
  font-family:'Outfit',Tahoma,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  box-sizing:border-box;text-align:start;line-height:1.5;letter-spacing:normal;
}
.sc-hdr *,.sc-sheet *,.sc-ft *{box-sizing:border-box;margin:0;padding:0}
.sc-hdr[dir="rtl"],.sc-sheet[dir="rtl"],.sc-ft[dir="rtl"]{font-family:'Cairo','Outfit',Tahoma,sans-serif}
.sc-hdr a,.sc-sheet a,.sc-ft a{text-decoration:none;color:inherit}
.sc-hdr ul,.sc-ft ul{list-style:none}
.sc-hdr button,.sc-sheet button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sc-hdr svg,.sc-sheet svg,.sc-ft svg{display:block;fill:currentColor}
.sc-hdr :focus-visible,.sc-sheet :focus-visible,.sc-ft :focus-visible{outline:2px solid var(--sc-pk);outline-offset:3px;border-radius:8px}

/* ---------- header pill (matches the homepage nav) ---------- */
.sc-hdr{position:fixed;top:max(14px,env(safe-area-inset-top));left:0;right:0;z-index:9999;pointer-events:none;display:flex;justify-content:center;padding:0 24px}
.sc-nav{
  pointer-events:auto;position:relative;width:100%;max-width:940px;min-height:42px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:4px 10px 4px 10px;border-radius:999px;color:#fff;
  background:rgba(69,56,133,0.34);
  backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(229,149,208,0.26);box-shadow:0 8px 32px rgba(32,19,73,0.2);
  transition:background .3s,box-shadow .3s,border-color .3s;
}
.sc-nav::before{content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.10) 50%,transparent 70%) -150% 0/60% 100% no-repeat;transition:background-position .9s var(--sc-ease)}
.sc-nav:hover::before{background-position:250% 0}
.sc-nav:hover{border-color:rgba(201,76,172,0.5);box-shadow:0 12px 40px rgba(0,0,0,0.4),0 0 40px rgba(201,76,172,0.2)}
.sc-hdr.is-scrolled .sc-nav{background:rgba(42,34,93,0.86);box-shadow:0 10px 34px rgba(0,0,0,0.34)}

.sc-logo{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;flex:0 0 auto;transition:background .3s}
.sc-logo img{width:15px;height:auto;filter:brightness(0) invert(1);transition:transform .3s var(--sc-ease),filter .3s}
.sc-logo:hover{background:rgba(255,255,255,0.06)}
.sc-logo:hover img{transform:rotate(-8deg) scale(1.18);filter:brightness(0) invert(1) drop-shadow(0 0 10px var(--sc-pk))}

.sc-links{display:flex;align-items:center;gap:18px;margin-inline-start:6px;margin-inline-end:auto}
.sc-l{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 0;color:rgba(255,255,255,0.72);
  font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:color .25s}
.sc-l::after{content:"";position:absolute;inset-inline-start:0;bottom:4px;height:1.5px;width:0;background:linear-gradient(90deg,var(--sc-m),var(--sc-pk));transition:width .35s var(--sc-ease)}
.sc-l:hover,.sc-l.is-active{color:#fff}
.sc-l:hover::after,.sc-l.is-active::after{width:100%}
.sc-hdr[dir="rtl"] .sc-l{font-size:12px;letter-spacing:0;font-weight:700}
.sc-caret{font-size:10px;opacity:.7;transition:transform .25s,opacity .25s}

.sc-dd{position:relative}
.sc-dd::after{content:"";position:absolute;inset-inline:-14px;top:100%;height:16px}
.sc-drop{position:absolute;top:calc(100% + 8px);left:50%;min-width:230px;padding:10px;display:grid;gap:3px;
  border-radius:18px;background:rgba(46,36,94,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(229,149,208,0.2);box-shadow:0 24px 60px rgba(0,0,0,0.3),0 0 26px rgba(201,76,172,0.14);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .22s,transform .22s,visibility .22s;z-index:5}
.sc-drop a{display:block;padding:10px 12px;border-radius:12px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.78);white-space:nowrap;transition:background .2s,color .2s}
.sc-hdr[dir="rtl"] .sc-drop a{font-size:13px;letter-spacing:0;text-transform:none}
.sc-drop a:hover,.sc-drop a.is-active{background:linear-gradient(135deg,rgba(213,95,179,0.24),rgba(190,114,240,0.16));color:#fff}
.sc-dd.is-open .sc-drop,.sc-dd:focus-within .sc-drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sc-dd.is-open .sc-caret{transform:rotate(45deg);opacity:1}
@media (hover:hover) and (pointer:fine){
  .sc-dd:hover .sc-drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .sc-dd:hover .sc-caret{transform:rotate(45deg);opacity:1}
}

.sc-right{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.sc-bored{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;white-space:nowrap;background:linear-gradient(135deg,rgba(213,95,179,0.78),rgba(190,114,240,0.7));border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 10px 24px rgba(189,79,156,0.22);transition:transform .28s,box-shadow .28s,background .28s}
.sc-bored:hover{transform:translateY(-2px);background:linear-gradient(135deg,#d55fb3,#f08fd7 55%,#d39bff);box-shadow:0 14px 30px rgba(213,95,179,0.3)}
.sc-hdr[dir="rtl"] .sc-bored{font-size:12px;letter-spacing:0}
.sc-lang{display:inline-flex;align-items:center;min-height:30px;padding:4px 9px;border-radius:999px;font-weight:700;font-size:10px;color:rgba(255,255,255,0.75);white-space:nowrap;transition:background .3s,color .3s}
.sc-lang:hover{color:var(--sc-pk);background:rgba(255,255,255,0.07)}
.sc-sep{margin:0 3px;opacity:.4}
.sc-socs{display:flex;align-items:center;gap:7px}
.sc-soc{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,0.22);color:rgba(255,255,255,0.75);transition:border-color .3s,background .3s,transform .3s,color .3s}
.sc-soc svg{width:11px;height:11px}
.sc-soc:hover{border-color:var(--sc-pk);background:rgba(201,76,172,0.15);color:var(--sc-pk);transform:scale(1.1)}

.sc-hdr .sc-burger{display:none;position:relative;width:40px;height:34px;border-radius:999px;flex:0 0 auto;transition:background .25s}
.sc-burger:hover{background:rgba(255,255,255,0.07)}
.sc-burger span{position:absolute;left:11px;right:11px;height:1.6px;border-radius:2px;background:#fff;transition:transform .35s var(--sc-ease),opacity .25s,top .35s var(--sc-ease)}
.sc-burger span:nth-child(1){top:11px}.sc-burger span:nth-child(2){top:16.5px}.sc-burger span:nth-child(3){top:22px}
.sc-burger[aria-expanded="true"] span:nth-child(1){top:16.5px;transform:rotate(45deg)}
.sc-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.sc-burger[aria-expanded="true"] span:nth-child(3){top:16.5px;transform:rotate(-45deg)}

/* tighter desktop */
@media (max-width:1180px){.sc-links{gap:14px}.sc-socs{display:none}}

/* tablet + phone: logo · language · menu */
@media (max-width:1024px){
  .sc-hdr{top:max(10px,env(safe-area-inset-top));padding:0 12px}
  .sc-nav{max-width:none;min-height:48px;padding:5px 6px 5px 8px}
  .sc-hdr[dir="rtl"] .sc-nav{padding:5px 8px 5px 6px}
  .sc-links,.sc-bored,.sc-socs{display:none}
  .sc-logo{width:38px;height:38px}
  .sc-logo img{width:16px}
  .sc-hdr .sc-burger{display:block}
  .sc-lang{font-size:11px;padding:6px 11px;border:1px solid rgba(255,255,255,0.16)}
}

/* ---------- mobile sheet ---------- */
.sc-sheet{position:fixed;inset:0;z-index:9998;color:#fff;
  background:radial-gradient(120% 70% at 85% 0%,rgba(200,79,170,0.30),transparent 60%),linear-gradient(180deg,rgba(38,29,88,0.985),rgba(28,21,66,0.99));
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s var(--sc-ease),transform .35s var(--sc-ease),visibility .35s;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sc-sheet.is-open{opacity:1;visibility:visible;transform:none}
.sc-sheet-in{min-height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:28px;max-width:560px;margin:0 auto;
  padding:calc(84px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom))}
.sc-mnav{display:flex;flex-direction:column}
.sc-sheet .sc-m1,.sc-sheet .sc-acc-t{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:6px 4px;
  font-size:22px;font-weight:700;letter-spacing:-.01em;color:#fff;border-bottom:1px solid rgba(255,255,255,0.09);text-align:start}
.sc-sheet[dir="rtl"] .sc-m1,.sc-sheet[dir="rtl"] .sc-acc-t{font-size:21px;letter-spacing:0}
.sc-sheet .sc-acc.is-open .sc-acc-t{color:var(--sc-pk)}
.sc-m1.is-active{color:var(--sc-pk)}
.sc-m1::after{content:"";width:8px;height:8px;border-top:1.6px solid rgba(255,255,255,0.45);border-inline-end:1.6px solid rgba(255,255,255,0.45);transform:rotate(45deg);margin-inline-end:6px}
.sc-sheet[dir="rtl"] .sc-m1::after{transform:rotate(-45deg)}
.sc-acc-t i{position:relative;width:14px;height:14px;margin-inline-end:4px}
.sc-acc-t i::before,.sc-acc-t i::after{content:"";position:absolute;left:0;right:0;top:6px;height:1.8px;border-radius:2px;background:var(--sc-pk);transition:transform .3s var(--sc-ease)}
.sc-acc-t i::after{transform:rotate(90deg)}
.sc-acc.is-open .sc-acc-t i::after{transform:rotate(0)}
.sc-acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--sc-ease)}
.sc-acc.is-open .sc-acc-p{grid-template-rows:1fr}
.sc-acc-p>div{overflow:hidden;display:flex;flex-direction:column}
.sc-acc-p a{display:flex;align-items:center;min-height:46px;padding:4px 16px;margin:2px 0;border-radius:12px;font-size:15.5px;font-weight:600;color:rgba(255,255,255,0.8);transition:background .2s,color .2s}
.sc-acc.is-open .sc-acc-p>div{padding:8px 0 12px}
.sc-acc-p a:hover,.sc-acc-p a.is-active{background:rgba(229,149,208,0.12);color:#fff}
.sc-acc-p a.is-active{box-shadow:inset 3px 0 0 var(--sc-pk)}
.sc-sheet[dir="rtl"] .sc-acc-p a.is-active{box-shadow:inset -3px 0 0 var(--sc-pk)}

.sc-sheet-foot{display:flex;flex-direction:column;gap:14px}
.sc-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(135deg,#d55fb3,#f08fd7 55%,#d39bff);box-shadow:0 16px 34px rgba(213,95,179,0.32)}
.sc-sheet[dir="rtl"] .sc-cta{font-size:16px;letter-spacing:0}
.sc-cta svg{width:18px;height:18px}
.sc-sheet[dir="rtl"] .sc-cta svg{transform:scaleX(-1)}
.sc-sheet-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc-pill{display:flex;align-items:center;justify-content:center;min-height:46px;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:700;color:#fff;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);transition:background .25s,border-color .25s,transform .25s}
.sc-pill:hover{background:rgba(229,149,208,0.14);border-color:rgba(229,149,208,0.5)}
.sc-pill-hot{background:linear-gradient(135deg,rgba(213,95,179,0.35),rgba(190,114,240,0.28));border-color:rgba(229,149,208,0.4)}
.sc-sheet-socs{display:flex;justify-content:center;gap:14px;padding-top:4px}
.sc-soc-lg{width:46px;height:46px}
.sc-soc-lg svg{width:17px;height:17px}

html.sc-lock,html.sc-lock body{overflow:hidden!important;touch-action:none}
html.sc-lock .sc-sheet{touch-action:pan-y}

/* page offset for pages whose content sits in normal flow */
.sc-spacer{height:78px}
@media (max-width:1024px){.sc-spacer{height:72px}}

/* ---------- footer ---------- */
footer.sc-ft{position:relative;overflow:hidden;scroll-snap-align:end;color:#fff;margin:0;
  background:linear-gradient(135deg,#0D0A1F 0%,#1b1442 55%,#261d58 100%);
  padding:56px 24px calc(22px + env(safe-area-inset-bottom));border-top:1px solid rgba(229,149,208,0.14)}
footer.sc-ft::before{content:"";position:absolute;top:-60%;left:-10%;width:60%;height:220%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(201,76,172,0.12),transparent);transform:rotate(15deg);filter:blur(40px);animation:sc-glow 12s ease-in-out infinite}
@keyframes sc-glow{0%,100%{transform:rotate(15deg) translateX(0)}50%{transform:rotate(20deg) translateX(60px)}}
@media (prefers-reduced-motion:reduce){footer.sc-ft::before{animation:none}.sc-sheet,.sc-acc-p,.sc-drop{transition:none}}
.sc-ft-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:40px}
.sc-ft-logo{display:inline-flex;align-items:center;gap:11px;margin-bottom:14px}
.sc-ft-logo img{width:18px;height:auto;filter:brightness(0) invert(1)}
.sc-ft-logo span{font-weight:800;font-size:14px;letter-spacing:.14em}
.sc-ft[dir="rtl"] .sc-ft-logo span{letter-spacing:0;font-size:17px}
.sc-ft-brand p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,0.62);max-width:300px;margin-bottom:16px}
.sc-ft-contact{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;color:rgba(255,255,255,0.78);transition:color .2s;width:max-content;max-width:100%}
.sc-ft-contact svg{width:14px;height:14px;color:var(--sc-pk);flex:0 0 auto}
.sc-ft-contact:hover{color:#fff}
.sc-ft-col b{display:block;margin-bottom:14px;font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--sc-pk)}
.sc-ft[dir="rtl"] .sc-ft-col b{font-size:13px;letter-spacing:0}
.sc-ft-col ul{display:grid;gap:2px}
.sc-ft-col li a{display:inline-flex;align-items:center;min-height:32px;font-size:13.5px;color:rgba(255,255,255,0.72);transition:color .2s,transform .2s}
.sc-ft-col li a:hover{color:#fff;transform:translateX(3px)}
.sc-ft[dir="rtl"] .sc-ft-col li a:hover{transform:translateX(-3px)}
.sc-ft-col li a.is-active{color:#fff}
.sc-ft-socs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sc-fbtn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 14px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(135deg,rgba(189,79,156,0.22),rgba(190,114,240,0.18));border:1px solid rgba(255,255,255,0.14);transition:transform .25s var(--sc-ease),background .25s,border-color .25s}
.sc-fbtn svg{width:13px;height:13px}
.sc-fbtn:hover{transform:translateY(-2px);background:linear-gradient(135deg,#d55fb3,#f08fd7 55%,#d39bff);border-color:rgba(255,241,249,0.5)}
.sc-ft-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:280px}
.sc-ft-row .sc-pill{min-height:38px;font-size:12px}
.sc-ft-bot{position:relative;z-index:1;max-width:1180px;margin:40px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11.5px;color:rgba(255,255,255,0.5)}
.sc-top{color:rgba(255,255,255,0.65);transition:color .2s}
.sc-top:hover{color:var(--sc-pk)}

@media (max-width:1024px){
  .sc-ft-in{grid-template-columns:1fr 1fr;gap:34px 28px}
  .sc-ft-brand,.sc-ft-connect{grid-column:1/-1}
}
@media (max-width:600px){
  footer.sc-ft{padding:42px 20px calc(20px + env(safe-area-inset-bottom))}
  .sc-ft-in{gap:30px 18px}
  .sc-ft-brand{text-align:center;display:flex;flex-direction:column;align-items:center}
  .sc-ft-brand p{text-align:center}
  .sc-ft-col{text-align:start}
  .sc-ft-brand p{margin-inline:auto}
  .sc-ft-col b{margin-bottom:8px}
  .sc-ft-col li a{min-height:38px;font-size:14px}
  .sc-ft-connect{text-align:center}
  .sc-ft-socs{justify-content:center}
  .sc-ft-row{max-width:none}
  .sc-fbtn{min-height:44px;padding:10px 16px;font-size:12px}
  .sc-ft-bot{flex-direction:column;justify-content:center;text-align:center;gap:8px;margin-top:30px}
}