/* Base: reset, typography, shared buttons, title fill and reveal states */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--pink); color: #fff; }

.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--lime); color: #000; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { inset-inline-start: 8px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
section { position: relative; }

/* Giant chunky headings, like the reference */
.mega {
  font-family: var(--f-display);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.03em;
}
.mega--grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Outlined title that fills solid as it scrolls through (js/modules/text-fill.js sets --p) */
.fill-title {
  --p: 0%;
  --fill: var(--ink);
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fill) 55%, transparent);
  background: linear-gradient(to left, var(--fill) var(--p), transparent var(--p));
  -webkit-background-clip: text; background-clip: text;
  padding-block: .06em .2em; /* room for descenders (ק, ף) so they fill too */
}

.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--ink-dim); }
.note { display: block; font-size: .78rem; font-weight: 700; color: var(--orange); letter-spacing: .02em; }

/* Pills */
.pill {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.7em; border-radius: 999px;
  font-weight: 800; font-size: .95rem; white-space: nowrap;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out);
}
.pill--grad { background: var(--grad); color: #fff; box-shadow: 0 12px 34px -12px rgba(255, 63, 164, .75); }
/* dark pill with a glowing gradient border (reference "CONTACT ME") */
.pill--glow { background: #0d0d10; color: #fff; }
.pill--glow::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: var(--grad);
}
.pill--glow::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 140% at 0% 50%, rgba(124, 77, 255, .45), transparent 60%), #0d0d10;
}
.pill--glow:hover { box-shadow: 0 0 34px -4px rgba(255, 63, 164, .65); }
.pill--line { border: 1.5px solid var(--line); }
.pill--dark { background: var(--paper-ink); color: #fff; }
.pill--ghost-dark { border: 1.5px solid var(--line-dark); }
.pill:hover { transform: translateY(-3px); }
.pill:active { transform: scale(.97); }

/* Scroll reveal (toggled by js/modules/reveal.js) */
.reveal { opacity: 0; transform: translateY(36px); filter: blur(6px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .fill-title { --p: 100% !important; }
}