/* aqeem.app — Night Sanctuary (DESIGN.md). One stylesheet for every page; no JavaScript.
   Logical properties throughout so a right-to-left page mirrors without new rules. */

@font-face { font-family: 'Cinzel'; src: url('fonts/Cinzel-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/CormorantGaramond-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('fonts/EBGaramond-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('fonts/EBGaramond-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('fonts/Jost-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('fonts/Jost-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --night: #061623;
  --navy: #0b2433;
  --teal-deep: #0d3346;
  --glass: rgba(6, 29, 43, 0.68);
  --glass-strong: rgba(6, 29, 43, 0.82);
  --glass-edge: rgba(246, 236, 216, 0.22);
  --cream: #f6ecd8;
  --cream-2: rgba(246, 236, 216, 0.78);
  --cream-3: rgba(246, 236, 216, 0.58);
  --gold: #f5c27c;
  --gold-line: #c9a96e;
  --aqua: #6fe0ef;
  --aqua-glow: rgba(111, 224, 239, 0.35);

  --serif: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --caps: 'Cinzel', 'EB Garamond', Georgia, serif;
  --sans: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --gutter: clamp(16px, 5vw, 96px);
  --measure: 68ch;
  --radius: 28px;
  --radius-sm: 20px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-x: hidden;
}
img { max-inline-size: 100%; block-size: auto; display: block; }
a { color: var(--aqua); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--cream); }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; box-shadow: 0 0 0 6px var(--aqua-glow); border-radius: 6px; }
p { margin-block: 0 1em; }
strong { font-weight: 600; color: var(--cream); }

.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; padding: 10px 16px; background: var(--navy); border-radius: 10px; z-index: 10; }
.skip:focus { inset-block-start: 12px; }

/* --- Type --- */
.eyebrow {
  font-family: var(--caps); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold-line); margin: 0 0 0.9rem;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0 0 0.6em; color: var(--cream); }
h1 { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem); letter-spacing: 0.005em; }
h2 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); }
h3 { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; }
.lede { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); color: var(--cream-2); max-inline-size: 40ch; }
.muted { color: var(--cream-3); }
.ar { font-family: 'Scheherazade New', 'Noto Naskh Arabic', 'Geeza Pro', serif; }

/* --- Header --- */
.site-header {
  position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(14px, 3vw, 40px) var(--gutter);
}
.site-header.solid { position: relative; background: linear-gradient(var(--night), rgba(6, 22, 35, 0)); }
.brand { display: flex; align-items: center; gap: 14px; color: var(--cream); text-decoration: none; }
.brand img { inline-size: 44px; block-size: 44px; }
.brand .word { font-family: var(--sans); font-weight: 300; font-size: 1.35rem; letter-spacing: 0.3em; }
.nav { display: flex; gap: clamp(12px, 2.4vw, 32px); }
.nav a {
  font-family: var(--sans); font-weight: 400; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream-2); text-decoration: none; padding-block: 6px;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--cream); border-block-end: 1px solid var(--gold-line); }

/* --- Hero --- */
.hero { position: relative; min-block-size: min(94svh, 940px); display: grid; align-items: center; isolation: isolate; }
.hero > picture img, .scene > picture img {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -2;
}
.hero::after, .scene::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 22, 35, 0.55) 0%, rgba(6, 22, 35, 0.10) 32%, rgba(6, 22, 35, 0.25) 62%, var(--night) 100%),
    rgba(6, 22, 35, 0.18);
}
.hero-inner { padding: 132px var(--gutter) 72px; display: grid; justify-items: center; text-align: center; }
.hero .card { max-inline-size: 760px; padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 64px); }
.hero .mark { inline-size: 76px; block-size: 76px; margin: 0 auto 18px; }
.hero h1 { margin-block-end: 0.35em; }
.hero .lede { margin-inline: auto; }
.arabic-word { font-family: 'Scheherazade New', 'Noto Naskh Arabic', serif; color: var(--gold); font-size: 2.2rem; line-height: 1; margin: 0 0 14px; }

/* --- Glass --- */
.card {
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card { background: var(--glass-strong); } }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-block-start: 26px; }
.button {
  display: inline-block; padding: 12px 26px; border-radius: 999px; text-decoration: none;
  font-family: var(--sans); font-weight: 400; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--night); background: var(--aqua); border: 1px solid var(--aqua);
}
.button:hover { color: var(--night); background: var(--cream); border-color: var(--cream); }
.button.ghost { background: transparent; color: var(--cream); border-color: var(--glass-edge); }
.button.ghost:hover { border-color: var(--aqua); color: var(--cream); background: rgba(111, 224, 239, 0.08); }

