/* Dee Hub website — shared brand styles (Arabic-first, RTL).
   Palette mirrors the app theme: navy #0E1366, cyan #33C5E8.
   Tokens follow a 4/8px spacing rhythm; soft-rounded "clay-lite" surfaces. */

:root {
  --navy: #0E1366;
  --navy-dark: #090D45;
  --navy-darker: #06093A;
  --cyan: #33C5E8;
  --cyan-dark: #1A8FB8;
  --cyan-deep: #15799D;
  --cyan-tint: #F0FBFE;
  --orange: #FF9600;
  --gold: #FFB300;
  --text: #1F2430;
  --text-soft: #5B6472;
  --border: #E7EAF0;
  --bg: #FFFFFF;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(14, 19, 102, 0.06), 0 2px 8px rgba(14, 19, 102, 0.05);
  --shadow-md: 0 4px 10px rgba(14, 19, 102, 0.07), 0 12px 28px rgba(14, 19, 102, 0.09);
  --shadow-lg: 0 8px 18px rgba(14, 19, 102, 0.10), 0 24px 56px rgba(14, 19, 102, 0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Keyboard focus — visible ring, no ring on mouse clicks. */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

button, [role="button"], a { cursor: pointer; touch-action: manipulation; }

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

[id] { scroll-margin-top: 84px; }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 21px; font-weight: 800; color: var(--navy);
}
.brand:hover { text-decoration: none; }
.brand .brand-icon {
  width: 34px; height: 34px; border-radius: 10px; display: block;
  box-shadow: var(--shadow-sm);
}
.header-nav { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.header-nav a {
  color: var(--text-soft); padding: 8px 14px; border-radius: var(--radius-pill);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.header-nav a:hover { color: var(--navy); background: var(--cyan-tint); text-decoration: none; }
.header-nav .nav-cta {
  color: #fff; background: var(--cyan);
  box-shadow: 0 2px 0 var(--cyan-dark);
}
.header-nav .nav-cta:hover { color: #fff; background: var(--cyan-dark); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 34px; border-radius: var(--radius);
  font-family: inherit; font-weight: 700; font-size: 17px; border: none;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(180deg, #45D2F2 0%, var(--cyan) 55%, #28B5D8 100%);
  color: #fff;
  box-shadow: 0 4px 0 var(--cyan-dark), var(--shadow-md);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--cyan-dark), var(--shadow-lg); }
.btn-primary:active { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 0 var(--cyan-dark), var(--shadow-sm); }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--navy-darker); color: rgba(255, 255, 255, 0.75);
  padding: 44px 0; margin-top: 96px;
}
.site-footer .container {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px;
}
.site-footer .brand { color: #fff; font-size: 18px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s var(--ease);
}
.footer-links a:hover { color: var(--cyan); text-decoration: none; }
.footer-copy { font-size: 13px; opacity: 0.65; width: 100%; text-align: center; margin-top: 10px; }

/* ── Motion safety ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 640px) {
  .header-nav { gap: 2px; font-size: 13.5px; }
  .header-nav a { padding: 7px 10px; }
  .site-footer .container { flex-direction: column; text-align: center; }
}