/* OPHION Protocol — design tokens (extracted from reference) */
:root {
  --bg: #000000;
  --ink: rgb(255, 243, 240);
  --ink-80: rgba(255, 255, 255, 0.8);
  --ink-65: rgba(255, 255, 255, 0.65);
  --ink-40: rgba(255, 255, 255, 0.4);
  --accent: #FF007A;
  --accent-bright: #FF4DA6;
  --violet: #7A3FF2;
  --violet-bright: #9B6DFF;
  --accent-wash: rgba(255, 0, 122, 0.12);
  --violet-wash: rgba(122, 63, 242, 0.14);
  --panel: rgba(15, 15, 15, 0.85);
  --panel-2: rgba(23, 23, 23, 0.85);
  --card-solid: rgb(36, 36, 36);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.25);
  --radius: 12px;
  --radius-lg: 20px;
  --font: "Inter", "Inter Placeholder", sans-serif;
  --container: 1200px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; color: var(--ink-80); }
.h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.3; letter-spacing: -0.04em; font-weight: 400; color: var(--ink); }
.h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2; letter-spacing: -0.03em; font-weight: 400; color: var(--ink); }
.sub { font-size: 17px; line-height: 1.6; color: var(--ink-65); }
.btn-primary { background: var(--accent); color: #000; border: none; border-radius: 10px; padding: 12px 22px; font-size: 15px; font-weight: 500; transition: filter .25s ease, transform .25s ease; }
.btn-primary:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 22px; font-size: 15px; transition: border-color .25s ease, background .25s ease; }
.btn-ghost:hover { border-color: var(--ink-65); background: rgba(255,255,255,0.05); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 768px) { .container { padding: 0 20px; } }