/* ==========================================================================
   سَنَد | SANAD — Public pages (Landing, Auth, Registration Wizard)
   ========================================================================== */

/* -------------------------------------------------------- Public header */
.s-public-header {
  position: sticky; top: 0; z-index: var(--s-z-topbar);
  background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: all var(--s-normal) var(--s-ease);
}
.s-public-header.is-stuck { border-bottom-color: var(--s-line); box-shadow: var(--s-shadow-1); }
.s-public-header .s-container { display: flex; align-items: center; gap: var(--s-5); height: 76px; }
.s-public-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.s-public-nav a { padding: 8px 14px; border-radius: var(--s-radius-pill); font-size: var(--s-fs-sm); font-weight: 600; color: var(--s-ink-500); }
.s-public-nav a:hover { background: var(--s-green-50); color: var(--s-green-800); }
@media (max-width: 992px) { .s-public-nav { display: none; } }

/* ------------------------------------------------------------------ Hero */
.s-hero { position: relative; overflow: hidden; padding: var(--s-16) 0 var(--s-12); }
.s-hero::before {
  content: ''; position: absolute; inset-block-start: -220px; inset-inline-end: -180px;
  width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(27,148,85,.16), rgba(27,148,85,0) 62%);
  pointer-events: none;
}
.s-hero::after {
  content: ''; position: absolute; inset-block-end: -260px; inset-inline-start: -160px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, rgba(196,43,51,.12), rgba(196,43,51,0) 62%);
  pointer-events: none;
}
.s-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-12); align-items: center; position: relative; z-index: 1; }
.s-hero h1 { font-size: clamp(38px, 5.6vw, 62px); line-height: 1.15; margin-bottom: var(--s-4); letter-spacing: -1.5px; }
.s-hero h1 .s-hero-name {
  background: linear-gradient(120deg, var(--s-green-800), var(--s-green-600) 55%, var(--s-red-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s-hero-slogan { font-size: clamp(19px, 2.4vw, 25px); font-weight: 700; color: var(--s-ink-800); margin-bottom: var(--s-4); }
.s-hero-lead { font-size: var(--s-fs-md); color: var(--s-ink-500); line-height: 1.95; max-width: 560px; margin-bottom: var(--s-6); }
.s-hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-6); }
.s-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px;
  border-radius: var(--s-radius-pill); background: var(--s-green-100); color: var(--s-green-800);
  font-size: var(--s-fs-xs); font-weight: 700; margin-bottom: var(--s-4);
}
.s-eyebrow .s-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s-green-500); animation: s-pulse 2s infinite; }

/* Royal emblem hero visual */
.s-hero-visual { position: relative; display: grid; place-items: center; min-height: 440px; }
.s-hero-emblem { position: relative; display: grid; place-items: center; animation: s-emblem-float 7s ease-in-out infinite; }
@keyframes s-emblem-float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-14px);} }
.s-hero-emblem::before {
  content: ''; position: absolute; width: 330px; height: 330px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.28), rgba(212,175,55,0) 66%);
}
.s-hero-emblem::after {
  content: ''; position: absolute; width: 258px; height: 258px; border-radius: 50%;
  border: 1.5px dashed rgba(168,126,28,.45);
  animation: s-orbit 26s linear infinite;
}
@keyframes s-orbit { to { transform: rotate(360deg); } }
.s-hero-emblem .s-brand-mark-xl { box-shadow: inset 0 0 0 2px rgba(212,175,55,.6), 0 30px 70px rgba(23,18,7,.35); }
@media (max-width: 992px) {
  .s-hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .s-hero-visual { min-height: 300px; order: -1; }
  .s-hero-emblem .s-brand-mark-xl { width: 140px; height: 140px; border-radius: 36px; }
  .s-hero-emblem::before { width: 230px; height: 230px; }
  .s-hero-emblem::after { width: 186px; height: 186px; }
  .s-hero { padding: var(--s-8) 0; }
}

