*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--char); color: var(--white); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body.is-locked { overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--accent); color: var(--char); padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--mono); }

/* Buttons: tactile, restrained. Press = a few % smaller and a softer shadow. No bounce-house. */
.btn {
  --bg: var(--accent); --fg: var(--char);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 26px; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font: 800 15px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 10px 30px -10px rgba(255,229,0,.55);
  transition: transform .22s var(--spring), box-shadow .22s var(--ease), background .2s;
  user-select: none; touch-action: manipulation;
}
.btn:hover { transform: translateY(-1px); }
.btn:active, .btn.is-press { transform: scale(.965); box-shadow: inset 0 2px 6px rgba(0,0,0,.22), 0 4px 12px -8px rgba(255,229,0,.5); transition-duration: .08s; }
.btn .price { font-family: var(--mono); font-weight: 500; letter-spacing: 0; padding-left: 12px; border-left: 1px solid rgba(18,19,20,.25); }
.btn--ghost { --bg: transparent; --fg: var(--white); box-shadow: inset 0 0 0 1px rgba(242,240,235,.3); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--white); }
.btn--ink { --bg: var(--char); --fg: var(--white); box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* WhatsApp-style message notifications (top of screen) */
#notes { position: fixed; z-index: 150; top: calc(12px + var(--safe-t)); left: 0; right: 0; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.note {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 2px 12px; align-items: center; width: min(380px, 100%);
  padding: 11px 14px 11px 11px; border-radius: 20px;
  background: rgba(30,31,34,.9); color: var(--white); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06);
  animation: note-in .55s var(--spring) both;
}
.note-av { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; }
.note-av img, .note-av svg { width: 100%; height: 100%; }
.note b { font: 700 13.5px/1.2 var(--sans); }
.note time { font: 400 11px/1 var(--sans); color: var(--grey); }
.note p { grid-column: 2 / 4; margin: 0; font: 400 14px/1.35 var(--sans); color: #dcdad4; }
.note.out { animation: note-out .4s var(--ease) both; }
@keyframes note-in { from { transform: translateY(-130%) scale(.96); opacity: 0; } }
@keyframes note-out { to { transform: translateY(-130%); opacity: 0; } }

/* Sheets */
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(8,8,9,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .3s both; }
.sheet {
  position: fixed; z-index: 101; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; max-width: 480px;
  max-height: calc(100dvh - 20px); overflow: auto; overscroll-behavior: contain;
  background: var(--char-2); color: var(--white); border-radius: 26px 26px 0 0;
  padding: 10px 22px calc(22px + var(--safe-b)); box-shadow: 0 -20px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  animation: sheet-in .5s var(--ease) both;
}
.sheet::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--char-line); margin: 0 auto 16px; }
.sheet.out { animation: sheet-out .32s var(--ease) both; }
.scrim.out { animation: fade .3s reverse both; }
@media (min-width: 720px) { .sheet { bottom: 50%; border-radius: 26px; transform: translateY(50%); animation: sheet-pop .45s var(--ease) both; } .sheet.out { animation: fade .2s reverse both; } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes sheet-pop { from { transform: translateY(calc(50% + 24px)) scale(.98); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

.field { display: grid; gap: 6px; }
.field > span { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.input, .textarea, .select {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px;
  background: var(--char); border: 1px solid var(--char-line); color: var(--white); outline: none;
  font: 400 15px/1.4 var(--sans); transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #6d6b66; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,229,0,.18); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Crawlable fallback in index.html (visible only until the app renders, or without JavaScript) */
.seo { max-width: 640px; margin: 0 auto; padding: 96px 20px; color: var(--grey-2); }
.seo h1 { color: var(--white); font: 900 clamp(34px, 7vw, 56px)/.95 var(--sans); letter-spacing: -.04em; }
.seo a { color: var(--accent); }