:root{
  --maxw:1120px;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow-3d:0 20px 60px rgba(0,0,0,.14);
  --primary:#fe0f0f;
  --surface:#f6f7fb;
  --muted:#5b6270;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; color:#1c212b; background:#fff; line-height:1.6}

.container{max-width:var(--maxw); margin-inline:auto; padding-inline:16px}

/* ===== Header ===== */
.header{position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #eef0f4}
.header-row{display:flex; align-items:center; justify-content:space-between; min-height:72px}
.brand{display:inline-flex; align-items:center; text-decoration:none}
.logo{display:block; width:clamp(120px,12vw,180px); height:auto} /* ← حل اللوجو الكبير */
.btn{display:inline-block; padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 8px 20px rgba(15,98,254,.25)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border:1px solid #dfe3ea; color:#1c212b}
.btn-ghost:hover{background:#f7f8fb}

/* Notice */
.notice{padding:10px 0; color:#5b6270}
.notice small{opacity:.9}

/* ===== Hero ===== */
.hero{background:radial-gradient(1000px 400px at 50% -100px,#eef3ff 0%,transparent 60%) #fff; padding:64px 0 40px}
.hero-3d{display:grid; gap:28px; align-items:center; grid-template-columns:1.1fr .9fr; perspective:1000px}
.hero-title{font-size:clamp(26px,5vw,44px); line-height:1.25; margin:0 0 12px}
.hero-description{color:var(--muted); margin:0 0 20px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-media{justify-self:center; transform-style:preserve-3d}
.hero-media img{
  display:block; width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow-3d);
  transform:rotateY(-8deg) rotateX(3deg) translateZ(0);
  transition:transform .5s ease, box-shadow .5s ease;
  will-change:transform;
}
.hero-media img:hover{transform:rotateY(-2deg) rotateX(0) translateZ(10px); box-shadow:0 30px 80px rgba(0,0,0,.18)}

/* ===== Features ===== */
.features{padding:48px 0; background:var(--surface)}
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feature-card{background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); border:1px solid #eef0f4}
.feature-image{display:block; width:100%; height:auto; border-radius:12px; margin-bottom:12px}
.feature-title{margin:0 0 8px}
.feature-description{margin:0; color:var(--muted)}
.tilt{transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease}
.tilt:hover{transform:translateY(-4px) rotateX(1.5deg) rotateY(-1.5deg); box-shadow:var(--shadow-3d)}

/* ===== Articles ===== */
.articles{padding:48px 0}
.section-title{margin:0 0 16px}
.article{background:#fff; border:1px solid #eef0f4; border-radius:12px; padding:18px; margin-bottom:14px}

/* ===== FAQ ===== */
.faq{padding:56px 0}
.faq .section-title{margin-bottom:16px}
.faq-item{border:1px solid #e6e9f0; border-radius:12px; padding:14px 16px; background:#fff; margin-bottom:10px}
.faq-question{margin:0 0 6px}
.faq-answer{margin:0; color:var(--muted)}

/* ===== Footer ===== */
.footer{border-top:1px solid #eef0f4; background:#fff; padding:24px 0; color:#4b5563}
.footer-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer-logo{display:block; width:clamp(120px,12vw,160px); height:auto}

/* ===== Responsive ===== */
@media (max-width:980px){
  .hero-3d{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .hero-media img,.tilt{transition:none}
}