@font-face {
  font-family: "PP Frama";
  src:
    url("./fonts/PPFrama-Medium.woff2") format("woff2"),
    url("./fonts/PPFrama-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Frama";
  src:
    url("./fonts/PPFrama-Bold.woff2") format("woff2"),
    url("./fonts/PPFrama-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #141414;
  --paper: #ffffff;
  --yellow: #f7df3e;

  /* fallback font stack; replace with your local PP Frama files if needed */
  --font-ui: "PP Frama", "PPFrama", "Helvetica Neue", Arial, sans-serif;

  /* Desktop reference size */
  --vw-unit: calc(100vw / 1512);
  --vh-unit: calc(100svh / 982);
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  font-family: var(--font-ui);
}

button,
input,
textarea,
select {
  font: inherit;
}

.hero {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--paper);
}

.dot-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(20, 20, 20, 0.12) 1.2px, transparent 1.35px),
    radial-gradient(circle, rgba(20, 20, 20, 0.035) 1px, transparent 1.2px);
  background-size: 16px 16px, 16px 16px;
  background-position: 0 0, 8px 8px;
}

.texture-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("./assets/texture.png");
  background-size: cover;
  background-position: center;
}

.decor-ui {
  position: absolute;
  z-index: 10;
}

/* Logo */
.logo-unit {
  left: calc(40 * var(--vw-unit));
  top: calc(36 * var(--vh-unit));
  width: calc(106 * var(--vw-unit));
  min-width: 78px;
  max-width: 112px;
}

.logo-unit img {
  display: block;
  width: 100%;
  height: auto;
}

/* Plain waitlist label */
.waitlist-label {
  left: 50%;
  top: calc(48 * var(--vh-unit));
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: clamp(14px, calc(15 * var(--vw-unit)), 16px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  cursor: default;
  user-select: none;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ink);
  white-space: nowrap;
}

/* Text */
.hero-copy-block {
  left: 50%;
  top: calc(104 * var(--vh-unit));
  transform: translateX(-50%);
  width: calc(545 * var(--vw-unit));
  min-width: 365px;
  text-align: center;
}

.hero-copy-block h1 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(100px, calc(84 * var(--vw-unit)), 80px);
  line-height: 0.93;
  letter-spacing: 0;
  font-weight: 700;
}

.hero-copy-block p {
  margin: calc(16 * var(--vw-unit)) 0 0;
  font-family: var(--font-ui);
  font-size: clamp(17px, calc(24 * var(--vw-unit)), 25px);
  line-height: 1.34;
  letter-spacing: 0;
  font-weight: 500;
}

/* Kit form placement */
.kit-form-slot {
  left: calc(440 * var(--vw-unit));
  top: calc(452 * var(--vh-unit));
  width: calc(632 * var(--vw-unit));
  min-width: 440px;
  min-height: 68px;
  z-index: 20;
}

