:root{
  --ground:#0A0F14; --elevated:#10161C; --card:#151C23; --interactive:#1A222B;
  --border:#2A333D; --muted:#77808A; --secondary:#B7BDC4; --ink:#FFFFFF;
  --accent:#2DCE6D; --accent-strong:#1EB85A; --accent-subtle:#0D2A18;
  --amber:#F6B84B; --gold:#F4C65A;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-full:999px;
  --s-sm:8px; --s-md:12px; --s-lg:16px; --s-xl:20px; --s-2xl:24px;
  --s-3xl:32px; --s-4xl:40px; --s-5xl:48px;
  --wrap:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ground); color:var(--ink);
  font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s-2xl)}

/* ── header ─────────────────────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:10;
  background:rgba(10,15,20,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
header .wrap{display:flex; align-items:center; gap:var(--s-lg); height:68px}
.brand{display:flex; align-items:center; gap:var(--s-md); font-weight:700; font-size:19px; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:34px; height:34px; border-radius:9px; display:block}
nav{margin-inline-start:auto; display:flex; gap:var(--s-2xl); font-size:15px}
nav a{color:var(--secondary)}
nav a:hover{color:var(--ink); text-decoration:none}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; padding:var(--s-5xl) 0 0}
.hero::before{
  content:''; position:absolute; inset:-40% 20% auto; height:620px;
  background:radial-gradient(ellipse at top,rgba(45,206,109,.28),transparent 68%);
  pointer-events:none;
}
.hero .wrap{position:relative; display:grid; grid-template-columns:1fr 320px;
  gap:var(--s-5xl); align-items:center; padding-bottom:var(--s-5xl)}
.hero h1{font-size:clamp(34px,5vw,54px); line-height:1.25; letter-spacing:-.5px}
.hero p.lede{color:var(--secondary); font-size:19px; margin-top:var(--s-lg); max-width:44ch}
.cta{display:flex; flex-wrap:wrap; gap:var(--s-md); margin-top:var(--s-3xl)}
.btn{
  display:inline-flex; align-items:center; gap:var(--s-sm);
  padding:14px 26px; border-radius:var(--r-full); font-weight:600; font-size:16px;
  border:1px solid transparent; transition:transform .12s ease, background .12s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:#05080C}
.btn-primary:hover{background:var(--accent-strong)}
.btn-ghost{background:var(--interactive); color:var(--ink); border-color:var(--border)}
.btn[aria-disabled=true]{opacity:.55; pointer-events:none}
.shot{width:100%; border-radius:var(--r-2xl); border:1px solid var(--border);
  box-shadow:0 30px 70px rgba(5,8,12,.55); display:block}

/* ── sections ───────────────────────────────────────────────────────── */
section{padding:var(--s-5xl) 0}
h2{font-size:clamp(26px,3.4vw,36px); margin-bottom:var(--s-md)}
.sub{color:var(--muted); margin-bottom:var(--s-4xl)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:var(--s-xl)}
.card{background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:var(--s-2xl)}
.card h3{font-size:19px; margin-bottom:var(--s-sm)}
.card p{color:var(--secondary); font-size:16px}
.chip{display:inline-grid; place-items:center; width:44px; height:44px;
  border-radius:var(--r-md); background:var(--accent-subtle); color:var(--accent);
  margin-bottom:var(--s-lg)}
.chip svg{width:22px; height:22px}

.plus{background:var(--elevated); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:var(--s-4xl)}
.plus .tag{display:inline-block; padding:5px 14px; border-radius:var(--r-full);
  background:rgba(244,198,90,.12); color:var(--gold);
  font-size:14px; font-weight:600; margin-bottom:var(--s-lg)}
.plus ul{list-style:none; margin-top:var(--s-xl); display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:var(--s-md)}
.plus li{color:var(--secondary); display:flex; gap:var(--s-sm)}
.plus li::before{content:'✓'; color:var(--accent); font-weight:700}

/* ── legal / prose ──────────────────────────────────────────────────── */
.prose{max-width:800px; margin:0 auto; padding:var(--s-5xl) var(--s-2xl)}
.prose h1{font-size:34px; margin-bottom:var(--s-lg)}
.prose h2{font-size:24px; margin:var(--s-4xl) 0 var(--s-md);
  padding-top:var(--s-lg); border-top:1px solid var(--border)}
.prose h3{font-size:19px; margin:var(--s-2xl) 0 var(--s-sm); color:var(--secondary)}
.prose p,.prose li{color:var(--secondary); margin-bottom:var(--s-md)}
.prose strong{color:var(--ink)}
.prose ul{padding-inline-start:var(--s-xl); margin-bottom:var(--s-lg)}
.prose hr{display:none}
.prose blockquote{background:var(--accent-subtle); border-inline-start:3px solid var(--accent);
  border-radius:var(--r-md); padding:var(--s-lg); margin:var(--s-xl) 0}
.prose blockquote p{color:var(--ink); margin:0}
.table-scroll{overflow-x:auto; margin:var(--s-lg) 0}
.prose table{border-collapse:collapse; width:100%; font-size:15px; min-width:520px}
.prose th,.prose td{border:1px solid var(--border); padding:10px 14px;
  text-align:start; vertical-align:top}
.prose th{background:var(--interactive); color:var(--ink); font-weight:600}
.prose td{color:var(--secondary)}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--border); padding:var(--s-4xl) 0; margin-top:var(--s-5xl)}
footer .wrap{display:flex; flex-wrap:wrap; gap:var(--s-lg); align-items:center}
footer nav{margin-inline-start:auto}
footer small{color:var(--muted); font-size:14px}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .shot-wrap{max-width:300px}
  nav{gap:var(--s-lg); font-size:14px}
}
@media (max-width:560px){
  .wrap{padding:0 var(--s-lg)}
  .plus{padding:var(--s-2xl)}
  .prose{padding:var(--s-4xl) var(--s-lg)}
  /* Both live in the footer of every page, so dropping them from the sticky
     header costs no reachability and keeps the bar from being clipped. */
  header nav a[href="/privacy"],
  header nav a[href="/terms"]{display:none}
}