@font-face {
  font-display: swap;
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/Inconsolata-Regular.ttf') format('opentype');
}
@font-face {
  font-display: swap;
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/Inconsolata-Bold.ttf') format('opentype');
}

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: #fff;
}

.hero {
  position: relative;

  padding-left: 35px;
}

.hero-image {
  display: block;
  width: 100%;
  height: 100vh;


}

.logo-overlay {
  position: absolute;
  top: 24px;
  left: 0;
  height: clamp(48px, 6.5vw, 88px);
  width: auto;
  z-index: 2;
  margin-left: 35px;
}

.text-block {
  position: absolute;
  left: 0;
  bottom: 32px;
  max-width: min(52ch, 520px);
  z-index: 2;
  margin-left: 35px;
}

.text-title {
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.2;
  margin: 0 0 10px 0;
  color: #fff;
}

.text-coming-soon {
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 14px;         
  line-height: 1.2;
  letter-spacing: 0.02em;


  background: linear-gradient(137.75deg,
    #00C2FF -8.24%,
    #7EAFF1 25.59%,
    #8F31C9 58.19%,
    #ECA7E8 82.2%,
    #FF29C3 100.83%
  );

  background-clip: text;          
  -webkit-background-clip: text;  

  color: transparent;             
  -webkit-text-fill-color: transparent; 

  display: inline-block;
}

@media (max-width: 768px) {
  .hero { padding: 0 10px; }
  .hero-image { height: 50vh; }
  .logo-overlay { margin-left: 10px; }
  .text-block { bottom: 30px; max-width: calc(100% - 20px); margin-left: 10px; }
  .text-title, .text-coming-soon { font-size: 12px; }
}