/* ═══ وسن — نظام التصميم ═══
   هوية داكنة ملتزمة (تطبيق نوم = وضع ليلي دائم).
   موجة بيضاء على أسود · خط Baloo Bhaijaan 2 · ألوان النوم كلكنة بيانات فقط. */

@font-face {
  font-family: "Baloo";
  src: url("baloo.ttf") format("truetype");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --bg:        #000000;
  --bg-2:      #0B0C10;
  --panel:     #141519;
  --panel-2:   #1B1C22;
  --panel-3:   #0C0D10;
  --line:      #2A2B31;
  --ink:       #F2F5FB;
  --warm:      #CFD3DC;
  --muted:     #9A9FAC;
  --white:     #FFFFFF;
  /* توكنات النوم — تظهر فقط في البيانات */
  --beat:  #FF5A6E;
  --deep:  #5B8DEF;
  --rem:   #9B7BF3;
  --light: #3DBFAD;
  --good:  #7CE0A4;

  --maxw: 1080px;
  --radius: 18px;
  --font: "Baloo", "SF Arabic", "Geeza Pro", system-ui, -apple-system, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  direction: rtl;
  overflow-x: hidden;
}

/* خلفية فجر خفيفة أعلى الصفحة */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 80% at 50% -10%, #16171C 0%, #000000 60%);
  z-index: -1;
}

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ── تنقّل ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(0,0,0,0.55);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 20px; letter-spacing: .5px; }
.brand svg { width: 34px; height: 34px; }
.nav-links { display: flex; gap: 26px; font-size: 15px; }
.nav-links a { color: var(--muted); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 620px){ .nav-links { display: none; } }

/* ── أزرار ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 100px;
  font-family: var(--font); font-weight: 700; font-size: 16px;
  text-decoration: none; cursor: pointer; border: 0;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.btn-primary { background: var(--white); color: #000; box-shadow: 0 8px 30px rgba(255,255,255,.14); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,255,255,.22); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--warm); }

/* ── HERO ── */
.hero { text-align: center; padding: 92px 0 72px; }
.hero .wave-hero { width: min(340px, 78vw); height: auto; margin: 0 auto 30px; display: block; }
.hero .wave-hero path { stroke-dasharray: 1; }
.hero h1 { font-size: clamp(38px, 7vw, 68px); font-weight: 800; line-height: 1.12; letter-spacing: -1px; text-wrap: balance; }
.hero .lede { color: var(--warm); font-size: clamp(18px, 2.6vw, 23px); max-width: 620px; margin: 20px auto 0; font-weight: 500; }
.hero .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.hero .sub { color: var(--muted); font-size: 14px; margin-top: 18px; }

/* ── أقسام ── */
section { padding: 64px 0; }
.eyebrow { color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.section-title { font-size: clamp(28px, 4.4vw, 42px); font-weight: 800; line-height: 1.2; margin-top: 10px; text-wrap: balance; }
.section-intro { color: var(--muted); font-size: 18px; max-width: 640px; margin-top: 14px; }

/* ── شبكة الميزات ── */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 44px; }
.feature {
  background: var(--panel); border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius); padding: 26px;
}
.feature .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; font-size: 22px; background: rgba(255,255,255,.05); }
.feature h3 { font-size: 20px; font-weight: 700; }
.feature p { color: var(--muted); font-size: 15.5px; margin-top: 8px; }
.dot-beat  { color: var(--beat); }
.dot-deep  { color: var(--deep); }
.dot-rem   { color: var(--rem); }
.dot-light { color: var(--light); }
.dot-good  { color: var(--good); }

/* ── معرض الواجهات ── */
.shots { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }

