:root {
  --pink: #d0826f;
  --blue: #3b4358;
  --darkblue: #1c202b;
  --mainfont: "Futura 100", sans-serif;
  --script: "Covered By Your Grace", cursive;
}

/* -------------------------------------------- */
/* Global */
/* -------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;

  font-family: var(--mainfont);
}

body {
  background-image: url("img/Splitz (2).png");
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
}

p {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
}

h2,
h3,
h4 {
  margin: 0;
  font-family: var(--mainfont);
}

h2 {
  color: var(--blue);
  font-size: 64px;
  line-height: 1.05;
  text-transform: uppercase;
}

h3 {
  color: var(--blue);
  font-size: 46px;
  font-weight: lighter;
  font-style: italic;
}

h4 {
  color: var(--blue);
  font-size: 46px;
  font-weight: normal;
}

/* -------------------------------------------- */
/* Back Button */
/* -------------------------------------------- */

#backBtn {
  position: fixed;
  top: 30px;
  left: 30px;
  width: 75px;
  height: 75px;
  z-index: 9999;
  border-radius: 50%;

  cursor: pointer;
  transition: transform 0.25s ease;
}

/* hover */
#backBtn:hover {
  transform: scale(0.9);
}

/* -------------------------------------------- */
/* Shared Section Layout */
/* -------------------------------------------- */

.sidebyside,
.sidebyside2,
.stacked {
  position: relative;
  overflow: hidden;
}

.sidebyside {
  min-height: 100vh;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  gap: 100px;
  padding: 100px;
  color: var(--blue);
}

.sidebyside2 {
  min-height: 100vh;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  gap: 100px;
  padding: 100px;
  color: white;
}

/* -------------------------------------------- */
/* Text Blocks */
/* -------------------------------------------- */

.words {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  width: 600px;
}

.words2 {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: flex-end;

  width: 200px;
  height: 100%;
}

.words3 {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 400px;
  line-height: 1.2;
  color: white;
}

/* -------------------------------------------- */
/* Main Images */
/* -------------------------------------------- */

