@font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #0a0a0b;
  --bg-rgb: 10, 10, 11;
  --text: #b6b6be;
  --strong: #ececf1;
  --muted: #6f6f78;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.22);
  --fade: 132px;
  --gutter: 24px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-size: 18px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(255, 255, 255, 0.85); color: var(--bg); }
a { color: inherit; }

main { max-width: 760px; margin: 0 auto; padding: calc(var(--fade) + 24px) var(--gutter) var(--fade); }
section { padding: 56px 0 40px; }
.intro { padding-top: 24px; }

h1, h2, h3 { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; color: var(--strong); font-weight: 600; margin: 0 0 0.55em; }
h1 { font-size: clamp(48px, 11vw, 92px); line-height: 0.98; letter-spacing: -0.035em; }
h1 span, h2 span { color: rgba(236, 236, 241, 0.38); }
h2 { font-size: clamp(34px, 6.4vw, 52px); line-height: 1.02; letter-spacing: -0.03em; }
h3 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 0.4em; }
p { font-size: clamp(17px, 1.7vw, 19px); line-height: 1.42; margin: 0 0 1em; letter-spacing: -0.005em; text-align: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; text-wrap: pretty; } /* left-aligned; hyphenation and balanced wrapping keep the right edge close to even */

.plans { display: grid; gap: 14px; }
@media (min-width: 680px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px 8px; background: #111113; }
.plan p { font-size: 16px; text-align: left; hyphens: manual; }

.contact { padding-bottom: 72px; }
.button {
  display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--strong); color: var(--bg); font-size: 16px; font-weight: 600; text-decoration: none; transition: background 0.2s;
}
.button:hover { background: #fff; }
.foot { color: var(--muted); font-size: 14px; padding: 16px 0 24px; border-top: 1px solid var(--line); }

/* Top: the white wordmark over a fade — text scrolling up dissolves beneath it */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--fade);
  display: flex; justify-content: center; align-items: flex-start; padding-top: 30px;
  background: linear-gradient(to bottom, rgba(var(--bg-rgb), 1) 0%, rgba(var(--bg-rgb), 0.94) 32%, rgba(var(--bg-rgb), 0.6) 62%, rgba(var(--bg-rgb), 0) 100%);
  pointer-events: none;
}
.mark { pointer-events: auto; display: block; color: #fff; line-height: 0; }
/* Wordmark letters 13.7px tall (cap height); the face below is 2.6x that, the lockup ratio. */
.mark svg { display: block; height: 14.2px; width: auto; }

/* Bottom: the menu button over a matching fade */
.bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: var(--fade);
  display: flex; justify-content: center; align-items: flex-end; padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(var(--bg-rgb), 1) 0%, rgba(var(--bg-rgb), 0.94) 32%, rgba(var(--bg-rgb), 0.6) 62%, rgba(var(--bg-rgb), 0) 100%);
  pointer-events: none;
}
/* The menu button is the Adano face. Opening the menu drops it off the bottom with a little lift
   first; closing springs it back with a short wobble. */
.face {
  pointer-events: auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 0;
  color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 0 18px rgba(var(--bg-rgb), 0.9));
}
.face svg { height: 35.7px; width: auto; display: block; }
.face:active { transform: scale(0.94); }
.face:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 6px; border-radius: 8px; }
.face.away { animation: face-away 0.34s cubic-bezier(0.55, 0, 0.75, 0.2) forwards; pointer-events: none; }
.face.back:not(.away) { animation: face-back 0.62s linear both; }
@keyframes face-away {
  0% { transform: translateY(0); }
  28% { transform: translateY(-14%) scale(1.03); }
  100% { transform: translateY(200%) scale(0.96); }
}
@keyframes face-back {
  0% { transform: translateY(200%); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  42% { transform: translateY(-11%); animation-timing-function: ease-in-out; }
  62% { transform: translateY(4%); animation-timing-function: ease-in-out; }
  80% { transform: translateY(-1.5%); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .face.away { animation: none; opacity: 0; }
  .face.back:not(.away) { animation: none; }
}

/* Menu: a small Rolodex wheel at the bottom centre */
.menu {
  position: fixed; inset: 0; z-index: 60; background: rgba(var(--bg-rgb), 0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 var(--gutter) calc(40px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.menu.open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.wheel {
  --row: 40px;
  height: calc(var(--row) * 5); width: min(320px, 100%);
  overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none;
  padding: calc(var(--row) * 2) 0; perspective: 420px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
  transform: translateY(8px); transition: transform 0.35s ease;
}
.menu.open .wheel { transform: none; }
.wheel::-webkit-scrollbar { display: none; }
.wheel a {
  display: flex; align-items: center; justify-content: center; height: var(--row);
  scroll-snap-align: center; transform-origin: center;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text); text-decoration: none; white-space: nowrap; transition: color 0.2s;
}
.wheel a.on { color: #fff; }
.wheel a:focus-visible { outline: none; color: #fff; text-decoration: underline; text-underline-offset: 6px; }