:root{
  --ink:#fff8fd;
  --soft:#f6ddea;
  --petal:#ff7bc8;
  --rose:#ffaccf;
  --sun:#ffd46f;
  --sky:#78d8ff;
  --leaf:#8ee68a;
  --night:#08080f;
  --max:1180px;
  --font:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--night);
}

.landing{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  grid-template-rows:auto 1fr;
  background:
    linear-gradient(108deg, rgba(8,8,15,.98) 0%, rgba(30,12,28,.86) 36%, rgba(255,123,200,.18) 63%, rgba(120,216,255,.20) 100%),
    linear-gradient(180deg, rgba(8,8,15,.18) 0%, rgba(8,8,15,.82) 100%),
    linear-gradient(135deg, #1d1029 0%, #071018 48%, #10241a 100%);
}

.landing::before,
.landing::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.landing::before{
  inset:0;
  z-index:-3;
  background:
    linear-gradient(122deg, transparent 0 27%, rgba(255,172,207,.11) 27% 28%, transparent 28% 100%),
    linear-gradient(142deg, transparent 0 58%, rgba(255,212,111,.10) 58% 59%, transparent 59% 100%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(8deg, transparent 0 64%, rgba(142,230,138,.13) 64% 68%, transparent 68% 100%);
}

.landing::after{
  inset:auto 0 0;
  height:42%;
  z-index:-1;
  background:linear-gradient(180deg, transparent, rgba(8,8,15,.90));
}

.atmosphere-photo{
  position:absolute;
  z-index:-2;
  width:42vw;
  min-width:420px;
  max-width:780px;
  height:auto;
  pointer-events:none;
  user-select:none;
}

.atmosphere-photo-one{
  right:-10vw;
  top:-14vh;
  opacity:.28;
  filter:blur(12px) saturate(1.12) contrast(.94);
  transform:rotate(-4deg) scale(1.08);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
}

.atmosphere-photo-two{
  left:28vw;
  bottom:-24vh;
  width:58vw;
  max-width:1100px;
  opacity:.16;
  filter:blur(8px) saturate(1.25);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
}

.brand-lockup{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  padding:24px 0;
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:850;
  letter-spacing:.02em;
}

.brand-lockup img{
  width:42px;
  height:42px;
  display:block;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
}

.brand-lockup span{
  text-shadow:0 2px 22px rgba(0,0,0,.45);
}

.hero{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(380px, .86fr);
  gap:24px;
  align-items:center;
  padding:18px 0 72px;
}

.hero-copy{
  position:relative;
  z-index:2;
  width:min(680px, 100%);
}

.eyebrow{
  margin:0 0 18px;
  color:var(--soft);
  font-size:clamp(.76rem, .74rem + .12vw, .88rem);
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-shadow:0 8px 26px rgba(0,0,0,.58);
}

h1{
  margin:0;
  max-width:9ch;
  font-size:clamp(4.8rem, 10vw, 9.4rem);
  line-height:.86;
  letter-spacing:0;
  text-shadow:
    0 18px 70px rgba(0,0,0,.52),
    0 0 34px rgba(255,123,200,.22);
}

.lede{
  margin:28px 0 0;
  max-width:520px;
  color:var(--soft);
  font-size:clamp(1.3rem, 2.5vw, 2.1rem);
  line-height:1.18;
  font-weight:700;
  text-shadow:0 10px 34px rgba(0,0,0,.56);
}

.hero-photo{
  position:relative;
  z-index:1;
  justify-self:end;
  width:min(54vw, 640px);
  min-width:390px;
  height:min(82svh, 860px);
  object-fit:cover;
  object-position:57% center;
  filter:saturate(1.1) contrast(1.03) drop-shadow(-34px 44px 60px rgba(0,0,0,.42));
  transform:translateX(2vw);
  -webkit-mask-image:radial-gradient(ellipse 68% 82% at 56% 50%, #000 56%, rgba(0,0,0,.82) 68%, transparent 88%);
  mask-image:radial-gradient(ellipse 68% 82% at 56% 50%, #000 56%, rgba(0,0,0,.82) 68%, transparent 88%);
}

@media (max-width:760px){
  .landing{
    background:
      linear-gradient(180deg, rgba(8,8,15,.24) 0%, rgba(20,8,23,.70) 42%, rgba(8,8,15,.96) 100%),
      linear-gradient(135deg, #1d1029 0%, #071018 52%, #10241a 100%);
  }

  .atmosphere-photo-one{
    right:-48vw;
    top:-8vh;
    width:96vw;
    opacity:.18;
  }

  .atmosphere-photo-two{
    left:-18vw;
    bottom:-16vh;
    width:116vw;
    opacity:.12;
  }

  .brand-lockup{
    width:min(100% - 32px, var(--max));
    padding:18px 0;
  }

  .brand-lockup img{
    width:36px;
    height:36px;
  }

  .hero{
    width:min(100% - 32px, var(--max));
    grid-template-columns:1fr;
    gap:0;
    align-items:end;
    padding:0 0 40px;
  }

  .hero-copy{
    order:2;
    margin-top:-22svh;
  }

  .hero-photo{
    order:1;
    justify-self:center;
    width:min(118vw, 560px);
    min-width:0;
    height:66svh;
    object-position:54% center;
    transform:translateX(4vw);
    filter:saturate(1.1) contrast(1.02) drop-shadow(0 34px 45px rgba(0,0,0,.42));
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 66%, transparent 96%);
    mask-image:linear-gradient(180deg, #000 0%, #000 66%, transparent 96%);
  }

  .eyebrow{
    margin-bottom:14px;
  }

  h1{
    font-size:clamp(4rem, 22vw, 6.4rem);
  }

  .lede{
    margin-top:20px;
    max-width:360px;
  }
}

@media (max-width:380px){
  .brand-lockup{
    width:calc(100% - 28px);
  }

  .hero{
    width:calc(100% - 28px);
  }

  h1{
    font-size:3.55rem;
  }
}