.s-hero-float {
  position: absolute; background: var(--s-surface); border: 1px solid var(--s-line);
  border-radius: var(--s-radius); box-shadow: var(--s-shadow-2); padding: 11px 15px;
  display: flex; align-items: center; gap: 10px; font-size: var(--s-fs-xs); font-weight: 700;
  animation: s-fade-up .8s var(--s-ease) both;
}
.s-hero-float i { font-size: 18px; }
.s-hero-float-1 { inset-block-start: 8%; inset-inline-start: -2%; animation-delay: .3s; }
.s-hero-float-2 { inset-block-end: 16%; inset-inline-end: -4%; animation-delay: .55s; }
.s-hero-float-3 { inset-block-end: 2%; inset-inline-start: 8%; animation-delay: .8s; }
@media (max-width: 992px) {
  .s-hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .s-hero-visual { min-height: 320px; order: -1; }
  .s-melon { width: min(280px, 70%); }
  .s-hero { padding: var(--s-8) 0; }
}

/* ------------------------------------------------------------ Stats band */
.s-stats-band {
  background: linear-gradient(135deg, #171207, #2E2716 55%, #1E1708);
  color: #F5EDD6; padding: var(--s-10) 0; position: relative; overflow: hidden; border-block: 1px solid rgba(212,175,55,.35);
}
.s-stats-band::after {
  content:''; position: absolute; inset: 0; opacity: .13;
  background-image: radial-gradient(circle, rgba(212,175,55,.8) 1.4px, transparent 1.5px);
  background-size: 34px 34px;
}
.s-stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5); position: relative; z-index: 1; }
.s-stats-grid > div { text-align: center; padding: var(--s-2); }
.s-stat-big { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -1px;
  background: var(--s-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.s-stat-cap { font-size: var(--s-fs-xs); color: rgba(255,255,255,.75); font-weight: 600; margin-top: 4px; }
@media (max-width: 900px) { .s-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }

/* --------------------------------------------------------------- Modules */
.s-mod-card {
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-lg);
  padding: var(--s-5); height: 100%; transition: all var(--s-normal) var(--s-ease); position: relative; overflow: hidden;
}
.s-mod-card:hover { transform: translateY(-4px); box-shadow: var(--s-shadow-2); border-color: var(--s-green-200); }
.s-mod-icon {
  width: 50px; height: 50px; border-radius: var(--s-radius); display: grid; place-items: center;
  font-size: 22px; background: var(--s-green-100); color: var(--s-green-700); margin-bottom: var(--s-3);
  transition: all var(--s-normal) var(--s-ease);
}
.s-mod-card:hover .s-mod-icon { background: var(--s-primary); color: #fff; transform: rotate(-6deg) scale(1.05); }
.s-mod-card h4 { font-size: var(--s-fs-md); margin-bottom: 5px; }
.s-mod-card p { font-size: var(--s-fs-sm); color: var(--s-ink-500); margin: 0; line-height: 1.8; }

.s-section-title { text-align: center; max-width: 660px; margin: 0 auto var(--s-8); }
.s-section-title h2 { margin-bottom: var(--s-2); }
.s-section-title p { color: var(--s-ink-500); font-size: var(--s-fs-md); margin: 0; }

.s-pill-label {
  display: inline-block; padding: 5px 15px; border-radius: var(--s-radius-pill);
  background: var(--s-red-50); color: var(--s-red-700); font-size: var(--s-fs-xs); font-weight: 700; margin-bottom: var(--s-3);
}

/* ------------------------------------------------------------- Showcase */
.s-showcase { background: var(--s-surface); border-block: 1px solid var(--s-line); padding: var(--s-16) 0; }
.s-showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: center; }
@media (max-width: 992px) { .s-showcase-grid { grid-template-columns: 1fr; gap: var(--s-8); } }
.s-feature-list { display: flex; flex-direction: column; gap: var(--s-4); }
.s-feature-item { display: flex; gap: var(--s-3); align-items: flex-start; }
.s-feature-check {
  width: 26px; height: 26px; border-radius: 50%; background: var(--s-green-100); color: var(--s-green-700);
  display: grid; place-items: center; flex: 0 0 auto; font-size: 13px; margin-top: 3px;
}
.s-feature-item h5 { margin: 0 0 2px; font-size: var(--s-fs-base); }
.s-feature-item p { margin: 0; font-size: var(--s-fs-sm); color: var(--s-ink-500); }

/* Fake browser frame for screens preview */
.s-browser { border-radius: var(--s-radius-lg); overflow: hidden; box-shadow: var(--s-shadow-3); border: 1px solid var(--s-line); background: var(--s-surface); }
.s-browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; background: var(--s-surface-2); border-bottom: 1px solid var(--s-line); }
.s-browser-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--s-line); }
.s-browser-url { flex: 1; text-align: center; font-size: 11px; color: var(--s-ink-400); background: var(--s-bg); border-radius: 99px; padding: 3px 12px; direction: ltr; }
.s-browser-body { padding: var(--s-4); background: var(--s-bg); }

