:root {
  --bg: #f5f7fa;
  --bg-soft: #fff;
  --ink: #1a2332;
  --ink-mid: #4a5568;
  --ink-dim: #6b7280;
  --primary: #1a4a7a;
  --primary-dark: #0f3458;
  --primary-light: #2c6ba1;
  --primary-soft: #e8f0f9;
  --gold: #b8923f;
  --gold-dark: #8a6d2c;
  --gold-soft: #faf3e0;
  --green: #16794d;
  --green-soft: #e6f4ec;
  --red: #c43f4f;
  --red-soft: #fce8eb;
  --orange: #c47820;
  --orange-soft: #fdf1e0;
  --line: #e5e7ec;
  --line-strong: #cbd2dc;
  --shadow-sm: 0 2px 8px rgba(26, 74, 122, .06);
  --shadow-md: 0 4px 16px rgba(26, 74, 122, .1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Tajawal', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

.header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 18px 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  display: grid;
  place-items: center;
  color: #fff;
  font-family: 'Reem Kufi', serif;
  font-size: 18px;
  font-weight: 700;
}

.logo-text {
  font-family: 'Reem Kufi', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}

.logo-divider {
  color: var(--line-strong);
  font-size: 18px;
}

.product-name {
  font-family: 'Reem Kufi', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--gold-dark);
}

.progress-display {
  font-size: 13px;
  color: var(--ink-dim);
  font-weight: 600;
}

.progress-display strong {
  color: var(--primary);
  font-size: 15px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 24px;
}

/* WELCOME */
.welcome-card {
  background: #fff;
  border-radius: 16px;
  padding: 50px 40px;
  box-shadow: var(--shadow-md);
  text-align: center;
  max-width: 720px;
  margin: 20px auto;
}

.welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--gold-soft);
  border: 1.5px solid var(--gold);
  border-radius: 100px;
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-bottom: 24px;
}

.welcome-card h1 {
  font-family: 'Reem Kufi', serif;
  font-size: 36px;
  color: var(--primary);
  margin-bottom: 16px;
  line-height: 1.3;
}

.welcome-card h1 .accent {
  color: var(--gold-dark);
}

.welcome-card .subtitle {
  color: var(--ink-mid);
  font-size: 16px;
  margin-bottom: 32px;
  line-height: 1.7;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 32px 0;
}

.info-item {
  padding: 18px 14px;
  background: var(--primary-soft);
  border-radius: 12px;
}

.info-item .num {
  font-family: 'Reem Kufi', serif;
  font-size: 28px;
  color: var(--primary);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.info-item .label {
  font-size: 12px;
  color: var(--ink-mid);
}

.market-select-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
  text-align: right;
}

.market-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.market-option {
  padding: 18px 16px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  text-align: right;
}

.market-option:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.market-option.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.market-option h3 {
  font-family: 'Reem Kufi', serif;
  font-size: 16px;
  color: var(--primary);
  margin-bottom: 6px;
}

.market-option p {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* EMAIL FIELD */
.email-section {
  margin: 24px 0 0;
  text-align: right;
}

.email-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  display: block;
}

.email-label span {
  color: var(--red);
  margin-right: 2px;
}

.email-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.email-icon {
  position: absolute;
  right: 14px;
  color: var(--ink-dim);
  font-size: 18px;
  pointer-events: none;
  z-index: 1;
}

.email-input {
  width: 100%;
  padding: 14px 44px 14px 16px;
  border: 2px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  font-family: 'Tajawal', sans-serif;
  color: var(--ink);
  background: #fff;
  direction: ltr;
  text-align: left;
  transition: border-color .2s;
}

.email-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 74, 122, .08);
}

.email-input.error {
  border-color: var(--red);
}

.email-input.valid {
  border-color: var(--green);
}

.email-error-msg {
  color: var(--red);
  font-size: 12px;
  margin-top: 6px;
  display: none;
}

.email-error-msg.show {
  display: block;
}

.email-hint {
  color: var(--ink-dim);
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.5;
}

.btn-start {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Reem Kufi', serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s;
  box-shadow: 0 6px 20px rgba(26, 74, 122, .25);
  margin-top: 24px;
}

.btn-start:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-start:disabled {
  background: var(--line-strong);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* QUESTION */
.question-wrap {
  background: #fff;
  border-radius: 16px;
  padding: 36px;
  box-shadow: var(--shadow-md);
  max-width: 760px;
  margin: 0 auto;
}

.progress-bar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 24px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  border-radius: 3px;
  transition: width .4s;
}

