/* ====== Reset & Base ====== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Noto Kufi Arabic",Tahoma,Arial,sans-serif;background:#08090b;color:#eef0f3;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer}

/* ====== Theme ====== */
:root{
  --bg:#08090b; --bg-2:#0d0f13; --panel:rgba(255,255,255,.06); --panel-2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.10); --text:#f3f4f6; --muted:#b9bdc7; --gold:#f5d06f; --gold-2:#e3b84a;
  --ok:#79ffa7; --warn:#ffd36b; --err:#ff7b7b; --radius-2xl:20px; --shadow:0 12px 40px rgba(0,0,0,.35);
  --blue:#5087ff;
  --but:linear-gradient(180deg, #ffc94b, #e4ba3c);
  --menu:#ffffff;
}

/* ====== Global animated background ====== */
.bg-anim{position:fixed;inset:-20%;z-index:-1;filter:blur(60px);opacity:.45;pointer-events:none}
.blob{position:absolute;width:50vmax;height:50vmax;border-radius:50%;mix-blend-mode:screen;animation:float 22s ease-in-out infinite}
.b1{background:radial-gradient(circle at 30% 30%, #f5d06f 0%, transparent 60%);left:-10%;top:-10%;animation-delay:0s}
.b2{background:radial-gradient(circle at 70% 40%, #8cc8ff 0%, transparent 60%);right:-15%;top:10%;animation-delay:4s}
.b3{background:radial-gradient(circle at 40% 70%, #b387ff 0%, transparent 65%);left:10%;bottom:-15%;animation-delay:8s}
@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%, -2%, 0) scale(1.05)}}

/* ====== Layout ====== */
.container{max-width:1220px;margin-inline:auto;padding:24px}
header.nav{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,rgba(8,9,11,.85),rgba(8,9,11,.45) 70%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 8px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:80px;height:80px;border-radius:0;background:none;border:none;display:inline-block;place-items:unset;box-shadow:none;position:relative;overflow:visible}
.logo::after{display:none}
@keyframes spin{to{transform:rotate(1turn)}}
.brand h1{font-size:18px;margin:0;color:var(--text);letter-spacing:.3px}

.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel);transition:.25s;display:inline-flex;align-items:center;gap:8px}
.chip:hover{transform:translateY(-2px);background:var(--but)}
.chip:active{transform:translateY(0)}
.menu-button{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--menu);transition:.25s;display:inline-flex;align-items:center;gap:8px}
.menu-button:hover{transform:translateY(-2px);background:var(--but)}
.menu-button:active{transform:translateY(0)}
.primary{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#181818;font-weight:800}

/* Mobile menu */
.menu-btn{display:none}
.drawer{display:none;position:fixed;inset:0 0 auto 0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:80}
.drawer .sheet{background:var(--bg-2);border-top:1px solid var(--border);padding:18px 22px;border-radius:18px 18px 0 0;box-shadow:var(--shadow)}

/* ====== Hero ====== */
.hero{position:relative;overflow:hidden}
.hero .inner{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:70px 0}
.title{font-size:35px;line-height:1.2;margin:0 0 10px}
.subtitle{color:var(--muted);margin:0 0 26px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.glass{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius-2xl);box-shadow:var(--shadow)}
.hero-card{padding:18px;animation:pop 700ms ease both}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

.showcase{aspect-ratio:16/10;border-radius:24px;border:1px solid var(--border);background:linear-gradient(145deg,#0f1014,#0b0c0e);display:grid;place-items:center;position:relative;overflow:hidden}
.grid-dots{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,0.06) 1px,transparent 0);background-size:22px 22px;border-radius:24px;mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.2))}
.showcase .pulse{position:absolute;inset:auto auto 16px 16px;padding:6px 10px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.06);font-size:12px;animation:blink 1.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.7}50%{opacity:1}}

/* ====== Sections ====== */
section{scroll-margin-top:90px}
.section{padding:44px 0}
.section h2{font-size:28px;margin:0 0 18px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{padding:18px;transform-style:preserve-3d;transition:transform .25s ease, background .25s ease}
.card:hover{transform:perspective(700px) rotateX(2deg) rotateY(-2deg)}
.card h3{margin:0 0 10px;font-size:18px}
.meta{font-size:13px;color:var(--muted)}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ====== Download panel ====== */
.dl-panel{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dl-tile{padding:18px;display:flex;flex-direction:column;gap:12px}
.dl-actions{display:flex;gap:10px;flex-wrap:wrap}
.tag{padding:6px 10px;border-radius:10px;background:rgba(255,255,255,0.06);border:1px solid var(--border);font-size:12px;color:var(--muted)}

/* ====== Code block ====== */
pre{margin:0;background:#0f1115;border:1px solid var(--border);padding:14px;border-radius:12px;overflow:auto}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* ====== Footer ====== */
footer{border-top:1px solid var(--border);padding:26px 0;color:var(--muted)}

/* ====== Modal ====== */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.5)}
.modal.open{display:flex}
.modal .box{width:min(720px,92vw);padding:18px}

#closeMenu {
  background: var(--menu);
  border: 1px solid var(--border);
}
#closeMenu:hover {
  background: var(--but);
  transform: translateY(-2px);
}
#closeMenu:active {
  transform: translateY(0);
}

/* ====== Responsive ====== */
@media (min-width: 641px){
  .menu-button {
    display: none !important;
  }
}
@media (max-width: 1100px){ .hero .inner{grid-template-columns:1fr} }
@media (max-width: 980px){ .cards{grid-template-columns:1fr 1fr} .dl-panel{grid-template-columns:1fr} }
@media (max-width: 640px){
  .title{font-size:34px}
  .cards{grid-template-columns:1fr}
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .showcase{aspect-ratio:16/11}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .blob,.logo::after,.hero-card,.card:hover,.reveal{animation:none;transform:none}
}