/* ------------------------------------------------------------------- CTA */
.s-cta {
  background: linear-gradient(135deg, #2E2716, #14100A);
  color: #fff; border-radius: var(--s-radius-xl); padding: var(--s-12) var(--s-8);
  text-align: center; position: relative; overflow: hidden;
}
.s-cta::before {
  content:''; position: absolute; inset-block-start: -140px; inset-inline-start: -100px;
  width: 420px; height: 420px; border-radius: 50%; background: rgba(212,175,55,.16);
}
.s-cta > * { position: relative; z-index: 1; }
.s-cta h2 { color: #fff; }
.s-cta p { color: rgba(255,255,255,.8); max-width: 620px; margin-inline: auto; }

/* -------------------------------------------------------------- Quote/msg */
.s-quote {
  border-inline-start: 4px solid var(--s-red-600); padding: var(--s-4) var(--s-6);
  background: var(--s-surface); border-radius: var(--s-radius);
  font-size: var(--s-fs-md); line-height: 2; color: var(--s-ink-800); font-weight: 600;
}

/* ============================================================ Auth pages */
.s-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1.05fr; }
.s-auth-visual {
  background: linear-gradient(150deg, #171207, #33280D 58%, #1E1708);
  color: #fff; padding: var(--s-12); display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.s-auth-visual::after {
  content:''; position: absolute; inset: 0; opacity: .12;
  background-image: radial-gradient(circle, rgba(212,175,55,.7) 1.5px, transparent 1.6px);
  background-size: 32px 32px;
}
.s-auth-visual > * { position: relative; z-index: 1; }
.s-auth-visual h2 { color: #fff; font-size: var(--s-fs-2xl); }
.s-auth-visual p { color: rgba(255,255,255,.78); line-height: 1.95; }
.s-auth-points { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.s-auth-point { display: flex; gap: 11px; align-items: flex-start; font-size: var(--s-fs-sm); color: rgba(255,255,255,.9); }
.s-auth-point i { color: var(--s-red-500); font-size: 17px; margin-top: 2px; }
.s-auth-form { display: flex; align-items: center; justify-content: center; padding: var(--s-8) var(--s-6); background: var(--s-surface); }
.s-auth-inner { width: 100%; max-width: 430px; }
@media (max-width: 992px) {
  .s-auth { grid-template-columns: 1fr; }
  .s-auth-visual { display: none; }
  .s-auth-form { min-height: 100vh; background: var(--s-bg); }
  .s-auth-inner { background: var(--s-surface); padding: var(--s-6); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-1); border: 1px solid var(--s-line); }
}

.s-demo-accounts { background: var(--s-green-50); border: 1px dashed var(--s-green-200); border-radius: var(--s-radius); padding: var(--s-4); }
.s-demo-account {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px;
  border: 1px solid transparent; border-radius: var(--s-radius-sm); background: rgba(255,255,255,.7);
  cursor: pointer; font-family: var(--s-font); text-align: start; transition: all var(--s-fast) var(--s-ease);
}
.s-demo-account:hover { border-color: var(--s-green-500); background: #fff; transform: translateX(-3px); }
.s-demo-account .s-da-role { font-size: var(--s-fs-sm); font-weight: 700; color: var(--s-ink-900); }
.s-demo-account .s-da-cred { font-size: 11px; color: var(--s-ink-400); direction: ltr; text-align: start; }

/* OTP inputs */
.s-otp { display: flex; gap: 10px; justify-content: center; direction: ltr; }
.s-otp input {
  width: 54px; height: 62px; text-align: center; font-size: var(--s-fs-xl); font-weight: 800;
  border: 1.5px solid var(--s-line); border-radius: var(--s-radius); font-family: var(--s-font);
  background: var(--s-surface); color: var(--s-ink-900); transition: all var(--s-fast) var(--s-ease);
}
.s-otp input:focus { outline: none; border-color: var(--s-green-500); box-shadow: var(--s-shadow-focus); }
.s-otp input.is-filled { border-color: var(--s-green-500); background: var(--s-green-50); }
@media (max-width: 420px) { .s-otp input { width: 44px; height: 52px; font-size: var(--s-fs-lg); } }

/* ======================================================= Registration UI */
.s-wizard-shell { max-width: 940px; margin-inline: auto; }
.s-wizard-card { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-xl); box-shadow: var(--s-shadow-2); overflow: hidden; }
.s-wizard-body { padding: var(--s-8); }
.s-wizard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-8); border-top: 1px solid var(--s-line-soft); background: var(--s-surface-2); }
.s-wizard-step { display: none; animation: s-fade-up var(--s-normal) var(--s-ease); }
.s-wizard-step.is-active { display: block; }
.s-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--s-4); }
.s-form-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.s-form-full { grid-column: 1 / -1; }
@media (max-width: 720px) { .s-form-grid, .s-form-grid-3 { grid-template-columns: 1fr; } .s-wizard-body { padding: var(--s-5); } }

