/* El-Mokattam — «قريبًا» landing page. Night over the Mokattam hills, brand blue + red + a gold glow. */
:root{
  --navy:#0a1730; --blue:#2457c5; --sky:#7fb0ff; --red:#e3202d; --gold:#ffc94a; --ink:#f4f7ff; --muted:#aab8d6;
  --display:'Cairo',system-ui,sans-serif; --kufi:'Cairo',sans-serif; --body:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --mx:50%; --my:40%;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--navy);color:var(--ink);font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg__photo{position:absolute;inset:-4%;background:url(assets/hero.webp) center 70%/cover no-repeat;filter:saturate(1.15) brightness(.42);animation:kenburns 28s ease-in-out infinite alternate}
.bg__photo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,23,48,.92) 0%,rgba(10,23,48,.35) 38%,rgba(10,23,48,.55) 70%,rgba(10,23,48,.96) 100%),
  radial-gradient(120% 70% at 50% 110%,rgba(255,170,60,.22),transparent 60%)}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12) translateY(-1.5%)}}
.aurora{position:absolute;inset:0;mix-blend-mode:screen;opacity:.55;filter:blur(70px)}
.aurora i{position:absolute;border-radius:50%;width:46vmax;height:46vmax}
.aurora i:nth-child(1){background:#2457c5;top:-18vmax;right:-10vmax;animation:drift1 18s ease-in-out infinite alternate}
.aurora i:nth-child(2){background:#e3202d;bottom:-26vmax;left:-12vmax;opacity:.7;animation:drift2 22s ease-in-out infinite alternate}
.aurora i:nth-child(3){background:#7a3fd1;top:20%;left:30%;width:30vmax;height:30vmax;opacity:.45;animation:drift3 26s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-14vmax,10vmax) scale(1.15)}}
@keyframes drift2{to{transform:translate(16vmax,-8vmax) scale(.9)}}
@keyframes drift3{to{transform:translate(-10vmax,-12vmax) scale(1.2)}}
#sky{position:absolute;inset:0;width:100%;height:100%}
.spot{position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(127,176,255,.16),transparent 60%);transition:background .15s}
.grain{position:absolute;inset:-50%;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

/* ---------- header ---------- */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px clamp(16px,4vw,48px) 0}
.logo{width:clamp(120px,15vw,190px);filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));transform-style:preserve-3d;will-change:transform}
.pill{display:inline-flex;align-items:center;gap:8px;font:600 .88rem var(--body);padding:.5em 1em;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.pill b{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(227,32,45,.7);animation:ping 1.6s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(227,32,45,0)}100%{box-shadow:0 0 0 0 rgba(227,32,45,0)}}

/* ---------- hero ---------- */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 16px 26px;gap:8px}
.kicker{margin:0;font:500 clamp(.9rem,2.2vw,1.1rem) var(--kufi);color:var(--sky);letter-spacing:0;opacity:.95}
.title{margin:-.12em 0 -.18em;line-height:1.05;font-weight:400}
/* the word: an extruded 3D layer (::before, red → dark) under a shining white/gold fill (.title__fill) */
.title__word{position:relative;display:inline-block;font-family:var(--display);font-size:clamp(5.2rem,21vw,15rem);line-height:1.05}
.title__word::before{content:attr(data-text);position:absolute;inset:0;color:#e3202d;
  text-shadow:-.006em .006em 0 #d01a26,-.012em .012em 0 #c4141f,-.018em .018em 0 #b3101b,-.024em .024em 0 #9d0d17,-.03em .03em 0 #860b13,-.036em .036em 0 #6e0910,
    -.05em .07em .12em rgba(0,0,0,.55),0 0 .3em rgba(227,32,45,.35)}
.title__fill{position:relative;z-index:1;display:inline-block;
  background:linear-gradient(100deg,#fff 0%,#fff 30%,var(--gold) 45%,#fff3c9 50%,var(--gold) 55%,#fff 70%,#fff 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{from{background-position:120% 0}to{background-position:-130% 0}}
.rotator{margin:0;font:600 clamp(1.15rem,3.6vw,1.9rem) var(--body);color:#e6ecff}
.rot{display:inline-block;min-width:4.6em;padding:.05em .45em;margin:0 .15em;border-radius:12px;font-family:var(--display);font-weight:400;font-size:1.2em;
  color:#0a1730;background:linear-gradient(135deg,var(--gold),#ff9d3c);box-shadow:0 10px 30px rgba(255,170,60,.35);vertical-align:-.08em}
.soon{display:flex;align-items:baseline;gap:10px;margin-top:6px;font-family:var(--kufi);font-weight:700;font-size:clamp(1.6rem,5vw,2.6rem);letter-spacing:0}
.soon__word{background:linear-gradient(90deg,var(--sky),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.soon__dots{display:inline-flex;gap:6px}
.soon__dots i{width:10px;height:10px;border-radius:50%;background:var(--red);animation:bounce 1.2s ease-in-out infinite}
.soon__dots i:nth-child(2){animation-delay:.15s;background:#fff}.soon__dots i:nth-child(3){animation-delay:.3s;background:var(--sky)}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.6}40%{transform:translateY(-10px);opacity:1}}

/* counters */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(820px,100%);margin:14px 0 6px}
.stat{padding:14px 10px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);display:grid;gap:2px}
.stat b{font:400 clamp(1.6rem,4.4vw,2.4rem)/1.1 var(--display);color:#fff}
.stat span{font-size:.85rem;color:var(--muted);font-weight:600}

/* notify me */
.notify{position:relative;display:flex;gap:8px;width:min(560px,100%);margin-top:12px;padding:6px;border-radius:18px;background:rgba(255,255,255,.95);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.notify input:not(.hp){flex:1;min-width:0;border:0;outline:0;background:transparent;font:600 1rem var(--body);color:#0a1730;padding:.7em .9em}
.notify button{border:0;cursor:pointer;font:400 1.15rem var(--display);color:#fff;padding:.55em 1.1em;border-radius:13px;background:linear-gradient(135deg,var(--red),#ff4d58);box-shadow:0 10px 24px rgba(227,32,45,.45);white-space:nowrap;transition:transform .2s}
.notify button:hover{transform:translateY(-2px)}
.notify button:disabled{opacity:.7;cursor:wait}
.notify.is-done{background:rgba(25,164,99,.95)}
.notify.is-done input:not(.hp){color:#fff}
.hp{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;clip-path:inset(50%);pointer-events:none;padding:0!important;border:0!important}
.notify__msg{min-height:1.4em;margin:4px 0 0;font-weight:700;font-size:.95rem}
.notify__msg.ok{color:#7ff0b4}.notify__msg.err{color:#ffb3b8}

/* social */
.social{display:flex;gap:10px;margin-top:6px}
.soc{display:inline-flex;align-items:center;gap:8px;padding:.5em 1em;border-radius:999px;font-weight:700;font-size:.9rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);transition:transform .2s,background .2s}
.soc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.soc--fb svg{fill:currentColor;stroke:none}
.soc:hover{transform:translateY(-2px);background:rgba(255,255,255,.16)}
.soc--fb{background:#1877f2;border-color:#1877f2}
.soc.is-soon{opacity:.55;cursor:default}
.soc.is-soon::after{content:"قريبًا";font-size:.7rem;padding:.1em .5em;border-radius:6px;background:rgba(255,255,255,.18)}

/* features marquee (the viewport is LTR so the track scrolls smoothly; each item is RTL) */
.marquee{direction:ltr;overflow:hidden;border-block:1px solid rgba(255,255,255,.12);background:rgba(10,23,48,.6);backdrop-filter:blur(6px);padding:12px 0}
.marquee__track{display:flex;width:max-content;gap:0;animation:marquee 38s linear infinite}
.marquee__track span{direction:rtl;font:400 1.25rem var(--display);color:#dfe7ff;padding:0 22px;white-space:nowrap}
.marquee__track span i{font-style:normal;color:var(--gold);margin-inline-start:22px}
@keyframes marquee{to{transform:translateX(-50%)}}
.foot{text-align:center;padding:14px 16px calc(14px + env(safe-area-inset-bottom));font-size:.8rem;color:var(--muted)}

/* phones */
@media (max-width:640px){
  .top{padding-top:14px}
  .pill{font-size:.75rem;padding:.4em .8em}
  .stats{grid-template-columns:repeat(2,1fr)}
  .notify{flex-direction:column;border-radius:16px}
  .notify button{width:100%}
  .social{flex-wrap:wrap;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ================= title looks (?t=blue | neon | gold) — all keep moving: colours flow, the word floats and tilts with the pointer ================= */
.title{perspective:900px}
.title__word{transform-style:preserve-3d;will-change:transform}
@keyframes flow{from{background-position:0% 0}to{background-position:-300% 0}}
/* أ) أزرق اللوجو — white + the sign's blue, deep navy 3D */
.t-blue::before{color:#2b5fae;text-shadow:-.006em .006em 0 #24529a,-.012em .012em 0 #1f4787,-.018em .018em 0 #1a3d75,-.024em .024em 0 #153363,-.03em .03em 0 #102951,-.036em .036em 0 #0b1f40,
  -.05em .07em .14em rgba(0,0,0,.6),0 0 .35em rgba(91,140,220,.45)}
.t-blue .title__fill{background:linear-gradient(100deg,#fff 0%,#dbe8ff 18%,#7fb0ff 32%,#fff 46%,#cfe0ff 58%,#5b8ce0 72%,#fff 86%,#dbe8ff 100%);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;animation:flow 4s linear infinite}
/* ب) نيون — a glowing night sign that breathes and sometimes flickers */
.t-neon::before{display:none}
.t-neon .title__fill{background:none;color:#f4fbff;-webkit-text-fill-color:#f4fbff;
  text-shadow:0 0 .015em #fff,0 0 .05em #a6ecff,0 0 .12em #38b6ff,0 0 .26em #2457c5,0 0 .5em #2457c5,0 0 .9em rgba(36,87,197,.6);
  animation:neon 2.6s ease-in-out infinite,flicker 7s steps(1) infinite}
@keyframes neon{50%{text-shadow:0 0 .02em #fff,0 0 .07em #c8f3ff,0 0 .18em #5cc6ff,0 0 .38em #2f6be0,0 0 .7em #2457c5,0 0 1.2em rgba(36,87,197,.75)}}
@keyframes flicker{0%,100%{opacity:1}91%{opacity:1}92%{opacity:.35}93%{opacity:1}95%{opacity:.6}96%{opacity:1}}
/* ج) ذهبي فخم — metallic gold flowing over a bronze 3D body */
.t-gold::before{color:#b07d1c;text-shadow:-.006em .006em 0 #9e6e15,-.012em .012em 0 #8b5f10,-.018em .018em 0 #77500b,-.024em .024em 0 #634207,-.03em .03em 0 #4f3404,-.036em .036em 0 #3c2702,
  -.05em .07em .14em rgba(0,0,0,.6),0 0 .35em rgba(255,190,70,.35)}
.t-gold .title__fill{background:linear-gradient(100deg,#fff6d1 0%,#ffd76a 15%,#c8901c 30%,#fff1b8 45%,#e3a72f 60%,#fff6d1 75%,#c8901c 90%,#ffd76a 100%);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;animation:flow 3.5s linear infinite}
/* review label (only with ?label=1) */
.look-label{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9;font:400 1.4rem var(--display);padding:.3em 1em;border-radius:12px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25)}

/* ================= calmer layout (user: «رغي كتير») + the logo on a light card so the blue sign stands out ================= */
.top{justify-content:center;padding-top:22px}
.logo-card{display:inline-block;padding:10px 16px 8px;border-radius:20px;background:rgba(255,255,255,.94);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.6) inset;transform-style:preserve-3d}
.logo-card .logo{width:clamp(110px,12vw,150px);filter:none}
.hero{gap:14px}
.title{margin:.05em 0 -.1em}
.facts{margin:2px 0 0;font:600 .95rem var(--body);color:var(--muted)}
.facts b{font:400 1.25rem var(--display);color:#fff}.facts i{font-style:normal;margin:0 .5em;color:var(--red)}
.soc{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
.soc svg{width:20px;height:20px}
.soc.is-soon::after{content:none}
.soc.is-soon{opacity:.45}

/* ================= the title = the logo's own calligraphy (assets/word.svg, traced from logo.png) in 3D gold ================= */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.title{display:flex;flex-direction:column;align-items:center;margin:0;line-height:1}
.lw-wrap{position:relative;display:block;height:clamp(210px,36vh,400px);aspect-ratio:4156/3967;transform-style:preserve-3d;will-change:transform}
.lw{position:absolute;inset:0;-webkit-mask:url(assets/word.svg) center/contain no-repeat;mask:url(assets/word.svg) center/contain no-repeat}
/* bronze body: the masked shape sits inside .lw-depth, whose stacked drop-shadows extrude it down-left (filters on the parent are not cut by the mask) */
.lw-depth{position:absolute;inset:0;filter:drop-shadow(-1px 1px 0 #9e6e15) drop-shadow(-1px 1px 0 #8b5f10) drop-shadow(-1px 1px 0 #77500b) drop-shadow(-2px 2px 0 #634207) drop-shadow(-2px 2px 0 #4f3404) drop-shadow(-2px 2px 0 #3c2702)}
.lw--body{background:#b07d1c}
.lw-wrap{filter:drop-shadow(-10px 18px 26px rgba(0,0,0,.55)) drop-shadow(0 0 40px rgba(255,190,70,.25))}
/* metallic gold that keeps flowing */
.lw--fill{background:linear-gradient(115deg,#fff6d1 0%,#ffd76a 14%,#c8901c 28%,#fff1b8 42%,#e3a72f 56%,#fff6d1 70%,#c8901c 85%,#ffd76a 100%);background-size:100% 300%;animation:gold 4s linear infinite}
@keyframes gold{from{background-position:0 0}to{background-position:0 -300%}}
/* a light sweep that crosses the word every few seconds */
.lw--shine{background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);background-size:300% 100%;background-repeat:no-repeat;animation:sweep 4.5s ease-in-out infinite;mix-blend-mode:screen}
@keyframes sweep{0%,55%{background-position:150% 0}100%{background-position:-50% 0}}
.title__latin{margin-top:-.2em;font:800 clamp(1.1rem,2.6vw,1.6rem) var(--body);letter-spacing:.06em;color:#ffe6a6;text-shadow:0 2px 10px rgba(0,0,0,.6);direction:ltr}
/* Cairo everywhere else */
.rot{font-family:var(--body);font-weight:900}
.soon{font-weight:900}
.notify button{font:800 1.05rem var(--body)}
.facts b{font:900 1.2rem var(--body)}
.hero{padding-top:28px}
/* «تابعنا لحد ما نفتح» */
.fb-cta{display:inline-flex;align-items:center;gap:10px;padding:.7em 1.3em;border-radius:999px;background:#1877f2;color:#fff;font-weight:800;box-shadow:0 12px 30px rgba(24,119,242,.45);transition:transform .2s}
.fb-cta:hover{transform:translateY(-2px)}
.fb-cta svg{width:20px;height:20px;fill:currentColor;stroke:none}
.fb-cta b{font-size:1.1em}
@media (max-width:640px){.lw-wrap{height:min(34vh,300px);max-width:82vw}.fb-cta{font-size:.9rem;padding:.65em 1.1em;text-align:center}}

.hero{gap:10px;padding-top:18px}
.soon{margin-top:0}