/* LotusPeptide coming-soon page.
   Values mirror the original Tailwind v4 build (colours mixed in oklab,
   spacing unit 0.25rem, breakpoints sm 40rem / md 48rem / lg 64rem). */

:root {
  --bg: #0b1e2d;
  --white: #fff;
  --white-15: rgba(255, 255, 255, 0.15);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-8: rgba(255, 255, 255, 0.08);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-55: rgba(255, 255, 255, 0.55);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-90: rgba(255, 255, 255, 0.92);
  --pink-300: #fda5d5;
  --pink-400-60: #fb64b699;
  --pink-glow: rgba(244, 114, 182, 0.25);
  --ink: #0b0f14;
  --pink-600: #db2777;
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1); /* framer-motion default "easeOut" */
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --pink-300: oklch(82.3% 0.12 346.018);
    --pink-400-60: color-mix(in oklab, oklch(71.8% 0.202 349.761) 60%, transparent);
  }
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--white);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: inherit;
}

img,
svg {
  display: block;
  vertical-align: middle;
}

/* ── Frame ───────────────────────────────────────────── */

/* The original is locked to exactly one viewport (100dvh, overflow hidden) with the
   copy pinned to the bottom. Same here, but the frame may grow instead of clipping
   when the copy is taller than a very short viewport (landscape phones). */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--white);
}

.bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-mobile {
  background-image: url(/hero-mobile.jpg);
  background-image: image-set(url(/hero-mobile.webp) type("image/webp"), url(/hero-mobile.jpg) type("image/jpeg"));
}

.bg-desktop {
  display: none;
  background-image: url(/hero-desktop.jpg);
  background-image: image-set(url(/hero-desktop.webp) type("image/webp"), url(/hero-desktop.jpg) type("image/jpeg"));
}

.shade-top {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 10rem;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  background-image: linear-gradient(to bottom in oklab, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

.shade-bottom {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 65%;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.6) 50%,
    transparent 100%
  );
  background-image: linear-gradient(
    to top in oklab,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.6) 50%,
    transparent 100%
  );
}

/* ── Header ──────────────────────────────────────────── */

.nav {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand picture {
  display: block;
  flex-shrink: 0;
}

.brand-logo {
  width: auto;
  height: 2.5rem;
  object-fit: contain;
  mix-blend-mode: screen;
}

.brand-name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.875rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white-60);
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--white);
}

.nav-links .nav-order {
  border-color: var(--white-20);
  background-color: var(--white-8);
  color: var(--white);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.nav-links .nav-order:hover,
.nav-links .nav-order:focus-visible {
  background-color: var(--white-20);
}

/* The brand name is wide: on a narrow phone only the Order button fits beside it.
   "All peptides" is a visible link under the hero buttons, so nothing is hidden. */
@media (max-width: 459px) {
  .nav-links a:not(.nav-order) {
    display: none;
  }
}

/* On the narrowest phones the wordmark's wide tracking touched the Order button. */
@media (max-width: 359px) {
  .brand-name {
    letter-spacing: 0.14em;
  }
}

/* ── Hero copy ───────────────────────────────────────── */

.hero {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Clears the header if the frame ever has to grow. */
  padding: 5.5rem 1.5rem 2.5rem;
  text-align: center;
}

/* The copy sits on the bright lotus: a soft, wide darkening behind it keeps every word
   readable without hiding the picture. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -1.5rem;
  pointer-events: none;
  background-image: radial-gradient(
    ellipse 75% 58% at 50% 50%,
    rgba(4, 10, 18, 0.7) 0%,
    rgba(4, 10, 18, 0.46) 55%,
    transparent 100%
  );
}

.title {
  margin-bottom: 1rem;
  /* 3rem, but never wider than the screen: "LotusPeptide" clipped on a 320px phone. */
  font-size: min(3rem, 12.5vw);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.6));
}

.lede {
  max-width: 28rem;
  margin-bottom: 1.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
  font-weight: 400;
  color: var(--white-90);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 18px rgba(0, 0, 0, 0.65);
}

.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.divider span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--white-80);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 14px rgba(0, 0, 0, 0.6);
}

.divider-line {
  width: 3rem;
  height: 1px;
}

.divider-line-l {
  background-image: linear-gradient(to right, transparent, var(--pink-400-60));
  background-image: linear-gradient(to right in oklab, transparent, var(--pink-400-60));
}

