.page-hero {

  min-height: 70vh;

  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: center;

  padding: 5% 8%;

}

.page-text h1 {

  font-size: 5rem;
  margin-bottom: 1rem;

}

.page-text p {

  font-size: 1.2rem;
  max-width: 500px;
  line-height: 1.8;
  margin-bottom: 1.5rem;

}

.page-image img {

  width: 100%;
  max-width: 500px;

}


.story-navigation {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 5% 8%;

}

.nav-story {

  text-decoration: none;

  background: white;

  padding: 1rem 2rem;

  border-radius: 50px;

  color: var(--text);

  transition: 0.3s ease;

}

.nav-story:hover {

  transform: translateY(-5px);

  background: var(--orange);

  color: white;

}

.esi-hero {

  min-height: 85vh;

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  padding: 4% 8%;

  gap: 4rem;

}

.esi-text h1 {

  font-size: 5rem;

  line-height: 1;

  color: var(--orange);

  max-width: 700px;

}

.esi-text p {

  margin-top: 2rem;

  font-size: 1.2rem;

  line-height: 1.8;

  max-width: 550px;

}

.esi-image img {

  width: 100%;

  max-width: 700px;

}

.big-quote {

  padding: 10% 10%;

}

.big-quote h2 {

  font-size: 4rem;

  line-height: 1.1;

  max-width: 1000px;

  color: var(--blue);

}

.esi-grid {

  padding: 0 8% 10% 8%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

}

.esi-card {

  background: white;

  border-radius: 40px;

  padding: 3rem;

}

.esi-card h3 {

  font-size: 2rem;

  margin-bottom: 1rem;

  color: var(--green);

}

.esi-card p {

  line-height: 1.8;

  font-size: 1.05rem;

}

.image-card {

  padding: 0;

  overflow: hidden;

}

.image-card {

  height: 400px;

  overflow: hidden;

  border-radius: 40px;

}

.image-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.purpose {

  padding: 5% 8% 12% 8%;

}

.purpose-text span {

  color: var(--orange);

  text-transform: uppercase;

  letter-spacing: 2px;
  font-size: 2rem;

}

.purpose-text h2 {

  font-size: 4rem;

  line-height: 1;

  margin: 1rem 0;

  max-width: 800px;

}

.purpose-text p {

  max-width: 700px;

  line-height: 1.8;

  font-size: 1.1rem;

}

.question-section {

  padding: 0 8% 10% 8%;

}

.question-section h2 {

  font-size: 3.5rem;

  line-height: 1.1;

  max-width: 900px;

  color: var(--yellow);

}

.esi-list {

  margin-top: 2rem;

  padding-left: 1.5rem;

}

.esi-list li {

  margin-bottom: 1rem;

  line-height: 1.7;

  font-size: 1.05rem;

}

.changes-hero {

  min-height: 85vh;

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  padding: 4% 8%;

  gap: 4rem;

}

.changes-text h1 {

  font-size: 5rem;

  line-height: 1;

  color: var(--orange);

  max-width: 700px;

}

.changes-text p {

  margin-top: 2rem;

  line-height: 1.8;

  font-size: 1.1rem;

  max-width: 550px;

}

.changes-image img {

  width: 115%;

  max-width: 850px;

  object-fit: contain;

}

.narrative-break {

  padding: 8% 10%;

}

.narrative-break h2 {

  font-size: 4rem;

  line-height: 1.1;

  color: var(--yellow);

  max-width: 900px;

}

.changes-grid {

  padding: 0 8% 10% 8%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

  align-items: start;

}

.change-card {

  background: white;

  padding: 3rem;

  border-radius: 40px;

}

.change-card span {

  text-transform: uppercase;

  letter-spacing: 2px;

  color: var(--orange);

}

.change-card h3 {

  font-size: 2rem;

  line-height: 1.1;

  margin: 1rem 0;

}

.change-card p {

  line-height: 1.8;

}

.change-image {

  height: 400px;

  overflow: hidden;

  border-radius: 40px;

}

.change-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.large-image {

  height: 550px;

}

.question-block {

  padding: 5% 8% 10% 8%;

}

.question-block h2 {

  font-size: 4rem;

  line-height: 1.1;

  max-width: 850px;

  color: var(--green);

}

.full-visual {

  padding: 0 8%;

}

.full-visual img {

  width: 100%;

  border-radius: 40px;

}

.ending-text {

  padding: 10% 8%;

}

.ending-text p {

  font-size: 3rem;

  line-height: 1.2;

  max-width: 700px;
  font-weight: 200;

}

.visual-text h2 {

  font-size: 3.5rem;

  line-height: 1.1;

  color: var(--orange);

  margin-bottom: 1.5rem;

}

.visual-text p {

  line-height: 1.8;

  font-size: 1.1rem;

  max-width: 450px;

}


.emotion-page {

  background: #eef3ff;

}

.emotion-hero {

  min-height: 70vh;

  display: flex;

  align-items: center;

  padding: 0 8%;

}

.emotion-content span {

  text-transform: uppercase;

  letter-spacing: 3px;

  color: var(--blue);

}

