/* ============ Hero background & fade ============ */
.hero{position:relative}
.gradient-mesh{
  position:absolute;inset:-10% -20% -10% -20%;filter:blur(60px);z-index:-1;
  background:
    radial-gradient(900px 500px at 15% 10%, color-mix(in oklab,var(--accent-1),transparent 70%) 0, transparent 60%),
    radial-gradient(800px 500px at 85% 15%, color-mix(in oklab,var(--accent-2),transparent 72%) 0, transparent 60%),
    radial-gradient(700px 500px at 40% 80%, rgba(255,168,76,.18) 0, transparent 60%),
    radial-gradient(600px 500px at 80% 70%, rgba(255,122,24,.18) 0, transparent 60%);
  animation:floaty 18s ease-in-out infinite alternate;
}
@keyframes floaty{to{transform:translateY(-3%) scale(1.03)}}

.hero-fade{
  position:absolute;left:0;right:0;bottom:-1px;height:120px;
  background:linear-gradient(180deg,transparent,rgba(2,6,23,.06));pointer-events:none
}

/* Homepage hero — responsive text / image separation */
.hero__grid{
  isolation:isolate;
}
.hero__content{
  min-width:0;
  max-width:100%;
}
.hero__title{
  overflow-wrap:break-word;
  word-wrap:break-word;
  max-width:100%;
}
html[lang="fi"] .hero__title,
html[lang="sv"] .hero__title{
  hyphens:auto;
  -webkit-hyphens:auto;
}
.hero__visual{
  min-width:0;
  contain:layout;
  isolation:isolate;
}
@media (min-width:768px) and (max-width:1023px){
  .hero__visual{
    max-width:560px;
    margin-inline:auto;
  }
}
@media (min-width:1024px){
  .hero__content{
    padding-right:.5rem;
  }
  .hero__visual{
    flex-shrink:0;
  }
}
.hero__actions{
  min-width:0;
}
@media (max-width:767px){
  .hero__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero__actions .forge-btn,
  .hero__actions .ghost-btn{
    width:100%;
    justify-content:center;
  }
}


/* public/css/overrides.css */
.video-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* Show only the correct video for the current theme */
html.dark .video--forest { display: none; }
html:not(.dark) .video--forge { display: none; }