/* FlowMotions — shared identity for content pages (/start /about /privacy /terms /404).
   Same palette + fonts as the landing page. The landing (index.html) keeps its own
   inline styles untouched; this file dresses the simpler pages in the same skin. */

:root {
  --bg:#0a0a0c; --panel:#121216; --line:#1e1e24;
  --cyan:#00e5ff; --purple:#d500f9; --yellow:#ffd600; --green:#00e676;
  --pink:#ff4081; --orange:#ff9100; --blue:#2979ff; --violet:#b388ff;
  --txt:#f2f2f4; --mut:#9a9aa4;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--txt); font-family:'IBM Plex Sans Arabic',sans-serif; overflow-x:hidden; line-height:1.6; }
.en { direction:ltr; font-family:'Rubik',sans-serif; display:inline-block; }
.mono { font-family:'IBM Plex Mono',monospace; direction:ltr; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1060px; margin:0 auto; padding:0 22px; }

/* ── nav (shared across all pages incl. landing) ── */
nav { display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.logo { font-family:'Rubik'; font-weight:900; font-size:22px; direction:ltr; letter-spacing:-.5px; }
.logo span:nth-child(1){ color:var(--cyan); } .logo span:nth-child(2){ color:var(--txt); }
.navlinks { display:flex; gap:22px; font-size:14px; color:var(--mut); font-weight:500; align-items:center; }
.navlinks a:hover { color:var(--txt); }
.navcta { background:var(--cyan); color:#000 !important; font-weight:800; padding:8px 18px; border-radius:99px; font-size:13.5px; }

/* ── buttons ── */
.btn { display:inline-block; padding:13px 28px; border-radius:12px; font-weight:800; font-size:15px; transition:transform .15s; cursor:pointer; }
.btn:hover { transform:translateY(-2px); }
.btn.p { background:var(--cyan); color:#000; box-shadow:0 4px 24px rgba(0,229,255,.25); }
.btn.s { border:1.5px solid var(--line); color:var(--txt); background:var(--panel); }

/* ── page header ── */
.pagehead { padding:52px 0 8px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono'; direction:ltr; font-size:12px; letter-spacing:2.5px; color:var(--mut); border:1px solid var(--line); border-radius:99px; padding:7px 16px; }
.eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; }
.pagehead h1 { font-weight:900; font-size:clamp(28px,5vw,46px); line-height:1.35; margin:22px 0 10px; }
.pagehead h1 .hl { color:var(--cyan); } .pagehead h1 .hl2 { color:var(--yellow); }
.pagehead .lead { color:#c9c9d1; max-width:640px; font-size:clamp(15px,2vw,17px); line-height:1.9; }
.pagehead .en.sub { color:var(--mut); font-size:12px; letter-spacing:2px; margin-top:6px; }

/* ── prose (privacy / terms / about) ── */
.prose { max-width:760px; padding:14px 0 20px; }
.prose section { padding:26px 0 0; }
.prose h2 { font-weight:900; font-size:clamp(19px,3vw,24px); margin-bottom:6px; display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.prose h2 .en { color:var(--mut); font-size:12px; letter-spacing:1.5px; font-weight:500; }
.prose h2 .bar { width:10px; height:22px; border-radius:3px; display:inline-block; flex:0 0 auto; }
.prose h3 { font-size:16px; font-weight:700; margin:16px 0 4px; color:var(--txt); }
.prose p { color:#c9c9d1; margin:8px 0; line-height:1.9; font-size:15px; }
.prose ul { margin:8px 22px; }
.prose li { color:#c9c9d1; margin:6px 0; line-height:1.8; font-size:15px; }
.prose a.link { color:var(--cyan); border-bottom:1px solid rgba(0,229,255,.4); }
.prose .en-block { direction:ltr; text-align:left; }
.prose .muted { color:var(--mut); font-size:13px; }
.divider { height:1px; background:var(--line); margin:34px 0 0; }

/* ── form (/start) ── */
.formcard { max-width:640px; margin:22px 0 0; border:1.5px solid var(--line); background:var(--panel); border-radius:20px; padding:28px 26px; }
.field { margin-bottom:18px; }
.field label { display:block; font-size:14px; font-weight:700; margin-bottom:7px; }
.field label b { color:var(--pink); }
.field input, .field select, .field textarea {
  width:100%; background:#0d0d10; border:1.5px solid var(--line); border-radius:11px;
  color:var(--txt); font-family:inherit; font-size:15px; padding:12px 14px; transition:border-color .18s;
}
.field textarea { min-height:120px; resize:vertical; line-height:1.7; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--cyan); }
.field .hint { color:var(--mut); font-size:12px; margin-top:5px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formcard .btn { width:100%; text-align:center; margin-top:4px; border:none; font-family:inherit; }
.formnote { color:var(--mut); font-size:12.5px; margin-top:14px; text-align:center; line-height:1.7; }
.formmsg { display:none; border-radius:12px; padding:14px 16px; font-size:14.5px; font-weight:600; margin-bottom:18px; line-height:1.7; }
.formmsg.ok { display:block; background:rgba(0,230,118,.1); border:1.5px solid var(--green); color:#b8f5d5; }
.formmsg.err { display:block; background:rgba(255,64,129,.1); border:1.5px solid var(--pink); color:#ffc4d8; }

/* ── footer (shared) ── */
footer { margin-top:70px; border-top:1px solid var(--line); padding:30px 0 40px; }
.footgrid { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:22px; }
.footcol .autonote { font-size:12.5px; color:var(--mut); max-width:340px; line-height:1.8; }
.footcol .autonote i { font-style:normal; color:var(--green); }
.footlinks { display:flex; gap:18px; font-size:13.5px; color:var(--mut); flex-wrap:wrap; }
.footlinks a:hover { color:var(--txt); }
.social { display:flex; gap:12px; margin-top:2px; }
.social a { width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--panel); display:flex; align-items:center; justify-content:center; transition:transform .15s, border-color .18s; }
.social a:hover { transform:translateY(-2px); border-color:var(--cyan); }
.social svg { width:18px; height:18px; fill:#d5d5dc; }
.footbottom { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footbottom .mono { font-size:12px; color:var(--mut); }

@media (max-width:820px) { .navlinks a:not(.navcta) { display:none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .btn:hover, .social a:hover { transform:none; } }