@font-face {

  font-family: "Manrope";

  font-style: normal;

  font-weight: 200 800;

  font-display: swap;

  src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;

}



@font-face {

  font-family: "Manrope";

  font-style: normal;

  font-weight: 200 800;

  font-display: swap;

  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}



:root {

  --brand: #0f766e;

  --brand-hover: #0d9488;

  --brand-deep: #115e59;

  --fg: #0f172a;

  --fg-soft: #334155;

  --muted: #64748b;

  --paper: #e8f2ef;

  --ink-on-teal: #f5fbf9;

  --font: "Manrope", "Segoe UI", system-ui, sans-serif;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  min-height: 100vh;

  font-family: var(--font);

  color: var(--fg);

  background: var(--paper);

  line-height: 1.45;

}



a {

  color: var(--brand-deep);

}



/* —— Hero —— */

.hero {

  position: relative;

  min-height: 100vh;

  min-height: 100dvh;

  display: flex;

  align-items: center;

  overflow: hidden;

  color: var(--ink-on-teal);

}



.hero__atmosphere {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(ellipse 80% 65% at 12% 18%, rgba(45, 212, 191, 0.28), transparent 55%),

    radial-gradient(ellipse 55% 50% at 92% 12%, rgba(13, 148, 136, 0.35), transparent 52%),

    radial-gradient(ellipse 40% 40% at 70% 88%, rgba(4, 47, 46, 0.55), transparent 60%),

    linear-gradient(155deg, #041f1c 0%, #0a3d38 28%, #0f766e 58%, #062a27 100%);

  animation: atmosphere-drift 20s ease-in-out infinite alternate;

}



.hero__atmosphere::after {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

  background-size: 52px 52px;

  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 80%);

  pointer-events: none;

}



@keyframes atmosphere-drift {

  from { transform: scale(1) translate3d(0, 0, 0); }

  to { transform: scale(1.05) translate3d(-1.2%, 1.2%, 0); }

}



.hero__grid {

  position: relative;

  z-index: 1;

  width: min(68rem, calc(100% - 2.5rem));

  margin: 0 auto;

  padding: clamp(3.5rem, 10vh, 6rem) 0 clamp(2.5rem, 6vh, 4rem);

  display: grid;

  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

  gap: clamp(2rem, 5vw, 4rem);

  align-items: center;

  animation: hero-rise 0.85s ease-out both;

}



@keyframes hero-rise {

  from { opacity: 0; transform: translateY(20px); }

  to { opacity: 1; transform: translateY(0); }

}



.hero__brand {

  margin: 0 0 1rem;

  font-size: clamp(3rem, 8vw, 5.25rem);

  font-weight: 750;

  letter-spacing: -0.045em;

  line-height: 0.92;

}



.hero__headline {

  margin: 0 0 0.85rem;

  max-width: 16ch;

  font-size: clamp(1.25rem, 2.8vw, 1.75rem);

  font-weight: 600;

  letter-spacing: -0.025em;

  line-height: 1.2;

  color: rgba(245, 251, 249, 0.92);

}



.hero__lede {

  margin: 0 0 1.75rem;

  max-width: 36ch;

  font-size: 1.05rem;

  color: rgba(226, 240, 236, 0.82);

}



.hero__actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 1.25rem 1.5rem;

}



.btn-play {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.95rem 1.4rem;

  border-radius: 999px;

  background: #f5fbf9;

  color: var(--brand-deep);

  font-weight: 700;

  font-size: 1rem;

  text-decoration: none;

  box-shadow: 0 12px 28px rgba(2, 24, 22, 0.28);

  transition: transform 0.2s ease, background 0.2s ease;

}



.btn-play::after {

  content: "";

  width: 0.55rem;

  height: 0.55rem;

  border-right: 2px solid currentColor;

  border-bottom: 2px solid currentColor;

  transform: rotate(-45deg);

  transition: transform 0.25s ease;

}



.btn-play:hover,

