/* LEDDUCK VIEW — marketing site.
   Hand-written, no framework and no build step: Cloudflare Pages serves this folder as-is, which
   keeps deployment to one command and leaves nothing to go stale between releases. */

:root {
  --ink: #0f172a;
  --ink-soft: #475569;
  --line: #e2e8f0;
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --accent: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-soft: #eff6ff;
  --radius: 14px;
  --wrap: 1120px;
}

/* Dark tokens, twice on purpose.
   The media query follows the visitor's OS, but skips anyone who has explicitly asked for light —
   otherwise an OS-level dark preference would override their own choice. The attribute selector
   below is the explicit choice, and wins outright. Components only ever read the tokens, so
   neither block needs to know what they are used for. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e2e8f0;
    --ink-soft: #94a3b8;
    --line: #1e293b;
    --bg: #0b1120;
    --bg-alt: #0f172a;
    --accent: #60a5fa;
    --accent-ink: #0b1120;
    --accent-soft: #172554;
  }
}

:root[data-theme="dark"] {
  --ink: #e2e8f0;
  --ink-soft: #94a3b8;
  --line: #1e293b;
  --bg: #0b1120;
  --bg-alt: #0f172a;
  --accent: #60a5fa;
  --accent-ink: #0b1120;
  --accent-soft: #172554;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2.5rem); }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }

/* Keyboard users get out of the header without tabbing the whole nav. */
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; z-index: 100;
}
.skip:focus { inset-inline-start: 0; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 1.25rem; height: 66px; }

.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.15rem;
         color: var(--ink); text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--accent); color: var(--accent-ink);
}

.nav-links { display: flex; gap: 1.4rem; margin-inline-start: auto; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; }
.nav-links a:hover { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: .6rem; }

.lang-toggle {
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  border-radius: 8px; padding: .3rem .6rem; font: inherit; font-size: .8rem;
  cursor: pointer; min-width: 42px;
}
.lang-toggle:hover { color: var(--ink); border-color: var(--ink-soft); }

@media (max-width: 820px) { .nav-links { display: none; } }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block; border-radius: 10px; text-decoration: none;
  background: var(--accent); color: var(--accent-ink);
  padding: .62rem 1.15rem; font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover { transform: translateY(-1px); opacity: .93; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1rem; }
.btn-sm { padding: .45rem .9rem; font-size: .875rem; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }

/* ---------------------------------------------------------------- hero */
.hero {
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(70% 120% at 80% -10%, var(--accent-soft) 0%, transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  margin: 0 0 1rem; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.hero h1 {
  margin: 0 0 1.2rem;
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  line-height: 1.25; letter-spacing: -.01em; font-weight: 800;
}
.lede { margin: 0 0 2rem; font-size: clamp(1.02rem, 2vw, 1.2rem);
        color: var(--ink-soft); max-width: 62ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.5rem; }

.hero-points { list-style: none; margin: 0; padding: 0;
               display: flex; flex-wrap: wrap; gap: 1.6rem; }
.hero-points li { position: relative; padding-inline-start: 1.5rem;
                  color: var(--ink-soft); font-size: .95rem; }
.hero-points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section h2 { margin: 0 0 .75rem; font-size: clamp(1.6rem, 3.4vw, 2.2rem);
              font-weight: 800; letter-spacing: -.01em; }
.section-lede { margin: 0 0 2.5rem; color: var(--ink-soft); max-width: 62ch; }
.center .section-lede { margin-inline: auto; }

.grid { display: grid; gap: 1.1rem;
        grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
}
.card h3 { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; }
.card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ---------------------------------------------------------------- chips */
.chips { list-style: none; margin: 0; padding: 0;
         display: flex; flex-wrap: wrap; gap: .6rem; }
.chips li {
  border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem 1rem; font-size: .92rem; color: var(--ink-soft);
  background: var(--bg);
}

/* ---------------------------------------------------------------- pricing */
.price { display: flex; flex-direction: column; position: relative; }
.price .amount { margin: .4rem 0 1.2rem; font-size: 1.75rem;
                 font-weight: 800; color: var(--ink); }
.price .amount span { display: block; font-size: .82rem;
                      font-weight: 500; color: var(--ink-soft); }
.price ul { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1; }
.price li { position: relative; padding-inline-start: 1.4rem;
            margin-bottom: .55rem; color: var(--ink-soft); font-size: .95rem; }
.price li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.price.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.badge {
  position: absolute; top: -.7rem; inset-inline-start: 1.5rem;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; padding: .15rem .7rem;
  font-size: .72rem; font-weight: 700;
}

/* ---------------------------------------------------------------- faq */
details {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: .8rem; background: var(--bg);
}
details[open] { border-color: var(--accent); }
summary { cursor: pointer; font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: inline-end; color: var(--accent); font-weight: 700; }
details[open] summary::after { content: "−"; }
details p { margin: .8rem 0 0; color: var(--ink-soft); font-size: .95rem; }

.contact-lines { margin: 0 0 .8rem; }

/* ---------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); padding: 2.5rem 0;
          background: var(--bg-alt); }
.footer-inner p { margin: 0 0 .3rem; font-size: .9rem; color: var(--ink-soft); }

/* Latin numerals and code read left-to-right even inside the Arabic page. */
[dir="rtl"] .ltr { direction: ltr; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}