.question-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}

.question-num {
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 500;
}

.question-text {
  font-family: 'Reem Kufi', serif;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 8px;
  font-weight: 600;
}

.question-hint {
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.7;
  background: var(--primary-soft);
  padding: 12px 16px;
  border-radius: 8px;
  border-right: 3px solid var(--primary);
  margin-bottom: 24px;
}

.options {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.option {
  padding: 16px 20px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: right;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
  width: 100%;
}

.option:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.option.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.option-radio {
  width: 22px;
  height: 22px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: all .2s;
}

.option.selected .option-radio {
  border-color: var(--primary);
}

.option.selected .option-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
}

.number-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: var(--primary-soft);
  border: 2px solid var(--primary);
  border-radius: 12px;
  margin-bottom: 28px;
}

.number-input {
  flex: 1;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  text-align: right;
}

.number-input:focus {
  outline: none;
  border-color: var(--primary);
}

.number-input-suffix {
  font-size: 14px;
  color: var(--ink-mid);
  font-weight: 600;
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  font-family: 'Tajawal', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
}

.btn-primary:disabled {
  background: var(--line-strong);
  cursor: not-allowed;
}

.btn-outline {
  background: #fff;
  color: var(--primary);
  border: 1.5px solid var(--line-strong);
}

.btn-outline:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* RESULTS */
.results-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.results-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(184, 146, 63, .2), transparent 70%);
}

.score-display {
  position: relative;
  z-index: 2;
}

.score-circle {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 4px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: 'Reem Kufi', serif;
}

.score-number {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
}

.score-max {
  font-size: 14px;
  opacity: .7;
  margin-top: 4px;
}

.verdict-label {
  font-size: 12px;
  color: var(--gold-soft);
  letter-spacing: 2px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.verdict-text {
  font-family: 'Reem Kufi', serif;
  font-size: 28px;
  margin-bottom: 12px;
}

.verdict-desc {
  font-size: 15px;
  opacity: .9;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.category-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.cat-name {
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 8px;
  font-weight: 600;
}

.cat-score {
  font-family: 'Reem Kufi', serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
}

.cat-bar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.cat-bar div {
  height: 100%;
  border-radius: 3px;
  transition: width .6s;
}

.roadmap-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
}

.roadmap-card h2 {
  font-family: 'Reem Kufi', serif;
  font-size: 22px;
  color: var(--primary);
  margin-bottom: 6px;
}

.roadmap-card .subtitle {
  color: var(--ink-dim);
  font-size: 14px;
  margin-bottom: 24px;
}

.phases {
  display: grid;
  gap: 16px;
}

.phase {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  transition: all .2s;
}

.phase.recommended {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.phase-title {
  font-family: 'Reem Kufi', serif;
  font-size: 17px;
  color: var(--primary);
  font-weight: 700;
}

.phase.recommended .phase-title {
  color: var(--gold-dark);
}

.phase-duration {
  font-size: 12px;
  color: var(--ink-dim);
  background: #fff;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
}

.phase-recommended-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--gold);
  color: #fff;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.phase-desc {
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 12px;
}

.tasks-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
}

.tasks-card h2 {
  font-family: 'Reem Kufi', serif;
  font-size: 22px;
  color: var(--primary);
  margin-bottom: 6px;
}

.tasks-card .subtitle {
  color: var(--ink-dim);
  font-size: 14px;
  margin-bottom: 20px;
}

.task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 10px;
  margin-bottom: 8px;
  border-right: 3px solid var(--primary);
}

.task-num {
  width: 26px;
  height: 26px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.task-content {
  flex: 1;
  min-width: 0;
}

.task-title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  font-size: 14px;
}

.task-cat {
  font-size: 11px;
  color: var(--ink-dim);
}

.actions-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
}

/* EMAIL TOAST */
.email-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  justify-content: center;
  animation: slideUp .3s;
}

.email-toast.show {
  display: flex;
}

.email-toast.success {
  background: var(--green);
  color: #fff;
}

.email-toast.error {
  background: var(--red);
  color: #fff;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* LOADING */
.loading {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, .95);
  z-index: 1000;
  place-items: center;
}

.loading.active {
  display: grid;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  margin-top: 20px;
  color: var(--primary);
  font-weight: 600;
}

.field-validation-error {
  color: var(--red);
  font-size: 12px;
  margin-top: 6px;
  display: block;
}

@media(max-width:700px) {
  .header-inner {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .container {
    padding: 20px 14px;
  }

  .welcome-card {
    padding: 30px 22px;
  }

  .welcome-card h1 {
    font-size: 26px;
  }

  .question-wrap {
    padding: 24px 18px;
  }

  .question-text {
    font-size: 18px;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .market-options {
    grid-template-columns: 1fr;
  }

  .results-header {
    padding: 28px 18px;
  }

  .verdict-text {
    font-size: 22px;
  }

  .score-circle {
    width: 140px;
    height: 140px;
  }

  .score-number {
    font-size: 48px;
  }
}

/* ===== NAVBAR ===== */
.navbar{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:18px 24px;position:sticky;top:0;z-index:100;}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{color:var(--ink-mid);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s;}
.nav-links a:hover{color:var(--primary);}
.nav-cta{padding:10px 22px;background:var(--primary);color:white !important;border-radius:8px;font-weight:600;transition:all .2s;text-decoration:none;}
.nav-cta:hover{background:var(--primary-dark);}

/* ===== HERO ===== */
.hero{padding:80px 24px 60px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:-100px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(184,146,63,.08),transparent 70%);pointer-events:none;}
.hero::after{content:'';position:absolute;bottom:-200px;right:-100px;width:600px;height:600px;background:radial-gradient(circle,rgba(26,74,122,.06),transparent 70%);pointer-events:none;}
.hero-inner{max-width:1200px;margin:0 auto;text-align:center;position:relative;z-index:2;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:var(--gold-soft);border:1.5px solid var(--gold);border-radius:100px;color:var(--gold-dark);font-size:12px;font-weight:600;letter-spacing:1.5px;margin-bottom:28px;}
.hero-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold);}
.hero h1{font-family:'Reem Kufi',serif;font-size:clamp(36px,6vw,60px);color:var(--primary);line-height:1.2;margin-bottom:24px;font-weight:700;}
.hero h1 .accent{color:var(--gold-dark);}
.hero p{font-size:18px;color:var(--ink-mid);max-width:720px;margin:0 auto 40px;line-height:1.7;}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.hero-stats{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:800px;margin-left:auto;margin-right:auto;}
.hero-stat{text-align:center;}
.hero-stat .num{font-family:'Reem Kufi',serif;font-size:36px;color:var(--primary);font-weight:700;line-height:1;margin-bottom:6px;}
.hero-stat .label{font-size:13px;color:var(--ink-dim);}

/* ===== SECTIONS ===== */
.section{padding:80px 24px;}
.section-inner{max-width:1200px;margin:0 auto;}
.section-header{text-align:center;margin-bottom:60px;}
.section-tag{display:inline-block;padding:6px 14px;background:var(--primary-soft);color:var(--primary);border-radius:100px;font-size:12px;font-weight:600;letter-spacing:1.5px;margin-bottom:16px;text-transform:uppercase;}
.section h2{font-family:'Reem Kufi',serif;font-size:clamp(28px,4vw,40px);color:var(--primary);margin-bottom:16px;line-height:1.3;}
.section .lead{font-size:17px;color:var(--ink-mid);max-width:700px;margin:0 auto;line-height:1.7;}