.emotion-content h1 {

  font-size: 6rem;

  line-height: 0.95;

  max-width: 800px;

  margin: 1rem 0;

  color: #3d5cff;

}

.emotion-content p {

  font-size: 1.2rem;

  line-height: 1.8;

  max-width: 500px;

}

.floating-thoughts {

  position: relative;

  height: 300px;

}

.thought {

  position: absolute;

  background: white;

  padding: 1.5rem 2rem;

  border-radius: 100px;

  font-size: 1rem;

}

.one {

  top: 20px;

  left: 10%;

}

.two {

  top: 120px;

  right: 12%;

}

.three {

  bottom: 20px;

  left: 30%;

}

.emotion-center {

  padding: 5% 8% 10% 8%;

  text-align: center;

}

.emotion-center h2 {

  font-size: 4rem;

  line-height: 1;

  color: var(--blue);

  margin-bottom: 2rem;

}

.emotion-center p {

  max-width: 700px;

  margin: auto;

  line-height: 1.9;

  font-size: 1.1rem;

}

.emotion-cards {

  padding: 0 8% 10% 8%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

  align-items: start;

}

.emotion-card {

  background: rgba(255,255,255,0.7);

  backdrop-filter: blur(10px);

  border-radius: 40px;

  padding: 3rem;

}

.emotion-card h3 {

  font-size: 2.5rem;

  color: #3d5cff;

  margin-bottom: 1rem;

}

.emotion-card p {

  line-height: 1.8;

}

.image-emotion {

  padding: 0;

  overflow: hidden;

}

.image-emotion img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.large-emotion {

  height: 550px;

}

.emotion-question {

  padding: 0 8% 8% 8%;

}

.emotion-question h2 {

  font-size: 4rem;

  line-height: 1;

  max-width: 800px;

}

.emotion-visual {

  padding: 0 8% 8% 8%;

}

.visual-box {

  background: white;

  border-radius: 40px;

  padding: 2rem;

}

.visual-box img {

  width: 60%;

  max-width: 500px;

  border-radius: 30px;

  display: block;

  margin: auto;

}

.visual-box p {

  margin-top: 1.5rem;

  font-size: 1.2rem;

}

.soft-ending {

  padding: 2% 8% 10% 8%;

}

.soft-ending h2 {

  font-size: 5rem;

  line-height: 1;

  max-width: 700px;

  color: #3d5cff;

}

.consent-page {

  background: #f2f8f1;

}

.consent-hero {

  min-height: 80vh;

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 4rem;

  padding: 4% 8%;

}

.consent-text span {

  text-transform: uppercase;

  letter-spacing: 3px;

  color: var(--green);

}

.consent-text h1 {

  font-size: 5.5rem;

  line-height: 0.95;

  margin: 1rem 0;

  color: #4f8a68;

}

.consent-text p {

  max-width: 550px;

  line-height: 1.9;

  font-size: 1.1rem;

}

.consent-image img {

  width: 100%;

  max-width: 700px;

}

.safe-quote {

  padding: 5% 8%;

}

.safe-quote h2 {

  font-size: 4rem;

  line-height: 1.1;

  max-width: 900px;

  color: #4f8a68;

}

.consent-grid {

  padding: 0 8% 8% 8%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

  align-items: start;

}

.consent-box {

  background: white;

  border-radius: 40px;

  padding: 3rem;

}

.consent-box h3 {

  font-size: 2rem;

  line-height: 1.1;

  margin-bottom: 1rem;

  color: #4f8a68;

}

.consent-box p {

  line-height: 1.8;

}

.image-box {

  padding: 0;

  overflow: hidden;

}

.image-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.small-box {

  height: 350px;

}

.situations {

  padding: 0 8% 10% 8%;

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

}

.situation-card {

  background: white;

  padding: 1.2rem 2rem;

  border-radius: 100px;

}

.situation-card p {

  font-size: 1rem;

}

.consent-question {

  padding: 0 8% 8% 8%;

}

.consent-question h2 {

  font-size: 4rem;

  line-height: 1;

  max-width: 700px;

}

.consent-visual {

  padding: 0 8% 8% 8%;

}

.consent-visual img {

  width: 100%;

  border-radius: 40px;

  margin-top: 2rem;

}

.consent-visual-text p {

  font-size: 1.3rem;

  line-height: 1.8;

  max-width: 700px;

}

.consent-ending {

  padding: 4% 8% 10% 8%;

}

.consent-ending h2 {

  font-size: 5rem;

  line-height: 1;

  max-width: 900px;

  color: #4f8a68;

}

.relations-page {

  background: #fff4ed;

}

