body[data-ui-accent="cyan"]{--ui-accent:#08b9db;--ui-soft:#82e3f0;--ui-ink:#061921;--ui-tint:#08b9db18;--ui-shadow:#08b9db48}
body[data-ui-accent="orange"]{--ui-accent:#f7a20b;--ui-soft:#ffd995;--ui-ink:#171511;--ui-tint:#f7a20b18;--ui-shadow:#f7a20b48}
body[data-ui-accent="blue"]{--ui-accent:#4ebfe4;--ui-soft:#a9dde1;--ui-ink:#071923;--ui-tint:#4ebfe418;--ui-shadow:#4ebfe448}
body[data-ui-accent="purple"]{--ui-accent:#a352d1;--ui-soft:#d9a8ef;--ui-ink:#130d18;--ui-tint:#a352d118;--ui-shadow:#a352d148}
body[data-ui-accent="rust"]{--ui-accent:#bd6268;--ui-soft:#efb3b6;--ui-ink:#160d0e;--ui-tint:#bd62681f;--ui-shadow:#bd62684d}

.button,.header-store,.language-button,.home-link,.contact-submit,.text-link,.card-link,.site-header nav a,.app-menu-button,.app-menu a,.back-to-top,footer a:not(.brand){transition:color .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease}

@media(hover:hover){
  .button.primary:hover,.contact-submit:hover{
    background:var(--ui-soft);
    color:var(--ui-ink);
    transform:translateY(-3px);
    box-shadow:0 14px 32px var(--ui-shadow);
  }
  .button.secondary:hover{
    border-color:var(--ui-accent);
    background:var(--ui-tint);
    color:var(--ui-soft);
    transform:translateY(-3px);
  }
  .site-header .header-store:hover,.site-header .language-button:hover,.home-link:hover{
    border-color:var(--ui-accent);
    background:var(--ui-tint);
    color:#fff;
  }
  .site-header nav a:hover,.app-menu-button:hover{color:var(--ui-soft)}
  .app-menu a:hover{background:var(--ui-tint)}
  .back-to-top:hover{background:var(--ui-soft);color:var(--ui-ink)}
  .text-link:hover,footer a:not(.brand):hover{
    color:var(--ui-accent);
  }
  .text-link:hover{transform:translateX(4px)}
  .app-card:hover .card-link{transform:translateX(5px)}
  .hero-app:hover strong{color:var(--ui-accent)}
}

.button:focus-visible,.header-store:focus-visible,.language-button:focus-visible,.home-link:focus-visible,.contact-submit:focus-visible,.text-link:focus-visible,.app-card:focus-visible,.hero-app:focus-visible,.site-header nav a:focus-visible,.app-menu-button:focus-visible,.app-menu a:focus-visible,.back-to-top:focus-visible,footer a:focus-visible{
  outline:3px solid var(--ui-accent);
  outline-offset:4px;
}

@media(prefers-reduced-motion:reduce){.button,.header-store,.language-button,.home-link,.contact-submit,.text-link,.card-link,.site-header nav a,.app-menu-button,.app-menu a,.back-to-top,footer a:not(.brand){transition:none}}

/* The App pages contain deliberately oversized product mockups. On narrow
   iPhones those elements must stay visually cropped without widening the page. */
@media(max-width:800px){
  html.app-page,body.app-page{width:100%;max-width:100%;overflow-x:hidden}
  body.app-page .site-header{width:100%;max-width:100%;min-width:0;padding-inline:20px;gap:12px}
  body.app-page .site-header .brand{min-width:0;flex:0 1 auto}
  body.app-page .site-header .brand strong{white-space:nowrap}
  body.app-page .site-header .header-store{display:none!important}
  body.app-page .site-header .language-picker{margin-left:auto;flex:0 0 auto}
  body.app-page .site-header .menu-button{display:block;flex:0 0 auto;margin-left:0}
  body.app-page .site-header nav.open{box-sizing:border-box;width:100%;max-width:100%;overflow-x:hidden}
  body.app-page main,body.app-page section,body.app-page footer{max-width:100%}
  body.app-page .hero,body.app-page .hero-copy,body.app-page .hero-product,
  body.app-page .intro,body.app-page .catalog-feature,body.app-page .features,
  body.app-page .gallery,body.app-page .final-cta{min-width:0}
}

@media(max-width:390px){
  body.app-page .site-header{padding-inline:16px;gap:9px}
  body.app-page .site-header .brand{font-size:18px;gap:8px}
  body.app-page .site-header .brand-mark{width:32px;height:32px}
  body.app-page .site-header .language-button{padding-inline:9px}
}