/* ===== FEATURES ===== */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.feature-card{background:white;border:1px solid var(--line);border-radius:16px;padding:32px 28px;transition:all .3s;box-shadow:var(--shadow-sm);}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(26,74,122,.15);border-color:var(--gold);}
.feature-icon{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:grid;place-items:center;margin-bottom:20px;color:white;}
.feature-card:nth-child(2) .feature-icon{background:linear-gradient(135deg,var(--gold),#d4a85a);}
.feature-card:nth-child(3) .feature-icon{background:linear-gradient(135deg,var(--green),#1d9961);}
.feature-card:nth-child(4) .feature-icon{background:linear-gradient(135deg,var(--red),#d8546a);}
.feature-card h3{font-family:'Reem Kufi',serif;font-size:20px;color:var(--ink);margin-bottom:12px;font-weight:700;}
.feature-card p{color:var(--ink-mid);font-size:14px;line-height:1.7;}

/* ===== PRICING ===== */
.comparison-bg{background:white;}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:900px;margin:0 auto;}
.pricing-card{background:white;border:2px solid var(--line);border-radius:20px;padding:40px 32px;transition:all .3s;position:relative;display:flex;flex-direction:column;}
.pricing-card.featured{border-color:var(--gold);box-shadow:0 20px 48px rgba(26,74,122,.2);background:linear-gradient(180deg,var(--gold-soft) 0%,white 30%);transform:scale(1.02);}
.featured-badge{position:absolute;top:-14px;right:32px;background:var(--gold);color:white;padding:6px 18px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:1.5px;}
.pricing-tag{font-size:13px;font-weight:600;color:var(--ink-dim);margin-bottom:8px;letter-spacing:1px;}
.pricing-card.featured .pricing-tag{color:var(--gold-dark);}
.pricing-name{font-family:'Reem Kufi',serif;font-size:28px;color:var(--primary);font-weight:700;margin-bottom:8px;}
.pricing-desc{color:var(--ink-mid);font-size:14px;margin-bottom:24px;line-height:1.7;min-height:44px;}
.pricing-amount{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;}
.price-num{font-family:'Reem Kufi',serif;font-size:48px;font-weight:700;color:var(--primary);line-height:1;}
.pricing-card.featured .price-num{color:var(--gold-dark);}
.price-currency{font-size:18px;color:var(--ink-mid);font-weight:600;}
.price-period{font-size:14px;color:var(--ink-dim);margin-bottom:28px;}
.pricing-features{list-style:none;margin-bottom:32px;flex:1;}
.pricing-features li{padding:10px 0;border-bottom:1px dashed var(--line);color:var(--ink);font-size:14px;display:flex;align-items:flex-start;gap:10px;}
.pricing-features li:last-child{border-bottom:none;}
.check-icon{width:20px;height:20px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;flex-shrink:0;font-size:11px;font-weight:700;margin-top:2px;}
.pricing-card.featured .check-icon{background:var(--gold);color:white;}
.feature-locked{color:var(--ink-dim);text-decoration:line-through;}
.feature-locked .check-icon{background:var(--line);color:var(--ink-dim);}
.pricing-cta{width:100%;padding:14px;background:var(--primary);color:white;border:none;border-radius:10px;font-family:'Reem Kufi',serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;display:block;text-align:center;}
.pricing-card.featured .pricing-cta{background:var(--gold);}
.pricing-card.featured .pricing-cta:hover{background:var(--gold-dark);}
.pricing-cta:hover{background:var(--primary-dark);color:white;}

/* ===== FAQ ===== */
.faq-section{background:var(--bg-soft);}
.faq-grid{max-width:800px;margin:0 auto;}
.faq-item{background:white;border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin-bottom:12px;cursor:pointer;transition:all .2s;}
.faq-item:hover{border-color:var(--gold);}
.faq-question{display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq-question h4{font-family:'Reem Kufi',serif;font-size:16px;color:var(--ink);flex:1;font-weight:600;}
.faq-toggle{width:28px;height:28px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:18px;font-weight:700;transition:transform .3s;flex-shrink:0;}
.faq-item.open .faq-toggle{transform:rotate(45deg);}
.faq-answer{max-height:0;overflow:hidden;color:var(--ink-mid);font-size:14px;line-height:1.7;transition:max-height .3s,margin-top .3s;}
.faq-item.open .faq-answer{max-height:200px;margin-top:14px;}

/* ===== CTA ===== */
.cta-section{padding:80px 24px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));text-align:center;color:white;position:relative;overflow:hidden;}
.cta-section::before{content:'';position:absolute;top:-150px;left:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(184,146,63,.15),transparent 70%);}
.cta-inner{max-width:700px;margin:0 auto;position:relative;z-index:2;}
.cta-section h2{font-family:'Reem Kufi',serif;font-size:clamp(28px,4vw,40px);margin-bottom:18px;color:white;}
.cta-section p{font-size:17px;opacity:.92;margin-bottom:32px;line-height:1.7;}
.btn-gold{padding:16px 36px;background:var(--gold);color:white;border:none;border-radius:10px;font-family:'Reem Kufi',serif;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-flex;align-items:center;gap:10px;box-shadow:0 6px 20px rgba(184,146,63,.4);}
.btn-gold:hover{background:var(--gold-dark);transform:translateY(-2px);color:white;}

/* ===== FOOTER ===== */
footer{background:var(--ink);color:white;padding:50px 24px 30px;}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:30px;}
.footer-brand .logo-text{color:white;}
.footer-brand .product-name{color:var(--gold);}
.footer-brand p{margin-top:14px;color:rgba(255,255,255,.7);font-size:14px;line-height:1.7;max-width:320px;}
.footer-col h4{font-family:'Reem Kufi',serif;font-size:14px;margin-bottom:14px;color:var(--gold);}
.footer-col a{display:block;color:rgba(255,255,255,.7);text-decoration:none;font-size:13px;padding:5px 0;transition:color .2s;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{max-width:1200px;margin:0 auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:rgba(255,255,255,.5);font-size:13px;}

/* ===== AUTH FORMS ===== */
.auth-wrap{max-width:480px;margin:40px auto;padding:0 20px;}
.auth-card{background:white;border-radius:16px;padding:40px 36px;box-shadow:var(--shadow-md);border:1px solid var(--line);}
.auth-card h2{font-family:'Reem Kufi',serif;font-size:28px;color:var(--primary);text-align:center;margin-bottom:8px;}
.auth-card .auth-sub{text-align:center;color:var(--ink-mid);font-size:14px;margin-bottom:28px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.form-group label .req{color:var(--red);margin-right:2px;}
.form-input{width:100%;padding:12px 16px;border:2px solid var(--line);border-radius:10px;font-size:15px;font-family:'Tajawal',sans-serif;color:var(--ink);background:white;transition:border-color .2s;}
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,74,122,.08);}
.form-input.ltr{direction:ltr;text-align:left;}
.form-actions{margin-top:24px;}
.btn-auth{width:100%;padding:14px;background:var(--primary);color:white;border:none;border-radius:10px;font-family:'Reem Kufi',serif;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;}
.btn-auth:hover{background:var(--primary-dark);}
.auth-footer{text-align:center;margin-top:18px;font-size:14px;color:var(--ink-mid);}
.auth-footer a{color:var(--primary);font-weight:600;text-decoration:none;}
.auth-footer a:hover{text-decoration:underline;}
.auth-errors{background:var(--red-soft);border:1px solid var(--red);border-radius:8px;padding:12px 16px;margin-bottom:18px;color:var(--red);font-size:13px;}

/* ===== DASHBOARD ===== */
.dash-container{max-width:1100px;margin:0 auto;padding:30px 24px;}
.dash-header{margin-bottom:32px;}
.dash-header h1{font-family:'Reem Kufi',serif;font-size:28px;color:var(--primary);margin-bottom:4px;}
.dash-header p{color:var(--ink-mid);font-size:15px;}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-bottom:28px;}
.dash-card{background:white;border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow-sm);transition:all .2s;}
.dash-card:hover{box-shadow:var(--shadow-md);}
.dash-card .dc-label{font-size:13px;color:var(--ink-dim);font-weight:600;margin-bottom:6px;}
.dash-card .dc-value{font-family:'Reem Kufi',serif;font-size:28px;color:var(--primary);font-weight:700;line-height:1;}
.dash-card .dc-sub{font-size:12px;color:var(--ink-dim);margin-top:6px;}
.dash-card.gold{border-color:var(--gold);background:linear-gradient(135deg,var(--gold-soft),white);}
.dash-card.gold .dc-value{color:var(--gold-dark);}
.dash-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;}
.session-list{background:white;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden;}
.session-list h3{font-family:'Reem Kufi',serif;font-size:18px;color:var(--primary);padding:20px 24px 0;margin-bottom:16px;}
.session-row{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid var(--line);transition:background .2s;}
.session-row:last-child{border-bottom:none;}
.session-row:hover{background:var(--primary-soft);}
.session-info{flex:1;}
.session-market{font-size:12px;color:var(--ink-dim);}
.session-score{font-family:'Reem Kufi',serif;font-size:22px;font-weight:700;color:var(--primary);}
.session-date{font-size:12px;color:var(--ink-dim);}
.session-link{font-size:13px;color:var(--primary);font-weight:600;text-decoration:none;}
.session-link:hover{text-decoration:underline;}

/* ===== TEMPLATES ===== */
.tmpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.tmpl-card{background:white;border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:all .2s;}
.tmpl-card:hover{box-shadow:var(--shadow-md);border-color:var(--gold);}
.tmpl-card.locked{opacity:.7;}
.tmpl-icon{width:48px;height:48px;border-radius:12px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary);font-size:22px;margin-bottom:14px;}
.tmpl-card h3{font-family:'Reem Kufi',serif;font-size:17px;color:var(--ink);margin-bottom:8px;font-weight:700;}
.tmpl-card p{color:var(--ink-mid);font-size:13px;line-height:1.6;flex:1;margin-bottom:14px;}
.tmpl-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.tmpl-cat{font-size:11px;background:var(--gold-soft);color:var(--gold-dark);padding:3px 10px;border-radius:100px;font-weight:600;}
.tmpl-type{font-size:11px;color:var(--ink-dim);font-weight:600;text-transform:uppercase;}
.tmpl-btn{width:100%;padding:10px;background:var(--primary);color:white;border:none;border-radius:8px;font-family:'Tajawal',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;display:block;text-align:center;}
.tmpl-btn:hover{background:var(--primary-dark);color:white;}
.tmpl-btn.locked-btn{background:var(--line-strong);cursor:not-allowed;}
.tmpl-btn.locked-btn:hover{background:var(--line-strong);}

