/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'Lato', sans-serif;
  background:#0f172a;
  color:#f5f5f5;
}

/* GRAIN */
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  background-image:url("https://grainy-gradients.vercel.app/noise.svg");
  opacity:0.06;
  mix-blend-mode:overlay;
}

/* TYPOGRAPHY */
h1,h2,h3 {
  font-family:'Young Serif', serif;
}

h1 { font-size:88px; line-height:1.05; }
h2 { font-size:64px; }
h3 { font-size:32px; }

p {
  color:rgba(255,255,255,0.75);
  line-height:1.7;
}

.variant {
  font-family:monospace;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:0.6;
}

/* LAYOUT */
.container {
  max-width:1200px;
  margin:auto;
  padding:0 40px;
}

.section {
  padding:120px 0;
}

.grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
}

/* HERO */
.hero {
  height:100vh;
  display:flex;
  align-items:center;
}

.hero-content {
  grid-column:7/13;
}

/* VARIANT */
.variant-section {
  position:relative;
  overflow:hidden;
  transform:translateY(80px) scale(1.05);
  opacity:0;
  transition:all 1.2s cubic-bezier(0.22,1,0.36,1);
}

.variant-section.in-view {
  transform:translateY(0) scale(1);
  opacity:1;
}

.variant-content {
  grid-column:3/10;
}

.desc {
  margin-top:12px;
  margin-bottom:24px;
}

/* COLORS */
.already-home {
  background:linear-gradient(135deg,#1D2032,#333C66);
}

.open-windows {
  background:linear-gradient(135deg,#1C2F33,#375256);
}

.still-warm {
  background:linear-gradient(135deg,#3C271A,#70452D);
}

/* CTA */
a {
  color:white;
  text-decoration:none;
  border-bottom:1px solid white;
}

/* RESPONSIVE */
@media(max-width:768px){
  h1 { font-size:48px; }
  h2 { font-size:36px; }

  .hero-content,
  .variant-content {
    grid-column:1/13;
  }

  .section {
    padding:80px 0;
  }

  .container {
    padding:0 20px;
  }
}