/* Esattia metallic motion system — built around the original wave mark. */
:root{
  --metal-dark:#08090a;
  --metal-mid:#555960;
  --metal-light:#f4f5f6;
  --metal-silver:#aeb2b8;
}

@keyframes esattia-metal-flow{
  0%{background-position:0% 50%}
  100%{background-position:260% 50%}
}

@keyframes esattia-logo-float{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-7px) scale(1.018)}
}

@keyframes esattia-icon-breathe{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(0,0,0,.1)}
  50%{box-shadow:inset 0 1px 0 #fff,0 15px 30px rgba(0,0,0,.17)}
}

.metal-mark{
  width:min(300px,62vw);
  height:112px;
  margin:0 auto 22px;
  background:linear-gradient(112deg,#050505 2%,#34373b 18%,#c9ccd0 32%,#fff 39%,#6f7378 49%,#090a0b 62%,#aeb2b8 78%,#151719 94%);
  background-size:420% 100%;
  -webkit-mask:url("mark.png") center/contain no-repeat;
  mask:url("mark.png") center/contain no-repeat;
  animation:esattia-metal-flow 4.2s linear infinite,esattia-logo-float 4.8s ease-in-out infinite;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.12));
}

.btn.primary,.nav-cta{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.2)!important;
  background:linear-gradient(112deg,#050505 4%,#202226 24%,#73777d 40%,#17191c 53%,#050505 68%,#4e5258 84%,#08090a 98%)!important;
  background-size:360% 100%!important;
  animation:esattia-metal-flow 3.2s linear infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(0,0,0,.14);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease!important;
}

.btn.primary:hover,.nav-cta:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 30px rgba(0,0,0,.22);
  filter:brightness(1.12);
}

.btn.primary:active,.nav-cta:active{transform:translateY(0) scale(.98)}
.btn.primary:focus-visible,.nav-cta:focus-visible{outline:3px solid #8c9198;outline-offset:3px}

.feature-icon,.tool-proof-icon,.ai-proof>img,.product-overview-card>img{
  border:1px solid #b8bbc0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(0,0,0,.1);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  animation:esattia-icon-breathe 4.5s ease-in-out infinite;
}

.feature-row:hover .feature-icon,
.section-inner:hover>.tool-proof-icon,
.ai-proof:hover>img,
.product-overview-card:hover>img{
  transform:translateY(-3px);
  border-color:#565a60;
  box-shadow:inset 0 1px 0 #fff,0 16px 34px rgba(0,0,0,.16);
}

.prompt-card,.stage,.tool-cell,.flag-card{
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.prompt-card:hover,.stage:hover,.tool-cell:hover,.flag-card:hover{
  transform:translateY(-3px);
  border-color:#8f9399;
  box-shadow:0 16px 36px -28px rgba(0,0,0,.55);
}

.real-ui,.product-overview-shot,.setup-shot,.ai-proof-shot{
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease;
}
.real-ui:hover,.product-overview-shot:hover,.setup-shot:hover,.ai-proof-shot:hover{
  transform:translateY(-5px) scale(1.008);
  box-shadow:0 24px 54px rgba(0,0,0,.17);
}

@supports not ((mask:url("mark.png")) or (-webkit-mask:url("mark.png"))){
  .metal-mark{background:url("mark.png") center/contain no-repeat;animation:none;filter:none}
}

@media (prefers-reduced-motion:reduce){
  .metal-mark,.btn.primary,.nav-cta,.feature-icon,.tool-proof-icon,.ai-proof>img,.product-overview-card>img{animation:none!important;background-position:50% 50%!important}
  .btn.primary,.nav-cta,.feature-icon,.tool-proof-icon,.ai-proof>img,.product-overview-card>img,.prompt-card,.stage,.tool-cell,.flag-card,.real-ui,.product-overview-shot,.setup-shot,.ai-proof-shot{transition:none!important}
}

@media (max-width:620px){
  .metal-mark{height:86px;margin-bottom:18px}
}