/* EFEKT 2.0 — shared tokens for the hero prototypes */
:root {
  --paper: #F7F6F1; --paper-2: #EEEDE6;
  --ink: #1B1C1F; --ink-2: #44454A;          /* graphite #88898D pushed dark for text contrast */
  --grey: #88898D; --grey-2: #C4C5C3;
  --line: rgba(27,28,31,.14);
  --lime: #E5FF2A; --lime-2: #CDE60F;
  --green: #005244;                           /* rare: selection + one micro accent */
  --f-sans: "Geologica", ui-sans-serif, system-ui, sans-serif;
  --f-serif: "Literata", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --pad: clamp(16px, 3.2vw, 48px);
  --ease: cubic-bezier(.2,.7,.1,1); --ease-io: cubic-bezier(.7,0,.2,1);
}
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 350 17px/1.55 var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1,h2,h3,p,ul,ol,figure { margin: 0; } ul,ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--lime); color: var(--green); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-variation-settings: "opsz" 72; letter-spacing: -.04em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lead { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; max-width: 31em; }
.btn { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 500 15px/1 var(--f-sans); text-decoration: none; overflow: hidden; border: 0; cursor: pointer; letter-spacing: -.01em; }
.btn span { position: relative; z-index: 1; transition: transform .45s var(--ease); }
.btn::before { content: ""; position: absolute; left: 18px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--lime); transform: scale(0); transition: transform .45s var(--ease); }
.btn:hover span, .btn:focus-visible span { transform: translateX(12px); }
.btn:hover::before, .btn:focus-visible::before { transform: scale(1); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper::before { background: var(--ink); }
.btn-line { box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; background: transparent; }
.btn-line::before { background: currentColor; }
.wm-dot { display: inline-block; width: .26em; height: .26em; margin-left: .05em; border-radius: 50%; background: var(--lime); }
/* prototype switcher (review only — not part of the design) */
.proto-bar { position: fixed; z-index: 999; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(27,28,31,.86); backdrop-filter: blur(10px); font: 400 11px/1 var(--f-mono); letter-spacing: .06em; }
.proto-bar a { white-space: nowrap; color: rgba(247,246,241,.7); text-decoration: none; padding: 8px 11px; border-radius: 99px; }
.proto-bar a[aria-current] { background: var(--lime); color: var(--ink); }
.proto-bar a:hover { color: #fff; }
@media (max-width: 640px) { .proto-bar a { white-space: nowrap; padding: 8px 9px; } .proto-bar a .full { display: none; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }