:root{
  --ink:#10172f;
  --ink-soft:#25304f;
  --paper:#f6f8fc;
  --paper-line:#e4e9f2;
  --paper-shadow:#dce3ef;
  --highlighter:#5b6cff;
  --highlighter-soft:#eef0ff;
  --chalk-green:#0f9f82;
  --chalk-green-soft:#e8f8f4;
  --marker-red:#df5365;
  --muted:#667085;
  --brand:#5968f4;
  --brand-dark:#3f4bd1;
  --surface:#ffffff;
}

body{
  background:
    radial-gradient(circle at 92% 4%,rgba(89,104,244,.10),transparent 24rem),
    radial-gradient(circle at 5% 34%,rgba(15,159,130,.08),transparent 22rem),
    var(--paper);
  color:var(--ink);
}

header{
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(228,233,242,.9);
  box-shadow:0 8px 30px rgba(16,24,47,.04);
}

nav.wrap{height:72px}
.logo{font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:800;letter-spacing:-.04em}
.logo .dot{
  width:12px;height:12px;background:linear-gradient(135deg,var(--brand),#8c96ff);
  box-shadow:0 0 0 5px rgba(89,104,244,.12)
}
.nav-links{gap:30px}
.nav-links a{color:#47516b;font-weight:600}
.nav-links a::after{background:var(--brand);border-radius:99px}
.nav-cta,.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff;border-radius:12px;box-shadow:0 12px 26px rgba(89,104,244,.22);position:relative;overflow:hidden
}
.nav-cta:hover,.btn-primary:hover{background:linear-gradient(135deg,#6775ff,var(--brand));transform:translateY(-2px)}
.btn-primary{box-shadow:0 12px 26px rgba(89,104,244,.22);padding:15px 26px}
.btn-primary:hover{box-shadow:0 16px 32px rgba(89,104,244,.28)}
.btn-secondary{border:1px solid #d8deea;background:#fff;border-radius:12px;color:var(--ink)}
.btn-secondary:hover{background:#f2f4ff;color:var(--brand-dark);border-color:#cbd1ff}

.hero{padding:94px 0 76px;position:relative;overflow:hidden;isolation:isolate}
.hero .wrap{gap:72px;position:relative;z-index:2}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(1px)}
.hero::before{
  width:360px;height:360px;right:-120px;top:-150px;
  background:radial-gradient(circle at 35% 35%,rgba(119,133,255,.28),rgba(89,104,244,.05) 60%,transparent 72%);
  animation:xplme-orb-one 11s ease-in-out infinite alternate
}
.hero::after{
  width:270px;height:270px;left:-90px;bottom:-120px;
  background:radial-gradient(circle at 55% 45%,rgba(31,194,159,.20),rgba(31,194,159,.04) 62%,transparent 73%);
  animation:xplme-orb-two 13s ease-in-out infinite alternate
}
.hero .wrap::before{
  content:'';position:absolute;inset:-80px -9vw;z-index:-1;pointer-events:none;opacity:.34;
  background-image:linear-gradient(rgba(89,104,244,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(89,104,244,.055) 1px,transparent 1px);
  background-size:58px 58px;mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 72%,transparent 100%);
  animation:xplme-grid-drift 18s linear infinite
}
@keyframes xplme-orb-one{to{transform:translate(-55px,45px) scale(1.12)}}
@keyframes xplme-orb-two{to{transform:translate(65px,-42px) scale(.92)}}
@keyframes xplme-grid-drift{to{background-position:58px 58px,58px 58px}}
.hero h1{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:clamp(2.4rem,4.7vw,4.2rem);line-height:1.2;letter-spacing:-.055em}
.hero h1 .mark{background:none;color:var(--brand);position:relative}
.hero h1 .mark::after{content:'';position:absolute;right:0;bottom:-6px;width:72%;height:5px;border-radius:99px;background:linear-gradient(90deg,var(--brand),#a8b0ff)}
.hero p.lead{font-size:1.08rem;line-height:1.95;color:#5d6881;max-width:590px}
.eyebrow{background:var(--highlighter-soft);color:var(--brand-dark);border:1px solid #dfe3ff;font-weight:700}
.eyebrow::before{color:var(--brand)}
.trust-line{background:rgba(255,255,255,.7);border:1px solid var(--paper-line);border-radius:14px;padding:10px 13px;max-width:600px}
.avatars span{background:linear-gradient(135deg,#18213f,#3d4b78);border-color:#fff}

.sheet-stage{height:480px}
.paper-card{
  background:rgba(255,255,255,.96);border:1px solid #e4e8f2;border-radius:24px;
  box-shadow:0 34px 80px -34px rgba(32,44,84,.42);padding:30px
}
.paper-card.main{transform:rotate(-1deg);animation:xplme-card-float 5.5s ease-in-out infinite}
.ghost-card{background:linear-gradient(135deg,#dfe3ff,#edf0ff);border:1px solid #cfd5ff;border-radius:24px}
.chat-bubble{background:#10172f;color:#fff;border:none;border-radius:16px;box-shadow:0 18px 40px rgba(16,23,47,.2);animation:xplme-bubble-float 4.6s ease-in-out .7s infinite}
@keyframes xplme-card-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(-.3deg)}}
@keyframes xplme-bubble-float{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.paper-card .wrong{text-decoration-color:#df5365}
.paper-card .right-line .hl{background:#edf0ff;color:#3542b4;border-radius:8px}
.check-badge{background:var(--chalk-green)!important;color:#fff!important}

section{padding:88px 0}
.section-head{max-width:720px}
.section-head h2,.tutor-copy h2,.tutor-cta h2{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:-.035em}
.steps{gap:18px}
.step,.subject-tab,.price-card,.tutor-card,.faq-item{
  background:rgba(255,255,255,.92);border:1px solid var(--paper-line);border-radius:20px;
  box-shadow:0 12px 34px rgba(25,36,72,.055)
}
.step{padding:28px}
.step::before{display:none}
.step-num{color:var(--brand);background:var(--highlighter-soft);border-radius:10px;padding:6px 9px}
.step:hover,.subject-tab:hover,.price-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(25,36,72,.10);border-color:#d5daff}
.subject-tab::after{color:var(--brand)}
.subject-tab .count{background:var(--chalk-green-soft);color:#087b65;border-radius:999px;padding:4px 10px}
.tutor-card{overflow:hidden}
.tutor-avatar{background:linear-gradient(135deg,var(--brand),#8290ff);color:#fff}
.stars{color:#f3a712}
.tutor-tags span{background:#f2f4f8;border-color:#e4e8f0;color:#47516b;border-radius:999px}
.book-btn,.price-cta{background:var(--brand);color:#fff;border-radius:11px}
.book-btn:hover,.price-cta:hover{background:var(--brand-dark)}
.price-card.featured{background:linear-gradient(160deg,#121a37,#202a55);border-color:#2d396c;box-shadow:0 28px 60px rgba(16,23,47,.2)}
.price-card.featured .badge{background:#9ff0dd;color:#075f4f}
.tutor-cta{background:linear-gradient(135deg,#111a39,#222d5d);border-radius:28px;box-shadow:0 28px 70px rgba(16,23,47,.2)}
.earn-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px);border-radius:18px}
.faq-item{overflow:hidden}
.faq-item[open]{border-color:#cfd5ff;box-shadow:0 18px 40px rgba(25,36,72,.08)}
footer{background:#0f1631}

/* الصفحة الرئيسية الديناميكية index.php */
.nav-actions{gap:14px}.nav-login{color:#4d5873;font-weight:700}
.hero-badge{background:var(--highlighter-soft);color:var(--brand-dark);border:1px solid #dfe3ff}
.hero h1 .hl{background:none!important;color:var(--brand);position:relative}
.hero h1 .hl::after{content:'';position:absolute;right:0;bottom:-5px;width:75%;height:5px;background:#aeb6ff;border-radius:99px}
.hero-btns{gap:14px}.btn-main{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-radius:12px;box-shadow:0 13px 28px rgba(89,104,244,.24);position:relative;overflow:hidden}
.btn-main::after,.btn-primary::after{content:'';position:absolute;inset:-40% auto -40% -45%;width:32%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:xplme-button-shine 5.2s ease-in-out infinite;pointer-events:none}
@keyframes xplme-button-shine{0%,58%{left:-45%}78%,100%{left:125%}}
.btn-main:hover{box-shadow:0 17px 34px rgba(89,104,244,.3)}
.btn-outline{background:#fff;border:1px solid #d8deea;border-radius:12px}.btn-outline:hover{background:#eef0ff;color:var(--brand-dark);border-color:#ccd2ff}
.stats-bar{background:linear-gradient(135deg,#101833,#202b59);padding:34px 0}
.stat-item .num{font-family:'IBM Plex Sans Arabic',sans-serif;color:#abb4ff}.stat-item .lbl{color:#c3cae0}
.steps-row{gap:16px;border:0;overflow:visible}.step-box{background:#fff;border:1px solid var(--paper-line)!important;border-radius:18px;padding:27px;box-shadow:0 10px 30px rgba(21,32,69,.045)}
.step-n{font-family:'IBM Plex Sans Arabic',sans-serif;color:#aeb6ff}.who{background:#fff}.who-card{background:#f8f9fc;border-color:var(--paper-line);border-radius:18px}.who-card a{color:var(--brand-dark)}
.trust-ic{background:var(--highlighter-soft);color:var(--brand-dark);border-radius:11px}.cta-band{background:linear-gradient(135deg,#111a39,#222d5d)}.btn-gold{background:#fff;color:var(--brand-dark);box-shadow:none;border-radius:12px}.btn-gold:hover{box-shadow:0 12px 26px rgba(0,0,0,.16)}

@media(max-width:760px){
  .hero{padding:52px 0 44px}
  .hero h1{font-size:2.35rem}
  .hero p.lead{font-size:.98rem}
  .hero-ctas{display:grid;grid-template-columns:1fr}
  .hero-ctas a{text-align:center}
  .trust-line{align-items:flex-start}
  section{padding:62px 0}
  .wrap{padding-inline:20px}
  .step,.subject-tab,.price-card{border-radius:17px}
  .steps-row{gap:12px}.step-box{border:1px solid var(--paper-line)!important}.stats-inner{gap:34px}
  .hero::before{width:250px;height:250px;right:-110px;top:-90px}.hero::after{width:210px;height:210px;left:-100px;bottom:-80px}
}

@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.hero .wrap::before,.paper-card.main,.chat-bubble,.btn-main::after,.btn-primary::after{animation:none!important}
}