/* --- Sections --- */
main { display: block; }
section { padding: clamp(56px, 7vw, 104px) var(--gutter); }
.tint { background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(13, 51, 70, 0.55), transparent 75%); }
.wrap { max-inline-size: 1240px; margin-inline: auto; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.rule { block-size: 1px; border: 0; margin: 0 auto; max-inline-size: 1240px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); opacity: 0.45; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.flip > :first-child { order: 2; }

/* A screenshot shown as a framed picture on a wall. */
.frame { margin: 0; }
.frame img {
  border-radius: 14px; border: 1px solid var(--glass-edge);
  box-shadow: 0 0 0 6px rgba(6, 22, 35, 0.9), 0 0 0 7px rgba(201, 169, 110, 0.35), 0 40px 90px rgba(0, 0, 0, 0.55);
}
.frame figcaption { margin-block-start: 18px; color: var(--cream-3); font-size: 0.95rem; text-align: center; }

.points { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 14px; }
.points li { padding-inline-start: 26px; position: relative; color: var(--cream-2); }
.points li::before { content: ''; position: absolute; inset-inline-start: 4px; inset-block-start: 0.62em; inline-size: 8px; block-size: 8px; transform: rotate(45deg); background: var(--gold-line); }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-block-start: 44px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
.feature { padding: 28px 28px 24px; border-radius: var(--radius-sm); }
.feature h3 { margin-block-end: 0.4em; }
.feature p { color: var(--cream-2); margin: 0; font-size: 1.02rem; }
.feature .icon { inline-size: 34px; block-size: 34px; color: var(--aqua); margin-block-end: 14px; }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 48px); margin-block-start: 48px; }

.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-block-start: 44px; }
.platform { padding: 28px; border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 8px; }
.platform p { color: var(--cream-2); margin: 0; font-size: 1rem; }
.status {
  align-self: flex-start; font-family: var(--caps); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--glass-edge); color: var(--cream-2);
}
.status.now { color: var(--aqua); border-color: rgba(111, 224, 239, 0.5); }

.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 0; margin-block-start: 40px; border-block: 1px solid var(--glass-edge); }
.value { padding: 26px 22px; text-align: center; }
.value + .value { border-inline-start: 1px solid var(--glass-edge); }
.value strong { display: block; font-family: var(--caps); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.95rem; color: var(--gold); margin-block-end: 6px; }
.value span { color: var(--cream-2); font-size: 1rem; }

.faq { max-inline-size: 860px; margin: 40px auto 0; }
details { border-block-end: 1px solid var(--glass-edge); padding: 18px 4px; }
summary { cursor: pointer; font-size: 1.15rem; color: var(--cream); list-style-position: outside; }
summary::marker { color: var(--gold-line); }
details[open] summary { margin-block-end: 10px; }
details p, details ul { color: var(--cream-2); }

.scene { position: relative; isolation: isolate; text-align: center; padding-block: clamp(110px, 16vw, 220px); }
.scene .card { max-inline-size: 720px; margin-inline: auto; padding: clamp(28px, 5vw, 52px); }

/* --- Text pages (privacy, terms, support) --- */
.page { padding: 24px var(--gutter) clamp(64px, 9vw, 112px); }
.page .wrap { max-inline-size: 860px; }
.page article { padding: clamp(24px, 5vw, 56px); }
.page h1 { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem); }
.page h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin-block-start: 1.6em; }
.page h3 { margin-block-start: 1.4em; }
.page p, .page li { color: var(--cream-2); }
.page ul { padding-inline-start: 1.2em; }
.page li { margin-block-end: 0.4em; }
.note {
  border-inline-start: 3px solid var(--gold-line); padding: 12px 18px; margin: 0 0 1.6em;
  background: rgba(201, 169, 110, 0.08); border-radius: 0 12px 12px 0; color: var(--cream-2);
}
table { inline-size: 100%; border-collapse: collapse; margin-block: 1em 1.6em; font-size: 1rem; }
th, td { text-align: start; padding: 10px 12px; border-block-end: 1px solid var(--glass-edge); vertical-align: top; }
th { font-family: var(--caps); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-line); }
td { color: var(--cream-2); }
.table-wrap { overflow-x: auto; }

/* --- Footer --- */
.site-footer { padding: 48px var(--gutter) 56px; border-block-start: 1px solid var(--glass-edge); color: var(--cream-3); font-size: 0.95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.site-footer a { color: var(--cream-2); text-decoration: none; }
.site-footer a:hover { color: var(--cream); text-decoration: underline; }

/* --- Motion: a gentle rise on load, nothing else (DESIGN.md → Motion) --- */
@media (prefers-reduced-motion: no-preference) {
  .hero .card { animation: rise 900ms ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Small screens --- */
@media (max-width: 860px) {
  .split, .split.flip { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .gallery { grid-template-columns: 1fr; }
  .value + .value { border-inline-start: 0; border-block-start: 1px solid var(--glass-edge); }
}
@media (max-width: 560px) {
  .nav { gap: 14px; }
  .nav a { font-size: 0.72rem; letter-spacing: 0.14em; }
  .nav .wide { display: none; }
  .brand .word { font-size: 1.1rem; }
  .brand img { inline-size: 36px; block-size: 36px; }
  .hero-inner { padding-block-start: 112px; }
}
.after-faq { margin-block-start: 28px; }
.mark-sm { inline-size: 56px; block-size: 56px; margin: 0 auto 16px; }
.scene h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); }
.scene::after { background: linear-gradient(180deg, var(--night) 0%, rgba(6, 22, 35, 0.3) 24%, rgba(6, 22, 35, 0.3) 72%, var(--night) 100%); }