:root{
  --bg:#f4f7fb; --card:#ffffff; --ink:#0b2a3f; --muted:#5f7a91;
  --brand:#0a7; --brand-ink:#063; --accent:#006ea6;
  --cta:#f39c12; --cta-ink:#d68910; --ring:rgba(0,0,0,.08)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg); color:var(--ink); line-height:1.75;
  -webkit-text-size-adjust:100%;
}
a:focus-visible, button:focus-visible{outline:3px solid #2b95d6; outline-offset:2px; border-radius:8px}

.container{max-width:1100px;margin:0 auto;padding:24px}
.card{background:var(--card);border-radius:18px;box-shadow:0 10px 30px var(--ring);padding:28px}

/* ===== شريط العنوان (Ribbon) ===== */
.eyebrow{
  display:block;
  width:100%;
  background:linear-gradient(90deg, #e8f4ff, #dcefff);
  color:var(--accent);
  padding:14px 0;
  border-radius:10px;
  font-size:18px;
  font-weight:900;
  text-align:center;
  margin:0 auto 20px auto;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);
  letter-spacing:0.8px;
}

.hero{display:grid;gap:28px;align-items:center}
.hero h1{font-weight:900;font-size:clamp(26px,4vw,40px);margin:0 0 10px;color:#003366}
.hero p{font-size:clamp(16px,2.4vw,18px);color:var(--muted);margin:0}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

.btn{appearance:none;border:0;border-radius:12px;padding:14px 20px;font-weight:800;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.12);transition:transform .15s ease,filter .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brand)}
.btn-primary:hover{background:var(--brand-ink)}
.btn-accent{background:var(--cta)}
.btn-accent:hover{background:var(--cta-ink)}

/* ===== زر الكوبون (Ticket Style) ===== */
.btn.coupon-btn{
  position: relative;
  background:#ffe082;                
  color:#5a3b00;
  font-weight:900;
  padding-inline:18px 22px;
  border-radius:14px;
  border:2px dashed rgba(90,59,0,.32);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%),
    linear-gradient(90deg, #ffd54f, #ffc107 60%, #ffb300),
    repeating-linear-gradient(90deg, rgba(90,59,0,.35) 0 2px, transparent 2px 4px);
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: 0 0, 0 0, center;
  background-size: 100% 100%, 100% 100%, 18px 2px;
}
.btn.coupon-btn::before,
.btn.coupon-btn::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:12px; height:12px;
  background:var(--bg);
  border-radius:50%;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.02);
  pointer-events:none;
}
.btn.coupon-btn::before{ inset-inline-start:-7px; }
.btn.coupon-btn::after{  inset-inline-end:-7px;  }
.btn.coupon-btn:hover{transform:translateY(-2px);filter:brightness(1.02) saturate(1.05)}
.btn.coupon-btn:active{transform:translateY(0)}
.btn.coupon-btn:focus-visible{outline:3px solid #2b95d6; outline-offset:3px}
@keyframes couponPulse{0%,100%{box-shadow:0 6px 14px rgba(0,0,0,.12)}50%{box-shadow:0 10px 22px rgba(0,0,0,.18)}}
.btn.coupon-btn{animation: couponPulse 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.btn.coupon-btn{animation:none}}

/* ===== أزرار متساوية العرض ===== */
.actions .btn,
.section-cta .btn {
  flex: 1 1 0;
  text-align: center;
  justify-content: center;
  min-width: 200px;
}

section{margin:28px 0}
section h2{font-size:clamp(22px,3vw,30px);margin:0 0 14px;color:#003d66}
.muted{color:var(--muted)}

.pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:14px}
.pill{display:flex;gap:12px;align-items:flex-start;background:#fbfdff;border:1px solid #eef3f8;padding:14px;border-radius:14px}
.icon{flex:0 0 36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#eaf7ff;color:#036}

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.list li{display:flex;gap:10px}
.list .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:10px;flex:0 0 10px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:10px}
.step{background:#fff7e8;border:1px solid #ffe2b8;border-radius:12px;padding:14px}

.accordion{border-radius:14px;overflow:hidden;border:1px solid #e8edf3}
.acc-item + .acc-item{border-top:1px solid #e8edf3}
.acc-hd{width:100%;text-align:inherit;background:var(--card);padding:16px 18px;border:0;font:inherit;font-weight:800;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.acc-hd span{color:var(--muted);font-weight:700}
.acc-bd{padding:0 18px 16px 18px}
.acc-bd[hidden]{display:none}

.section-cta{margin-top:14px;display:flex;justify-content:center}

.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:stretch}
.price-card{border:2px solid #e9f0f6;border-radius:16px;padding:20px;background:var(--card)}
.price-tag{font-size:40px;font-weight:900;color:#0a7;display:flex;align-items:baseline;gap:8px}
.price-tag small{font-size:16px;color:var(--muted)}
.versus{display:grid;place-items:center}
.versus .big{font-weight:900;font-size:32px;color:#999}

.center{text-align:center}
.sticky-cta{position:sticky;bottom:10px;z-index:5}

footer{margin:36px 0 16px;color:var(--muted);text-align:center;font-size:14px}