@font-face {
  font-family: 'Tulsey Logo';
  src: url('TulseyLogoVariable-VF_ttf.woff2') format('woff2');
  font-stretch: 50% 300%;
  font-style: oblique 0deg 12deg;
}

@font-face {
  font-family: 'AfternoonsSubset_Light';
  src: url('AfternoonsSubset-Light_otf.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  font-family: 'AfternoonsSubset_Light', sans-serif;
  background-color: #FFF4FA;
  color: #333;
}

header {
  display: flex;
  flex-direction: column; 
  align-items: center;    
  justify-content: center;
  padding: 40px 20px;
  background: #fff;
}

header .logo {
  font-family: 'Tulsey Logo', sans-serif;
  font-size: 11rem;
  line-height: 0.68;       
  text-align: center;     
  text-transform: uppercase;
  margin-bottom: 25px;    
  cursor: pointer;
  font-variation-settings: "wdth" 140, "slnt" 0; 
  transition: font-variation-settings 0.3s ease-in-out;
  letter-spacing: -0.06em;
  isolation: isolate;
}

header .logo:hover {
  font-variation-settings: "wdth" 120, "slnt" 12;
}

header .logo.expanded {
  font-variation-settings: "wdth" 300, "slnt" 0;
}

header .logo.expanded:hover {
  font-variation-settings: "wdth" 300, "slnt" 12;
}

header .logo span {
  display: inline-block; 
  mix-blend-mode: multiply; 
}

header .logo span:nth-child(1),
header .logo span:nth-child(3),
header .logo span:nth-child(6) {
  color: #47abff;
}

header .logo span:nth-child(2),
header .logo span:nth-child(5),
header .logo span:nth-child(7) {
  color: #ff00be;
}

nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; 
  gap: 20px;       
  margin-top: 10px;
}

nav a {
  font-size: 1.2rem;
  font-weight: normal;
  text-decoration: none;
  color: #47abff;     
  transition: color 0.2s ease;
}

nav a:hover {
  color: #ff00be;  
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 20px; 
  max-width: 700px;
  margin: 0 auto;      
}

.hero h1 {
  font-size: 4.5rem;
  margin-bottom: 10px;
  color: #111;
  text-transform: uppercase;
  letter-spacing: normal; 
  font-feature-settings: "ss01" 1;
}

.hero p {
  font-size: 1.35rem;
  line-height: 1.7;
  color: #333;          
  margin-bottom: 10px;  
}

.text-link {
  color: #47abff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.text-link:hover {
  color: #ff00be;
  text-decoration: underline;
}

.footer-banner-bg {
  width: 100%;
  height: 12.06vw;
  max-height: 181px;
  min-height: 100px;
  margin-top: 60px;
  background-image: url('tulsey_landing_footer.jpg'); 
  background-position: center top; 
  background-repeat: no-repeat;
  background-size: cover;          
  transition: height 0.1s ease;
}

.copyright-notice {
  text-align: center;
  font-size: 0.9rem;
  color: #333;
  padding: 24px 20px;
  background-color: #EBF5FF;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  header .logo {
    font-size: 25vw; 
    line-height: 0.68;
    margin-bottom: 15px;
  }
  .hero h1 {
    font-size: 3rem;   
  }
  .hero p {
    font-size: 1.15rem; 
  }
}