.divider-line-r {
  background-image: linear-gradient(to left, transparent, var(--pink-400-60));
  background-image: linear-gradient(to left in oklab, transparent, var(--pink-400-60));
}

.foot {
  margin-top: 1.25rem;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--white-30);
}

/* ── Calls to action ─────────────────────────────────── */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 560px;
}

.cta-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 15px 2rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.pill .icon,
.round .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pill-order {
  border-color: var(--white);
  background-color: var(--white);
  color: var(--ink);
  box-shadow: 0 0 32px rgba(244, 114, 182, 0.35);
}

.pill-order .icon {
  color: var(--pink-600);
}

.pill-coa {
  border-color: var(--white-20);
  background-color: var(--white-10);
  color: var(--white);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.pill-coa .icon {
  color: #f9a8d4;
}

.pill-partner {
  border-color: rgba(244, 114, 182, 0.55);
  background-color: var(--white-8);
  color: var(--white);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.browse {
  display: flex;
  gap: 24px;
}

.browse a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--white-60);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.browse a:hover,
.browse a:focus-visible {
  color: var(--white);
}

.social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.round {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--white-20);
  border-radius: 9999px;
  background-color: var(--white-10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.round-tg .icon {
  color: #f9a8d4;
}

.round-x .icon {
  width: 17px;
  height: 17px;
  color: var(--white-80);
}

/* Hover: the original buttons' pink glow and border. */
@media (hover: hover) {
  .pill-order:hover {
    border-color: var(--pink-300);
    box-shadow: 0 0 44px rgba(244, 114, 182, 0.55);
  }
  .pill-partner:hover,
  .pill-coa:hover,
  .round-tg:hover {
    border-color: var(--pink-400-60);
    background-color: var(--white-15);
    box-shadow: 0 0 28px var(--pink-glow);
  }
  .round-x:hover {
    border-color: var(--white-40);
    background-color: var(--white-15);
    box-shadow: 0 0 28px rgba(255, 255, 255, 0.12);
  }
  .pill:hover .icon,
  .round:hover .icon {
    transform: scale(1.1);
  }
}

.pill:focus-visible,
.round:focus-visible {
  outline: 2px solid var(--pink-300);
  outline-offset: 3px;
}


/* ── Breakpoints ─────────────────────────────────────── */

@media (min-width: 40rem) {
  /* Order now and Become a partner side by side, Lab results across under them. */
  .cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .pill-coa {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  /* Desktop: all three in one row. */
  .cta {
    max-width: 900px;
  }
  .cta-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .pill {
    padding-inline: 1.5rem;
    white-space: nowrap;
  }
  .pill-coa {
    grid-column: auto;
  }
}

@media (min-width: 48rem) {
  .bg-mobile {
    display: none;
  }
  .bg-desktop {
    display: block;
  }
  .nav {
    padding: 1.5rem 2.5rem;
  }
  .brand-logo {
    height: 3rem;
  }
  .brand-name {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .hero {
    padding-top: 6.5rem;
    padding-bottom: 3.5rem;
  }
  .title {
    font-size: 4.5rem;
  }
  .lede {
    max-width: 36rem;
    font-size: 1rem;
  }
  .divider-line {
    width: 5rem;
  }
}

@media (min-width: 64rem) {
  .title {
    font-size: 6rem;
  }
}

/* ── Entrance animations (framer-motion timings of the original) ── */

@keyframes enter-rise-24 {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes enter-rise-16 {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes enter-grow-x {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes enter-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.enter {
  animation-fill-mode: both;
}

.enter-title {
  animation: enter-rise-24 0.9s var(--ease-out-expo) 0.12s both;
}

.enter-lede {
  animation: enter-rise-16 0.85s var(--ease-out) 0.26s both;
}

.enter-divider {
  animation: enter-grow-x 0.7s var(--ease-out) 0.38s both;
}

.enter-cta {
  animation: enter-rise-16 0.8s var(--ease-out-expo) 0.5s both;
}

.enter-foot {
  animation: enter-fade 1s var(--ease-out) 0.75s both;
}

@media (prefers-reduced-motion: reduce) {
  .enter {
    animation: none;
  }
  .pill,
  .round,
  .pill .icon,
  .round .icon {
    transition: none;
  }
}