:root {
  color-scheme: dark;
  --ink: #fff;
  --blue: #008fff;
  --pink: #ee009c;
  --orange: #ff8e00;
  --yellow: #ffc526;
  --green: #78d85b;
}

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

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

body {
  background: #071015;
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "Arial Rounded MT Bold", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  z-index: 20;
  left: 12px;
  top: 12px;
  transform: translateY(-150%);
  padding: 10px 14px;
  background: #fff;
  color: #071015;
  border-radius: 4px;
}
.skip-link:focus { transform: translateY(0); }

.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;
}

.landing {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: #071015;
  background-image: url("assets/playlab-hero-grips.webp");
  background-size: cover;
  background-position: 43% center;
}

.landing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(1, 9, 13, .68) 0%, rgba(1, 9, 13, .43) 27%, rgba(1, 9, 13, .05) 62%, transparent 100%);
}

.landing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 6, 9, .42), transparent 28%);
}

.site-header {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 3.4vw, 38px) clamp(26px, 4.4vw, 70px);
}

.brand {
  position: relative;
  width: clamp(285px, 34vw, 405px);
  aspect-ratio: 2172 / 724;
  flex: none;
}

.brand__master {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  clip-path: inset(0 0 21% 0);
}

.brand__subtitle {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 2%;
  color: #fff;
  font-size: clamp(8px, 1.05vw, 13px);
  font-weight: 700;
  letter-spacing: .35em;
  text-align: center;
  white-space: nowrap;
}

.hero-copy {
  position: absolute;
  top: clamp(184px, 22vh, 242px);
  left: clamp(30px, 5.8vw, 80px);
  width: min(710px, 51vw);
  z-index: 1;
}

.brand-bars {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 5px;
  margin: 0 0 18px 2px;
}
.brand-bars span { display: block; width: 44px; height: 5px; border-radius: 6px; box-shadow: 0 0 8px currentColor; }
.brand-bars span:nth-child(1) { background: var(--pink); color: var(--pink); }
.brand-bars span:nth-child(2) { background: var(--blue); color: var(--blue); }
.brand-bars span:nth-child(3) { background: var(--yellow); }
.brand-bars span:nth-child(4) { background: var(--green); color: var(--green); }

