/* ntre.app: one quiet page. NTRE's own colours and UI font (apps/web/src/index.css), light and dark. */
@font-face { font-family: "Noto Kufi Arabic Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/noto-kufi-arabic-arabic-wght-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/noto-kufi-arabic-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;
  --cedar: #1F5E46; --cedar-dark: #15432F; --cedar-soft: #E7EFEA; --cedar-ring: rgba(31, 94, 70, .22);
  --ink: #17211C; --muted: #56635C; --faint: #8A968F; --line: #E1E6E2; --bg: #FFFFFF; --on-accent: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cedar: #4E9F7C; --cedar-dark: #63B590; --cedar-soft: #1A2D24; --cedar-ring: rgba(78, 159, 124, .4);
    --ink: #E4ECE7; --muted: #A3B1A9; --faint: #74827A; --line: #2A3530; --bg: #121815; --on-accent: #0B1410;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  font-family: "Noto Kufi Arabic Variable", "Noto Kufi Arabic", "Segoe UI", "Geeza Pro", system-ui, sans-serif; font-size: 1rem; line-height: 1.7; }

.langs { display: flex; justify-content: flex-end; gap: 4px; padding: 16px 20px; margin: 0; list-style: none; }
.langs a, .langs span { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 44px; padding: 0 12px; border-radius: 8px; font-size: .875rem; }
.langs a { color: var(--muted); text-decoration: none; }
.langs a:hover { background: var(--cedar-soft); color: var(--ink); }
.langs span { color: var(--ink); font-weight: 600; }

main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 24px 64px; gap: 28px; }
.logo { display: block; width: clamp(112px, 26vw, 168px); aspect-ratio: 1; background: var(--cedar);
  -webkit-mask: url(/logo.svg) center / contain no-repeat; mask: url(/logo.svg) center / contain no-repeat; }
h1 { margin: 0; font-size: clamp(1.25rem, 4.4vw, 1.75rem); font-weight: 600; line-height: 1.6; max-width: 22em; text-wrap: balance; }
.soon { margin: 0; color: var(--cedar); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }
.rule { width: 56px; height: 1px; background: var(--line); border: 0; margin: 0; }
.demo { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 8px; border: 1px solid var(--cedar);
  color: var(--cedar); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.demo:hover { background: var(--cedar); color: var(--on-accent); }
a:focus-visible { outline: 3px solid var(--cedar-ring); outline-offset: 2px; }
footer { padding: 20px; text-align: center; color: var(--faint); font-size: .75rem; letter-spacing: .1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }