:root {
  --blue: #0032FB;
  --white: #FFFFFF;
  --line: rgba(255, 255, 255, 0.6);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--blue);
  color: var(--white);
  font-family: 'Satoshi', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Layout: one screen, no scroll */
.page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 88px;
}

.stage {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(96px, 14vh, 160px);
  transition: gap 700ms var(--ease);
}
.page[data-step="details"] .stage { gap: 28px; }

/* Face */
.face {
  display: block;
  width: min(620px, 86vw, 56vh);
  height: auto;
  aspect-ratio: 680 / 414;
  overflow: visible;
  transition: width 700ms var(--ease);
}

/* Blink: double on load, single otherwise */
.eye { transform-box: fill-box; transform-origin: 50% 55%; }
.face.blink-a .eye { animation: blinkA 240ms ease-in-out; }
.face.blink-b .eye { animation: blinkB 240ms ease-in-out; }
.face.dbl-a .eye { animation: dblA 560ms ease-in-out; }
.face.dbl-b .eye { animation: dblB 560ms ease-in-out; }
@keyframes blinkA { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(0.08); } }
@keyframes blinkB { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(0.08); } }
@keyframes dblA {
  0%, 36%, 100% { transform: scaleY(1); }
  16%, 22% { transform: scaleY(0.08); }
  56%, 64% { transform: scaleY(0.08); }
  84% { transform: scaleY(1); }
}
@keyframes dblB {
  0%, 36%, 100% { transform: scaleY(1); }
  16%, 22% { transform: scaleY(0.08); }
  56%, 64% { transform: scaleY(0.08); }
  84% { transform: scaleY(1); }
}
.page[data-step="details"] .face { width: clamp(110px, 11vw, 160px); }
.page[data-step="done"] .face { width: min(460px, 66vw, 48vh); }

/* Form */
.contact { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 20px; }
.page[data-step="done"] .contact { display: none; }

.title {
  margin: 0;
  text-align: center;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  /* Outline: blue face, white stroke */
  color: var(--blue);
  -webkit-text-stroke: 2px var(--white);
  paint-order: stroke fill;
  transition: font-size 700ms var(--ease);
}
.page[data-step="details"] .contact .title { font-size: clamp(28px, 3.4vw, 40px); }

.email-row { display: flex; align-items: center; gap: 8px; }

.field {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  color: var(--white);
  font: inherit;
  font-size: 17px;
  padding: 0 2px;
  height: 44px;
}
.field::placeholder { color: rgba(255, 255, 255, 0.78); }
.field:focus { outline: none; border-bottom-color: var(--white); }
.field:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
#email { flex: 1 1 auto; height: 52px; font-size: 20px; }
textarea.field { height: auto; resize: none; line-height: 1.45; padding: 6px 2px; }

.error { min-height: 18px; margin-top: -14px; font-size: 14px; }

.send-btn {
  border: 0;
  background: var(--white);
  color: var(--blue);
  cursor: pointer;
  font: inherit;
}

.send-btn {
  height: 52px; padding: 0 28px; border-radius: 26px;
  font-size: 17px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
}
.send-btn[disabled] { opacity: 0.7; cursor: progress; }

.send-btn:focus-visible, .icon-btn:focus-visible {
  outline: 2px solid var(--white); outline-offset: 3px;
}

/* Grow-in details */
.grow {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 700ms var(--ease);
}
.page[data-step="details"] .grow { grid-template-rows: 1fr; }
.grow-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 18px; }

.reveal {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 420ms ease, transform 520ms var(--ease);
}
.page[data-step="details"] .reveal {
  opacity: 1;
  transform: none;
  transition-delay: calc(220ms + var(--i) * 90ms);
}

.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 4px; }
.stack label, legend { font-size: 13px; letter-spacing: 0.02em; }

fieldset { margin: 0; border: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px;
  border-radius: 22px; border: 2px solid var(--white);
  font-size: 15px; font-weight: 500;
  transition: background 160ms ease, color 160ms ease;
}
.chip input:checked + span { background: var(--white); color: var(--blue); }
.chip input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 2px; }

/* Thanks */
.thanks { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.thanks[hidden] { display: none; }
.thanks p { margin: 0; font-size: 17px; line-height: 1.5; }

/* Footer */
.footer {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px clamp(20px, 3vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.copyright { font-size: 14px; }
.socials { position: relative; display: flex; align-items: center; gap: 4px; }

.icon-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 0; padding: 0;
  background: transparent; color: var(--white); cursor: pointer;
  transition: transform 200ms var(--ease);
}
.icon-btn:hover { transform: translateY(-2px); }

/* Copied bubble */
.bubble {
  position: absolute; right: 0; bottom: 58px;
  background: var(--white); color: var(--blue);
  border-radius: 16px; padding: 12px 16px;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 20, 110, 0.28);
  display: flex; flex-direction: column; gap: 2px;
  transform-origin: calc(100% - 22px) calc(100% + 30px);
}
.bubble[hidden] { display: none; }
.bubble::after {
  content: '';
  position: absolute; right: 15px; bottom: -6px;
  width: 14px; height: 14px;
  background: var(--white);
  transform: rotate(45deg);
  border-radius: 2px;
}
.bubble-title { font-size: 17px; font-weight: 700; }
.bubble-sub { font-size: 13px; font-weight: 500; color: #1A3FD6; }

.bubble.is-in { animation: pop 720ms var(--ease) both; }
.bubble.is-out { animation: suck 340ms cubic-bezier(0.55, 0, 0.85, 0.35) both; }

@keyframes pop {
  0%   { transform: scale(0); opacity: 0; }
  38%  { transform: scale(1.14); opacity: 1; }
  50%  { transform: scale(1.08) rotate(-5deg); }
  60%  { transform: scale(1.04) rotate(4deg); }
  70%  { transform: scale(1.02) rotate(-3deg); }
  80%  { transform: scale(1) rotate(1.5deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes suck {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* Small screens: allow scrolling when the form is open */
@media (max-width: 600px), (max-height: 640px) {
  .page { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .face .eye { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}