:root {
  /* Fluid Typography*/
  font-size: 13px;
  --step--1: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  --step-4: clamp(2.5rem, 2rem + 2vw, 4rem);
  /* end */

  /* Modern Dark + Neon Accent (Clean + Dev Vibe) Colors */
  --bg-4: #0f172a;
  --bg-5: #1e293b;
  --bg-6: #0b1120;

  --accent-4: #38bdf8;
  --accent-5: #a78bfa;
  --accent-6: #f472b6;

  --text-primary: #f8fafc;
  --text-muted: #94a3b8;
  /* end */

  /* Soft Editorial / Minimal (Clean Design Feel) Colors */
  --grad-soft-editorial-1x: #f8f7f4;
  --grad-soft-editorial-1y: #c44536;

  --grad-soft-editorial-2x: #eae7dc;
  --grad-soft-editorial-2y: #2c3e50;

  --grad-soft-editorial-3x: #d8cfc4;
  --grad-soft-editorial-3y: #3a5a40;


  --gradient-soft-editorial-1: linear-gradient(135deg, var(--grad-soft-editorial-1x), var(--grad-soft-editorial-1y));
  --gradient-soft-editorial-2: linear-gradient(135deg, var(--grad-soft-editorial-2x), var(--grad-soft-editorial-2y));
  --gradient-soft-editorial-3: linear-gradient(135deg, var(--grad-soft-editorial-3x), var(--grad-soft-editorial-3y));


  --text-soft-editorial-1: #1a1a1a;
  --text-soft-editorial-2: #555;
  /* end */



  /* High Energy Gradient System (Bold Startup Style) Colors*/
  --grad-highenergy-1x: #ff512f;
  --grad-highenergy-1y: #dd2476;

  --grad-highenergy-2x: #1d976c;
  --grad-highenergy-2y: #93f9b9;

  --grad-highenergy-3x: #4e54c8;
  --grad-highenergy-3y: #8f94fb;

  --gradient-highenergy-1: linear-gradient(135deg, var(--grad-highenergy-1x), var(--grad-highenergy-1y));
  --gradient-highenergy-2: linear-gradient(135deg, var(--grad-highenergy-2x), var(--grad-highenergy-2y));
  --gradient-highenergy-3: linear-gradient(135deg, var(--grad-highenergy-3x), var(--grad-highenergy-3y));

  --text-light: #ffffff;
  /* end */


  h1 {font-size: var(--step-4);}
  h2 {font-size: var(--step-3);}
  h3 {font-size: var(--step-2);}
  p {font-size: var(--step-0);}
  small {font-size: var(--step--1);}
}
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/




html, body {
  margin: 0;
  height: 100%;
  scroll-behavior: smooth;
}













main {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}


















/* Fluid Typography */
.hero h1 {
  font-size: clamp(2rem, 10vw, 6rem);
  margin: 0;
}

.hero p {
  font-size: clamp(1rem, 5vw, 2rem);
  margin-top: 1rem;
}

/* Optional: smooth background transitions */
.hero {
  transition: background 0.5s ease;
}

.hero:nth-of-type(1) {background: var(--gradient-soft-editorial-1)}
.hero:nth-of-type(2) {background: var(--gradient-soft-editorial-2)}
.hero:nth-of-type(3) {background: var(--gradient-soft-editorial-3)}

h1, h2, h3 { color: var(--text-soft-editorial-1)}
p, small { color: var(--text-soft-editorial-2)}















section {
  /*fullscreen*/
  height: 100vh;
  scroll-snap-align: start; /* snap at the start of the section */
}


.content > h1, .content > p {
  position: relative;
  top: 50vh; left: 50vw;
  translate: -50%, -50%;


  color: #fff;
}