.elementor-26 .elementor-element.elementor-element-c10aaa1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26 .elementor-element.elementor-element-c30ccc3{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26 .elementor-element.elementor-element-c50eee5{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* ---- Brändivärit (voit säätää) ---- */
:root{
  --brand-deep: #0D1B2A;   /* tumma sininen */
  --brand-main: #1E3A8A;   /* pääsininen */
  --brand-mid:  #2B5CC4;   /* kirkkaampi sininen */
  --brand-lite: #DDE7FF;   /* vaalea sininen */
  --brand-ink:  #0B1220;   /* tumma teksti, jos tarvitset */
  --brand-gold: #C7A756;   /* hienovarainen arvokorostus */
}

/* ---- Hero-section luokalla .hero-animated ---- */
.hero-animated{
  color: #fff;
  overflow: hidden;

  /* Peruspohja: hidas, elävä taustagradientti */
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(221,231,255,.20), transparent 60%),
    radial-gradient(900px 480px  at  -10% 10%, rgba(43,92,196,.25), transparent 60%),
    linear-gradient(150deg, var(--brand-deep), #112743 40%, #16325C 70%);
  background-size: 120% 120%, 120% 120%, 100% 100%;
  animation: heroGradientShift 60s ease-in-out infinite;
}

/* Sisältö kerros ylös */
.hero-animated > *{
  position: relative;
  z-index: 2;
}

/* Liikkuvat “fade”-pilvet (häivytykset) */
.hero-animated::before,
.hero-animated::after{
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 1;
  filter: blur(50px);
  will-change: transform;
}

/* Kylmä sininen + vaalea häivytys */
.hero-animated::before{
  background:
    radial-gradient(40% 35% at 25% 30%, rgba(43,92,196,.35), transparent 60%),
    radial-gradient(35% 35% at 75% 20%, rgba(221,231,255,.30), transparent 60%);
  animation: heroDriftA 32s ease-in-out infinite alternate;
}

/* Lämmin korostus + toinen sininen häivytys */
.hero-animated::after{
  background:
    radial-gradient(38% 38% at 70% 70%, rgba(199,167,86,.12), transparent 62%),
    radial-gradient(32% 32% at 15% 80%, rgba(141,177,255,.20), transparent 60%);
  animation: heroDriftB 46s ease-in-out infinite alternate;
}

/* Kontrastin varmistava hienovarainen tumma overlay alareunassa */
.hero-animated::marker{ /* ei vaikutusta; jätä vain placeholderiksi jos haluat lisäkerroksen myöhemmin */ }

/* ---- Animaatiot ---- */
@keyframes heroGradientShift{
  0%   { background-position: 0% 0%, 100% 0%, 0% 0%; }
  50%  { background-position: 100% 50%, 0% 50%, 0% 0%; }
  100% { background-position: 0% 0%, 100% 0%, 0% 0%; }
}

@keyframes heroDriftA{
  0%   { transform: translate(-6%, -4%) scale(1.00) rotate(0.001deg); }
  50%  { transform: translate(4%,  1%)  scale(1.06) rotate(0.001deg); }
  100% { transform: translate(-6%, -4%) scale(1.00) rotate(0.001deg); }
}

@keyframes heroDriftB{
  0%   { transform: translate(6%, 4%)   scale(1.00) rotate(0.001deg); }
  50%  { transform: translate(-3%, -2%) scale(1.08) rotate(0.001deg); }
  100% { transform: translate(6%, 4%)   scale(1.00) rotate(0.001deg); }
}

/* ---- Pienet käyttöystävällisyys- ja suorituskykyparannukset ---- */
.hero-animated .btn{
  font-size: clamp(16px, 2vw, 18px);
  padding: .9rem 1.35rem;
  border-radius: 12px;
}

/* Kunnioita reduced motion -asetusta */
@media (prefers-reduced-motion: reduce){
  .hero-animated,
  .hero-animated::before,
  .hero-animated::after{
    animation: none !important;
  }
}

/* Sininen häivytetty otsikko */
.fade-headline-blue{
  display: inline-block;
  background: linear-gradient(90deg, #1E3A8A, #2B5CC4, #8FB1FF);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* Kultainen häivytetty otsikko */
.fade-headline-gold{
  display: inline-block;
  background: linear-gradient(90deg, #C7A756, #E5CF87, #C7A756);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* Sininen gradientti */
.btn-fade-blue .elementor-button {
  background: linear-gradient(90deg, #1E3A8A, #2B5CC4, #8FB1FF);
  background-size: 200% auto;
  color: #fff;
  transition: background-position .5s ease;
}
.btn-fade-blue .elementor-button:hover {
  background-position: right center;
  color: #fff;
}

/* Kultainen gradientti */
.btn-fade-gold .elementor-button {
  background: linear-gradient(90deg, #C7A756, #E5CF87, #C7A756);
  background-size: 200% auto;
  color: #fff;
  transition: background-position .5s ease;
}
.btn-fade-gold .elementor-button:hover {
  background-position: right center;
  color: #fff;
}/* End custom CSS */