* /* ================================
   GLOBAL RESET
================================ */

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

html, body {
  height: 100%;
  font-family: Helvetica, Arial, sans-serif;
}

/* ================================
   PAGE CONTAINER
================================ */

.page {
  height: 100vh;              /* full viewport on desktop */
  display: flex;
  flex-direction: column;
}

/* ================================
   GENERIC SECTION STYLE
================================ */

.section {
  display: flex;
  flex-direction: column;
  justify-content: center;        /* horizontal center */
  align-items: center;            /* vertical center */
  text-align: center;
  padding: 20px;               /* prevents text spill */
}

/* ================================
   TEXT SETTINGS (SAFE SCALING)
================================ */

.section p {
  max-width: 900px;
  font-size: clamp(16px, 2.5vh, 48px);
  line-height: 1.2;
  word-break: keep-all;
}

/* ================================
   LOGO SECTION
================================ */

.logo-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.logo {
  width: clamp(100px, 8vw, 200px);
  height: auto;
}

/* =====================================================
   INDEX PAGE (Desktop proportions)
   Adjust flex numbers to change section proportions
===================================================== */

.index-page .top-section    { flex: 20; background: #61E3FF; color: white; }
.index-page .middle-section { flex: 43; background: #2BDEFF; color: white; }
.index-page .bottom-section { flex: 25; background: #00D8FF; color: white; }
.index-page .logo-section   { flex: 12; background: #00D8FF; }

/* =====================================================
   PAGE 2 (Desktop proportions)
===================================================== */

.page2 .top-section    { flex: 20; background: #61E3FF; color: white; }
.page2 .middle-section { flex: 48; background: #2BDEFF; color: white; }
.page2 .bottom-section { flex: 20; background: #00D8FF; color: white; }
.page2 .logo-section   { flex: 12; background: #00D8FF; }

/* Font sizes for Page 1 */
.index-page .top-section p    { font-size: clamp(30px, 10vh, 200px); }
.index-page .middle-section p { font-size: clamp(14px, 5vh, 100px); }
.index-page .bottom-section p { font-size: clamp(14px, 5vh, 100px); }
.index-page .logo-section p   { font-size: clamp(14px, 3vh, 20px); }  /* optional if you add text to logo section */

/* Font sizes for Page 2 */
.page2 .top-section p    { font-size: clamp(30px, 10vh, 200px); }
.page2 .middle-section p { font-size: clamp(14px, 3.7vh, 100px); }
.page2 .bottom-section p { font-size: clamp(14px, 3.7vh, 100px); }
.page2 .logo-section p   { font-size: clamp(14px, 3vh, 200px); }

.section p {
  width: 80%;
  max-width: 1400px; /* optional safety cap for very large screens */
  margin: 0 auto;   /* keeps it centered */
}
.section a {
  color: white;             /* makes link text white */
}
/* =====================================================
   MOBILE BEHAVIOR
   Keeps proportions relative to TOTAL PAGE
   Allows scrolling naturally
===================================================== */

@media (max-width: 768px) {

  .page {
    min-height: auto;   /* allow content to expand */
  }

  .section {
    padding: 40px 20px;
  }

  .section p {
    font-size: clamp(18px, 4vw, 36px);
  }

}