.btn-play:focus-visible {

  background: #fff;

  transform: translateY(-2px);

}



.btn-play:hover::after,

.btn-play:focus-visible::after {

  transform: rotate(-45deg) translate(2px, 2px);

}



.hero__qr {

  margin: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.4rem;

  animation: qr-in 0.9s 0.2s ease-out both;

}



@keyframes qr-in {

  from { opacity: 0; transform: scale(0.94); }

  to { opacity: 1; transform: scale(1); }

}



.hero__qr img {

  width: 7.25rem;

  height: 7.25rem;

  border-radius: 0.85rem;

  background: #f5fbf9;

  padding: 0.35rem;

  box-shadow: 0 10px 28px rgba(2, 24, 22, 0.28);

}



.hero__qr figcaption {

  font-size: 0.78rem;

  font-weight: 600;

  letter-spacing: 0.02em;

  color: rgba(226, 240, 236, 0.75);

}



.hero__device {

  display: flex;

  justify-content: center;

  animation: device-float 7s ease-in-out infinite;

}



@keyframes device-float {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-10px); }

}



/* Screenshots already include a phone frame — no CSS bezel. */

.shot {

  display: block;

  width: min(15.5rem, 58vw);

  height: auto;

  filter: drop-shadow(0 22px 40px rgba(2, 24, 22, 0.4));

}



.shot--hero {

  width: min(18.5rem, 72vw);

  filter: drop-shadow(0 28px 55px rgba(2, 24, 22, 0.5));

}



/* —— Values —— */

.values {

  width: min(42rem, calc(100% - 2.5rem));

  margin: 0 auto;

  padding: 4.75rem 0 2.5rem;

}



.values__title {

  margin: 0 0 0.55rem;

  font-size: clamp(1.45rem, 3vw, 1.85rem);

  letter-spacing: -0.025em;

  color: var(--fg);

}



.values__lede {

  margin: 0 0 1.5rem;

  color: var(--muted);

  max-width: 36ch;

}



.values__list {

  margin: 0;

  padding: 0;

  list-style: none;

  display: grid;

  gap: 0.85rem;

  color: var(--fg-soft);

  font-size: 1.05rem;

}



.values__list li {

  padding-left: 1.15rem;

  position: relative;

}



.values__list li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0.55em;

  width: 0.45rem;

  height: 0.45rem;

  border-radius: 50%;

  background: var(--brand);

}



/* —— Gallery —— */

.gallery {

  width: min(68rem, calc(100% - 2.5rem));

  margin: 0 auto;

  padding: 2rem 0 4.5rem;

}



.gallery__title {

  margin: 0 0 0.45rem;

  font-size: clamp(1.35rem, 3vw, 1.7rem);

  letter-spacing: -0.02em;

}



.gallery__lede {

  margin: 0 0 2rem;

  color: var(--muted);

  max-width: 40ch;

}



.gallery__rail {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: clamp(1.25rem, 3vw, 2rem);

  align-items: end;

  justify-items: center;

}



.gallery__item {

  margin: 0;

  text-align: center;

}



.gallery__item figcaption {

  margin-top: 0.85rem;

  font-size: 0.95rem;

  font-weight: 650;

  color: var(--fg-soft);

}



.site-footer {

  width: min(68rem, calc(100% - 2.5rem));

  margin: 0 auto;

  padding: 0 0 2.5rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  align-items: center;

  color: var(--muted);

  font-size: 0.9rem;

}



.site-footer a {

  text-decoration: none;

  font-weight: 600;

}



.site-footer a:hover,

.site-footer a:focus-visible {

  text-decoration: underline;

}



.site-footer__sep {

  opacity: 0.5;

}



/* —— Legal (privacy) —— */

.legal {

  width: min(42rem, calc(100% - 2.5rem));

  margin: 0 auto;

  padding: 3rem 0 2.5rem;

}



.legal__back {

  display: inline-block;

  margin-bottom: 1.5rem;

  font-weight: 600;

  text-decoration: none;

}



