/* oa-base.css — global tokens, reset, layout utilities */
:root {
      --bg: #210B2C;
      --bg-deep: #070209;
      --bg-mid: #1a0d24;
      --purple: #210B2C;
      --lavender: #BC96E6;
      --gold: #FFD166;
      --cta: #FFD166;
      --surface-cream: #FAEBCA;
      --white: #ffffff;
      --muted: #c4b0d6;
      --line: rgba(188, 150, 230, 0.28);
      --header-h: 80px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      -webkit-text-size-adjust: 100%;
      width: 100%;
      max-width: 100%;
      scrollbar-gutter: stable;
    }

    html, body {
      background-color: var(--bg-deep);
      color: var(--white);
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    body {
      font-family: Outfit, Arial, sans-serif;
      line-height: 1.45;
      background-image:
        radial-gradient(ellipse 90% 55% at 12% 18%, rgba(188, 150, 230, 0.09), transparent 58%),
        radial-gradient(ellipse 75% 45% at 88% 42%, rgba(120, 80, 160, 0.08), transparent 52%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(188, 150, 230, 0.06), transparent 55%),
        linear-gradient(180deg, var(--bg-mid) 0%, var(--bg) 32%, #100616 58%, #0b040f 82%, var(--bg-deep) 100%);
      background-attachment: scroll;
    }

    a { color: inherit; text-decoration: none; }

    img { max-width: 100%; display: block; }

    button, .btn {
      font-family: inherit;
      cursor: pointer;
      border: 0;
    }

    .wrap {
      width: min(1232px, calc(100% - 32px));
      margin-inline: auto;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 40px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      box-shadow: none;
      transition: background .15s ease;
    }

    .btn:hover { transform: none; }

    .btn-primary {
      background: var(--cta);
      color: var(--purple);
    }

    .btn-primary:hover { background: #ffe199; color: var(--purple); }

    .btn-ghost {
      background: transparent;
      color: var(--white);
      box-shadow: inset 0 0 0 1.5px var(--lavender);
    }

    .btn-ghost:hover { background: rgba(188, 150, 230, 0.16); color: var(--lavender); }

    .btn-outline {
      background: transparent;
      box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7);
    }