:root{
  color-scheme:dark;
  --brand-midnight:#07111F;
  --brand-purple:#5C39FF;
  --brand-gold:#D4AF37;
  --brand-white:#FFFFFF;
  --bg:oklch(0.18 0.025 265);
  --surface:oklch(0.215 0.028 265);
  --surface-2:oklch(0.235 0.03 265);
  --text:oklch(0.96 0.008 265);
  --muted:oklch(0.72 0.02 265);
  --primary:oklch(0.7 0.15 255);
  --purple:oklch(0.68 0.17 298);
  --cyan:oklch(0.74 0.14 232);
  --gold:oklch(0.8 0.11 85);
  --line:oklch(1 0 0 / 10%);
  --radius:.875rem;
  --shadow:0 24px 60px -28px color-mix(in oklab,var(--primary) 30%,transparent);
  --font-display:"Plus Jakarta Sans","Tajawal",system-ui,sans-serif;
  --font-sans:"Inter","Tajawal",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:var(--font-sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{margin:0;min-height:100vh;background:
  radial-gradient(circle at 84% 2%,color-mix(in oklab,var(--cyan) 16%,transparent),transparent 29rem),
  radial-gradient(circle at 8% -8%,color-mix(in oklab,var(--purple) 16%,transparent),transparent 24rem),
  linear-gradient(180deg,var(--brand-midnight),var(--bg) 52%,oklch(0.16 0.025 265));
}
a{color:inherit}
.shell{width:min(1120px,calc(100% - 32px));margin:auto}
.hero{padding:110px 0 70px}
.eyebrow{color:var(--cyan);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.hero h1{font-family:var(--font-display);font-size:clamp(52px,8vw,96px);line-height:.94;letter-spacing:-.055em;margin:20px 0}
.hero h1 span{background:linear-gradient(90deg,var(--brand-white),var(--cyan) 52%,var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:780px;color:var(--muted);font-size:20px;line-height:1.7}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.actions a{border:1px solid var(--line);padding:12px 16px;border-radius:calc(var(--radius) - 2px);color:var(--text);text-decoration:none;background:color-mix(in oklab,var(--surface) 86%,transparent);font-weight:800;box-shadow:inset 0 1px 0 rgb(255 255 255 / 8%);backdrop-filter:blur(14px);transition:.18s ease}
.actions a:hover{transform:translateY(-1px);border-color:color-mix(in oklab,var(--cyan) 45%,transparent);background:var(--surface-2)}
.actions .primary{background:linear-gradient(135deg,var(--primary),var(--brand-purple));color:var(--brand-white);border-color:color-mix(in oklab,var(--primary) 55%,transparent);box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-bottom:80px}
.grid article{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:24px;background:
  radial-gradient(circle at 90% 0,color-mix(in oklab,var(--cyan) 7%,transparent),transparent 16rem),
  linear-gradient(145deg,color-mix(in oklab,var(--surface) 92%,transparent),color-mix(in oklab,var(--brand-midnight) 92%,transparent));
  box-shadow:var(--shadow);backdrop-filter:blur(14px)
}
.grid article:before{content:"";position:absolute;inset:0 auto auto 0;width:64px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--purple))}
.grid h2{font-family:var(--font-display);margin-top:0}
.grid p{color:var(--muted);line-height:1.7}
.grid a{color:var(--cyan);font-weight:800;text-decoration:none}
:focus-visible{outline:3px solid color-mix(in oklab,var(--cyan) 55%,transparent);outline-offset:3px}
::selection{background:color-mix(in oklab,var(--purple) 35%,transparent);color:white}
@media(max-width:720px){.hero{padding-top:70px}.grid{grid-template-columns:1fr}.lead{font-size:17px}.actions a{width:100%;text-align:center}}