/* Photo uploader */
.s-photo-zone {
  border: 2px dashed var(--s-line); border-radius: var(--s-radius-lg); padding: var(--s-8);
  text-align: center; cursor: pointer; transition: all var(--s-fast) var(--s-ease); background: var(--s-surface-2);
}
.s-photo-zone:hover, .s-photo-zone.is-drag { border-color: var(--s-green-500); background: var(--s-green-50); }
.s-photo-preview { width: 168px; height: 168px; border-radius: 50%; margin: 0 auto var(--s-4); overflow: hidden; position: relative; background: var(--s-bg-alt); display: grid; place-items: center; }
.s-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.s-check-list { display: flex; flex-direction: column; gap: 10px; }
.s-check-row { display: flex; align-items: center; gap: 11px; font-size: var(--s-fs-sm); }
.s-check-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex: 0 0 auto; background: var(--s-bg-alt); color: var(--s-ink-300); }
.s-check-row.is-pass .s-check-icon { background: var(--s-success-soft); color: var(--s-success); }
.s-check-row.is-fail .s-check-icon { background: var(--s-red-50); color: var(--s-danger); }
.s-check-row.is-running .s-check-icon { background: var(--s-info-soft); color: var(--s-info); }
.s-check-row.is-running .s-check-icon i { animation: s-spin 1s linear infinite; }

/* Skills selector */
.s-skill-picker { border: 1.5px solid var(--s-line); border-radius: var(--s-radius); overflow: hidden; }
.s-skill-search { padding: var(--s-3); border-bottom: 1px solid var(--s-line-soft); background: var(--s-surface-2); }
.s-skill-list { max-height: 260px; overflow-y: auto; padding: var(--s-3); }
.s-skill-cat { font-size: var(--s-fs-xs); font-weight: 800; color: var(--s-ink-300); margin: var(--s-3) 0 var(--s-2); }
.s-skill-cat:first-child { margin-top: 0; }
.s-selected-box { min-height: 54px; padding: var(--s-3); background: var(--s-green-50); border-radius: var(--s-radius); border: 1px dashed var(--s-green-200); }