/* ===== ALERT BANNER ===== */
.alert-banner{max-width:1200px;margin:12px auto;padding:14px 24px;border-radius:10px;font-size:14px;font-weight:600;text-align:center;}
.alert-banner.success{background:var(--green-soft);color:var(--green);border:1px solid var(--green);}
.alert-banner.error{background:var(--red-soft);color:var(--red);border:1px solid var(--red);}
.alert-banner.info{background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary);}

/* ===== SUBSCRIPTION MANAGE ===== */
.sub-card{background:white;border-radius:16px;padding:32px;box-shadow:var(--shadow-md);border:1px solid var(--line);max-width:700px;margin:20px auto;}
.sub-card h2{font-family:'Reem Kufi',serif;font-size:24px;color:var(--primary);margin-bottom:20px;}
.sub-detail{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;}
.sub-detail:last-child{border-bottom:none;}
.sub-label{color:var(--ink-dim);font-weight:600;}
.sub-value{color:var(--ink);font-weight:700;}
.sub-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .nav-links a:not(.nav-cta){display:none;}
  .nav-cta{padding:8px 16px;font-size:13px;}
  .hero{padding:50px 18px 40px;}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:24px;}
  .pricing-grid{grid-template-columns:1fr;gap:32px;}
  .pricing-card.featured{transform:none;}
  .footer-inner{grid-template-columns:1fr;gap:28px;}
  .dash-grid{grid-template-columns:1fr;}
  .auth-card{padding:28px 22px;}
  .checkout-grid{grid-template-columns:1fr !important;}
  .checkout-summary{order:2;}
  .checkout-form{order:1;}
}

/* ===== CHECKOUT ===== */
.checkout-container{max-width:1100px;margin:0 auto;padding:30px 24px;}
.checkout-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:start;}
.summary-card,.form-card{background:white;border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:var(--shadow-md);}
.summary-card h3,.form-card h3{font-family:'Reem Kufi',serif;font-size:22px;color:var(--primary);margin-bottom:20px;font-weight:700;}
.form-card .form-subtitle{color:var(--ink-mid);font-size:14px;margin-bottom:24px;margin-top:-12px;}
.summary-plan{display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--primary-soft);border-radius:12px;margin-bottom:24px;}
.plan-icon{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--gold));display:grid;place-items:center;color:white;flex-shrink:0;}
.summary-plan h4{font-family:'Reem Kufi',serif;font-size:18px;color:var(--primary);margin-bottom:4px;font-weight:700;}
.summary-plan p{color:var(--ink-mid);font-size:13px;line-height:1.5;}
.summary-details{margin-bottom:20px;}
.summary-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink-mid);}
.summary-row:last-child{border-bottom:none;}
.summary-row.highlight{color:var(--green);font-weight:600;}
.summary-total{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:12px;color:white;margin-bottom:24px;}
.summary-total span:first-child{font-size:16px;font-weight:600;}
.total-amount{font-family:'Reem Kufi',serif;font-size:32px;font-weight:700;line-height:1;}
.total-amount small{font-size:16px;font-weight:400;opacity:.8;}
.summary-features{margin-bottom:20px;}
.summary-features h5{font-family:'Reem Kufi',serif;font-size:14px;color:var(--ink);margin-bottom:10px;font-weight:600;}
.summary-features ul{list-style:none;}
.summary-features li{padding:6px 0;font-size:13px;color:var(--ink-mid);display:flex;align-items:center;gap:8px;}
.security-badges{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--line);}
.badge-item{font-size:12px;color:var(--ink-dim);display:flex;align-items:center;gap:8px;padding:6px 0;}
.form-footer{margin-top:20px;text-align:center;font-size:12px;color:var(--ink-dim);line-height:1.7;}
.form-footer a{color:var(--primary);text-decoration:none;font-weight:600;}
.form-footer a:hover{text-decoration:underline;}

/* Moyasar form overrides for RTL */
.mysr-form{min-height:200px;}
.mysr-form .moyasar-form{direction:ltr;}
.mysr-form .moyasar-form label{text-align:left;}