/* DIC Demo Day, Option A "The Ministry Presents" palette, taken from the collateral set. */
:root{
  --navy-900:#0c344d; --navy-800:#0f3e5c; --navy-700:#145173; --navy-500:#2a6f92;
  --sky:#4194b3; --sky-100:#e6f1f7; --sunrise:#fdf39e; --green:#009c80;
  --page:#f2f6f9; --surface:#ffffff; --border:#d6e2ea; --text:#0f2a3b; --muted:#4f6676;
  --danger:#b42318; --danger-bg:#fde7e5;
  --radius:12px; --radius-sm:8px;
  --font:"Noto Sans","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--text);background:var(--page);-webkit-font-smoothing:antialiased;line-height:1.5}
html[lang="ar"] body{font-family:"Noto Sans Arabic","Noto Sans",system-ui,sans-serif}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}

/* The key-visual background: deep navy with a soft horizon glow and a light line. */
.kv{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(120% 60% at 100% 100%, rgba(170,205,225,.45) 0%, rgba(170,205,225,0) 45%),
    radial-gradient(60% 18% at 50% 78%, rgba(200,228,242,.35) 0%, rgba(200,228,242,0) 70%),
    linear-gradient(180deg,var(--navy-800) 0%,var(--navy-700) 55%,var(--navy-500) 100%);
}
.kv::after{ /* fine horizontal wave texture, as on the collateral */
  content:"";position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none;opacity:.18;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 1px,transparent 1px 7px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 70%);mask-image:linear-gradient(180deg,transparent,#000 70%);
}
.horizon{height:2px;width:min(420px,70%);margin:18px auto;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  box-shadow:0 0 22px 6px rgba(190,225,245,.35)}
.lockup{height:auto}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600;line-height:20px}
.chip-sun{background:var(--sunrise);color:var(--navy-900)}
.sep{display:inline-block;width:6px;height:6px;background:currentColor;transform:rotate(45deg);margin:0 10px;vertical-align:middle;opacity:.8}

:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}