/* ============================================================
   سِنّ وَجَوَابُ — التنسيق الرئيسي
   تجربة موبايل أولاً — صفحات أفقية — تصميم فاخر
   ============================================================ */

:root {
  --teal-900: #0b3a42;
  --teal-800: #10505c;
  --teal-700: #15626f;
  --teal-500: #1f8a99;
  --green-500: #7ac143;
  --green-400: #93d64f;
  --lime-300: #b8e986;
  --ink: #062a30;
  --paper: #f4f9f7;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-brd: rgba(255, 255, 255, 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  background: #04181c;
  color: #fff;
}

/* ---------- إطار الهاتف على الشاشات الكبيرة ---------- */
#phone-shell {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 800px at 70% 20%, rgba(122, 193, 67, .12), transparent 60%),
    radial-gradient(1000px 700px at 20% 80%, rgba(31, 138, 153, .18), transparent 60%),
    #04181c;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 430px;
  max-height: 100%;
  overflow: hidden;
  background: #04181c;
}

@media (min-width: 520px) {
  #app {
    height: min(880px, 94vh);
    border-radius: 44px;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow:
      0 0 0 10px #0a0f11,
      0 0 0 12px rgba(255, 255, 255, .06),
      0 50px 120px -20px rgba(0, 0, 0, .8),
      0 0 90px rgba(122, 193, 67, .10);
  }
  #app::after { /* notch */
    content: '';
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 110px; height: 24px;
    background: #0a0f11;
    border-radius: 20px;
    z-index: 999;
  }
}

/* ---------- خلفيات الفيديو ---------- */
.bg-videos { position: absolute; inset: 0; z-index: 0; }
.bg-videos video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  filter: saturate(1.05);
  transform: scale(1.06); /* هامش للباراللاكس بدون حواف */
  will-change: transform, opacity;
}
.bg-videos video.active { opacity: 1; }

.bg-tint {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 24, 28, .82) 0%, rgba(6, 42, 48, .55) 40%, rgba(4, 24, 28, .88) 100%);
  transition: background 1s ease;
}

/* حبيبات ضوئية عائمة */
.particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.particles span {
  position: absolute;
  bottom: -20px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 233, 134, .9), rgba(122, 193, 67, 0));
  animation: floatUp linear infinite;
  opacity: .5;
}
@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0) scale(.6); opacity: 0; }
  12%  { opacity: .55; }
  100% { transform: translateY(-110vh) translateX(30px) scale(1.15); opacity: 0; }
}

/* ---------- كانفاس الموديل 3D (ثابت فوق الصفحات) ---------- */
#tooth-canvas {
  position: absolute; inset: 0;
  /* ⚠️ لازم مقاس CSS صريح: من غيره الكانفاس بياخد حجمه الداخلي
     (المضروب في pixelRatio) وفي RTL بيتثبّت يمين → السن كان بينزاح شمال وتحت */
  width: 100%; height: 100%;
  display: block;
  z-index: 5;
  pointer-events: none;
}

/* ---------- نظام الصفحات الأفقية (فيزياء Spring من JS) ---------- */
#pager {
  position: absolute; inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: row-reverse; /* RTL: الصفحة الجاية بتيجي من الشمال */
  height: 100%;
  will-change: transform;
  direction: ltr;
}
.page {
  position: relative;
  min-width: 100%;
  height: 100%;
  direction: rtl;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 20px 112px;
  gap: 10px;
  will-change: transform, opacity;
  /* الترانسفورم والشفافية بيتحكم فيهم JS فريم بفريم (باراللاكس + سكيل) */
}
.page:not(.current) { pointer-events: none; } /* مفيش لمس يتحجز من الصفحات الجانبية */

/* عناصر تدخل بتتابع عند ظهور الصفحة */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(.97);
  filter: blur(6px);
  transition: opacity .65s ease, transform .75s cubic-bezier(.2, .9, .25, 1.05), filter .65s ease;
}
.page.current .reveal { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.page.current .reveal:nth-child(1) { transition-delay: .18s; }
.page.current .reveal:nth-child(2) { transition-delay: .30s; }
.page.current .reveal:nth-child(3) { transition-delay: .42s; }
.page.current .reveal:nth-child(4) { transition-delay: .54s; }
.page.current .reveal:nth-child(5) { transition-delay: .66s; }

/* ---------- الهيدر الثابت ---------- */
#top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 20px 10px;
  pointer-events: none;
}
@media (min-width: 520px) {
  #top-bar { padding-top: 46px; } /* مساحة للنوتش في إطار الهاتف */
}
#top-bar .brand {
  display: flex; align-items: center; gap: 10px;
  pointer-events: auto;
}
#top-bar .brand img { width: 40px; height: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
#top-bar .brand b {
  font-family: 'Changa', 'Cairo', sans-serif;
  font-size: 17px; font-weight: 700;
  background: linear-gradient(120deg, #eafff0, var(--lime-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-count {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: 2px;
  font-weight: 700;
  direction: ltr;
}