.relations-hero {

  min-height: 75vh;

  padding: 6% 8%;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.relations-text span {

  text-transform: uppercase;

  letter-spacing: 3px;

  color: #ff7b54;

}

.relations-text h1 {

  font-size: 6rem;

  line-height: 0.95;

  max-width: 850px;

  margin-top: 1rem;

  color: #ff7b54;

}

.chat-bubbles {

  margin-top: 4rem;

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

}

.bubble {

  background: white;

  padding: 1rem 2rem;

  border-radius: 100px;

  font-size: 1rem;

}

.relation-quote {

  padding: 0 8% 8% 8%;

}

.relation-quote h2 {

  font-size: 4rem;

  line-height: 1;

  max-width: 900px;

}

.relationship-collage {

  padding: 0 8% 10% 8%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

  align-items: center;

}

.collage-image img {

  width: 100%;

  border-radius: 40px;

}

.large img {

  height: 550px;

  object-fit: cover;

}

.small img {

  height: 350px;

  object-fit: cover;

}

.collage-text {

  background: white;

  padding: 3rem;

  border-radius: 40px;

}

.collage-text h3 {

  font-size: 2rem;

  margin-bottom: 1rem;

  color: #ff7b54;

}

.collage-text p {

  line-height: 1.8;

}

.rotate-left {

  transform: rotate(-2deg);

}

.rotate-right {

  transform: rotate(2deg);

}

.message-section {

  padding: 0 8% 10% 8%;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}

.message {

  background: white;

  width: fit-content;

  padding: 1rem 2rem;

  border-radius: 100px;

  font-size: 1.1rem;

}

.message:nth-child(2) {

  margin-left: auto;

}

.message:nth-child(3) {

  margin-left: 10%;

}

.relations-visual {

  padding: 0 8% 8% 8%;

}

.visual-content {

  position: relative;

}

.visual-content img {

  width: 75%;

  border-radius: 40px;

}
.floating-visual {

  padding: 2% 8% 4% 8%;

  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  align-items: end;

}

.visual-image img {

  width: 100%;

  border-radius: 40px;

  display: block;

}

.visual-text {

  background: white;

  padding: 2.5rem;

  border-radius: 35px;

  margin-left: -100px;

  margin-bottom: -40px;

  position: relative;

  z-index: 2;

  max-width: 450px;

}

.visual-text h2 {

  font-size: 3.5rem;

  line-height: 1.1;

  color: var(--orange);

  margin-bottom: 1.5rem;

}

.visual-text p {

  line-height: 1.8;

  font-size: 1.1rem;

}

.visual-text h2 {

  font-size: 2.5rem;

  line-height: 1.1;

}

.relations-ending {

  padding: 12% 8% 10% 8%;

}

.relations-ending h2 {

  font-size: 5rem;

  line-height: 1;

  max-width: 800px;

  color: #ff7b54;

}

.help-page {

  background: #111827;

  color: white;

}

.dark-nav {

  background: rgba(17,24,39,0.7);

  backdrop-filter: blur(20px);

}

.dark-nav nav a {

  color: white;

}

.help-hero {

  min-height: 75vh;

  padding: 10% 8%;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.help-hero span {

  text-transform: uppercase;

  letter-spacing: 3px;

  color: #8fa8ff;

}

.help-hero h1 {

  font-size: 6rem;

  line-height: 0.95;

  max-width: 850px;

  margin: 1rem 0;

}

.help-hero p {

  max-width: 500px;

  line-height: 1.9;

  font-size: 1.1rem;

  color: rgba(255,255,255,0.8);

}

.night-message {

  padding: 0 8% 8% 8%;

}

.message-glow {

  background: rgba(255,255,255,0.08);

  border: 1px solid rgba(255,255,255,0.1);

  padding: 3rem;

  border-radius: 40px;

  backdrop-filter: blur(20px);

}

.message-glow p {

  font-size: 2rem;

  line-height: 1.3;

  max-width: 700px;

}

.help-grid {

  padding: 0 8% 10% 8%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

}

.help-card {

  background: rgba(255,255,255,0.06);

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 35px;

  padding: 2.5rem;

  backdrop-filter: blur(20px);

}

.help-card h3 {

  font-size: 2rem;

  margin-bottom: 1rem;

}

.help-card p {

  line-height: 1.8;

  color: rgba(255,255,255,0.8);

}

.help-card span {

  display: block;

  margin-top: 2rem;

  color: #8fa8ff;

}

.coming-soon {

  padding: 0 8% 10% 8%;

}

.coming-box {

  background: linear-gradient(
    135deg,
    rgba(143,168,255,0.15),
    rgba(255,255,255,0.05)
  );

  padding: 4rem;

  border-radius: 40px;

}

.coming-box span {

  text-transform: uppercase;

  letter-spacing: 3px;

  color: #8fa8ff;

}

.coming-box h2 {

  font-size: 4rem;

  line-height: 1;

  max-width: 900px;

  margin: 1rem 0 2rem 0;

}

.coming-box p {

  max-width: 600px;

  line-height: 1.8;

  color: rgba(255,255,255,0.8);

}

.soft-messages {

  padding: 0 8% 10% 8%;

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

}

.soft-line {

  background: rgba(255,255,255,0.08);

  padding: 1rem 2rem;

  border-radius: 100px;

}

.final-ending {

  padding: 0 8% 12% 8%;

}

.final-ending h2 {

  font-size: 5rem;

  line-height: 1;

  margin-bottom: 2rem;

}

.final-ending p {

  max-width: 600px;

  line-height: 1.8;

  color: rgba(255,255,255,0.8);

}