.age-pill {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 48px;
  margin-bottom: 17px;
  padding: 8px 22px 8px 18px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(rgba(4, 13, 19, .88), rgba(4, 13, 19, .88)) padding-box,
              linear-gradient(100deg, #199fe9 0%, #3e9de1 45%, #f49acd 100%) border-box;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.age-pill svg { width: 38px; height: 29px; flex: none; color: #3db4ff; }
.age-pill span { font-size: clamp(14px, 1.25vw, 18px); font-weight: 600; letter-spacing: .015em; text-transform: uppercase; }

h1 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(50px, 4.2vw, 70px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .96;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .35);
}
h1 span { display: block; white-space: nowrap; }

.intro {
  margin: 17px 0 20px 2px;
  max-width: 670px;
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}

.values {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 20px 2px;
  padding: 0;
  list-style: none;
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}

.values li { display: flex; align-items: center; }
.values li:not(:last-child)::after { content: "/"; margin-left: 18px; color: #fff; font-weight: 500; }
.values__play { color: #f3309d; }
.values__explore { color: #4ea8ff; }
.values__experiment { color: #ffd244; }
.values__grow { color: #7bda67; }

.updates-card {
  position: relative;
  width: min(700px, 100%);
  padding: 18px 22px 20px;
  border: 2px solid transparent;
  border-radius: 25px;
  background: linear-gradient(rgba(4, 14, 21, .86), rgba(4, 14, 21, .86)) padding-box,
              linear-gradient(105deg, #ff149d 0%, #cf30df 34%, #246cef 66%, #2bb8ff 100%) border-box;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.updates-card__lead { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.updates-card__icon { width: 39px; height: 34px; flex: none; color: #f2269c; }
.updates-card h2 { margin: 0 0 1px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.15; }
.updates-card p { margin: 0; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.35; color: rgba(255, 255, 255, .9); }

.updates-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .56fr); gap: 12px; }
.updates-form input,
.updates-form button { min-height: 56px; border-radius: 18px; font: inherit; }
.updates-form input {
  width: 100%;
  padding: 0 19px;
  border: 2px solid rgba(255, 255, 255, .15);
  background: rgba(3, 11, 17, .72);
  color: #fff;
  font-size: 17px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.updates-form input::placeholder { color: rgba(255, 255, 255, .58); }
.updates-form input:focus { border-color: #38aef2; box-shadow: 0 0 0 3px rgba(56, 174, 242, .2); }
.updates-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  padding: 0 20px;
  border: 0;
  background: linear-gradient(100deg, #ca14e8 0%, #f32e9a 43%, #ff7b50 72%, #ffd43c 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(229, 31, 153, .2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.updates-form button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(229, 31, 153, .28); }
.updates-form button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.updates-form button svg { width: 10px; height: 18px; color: #0b1317; }

.business-contact {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.business-contact__icon { width: 38px; height: 38px; flex: none; }
.business-contact__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.22; }
.business-contact__text strong { font-size: clamp(15px, 1.35vw, 19px); }
.business-contact__text span { font-size: clamp(14px, 1.25vw, 18px); font-weight: 700; }
.business-contact__arrow { width: 10px; height: 18px; margin-left: 4px; transition: transform .18s ease; }
.business-contact:hover .business-contact__arrow { transform: translateX(4px); }
.business-contact:focus-visible { outline: 3px solid #fff; outline-offset: 5px; border-radius: 4px; }

@media (max-width: 820px) {
  .landing {
    min-height: max(930px, 100svh);
    background-image: url("assets/playlab-hero-mobile-grips.webp");
    background-size: auto 106%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
  .landing::before {
    background: linear-gradient(180deg, rgba(1,8,13,.72) 0%, rgba(1,8,13,.08) 23%, transparent 38%, rgba(0,7,12,.73) 58%, rgba(0,7,12,.98) 100%);
  }
  .landing::after { background: linear-gradient(90deg, rgba(0,6,11,.12), transparent 60%); }
  .site-header { padding: 16px 18px 0; display: flex; justify-content: center; }
  .brand { width: min(270px, 71vw); }
  .hero-copy {
    top: auto;
    left: 20px;
    right: 20px;
    bottom: 24px;
    width: auto;
  }
  .brand-bars { gap: 8px; margin: 0 0 12px 2px; }
  .brand-bars span { width: 27px; height: 4px; }
  .age-pill { min-height: 40px; margin-bottom: 13px; padding: 6px 14px 6px 12px; gap: 9px; }
  .age-pill svg { width: 29px; height: 23px; }
  .age-pill span { font-size: clamp(11px, 3.25vw, 14px); }
  h1 { font-size: clamp(39px, 10.2vw, 52px); line-height: .97; letter-spacing: -.057em; }
  .intro { margin: 12px 0 14px 1px; font-size: clamp(15.5px, 4.15vw, 18px); line-height: 1.34; letter-spacing: -.015em; }
  .values { gap: 6px 11px; margin: 0 0 14px 1px; font-size: clamp(11.5px, 3.25vw, 15px); letter-spacing: .035em; }
  .values li:not(:last-child)::after { margin-left: 11px; }
  .updates-card { padding: 15px 15px 16px; border-radius: 20px; }
  .updates-card__lead { gap: 13px; margin-bottom: 12px; }
  .updates-card__icon { width: 32px; height: 28px; }
  .updates-card h2 { font-size: 18px; }
  .updates-card p { font-size: 13.5px; }
  .updates-form { grid-template-columns: 1fr; gap: 8px; }
  .updates-form input,
  .updates-form button { min-height: 50px; border-radius: 15px; }
  .updates-form input { padding: 0 16px; font-size: 16px; }
  .updates-form button { font-size: 17px; }
  .business-contact { gap: 12px; margin-top: 13px; }
  .business-contact__icon { width: 33px; height: 33px; }
  .business-contact__text strong { font-size: 14px; }
  .business-contact__text span { font-size: 13.5px; }
}

@media (max-width: 355px) {
  .landing { min-height: max(910px, 100svh); }
  .hero-copy { left: 16px; right: 16px; bottom: 18px; }
  h1 { font-size: 37px; }
  .intro { font-size: 15px; }
  .values { font-size: 11px; gap: 5px 8px; }
  .values li:not(:last-child)::after { margin-left: 8px; }
  .business-contact__text strong { font-size: 13.2px; }
  .business-contact__text span { font-size: 13px; }
}

@media (max-height: 760px) and (min-width: 821px) {
  .hero-copy { top: 184px; width: min(640px, 51vw); }
  .brand-bars { margin-bottom: 12px; }
  .age-pill { min-height: 40px; margin-bottom: 12px; padding-block: 5px; }
  .age-pill svg { width: 31px; height: 24px; }
  h1 { font-size: clamp(45px, 3.85vw, 57px); }
  .intro { margin: 12px 0 13px 2px; font-size: clamp(16px, 1.35vw, 19px); }
  .values { margin-bottom: 13px; font-size: clamp(14px, 1.15vw, 17px); }
  .updates-card { padding: 13px 18px 14px; border-radius: 21px; }
  .updates-card__lead { margin-bottom: 10px; }
  .updates-form input,
  .updates-form button { min-height: 49px; }
  .business-contact { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .updates-form input,
  .updates-form button,
  .business-contact__arrow { transition: none; }
}