/* ---------- عنوان 3D ---------- */
.title-3d {
  font-family: 'Changa', 'Cairo', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 11.5vw, 58px);
  line-height: 1.25;
  color: #f2fff5;
  text-shadow:
    0 1px 0 #9bd45e,
    0 2px 0 #85c24b,
    0 3px 0 #6ea93c,
    0 4px 0 #57902e,
    0 5px 0 #417722,
    0 7px 4px rgba(0, 0, 0, .45),
    0 14px 30px rgba(0, 0, 0, .55),
    0 0 60px rgba(122, 193, 67, .35);
  transform: perspective(600px) rotateX(8deg);
}
.subtitle-3d {
  font-family: 'Changa', 'Cairo', sans-serif;
  font-weight: 600;
  font-size: clamp(17px, 4.6vw, 21px);
  color: #cfeee0;
  text-shadow: 0 2px 0 rgba(6, 42, 48, .8), 0 6px 18px rgba(0, 0, 0, .6);
  letter-spacing: .5px;
}

/* عناوين الأقسام */
.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--lime-300);
  background: rgba(122, 193, 67, .12);
  border: 1px solid rgba(122, 193, 67, .35);
  padding: 7px 14px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
  letter-spacing: .3px;
}
.sec-tag i { font-size: 13px; }

.sec-title {
  font-family: 'Changa', 'Cairo', sans-serif;
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 800;
  line-height: 1.35;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(122, 193, 67, .8),
    0 3px 0 rgba(65, 119, 34, .55),
    0 8px 22px rgba(0, 0, 0, .6);
}
.sec-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--green-400), var(--lime-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.sec-desc {
  font-size: clamp(13.5px, 3.8vw, 15px);
  line-height: 1.85;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  max-width: 340px;
}

/* موبايل قصير — ضغط المسافات */
@media (max-height: 700px) {
  .page { padding-bottom: 100px; gap: 7px; }
  .glass-card { padding: 10px 11px; }
  .glass-card .ic { width: 32px; height: 32px; font-size: 14px; margin-bottom: 6px; }
  .glass-row { padding: 9px 12px; }
  .glass-row .ic { width: 34px; height: 34px; font-size: 14px; }
  .hero-logo { width: 58px; }
  .stat-box { padding: 8px 4px; }
  .stat-box b { font-size: 18px; }
}

/* ---------- كروت زجاجية ---------- */
.glass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.glass-card {
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border: 1px solid var(--glass-brd);
  border-radius: 18px;
  padding: 14px 13px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255,255,255,.15);
}
.glass-card .ic {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 16px;
  color: #06281e;
  background: linear-gradient(135deg, var(--green-400), var(--lime-300));
  box-shadow: 0 6px 16px rgba(122, 193, 67, .4);
  margin-bottom: 9px;
}
.glass-card h4 { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.glass-card p { font-size: 11.5px; line-height: 1.7; color: rgba(255,255,255,.66); }

.glass-row {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
  padding: 12px 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-row .ic {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 16px;
  color: #06281e;
  background: linear-gradient(135deg, var(--green-400), var(--lime-300));
  box-shadow: 0 6px 16px rgba(122, 193, 67, .35);
}
.glass-row h4 { font-size: 13.5px; font-weight: 800; }
.glass-row p { font-size: 11.5px; color: rgba(255,255,255,.65); line-height: 1.6; }
.v-stack { display: flex; flex-direction: column; gap: 9px; }

/* شارات أنواع الأسئلة */
.q-types { display: flex; gap: 8px; flex-wrap: wrap; }
.q-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800;
  padding: 9px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.q-chip i { color: var(--lime-300); }

/* ---------- الأزرار ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #05231a;
  background: linear-gradient(135deg, var(--green-400), var(--lime-300));
  border: none;
  border-radius: 100px;
  padding: 15px 34px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(122, 193, 67, .45), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary:active { transform: scale(.96); }
.btn-primary::after { /* لمعة متحركة */
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-25deg);
  animation: shine 3.2s ease infinite;
}
@keyframes shine { 0%, 60% { left: -80%; } 100% { left: 140%; } }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  font-family: 'Cairo', sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 100px;
  padding: 16px 20px;
  backdrop-filter: blur(14px);
  cursor: not-allowed;
  opacity: .75;
  position: relative;
}
.btn-google img { width: 22px; height: 22px; background: #fff; border-radius: 50%; padding: 3px; }
.btn-google.enabled {
  cursor: pointer;
  opacity: 1;
  transition: transform .2s, box-shadow .3s;
}
.btn-google.enabled:active { transform: scale(.97); }
.btn-google.loading { pointer-events: none; opacity: .7; }
.soon-badge {
  position: absolute;
  top: -10px;
  left: 14px;
  font-size: 10px;
  font-weight: 800;
  color: #06281e;
  background: linear-gradient(135deg, #ffd66b, #ffb347);
  padding: 3px 10px;
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(255, 179, 71, .5);
}

/* ---------- شريط التنقل السفلي ---------- */
#nav-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(4, 24, 28, .85) 55%);
}
.nav-btn {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 17px;
  color: #fff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .2s ease, background .3s ease, opacity .3s;
}
.nav-btn:active { transform: scale(.9); }
.nav-btn.primary {
  color: #05231a;
  background: linear-gradient(135deg, var(--green-400), var(--lime-300));
  border: none;
  box-shadow: 0 8px 24px rgba(122, 193, 67, .5);
}
.nav-btn[disabled] { opacity: .3; pointer-events: none; }

.dots { display: flex; gap: 7px; direction: ltr; }
.dots span {
  width: 8px; height: 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .28);
  transition: all .45s cubic-bezier(.2, .8, .2, 1);
  cursor: pointer;
}
.dots span.on {
  width: 26px;
  background: linear-gradient(90deg, var(--green-400), var(--lime-300));
  box-shadow: 0 0 12px rgba(122, 193, 67, .7);
}

