/* App landing pages — distinct themes */
:root{
  --app-bg:#f5f5f7;
  --app-ink:#1d1d1f;
  --app-muted:rgba(29,29,31,.62);
  --app-card:#fff;
  --app-green:#0FBF37;
  --app-orange:#E8890C;
  --app-cyan:#0FA3C2;
  --app-purple:#C982DE;
  --app-blue:#3E63DD;
  --app-saudi:#0C7A39;
  --font-app:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Readex Pro',system-ui,sans-serif;
}
body.app-page{background:var(--app-bg);color:var(--app-ink);font-family:var(--font-body);margin:0}
body.app-page a{color:inherit}

.app-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(18px,4vw,40px);background:rgba(245,245,247,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.06)}
.app-nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-app);font-weight:700;font-size:15px;letter-spacing:-.02em;text-decoration:none;color:var(--app-ink)}
.app-nav__brand img{width:28px;height:28px}
.app-nav__links{display:flex;align-items:center;gap:clamp(12px,2vw,28px);font-size:13px;font-weight:500}
.app-nav__links a{text-decoration:none;color:var(--app-muted)}
.app-nav__links a:hover{color:var(--app-ink)}
.app-nav__cta{background:var(--app-ink);color:#fff!important;padding:10px 16px;border-radius:980px;font-size:12px;font-weight:600}
.app-nav__back{font-size:12px;color:var(--app-muted);text-decoration:none;letter-spacing:.04em}

.app-hero{padding:clamp(56px,10vw,110px) clamp(18px,4vw,40px) clamp(40px,6vw,72px);max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:860px){.app-hero{grid-template-columns:1fr}}
.app-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:0 0 18px;color:var(--app-muted)}
.app-hero h1{font-family:var(--font-app);font-weight:700;font-size:clamp(40px,7vw,72px);line-height:.98;letter-spacing:-.035em;margin:0 0 12px}
.app-hero h1 .soft{font-weight:500;color:var(--app-muted)}
.app-hero .sub{font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--app-muted);max-width:36ch;margin:0 0 28px}
.app-hero__visual{border-radius:28px;overflow:hidden;background:#0b0b10;aspect-ratio:1;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 80px rgba(0,0,0,.12)}
.app-hero__visual img{width:100%;height:100%;object-fit:cover}
.app-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:980px;font-family:var(--font-app);font-weight:600;font-size:14px;text-decoration:none;border:0;cursor:pointer}
.app-btn--primary{background:var(--accent,var(--app-green));color:#fff}
.app-btn--ghost{background:transparent;border:1px solid rgba(0,0,0,.12);color:var(--app-ink)}
.app-note{font-size:12px;color:var(--app-muted);width:100%}

.app-section{padding:clamp(56px,9vw,100px) clamp(18px,4vw,40px);max-width:1120px;margin:0 auto}
.app-section h2{font-family:var(--font-app);font-size:clamp(28px,4vw,44px);letter-spacing:-.03em;line-height:1.08;margin:0 0 16px}
.app-section .label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent,var(--app-green));margin:0 0 12px}
.app-section p.lead{font-size:18px;line-height:1.65;color:var(--app-muted);max-width:54ch;margin:0 0 32px}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.feature-card{background:var(--app-card);border-radius:20px;padding:24px;border:1px solid rgba(0,0,0,.05);box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
.feature-card h3{font-family:var(--font-app);font-size:18px;margin:0 0 10px;letter-spacing:-.02em}
.feature-card p{margin:0;font-size:14px;line-height:1.6;color:var(--app-muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){.split{grid-template-columns:1fr}}
.split-card{border-radius:22px;padding:28px;background:#fff;border:1px solid rgba(0,0,0,.05)}
.split-card h3{font-family:var(--font-app);margin:0 0 12px;font-size:20px}
.split-card p{margin:0;color:var(--app-muted);line-height:1.6;font-size:14px}
.split-card--muted{background:#1d1d1f;color:#f5f5f7;border:0}
.split-card--muted p{color:rgba(245,245,247,.7)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:800px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border-radius:20px;padding:24px;border:1px solid rgba(0,0,0,.05)}
.step__n{font-family:var(--font-app);font-weight:700;font-size:13px;color:var(--accent,var(--app-green));letter-spacing:.08em;margin-bottom:12px}
.step h3{font-family:var(--font-app);font-size:20px;margin:0 0 8px;letter-spacing:-.02em}
.step p{margin:0;font-size:14px;line-height:1.6;color:var(--app-muted)}

.faq details{border-top:1px solid rgba(0,0,0,.08);padding:16px 0}
.faq summary{cursor:pointer;font-family:var(--font-app);font-weight:600;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:10px 0 0;color:var(--app-muted);font-size:14px;line-height:1.6}

.app-close{text-align:center;padding:clamp(72px,12vw,120px) clamp(18px,4vw,40px);background:#0b0b10;color:#f5f5f7}
.app-close h2{font-family:var(--font-app);font-size:clamp(32px,5vw,56px);letter-spacing:-.03em;margin:0 0 24px}
.app-close .app-btn--primary{background:#fff;color:#0b0b10}

.app-footer{padding:28px clamp(18px,4vw,40px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px;color:var(--app-muted);border-top:1px solid rgba(0,0,0,.06)}
.app-footer a{color:var(--app-muted);text-decoration:none;margin-right:14px}
.app-footer a:hover{color:var(--app-ink)}

/* Theme accents */
body.theme-wajib{--accent:#0FBF37}
body.theme-waraqa{--accent:#E8890C}
body.theme-qarar{--accent:#3E63DD;--app-bg:#F4F6FB}
body.theme-waqati{--accent:#0FA3C2;--app-bg:#F2FAFC}
body.theme-saudi{--accent:#0C7A39;--app-bg:#F3F7F4}
body.theme-duo{--accent:#E8890C;--app-bg:#fdfcfa}

/* Duo special */
.duo-hero{max-width:980px;margin:0 auto;padding:clamp(64px,10vw,120px) clamp(18px,4vw,40px);text-align:center}
.duo-hero h1{font-family:var(--font-app);font-size:clamp(36px,6.5vw,64px);letter-spacing:-.035em;line-height:1.05;margin:0 0 18px}
.duo-hero p{font-size:clamp(16px,2vw,20px);line-height:1.6;color:var(--app-muted);max-width:48ch;margin:0 auto 28px}
.duo-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:980px;margin:0 auto;padding:0 clamp(18px,4vw,40px) 80px}
@media (max-width:700px){.duo-cards{grid-template-columns:1fr}}
.duo-card{border-radius:24px;padding:28px;background:#fff;border:1px solid rgba(0,0,0,.06);text-align:left}
.duo-card h3{font-family:var(--font-app);margin:0 0 14px;font-size:22px}
.duo-card ul{margin:0;padding:0;list-style:none}
.duo-card li{padding:10px 0;border-top:1px solid rgba(0,0,0,.06);font-size:14px;color:var(--app-muted)}
.duo-card--wajib{box-shadow:0 0 0 1px rgba(15,191,55,.2)}
.duo-card--waraqa{box-shadow:0 0 0 1px rgba(232,137,12,.25)}

/* Dark portfolio chrome when linking back from apps on light pages is fine via .app-nav__back */