/* Best effort styling for Kit embed */
.kit-form-slot form,
.kit-form-slot .formkit-form,
.kit-form-slot .seva-form,
.kit-form-slot [data-element="form"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.kit-form-slot .formkit-fields,
.kit-form-slot .seva-fields,
.kit-form-slot [data-element="fields"] {
  width: 100% !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.kit-form-slot input,
.kit-form-slot .formkit-input,
.kit-form-slot [type="email"] {
  min-height: 68px !important;
  border: 0 !important;
  border-radius: 16px 0 0 16px !important;
  padding: 0 18px !important;
  box-shadow:
    0 10px 22px rgba(20, 20, 20, 0.08),
    inset 0 0 0 1px rgba(20, 20, 20, 0.06) !important;
  background: #f5f5f5 !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-size: clamp(16px, calc(23 * var(--vw-unit)), 23px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.8px !important;
}

.kit-form-slot button,
.kit-form-slot .formkit-submit,
.kit-form-slot [type="submit"] {
  min-height: 68px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 0 16px 16px 0 !important;
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(20, 20, 20, 0.08) !important;
  font-family: var(--font-ui) !important;
  font-size: clamp(16px, calc(22 * var(--vw-unit)), 22px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.8px !important;
  cursor: pointer !important;
}

/* Transparent animated GIF */
.splash-wrap {
  left: calc(90 * var(--vw-unit));
  top: calc(400 * var(--vh-unit));
  width: calc(1298 * var(--vw-unit));
  z-index: 3;
  pointer-events: none;
}

.splash-gif {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

/* Decorative assets */
.asset {
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 6;
  will-change: transform;
}

.circle {
  left: calc(96 * var(--vw-unit));
  top: calc(350 * var(--vh-unit));
  width: calc(142 * var(--vw-unit));
}

.green-triangle {
  left: calc(-1 * var(--vw-unit));
  top: calc(176 * var(--vh-unit));
  width: calc(43 * var(--vw-unit));
}

.pink-triangle {
  right: 0;
  top: calc(48 * var(--vh-unit));
  width: calc(83 * var(--vw-unit));
}

.hand {
  left: calc(283 * var(--vw-unit));
  top: calc(155 * var(--vh-unit));
  width: calc(106 * var(--vw-unit));
  transform-origin: 72% 84%;
  z-index: 8;
}

.star {
  left: calc(1111 * var(--vw-unit));
  top: calc(223 * var(--vh-unit));
  width: calc(111 * var(--vw-unit));
  transform-origin: 50% 50%;
}

.orange-drop {
  left: calc(1200 * var(--vw-unit));
  top: calc(70 * var(--vh-unit));
  width: calc(47 * var(--vw-unit));
}

.drinks {
  left: calc(120 * var(--vw-unit));
  top: calc(638 * var(--vh-unit));
  width: calc(197 * var(--vw-unit));
  z-index: 8;
}

.card {
  left: calc(1017 * var(--vw-unit));
  top: calc(624 * var(--vh-unit));
  width: calc(214 * var(--vw-unit));
  z-index: 8;
}

.toolbar {
  left: calc(1280 * var(--vw-unit));
  top: calc(849 * var(--vh-unit));
  width: calc(247 * var(--vw-unit));
  z-index: 8;
}

.illustration {
position: absolute;
left: 0;
top: 5%;
width: 100%;
height: 100%;
z-index: 0;
object-fit: cover;
object-position: center;
transform-style: preserve-3d;
will-change: transform;
}

/* Tablet and mobile */
@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .hero {
    min-height: 100svh;
    height: auto;
    padding-bottom: 34px;
  }

  .logo-unit {
    left: 20px;
    top: 20px;
    width: 84px;
    min-width: 0;
  }

  .waitlist-label {
    top: 26px;
    right: 20px;
    left: auto;
    transform: none;
    font-size: 14px;
  }

  .hero-copy-block {
    left: 20px;
    right: 20px;
    top: 116px;
    width: auto;
    min-width: 0;
    transform: none;
  }

  .hero-copy-block h1 {
    font-size: clamp(44px, 15vw, 66px);
  }

  .hero-copy-block p {
    margin-top: 16px;
    font-size: clamp(18px, 5.4vw, 24px);
  }

  .kit-form-slot {
    left: 20px;
    right: 20px;
    top: 328px;
    width: auto;
    min-width: 0;
    min-height: 60px;
  }

  .kit-form-slot input,
  .kit-form-slot .formkit-input,
  .kit-form-slot [type="email"],
  .kit-form-slot button,
  .kit-form-slot .formkit-submit,
  .kit-form-slot [type="submit"] {
    min-height: 58px !important;
    font-size: 17px !important;
  }

  .splash-wrap {
    left: 50%;
    top: 430px;
    width: 1180px;
    transform: translateX(-50%);
  }

  .circle {
    left: 24px;
    top: 404px;
    width: 112px;
  }

  .green-triangle {
    left: -14px;
    top: 188px;
    width: 44px;
  }

  .pink-triangle {
    right: -6px;
    top: 98px;
    width: 58px;
  }

  .hand {
    left: 252px;
    top: 246px;
    width: 78px;
  }

  .star {
    left: 262px;
    top: 382px;
    width: 82px;
  }

  .orange-drop {
    left: 314px;
    top: 132px;
    width: 38px;
  }

  .drinks {
    left: 54px;
    top: 565px;
    width: 142px;
  }

  .card {
    left: 202px;
    top: 545px;
    width: 142px;
  }

  .toolbar {
    left: 182px;
    top: 704px;
    width: 196px;
  }
}

@media (max-width: 420px) {
  .logo-unit {
    left: 16px;
  }

  .waitlist-label {
    right: 16px;
    font-size: 13px;
  }

  .hero-copy-block {
    left: 16px;
    right: 16px;
  }

  .kit-form-slot {
    left: 16px;
    right: 16px;
  }
}

/* Kit JS embed override */
.kit-form-slot {
  isolation: isolate;
}

.kit-form-slot .formkit-form,
.kit-form-slot form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.kit-form-slot .formkit-form [data-style="clean"],
.kit-form-slot form [data-style="clean"] {
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
}

.kit-form-slot .formkit-fields,
.kit-form-slot [data-element="fields"] {
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 !important;
  background: transparent !important;
}

.kit-form-slot .formkit-field {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: #f5f5f5 !important;
  border-radius: 16px !important;
}

.kit-form-slot input,
.kit-form-slot .formkit-input,
.kit-form-slot [type="email"] {
  width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f5f5f5 !important;
  opacity: 1 !important;
  box-shadow:
    0 10px 22px rgba(20, 20, 20, 0.08),
    inset 0 0 0 1px rgba(20, 20, 20, 0.06) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-size: clamp(16px, calc(23 * var(--vw-unit)), 23px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.8px !important;
  line-height: 1 !important;
}

.kit-form-slot input::placeholder,
.kit-form-slot .formkit-input::placeholder {
  color: #bfbebb !important;
  opacity: 1 !important;
}

.kit-form-slot button,
.kit-form-slot .formkit-submit,
.kit-form-slot [type="submit"] {
  flex: 0 0 auto !important;
  width: calc(166 * var(--vw-unit)) !important;
  min-width: 150px !important;
  height: 68px !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--ink) !important;
  color: #fff !important;
  opacity: 1 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-ui) !important;
  font-size: clamp(16px, calc(22 * var(--vw-unit)), 22px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.8px !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

.kit-form-slot button > span,
.kit-form-slot .formkit-submit > span {
  padding: 0 !important;
  background: transparent !important;
}

@media (max-width: 900px) {
  .kit-form-slot input,
  .kit-form-slot .formkit-input,
  .kit-form-slot [type="email"],
  .kit-form-slot button,
  .kit-form-slot .formkit-submit,
  .kit-form-slot [type="submit"] {
    height: 58px !important;
    min-height: 58px !important;
    font-size: 17px !important;
  }

  .kit-form-slot button,
  .kit-form-slot .formkit-submit,
  .kit-form-slot [type="submit"] {
    width: 142px !important;
    min-width: 128px !important;
  }
}

@media (max-width: 420px) {
  .kit-form-slot .formkit-fields,
  .kit-form-slot [data-element="fields"] {
    flex-wrap: wrap !important;
  }

  .kit-form-slot .formkit-field,
  .kit-form-slot button,
  .kit-form-slot .formkit-submit,
  .kit-form-slot [type="submit"] {
    flex: 1 0 100% !important;
    width: 100% !important;
  }
}


.illustration {
  transform-style: preserve-3d;
  will-change: transform;
}