/* تلميح السحب */
#swipe-hint {
  position: absolute;
  bottom: 96px; left: 0; right: 0;
  z-index: 55;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
#swipe-hint div {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.15);
  padding: 7px 16px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
  animation: hintSlide 2.2s ease-in-out infinite;
}
@keyframes hintSlide {
  0%, 100% { transform: translateX(0); opacity: .85; }
  50% { transform: translateX(-14px); opacity: 1; }
}

/* ---------- إحصائيات ---------- */
.stats-row { display: flex; gap: 10px; }
.stat-box {
  flex: 1;
  text-align: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 12px 6px;
  backdrop-filter: blur(10px);
}
.stat-box b {
  display: block;
  font-family: 'Changa', sans-serif;
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(120deg, var(--green-400), var(--lime-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-box small { font-size: 10.5px; color: rgba(255,255,255,.6); font-weight: 700; }

/* ---------- اللودر ---------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: radial-gradient(800px 500px at 50% 30%, #0d3d46, #04181c 70%);
  transition: opacity .8s ease, visibility .8s;
}
#loader.hide { opacity: 0; visibility: hidden; }
#loader img {
  width: 120px;
  animation: pulseLogo 1.6s ease-in-out infinite;
  filter: drop-shadow(0 10px 40px rgba(122, 193, 67, .4));
}
@keyframes pulseLogo {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
#loader .bar {
  width: 160px; height: 4px;
  border-radius: 100px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
#loader .bar i {
  display: block;
  width: 40%; height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--green-400), var(--lime-300));
  animation: loadSlide 1.1s ease-in-out infinite;
}
@keyframes loadSlide {
  0% { transform: translateX(160px); }
  100% { transform: translateX(-160px); }
}
#loader p { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.65); }

/* اللوجو الكبير في صفحة الهيرو */
.hero-logo {
  width: clamp(64px, 18vw, 88px);
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .5)) drop-shadow(0 0 40px rgba(122, 193, 67, .25));
  animation: heroFloat 4s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

/* خاتمة الصفحة الأخيرة */
.footer-note {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,.45);
  line-height: 1.8;
}
.footer-note b { color: var(--lime-300); }

/* ===== سلاسة الموقع ===== */
*{-webkit-tap-highlight-color:transparent}
button,.glass-row,.ex-opt,.exq-tool{touch-action:manipulation}
img{content-visibility:auto}
.glass-row,.bank-card,.sq-card{will-change:auto;backface-visibility:hidden}

/* ===== فوتر فريق الإنتاج Xio ===== */
.xio-footer{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:26px auto 10px;padding:18px 16px 14px;max-width:340px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,214,107,.18);
  border-radius:18px;text-align:center;
}
.xio-footer img{width:74px;height:auto;filter:drop-shadow(0 4px 14px rgba(255,214,107,.25))}
.xio-footer .xio-name{font-size:14px;font-weight:800;color:#ffd66b;letter-spacing:.5px}
.xio-footer .xio-sub{font-size:11px;color:#a8cfc3;margin-top:-4px}
.xio-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.xio-links a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;text-decoration:none;
  padding:7px 13px;border-radius:11px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:#cfe8e0;transition:background .18s;
}
.xio-links a:active{background:rgba(255,255,255,.12)}
.xio-links a.fb{color:#8ab8ff;border-color:rgba(138,184,255,.3)}
.xio-links a.tg{color:#7fd4f5;border-color:rgba(127,212,245,.3)}
.xio-links a.ph{color:#8fe8c5;border-color:rgba(143,232,197,.3)}