/* 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{
  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{
  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)}

/* Compact nav CTA: black to dark-charcoal pill that stays visible on the dark header.
   Higher specificity so page-level inline .nav-cta rules (black text) cannot override it. */
header .navlinks a.nav-cta{
  color:#fff!important;
  opacity:1!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:linear-gradient(180deg,#43464c 0%,#26282c 45%,#0b0c0d 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 10px rgba(0,0,0,.45);
  text-shadow:0 1px 1px rgba(0,0,0,.6);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,border-color .2s ease!important;
}
header .navlinks a.nav-cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.2);
  border-color:rgba(255,255,255,.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 6px 16px rgba(0,0,0,.5);
}
.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}
  header .navlinks a.nav-cta{transition:none!important}
  header .navlinks a.nav-cta:hover{transform:none}
}

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

/* Shared accessibility basics, mirroring compliance.css on the legal pages. */
.skip-link{position:fixed;left:16px;top:-120px;padding:12px 18px;background:#fff;color:#111;z-index:1000;border:2px solid #111}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid #0066cc!important;outline-offset:4px!important}
header :focus-visible,.dark :focus-visible{outline-color:#fff!important}
main:focus:not(:focus-visible){outline:none}
footer .foot-links{flex-wrap:wrap}
footer nav.legal-links{display:flex;max-width:none;height:auto;margin:0;padding:20px 0 0;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:12px 24px;font-size:.85rem}
footer nav.legal-links a{padding:5px 0;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  body>header{position:relative}
  body>header nav{height:auto;padding:12px 18px;flex-wrap:wrap;gap:14px}
  body>header .navlinks{flex-wrap:wrap;gap:8px 18px}
  body>header .navlinks a:not(.nav-cta){display:inline-flex;align-items:center;font-size:.85rem;min-height:36px}
}