.legal__back:hover,

.legal__back:focus-visible {

  text-decoration: underline;

}



.legal h1 {

  margin: 0 0 0.5rem;

  font-size: clamp(1.75rem, 4vw, 2.25rem);

  letter-spacing: -0.03em;

}



.legal__meta {

  margin: 0 0 2rem;

  color: var(--muted);

  font-size: 0.9rem;

}



.legal h2 {

  margin: 1.75rem 0 0.6rem;

  font-size: 1.1rem;

}



.legal p,

.legal ul {

  margin: 0 0 0.9rem;

  color: var(--fg-soft);

}



.legal ul {

  padding-left: 1.2rem;

}



.legal a {

  font-weight: 600;

}



@media (max-width: 860px) {

  .hero__grid {

    grid-template-columns: 1fr;

    padding-top: 3.25rem;

    text-align: left;

  }



  .hero__device {

    order: -1;

    animation: none;

  }



  .shot--hero {

    width: min(17rem, 72vw);

  }



  .hero__brand {

    font-size: clamp(2.75rem, 12vw, 4rem);

  }



  .gallery__rail {

    grid-template-columns: 1fr;

    gap: 2.25rem;

  }

}



@media (prefers-reduced-motion: reduce) {

  .hero__atmosphere,

  .hero__grid,

  .hero__qr,

  .hero__device {

    animation: none;

  }

}



/* —— Closed testing signup (secret URL) —— */

.testers-page {

  background:

    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(13, 148, 136, 0.12), transparent 55%),

    var(--paper);

}



.testers {

  width: min(28rem, calc(100% - 2.5rem));

  margin: 0 auto;

  padding: 3.5rem 0 2rem;

}



.testers__brand {

  margin: 0 0 0.5rem;

  font-size: 1.15rem;

  font-weight: 750;

  letter-spacing: -0.03em;

  color: var(--brand-deep);

}



.testers__title {

  margin: 0 0 0.75rem;

  font-size: clamp(1.65rem, 4vw, 2.1rem);

  letter-spacing: -0.03em;

}



.testers__lede {

  margin: 0 0 0.85rem;

  color: var(--fg-soft);

}



.testers__meta {

  margin: 0 0 1.75rem;

  color: var(--muted);

  font-size: 0.95rem;

}



.testers__form {

  display: grid;

  gap: 1rem;

}



.testers__field {

  display: grid;

  gap: 0.35rem;

  font-size: 0.9rem;

  font-weight: 650;

  color: var(--fg-soft);

}



.testers__field input {

  font: inherit;

  font-weight: 500;

  padding: 0.75rem 0.9rem;

  border: 1px solid rgba(15, 118, 110, 0.28);

  border-radius: 0.75rem;

  background: #fff;

  color: var(--fg);

}



.testers__field input:focus {

  outline: 2px solid rgba(15, 118, 110, 0.35);

  outline-offset: 1px;

}



.testers__hp {

  position: absolute;

  left: -9999px;

  width: 1px;

  height: 1px;

  overflow: hidden;

}



.testers__submit {

  justify-self: start;

  border: 0;

  cursor: pointer;

  font: inherit;

}



.testers__submit:disabled {

  opacity: 0.6;

  cursor: wait;

}



.testers__hint {

  margin: 0;

  font-size: 0.85rem;

  color: var(--muted);

}



.testers__msg {

  margin: 0;

  font-size: 0.95rem;

  font-weight: 600;

}



.testers__msg--ok {

  color: var(--brand-deep);

}



.testers__msg--err {

  color: #b91c1c;

}



.testers__done {

  margin: 0;

  padding: 1rem 1.1rem;

  border-radius: 0.85rem;

  background: rgba(15, 118, 110, 0.1);

  color: var(--brand-deep);

  font-weight: 650;

}



.testers__footer {

  width: min(28rem, calc(100% - 2.5rem));

}