/* إطار جهاز */
.phone {
  width: 258px; flex: 0 0 auto;
  border-radius: 42px; padding: 10px;
  background: linear-gradient(160deg, #26272E, #0A0A0C);
  box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.08);
}
.phone .screen {
  border-radius: 33px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, #16171C, #000);
  aspect-ratio: 9 / 19.5;
  position: relative;
  border: 1px solid #1c1d22;
}
.phone .notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; background: #000; border-radius: 14px; z-index: 5; }
.scr-pad { padding: 40px 16px 18px; height: 100%; display: flex; flex-direction: column; }
.phone-label { text-align: center; color: var(--muted); font-size: 14px; margin-top: 16px; font-weight: 600; }

/* عناصر داخل نموذج الشاشة */
.s-time { font-size: 13px; color: var(--muted); text-align: center; }
.s-greet { font-size: 19px; font-weight: 700; text-align: center; margin-top: 2px; }
.s-card { background: var(--panel); border: 1px solid rgba(255,255,255,.06); border-radius: 15px; padding: 13px; margin-top: 11px; }
.s-hero-card { background: linear-gradient(180deg, #1B1C22, #0C0D10); border: 1px solid rgba(255,255,255,.07); border-radius: 15px; padding: 15px; margin-top: 12px; text-align: center; }
.s-big { font-size: 34px; font-weight: 800; line-height: 1; }
.s-mut { color: var(--muted); font-size: 12px; }
.s-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.ring { width: 92px; height: 92px; border-radius: 50%; margin: 4px auto; display: grid; place-items: center;
        background: conic-gradient(var(--good) calc(var(--p,88)*1%), #23242b 0); position: relative; }
.ring::after { content:""; position:absolute; inset:9px; border-radius:50%; background:#0C0D10; }
.ring b { position: relative; z-index: 2; font-size: 22px; font-weight: 800; }

/* شريط مراحل نوم مصغّر */
.stagebar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin-top: 10px; }

/* منحنى نبض مصغّر */
.mini-wave { width: 100%; height: 46px; display: block; margin-top: 8px; }

/* ── خطوات ── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; margin-top: 44px; counter-reset: s; }
.step { position: relative; padding-top: 14px; }
.step .n { font-size: 15px; font-weight: 800; color: #000; background: var(--white); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.step h4 { font-size: 19px; font-weight: 700; margin-top: 14px; }
.step p { color: var(--muted); font-size: 15px; margin-top: 6px; }

/* ── CTA نهائي ── */
.final { text-align: center; padding: 88px 0; }
.final h2 { font-size: clamp(30px,5vw,46px); font-weight: 800; text-wrap: balance; }
.final p { color: var(--muted); font-size: 18px; margin-top: 14px; }

/* ── تذييل ── */
footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center; }
footer a { color: var(--muted); text-decoration: none; margin-inline-start: 20px; }
footer a:hover { color: var(--ink); }

/* ── صفحات المستندات (خصوصية/دعم) ── */
.doc { max-width: 760px; margin-inline: auto; padding: 60px 0 90px; }
.doc h1 { font-size: clamp(30px,5vw,44px); font-weight: 800; }
.doc .updated { color: var(--muted); font-size: 14px; margin-top: 8px; }
.doc h2 { font-size: 23px; font-weight: 700; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.doc h3 { font-size: 18px; font-weight: 700; margin-top: 24px; color: var(--warm); }
.doc p, .doc li { color: #C9CDD6; font-size: 16.5px; margin-top: 12px; }
.doc ul { margin-top: 10px; padding-inline-start: 22px; }
.doc li { margin-top: 8px; }
.doc strong { color: var(--ink); font-weight: 700; }
.doc a { color: var(--light); }
.callout { background: var(--panel); border: 1px solid var(--line); border-inline-start: 3px solid var(--good); border-radius: 12px; padding: 16px 18px; margin-top: 20px; }
.callout p { margin-top: 6px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pill { background: var(--panel); border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; font-size: 14px; color: var(--warm); }

@media (prefers-reduced-motion: no-preference) {
  .hero .wave-hero path { animation: draw 2.6s ease forwards; }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}