.sidebyside > img:not(.deco),
.sidebyside2 > img:not(.deco),
.stacked > img:not(.deco) {
  position: relative;
  z-index: 2;
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------- */
/* Stacked Section */
/* -------------------------------------------- */

.stacked {
  min-height: 100vh;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  padding: 100px;
  gap: 20px;
}

.stacked img {
  max-width: 00px;
  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------- */
/* Decoration Images */
/* -------------------------------------------- */

.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.bill {
  width: 130px;
}

.moneybag {
  width: 170px;
}

.plane {
  width: 560px;
}

/* Hero section decorations */
.bill-1 {
  top: 90px;
  right: 180px;
  transform: rotate(18deg);
  z-index: 10;
  scale: 3;
}

.bill-2 {
  top: 500px;
  left: 180px;

  transform: rotate(-18deg);
  z-index: 10;
  scale: 2;
}

.moneybag-1 {
  right: 80px;
  bottom: 100px;
  z-index: 10;
}

.plane-1 {
  left: -20px;
  bottom: -40px;
  transform: rotate(-4deg);
  z-index: 10;
}

/* Record transaction section decorations */
.bill-3 {
  top: 120px;
  right: 120px;
  transform: rotate(20deg);
  scale: 2;
}

.moneybag-2 {
  left: 90px;
  bottom: 120px;
  scale: 1.5;
}

/* Expenses section decorations */
.bill-4 {
  top: 2200px;
  right: 60px;
  transform: rotate(18deg);
  z-index: 100;
  scale: 2;
}

/* Settling */
.plane-2 {
  right: 20px;
  top: 100px;
  transform: scaleX(-1) rotate(4deg);
  z-index: 10;
  scale: 1.2;
}

/* Final section decorations */
.bill-6 {
  top: 120px;
  left: 80px;
  transform: rotate(-13deg);
  scale: 2;
}

.bill-7 {
  right: 200px;
  top: 270px;
  transform: rotate(18deg);
  scale: 3;
}

.moneybag-3 {
  left: 200px;
  bottom: 200px;
}

/* -------------------------------------------- */
/* Button */
/* -------------------------------------------- */

button {
  font-family: var(--mainfont);
  padding: 12px 32px;
  border-radius: 25px;
  background-color: var(--pink);
  color: white;
  border: none;
  width: 150px;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;

  transition:
    opacity 0.2s,
    background-color 0.2s,
    transform 0.2s;
}

button:hover {
  opacity: 1;
  background-color: var(--blue);
  transform: scale(0.95);
}

/* --------------------------------------------
   RESPONSIVE FIX
-------------------------------------------- */

@media (max-width: 1100px) {
  .sidebyside,
  .sidebyside2 {
    gap: clamp(32px, 5vw, 60px);
    padding: 80px 6vw;
  }

  .words {
    width: min(45vw, 500px);
  }

  .words2,
  .words3 {
    width: min(35vw, 320px);
  }

  h2 {
    font-size: clamp(42px, 6vw, 64px);
  }

  h3,
  h4 {
    font-size: clamp(28px, 4vw, 46px);
  }

  p {
    font-size: clamp(16px, 2vw, 24px);
  }

  .sidebyside > img:not(.deco),
  .sidebyside2 > img:not(.deco) {
    max-width: min(34vw, 360px);
  }

  .plane {
    width: clamp(280px, 38vw, 560px);
  }

  .moneybag {
    width: clamp(90px, 12vw, 170px);
  }

  .bill {
    width: clamp(70px, 10vw, 130px);
  }
}

@media (max-width: 768px) {
  .sidebyside,
  .sidebyside2 {
    min-height: auto;
    flex-direction: column;
    gap: 32px;
    padding: 90px 24px;
    text-align: center;
  }

  .hero-section {
    padding-top: 120px;
  }

  .words,
  .words2,
  .words3 {
    width: 100%;
    max-width: 430px;
    align-items: center;
    text-align: center;
  }

  .words2 {
    align-self: center;
    height: auto;
  }

  .sidebyside > img:not(.deco),
  .sidebyside2 > img:not(.deco) {
    max-width: min(72vw, 280px);
  }

  .stacked {
    padding: 80px 24px;
  }

  .stacked img {
    width: 100% !important;
    max-width: 900px;
  }

  #backBtn {
    width: 48px;
    height: 48px;
    top: 20px;
    left: 20px;
  }

  .bill {
    width: clamp(60px, 20vw, 100px);
  }

  .moneybag {
    width: clamp(70px, 22vw, 120px);
  }

  .plane {
    width: clamp(220px, 70vw, 360px);
  }

  .bill-1 {
    top: 80px;
    right: -10px;
    scale: 1.4;
  }

  .bill-2 {
    top: 420px;
    left: -20px;
    scale: 1.2;
  }

  .moneybag-1 {
    right: 16px;
    bottom: 40px;
  }

  .plane-1 {
    left: -80px;
    bottom: -20px;
    scale: 0.8;
  }

  .bill-3,
  .bill-6 {
    left: 10px;
    top: 60px;
    scale: 1.2;
  }

  .bill-7 {
    right: 10px;
    top: 120px;
    scale: 1.4;
  }

  .moneybag-2,
  .moneybag-3 {
    left: 20px;
    bottom: 40px;
    scale: 1;
  }

  .plane-2 {
    right: -80px;
    top: 40px;
    scale: 0.8;
  }
}

/* --------------------------------------------
   RESPONSIVE OVERLAP + WORD SPACING FIX
-------------------------------------------- */

@media (max-width: 1100px) {
  .sidebyside,
  .sidebyside2 {
    gap: clamp(32px, 5vw, 70px);
    padding: 80px 6vw;
  }

  .words,
  .words2,
  .words3 {
    min-width: 0;
  }

  .words {
    width: min(42vw, 520px);
  }

  .words2,
  .words3 {
    width: min(32vw, 360px);
  }

  h2 {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 0.95;
  }

  h3,
  h4 {
    font-size: clamp(26px, 3.6vw, 46px);
    line-height: 1.1;
  }

  p {
    font-size: clamp(16px, 1.8vw, 24px);
    line-height: 1.35;
  }

  .sidebyside > img:not(.deco),
  .sidebyside2 > img:not(.deco) {
    max-width: min(32vw, 340px);
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  body {
    background-image: url("img/Splitz_Mobile.png");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }

  .plane-1 {
    display: none;
  }

  .sidebyside,
  .sidebyside2 {
    flex-direction: column;
    min-height: auto;
    gap: 28px;
    padding: 90px 24px;
    text-align: center;
  }

  .words,
  .words2,
  .words3 {
    width: 100%;
    max-width: 430px;
    align-items: center;
    text-align: center;
  }

  .words2 {
    height: auto;
    align-self: center;
  }

  .sidebyside > img:not(.deco),
  .sidebyside2 > img:not(.deco) {
    max-width: min(72vw, 280px);
  }

  h2 {
    font-size: clamp(34px, 10vw, 48px);
    line-height: 0.95;
  }

  h3,
  h4 {
    font-size: clamp(22px, 7vw, 34px);
    line-height: 1.1;
  }

  p {
    font-size: 16px;
    line-height: 1.45;
  }

  .words h2,
  .words h3,
  .words2 h4,
  .words3 h3 {
    margin-bottom: 10px !important;
  }
}

@media (max-width: 500px) {
  .moneybag-1 {
    right: 20px;
    bottom: 150px;
    z-index: 10;
  }
}